feat!(datagouv-components): explode DatasetInformationPanel into multiple components

app.vue

@@ -50,6 +50,8 @@ app.vueApp.use(datagouv, {
   pmtilesViewerBaseUrl: null,
   schemaValidataUrl: runtimeConfig.public.schemaValidataUrl,
   schemaDocumentationUrl: runtimeConfig.public.schemasSite.url,
+  schemasSiteUrl: runtimeConfig.public.schemasSite.url,
+  schemasSiteName: runtimeConfig.public.schemasSite.name,
   tabularApiUrl: runtimeConfig.public.tabularApiUrl,
   tabularApiDataserviceId: runtimeConfig.public.tabularApiDataserviceId,
   tabularAllowRemote: true,

datagouv-components/README.md

@@ -81,7 +81,7 @@ To work with [Nuxt](https://nuxt.com/), some components are doing HTTP requests
 
 ```html
 <Suspense>
-    <DatasetInformationPanel v-if="dataset" :dataset="dataset" />
+    <ActivityList />
 </Suspense>
 ```
 

datagouv-components/package.json

@@ -37,13 +37,15 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
+    "@types/leaflet": "^1.9.17",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
     "@types/hast": "^3.0.4",
     "@vueuse/core": "^13.1.0",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
+    "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
     "ofetch": "^1.4.1",
     "ol": "^10.6.1",

datagouv-components/src/components/AppLink.vue

@@ -6,6 +6,9 @@
   >
     <slot />
   </component>
+  <span v-else-if="!to">
+    <slot />
+  </span>
   <a
     v-else-if="isExternal"
     :href="(to as string)"
@@ -29,7 +32,7 @@ const config = useComponentsConfig()
 const { locale } = useTranslation()
 
 const props = defineProps<{
-  to: string | RouteLocationRaw
+  to: string | RouteLocationRaw | null | undefined
 }>()
 
 const isExternal = computed(() => {

datagouv-components/src/components/DatasetInformation/DatasetEmbedSection.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="space-y-1 py-6">
+    <div class="flex items-center space-x-2 mb-1">
+      <h3 class="mb-0 uppercase text-gray-plain text-sm font-bold">
+        {{ t('Intégrer sur votre site') }}
+      </h3>
+      <CopyButton
+        :hide-label="true"
+        :label="t('Copier le code embarqué')"
+        :copied-label="t('Code embarqué copié !')"
+        :text="embedHtml"
+      />
+    </div>
+    <textarea
+      ref="textAreaRef"
+      class="bg-gray-lower text-gray-medium rounded font-mono text-sm px-1 py-[2px] w-full border resize-none"
+      :value="embedHtml"
+      readonly="true"
+      @click="selectContent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { getDatasetOEmbedHtml } from '../../functions/datasets'
+import type { Dataset, DatasetV2, DatasetV2WithFullObject } from '../../types/datasets'
+import CopyButton from '../CopyButton.vue'
+
+const props = defineProps<{
+  dataset: Dataset | DatasetV2 | DatasetV2WithFullObject
+}>()
+
+const { t } = useTranslation()
+const textAreaRef = ref<HTMLTextAreaElement | null>(null)
+
+const embedHtml = computed(() => getDatasetOEmbedHtml('dataset', props.dataset.id))
+
+function selectContent(e: Event) {
+  (e.target as HTMLTextAreaElement).select()
+}
+</script>

datagouv-components/src/components/DatasetInformation/DatasetInformationSection.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="space-y-1 py-6">
+    <h3 class="uppercase text-gray-plain text-sm font-bold">
+      {{ t('Informations') }}
+    </h3>
+    <DescriptionList>
+      <div v-if="dataset.tags && dataset.tags.length">
+        <DescriptionListTerm>{{ t('Mots-clés') }}</DescriptionListTerm>
+        <DescriptionListDetails class="flex flex-wrap gap-2 items-start">
+          <AppLink
+            v-for="tag in dataset.tags"
+            :key="tag"
+            class="fr-raw-link"
+            :to="getTagUrl(tag)"
+          >
+            <Tag type="secondary">
+              {{ tag }}
+            </Tag>
+          </AppLink>
+        </DescriptionListDetails>
+      </div>
+      <div>
+        <DescriptionListTerm>{{ t('Identifiant') }}</DescriptionListTerm>
+        <DescriptionListDetails class="flex items-center gap-2">
+          {{ dataset.id }}
+          <CopyButton
+            class="!-mt-0.5"
+            :label="t(`Copier l'identifiant`)"
+            :copied-label="t('Identifiant copié !')"
+            :text="dataset.id"
+            :hide-label="true"
+          />
+        </DescriptionListDetails>
+      </div>
+      <div v-if="dataset.license">
+        <DescriptionListTerm>{{ t('Licence') }}</DescriptionListTerm>
+        <DescriptionListDetails>
+          <LicenseBadge :license="dataset.license" />
+        </DescriptionListDetails>
+      </div>
+      <slot />
+    </DescriptionList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useComponentsConfig } from '../../config'
+import type { DatasetV2WithFullObject } from '../../types/datasets'
+import DescriptionList from '../DescriptionList.vue'
+import DescriptionListTerm from '../DescriptionListTerm.vue'
+import DescriptionListDetails from '../DescriptionListDetails.vue'
+import AppLink from '../AppLink.vue'
+import CopyButton from '../CopyButton.vue'
+import LicenseBadge from '../LicenseBadge.vue'
+import Tag from '../Tag.vue'
+
+const props = defineProps<{
+  dataset: DatasetV2WithFullObject
+  tagUrl?: (tag: string) => string
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+function getTagUrl(tag: string): string {
+  if (props.tagUrl) {
+    return props.tagUrl(tag)
+  }
+  const base = config.baseUrl.endsWith('/') ? config.baseUrl.slice(0, -1) : config.baseUrl
+  return `${base}/datasets/search?tag=${tag}`
+}
+</script>

datagouv-components/src/components/DatasetInformation/DatasetSchemaSection.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    v-if="schemas && schemas.length"
+    class="space-y-1 py-6"
+  >
+    <h3 class="uppercase text-gray-plain text-sm font-bold">
+      {{ t('Schéma de données') }}
+    </h3>
+    <div class="space-y-4">
+      <div
+        v-for="schema, index in schemas"
+        :key="index"
+        class="flex flex-col md:flex-row gap-2 justify-between items-center"
+      >
+        <p class="text-sm mb-0">
+          {{ t('Les fichiers du jeu de données suivent le schéma :') }}
+          <Tag
+            type="secondary"
+            :icon="RiCheckboxCircleLine"
+          >
+            {{ schema.name || schema.url }}
+          </Tag>
+        </p>
+        <div v-if="schema.url || schema.name">
+          <BrandedButton
+            color="secondary"
+            :icon="RiBook2Line"
+            :href="schema.url ? schema.url : `${config.schemasSiteUrl}${schema.name}`"
+          >
+            {{ t('Voir la documentation du schéma') }}
+          </BrandedButton>
+        </div>
+      </div>
+      <p
+        v-if="config.schemasSiteUrl && config.schemasSiteName"
+        class="text-sm"
+      >
+        <TranslationT keypath="Les schémas de données permettent de décrire des modèles de données, découvrez comment les schémas améliorent la qualité des données et quels sont les cas d'usages possibles sur {link}">
+          <template #link>
+            <AppLink
+              :to="config.schemasSiteUrl"
+              external
+            >
+              {{ config.schemasSiteName }}
+            </AppLink>
+          </template>
+        </TranslationT>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiBook2Line, RiCheckboxCircleLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useComponentsConfig } from '../../config'
+import { useFetch } from '../../functions/api'
+import type { Dataset, DatasetV2, DatasetV2WithFullObject } from '../../types/datasets'
+import type { Schema } from '../../types/schemas'
+import Tag from '../Tag.vue'
+import BrandedButton from '../BrandedButton.vue'
+import TranslationT from '../TranslationT.vue'
+import AppLink from '../AppLink.vue'
+
+const props = defineProps<{
+  dataset: Dataset | DatasetV2 | DatasetV2WithFullObject
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+const { data } = await useFetch<Array<Schema>>(`/api/2/datasets/${props.dataset.id}/schemas/`)
+const schemas = data
+</script>

datagouv-components/src/components/DatasetInformation/DatasetSpatialSection.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    v-if="dataset.spatial"
+    class="space-y-1 py-6"
+  >
+    <h3 class="uppercase text-gray-plain text-sm font-bold">
+      {{ t('Couverture spatiale') }}
+    </h3>
+    <DescriptionList>
+      <div v-if="dataset.spatial.zones && dataset.spatial.zones.length">
+        <DescriptionListTerm>{{ t('Zones') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ zonesDisplay }}</DescriptionListDetails>
+      </div>
+      <div v-if="dataset.spatial.geom">
+        <DescriptionListTerm>{{ t('Couverture géographique') }}</DescriptionListTerm>
+        <DescriptionListDetails>
+          <slot
+            name="map"
+            :geojson="dataset.spatial.geom"
+          />
+        </DescriptionListDetails>
+      </div>
+      <div v-if="dataset.spatial.granularity">
+        <DescriptionListTerm>{{ t('Granularité de la couverture territoriale') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ dataset.spatial.granularity.name }}</DescriptionListDetails>
+      </div>
+      <slot />
+    </DescriptionList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTranslation } from '../../composables/useTranslation'
+import type { DatasetV2WithFullObject } from '../../types/datasets'
+import DescriptionList from '../DescriptionList.vue'
+import DescriptionListTerm from '../DescriptionListTerm.vue'
+import DescriptionListDetails from '../DescriptionListDetails.vue'
+
+const props = defineProps<{
+  dataset: DatasetV2WithFullObject
+}>()
+
+const { t } = useTranslation()
+
+const zonesDisplay = computed(() => {
+  if (!props.dataset.spatial?.zones?.length) return ''
+  const names = props.dataset.spatial.zones.map(z => z.name)
+  return humanJoin(names)
+})
+
+function humanJoin(source: Array<string>): string {
+  const array = [...source]
+  if (!array.length) return ''
+  if (array.length === 1) return array[0]!
+  const last = array.pop()!
+  return `${array.join(', ')} ${t('et')} ${last}`
+}
+</script>

datagouv-components/src/components/DatasetInformation/DatasetTemporalitySection.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="space-y-1 py-6">
+    <h3 class="uppercase text-gray-plain text-sm font-bold">
+      {{ t('Temporalité') }}
+    </h3>
+    <DescriptionList>
+      <div>
+        <DescriptionListTerm>{{ t('Création') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ formatDate(dataset.created_at) }}</DescriptionListDetails>
+      </div>
+      <div v-if="dataset.frequency">
+        <DescriptionListTerm>{{ t('Fréquence') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ dataset.frequency.label }}</DescriptionListDetails>
+      </div>
+      <div v-if="dataset.temporal_coverage">
+        <DescriptionListTerm>{{ t('Couverture temporelle') }}</DescriptionListTerm>
+        <DescriptionListDetails>
+          <DateRangeDetails :range="dataset.temporal_coverage" />
+        </DescriptionListDetails>
+      </div>
+      <div>
+        <DescriptionListTerm>{{ t('Dernière mise à jour') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ formatDate(dataset.last_update) }}</DescriptionListDetails>
+      </div>
+      <slot />
+    </DescriptionList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatDate } from '../../functions/dates'
+import type { DatasetV2WithFullObject } from '../../types/datasets'
+import DescriptionList from '../DescriptionList.vue'
+import DescriptionListTerm from '../DescriptionListTerm.vue'
+import DescriptionListDetails from '../DescriptionListDetails.vue'
+import DateRangeDetails from '../DateRangeDetails.vue'
+
+defineProps<{
+  dataset: DatasetV2WithFullObject
+}>()
+
+const { t } = useTranslation()
+const { formatDate } = useFormatDate()
+</script>

datagouv-components/src/components/DatasetInformation/index.ts

@@ -0,0 +1,5 @@
+export { default as DatasetInformationSection } from './DatasetInformationSection.vue'
+export { default as DatasetTemporalitySection } from './DatasetTemporalitySection.vue'
+export { default as DatasetSpatialSection } from './DatasetSpatialSection.vue'
+export { default as DatasetSchemaSection } from './DatasetSchemaSection.vue'
+export { default as DatasetEmbedSection } from './DatasetEmbedSection.vue'