From 912098d60189116c44beee57237ee2b127902e49 Mon Sep 17 00:00:00 2001
From: MOAL Fleurian <flcmteam18@hotmail.fr>
Date: Mon, 6 Jan 2020 11:20:41 +0100
Subject: [PATCH] ajout du diagramme circulaire(non react)

---
 api/src/DataFixtures/AppFixtures.php |   7 +-
 client/src/components/Donut.css      |  27 +++
 client/src/components/Donut.js       | 333 +++++++++++++++++++++++++++
 client/src/components/LineChart.js   |   3 +-
 client/src/index.js                  |   2 +
 5 files changed, 367 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/Donut.css
 create mode 100644 client/src/components/Donut.js

diff --git a/api/src/DataFixtures/AppFixtures.php b/api/src/DataFixtures/AppFixtures.php
index cbfd0dd..8105f73 100755
--- a/api/src/DataFixtures/AppFixtures.php
+++ b/api/src/DataFixtures/AppFixtures.php
@@ -1,4 +1,5 @@
 <?php 
+// si il vous manque des fichiers, pensez à mettre les fichiers valeursfoncières-*.txt dans le dossier DataFixture
 namespace App\DataFixtures;
 
 use App\Entity\PropertySale;
@@ -14,7 +15,7 @@ class AppFixtures extends Fixture
     {
         echo __DIR__;
         // create 20 products! Bam!
-        for($annee = 2015;$annee<=2019;$annee++){
+        for($annee = 2015;$annee<=2015;$annee++){
             echo "chargement des données de l'année ".$annee."\n\n";
             $json = file_get_contents(__DIR__.'/deps.json');
             $deps = json_decode($json,true);
@@ -35,7 +36,7 @@ class AppFixtures extends Fixture
                 $line = fgetcsv($file,1024,"|");
                     // on ne prend en compte que les ventes, tout autre élément est ignoré car l'evenement peut influer sur le prix
                     // puisque le nombre de vente est tres supérieur aux autre type de mutation le résultat n'en sera affecté que de façon négligeable
-                    if(strcmp($line[9],'Vente')==0 &&( strcmp($line[36],'Maison')==0 || strcmp($line[36],'Appartement')==0)){
+                    //if(strcmp($line[9],'Vente')==0 &&( strcmp($line[36],'Maison')==0 || strcmp($line[36],'Appartement')==0)){
                         $propertysale = new PropertySale();
                         $propertysale->price = doubleval($line[10]);
                         $propertysale->surface = $line[38]==''?0:intval($line[38]);
@@ -53,7 +54,7 @@ class AppFixtures extends Fixture
                         }
                         
                         
-                    }
+                    //}
                 
                 
             }
diff --git a/client/src/components/Donut.css b/client/src/components/Donut.css
new file mode 100644
index 0000000..43be2f5
--- /dev/null
+++ b/client/src/components/Donut.css
@@ -0,0 +1,27 @@
+div#root {
+    width: 100%;
+    height: 600;
+}
+
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    width: 960px;
+    height: 500px;
+    position: relative;
+  }
+  
+  svg {
+  width: 100%;
+  height: 100%;
+  }
+  
+  path.slice{
+  stroke-width:2px;
+  }
+  
+  polyline{
+  opacity: .3;
+  stroke: black;
+  stroke-width: 2px;
+  fill: none;
+  }
\ No newline at end of file
diff --git a/client/src/components/Donut.js b/client/src/components/Donut.js
new file mode 100644
index 0000000..5c195d5
--- /dev/null
+++ b/client/src/components/Donut.js
@@ -0,0 +1,333 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3';
+import './Donut.css';
+
+class Donut extends Component {
+
+    componentDidMount() {
+        this.drawChart();
+    }
+
+    componentDidUpdate() {
+        this.drawChart();
+    }
+
+
+    drawChart() {
+        var regions = ["Normandie", "Normandie-2", "Region centre loire", "Bretage", "PACA", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"];
+        var percentage = [0,1,2,3,4,5,6,8,8,9,10];
+        var datas = [51,12,32,48,51,63,48,39,60,48,10];
+        var data2 = [10,84,28,12,1,58,64,1,30,10,80];
+
+        var regionsjson = [
+        {nom: "reg1",percentage: "10" },
+        {nom: "reg2",percentage: "20" },
+        {nom: "reg3",percentage: "10" },
+        {nom: "reg4",percentage: "20" },
+        ]
+
+        var width = 960,
+            height = 430;
+
+        var svg = d3.select("div#app")
+        .append("svg")
+        .attr("width", width + 100)
+        .attr("height", height + 100)
+        .append("g")
+
+        svg.append("g")
+        .attr("class", "slices");
+        svg.append("g")
+        .attr("class", "percent");
+        svg.append("g")
+        .attr("class", "labels");
+        svg.append("g")
+        .attr("class", "lines");
+
+        var radius = Math.min(width, height) / 2;
+
+        var pie = d3.pie()
+        .sort(null)
+        .value(function(d) {
+            return d.value;
+        });
+
+        var arc = d3.arc()
+        .outerRadius(radius * 0.8)
+        .innerRadius(radius * 0.4);
+
+        var outerArc = d3.arc()
+        .innerRadius(radius * 0.9)
+        .outerRadius(radius * 0.9);
+
+        svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+        var key = function(d){ return d.data.label; };
+        var percentkey = function(d,i){ return {idx: i, data: d.data.percent}; };
+        var colorRange = d3.schemePastel1;
+        colorRange.push(...d3.schemePaired);
+        var color =  d3.scaleOrdinal().range(colorRange).domain(regions);
+
+        function randomData (){
+        var labels = color.domain();
+            console.log(labels);
+        return labels.map(function(label,i){
+            return { label: label, value: datas[i],percent:percentage[i]  }
+        });
+        }
+
+
+
+
+            
+        function changeinit(data) {
+
+        /* ------- PIE SLICES -------*/
+        var slice = svg.select(".slices").selectAll("path.slice")
+        .data(pie(data), key);
+
+        slice.enter()
+        .insert("path")
+        .style("fill", function(d,i) { return color(i); })
+        .attr("class", "slice")
+        .transition().duration(1000)
+        .attrTween("d", function(d) {
+            this._current = this._current || d;
+            var interpolate = d3.interpolate(this._current, d);
+            this._current = interpolate(0);
+            return function(t) {
+                return arc(interpolate(t));
+            };
+        })
+
+
+
+        slice.exit()
+        .remove();
+
+        /* ------- TEXT LABELS -------*/
+            var percent = svg.select(".percent").selectAll("text")
+        .data(pie(data), percentkey.data);
+
+            percent.enter()
+        .append("text")
+        .attr("dy", ".35em")
+        .text(function(d) {
+        return d.data.percent+"%";
+        }).transition().duration(1000)
+        .attrTween("transform", function(d) {
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+        var d2 = interpolate(t);
+        var pos = arc.centroid(d2);
+        //pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
+        return "translate("+ pos +")";
+        };
+        })
+
+            percent.exit()
+        .remove();
+
+        var text = svg.select(".labels").selectAll("text")
+        .data(pie(data), key);
+
+        
+
+
+        function midAngle(d){
+        return d.startAngle + (d.endAngle - d.startAngle)/2;
+        }
+            text.enter()
+        .append("text")
+        .attr("dy", ".35em")
+        .text(function(d) {
+        return d.data.label;
+        }).transition().duration(1000)
+        .attrTween("transform", function(d) {
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+        var d2 = interpolate(t);
+        var pos = outerArc.centroid(d2);
+        pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
+        return "translate("+ pos +")";
+        };
+        })
+
+        .styleTween("text-anchor", function(d){
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+        var d2 = interpolate(t);
+        return midAngle(d2) < Math.PI ? "start":"end";
+        };
+        });
+
+        text.exit()
+        .remove();
+        /* ------- SLICE TO TEXT POLYLINES -------*/
+
+        var polyline = svg.select(".lines").selectAll("polyline")
+        .data(pie(data), key);
+
+        polyline.enter()
+        .append("polyline").transition().duration(1000)
+        .attrTween("points", function(d){
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+        var d2 = interpolate(t);
+        var pos = outerArc.centroid(d2);
+        pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
+        return [arc.centroid(d2), outerArc.centroid(d2), pos];
+        };
+        });
+
+        polyline.exit()
+        .remove();
+        };
+
+        function changeupdate(data) {
+
+        /* ------- PIE SLICES -------*/
+        var slice = svg.select(".slices").selectAll("path.slice")
+        .data(pie(data), key);
+
+        slice.enter()
+        .insert("path")
+        .style("fill", function(d,i) { return color(i); })
+        .attr("class", "slice");
+        
+        slice.transition().duration(1000)
+        .attrTween("d", function(d) {
+            this._current = this._current || d;
+            var interpolate = d3.interpolate(this._current, d);
+            this._current = interpolate(0);
+            return function(t) {
+                return arc(interpolate(t));
+            };
+        })
+
+
+
+        slice.exit()
+        .remove();
+
+        /* ------- TEXT LABELS -------*/
+            var percent = svg.select(".percent").selectAll("text")
+        .data(pie(data), percentkey.data);
+
+            percent.enter()
+        .append("text")
+        .attr("dy", ".35em")
+        .text(function(d) {
+        return d.data.percent+"%";
+        });
+        
+        percent.transition().duration(1000)
+        .attrTween("transform", function(d) {
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+        var d2 = interpolate(t);
+        var pos = arc.centroid(d2);
+        //pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
+        return "translate("+ pos +")";
+        };
+        })
+
+            percent.exit()
+        .remove();
+
+        var text = svg.select(".labels").selectAll("text")
+        .data(pie(data), key);
+
+        
+
+
+        function midAngle(d){
+        return d.startAngle + (d.endAngle - d.startAngle)/2;
+        }
+            text.enter()
+        .append("text")
+        .attr("dy", ".35em")
+        .text(function(d) {
+        return d.data.label;
+        });
+        
+        text.transition().duration(1000)
+        .attrTween("transform", function(d) {
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+        var d2 = interpolate(t);
+        var pos = outerArc.centroid(d2);
+        pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
+        return "translate("+ pos +")";
+        };
+        })
+
+        .styleTween("text-anchor", function(d){
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+        var d2 = interpolate(t);
+        return midAngle(d2) < Math.PI ? "start":"end";
+        };
+        });
+
+        text.exit()
+        .remove();
+        /* ------- SLICE TO TEXT POLYLINES -------*/
+
+        var polyline = svg.select(".lines").selectAll("polyline")
+        .data(pie(data), key);
+
+        polyline.enter()
+        .append("polyline");
+        polyline.transition().duration(1000)
+        .attrTween("points", function(d){
+        this._current = this._current || d;
+        var interpolate = d3.interpolate(this._current, d);
+        this._current = interpolate(0);
+        return function(t) {
+        var d2 = interpolate(t);
+        var pos = outerArc.centroid(d2);
+        pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
+        return [arc.centroid(d2), outerArc.centroid(d2), pos];
+        };
+        });
+
+        polyline.exit()
+        .remove();
+        };
+
+
+
+
+        d3.select(".randomize")
+        .on("click", function(){
+        color =  d3.scaleOrdinal()
+            .range(colorRange)
+        .domain(regions);
+        changeupdate(randomData());
+        });
+        changeinit(randomData());
+    }
+
+    
+
+    render() {
+        return <div id="app"></div>
+    }
+}
+
+export default Donut;
\ No newline at end of file
diff --git a/client/src/components/LineChart.js b/client/src/components/LineChart.js
index 95a6858..0b5c7a5 100644
--- a/client/src/components/LineChart.js
+++ b/client/src/components/LineChart.js
@@ -13,7 +13,6 @@ class LineChart extends Component {
 
     // - - - - - - - - - - - 
     drawChart() {
-
         const data = [
             { date: "10/25/2018", value: 1 },
             { date: "10/26/2018", value: 3 },
@@ -142,7 +141,7 @@ class LineChart extends Component {
     }
 
     render() {
-        return <div id = { 'app' } > < /div>
+        return <div id = { 'app' } > </div>
     }
 }
 
diff --git a/client/src/index.js b/client/src/index.js
index 53e468c..5a507bb 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -17,6 +17,7 @@ import * as serviceWorker from './serviceWorker';
 
 import BarChart from './components/BarChart';
 import LineChart from './components/LineChart';
+import Donut from './components/Donut';
 
 // Import your reducers and routes here
 import Welcome from './Welcome';
@@ -46,6 +47,7 @@ ReactDOM.render(
         <Route path="/welcome" component={Welcome} strict={true} exact={true} />
         <Route path="/barchart" component={BarChart} strict={true} exact={true} />
         <Route path="/linechart" component={LineChart} strict={true} exact={true} />
+        <Route path="/donut" component={Donut} strict={true} exact={true} />
         {propertySaleRoutes}
         <Route render={() => <h1>Not Found</h1>} />
       </Switch>
-- 
GitLab