@datagouv/components-next 0.0.7 → 0.0.9

package/src/components/ResourceAccordion/Pmtiles.client.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <SimpleBanner
+      v-if="hasError"
+      type="warning"
+      class="flex items-center space-x-2"
+    >
+      <RiErrorWarningLine class="shink-0 size-6" />
+      <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
+    </SimpleBanner>
+    <div
+      v-else
+      class="-mx-4"
+    >
+      <div
+        v-if="pmtilesViewerUrl"
+        class="bg-blue-100 text-datagouv fr-hidden fr-unhidden-md p-4"
+      >
+        <div class="fr-grid-row fr-grid-row--middle fr-grid-row--gutters">
+          <div
+            class="fr-col-auto"
+            v-html="franceSvg"
+          />
+          <div class="fr-col">
+            <p class="fr-text--bold fr-m-0">
+              {{ t("Explorer les données en détail") }}
+            </p>
+            <p class="fr-text--sm fr-m-0 f-italic">
+              {{ t("Utiliser un visualisateur PMTiles pour obtenir un aperçu des données.") }}
+            </p>
+          </div>
+          <p class="fr-col-auto fr-my-0">
+            <BrandedButton
+              :href="pmtilesViewerUrl"
+              :icon="RiExternalLinkFill"
+              icon-right
+            >
+              {{ t("Explorer la carte") }}
+            </BrandedButton>
+          </p>
+        </div>
+      </div>
+      <div
+        ref="containerRef"
+        style="height: 600px;"
+      />
+      <div class="fr-px-5v fr-pt-5v">
+        {{ t("Aperçu de la carte mis à jour le {date}", { date: lastUpdate }) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { Protocol, PMTiles } from 'pmtiles'
+import maplibregl from 'maplibre-gl'
+import DOMPurify from 'dompurify'
+import { useComponentsConfig } from '../../config'
+import { useFormatDate } from '../../functions/dates'
+import type { Resource } from '../../types/resources'
+import BrandedButton from '../BrandedButton.vue'
+import styleVector from '../../../assets/json/vector.json'
+import SimpleBanner from '../SimpleBanner.vue'
+import franceSvg from './france.svg?raw'
+
+const props = defineProps<{ resource: Resource }>()
+
+const { t } = useI18n()
+const { formatDate } = useFormatDate()
+
+const config = useComponentsConfig()
+
+const hasError = ref(false)
+const pmtilesUrl = computed(() => props.resource.extras['analysis:parsing:pmtiles_url'])
+const pmtilesViewerUrl = computed(() => {
+  return config.pmtilesViewerBaseUrl ? `${config.pmtilesViewerBaseUrl}${encodeURIComponent(pmtilesUrl.value)}` : null
+})
+
+const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at']))
+
+const container = useTemplateRef('containerRef')
+
+async function displayMap() {
+  await import('maplibre-gl/dist/maplibre-gl.css')
+
+  const protocol = new Protocol()
+  maplibregl.addProtocol('pmtiles', protocol.tile)
+
+  const p = new PMTiles(pmtilesUrl.value)
+  protocol.add(p)
+
+  p.getHeader().then((h) => {
+    const map = new maplibregl.Map({
+      container: container.value, // container id
+      style: styleVector,
+      zoom: h.maxZoom - 2,
+      center: [h.centerLon, h.centerLat],
+    })
+    map.addControl(new maplibregl.NavigationControl())
+
+    const popup = new maplibregl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+    })
+
+    function showMapPopup(e) {
+      if (!e.features || !e.features[0])
+        popup.remove()
+      else {
+        const coordinates = e.lngLat
+        const description = Object.keys(e.features[0].properties).map((element) => {
+          return `<b>${DOMPurify.sanitize(element)} :</b> ${DOMPurify.sanitize(e.features[0].properties[element])}`
+        }).join('<br>')
+        popup.setLngLat(coordinates).setHTML(description).addTo(map)
+      }
+    }
+
+    map.on('load', () => {
+      p.getMetadata().then((metadata) => {
+        map.addSource('pmtiles_source', {
+          type: 'vector',
+          url: `pmtiles://${pmtilesUrl.value}`,
+          attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
+        })
+
+        metadata.tilestats.layers.forEach((layer) => {
+          const typeLayer = computed(() => {
+            switch (layer.geometry) {
+              case 'Polygon':
+                return 'fill'
+              case 'Point':
+                return `circle`
+              case 'LineString':
+                return `line`
+              default:
+                throwOnNever(layer.geometry, 'Unsupported geometry')
+                return ''
+            }
+          })
+          map.addLayer({
+            'id': layer.layer,
+            'source': 'pmtiles_source',
+            'source-layer': layer.layer,
+            'type': typeLayer.value,
+            'paint': {
+              [`${typeLayer.value}-color`]: 'steelblue',
+              [`${typeLayer.value}-opacity`]: { base: 1, stops: [[0, 0.9], [10, 0.6]] },
+            },
+          })
+          map.on('mousemove', layer.layer, showMapPopup)
+          map.on('touchmove', layer.layer, showMapPopup)
+          map.on('click', layer.layer, showMapPopup)
+          map.on('mouseleave', layer.layer, showMapPopup)
+        })
+      }).catch (() => hasError.value = true)
+    })
+  }).catch (() => hasError.value = true)
+}
+
+onMounted(() => {
+  displayMap()
+})
+</script>

package/src/components/ResourceAccordion/Preview.vue

@@ -1,19 +1,18 @@
 <template>
   <div>
-    <div
+    <SimpleBanner
       v-if="hasError"
-      class="bg-warning-lightest text-warning-dark p-3 mt-8 mx-8 mb-3"
+      type="warning"
+      class="flex items-center space-x-2"
     >
-      <p class="fr-grid-row fr-m-0">
-        <span
-          class="fr-icon-warning-line"
-          aria-hidden="true"
-        />
-        {{ t("The preview of this file failed to load.") }}
-      </p>
-    </div>
+      <RiErrorWarningLine class="shink-0 size-6" />
+      <span>{{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}</span>
+    </SimpleBanner>
     <PreviewLoader v-else-if="loading" />
-    <template v-else>
+    <div
+      v-else
+      class="-mx-4"
+    >
       <div class="bg-blue-100 text-datagouv fr-hidden fr-unhidden-md p-4">
         <div class="fr-grid-row fr-grid-row--middle fr-grid-row--gutters">
           <div
@@ -22,10 +21,10 @@
           />
           <div class="fr-col">
             <p class="fr-text--bold fr-m-0">
-              {{ t("Explore data in detail") }}
+              {{ t("Explorer les données en détail") }}
             </p>
             <p class="fr-text--sm fr-m-0 f-italic">
-              {{ t("Use our tool to get an overview of data, learn about different columns or perform filters and sorts.") }}
+              {{ t("Utiliser notre outil pour obtenir un aperçu des données, en savoir plus sur les différentes colonnes ou réaliser des filtres et des tris.") }}
             </p>
           </div>
           <p class="fr-col-auto fr-my-0">
@@ -34,15 +33,15 @@
               :icon="RiExternalLinkFill"
               icon-right
             >
-              {{ t("Explore data") }}
+              {{ t("Explorer les données") }}
             </BrandedButton>
           </p>
         </div>
       </div>
-      <div class="fr-table fr-table--no-background fr-p-0 fr-pt-0-5v fr-m-0">
+      <div class="fr-table fr-table--no-background fr-p-0 fr-m-0">
         <table class="fr-mb-3w">
-          <caption class="fr-sr-only">
-            {{ t('Preview of {name}', { name: resource.title }) }}
+          <caption class="sr-only">
+            {{ t('Prévisualisation de {name}', { name: resource.title }) }}
           </caption>
           <thead>
             <tr>
@@ -51,18 +50,19 @@
                 :key="index"
                 scope="col"
               >
-                <div class="fr-grid-row fr-grid-row--middle col-width">
-                  <BrandedButton
-                    color="secondary-softer"
-                    :icon="isSortedBy(col) && sortConfig && sortConfig.type == 'asc' ? RiArrowUpLine : RiArrowDownLine"
-                    icon-right
-                    size="xs"
-                    @click="sortByField(col)"
-                  >
+                <BrandedButton
+                  color="secondary-softer"
+                  :icon="isSortedBy(col) && sortConfig && sortConfig.type == 'asc' ? RiArrowUpLine : RiArrowDownLine"
+                  icon-right
+                  size="xs"
+                  @click="sortByField(col)"
+                >
+                  <!-- There is a weird bug with `sr-only`, I needed to add a relative parent to avoid full page x scrolling into the void…  -->
+                  <span class="relative">
                     {{ col }}
-                    <span class="sr-only">{{ sortConfig && sortConfig.type == 'desc' ? t("Sort ascending") : t("Sort descending") }}</span>
-                  </BrandedButton>
-                </div>
+                    <span class="sr-only">{{ sortConfig && sortConfig.type == 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
+                  </span>
+                </BrandedButton>
               </th>
             </tr>
           </thead>
@@ -76,7 +76,7 @@
                 :key="colIndex"
                 class="cell-padding"
               >
-                <div class="fr-grid-row fr-grid-row--middle fr-text--xs w-100 style-cell">
+                <div class="fr-grid-row fr-grid-row--middle fr-text--xs w-full style-cell">
                   <div class="fr-my-auto">
                     {{ row[col] }}
                   </div>
@@ -94,30 +94,32 @@
         @change="changePage"
       />
       <div class="fr-px-5v">
-        {{ t("Preview updated on {date}", { date: lastUpdate }) }} —
-        {{ t('{count} columns', columns.length) }} —
-        {{ t('{count} rows', rowCount) }}
+        {{ t("Dernière mise à jour de la prévisualisation : {date}", { date: lastUpdate }) }} —
+        {{ t('{count} colonnes', columns.length) }} —
+        {{ t('Lignes {count}', rowCount) }}
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { RiArrowDownLine, RiArrowUpLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowUpLine, RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
 import Pagination from '../Pagination.vue'
 import { getData, type SortConfig } from '../../functions/tabularApi'
-import { formatDate } from '../../functions/dates'
+import { useFormatDate } from '../../functions/dates'
 import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
 import BrandedButton from '../BrandedButton.vue'
+import SimpleBanner from '../SimpleBanner.vue'
 import franceSvg from './france.svg?raw'
 import PreviewLoader from './PreviewLoader.vue'
 
 const props = defineProps<{ resource: Resource }>()
 
 const { t } = useI18n()
+const { formatDate } = useFormatDate()
 
 const rows = ref<Array<Record<string, unknown>>>([])
 const columns = ref<Array<string>>([])
@@ -126,7 +128,7 @@ const hasError = ref(false)
 const sortConfig = ref<SortConfig>(null)
 const rowCount = ref(0)
 const config = useComponentsConfig()
-const pageSize = computed(() => config.tabularApiPageSize || 20)
+const pageSize = computed(() => config.tabularApiPageSize || 15)
 const currentPage = ref(1)
 
 /**
@@ -197,7 +199,7 @@ function sortByField(col: string) {
   getTableInfos(currentPage.value, sortConfig.value)
 };
 
-const lastUpdate = formatDate(props.resource.extras['analysis:parsing:finished_at'])
+const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at']))
 
 onMounted(() => {
   getTableInfos(currentPage.value)