feat: Add stat cards

app/[legislature]/dossier/[id]/debat/[compteRenduRef]/DebateSummary.tsx

@@ -173,15 +173,15 @@ export const DebateSummary = (props: DebateSummaryProps) => {
                 }}
               >
                 <Typography
-                  color="white"
+                  color="#fff"
                   component="a"
                   href={`#${id}`}
                   dangerouslySetInnerHTML={{ __html: cleanText(texte!) }}
                 />
                 <Stack direction="row" alignItems="center" spacing={0.5}>
                   <ClockMovingIcon sx={{ fontSize: "12px" }} fill="white" />
                   <Typography
-                    color="white"
+                    color="#fff"
                     variant="caption"
                     fontWeight="light"
                   >

app/depute/[slug]/InfoPersonelles.tsx

@@ -15,15 +15,15 @@ export default function InfoPersonelles({
     // .filter((mandat) => mandat.legislature === "16") Partis politique est `null`
     .sort((a, b) => (a.dateDebut < b.dateDebut ? 1 : -1));
 
-  const dernerMandatDepute = sortedMandats.filter(
+  const dernierMandatDepute = sortedMandats.filter(
     (mandat) => mandat.typeOrgane === "ASSEMBLEE"
   )[0];
 
-  const dernergroupeParlementaire = sortedMandats.filter(
+  const derniergroupeParlementaire = sortedMandats.filter(
     (mandat) => mandat.typeOrgane === "GP"
   )[0];
 
-  const dernerPartisPolitique = sortedMandats.filter(
+  const dernierPartisPolitique = sortedMandats.filter(
     (mandat) => mandat.typeOrgane === "PARPOL"
   )[0];
 
@@ -37,43 +37,57 @@ export default function InfoPersonelles({
   return (
     <Paper sx={{ p: 2, bgcolor: "grey.50", width: 300 }} elevation={0}>
       <Stack direction="column" spacing={2}>
-        <Typography variant="subtitle1">Infomrations personelles</Typography>
+        <Typography variant="subtitle1">Informations personelles</Typography>
 
-        <div>
-          <Typography variant="body2" fontWeight="light">
-            Debut de mandat <InfoOutlinedIcon fontSize="inherit" />
-          </Typography>
-          <Typography variant="body2">
-            Le{" "}
-            {new Date(dernerMandatDepute.dateDebut).toLocaleDateString(
-              "fr-FR",
-              { day: "numeric", month: "long", year: "numeric" }
-            )}
-          </Typography>
-        </div>
-
-        <div>
-          <Typography variant="body2" fontWeight="light">
-            Fin de mandat <InfoOutlinedIcon fontSize="inherit" />
-          </Typography>
-          <Typography variant="body2">
-            {dernerMandatDepute.dateFin !== null
-              ? `Le ${new Date(dernerMandatDepute.dateFin).toLocaleDateString(
+        {dernierMandatDepute === undefined ? (
+          <div>
+            <Typography variant="body2" fontWeight="light">
+              Debut de mandat <InfoOutlinedIcon fontSize="inherit" />
+            </Typography>
+            <Typography variant="body2">N'est pas député·e·s</Typography>
+          </div>
+        ) : (
+          <React.Fragment>
+            <div>
+              <Typography variant="body2" fontWeight="light">
+                Debut de mandat <InfoOutlinedIcon fontSize="inherit" />
+              </Typography>
+              <Typography variant="body2">
+                Le{" "}
+                {new Date(dernierMandatDepute?.dateDebut).toLocaleDateString(
                   "fr-FR",
                   { day: "numeric", month: "long", year: "numeric" }
-                )}`
-              : "en cours"}
-          </Typography>
-        </div>
+                )}
+              </Typography>
+            </div>
+
+            <div>
+              <Typography variant="body2" fontWeight="light">
+                Fin de mandat <InfoOutlinedIcon fontSize="inherit" />
+              </Typography>
+              <Typography variant="body2">
+                {dernierMandatDepute?.dateFin !== null
+                  ? `Le ${new Date(
+                      dernierMandatDepute?.dateFin
+                    ).toLocaleDateString("fr-FR", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })}`
+                  : "en cours"}
+              </Typography>
+            </div>
+          </React.Fragment>
+        )}
 
         <div>
           <Typography variant="body2" fontWeight="light">
             Group politique <InfoOutlinedIcon fontSize="inherit" />
           </Typography>
           <Typography variant="body2">
-            {dernergroupeParlementaire &&
-            dernergroupeParlementaire.dateFin === null
-              ? dernergroupeParlementaire.libelle
+            {derniergroupeParlementaire &&
+            derniergroupeParlementaire.dateFin === null
+              ? derniergroupeParlementaire.libelle
               : "-"}
           </Typography>
         </div>
@@ -83,8 +97,8 @@ export default function InfoPersonelles({
             Partis politique <InfoOutlinedIcon fontSize="inherit" />
           </Typography>
           <Typography variant="body2">
-            {dernerPartisPolitique && dernerPartisPolitique.dateFin === null
-              ? dernerPartisPolitique.libelle
+            {dernierPartisPolitique && dernierPartisPolitique.dateFin === null
+              ? dernierPartisPolitique.libelle
               : "-"}
           </Typography>
         </div>

app/depute/[slug]/WeeklyActivity.tsx

@@ -0,0 +1,203 @@
+"use client";
+import * as React from "react";
+import { StateHebdoType } from "@prisma/client";
+import { getMondayDate, getWeekIndex } from "./getWeekIndex";
+import {
+  BarPlot,
+  ChartsAxis,
+  ChartsAxisHighlight,
+  ChartsTooltip,
+  LinePlot,
+  ChartContainer,
+  useDrawingArea,
+  useXScale,
+} from "@mui/x-charts";
+
+const POINTS_NUMBER = 50;
+
+export type WeeklyStatsProps = {
+  deputeWeeklyActivity: {
+    semaineIndex: number;
+    valeur: number;
+    type: StateHebdoType;
+    acteurUid: string;
+  }[];
+  statsOnWeeklyActivity: {
+    semaineIndex: number;
+    valeur: number;
+    type: StateHebdoType;
+    acteurUid: string;
+  }[];
+};
+
+type WeekActivity = {
+  [key in StateHebdoType]: {
+    depute?: number;
+    max?: number;
+    median?: number;
+  };
+};
+
+export default function WeeklyStats(props: WeeklyStatsProps) {
+  const groupedPerWeek: Record<number, WeekActivity> = {};
+
+  for (const activity of [
+    ...props.deputeWeeklyActivity,
+    ...props.statsOnWeeklyActivity,
+  ]) {
+    if (groupedPerWeek[activity.semaineIndex] === undefined) {
+      groupedPerWeek[activity.semaineIndex] = {} as WeekActivity;
+    }
+
+    if (groupedPerWeek[activity.semaineIndex][activity.type] === undefined) {
+      groupedPerWeek[activity.semaineIndex][activity.type] = {};
+    }
+
+    switch (activity.acteurUid) {
+      case "median":
+        groupedPerWeek[activity.semaineIndex][activity.type].median =
+          activity.valeur;
+        break;
+      case "max":
+        groupedPerWeek[activity.semaineIndex][activity.type].max =
+          activity.valeur;
+        break;
+      default:
+        groupedPerWeek[activity.semaineIndex][activity.type].depute =
+          activity.valeur;
+        break;
+    }
+  }
+
+  const currentWeekIndex = getWeekIndex(17, new Date());
+
+  const displayedWeekIndex = [...Array(POINTS_NUMBER)].map(
+    (_, index) => currentWeekIndex - POINTS_NUMBER + index
+  );
+
+  const presenceDetecteeDataset = displayedWeekIndex.map((semaineIndex) => ({
+    date: getMondayDate(17, semaineIndex),
+    debat: groupedPerWeek[semaineIndex]?.presenceDetectee?.depute ?? 0,
+    debatMedian: groupedPerWeek[semaineIndex]?.presenceDetectee?.median ?? 0,
+    debatMax: groupedPerWeek[semaineIndex]?.presenceDetectee?.max ?? 0,
+
+    presenceCommission:
+      groupedPerWeek[semaineIndex]?.presenceCommision?.depute ?? 0,
+    presenceCommissionMedian:
+      groupedPerWeek[semaineIndex]?.presenceCommision?.median ?? 0,
+    presenceCommissionMax:
+      groupedPerWeek[semaineIndex]?.presenceCommision?.max ?? 0,
+  }));
+
+  const vacances = presenceDetecteeDataset
+    .reduce<{ start: number; end: number }[]>((acc, week, index) => {
+      if (week.debatMax !== 0 || week.presenceCommissionMax !== 0) {
+        return acc;
+      }
+      if (acc.length === 0) {
+        return [{ start: index, end: index + 1 }];
+      }
+      if (index === acc[acc.length - 1].end) {
+        return [
+          ...acc.slice(0, acc.length - 1),
+          { ...acc[acc.length - 1], end: index + 1 },
+        ];
+      }
+
+      return [...acc, { start: index, end: index + 1 }];
+    }, [])
+    .map(({ start, end }) => ({
+      start: presenceDetecteeDataset[start].date,
+      end: presenceDetecteeDataset[end - 1].date,
+    }));
+
+  return (
+    <ChartContainer
+      height={300}
+      dataset={presenceDetecteeDataset}
+      xAxis={[
+        {
+          scaleType: "band",
+          dataKey: "date",
+          valueFormatter: (date, ctx) => {
+            if (ctx.location === "tick") {
+              return date.toLocaleDateString("fr-FR", {
+                month: "long",
+                year: "2-digit",
+              });
+            }
+            return `Semaine du ${(date as Date).toLocaleDateString("fr-FR", {
+              month: "short",
+              day: "2-digit",
+            })}`;
+          },
+          tickInterval: (_, index) => index % 10 === 5,
+          // @ts-ignore
+          categoryGapRatio: 0,
+        },
+      ]}
+      series={[
+        {
+          dataKey: "presenceCommissionMedian",
+          type: "line",
+          stack: "mediane",
+          color: "red",
+          curve: "step",
+          label: "mediane réunion commissions",
+        },
+        {
+          dataKey: "presenceCommission",
+          type: "bar",
+          stack: "depute",
+          color: "orange",
+          label: "réunion commissions",
+        },
+
+        {
+          dataKey: "debat",
+          type: "bar",
+          stack: "depute",
+          color: "blue",
+
+          label: "présence hémicicle",
+        },
+        {
+          dataKey: "debatMedian",
+          type: "line",
+          stack: "mediane",
+          color: "darkblue",
+          curve: "step",
+          label: "mediane présence hémicicle",
+        },
+      ]}
+    >
+      <BarPlot />
+      <LinePlot />
+      <ChartsAxis />
+      <ChartsAxisHighlight x="band" />
+      <VacanceParlementaire vacances={vacances} />
+      <ChartsTooltip trigger="axis" />
+    </ChartContainer>
+  );
+}
+
+type VacanceParlementaireProps = {
+  vacances: { start: Date; end: Date }[];
+};
+
+function VacanceParlementaire({ vacances }: VacanceParlementaireProps) {
+  const scale = useXScale<"band">();
+  const drawingArea = useDrawingArea();
+
+  return vacances.map(({ start, end }) => (
+    <rect
+      key={start.getTime()}
+      x={scale(start)! - (scale.step() - scale.bandwidth()) / 2}
+      y={drawingArea.top}
+      height={drawingArea.height}
+      width={scale(end)! - scale(start)! + scale.step()}
+      stroke="none"
+      fillOpacity={0.1}
+    />
+  ));
+}

app/depute/[slug]/amendements/AmendementsStatistics.tsx

@@ -1,7 +1,4 @@
 import React from "react";
-
-import Stack from "@mui/material/Stack";
-
 import { prisma } from "@/prisma";
 
 async function getDeputeAmendementStatsUnCached(uid: string) {

app/depute/[slug]/amendements/page.tsx

@@ -37,7 +37,9 @@ export default async function Amendements({
   return (
     <Stack>
       <p>Amendements</p>
+
       <AmendementsStatistics deputeUid={uid} />
+
       {amendements &&
         amendements
           .sort((a, b) =>

app/depute/[slug]/getWeekIndex.ts

@@ -0,0 +1,37 @@
+/**
+ * Date du lundi de la premiere sceance de la legislature.
+ */
+export const legistature_begining: Record<number, number | undefined> = {
+  14: new Date("2012-06-18T00:00:00Z").getTime(),
+  15: new Date("2017-06-26T00:00:00Z").getTime(),
+  16: new Date("2022-06-27T00:00:00Z").getTime(),
+  17: new Date("2024-07-15T00:00:00Z").getTime(),
+  18: undefined,
+  0: undefined,
+};
+
+const MILLISECONDS_PER_WEEK = 7 * 24 * 60 * 60 * 1000;
+
+export function getWeekIndex(legislature: number, date: Date) {
+  if (legistature_begining[legislature] === undefined) {
+    throw new Error(
+      `La legislature ${legislature} n'as pas de date de départ.`
+    );
+  }
+
+  return Math.floor(
+    (date.getTime() - legistature_begining[legislature]) / MILLISECONDS_PER_WEEK
+  );
+}
+
+export function getMondayDate(legislature: number, weekIndex: number) {
+  if (legistature_begining[legislature] === undefined) {
+    throw new Error(
+      `La legislature ${legislature} n'as pas de date de départ.`
+    );
+  }
+
+  return new Date(
+    legistature_begining[legislature] + weekIndex * MILLISECONDS_PER_WEEK
+  );
+}