Ajout des nouveaux graphes à la page stats

packages/site/app/stats/CollectiviteActivesEtTotalParType.tsx

@@ -34,17 +34,25 @@ function useCollectiviteActivesEtTotalParType(
       return {
         categories: [
           {
-            id: epcis.typologie + ' activés',
-            label: epcis.typologie + ' activés',
-            value: epcis.actives,
+            id: 'Collectivités actives',
+            value: data.reduce(
+              (total, currValue) => total + (currValue.actives ?? 0),
+              0,
+            ),
           },
           {
-            id: epcis.typologie + ' inactifs',
-            label: epcis.typologie + ' inactifs',
-            value: (epcis.total || 0) - (epcis.actives || 0),
+            id: 'Collectivités inactives',
+            value: data.reduce(
+              (total, currValue) =>
+                total + ((currValue.total ?? 0) - (currValue.actives ?? 0)),
+              0,
+            ),
           },
         ],
-        total: epcis.total,
+        total: data.reduce(
+          (total, currValue) => total + (currValue.total ?? 0),
+          0,
+        ),
       };
     },
   );
@@ -75,15 +83,15 @@ export default function CollectiviteActivesEtTotalParType({
           total={total || 0}
           rows={10}
           columns={10}
-          margin={{top: 0, right: 30, bottom: 10, left: 30}}
-          animate={false}
+          margin={{top: 10, right: 10, bottom: 10, left: 10}}
+          animate={true}
         />
       )}
       labels={categories.map(c => c.id)}
       customColors={['#889FC2', '#D9D9D9']}
       containerClassname="mt-6"
       graphContainerClassname="h-[400px]"
-      legendContainerClassname="md:grid-flow-col max-md:mx-6 max-md:flex"
+      legendContainerClassname="flex-col"
     />
   );
 }

packages/site/app/stats/EvolutionCollectivitesLabellisees.tsx

@@ -0,0 +1,97 @@
+import ChartWithLegend from '@components/charts/ChartWithLegend';
+import {supabase} from 'app/initSupabase';
+import useSWR from 'swr';
+import {fromMonth} from './shared';
+import {addLocalFilters} from './utils';
+import BarChart from '@components/charts/BarChart';
+
+const useEvolutionCollectivitesLabellisees = (
+  codeRegion: string,
+  codeDepartement: string,
+) => {
+  return useSWR(
+    `stats_evolution_nombre_labellisations-${codeRegion}-${codeDepartement}`,
+    async () => {
+      let select = supabase
+        .from('stats_evolution_nombre_labellisations')
+        .select()
+        .gte('mois', fromMonth);
+
+      //   select = addLocalFilters(select, codeDepartement, codeRegion);
+
+      const {data, error} = await select;
+
+      if (error) {
+        throw new Error(error.message);
+      }
+      if (!data || !data.length) {
+        return null;
+      }
+
+      return data
+        .filter(d => d.mois !== null)
+        .map(d => {
+          if (d.mois) console.log(new Date(d.mois).getFullYear());
+
+          return {
+            mois: d.mois,
+            '1 étoile': d.etoile_1 ?? 0,
+            '2 étoiles': d.etoile_2 ?? 0,
+            '3 étoiles': d.etoile_3 ?? 0,
+            '4 étoiles': d.etoile_4 ?? 0,
+            '5 étoiles': d.etoile_5 ?? 0,
+          };
+        });
+    },
+  );
+};
+
+type EvolutionCollectivitesLabelliseesProps = {
+  region?: string;
+  department?: string;
+};
+
+const EvolutionCollectivitesLabellisees = ({
+  region = '',
+  department = '',
+}: EvolutionCollectivitesLabelliseesProps) => {
+  const {data} = useEvolutionCollectivitesLabellisees(region, department);
+
+  if (!data) return null;
+
+  return (
+    <ChartWithLegend
+      graph={colors => (
+        <BarChart
+          data={
+            data as {
+              mois: string;
+              '1 étoile': number;
+              '2 étoiles': number;
+              '3 étoiles': number;
+              '4 étoiles': number;
+              '5 étoiles': number;
+            }[]
+          }
+          keys={[
+            '1 étoile',
+            '2 étoiles',
+            '3 étoiles',
+            '4 étoiles',
+            '5 étoiles',
+          ]}
+          indexBy="mois"
+          customColors={colors}
+          axisLeftLabel="Étoiles"
+        />
+      )}
+      labels={['1 étoile', '2 étoiles', '3 étoiles', '4 étoiles', '5 étoiles']}
+      customColors={['#21AB8E', '#34BAB5', '#FFCA00', '#FFB7AE', '#FF732C']}
+      containerClassname="mt-8"
+      graphContainerClassname="h-[400px]"
+      legendContainerClassname="md:grid-flow-col max-md:mx-6 max-md:flex"
+    />
+  );
+};
+
+export default EvolutionCollectivitesLabellisees;

packages/site/app/stats/EvolutionFiches.tsx

@@ -8,22 +8,26 @@ import LineChart from '@components/charts/LineChart';
 
 type Vue =
   | 'stats_locales_evolution_nombre_fiches'
-  | 'stats_locales_evolution_collectivite_avec_minimum_fiches';
+  | 'stats_locales_evolution_collectivite_avec_minimum_fiches'
+  | 'stats_evolution_nombre_plans';
 
 const colonneValeur = {
   stats_locales_evolution_nombre_fiches: 'fiches',
   stats_locales_evolution_collectivite_avec_minimum_fiches: 'collectivites',
+  stats_evolution_nombre_plans: 'plans',
 };
 
 const legende = {
   stats_locales_evolution_nombre_fiches: 'Nombre total de fiches',
   stats_locales_evolution_collectivite_avec_minimum_fiches:
     'Collectivités avec cinq fiches ou plus',
+  stats_evolution_nombre_plans: 'Historique du nombre de plans',
 };
 
 const labels = {
   fiches: 'Fiches',
   collectivites: 'Collectivités',
+  plans: 'Plans',
 };
 
 export function useEvolutionFiches(
@@ -34,7 +38,9 @@ export function useEvolutionFiches(
   return useSWR(`${vue}-${codeRegion}-${codeDepartement}`, async () => {
     let select = supabase.from(vue).select().gte('mois', fromMonth);
 
-    select = addLocalFilters(select, codeDepartement, codeRegion);
+    if (vue !== 'stats_evolution_nombre_plans') {
+      select = addLocalFilters(select, codeDepartement, codeRegion);
+    }
 
     const {data, error} = await select;
 

packages/site/app/stats/EvolutionIndicateurs.tsx

@@ -9,7 +9,7 @@ import {addLocalFilters} from './utils';
 
 const useCollectivitesAvecIndicateur = (
   codeRegion: string,
-  codeDepartement: string
+  codeDepartement: string,
 ) => {
   const date = new Date();
   const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-01`;
@@ -32,7 +32,7 @@ const useCollectivitesAvecIndicateur = (
       if (!data || !data.length) return null;
 
       return data[0].collectivites;
-    }
+    },
   );
 };
 
@@ -50,9 +50,8 @@ export function EvolutionIndicateurs({
   return (
     <>
       <ChartHead>
-        Évolution de l’utilisation des indicateurs
-        <br />
-        {data} collectivité{data !== 1 && 's'}
+        Évolution de l’utilisation des indicateurs - {data} collectivité
+        {data !== 1 && 's'}
         {data === 1 ? ' a' : ' ont'} renseigné des indicateurs
       </ChartHead>
       <div className="fr-grid-row fr-grid-row--center fr-grid-row--gutters">

packages/site/app/stats/EvolutionPlansAction.tsx

@@ -14,25 +14,31 @@ export function EvolutionPlansAction({
   const {data: collectivites} = useEvolutionFiches(
     'stats_locales_evolution_collectivite_avec_minimum_fiches',
     region,
-    department
+    department,
   );
   const {data: fiches} = useEvolutionFiches(
     'stats_locales_evolution_nombre_fiches',
     region,
-    department
+    department,
+  );
+  const {data: plans} = useEvolutionFiches(
+    'stats_evolution_nombre_plans',
+    region,
+    department,
   );
 
   return (
     <>
-      {collectivites && fiches && (
+      {collectivites && fiches && plans && (
         <ChartHead>
           <>
             Évolution de l&apos;utilisation des plans d&apos;action
             <br />
             {collectivites.last} collectivité
             {collectivites.last !== 1 && 's'}
             {collectivites.last === 1 ? ' a ' : ' ont '}
-            créé des plans d’actions et {fiches.last} fiche
+            créé {plans.last} plan{plans.last !== 1 && 's'} d’actions et{' '}
+            {fiches.last} fiche
             {fiches.last !== 1 && 's'} actions
             {fiches.last === 1 ? ' a été créée' : ' ont été créées'}
           </>
@@ -59,6 +65,16 @@ export function EvolutionPlansAction({
             />
           </div>
         )}
+        {plans && region === '' && department === '' && (
+          <div className="fr-col-xs-12 fr-col-sm-12 fr-col-md-6 fr-col-lg-6 fr-ratio-16x9">
+            <ChartTitle>Historique du nombre de plans</ChartTitle>
+            <EvolutionFiches
+              vue="stats_evolution_nombre_plans"
+              region={region}
+              department={department}
+            />
+          </div>
+        )}
       </div>
     </>
   );

packages/site/app/stats/EvolutionTotalActivationParType.tsx

@@ -44,7 +44,7 @@ export function useEvolutionTotalActivation(
         courant: data[data.length - 1],
         evolution: [
           {
-            id: 'EPCI',
+            id: 'EPCI à fiscalité propre',
             data: data.map(d => ({x: d.mois, y: d.total_epci})),
           },
           {
@@ -55,6 +55,10 @@ export function useEvolutionTotalActivation(
             id: 'Syndicats',
             data: data.map(d => ({x: d.mois, y: d.total_syndicat})),
           },
+          {
+            id: 'Autres collectivités',
+            data: data.map(d => ({x: d.mois, y: d.total_autre})),
+          },
         ],
       };
     },
@@ -84,9 +88,9 @@ export default function EvolutionTotalActivationParType({
           ? 'collectivités activées'
           : 'collectivité activée'}{' '}
         dont {courant.total_epci} EPCI, 
+        {courant.total_commune} commune{courant.total_commune !== 1 && 's'},{' '}
         {courant.total_syndicat} syndicat{courant.total_syndicat !== 1 && 's'}{' '}
-        et 
-        {courant.total_commune} commune{courant.total_commune !== 1 && 's'}
+        et {courant.total_autre} autre{courant.total_autre !== 1 && 's'}
       </ChartHead>
 
       <ChartWithLegend

packages/site/app/stats/StatisticsDisplay.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
 'use client';
 
 import Section from '@components/sections/Section';
@@ -8,10 +9,11 @@ import {EtatDesLieux} from './EtatDesLieux';
 import {EvolutionIndicateurs} from './EvolutionIndicateurs';
 import {EvolutionPlansAction} from './EvolutionPlansAction';
 import EvolutionTotalActivationParType from './EvolutionTotalActivationParType';
-import {ChartHead, ChartTitle, SectionHead} from './headings';
+import {ChartTitle, SectionHead} from './headings';
 import NombreCollectivitesEngagees from './NombreCollectivitesEngagees';
 import NombreUtilisateurParCollectivite from './NombreUtilisateurParCollectivite';
 import dynamic from 'next/dynamic';
+import EvolutionCollectivitesLabellisees from './EvolutionCollectivitesLabellisees';
 
 /**
  * Affiche le contenu de la page statisques
@@ -68,22 +70,21 @@ const StatisticsDisplay = ({
           department={departmentCode}
         />
 
-        <ChartHead>
-          Progression de l’activation des EPCI à fiscalité propre
-          {nationalStats && ' sur le territoire national'}
-        </ChartHead>
         <div className="flex justify-around flex-wrap gap-y-20">
           {nationalStats && (
-            <div className="w-[420px] h-[420px] mt-14">
-              <CarteCollectivites
-                filtre={'engagees'}
-                etoiles={[1, 2, 3, 4, 5]}
-                forcedZoom={5.3}
-              />
+            <div className="fr-col-xs-12 fr-col-sm-12 fr-col-md-4 fr-col-lg-4 fr-ratio-1x1">
+              <ChartTitle>Collectivités engagées</ChartTitle>
+              <div className="w-[420px] h-[420px] mt-14">
+                <CarteCollectivites
+                  filtre={'engagees'}
+                  etoiles={[1, 2, 3, 4, 5]}
+                  forcedZoom={5.3}
+                />
+              </div>
             </div>
           )}
           <div className="fr-col-xs-12 fr-col-sm-12 fr-col-md-4 fr-col-lg-4 fr-ratio-1x1">
-            <ChartTitle>Progression globale</ChartTitle>
+            <ChartTitle>Progression globale de l'activation</ChartTitle>
             <CollectiviteActivesEtTotalParType
               region={regionCode}
               department={departmentCode}
@@ -193,6 +194,12 @@ const StatisticsDisplay = ({
             />
           </div>
         </div>
+        {!regionCode && !departmentCode && (
+          <EvolutionCollectivitesLabellisees
+            region={regionCode}
+            department={departmentCode}
+          />
+        )}
       </Section>
     </>
   );

packages/site/components/carte/CarteCollectivites.tsx

@@ -20,12 +20,14 @@ type CarteCollectivitesProps = {
   filtre: FiltresLabels;
   etoiles: number[];
   forcedZoom?: number;
+  displayLabellisee?: boolean;
 };
 
 const CarteCollectivites = ({
   filtre,
   etoiles,
   forcedZoom,
+  displayLabellisee = false,
 }: CarteCollectivitesProps) => {
   const {data} = useCarteCollectivitesEngagees();
   const [localData, setLocalData] = useState(data);
@@ -108,7 +110,11 @@ const CarteCollectivites = ({
       {localData.collectivites
         .filter(c => !!c.geojson)
         .map(c => (
-          <CollectiviteFeature collectivite={c} key={c.collectivite_id} />
+          <CollectiviteFeature
+            collectivite={c}
+            key={c.collectivite_id}
+            displayLabellisee={displayLabellisee}
+          />
         ))}
     </CarteContainer>
   );