Stats par commune v1 ✨

client/api/index.ts

@@ -94,6 +94,14 @@ const index = {
     });
   },
 
+  getDataDuree(): Promise<any> {
+    const runtimeConfig = useRuntimeConfig();
+    return useFetch(`/data/duree`, {
+      method: 'GET',
+      baseURL: runtimeConfig.public.apiSecheresseUrl,
+    });
+  },
+
   getArretesRestrictions(date: string, area?: string): Promise<any> {
     const runtimeConfig = useRuntimeConfig();
     return useFetch(`/arretes_restrictions?date=${date}&${area ? area : ''}`, {

client/components/carte/Map.vue

@@ -32,6 +32,7 @@ const departementCode = route.query.depCode;
 const showRestrictionsBtn = ref(true);
 const showError = ref(false);
 const refDataStore = useRefDataStore();
+const depsSelected = ref([]);
 
 const initialState = [[-7.075195, 41.211722], [11.403809, 51.248163]];
 
@@ -100,7 +101,7 @@ onMounted(() => {
         break;
       }
     }
-    map.value?.addSource('cadastre', {
+    map.value?.addSource('decoupage-administratif', {
       type: 'vector',
       url:
         `https://openmaptiles.data.gouv.fr/data/decoupage-administratif.json`,
@@ -203,6 +204,10 @@ const updateContourFilter = () => {
   map.value?.setFilter('zones-contour', ['all', ['==', 'type', selectedTypeEau.value], ['==', 'id', zoneSelected.value]]);
 };
 
+const updateDepartementsContourFilter = () => {
+  map.value?.setFilter('departements-contour', ['in', 'code', ...depsSelected.value.map((d: any) => d.code)]);
+};
+
 const closeModal = () => {
   modalOpened.value = false;
 };
@@ -256,7 +261,7 @@ const addSourceAndLayerZones = (pmtilesUrl: string) => {
   map.value?.addLayer({
     id: 'departements-data',
     type: 'line',
-    source: 'cadastre',
+    source: 'decoupage-administratif',
     'source-layer': 'departements',
     layout: {
       'line-join': 'round',
@@ -268,6 +273,18 @@ const addSourceAndLayerZones = (pmtilesUrl: string) => {
     },
   }, firstSymbolId);
 
+  map.value?.addLayer({
+    id: 'departements-contour',
+    type: 'line',
+    source: 'decoupage-administratif',
+    'source-layer': 'departements',
+    filter: ['all', ['in', 'code', ...depsSelected.value.map((d: any) => d.code)]],
+    paint: {
+      'line-color': '#000091',
+      'line-width': 2,
+    },
+  }, firstSymbolId);
+
   map.value?.addLayer({
     id: 'zones-contour',
     type: 'line',
@@ -357,6 +374,8 @@ watch(() => props.area, () => {
       padding: 30,
     });
   }
+  depsSelected.value = deps;
+  updateDepartementsContourFilter();
 });
 </script>
 

client/components/carte/commune/Filter.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { BassinVersant } from '../../../dto/bassinVersant.dto';
+import { Region } from '../../../dto/region.dto';
+import { Departement } from '../../../dto/departement.dto';
+import { useRefDataStore } from '../../../store/refData';
+import moment from 'moment';
+
+const emit = defineEmits<{
+  filterChange: any;
+}>();
+
+const refDataStore = useRefDataStore();
+const dateMin = ref('2013-01');
+const currentDate = moment();
+const tmp = moment();
+tmp.subtract(1, 'year');
+const dateDebut = ref(tmp.format('YYYY-MM'));
+const dateFin = ref(currentDate.format('YYYY-MM'));
+const area = ref('');
+const computeDisabled = ref(false);
+
+const areaOptions = ref([]);
+
+const loadData = (() => {
+  const areaText = areaOptions.value.find(a => a.value === area.value)?.text
+  emit('filterChange', {
+    dateDebut: dateDebut.value,
+    dateFin: dateFin.value,
+    area: area.value,
+    areaText: areaText,
+  });
+  computeDisabled.value = true;
+});
+
+watch(() => refDataStore.departements, () => {
+  areaOptions.value = [{
+    text: 'France entière',
+    value: '',
+  }];
+  areaOptions.value.push({
+    text: 'Bassins Versants',
+    disabled: true,
+  });
+  refDataStore.bassinsVersants.forEach((b: BassinVersant) => {
+    areaOptions.value.push({
+      text: b.nom,
+      value: `bassinVersant=${b.id}`,
+    });
+  });
+  areaOptions.value.push({
+    text: 'Régions',
+    disabled: true,
+  });
+  refDataStore.regions.forEach((r: Region) => {
+    areaOptions.value.push({
+      text: r.nom,
+      value: `region=${r.id}`,
+    });
+  });
+  areaOptions.value.push({
+    text: 'Départements',
+    disabled: true,
+  });
+  refDataStore.departements.forEach((d: Departement) => {
+    areaOptions.value.push({
+      text: d.nom,
+      value: `departement=${d.id}`,
+    });
+  });
+}, {
+  immediate: true,
+});
+</script>
+
+<template>
+  <div class="fr-grid-row fr-grid-row--gutters">
+    <div class="fr-col-3">
+      <DsfrSelect label="Territoire"
+                  v-model="area"
+                  @update:modelValue="computeDisabled = false"
+                  :options="areaOptions" />
+    </div>
+    <div class="fr-col-3">
+      <DsfrInput
+        id="dateDebut"
+        v-model="dateDebut"
+        @update:modelValue="computeDisabled = false"
+        label="Date début"
+        label-visible
+        type="month"
+        name="dateDebutCarte"
+        :min="dateMin"
+        :max="dateFin"
+      />
+    </div>
+    <div class="fr-col-3">
+      <DsfrInput
+        id="dateFin"
+        v-model="dateFin"
+        @update:modelValue="computeDisabled = false"
+        label="Date fin"
+        label-visible
+        type="month"
+        name="dateCarte"
+        :min="dateDebut"
+        :max="currentDate.format('YYYY-MM')"
+      />
+    </div>
+    <div class="fr-col-3">
+      <DsfrButton :disabled="computeDisabled"
+                  @click="loadData()">
+        Calculer
+      </DsfrButton>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.fr-grid-row {
+  align-items: end;
+}
+</style>