From a0ffde233b878a329715b8f1f4de3740735ad70d Mon Sep 17 00:00:00 2001
From: Tristan RAHARD <rahard.tristan.pro@gmail.com>
Date: Fri, 30 Dec 2022 16:09:38 +0100
Subject: [PATCH] Modification de la page de visualisation de camembert pour
 que les valeurs viennent de l'api

---
 pwa/components/Diagrammes/Camembert.tsx | 46 ++++++++++++++++---------
 pwa/pages/visuCamembert/index.tsx       | 28 +++++++++++----
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/pwa/components/Diagrammes/Camembert.tsx b/pwa/components/Diagrammes/Camembert.tsx
index f6474ad..00d1847 100644
--- a/pwa/components/Diagrammes/Camembert.tsx
+++ b/pwa/components/Diagrammes/Camembert.tsx
@@ -1,25 +1,39 @@
 import React, { useEffect, RefObject } from 'react';
 import * as d3 from 'd3';
+import { isEmptyArray } from 'formik';
+import { RegionVentes } from '../../types/RegionVentes';
 
 type DataPoint = { label: string; value: number; };
 
-const Camembert = () => {
+
+
+const Camembert = (props : any) => {
   const ref: RefObject<HTMLDivElement> = React.createRef();
-  const data: DataPoint[] = [
-    { label: 'Auvergne-Rhône-Alpes', value: 4557 },
-    { label: 'Bourgogne-Franche-Comté', value: 2556 },
-    { label: 'Bretagne', value: 10555 },
-    { label: 'Centre-Val de Loire', value: 7589 },
-    { label: 'Corse', value: 8835 },
-    { label: 'Grand Est', value: 1616 },
-    { label: 'Hauts-de-France', value: 6111 },
-    { label: 'Île-de-France', value: 6818 },
-    { label: 'Normandie', value: 16168 },
-    { label: 'Nouvelle-Aquitaine', value: 1318 },
-    { label: 'Occitanie', value: 1368 },
-    { label: 'Pays de la Loire', value: 5427 },
-    { label: 'Provence-Alpes-Côte d\'Azur', value: 9632 },
-  ];
+  let data : DataPoint[] = [];
+  if (isEmptyArray(props.fetchedData) ){
+    data = [
+      { label: 'Auvergne-Rhône-Alpes', value: 4557 },
+      { label: 'Bourgogne-Franche-Comté', value: 2556 },
+      { label: 'Bretagne', value: 10555 },
+      { label: 'Centre-Val de Loire', value: 7589 },
+      { label: 'Corse', value: 8835 },
+      { label: 'Grand Est', value: 1616 },
+      { label: 'Hauts-de-France', value: 6111 },
+      { label: 'Île-de-France', value: 6818 },
+      { label: 'Normandie', value: 16168 },
+      { label: 'Nouvelle-Aquitaine', value: 1318 },
+      { label: 'Occitanie', value: 1368 },
+      { label: 'Pays de la Loire', value: 5427 },
+      { label: 'Provence-Alpes-Côte d\'Azur', value: 9632 },
+    ];
+  }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 = {label : fetchedData[index].regionName, value : fetchedData[index].count};
+      data.push(element);
+    }
+  }
 
   useEffect(() => {
     draw();
diff --git a/pwa/pages/visuCamembert/index.tsx b/pwa/pages/visuCamembert/index.tsx
index d474560..0257156 100644
--- a/pwa/pages/visuCamembert/index.tsx
+++ b/pwa/pages/visuCamembert/index.tsx
@@ -1,13 +1,27 @@
-
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Camembert from "../../components/Diagrammes/Camembert";
+import { fetch } from "../../utils/dataAccess";
+import { RegionVentes } from "../../types/RegionVentes";
 
+const getRegionVentes = async () => {
+  const data = await fetch("/ventes/regions");
+  return JSON.parse(data.text);
+}
 
-  
 export default function Home() {
+  const [regionVentes, setRegionVentes] = useState<RegionVentes[] | undefined>(undefined);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await getRegionVentes();
+      setRegionVentes(data);
+    };
+    fetchData();
+  }, []);
+  console.log(regionVentes);
   return (
-      <div className="container">
-      <Camembert/>
-    </div>
-  )
+  <div className="container">
+  {regionVentes ? <Camembert  fetchedData={regionVentes} /> : 'Loading...'}
+  </div>
+  );
 }
\ No newline at end of file
-- 
GitLab