feat(homepage): add some graphs

package.json

@@ -16,6 +16,8 @@
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-query-devtools": "^4.29.6",
     "classnames": "^2.3.2",
+    "highcharts": "^11.4.1",
+    "highcharts-react-official": "^3.2.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/graphs/contributions-by-name.tsx

@@ -0,0 +1,81 @@
+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";
+
+const ContributionsGraphByName = () => {
+  const { data, isLoading, isError } = useGetContributionData(
+    contributionUrl,
+    0
+  );
+  const contributions: Contribution[] = (data as { data: Contribution[] })
+    ?.data;
+  if (isLoading) {
+    return <div>Chargement...</div>;
+  }
+
+  if (isError) {
+    return <div>Une erreur s'est produite</div>;
+  }
+
+  if (!Array.isArray(contributions)) {
+    return <div>Les données ne sont pas disponibles</div>;
+  }
+
+  const contributionsByName = contributions.reduce((acc, contribution) => {
+    const name = contribution.name;
+
+    if (!acc[name]) {
+      acc[name] = 0;
+    }
+
+    acc[name]++;
+
+    return acc;
+  }, {});
+
+  let names: string[] = Object.keys(contributionsByName);
+  let contributionCounts: number[] = Object.values(contributionsByName);
+
+  let pairs: [string, number][] = names.map((name, index) => [
+    name,
+    contributionCounts[index],
+  ]);
+
+  pairs.sort((a, b) => b[1] - a[1]);
+  pairs = pairs.slice(0, 15);
+
+  names = pairs.map((pair) => pair[0]);
+  contributionCounts = pairs.map((pair) => pair[1]);
+
+  const options = {
+    chart: {
+      type: "bar",
+    },
+    title: {
+      text: "Top 15 des contributeurs via le formulaire de contribution par objet",
+    },
+    xAxis: {
+      categories: names,
+      title: {
+        text: "Noms",
+      },
+    },
+    yAxis: {
+      title: {
+        text: "Nombre de contributions",
+      },
+    },
+    series: [
+      {
+        name: "Contributions",
+        data: contributionCounts,
+      },
+    ],
+  };
+
+  return <HighchartsReact highcharts={Highcharts} options={options} />;
+};
+
+export default ContributionsGraphByName;

src/components/graphs/contributions-by-year.tsx

@@ -0,0 +1,74 @@
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { contributionUrl } from "../../config/api";
+
+const ContributionsGraphByYear = () => {
+  const { data, isLoading, isError } = useGetContributionData(
+    contributionUrl,
+    0
+  );
+  const contributions = (data as { data: [] })?.data;
+  if (isLoading) {
+    return <div>Chargement...</div>;
+  }
+
+  if (isError) {
+    return <div>Une erreur s'est produite</div>;
+  }
+
+  if (!Array.isArray(contributions)) {
+    return <div>Les données ne sont pas disponibles</div>;
+  }
+
+  const contributionsByMonth = (
+    contributions as { created_at: string }[]
+  ).reduce((acc, contribution) => {
+    const date = new Date(contribution.created_at);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+
+    if (!acc[year]) {
+      acc[year] = Array(12).fill(0);
+    }
+
+    acc[year][month - 1]++;
+
+    return acc;
+  }, {});
+
+  const options = {
+    chart: {
+      type: "column",
+    },
+    title: {
+      text: "Nombre de contributions par mois via formulaire de contribution par objet",
+    },
+    xAxis: {
+      categories: [
+        "Jan",
+        "Fev",
+        "Mar",
+        "Avr",
+        "Mai",
+        "Jun",
+        "Jul",
+        "Aou",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+    },
+    series: Object.entries(contributionsByMonth).map(
+      ([year, contributions]) => ({
+        name: year,
+        data: contributions,
+      })
+    ),
+  };
+
+  return <HighchartsReact highcharts={Highcharts} options={options} />;
+};
+
+export default ContributionsGraphByYear;

src/config/api.ts

@@ -1,3 +1,8 @@
 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 =
+  "https://scanr-api.dataesr.ovh/contribute?max_results=2000";
+export const contactUrl =
+  "https://scanr-api.dataesr.ovh/contact?max_results=2000";

src/pages/home/index.tsx

@@ -1,10 +1,14 @@
 import { Container } 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 />
     </Container>
   );
 };