fix(graphs): update graph style

dataesr · May 17, 2024 · 1afa121 · 1afa121
1 parent 04e5b58
commit 1afa121
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 30 deletions.
diff --git a/src/components/graphs/contributions-by-name.tsx b/src/components/graphs/contributions-by-name.tsx
@@ -2,15 +2,16 @@ import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
 import { Contribution } from "../../types";
-import { contributionUrl } from "../../config/api";
+import { contactUrl, contributionUrl } from "../../config/api";
+import { Button } from "@dataesr/dsfr-plus";
+import { useState } from "react";
 
 const ContributionsGraphByName = () => {
-  const { data, isLoading, isError } = useGetContributionData(
-    contributionUrl,
-    0
-  );
-  const contributions: Contribution[] = (data as { data: Contribution[] })
-    ?.data;
+  const [filter, setFilter] = useState("contributions");
+  const url = filter === "object" ? contributionUrl : contactUrl;
+  const { data, isLoading, isError } = useGetContributionData(url, 0);
+  const contributions = (data as { data: [] })?.data;
+
   if (isLoading) {
     return <div>Chargement...</div>;
   }
@@ -23,17 +24,20 @@ const ContributionsGraphByName = () => {
     return <div>Les données ne sont pas disponibles</div>;
   }
 
-  const contributionsByName = contributions.reduce((acc, contribution) => {
-    const name = contribution.name;
+  const contributionsByName = contributions.reduce(
+    (acc: Record<string, number>, contribution: Contribution) => {
+      const name = contribution.name;
 
-    if (!acc[name]) {
-      acc[name] = 0;
-    }
+      if (!acc[name]) {
+        acc[name] = 0;
+      }
 
-    acc[name]++;
+      acc[name]++;
 
-    return acc;
-  }, {});
+      return acc;
+    },
+    {}
+  );
 
   let names: string[] = Object.keys(contributionsByName);
   let contributionCounts: number[] = Object.values(contributionsByName);
@@ -54,7 +58,7 @@ const ContributionsGraphByName = () => {
       type: "bar",
     },
     title: {
-      text: "Top 15 des contributeurs via le formulaire de contribution par objet",
+      text: "Top 15 des contributeurs",
     },
     xAxis: {
       categories: names,
@@ -75,7 +79,21 @@ const ContributionsGraphByName = () => {
     ],
   };
 
-  return <HighchartsReact highcharts={Highcharts} options={options} />;
+  return (
+    <>
+      <Button
+        className="fr-mr-1w"
+        variant="secondary"
+        onClick={() => setFilter("object")}
+      >
+        Par objet
+      </Button>
+      <Button variant="secondary" onClick={() => setFilter("contact")}>
+        Via formulaire contact
+      </Button>
+      <HighchartsReact highcharts={Highcharts} options={options} />
+    </>
+  );
 };
 
 export default ContributionsGraphByName;
diff --git a/src/components/graphs/contributions-by-year.tsx b/src/components/graphs/contributions-by-year.tsx
@@ -1,14 +1,16 @@
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
-import { contributionUrl } from "../../config/api";
+import { contributionUrl, contactUrl } from "../../config/api";
+import { useState } from "react";
+import { Button, Col, Row } from "@dataesr/dsfr-plus";
 
 const ContributionsGraphByYear = () => {
-  const { data, isLoading, isError } = useGetContributionData(
-    contributionUrl,
-    0
-  );
+  const [filter, setFilter] = useState("contributions");
+  const url = filter === "object" ? contributionUrl : contactUrl;
+  const { data, isLoading, isError } = useGetContributionData(url, 0);
   const contributions = (data as { data: [] })?.data;
+
   if (isLoading) {
     return <div>Chargement...</div>;
   }
@@ -42,7 +44,7 @@ const ContributionsGraphByYear = () => {
       type: "column",
     },
     title: {
-      text: "Nombre de contributions par mois via formulaire de contribution par objet",
+      text: "Nombre de contributions par mois et par année",
     },
     xAxis: {
       categories: [
@@ -68,7 +70,21 @@ const ContributionsGraphByYear = () => {
     ),
   };
 
-  return <HighchartsReact highcharts={Highcharts} options={options} />;
+  return (
+    <>
+      <Button
+        className="fr-mr-1w"
+        variant="secondary"
+        onClick={() => setFilter("object")}
+      >
+        Par objet
+      </Button>
+      <Button variant="secondary" onClick={() => setFilter("contact")}>
+        Via formulaire contact
+      </Button>
+      <HighchartsReact highcharts={Highcharts} options={options} />
+    </>
+  );
 };
 
 export default ContributionsGraphByYear;
diff --git a/src/config/api.ts b/src/config/api.ts
@@ -2,5 +2,7 @@ const API_KEY = import.meta.env.VITE_SCANR_API_AUTHORIZATION;
 export const headers = API_KEY ? { Authorization: `Basic ${API_KEY}` } : {};
 export const postHeaders = { ...headers, "Content-Type": "application/json" };
 
-export const contributionUrl = "/api/contribute?max_results=2000";
-export const contactUrl = "/api/contact?max_results=2000";
+export const contributionUrl =
+  "https://scanr-api.dataesr.ovh/contribute?max_results=2000";
+export const contactUrl =
+  "https://scanr-api.dataesr.ovh/contact?max_results=2000";
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -1,14 +1,21 @@
-import { Container } from "@dataesr/dsfr-plus";
+import { Col, Container, Row } from "@dataesr/dsfr-plus";
 import ContributionsGraphByYear from "../../components/graphs/contributions-by-year";
 import ContributionsGraphByName from "../../components/graphs/contributions-by-name";
 
 const Home = () => {
   return (
     <Container className="fr-mt-10v">
       <h1>Bienvenue sur le Guichet numérique du DIST</h1>
-      <h1>Bientôt des gaphiques</h1>
-      <ContributionsGraphByYear />
-      <ContributionsGraphByName />
+      <Row gutters className="fr-grid-row--center fr-mt-5w">
+        <Col>
+          <ContributionsGraphByYear />
+        </Col>
+      </Row>
+      <Row gutters className="fr-grid-row--center fr-mt-5w ">
+        <Col>
+          <ContributionsGraphByName />
+        </Col>
+      </Row>
     </Container>
   );
 };