Feat/alerts recap charts

common/assets/styles/Charts.scss

@@ -0,0 +1,16 @@
+.alerts-chart {
+    .recharts-legend-item-text {
+        font-size: 0.75rem;
+        color: var(--background-flat-grey) !important;
+        font-weight: 700;
+    }
+    .inner-text {
+        font-weight: 400;
+        font-size: 2rem;
+    }
+}
+
+.fr-tile.alerts-chart {
+    padding-left: 0px;
+    padding-right: 0px;
+}

common/assets/styles/root.scss

@@ -3,6 +3,8 @@
 @use 'Notice.scss';
 @use 'Accordion.scss';
 @use 'Certificate.scss';
+@use 'Charts.scss';
+
 
 .flex-column {
   display: flex !important;

web/admin/panels/RegulatoryRespect/Chart.js

@@ -0,0 +1,74 @@
+import React from "react";
+import {
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  Sector
+} from "recharts";
+const renderActiveShape = ({
+  cx,
+  cy,
+  innerRadius,
+  outerRadius,
+  startAngle,
+  endAngle,
+  fill,
+  payload
+}) => {
+  return (
+    <g>
+      <text
+        x={cx}
+        y={cy}
+        dy={8}
+        textAnchor="middle"
+        fill={fill}
+        className="inner-text"
+      >
+        {payload.value}
+      </text>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={(outerRadius ?? 0) + 6}
+        outerRadius={(outerRadius ?? 0) + 10}
+        fill={fill}
+      />
+    </g>
+  );
+};
+
+export const Chart = ({ data }) => {
+  return (
+    <ResponsiveContainer width="100%" aspect={1}>
+      <PieChart>
+        <Pie
+          activeShape={renderActiveShape}
+          data={data}
+          cx="50%"
+          cy="50%"
+          innerRadius="50%"
+          outerRadius="90%"
+          fill="#8884d8"
+          dataKey="value"
+          isAnimationActive={true}
+        />
+        <Tooltip content={() => null} />
+        <Legend />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+};

web/admin/panels/RegulatoryRespect/RegulatoryRespectChart.js

@@ -1,5 +1,97 @@
-import React from "react";
+import React, { useState } from "react";
+import { Box, Typography } from "@mui/material";
+import { useRegulatoryAlertsSummaryContext } from "../../utils/contextRegulatoryAlertsSummary";
+import { SegmentedControl } from "@codegouvfr/react-dsfr/SegmentedControl";
+import { Table } from "@codegouvfr/react-dsfr/Table";
+import { Chart } from "./Chart";
 
-export const Chart = () => {
-  return null;
+const ALERTS_DATA = {
+  maximumWorkedDaysInWeek: {
+    label: "Repos hebdomadaire",
+    color: "#81EEF5"
+  },
+  maximumWorkInCalendarWeek: {
+    label: "Durée du travail hebdomadaire",
+    color: "#B478F1"
+  },
+  minimumDailyRest: {
+    label: "Repos journalier",
+    color: "#31A7AE"
+  },
+  not_enough_break: {
+    label: "Temps de pause",
+    color: "#5C68E5"
+  },
+  too_much_uninterrupted_work_time: {
+    label: "Durée maximale de travail ininterrompu",
+    color: "#29598F"
+  },
+  maximumWorkDayTime: {
+    label: "Durée du travail quotidien",
+    color: "#115ADF"
+  }
+};
+
+export const RegulatoryRespectChart = () => {
+  const { summary } = useRegulatoryAlertsSummaryContext();
+  const [selectedView, setSelectedView] = useState("chart");
+  const data = [...summary.dailyAlerts, ...summary.weeklyAlerts]
+    .filter((alert) => alert.alertsType in ALERTS_DATA)
+    .map((alert) => ({
+      name: ALERTS_DATA[alert.alertsType].label,
+      value: alert.nbAlerts,
+      fill: ALERTS_DATA[alert.alertsType].color
+    }))
+    .filter((d) => d.value > 0);
+
+  if (data.length === 0) {
+    return;
+  }
+  return (
+    <Box className="fr-tile alerts-chart" minHeight="470px">
+      <Typography
+        fontWeight="bold"
+        fontSize="1.2rem"
+        textAlign="left"
+        lineHeight="1.75rem"
+        paddingX={4}
+      >
+        Répartition des dépassements de seuils
+      </Typography>
+      {selectedView === "chart" ? (
+        <Chart data={data} />
+      ) : (
+        <Box paddingX={4}>
+          <Table
+            caption="Répartition des dépassements de seuils"
+            data={data.map((d) => [d.name, d.value])}
+            headers={["Alerte", "#"]}
+          />
+        </Box>
+      )}
+      <Box paddingX={4} mt={2}>
+        <SegmentedControl
+          segments={[
+            {
+              iconId: "fr-icon-pie-chart-2-fill",
+              label: "Graphique",
+              nativeInputProps: {
+                value: "chart",
+                defaultChecked: true,
+                onChange: () => setSelectedView("chart")
+              }
+            },
+            {
+              iconId: "fr-icon-table-line",
+              label: "Tableau",
+              nativeInputProps: {
+                value: "table",
+                onChange: () => setSelectedView("table")
+              }
+            }
+          ]}
+        />
+      </Box>
+    </Box>
+  );
 };

web/admin/panels/RegulatoryRespect/RegulatoryRespectResults.js

@@ -3,14 +3,14 @@ import { makeStyles } from "@mui/styles";
 import { fr } from "@codegouvfr/react-dsfr";
 import { Stack, Typography } from "@mui/material";
 import { SummaryCard } from "./RegulatoryRespectSummaryCard";
-import { Chart } from "./RegulatoryRespectChart";
+import { RegulatoryRespectChart } from "./RegulatoryRespectChart";
 import { AlertsRecap } from "./RegulatoryRespectAlertsRecap";
 import { useRegulatoryAlertsSummaryContext } from "../../utils/contextRegulatoryAlertsSummary";
 
 const useStyles = makeStyles((theme) => ({
   text: {
-    color: fr.colors.decisions.background.flat.grey.default,
-  },
+    color: fr.colors.decisions.background.flat.grey.default
+  }
 }));
 
 export default function RegulatoryRespectResults() {
@@ -30,7 +30,7 @@ export default function RegulatoryRespectResults() {
     <Stack direction="row" width="100%" p={4} columnGap={8}>
       <Stack direction="column" rowGap={4} sx={{ width: "380px" }}>
         <SummaryCard />
-        <Chart />
+        <RegulatoryRespectChart />
       </Stack>
       <AlertsRecap sx={{ flexGrow: 1 }} />
     </Stack>