feat(graphs): add some graphs in homepage

src/api/send-mail/index.tsx

@@ -42,6 +42,7 @@ function EmailSender({
     };
 
     const responseBrevo = await fetch("/email/", {
+      // const responseBrevo = await fetch("https://api.brevo.com/v3/smtp/email", {
       method: "POST",
       headers: {
         "api-key": import.meta.env.VITE_BREVO_API_AUTHORIZATION,
@@ -59,6 +60,9 @@ function EmailSender({
     };
 
     const responseScanR = await fetch(`/api/${basePath}/${contribution._id}`, {
+      // const responseScanR = await fetch(
+      //   `https://scanr-api.dataesr.ovh/${basePath}/${contribution._id}`,
+      //   {
       method: "PATCH",
       headers: postHeaders,
       body: JSON.stringify(dataForScanR),

src/components/graphs/by-domains.tsx

@@ -0,0 +1,89 @@
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { ContributionData } from "../../types";
+import { contactUrl, contributionUrl } from "../../config/api";
+import { Button, Col } from "@dataesr/dsfr-plus";
+import { useState } from "react";
+
+const ContributionsGraphByDomains = () => {
+  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>;
+  }
+
+  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 contributionsByEmailDomain = contributions.reduce(
+    (acc: Record<string, number>, contribution: ContributionData) => {
+      const { email } = contribution;
+      if (email) {
+        const domain = email.split("@")[1];
+        if (!acc[domain]) {
+          acc[domain] = 1;
+        } else {
+          acc[domain] += 1;
+        }
+      }
+
+      return acc;
+    },
+    {}
+  );
+
+  const chartData = Object.entries(contributionsByEmailDomain).map(
+    ([name, y]) => ({
+      name,
+      y,
+    })
+  );
+
+  const options = {
+    chart: {
+      type: "pie",
+    },
+    title: {
+      text: "Contributions par domaine de courrier électronique",
+    },
+    series: [
+      {
+        name: "Domaine de courrier électronique",
+        data: chartData,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <Col className="fr-mb-3w">
+        <Button
+          className="fr-mr-1w"
+          size="sm"
+          variant={filter === "object" ? "primary" : "secondary"}
+          onClick={() => setFilter("object")}
+        >
+          Par objet
+        </Button>
+        <Button
+          size="sm"
+          variant={filter === "contact" ? "primary" : "secondary"}
+          onClick={() => setFilter("contact")}
+        >
+          Via formulaire contact
+        </Button>
+      </Col>
+      <HighchartsReact highcharts={Highcharts} options={options} />
+    </>
+  );
+};
+
+export default ContributionsGraphByDomains;

src/components/graphs/by-status.tsx

@@ -0,0 +1,91 @@
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { ContributionData } from "../../types";
+import { contactUrl, contributionUrl } from "../../config/api";
+import { Button, Col } from "@dataesr/dsfr-plus";
+import { useState } from "react";
+
+const ContributionsGraphByStatus = () => {
+  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>;
+  }
+
+  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 contributionsByStatus = contributions.reduce(
+    (acc: Record<string, number>, contribution: ContributionData) => {
+      const { status } = contribution;
+      if (!acc[status]) {
+        acc[status] = 1;
+      } else {
+        acc[status] += 1;
+      }
+
+      return acc;
+    },
+    {}
+  );
+  const chartData = Object.entries(contributionsByStatus).map(([name, y]) => ({
+    name,
+    y,
+  }));
+
+  const options = {
+    chart: {
+      type: "column",
+    },
+    title: {
+      text: "Contributions par statut",
+    },
+    xAxis: {
+      type: "category",
+    },
+    yAxis: {
+      title: {
+        text: "Nombre de contributions",
+      },
+    },
+    series: [
+      {
+        name: "Statut",
+        data: chartData,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <Col className="fr-mb-3w">
+        <Button
+          className="fr-mr-1w"
+          size="sm"
+          variant={filter === "object" ? "primary" : "secondary"}
+          onClick={() => setFilter("object")}
+        >
+          Par objet
+        </Button>
+        <Button
+          size="sm"
+          variant={filter === "contact" ? "primary" : "secondary"}
+          onClick={() => setFilter("contact")}
+        >
+          Via formulaire contact
+        </Button>
+      </Col>
+      <HighchartsReact highcharts={Highcharts} options={options} />
+    </>
+  );
+};
+
+export default ContributionsGraphByStatus;

src/components/graphs/by-tags.tsx

@@ -0,0 +1,96 @@
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { ContributionData } from "../../types";
+import { contactUrl, contributionUrl } from "../../config/api";
+import { Button, Col } from "@dataesr/dsfr-plus";
+import { useState } from "react";
+
+const ContributionsGraphByTags = () => {
+  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>;
+  }
+
+  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 contributionsByTag = contributions.reduce(
+    (acc: Record<string, number>, contribution: ContributionData) => {
+      const { tags } = contribution;
+      if (tags) {
+        tags.forEach((tag: string) => {
+          if (!acc[tag]) {
+            acc[tag] = 1;
+          } else {
+            acc[tag] += 1;
+          }
+        });
+      }
+
+      return acc;
+    },
+    {}
+  );
+
+  const chartData = Object.entries(contributionsByTag).map(([name, y]) => ({
+    name,
+    y,
+  }));
+
+  const options = {
+    chart: {
+      type: "pie",
+    },
+    title: {
+      text: "Contributions par tag",
+    },
+    xAxis: {
+      type: "category",
+    },
+    yAxis: {
+      title: {
+        text: "Nombre de contributions",
+      },
+    },
+    series: [
+      {
+        name: "Tag",
+        data: chartData,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <Col className="fr-mb-3w">
+        <Button
+          className="fr-mr-1w"
+          size="sm"
+          variant={filter === "object" ? "primary" : "secondary"}
+          onClick={() => setFilter("object")}
+        >
+          Par objet
+        </Button>
+        <Button
+          size="sm"
+          variant={filter === "contact" ? "primary" : "secondary"}
+          onClick={() => setFilter("contact")}
+        >
+          Via formulaire contact
+        </Button>
+      </Col>
+      <HighchartsReact highcharts={Highcharts} options={options} />
+    </>
+  );
+};
+
+export default ContributionsGraphByTags;

src/components/graphs/by-types.tsx

@@ -0,0 +1,68 @@
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { ContributionData } from "../../types";
+import { contributionUrl } from "../../config/api";
+
+const ContributionsGraphByTypes = () => {
+  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 contributionsByType = contributions.reduce(
+    (acc: Record<string, number>, contribution: ContributionData) => {
+      const { type } = contribution;
+      if (type) {
+        if (!acc[type]) {
+          acc[type] = 1;
+        } else {
+          acc[type] += 1;
+        }
+      }
+
+      return acc;
+    },
+    {}
+  );
+
+  const chartData = Object.entries(contributionsByType).map(([name, y]) => ({
+    name,
+    y,
+  }));
+
+  const options = {
+    chart: {
+      type: "pie",
+    },
+    title: {
+      text: "Contributions par type d'objet",
+    },
+    series: [
+      {
+        name: "Type",
+        data: chartData,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <HighchartsReact highcharts={Highcharts} options={options} />
+    </>
+  );
+};
+
+export default ContributionsGraphByTypes;