feat(graphs): add response by team graph

src/components/graphs/response-by-admin.tsx

@@ -26,67 +26,37 @@ const AdminResponseGraph = () => {
     return <div>Les données ne sont pas disponibles</div>;
   }
 
-  const responsesByAdmin = contributions.reduce(
+  const occurrencesByUser = contributions.reduce(
     (acc: Record<string, number>, contribution: ContributionData) => {
-      if (contribution.team) {
-        contribution.team.forEach((admin: string) => {
-          if (!acc[admin]) {
-            acc[admin] = 1;
-          } else {
-            acc[admin] += 1;
-          }
-        });
+      const { responseFrom } = contribution;
+      if (responseFrom) {
+        if (!acc[responseFrom]) {
+          acc[responseFrom] = 1;
+        } else {
+          acc[responseFrom] += 1;
+        }
       }
 
       return acc;
     },
     {}
   );
 
-  const chartData = Object.entries(responsesByAdmin)
-    .map(([name, y]) => ({ name, y }))
-    .sort((a, b) => b.y - a.y);
+  const chartData = Object.entries(occurrencesByUser).map(([name, y]) => ({
+    name,
+    y,
+  }));
 
   const options = {
     chart: {
-      type: "column",
-      options3d: {
-        enabled: true,
-        alpha: 15,
-        beta: 15,
-        depth: 50,
-        viewDistance: 25,
-      },
+      type: "pie",
     },
     title: {
-      text: "Réponses par admin",
-    },
-    plotOptions: {
-      column: {
-        depth: 25,
-        dataLabels: {
-          enabled: true,
-          format: function () {
-            if (this.point.index === 0) {
-              return '<i class="fr-icon-building-line"></i>';
-            }
-            return "";
-          },
-          useHTML: true,
-        },
-      },
-    },
-    xAxis: {
-      type: "category",
-    },
-    yAxis: {
-      title: {
-        text: "Nombre de réponses",
-      },
+      text: "Nombre de mail envoyé",
     },
     series: [
       {
-        name: "Traitements",
+        name: "Mail de réponse depuis le guichet",
         data: chartData,
       },
     ],

src/components/graphs/treatment-by-admin.tsx

@@ -0,0 +1,119 @@
+import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
+
+import { useState } from "react";
+import { ContributionData } from "../../types";
+import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { contactUrl, contributionUrl } from "../../config/api";
+import { Button, Col } from "@dataesr/dsfr-plus";
+
+const AdminTreatmentGraph = () => {
+  const [filter, setFilter] = useState("contributions");
+  const url = filter === "object" ? contributionUrl : contactUrl;
+  const { data, isLoading, isError } = useGetContributionData(url, 0);
+
+  const contributions = (data as { data: ContributionData[] })?.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 responsesByAdmin = contributions.reduce(
+    (acc: Record<string, number>, contribution: ContributionData) => {
+      if (contribution.team) {
+        contribution.team.forEach((admin: string) => {
+          if (!acc[admin]) {
+            acc[admin] = 1;
+          } else {
+            acc[admin] += 1;
+          }
+        });
+      }
+
+      return acc;
+    },
+    {}
+  );
+
+  const chartData = Object.entries(responsesByAdmin)
+    .map(([name, y]) => ({ name, y }))
+    .sort((a, b) => b.y - a.y);
+
+  const options = {
+    chart: {
+      type: "column",
+      options3d: {
+        enabled: true,
+        alpha: 15,
+        beta: 15,
+        depth: 50,
+        viewDistance: 25,
+      },
+    },
+    title: {
+      text: "Traitements par admin",
+    },
+    plotOptions: {
+      column: {
+        depth: 25,
+        dataLabels: {
+          enabled: true,
+          format: function () {
+            if (this.point.index === 0) {
+              return '<i class="fr-icon-building-line"></i>';
+            }
+            return "";
+          },
+          useHTML: true,
+        },
+      },
+    },
+    xAxis: {
+      type: "category",
+    },
+    yAxis: {
+      title: {
+        text: "Nombre de traitement",
+      },
+    },
+    series: [
+      {
+        name: "Traitements",
+        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 AdminTreatmentGraph;

src/pages/home/index.tsx

@@ -1,11 +1,12 @@
 import { Col, Container, Row } from "@dataesr/dsfr-plus";
 import ContributionsGraphByYear from "../../components/graphs/contributions-by-year";
 import ContributionsGraphByName from "../../components/graphs/contributions-by-name";
-import AdminResponseGraph from "../../components/graphs/response-by-admin";
 import ContributionsGraphByStatus from "../../components/graphs/by-status";
 import ContributionsGraphByTags from "../../components/graphs/by-tags";
 import ContributionsGraphByDomains from "../../components/graphs/by-domains";
 import ContributionsGraphByTypes from "../../components/graphs/by-types";
+import AdminTreatmentGraph from "../../components/graphs/treatment-by-admin";
+import AdminResponseGraph from "../../components/graphs/response-by-admin";
 
 const Home = () => {
   return (
@@ -21,7 +22,7 @@ const Home = () => {
       </Row>
       <Row gutters className="fr-grid-row--center fr-mt-5w">
         <Col md="6">
-          <AdminResponseGraph />
+          <AdminTreatmentGraph />
         </Col>
         <Col md="6">
           <ContributionsGraphByStatus />
@@ -39,9 +40,9 @@ const Home = () => {
         <Col md="6">
           <ContributionsGraphByTypes />
         </Col>
-        {/* <Col md="6">
-          <ContributionsGraphByDomains />
-        </Col> */}
+        <Col md="6">
+          <AdminResponseGraph />
+        </Col>
       </Row>
     </Container>
   );

src/types/index.ts

@@ -23,6 +23,7 @@ export type Contribution = {
 };
 
 export type ContributionData = {
+  responseFrom: string;
   idref: any;
   tags: any;
   id: string;