Téléchargements page données ✨

Author: vincentlaine

client/components/carte/Map.vue

@@ -72,6 +72,7 @@ onMounted(() => {
     container: mapContainer.value,
     style: `https://openmaptiles.data.gouv.fr/styles/osm-bright/style.json`,
     bounds: initialState,
+    preserveDrawingBuffer: true,
   });
 
 
@@ -288,6 +289,15 @@ const resetZoneSelected = () => {
   popup.remove();
 };
 
+async function downloadMap() {
+  const content = map.value?.getCanvas().toDataURL('image/png');
+
+  const a = document.createElement('a');
+  a.href = content.replace('image/png', 'image/octet-stream');
+  a.download = `carte_${props.date}.png`;
+  a.click();
+}
+
 watch(() => selectedTypeEau.value, () => {
   resetZoneSelected();
 });
@@ -432,6 +442,12 @@ watch(() => props.area, () => {
                  class="situation-level-bg-4"
                  label="crise" />
     </div>
+
+    <div class="text-align-right">
+      <DsfrButton @click="downloadMap()">
+        Télécharger la carte en .png
+      </DsfrButton>
+    </div>
   </div>
   <template v-else>
     <DsfrAlert title="Votre navigateur ne supporte pas les cartographies"

client/components/carte/Table.vue

@@ -2,6 +2,7 @@
 import api from '../../api';
 import utils from '../../utils';
 import { Ref } from 'vue';
+import { json2csv } from 'json-2-csv';
 
 const props = defineProps<{
   date: string,
@@ -43,12 +44,14 @@ const rows = ref([]);
 const rowsFiltered: Ref<any[]> = ref([]);
 const componentKey = ref(0);
 const loading = ref(false);
+const departementsData = ref([]);
 
 async function loadData() {
   rows.value = [];
   loading.value = true;
   const { data, error } = await api.getDepartmentsData(props.date, props.area);
   dataResume.map(r => r.number = 0);
+  departementsData.value = data.value;
   data.value?.forEach((d: any) => {
     const dr = dataResume.find(r => r.niveauGravite === (d.niveauGraviteMax ? d.niveauGraviteMax : 'pas_de_restrictions'));
     rows.value.push([d.code, d.nom, dr ? dr.label : 'Pas de restrictions']);
@@ -75,16 +78,40 @@ function filterDepartments() {
   componentKey.value += 1;
 }
 
+async function downloadCsv() {
+  const formatDepartements = departementsData.value
+    .map((departement: any) => {
+      return {
+        code: departement.code,
+        nom: departement.nom,
+        region: departement.region,
+        niveau_gravite_max: departement.niveauGraviteMax,
+      };
+    });
+  const csv = await json2csv(formatDepartements, {
+    expandArrayObjects: true,
+  });
+
+  // Create a CSV file and allow the user to download it
+  let blob = new Blob([csv], { type: 'text/csv' });
+  let url = window.URL.createObjectURL(blob);
+  let a = document.createElement('a');
+  a.href = url;
+  a.download = `situation_departement_${props.date}.csv`;
+  document.body.appendChild(a);
+  a.click();
+}
+
 const tableTitle = computed(() => {
   if (props.light) {
     return '';
   }
-  return `Niveau de gravité maximal observé par département ${props.filterText ? '(' + props.filterText + ')' : ''}`
+  return `Niveau de gravité maximal observé par département ${props.filterText ? '(' + props.filterText + ')' : ''}`;
 });
 
 const pageTitle = computed(() => {
   return `Situation de la sécheresse en France (niveau de gravité maximum contasté par
-          département) - ${props.filterText ? props.filterText : ''}`
+          département) - ${props.filterText ? props.filterText : ''}`;
 });
 
 watch(() => props, () => {
@@ -131,6 +158,12 @@ watch(() => props, () => {
                    :key="componentKey"
                    class="fr-table--layout-fixed" />
       </div>
+
+      <div class="text-align-right fr-mt-1w">
+        <DsfrButton @click="downloadCsv()">
+          Télécharger les données (CSV)
+        </DsfrButton>
+      </div>
     </template>
     <template v-else-if="loading">
       <div class="fr-grid-row fr-grid-row--center fr-my-2w">

client/components/donnees/AreaChart.vue

@@ -159,6 +159,16 @@ const chartLineOptions: ChartOptions = {
   },
 };
 
+async function downloadGraph() {
+  const el = document.getElementById('area-chart-line') as HTMLCanvasElement;
+  const content = el.toDataURL('image/png');
+
+  const a = document.createElement('a');
+  a.href = content.replace('image/png', 'image/octet-stream');
+  a.download = `graphique_surface.png`;
+  a.click();
+}
+
 watch(() => refDataStore.departements, () => {
   areaOptions.value = [{
     text: 'France entière',
@@ -249,9 +259,16 @@ watch(() => refDataStore.departements, () => {
   </div>
   <template v-if="!loading">
     <Line v-if="chartLineData"
+          id="area-chart-line"
           :options="chartLineOptions"
           :data="chartLineData"
           :style="{'min-height': '400px'}" />
+
+    <div class="text-align-right fr-mt-1w">
+      <DsfrButton @click="downloadGraph()">
+        Télécharger le graphique en .png
+      </DsfrButton>
+    </div>
   </template>
   <template v-else>
     <div class="fr-grid-row fr-grid-row--center fr-my-2w">

client/components/donnees/ArretesRestrictionsTable.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import api from '../../api';
 import utils from '../../utils';
+import { json2csv } from 'json-2-csv';
 
 const props = defineProps<{
   date: string,
@@ -13,11 +14,13 @@ const headers = ['Numéro', 'Département', 'Niveau de gravité maximum', 'Resso
 const rows = ref([]);
 const loading = ref(false);
 const componentKey = ref(0);
+const ars = ref([]);
 
 async function loadData() {
   rows.value = [];
   loading.value = true;
   const { data, error } = await api.getArretesRestrictions(props.date, props.area);
+  ars.value = data.value;
   data.value?.forEach((d: any) => {
     rows.value.push([d.numero, d.departement?.nom, utils.getShortSituationLabel(utils.getRestrictionRank(d.niveauGraviteMax)),
       d.types.map(t => utils.getTypeLabel(t)).join(', '), d.dateDebut, d.dateFin ? d.dateFin : '', d.fichier ? {
@@ -31,6 +34,43 @@ async function loadData() {
   loading.value = false;
 }
 
+async function downloadCsv() {
+  const formatArretes = ars.value
+    .map((arrete: any) => {
+      return {
+        id: arrete.id,
+        numero: arrete.numero,
+        date_debut: arrete.dateDebut,
+        date_signature: arrete.dateSignature,
+        date_fin: arrete.dateFin,
+        statut: arrete.statut,
+        departement: arrete.departement.code,
+        chemin_fichier: arrete.fichier ? arrete.fichier?.url : '',
+        arrete_cadre: arrete.arretesCadre?.map((arreteCadre: any) => {
+          return {
+            id: arreteCadre.id,
+            numero: arreteCadre.numero,
+            date_debut: arrete.dateDebut,
+            date_signature: arrete.dateSignature,
+            chemin_fichier: arreteCadre.fichier ? arreteCadre.fichier?.url : '',
+          };
+        }),
+      };
+    });
+  const csv = await json2csv(formatArretes, {
+    expandArrayObjects: true,
+  });
+
+  // Create a CSV file and allow the user to download it
+  let blob = new Blob([csv], { type: 'text/csv' });
+  let url = window.URL.createObjectURL(blob);
+
+  let a = document.createElement('a');
+  a.href = url;
+  a.download = `arretes_restrictions_${props.date}.csv`;
+  a.click();
+}
+
 const tableTitle = computed(() => {
   return `Arrêtés de restrictions ${props.filterText ? '(' + props.filterText + ')' : ''}`;
 });
@@ -53,6 +93,12 @@ watch(() => props, () => {
                  :pagination="true"
                  :key="componentKey"
                  class="fr-table--layout-fixed" />
+
+      <div class="text-align-right fr-mt-1w">
+        <DsfrButton @click="downloadCsv()">
+          Télécharger les données (CSV)
+        </DsfrButton>
+      </div>
     </template>
     <template v-else>
       <div class="fr-grid-row fr-grid-row--center fr-my-2w">

client/components/donnees/DepartementChart.vue

@@ -141,6 +141,16 @@ const chartLineOptions: ChartOptions = {
   },
 };
 
+async function downloadGraph() {
+  const el = document.getElementById('departement-chart-line') as HTMLCanvasElement;
+  const content = el.toDataURL('image/png');
+
+  const a = document.createElement('a');
+  a.href = content.replace('image/png', 'image/octet-stream');
+  a.download = `graphique_departements.png`;
+  a.click();
+}
+
 watch(() => refDataStore.departements, () => {
   areaOptions.value = [{
     text: 'France entière',
@@ -225,9 +235,16 @@ watch(() => refDataStore.departements, () => {
   </div>
   <template v-if="!loading">
     <Line v-if="chartLineData"
+          id="departement-chart-line"
           :options="chartLineOptions"
           :data="chartLineData"
           :style="{'min-height': '400px'}" />
+
+    <div class="text-align-right fr-mt-1w">
+      <DsfrButton @click="downloadGraph()">
+        Télécharger le graphique en .png
+      </DsfrButton>
+    </div>
   </template>
   <template v-else>
     <div class="fr-grid-row fr-grid-row--center fr-my-2w">

package.json

@@ -21,6 +21,7 @@
     "@vuelidate/validators": "^2.0.3",
     "chart.js": "^4.4.0",
     "chartjs-adapter-luxon": "^1.3.1",
+    "json-2-csv": "^5.5.5",
     "luxon": "^3.4.3",
     "maplibre-gl": "^4.3.2",
     "oh-vue-icons": "^1.0.0-rc3",

yarn.lock

@@ -5199,6 +5199,11 @@ decimal.js@^10.4.3:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
+[email protected]:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/deeks/-/deeks-3.1.0.tgz#ecc47c600bcc6dbda656c6d86bbc96cbe126fd41"
+  integrity sha512-e7oWH1LzIdv/prMQ7pmlDlaVoL64glqzvNgkgQNgyec9ORPHrT2jaOqMtRyqJuwWjtfb6v+2rk9pmaHj+F137A==
+
 deep-equal@^2.0.5:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1"
@@ -5348,6 +5353,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+[email protected]:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/doc-path/-/doc-path-4.1.1.tgz#5be8c1671877f6b719af5a6077c41904be8913ac"
+  integrity sha512-h1ErTglQAVv2gCnOpD3sFS6uolDbOKHDU1BZq+Kl3npPqroU3dYL42lUgMfd5UimlwtRgp7C9dLGwqQ5D2HYgQ==
+
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -7687,6 +7697,14 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+json-2-csv@^5.5.5:
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/json-2-csv/-/json-2-csv-5.5.5.tgz#4e6000fa173c2027f40740e7f04256ca39658274"
+  integrity sha512-xLeiOE+jtDMX4SMn9JlD6BVI9c5SYVFmtlsNBSelGlq9iUHdVmwlxQ/uUI/BEVQuKDVLlxNrsOfwlI3rfYy1zA==
+  dependencies:
+    deeks "3.1.0"
+    doc-path "4.1.1"
+
 [email protected]:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"