diff --git a/client/src/Helpers/Bar.js b/client/src/Helpers/Bar.js
new file mode 100644
index 0000000000000000000000000000000000000000..518ae76fa40432734657821859cd849e31be6400
--- /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 (
+
+ );
+};
+
+const YAxis = ({ top, bottom, left, right, scale }) => {
+ const axis = useRef(null);
+
+ useEffect(() => {
+ d3.select(axis.current).call(d3.axisLeft(scale));
+ });
+
+ return (
+
+ );
+};
+
+const Rect = ({ data, x, y, height, top, bottom }) => {
+ return (
+
+
+
+ {format(data.value)}
+
+
+ );
+};
+
+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 (
+ <>
+
+
+ >
+ );
+};
+
+export default Bar;
diff --git a/client/src/components/valeursfonciere/Nombredeventeparjma.js b/client/src/components/valeursfonciere/Nombredeventeparjma.js
new file mode 100644
index 0000000000000000000000000000000000000000..665ccfdeda217bda13d11b242663fcda773b5706
--- /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 (
+
+ );
+ }
+ }
+
+ 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 0e1ecc80d58eafb0186e4bc5a5a287fd6f258c24..8442570cb9c42b6beeeaa7c41e0f86a729eb06fc 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 5d4316b0f4a8d714f4b9123335954a0814d90f72..b9c3a64500db0884575c80a3f8187ec0c1ab2b3c 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 [
,
@@ -8,6 +8,7 @@ export default [
,
,
,
-
+ ,
+
];