From a2d698fea762dc63f519142ed5ef8ad6b8bd04d5 Mon Sep 17 00:00:00 2001 From: Tristan RAHARD Date: Fri, 30 Dec 2022 19:18:48 +0100 Subject: [PATCH 1/3] =?UTF-8?q?Ajout=20d'une=20premi=C3=A8re=20page=20de?= =?UTF-8?q?=20visualisation=20de=20diagramme=20TimeSeries?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwa/components/Diagrammes/TimeSeries.tsx | 69 ++++++++++++++++++++++++ pwa/pages/TimeSeries/index.tsx | 29 ++++++++++ 2 files changed, 98 insertions(+) create mode 100644 pwa/components/Diagrammes/TimeSeries.tsx create mode 100644 pwa/pages/TimeSeries/index.tsx diff --git a/pwa/components/Diagrammes/TimeSeries.tsx b/pwa/components/Diagrammes/TimeSeries.tsx new file mode 100644 index 0000000..7d9cab7 --- /dev/null +++ b/pwa/components/Diagrammes/TimeSeries.tsx @@ -0,0 +1,69 @@ +import React, { useEffect, RefObject } from 'react'; +import * as d3 from 'd3'; + +const TimeSeries = () => { + const ref: RefObject = React.createRef(); + useEffect(() => { + draw(); + }); + + const draw = () => { + const margin = { top: 20, right: 20, bottom: 30, left: 50 }; + const width = 800 - margin.left - margin.right; + const height = 400 - margin.top - margin.bottom; + + const container = ref.current; + const svg = d3.select(container) + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('transform', `translate(${margin.left}, ${margin.top})`); + + const data :{ date: Date, value: number }[] = [ + { date: new Date('2020-01-01'), value: 25 }, + { date: new Date('2020-02-01'), value: 37 }, + { date: new Date('2020-03-01'), value: 45 }, + // ... + ]; + + const xScale = d3.scaleTime() + .range([0, width]) + .domain(d3.extent(data, (d) => d.date)); + + const yScale = d3.scaleLinear() + .range([height, 0]) + .domain([0, d3.max(data, (d) => d.value)]); + + const line = d3.line<{ date: Date, value: number }>() + .x((d) => xScale(d.date)) + .y((d) => yScale(d.value)); + + svg.append('path') + .datum(data) + .attr('fill', 'none') + .attr('stroke', 'steelblue') + .attr('stroke-width', 1.5) + .attr('d', line); + + const xAxis = d3.axisBottom(xScale); + const yAxis = d3.axisLeft(yScale); + + svg.append('g') + .attr('transform', `translate(0, ${height})`) + .call(xAxis); + + svg.append('g') + .call(yAxis); + + const g = svg.append('g'); + + }; + + return ( +
+
+ ); +}; + +export default TimeSeries; \ No newline at end of file diff --git a/pwa/pages/TimeSeries/index.tsx b/pwa/pages/TimeSeries/index.tsx new file mode 100644 index 0000000..5993181 --- /dev/null +++ b/pwa/pages/TimeSeries/index.tsx @@ -0,0 +1,29 @@ +import React, { useState, useEffect } from "react"; +import { fetch } from "../../utils/dataAccess"; +import { RegionVentes } from "../../types/RegionVentes"; +import TimeSeries from "../../components/Diagrammes/TimeSeries"; + +const getRegionVentes = async () => { + /*const data = await fetch("/ventes/regions"); + return JSON.parse(data.text);*/ + return null; +} + +export default function Home() { + //const [regionVentes, setRegionVentes] = useState(undefined); + + /*useEffect(() => { + const fetchData = async () => { + const data = await getRegionVentes(); + setRegionVentes(data); + }; + fetchData(); + }, []);*/ + //console.log(regionVentes); + return ( +
+ {/*regionVentes ? : 'Loading...'*/} + +
+ ); +} \ No newline at end of file -- GitLab From 594b14b63ad76031c58cdc2c3f54adbce41b2986 Mon Sep 17 00:00:00 2001 From: Tristan RAHARD Date: Sat, 31 Dec 2022 10:47:54 +0100 Subject: [PATCH 2/3] =?UTF-8?q?Modification=20de=20TimeSeries=20pour=20qu'?= =?UTF-8?q?il=20affiche=20les=20donn=C3=A9es=20recup=C3=A9r=C3=A9es=20en?= =?UTF-8?q?=20base?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwa/components/Diagrammes/TimeSeries.tsx | 31 +++++++++++++++++------- pwa/pages/TimeSeries/index.tsx | 24 +++++++++--------- 2 files changed, 33 insertions(+), 22 deletions(-) diff --git a/pwa/components/Diagrammes/TimeSeries.tsx b/pwa/components/Diagrammes/TimeSeries.tsx index 7d9cab7..be38afc 100644 --- a/pwa/components/Diagrammes/TimeSeries.tsx +++ b/pwa/components/Diagrammes/TimeSeries.tsx @@ -1,11 +1,31 @@ import React, { useEffect, RefObject } from 'react'; import * as d3 from 'd3'; +import { isEmptyArray } from 'formik'; -const TimeSeries = () => { +const TimeSeries = (props : any) => { const ref: RefObject = React.createRef(); useEffect(() => { draw(); - }); + }, []); + + let data :{ date: Date, value: number }[] = []; + + if (typeof props.fetchedData === "undefined" ){ + data = [ + { date: new Date('2020-01-01'), value: 25 }, + { date: new Date('2020-02-01'), value: 37 }, + { date: new Date('2020-03-01'), value: 45 }, + ]; + }else{ + let fetchedData = props.fetchedData["hydra:member"]; + console.log("fetched : " + JSON.stringify(props.fetchedData["hydra:member"].length)); + for (let index = 0; index < fetchedData.length; index++) { + const element = {date : new Date(fetchedData[index].date), value : Math.round(fetchedData[index].prix)}; + console.log(typeof fetchedData[index].date) + data.push(element); + } + } + console.log(data); const draw = () => { const margin = { top: 20, right: 20, bottom: 30, left: 50 }; @@ -20,13 +40,6 @@ const TimeSeries = () => { .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); - const data :{ date: Date, value: number }[] = [ - { date: new Date('2020-01-01'), value: 25 }, - { date: new Date('2020-02-01'), value: 37 }, - { date: new Date('2020-03-01'), value: 45 }, - // ... - ]; - const xScale = d3.scaleTime() .range([0, width]) .domain(d3.extent(data, (d) => d.date)); diff --git a/pwa/pages/TimeSeries/index.tsx b/pwa/pages/TimeSeries/index.tsx index 5993181..60e6058 100644 --- a/pwa/pages/TimeSeries/index.tsx +++ b/pwa/pages/TimeSeries/index.tsx @@ -1,29 +1,27 @@ import React, { useState, useEffect } from "react"; import { fetch } from "../../utils/dataAccess"; -import { RegionVentes } from "../../types/RegionVentes"; import TimeSeries from "../../components/Diagrammes/TimeSeries"; +import { PrixMoyen } from "../../types/PrixMoyen"; -const getRegionVentes = async () => { - /*const data = await fetch("/ventes/regions"); - return JSON.parse(data.text);*/ - return null; +const getPrixMoyen = async () => { + const data = await fetch("/ventes/prix"); + return JSON.parse(data.text); } export default function Home() { - //const [regionVentes, setRegionVentes] = useState(undefined); + const [prixMoyen, setPrixMoyen] = useState(undefined); - /*useEffect(() => { + useEffect(() => { const fetchData = async () => { - const data = await getRegionVentes(); - setRegionVentes(data); + const data = await getPrixMoyen(); + setPrixMoyen(data); }; fetchData(); - }, []);*/ - //console.log(regionVentes); + }, []); + console.log(prixMoyen); return (
- {/*regionVentes ? : 'Loading...'*/} - + {prixMoyen ? : 'Loading...'}
); } \ No newline at end of file -- GitLab From 9189064c860ba158a190af83acf6e0e208346e2b Mon Sep 17 00:00:00 2001 From: Tristan RAHARD Date: Sat, 31 Dec 2022 10:48:23 +0100 Subject: [PATCH 3/3] Modification TimeSeries Pour qu'il ne s'affiche qu'une fois --- pwa/components/Diagrammes/TimeSeries.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/pwa/components/Diagrammes/TimeSeries.tsx b/pwa/components/Diagrammes/TimeSeries.tsx index be38afc..2ffc21c 100644 --- a/pwa/components/Diagrammes/TimeSeries.tsx +++ b/pwa/components/Diagrammes/TimeSeries.tsx @@ -1,11 +1,15 @@ -import React, { useEffect, RefObject } from 'react'; +import React, { useEffect, RefObject, useRef } from 'react'; import * as d3 from 'd3'; -import { isEmptyArray } from 'formik'; const TimeSeries = (props : any) => { const ref: RefObject = React.createRef(); + const drawn = useRef(false); // nouvelle référence pour stocker l'état de l'objet + useEffect(() => { - draw(); + if (!drawn.current) { // vérifie si l'objet a déjà été dessiné + draw(); + drawn.current = true; // met à jour l'état de l'objet + } }, []); let data :{ date: Date, value: number }[] = []; -- GitLab