From 3cf1a2654ace2ac5080b60bdf32e592e4f66b6b3 Mon Sep 17 00:00:00 2001
From: Mariama <mdjulde@gmail.com>
Date: Mon, 6 Jan 2020 10:23:22 +0100
Subject: [PATCH] Mise en place du la partie front end pour
 la-visualiser-des-graphiques-comptant-le-nombre-de-ventes-par-jour-semaine-mois-annee-pour-un-intervalle-de-temps-donne

---
 client/src/Helpers/Bar.js                     | 116 ++++++++++++++++++
 .../valeursfonciere/Nombredeventeparjma.js    | 105 ++++++++++++++++
 .../src/components/valeursfonciere/index.js   |   3 +-
 client/src/routes/valeursfonciere.js          |   5 +-
 4 files changed, 226 insertions(+), 3 deletions(-)
 create mode 100644 client/src/Helpers/Bar.js
 create mode 100644 client/src/components/valeursfonciere/Nombredeventeparjma.js

diff --git a/client/src/Helpers/Bar.js b/client/src/Helpers/Bar.js
new file mode 100644
index 0000000..518ae76
--- /dev/null
+++ b/client/src/Helpers/Bar.js
@@ -0,0 +1,116 @@
+import React, { useEffect, useRef, useState } from "react";
+import * as d3 from "d3";
+
+const colors = d3.scaleOrdinal(d3.schemeCategory10);
+const format = d3.format(".2f");
+
+const XAxis = ({ top, bottom, left, right, height, scale }) => {
+  const axis = useRef(null);
+
+  useEffect(() => {
+    d3.select(axis.current).call(d3.axisBottom(scale));
+  });
+
+  return (
+    <g
+      className="axis x"
+      ref={axis}
+      transform={`translate(${left}, ${height - bottom})`}
+    />
+  );
+};
+
+const YAxis = ({ top, bottom, left, right, scale }) => {
+  const axis = useRef(null);
+
+  useEffect(() => {
+    d3.select(axis.current).call(d3.axisLeft(scale));
+  });
+
+  return (
+    <g className="axis y" ref={axis} transform={`translate(${left}, ${top})`} />
+  );
+};
+
+const Rect = ({ data, x, y, height, top, bottom }) => {
+  return (
+    <g transform={`translate(${x(data.date)}, ${y(data.value)})`}>
+      <rect
+        width={x.bandwidth()}
+        height={height - bottom - top - y(data.value)}
+        fill={colors(data.index)}
+      />
+      <text
+        transform={`translate(${x.bandwidth() / 2}, ${-2})`}
+        textAnchor="middle"
+        alignmentBaseline="baseline"
+        fill="grey"
+        fontSize="10"
+      >
+        {format(data.value)}
+      </text>
+    </g>
+  );
+};
+
+const Bar = props => {
+  const [sort, setSort] = useState(false);
+
+  const data = sort
+    ? [...props.data].sort((a, b) => b.value - a.value)
+    : [...props.data];
+
+  const x = d3
+    .scaleBand()
+    .range([0, props.width - props.left - props.right])
+    .domain(data.map(d => d.date))
+    .padding(0.1);
+
+  const y = d3
+    .scaleLinear()
+    .range([props.height - props.top - props.bottom, 0])
+    .domain([0, d3.max(data, d => d.value)]);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setSort(!sort);
+        }}
+      >
+      Basculer le tri
+      </button>
+      <svg width={props.width} height={props.height}>
+        <XAxis
+          scale={x}
+          top={props.top}
+          bottom={props.bottom}
+          left={props.left}
+          right={props.right}
+          height={props.height}
+        />
+        <YAxis
+          scale={y}
+          top={props.top}
+          bottom={props.bottom}
+          left={props.left}
+          right={props.right}
+        />
+        <g transform={`translate(${props.left}, ${props.top})`}>
+          {data.map((d, i) => (
+            <Rect
+              data={d}
+              x={x}
+              y={y}
+              top={props.top}
+              bottom={props.bottom}
+              height={props.height}
+            />
+          ))}
+        </g>
+      </svg>
+    </>
+  );
+};
+
+export default Bar;
diff --git a/client/src/components/valeursfonciere/Nombredeventeparjma.js b/client/src/components/valeursfonciere/Nombredeventeparjma.js
new file mode 100644
index 0000000..665ccfd
--- /dev/null
+++ b/client/src/components/valeursfonciere/Nombredeventeparjma.js
@@ -0,0 +1,105 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import * as d3 from "d3";
+import Bar from "../../Helpers/Bar";
+
+class Nombredeventeparjma extends React.Component {
+	constructor(props) {
+	  super(props);
+  
+	  this.state = {mois: 'month', dateDebut: '2015-01-01',dateFin: '2015-04-01',data: []};
+	  
+	};
+  
+	componentWillMount(){
+		console.log('Je suis appeler en premier!');
+	  }
+	
+
+	  getData(){
+		fetch(`https://${document.domain}:8443/nombre_devente_parJMA?interval=${this.state.mois}&dateDebut=${this.state.dateDebut}&dateFin=${this.state.dateFin}`)
+		  .then(response => {
+			if (response.ok) {
+			  const data = response.json()
+			  return data;
+			} else {
+			  throw new Error('Something went wrong ...');
+			}
+		  })
+		  .then(data => {
+			this.setState({data: data });
+		  })
+		  .catch(error => console.log("error"));
+	  }
+	
+	  componentDidMount(){
+		this.timerID = setInterval(
+			() => this.getData(),
+			1000
+		  );
+	
+	  }
+
+	handleChangeDateDebut(event) {
+	  this.setState({ dateDebut: event.target.value});
+	};
+	handleChangeDateDebutDateFin(event) {
+		this.setState({dateFin: event.target.value});
+	  };
+	  handleChangeDateDebutMois(event) {
+		this.setState({mois: event.target.value});
+	  };
+
+	render() {
+
+		function parseData(data) {
+			var arr = [];
+			data.map(function (thisList){
+				arr.push({
+					nombre_de_vente: thisList.nombre_de_vente | 0,
+				    dat : thisList.dat 
+				});
+			})
+			return arr;
+		}
+
+		const c  =parseData(this.state.data)
+
+		  const generateData = () =>
+		   c.map((item, index) => ({
+			  index: index,
+			  date: new Date(item.dat).toLocaleDateString('fr-FR', {day: 'numeric', year: 'numeric', month: 'long' }),
+			  value: item.nombre_de_vente
+			}));
+		   
+		  const data = generateData();
+		  console.log(data)
+		  
+	  return (
+	    <div>
+		  <div>
+        
+		  <input type="text" onChange={this.handleChangeDateDebutMois.bind(this)}/>
+
+		  <input type="date" onChange={this.handleChangeDateDebut.bind(this)}
+		   min="2015-01-01" max="2019-12-31"/>
+		
+		 <input type="date" onChange={this.handleChangeDateDebutDateFin.bind(this)}
+		   min="2015-01-01" max="2019-12-31"/>
+		  <Bar
+          data={data}
+          width={800}
+          height={800}
+          top={20}
+          bottom={30}
+          left={100}
+          right={30}
+        />
+         </div>
+		  		
+      </div>
+	  );
+	}
+  }
+  
+  export default Nombredeventeparjma;
\ No newline at end of file
diff --git a/client/src/components/valeursfonciere/index.js b/client/src/components/valeursfonciere/index.js
index 0e1ecc8..8442570 100644
--- a/client/src/components/valeursfonciere/index.js
+++ b/client/src/components/valeursfonciere/index.js
@@ -3,5 +3,6 @@ import List from './List';
 import Update from './Update';
 import Show from './Show';
 import Prixmoyenparannee from './Prixmoyenparannee';
+import Nombredeventeparjma from './Nombredeventeparjma';
 
-export { Create, List, Update, Show, Prixmoyenparannee};
+export { Create, List, Update, Show, Prixmoyenparannee, Nombredeventeparjma};
diff --git a/client/src/routes/valeursfonciere.js b/client/src/routes/valeursfonciere.js
index 5d4316b..b9c3a64 100644
--- a/client/src/routes/valeursfonciere.js
+++ b/client/src/routes/valeursfonciere.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import { List, Create, Update, Show,Prixmoyenparannee} from '../components/valeursfonciere/';
+import { List, Create, Update, Show,Prixmoyenparannee, Nombredeventeparjma} from '../components/valeursfonciere/';
 
 export default [
   <Route path="/valeurs_foncieres/create" component={Create} exact key="create" />,
@@ -8,6 +8,7 @@ export default [
   <Route path="/valeurs_foncieres/show/:id" component={Show} exact key="show" />,
   <Route path="/valeurs_foncieres/" component={List} exact strict key="list" />,
   <Route path="/valeurs_foncieres/:page" component={List} exact strict key="page" />,
-  <Route path="/a/" component={Prixmoyenparannee} exact strict key="a" />
+  <Route path="/prixmoyenparannee" component={Prixmoyenparannee} exact strict key="a" />,
+  <Route path="/nombredeventeparjma" component={Nombredeventeparjma} exact strict key="aa" />
 
 ];
-- 
GitLab