From 72c0c55fba3d746950a755f5d2a76df0298de0f0 Mon Sep 17 00:00:00 2001 From: florian-boubou Date: Mon, 6 Jan 2020 21:13:33 +0100 Subject: [PATCH] Tidy up charts sources --- client/src/components/Donut.js | 333 ------------------ .../src/components/{ => charts}/BarChart.js | 0 client/src/components/charts/Donut.js | 333 ++++++++++++++++++ .../src/components/{ => charts}/LineChart.js | 4 +- client/src/components/charts/index.js | 9 + .../propertysale/AverageSurfacePrice.js | 20 +- client/src/index.js | 8 - 7 files changed, 354 insertions(+), 353 deletions(-) delete mode 100644 client/src/components/Donut.js rename client/src/components/{ => charts}/BarChart.js (100%) create mode 100644 client/src/components/charts/Donut.js rename client/src/components/{ => charts}/LineChart.js (96%) create mode 100644 client/src/components/charts/index.js diff --git a/client/src/components/Donut.js b/client/src/components/Donut.js deleted file mode 100644 index 5c195d5..0000000 --- a/client/src/components/Donut.js +++ /dev/null @@ -1,333 +0,0 @@ -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
- } -} - -export default Donut; \ No newline at end of file diff --git a/client/src/components/BarChart.js b/client/src/components/charts/BarChart.js similarity index 100% rename from client/src/components/BarChart.js rename to client/src/components/charts/BarChart.js diff --git a/client/src/components/charts/Donut.js b/client/src/components/charts/Donut.js new file mode 100644 index 0000000..e21a455 --- /dev/null +++ b/client/src/components/charts/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
+ } +} + +export default Donut; \ No newline at end of file diff --git a/client/src/components/LineChart.js b/client/src/components/charts/LineChart.js similarity index 96% rename from client/src/components/LineChart.js rename to client/src/components/charts/LineChart.js index f4a3f79..2ef409a 100644 --- a/client/src/components/LineChart.js +++ b/client/src/components/charts/LineChart.js @@ -97,12 +97,12 @@ class Axis extends React.Component { } renderAxis() { - var node = ReactDOM.findDOMNode(this); + const node = ReactDOM.findDOMNode(this); d3.select(node).call(this.props.axis); } render() { - var translate = "translate(0,"+(this.props.h)+")"; + const translate = "translate(0,"+(this.props.h)+")"; return ( diff --git a/client/src/components/charts/index.js b/client/src/components/charts/index.js new file mode 100644 index 0000000..b7a1a21 --- /dev/null +++ b/client/src/components/charts/index.js @@ -0,0 +1,9 @@ +import LineChart from "./LineChart"; +import BarChart from "./BarChart"; +import Donut from "./Donut"; + +export default { + LineChart, + Donut, + BarChart, +}; \ No newline at end of file diff --git a/client/src/components/propertysale/AverageSurfacePrice.js b/client/src/components/propertysale/AverageSurfacePrice.js index c3d540b..918ed8d 100644 --- a/client/src/components/propertysale/AverageSurfacePrice.js +++ b/client/src/components/propertysale/AverageSurfacePrice.js @@ -2,7 +2,7 @@ import React from "react"; import { connect } from "react-redux"; import PropTypes from "prop-types"; -import LineChart from "../LineChart"; +import LineChart from "../charts/LineChart"; import * as actions from "../../actions/propertysale/average_surface_price"; @@ -23,18 +23,18 @@ class AverageSurfacePrice extends React.Component {

Evolution du prix du m² moyen

{ this.props.error && -

{this.props.error}

+

{this.props.error}

} { this.props.loading ? -

Chargement...

- : - +

Chargement...

+ : + } ; } diff --git a/client/src/index.js b/client/src/index.js index e7d27f5..7f2b63e 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -15,10 +15,6 @@ import 'bootstrap/dist/css/bootstrap.css'; import 'font-awesome/css/font-awesome.css'; 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'; import Homepage from './homepage'; @@ -44,10 +40,6 @@ ReactDOM.render( - - - - {propertySaleRoutes}

Not Found

} /> -- GitLab