Rajout filtre type d'eau départements ✨

client/components/carte/commune/Map.vue

@@ -500,7 +500,7 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
         <div v-for="legend of legende"
              :style="{'background-color': legend.color}"
              class="map-legend-carre fr-mx-1w"></div>
-        <div>Situations extrèmes</div>
+        <div>Situation extrème</div>
       </div>
 
       <div data-html2canvas-ignore="true" class="text-align-right">
@@ -518,27 +518,31 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
                        @expand="expanded = !expanded"
                        :id="true">
           <div>
-            Les couleurs de la carte traduisent un "score de restrictions appliquées aux usages de l'eau". Ce score est
-            calculé pour chaque commune en combinant deux facteurs : la durée et la gravité des restrictions.<br /><br />
-            L'intensité des restrictions est classée en cinq niveaux, chacun pondéré selon sa sévérité&nbsp;:
+            Les couleurs de la carte traduisent un "score de sur les niveaux de gravité appliqués aux usages de l'eau".
+            Ce score est calculé pour chaque commune en combinant deux facteurs : la durée et le niveau de gravité des
+            épisodes de sécheresse. Pour les territoires concernés par différentes ressources (eaux superficielles,
+            souterraines, eau potable), le niveau de gravité maximale est retenu. La carte représente donc un indice de
+            sécheresse toutes ressources confondues, pour plus de détail, nous vous invitons à cliquer sur une
+            commune.<br /><br />
+            L'intensité des sécheresses est classée en cinq niveaux, chacun pondéré selon sa sévérité&nbsp;:
             <ul>
-              <li>Pas de restrictions&nbsp;: 0</li>
+              <li>Pas de restriction&nbsp;: 0</li>
               <li>Vigilance&nbsp;: 0,5</li>
               <li>Alerte&nbsp;: 2</li>
               <li>Alerte renforcée&nbsp;: 3</li>
               <li>Crise&nbsp;: 4</li>
             </ul>
 
-            La durée correspond au nombre de jours pendant lesquels ces restrictions sont en place. Pour chaque commune,
-            le score est obtenu en multipliant la pondération par le nombre de jours concerné par chaque niveau de
-            restriction, puis en additionnant ces valeurs. Ce score cumulatif est ensuite comparé à un score maximal
-            théorique (limité à 60 points par mois, soit 15 jours de crise) pour le normaliser sur une échelle de 0 à
-            100
-            %. Le score est limité pour éviter des valeurs trop élevées dans les cas extrêmes.<br /><br />
+            La durée correspond au nombre de jours pendant lesquels la commune est concernée par un niveau de gravité
+            sécheresse. Pour chaque commune, le score est obtenu en multipliant la pondération par le nombre de jours
+            concerné par chaque niveau de gravité, puis en additionnant ces valeurs. Ce score cumulatif est ensuite
+            comparé à un score maximal théorique (limité à 60 points par mois, soit 15 jours de crise) pour le
+            normaliser sur une échelle de 0 à 100 %. Le score est limité pour éviter des valeurs trop élevées dans les
+            cas extrêmes<br /><br />
 
             Les résultats sont ensuite visualisés à l'aide d'un code couleur. Plus le score est élevé, plus la couleur
-            est foncée, indiquant une gravité et/ou une durée importante des restrictions dans la commune. L'échelle
-            utilisée est la suivante&nbsp;:
+            est foncée, indiquant une gravité et/ou une durée importante des niveaux de gravité sécheresse dans la
+            commune. L'échelle utilisée est la suivante&nbsp;:
 
             <ul>
               <li>
@@ -569,9 +573,8 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
               </li>
             </ul>
 
-            Plus le score est élevé, plus la couleur est foncée, indiquant une gravité et/ou une durée importante des
-            restrictions dans la commune. Une même couleur peut ainsi correspondre à des situations très variées. Pour
-            mieux comprendre la situation d'une commune, nous vous invitons à consulter son historique.
+            Une même couleur peut ainsi correspondre à des situations très variées. Pour mieux comprendre la situation
+            d'une commune, nous vous invitons à consulter son historique.
           </div>
         </DsfrAccordion>
       </div>

client/components/donnees/AreaChart.vue

@@ -335,7 +335,7 @@ watch(() => refDataStore.departements, () => {
     <div class="fr-col-12">
       <DsfrAlert data-html2canvas-ignore="true" type="info" class="fr-my-2w">
         Nous ne sommes pas en mesure de fournir les restrictions appliquées sur l'eau potable avant le 28/04/2024. Pour
-        connaître les niveaux de restrictions en vigueur; veuillez vous référer aux niveaux de restrictions des eaux
+        connaître les niveaux de restrictions en vigueur, veuillez vous référer aux niveaux de restrictions des eaux
         superficielles et souterraines.
       </DsfrAlert>
     </div>

client/components/donnees/CommuneChart.vue

@@ -181,20 +181,20 @@ async function downloadGraph() {
               Calculer
             </DsfrButton>
           </div>
-          <div class="fr-col-12">
-            <DsfrAlert data-html2canvas-ignore="true" type="info" class="fr-my-2w">
-              Nous ne sommes pas en mesure de fournir les restrictions appliquées sur l'eau potable avant le 28/04/2024.
-              Pour connaître les niveaux de restrictions en vigueur; veuillez vous référer aux niveaux de restrictions
-              des
-              eaux superficielles et souterraines.
-            </DsfrAlert>
-          </div>
         </div>
         <h6 class="fr-mb-1w">Tout type d'eau</h6>
+        <p class="fr-text--sm"> Niveau de gravité maximal observé parmi les niveaux de gravité relatifs aux eaux superficielles, souterraines et l'eau potable</p>
         <DonneesCommuneBarChart :restrictions="restrictionsFiltered"
                                 :communeNom="communeStats.commune.nom" />
         <div v-for="typeEau of typesEauOptions">
           <h6 class="fr-mb-1w">{{ typeEau.text }}</h6>
+          <div v-if="typeEau.value === 'AEP'">
+            <DsfrAlert data-html2canvas-ignore="true" type="info" class="fr-my-2w">
+              Nous ne sommes pas en mesure de fournir les restrictions appliquées sur l'eau potable avant le 28/04/2024.
+              Pour connaître les niveaux de restrictions en vigueur, veuillez vous référer aux niveaux de restrictions
+              des eaux superficielles et souterraines.
+            </DsfrAlert>
+          </div>
           <DonneesCommuneBarChart :typeEau="typeEau.value"
                                   :restrictions="restrictionsFiltered"
                                   :communeNom="communeStats.commune.nom" />

client/components/donnees/DepartementChart.vue

@@ -39,9 +39,28 @@ const currentDate = ref(new Date().toISOString().split('T')[0]);
 const territoire = ref();
 const screenshotZone = ref();
 
+const typesEauOptions = [
+  {
+    text: 'Tout type d\'eau',
+    value: '',
+  },
+  {
+    text: 'Eau potable',
+    value: 'AEP',
+  },
+  {
+    text: `Eau superficielle`,
+    value: 'SUP',
+  }, {
+    text: 'Eau souterraine',
+    value: 'SOU',
+  },
+];
+
 const areaOptions = ref([]);
 
 const formData = reactive({
+  typeEau: '',
   dateDebut: tmp.toISOString().split('T')[0],
   dateFin: new Date().toISOString().split('T')[0],
   area: '',
@@ -95,6 +114,11 @@ const rules = computed(() => {
         return val !== null;
       }),
     },
+    typeEau: {
+      required: helpers.withMessage('Le type d\'eau est obligatoire.', (val: string) => {
+        return val !== null;
+      }),
+    },
   };
 });
 
@@ -123,7 +147,7 @@ function sortData() {
     datasets: [
       {
         label: 'Vigilance',
-        data: dataDepartement.value.map((d: any) => d.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'vigilance' ? 1 : 0), 0)),
+        data: dataDepartement.value.map((d: any) => d.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'vigilance' ? 1 : 0), 0)),
         fill: {
           target: 'stack',
         },
@@ -132,7 +156,7 @@ function sortData() {
       },
       {
         label: 'Alerte',
-        data: dataDepartement.value.map((d: any) => d.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'alerte' ? 1 : 0), 0)),
+        data: dataDepartement.value.map((d: any) => d.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'alerte' ? 1 : 0), 0)),
         fill: {
           target: 'stack',
         },
@@ -141,7 +165,7 @@ function sortData() {
       },
       {
         label: 'Alerte renforcée',
-        data: dataDepartement.value.map((d: any) => d.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'alerte_renforcee' ? 1 : 0), 0)),
+        data: dataDepartement.value.map((d: any) => d.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'alerte_renforcee' ? 1 : 0), 0)),
         fill: {
           target: 'stack',
         },
@@ -150,7 +174,7 @@ function sortData() {
       },
       {
         label: 'Crise',
-        data: dataDepartement.value.map((d: any) => d.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'crise' ? 1 : 0), 0)),
+        data: dataDepartement.value.map((d: any) => d.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'crise' ? 1 : 0), 0)),
         fill: {
           target: 'stack',
         },
@@ -162,6 +186,19 @@ function sortData() {
   loading.value = false;
 }
 
+const getNiveauGravite = (departement: any) => {
+  switch (formData.typeEau) {
+    case 'SUP':
+      return departement.niveauGraviteSup;
+    case 'SOU':
+      return departement.niveauGraviteSou;
+    case 'AEP':
+      return departement.niveauGraviteAep;
+    default:
+      return departement.niveauGravite;
+  }
+};
+
 loadData();
 
 const tooltipTitle = (tooltipItems: any[]): string => {
@@ -207,7 +244,7 @@ async function downloadGraph() {
 
     const a = document.createElement('a');
     a.href = content.replace('image/png', 'image/octet-stream');
-    a.download = `graphique_departements_${territoire.value.text}_${formData.dateDebut}_${formData.dateFin}.png`;
+    a.download = `graphique_departements_${territoire.value.text}_${formData.dateDebut}_${formData.dateFin}_${formData.typeEau}.png`;
     a.click();
 
   });
@@ -256,7 +293,16 @@ watch(() => refDataStore.departements, () => {
 <template>
   <div ref="screenshotZone">
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-lg-3 fr-col-12">
+      <div class="fr-col-lg-2 fr-col-6">
+        <DsfrInputGroup :error-message="utils.showInputError(v$, 'typeEau')">
+          <DsfrSelect label="Type d'eau"
+                      v-model="formData.typeEau"
+                      @update:modelValue="sortData()"
+                      :options="typesEauOptions"
+                      required />
+        </DsfrInputGroup>
+      </div>
+      <div class="fr-col-lg-2 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'area')">
           <DsfrSelect label="Territoire"
                       v-model="formData.area"
@@ -297,13 +343,20 @@ watch(() => refDataStore.departements, () => {
           />
         </DsfrInputGroup>
       </div>
-      <div data-html2canvas-ignore="true" class="fr-col-lg-3 fr-col-6">
+      <div data-html2canvas-ignore="true" class="fr-col-lg-2 fr-col-6">
         <DsfrButton :disabled="computeDisabled"
                     @click="loadData()">
           Calculer
         </DsfrButton>
       </div>
     </div>
+    <div class="fr-col-12">
+      <DsfrAlert data-html2canvas-ignore="true" type="info" class="fr-my-2w">
+        Nous ne sommes pas en mesure de fournir les restrictions appliquées sur l'eau potable avant le 28/04/2024. Pour
+        connaître les niveaux de restrictions en vigueur, veuillez vous référer aux niveaux de restrictions des eaux
+        superficielles et souterraines.
+      </DsfrAlert>
+    </div>
     <template v-if="!loading">
       <Line v-if="chartLineData"
             id="departement-chart-line"
@@ -321,8 +374,9 @@ watch(() => refDataStore.departements, () => {
     <DonneesDepartementTable class="fr-mt-4w"
                              :dataDepartement="dataDepartement"
                              :territoire="territoire?.text"
-                             :dateDebut="dateDebut"
-                             :dateFin="dateFin" />
+                             :typeEau="formData.typeEau"
+                             :dateDebut="formData.dateDebut"
+                             :dateFin="formData.dateFin" />
   </template>
   <template v-else>
     <div class="fr-grid-row fr-grid-row--center fr-my-2w">

client/components/donnees/DepartementTable.vue

@@ -4,6 +4,7 @@ import { json2csv } from 'json-2-csv';
 
 const props = defineProps<{
   dataDepartement: any,
+  typeEau: any,
   territoire: string,
   dateDebut: string,
   dateFin: string,
@@ -18,10 +19,10 @@ async function downloadCsv() {
     .map((stat: any) => {
       return {
         date: stat.date,
-        vigilance: stat.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'vigilance' ? 1 : 0), 0),
-        alerte: stat.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'alerte' ? 1 : 0), 0),
-        alerte_renforcee: stat.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'alerte_renforcee' ? 1 : 0), 0),
-        crise: stat.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'crise' ? 1 : 0), 0),
+        vigilance: stat.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'vigilance' ? 1 : 0), 0),
+        alerte: stat.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'alerte' ? 1 : 0), 0),
+        alerte_renforcee: stat.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'alerte_renforcee' ? 1 : 0), 0),
+        crise: stat.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'crise' ? 1 : 0), 0),
       };
     });
   const csv = await json2csv(formatData, {
@@ -34,24 +35,37 @@ async function downloadCsv() {
 
   let a = document.createElement('a');
   a.href = url;
-  a.download = `tableau_departements_${props.territoire}_${props.dateDebut}_${props.dateFin}.csv`;
+  a.download = `tableau_departements_${props.territoire}_${props.dateDebut}_${props.dateFin}_${props.typeEau}.csv`;
   a.click();
 }
 
-watch(() => [props.dataDepartement], () => {
-  if(!props.dataDepartement) {
+const getNiveauGravite = (departement: any) => {
+  switch (props.typeEau) {
+    case 'SUP':
+      return departement.niveauGraviteSup;
+    case 'SOU':
+      return departement.niveauGraviteSou;
+    case 'AEP':
+      return departement.niveauGraviteAep;
+    default:
+      return departement.niveauGravite;
+  }
+};
+
+watch(() => [props.typeEau, props.dataDepartement], () => {
+  if (!props.dataDepartement) {
     return;
   }
   rows.value = props.dataDepartement.map(s => {
     return [
       moment(s.date).format('DD/MM/YYYY'),
-      s.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'vigilance' ? 1 : 0), 0),
-      s.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'alerte' ? 1 : 0), 0),
-      s.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'alerte_renforcee' ? 1 : 0), 0),
-      s.departements.reduce((acc: number, dep: any) => acc + (dep.niveauGravite === 'crise' ? 1 : 0), 0),
+      s.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'vigilance' ? 1 : 0), 0),
+      s.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'alerte' ? 1 : 0), 0),
+      s.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'alerte_renforcee' ? 1 : 0), 0),
+      s.departements.reduce((acc: number, dep: any) => acc + (getNiveauGravite(dep) === 'crise' ? 1 : 0), 0),
     ];
   });
-  componentKey.value ++;
+  componentKey.value++;
 }, { immediate: true });
 </script>
 

package.json

@@ -45,7 +45,7 @@
     "@types/node": "^22.2.0",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
-    "@vite-pwa/nuxt": "^0.9.1",
+    "@vite-pwa/nuxt": "^0.10.5",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.0",
     "cypress": "^13.0.0",
@@ -57,7 +57,7 @@
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-vue": "^9.9.0",
     "istanbul-lib-coverage": "^3.2.0",
-    "jsdom": "^24.1.0",
+    "jsdom": "^25.0.1",
     "npm-run-all": "^4.1.5",
     "nuxt": "^3.5.0",
     "nuxt-simple-robots": "^4.0.0-rc.17",
@@ -66,7 +66,7 @@
     "sass": "^1.62.1",
     "sass-loader": "^16.0.0",
     "start-server-and-test": "^2.0.0",
-    "typescript": "~5.5.4",
+    "typescript": "~5.6.2",
     "vite-plugin-istanbul": "^6.0.2"
   },
   "engines": {