@datagouv/components-next 1.0.2-dev.17 → 1.0.2-dev.170

package/src/components/Chart/ChartViewerWrapper.vue

@@ -0,0 +1,182 @@
+<template>
+  <LoadingBlock
+    :status="status"
+    :data="series"
+  >
+    <template #default="{ data }">
+      <ChartViewer
+        ref="chartViewerRef"
+        :chart="chart"
+        :series="data"
+      />
+    </template>
+    <template #error>
+      <div class="text-center py-8 text-gray-500">
+        {{ t('Une erreur est survenue lors du chargement des données du graphique.') }}
+      </div>
+    </template>
+  </LoadingBlock>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import ChartViewer from './ChartViewer.vue'
+import LoadingBlock from '../../components/LoadingBlock.vue'
+import { useComponentsConfig } from '../../config'
+import { fetchTabularData, useGetProfile } from '../../functions/tabularApi'
+import type { Chart, ChartForApi, ColumnsDefinition } from '../../types/visualizations'
+import { useTranslation } from '../../composables/useTranslation'
+import { watchDebounced } from '@vueuse/shared'
+import { buildColumnsFromProfile } from '../../functions/charts'
+
+const props = defineProps<{
+  chart: Chart | ChartForApi
+}>()
+
+const { t } = useTranslation()
+const chartViewerRef = ref<InstanceType<typeof ChartViewer> | null>(null)
+
+function capture(): string | null {
+  return chartViewerRef.value?.capture() ?? null
+}
+
+defineExpose({ capture })
+const config = useComponentsConfig()
+const getProfile = useGetProfile()
+
+const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
+const error = ref<Error | null>(null)
+
+const pendingOperations = ref(0)
+
+const series = reactive<{
+  data: Record<string, Array<Record<string, unknown>>>
+  columns: ColumnsDefinition
+}>({
+  data: {},
+  columns: {},
+})
+
+const resourceIds = computed(() => {
+  return props.chart.series
+    .filter(s => s.resource_id)
+    .map(s => s.resource_id)
+})
+
+async function fetchSeriesProfile() {
+  pendingOperations.value++
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (props.chart.series.length === 0) {
+      status.value = 'success'
+      series.data = {}
+      series.columns = {}
+      return
+    }
+
+    const fetchPromises = props.chart.series
+      .filter(serie => serie.resource_id)
+      .map(async (serie) => {
+        return {
+          id: serie.resource_id,
+          profile: await getProfile(serie.resource_id),
+        }
+      })
+
+    const results = (await Promise.allSettled(fetchPromises))
+      .filter(r => r.status === 'fulfilled')
+      .map(r => r.value)
+    series.columns = Object.fromEntries(results.map(result => [
+      result.id,
+      buildColumnsFromProfile(result.profile),
+    ]))
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series profile')
+    status.value = 'error'
+    console.error(err)
+    series.columns = {}
+    series.data = {}
+  }
+  finally {
+    pendingOperations.value--
+  }
+}
+
+async function fetchSeriesData() {
+  pendingOperations.value++
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (props.chart.series.length === 0 || !props.chart.x_axis.column_x) {
+      status.value = 'success'
+      series.data = {}
+      return
+    }
+
+    const fetchPromises = props.chart.series
+      .filter((serie) => {
+        const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
+        return xColumn && serie.resource_id && serie.column_y
+      })
+      .map(async (serie) => {
+        const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
+        return {
+          id: serie.resource_id,
+          data: await fetchTabularData(config, {
+            columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
+            resourceId: serie.resource_id,
+            page: 1,
+            pageSize: 100,
+            groupBy: xColumn,
+            aggregation: serie.column_y && serie.aggregate_y
+              ? {
+                  column: serie.column_y,
+                  type: serie.aggregate_y,
+                }
+              : undefined,
+            filters: serie.filters ?? undefined,
+          }),
+        }
+      })
+
+    const results = (await Promise.allSettled(fetchPromises))
+      .filter(r => r.status === 'fulfilled')
+      .map(r => r.value)
+    series.data = Object.fromEntries(results.map(result => [
+      result.id,
+      result.data.data,
+    ]))
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series data')
+    status.value = 'error'
+    series.data = {}
+  }
+  finally {
+    pendingOperations.value--
+  }
+}
+
+watch(resourceIds, async () => {
+  await fetchSeriesProfile()
+}, { immediate: true })
+
+watchDebounced([
+  () => props.chart.series,
+  () => props.chart.x_axis.column_x,
+], async () => {
+  await fetchSeriesData()
+}, { debounce: config.searchDebounce ?? 300, immediate: true, deep: true })
+
+watch(pendingOperations, (count) => {
+  if (count === 0) {
+    if (error.value === null && status.value === 'pending') {
+      status.value = 'success'
+    }
+  }
+})
+</script>

package/src/components/DataserviceCard.vue

@@ -53,6 +53,7 @@
     <ObjectCardHeader
       :icon="isTabularApi ? RiSparklingLine : RiTerminalLine"
       :url="dataserviceUrl || dataservice.self_web_url"
+      :title-tag="titleTag"
     >
       {{ dataservice.title }}
     </ObjectCardHeader>
@@ -98,6 +99,11 @@
         </p>
       </div>
     </div>
+    <DataserviceQualityInline
+      v-if="dataservice.quality"
+      :quality="dataservice.quality"
+    />
+
     <ObjectCardShortDescription
       v-if="showDescription"
       :text="dataservice.description"
@@ -115,6 +121,7 @@ import { useComponentsConfig } from '../config'
 import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
 import type { Dataservice } from '../types/dataservices'
+import type { TitleTag } from '../types/ui'
 import { useTranslation } from '../composables/useTranslation'
 import OrganizationLogo from './OrganizationLogo.vue'
 import Avatar from './Avatar.vue'
@@ -124,12 +131,14 @@ import ObjectCardBadge from './ObjectCardBadge.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import DataserviceQualityInline from './DataserviceQualityInline.vue'
 
 type Props = {
   dataservice: Dataservice
   dataserviceUrl?: RouteLocationRaw
   organizationUrl?: RouteLocationRaw
   showDescription?: boolean
+  titleTag?: TitleTag
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/DataserviceQuality.vue

@@ -0,0 +1,82 @@
+<template>
+  <Toggletip
+    :styled-button="false"
+    button-class="flex items-center gap-1 rounded-sm p-1.5 -m-1.5 border-transparent -outline-offset-2 hover:bg-gray-some transition-colors w-full text-left"
+    :button-props="{ title: t('Qualité des métadonnées') }"
+  >
+    <QualityScore
+      :score="quality.score"
+      class="w-full"
+    />
+    <RiInformationLine
+      class="size-5 shrink-0"
+      aria-hidden="true"
+    />
+    <template #toggletip>
+      <DataserviceQualityTooltipContent :quality />
+    </template>
+  </Toggletip>
+  <template v-if="!hideWarnings">
+    <ul class="list-none pl-0">
+      <QualityItemWarning
+        :quality-item="quality.has_description"
+        :message="t('Description non renseignée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_machine_documentation"
+        :message="t('Documentation machine (OpenAPI) manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_technical_documentation"
+        :message="t('Documentation technique manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_business_documentation"
+        :message="t('Documentation métier manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.license"
+        :message="t('Licence non renseignée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_contact_point"
+        :message="t('Point de contact non renseigné')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_base_api_url"
+        :message="t(`URL de base de l'API non renseignée`)"
+      />
+      <QualityItemWarning
+        :quality-item="quality.availability_documented"
+        :message="t('Disponibilité non documentée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.rate_limiting_documented"
+        :message="t(`Limite d'appels non documentée`)"
+      />
+      <QualityItemWarning
+        :quality-item="quality.access_conditions_clear"
+        :message="t(`Conditions d'accès non précisées`)"
+      />
+    </ul>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
+import type { DataserviceQuality } from '../types/dataservices'
+import QualityScore from './QualityScore.vue'
+import QualityItemWarning from './QualityItemWarning.vue'
+import DataserviceQualityTooltipContent from './DataserviceQualityTooltipContent.vue'
+import Toggletip from './Toggletip.vue'
+import { useTranslation } from '../composables/useTranslation'
+
+withDefaults(defineProps<{
+  quality: DataserviceQuality
+  hideWarnings?: boolean
+}>(), {
+  hideWarnings: false,
+})
+
+const { t } = useTranslation()
+</script>

package/src/components/DataserviceQualityInline.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="m-0 text-sm text-gray-medium">
+    <Toggletip
+      :styled-button="false"
+      button-class="border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-lower transition-colors"
+      :button-props="{ class: 'relative z-2 gap-1 rounded-sm px-1 -mx-1 group/quality', title: t('Qualité des métadonnées') }"
+    >
+      <RiInformationLine class="size-3.5 shrink-0" />
+      <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
+      <QualityScore :score="quality.score" />
+      <template #toggletip>
+        <DataserviceQualityTooltipContent :quality />
+      </template>
+    </Toggletip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
+import type { DataserviceQuality } from '../types/dataservices'
+import QualityScore from './QualityScore.vue'
+import DataserviceQualityTooltipContent from './DataserviceQualityTooltipContent.vue'
+import Toggletip from './Toggletip.vue'
+import { useTranslation } from '../composables/useTranslation'
+
+defineProps<{
+  quality: DataserviceQuality
+}>()
+
+const { t } = useTranslation()
+</script>

package/src/components/DataserviceQualityTooltipContent.vue

@@ -0,0 +1,79 @@
+<template>
+  <p class="text-sm text-gray-plain font-bold mb-0">
+    {{ t("Qualité des métadonnées :") }}
+  </p>
+  <ul class="list-none pl-0 space-y-2">
+    <QualityItem
+      :passed="quality.has_description"
+      :message-passed="t('Description renseignée')"
+      :message-failed="t('Description non renseignée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_machine_documentation"
+      :message-passed="t('Documentation machine (OpenAPI) disponible')"
+      :message-failed="t('Documentation machine (OpenAPI) manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_technical_documentation"
+      :message-passed="t('Documentation technique renseignée')"
+      :message-failed="t('Documentation technique manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_business_documentation"
+      :message-passed="t('Documentation métier renseignée')"
+      :message-failed="t('Documentation métier manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.license"
+      :message-passed="t('Licence renseignée')"
+      :message-failed="t('Licence non renseignée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_contact_point"
+      :message-passed="t('Point de contact renseigné')"
+      :message-failed="t('Point de contact non renseigné')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_base_api_url"
+      :message-passed="t(`URL de base de l'API renseignée`)"
+      :message-failed="t(`URL de base de l'API non renseignée`)"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.availability_documented"
+      :message-passed="t('Disponibilité documentée')"
+      :message-failed="t('Disponibilité non documentée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.rate_limiting_documented"
+      :message-passed="t(`Limite d'appels documentée`)"
+      :message-failed="t(`Limite d'appels non documentée`)"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.access_conditions_clear"
+      :message-passed="t(`Conditions d'accès claires`)"
+      :message-failed="t(`Conditions d'accès non précisées`)"
+      class="pb-0"
+    />
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { DataserviceQuality } from '../types/dataservices'
+import { useTranslation } from '../composables/useTranslation'
+import QualityItem from './QualityItem.vue'
+
+defineProps<{
+  quality: DataserviceQuality
+}>()
+
+const { t } = useTranslation()
+</script>

package/src/components/DatasetCard.vue

@@ -36,6 +36,7 @@
       :icon="RiDatabase2Line"
       :url="datasetUrl || dataset.page"
       :target="datasetUrlInNewTab ? '_blank' : undefined"
+      :title-tag="titleTag"
     >
       {{ dataset.title }}
       <template
@@ -106,10 +107,12 @@
         </p>
       </div>
     </div>
-    <ObjectCardShortDescription
-      v-if="showDescriptionShort"
-      :text="getDescriptionShort(props.dataset)"
-    />
+    <slot>
+      <ObjectCardShortDescription
+        v-if="showDescriptionShort"
+        :text="getDescriptionShort(props.dataset)"
+      />
+    </slot>
   </ObjectCard>
 </template>
 
@@ -117,6 +120,7 @@
 import type { RouteLocationRaw } from 'vue-router'
 import { RiArchiveLine, RiDatabase2Line, RiDownloadLine, RiEyeLine, RiLineChartLine, RiLockLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import type { Dataset, DatasetV2 } from '../types/datasets'
+import type { TitleTag } from '../types/ui'
 import { summarize } from '../functions/helpers'
 import { useFormatDate } from '../functions/dates'
 import { getDescriptionShort } from '../functions/description'
@@ -137,6 +141,7 @@ type Props = {
   datasetUrlInNewTab?: boolean
   organizationUrl?: RouteLocationRaw
   showDescriptionShort?: boolean
+  titleTag?: TitleTag
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/DatasetQuality.vue

@@ -13,7 +13,7 @@
         {{ t('Qualité des métadonnées:') }}
       </span>
     </span>
-    <DatasetQualityScore
+    <QualityScore
       :score="quality.score"
       class="w-full"
     />
@@ -23,35 +23,35 @@
   </Toggletip>
   <template v-if="!hideWarnings">
     <ul class="list-none pl-0">
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.dataset_description_quality"
         :message="t('Description des données non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.resources_documentation"
         :message="t('Documentation des fichiers manquante')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.license"
         :message="t('Licence non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.update_frequency && quality.update_fulfilled_in_time"
         :message="quality.update_frequency ? t('Fréquence de mise à jour non respectée') : t('Fréquence de mise à jour non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.has_open_format"
         :message="t('Formats de fichiers non standards')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.temporal_coverage"
         :message="t('Couverture temporelle non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.spatial"
         :message="t('Couverture spatiale non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.all_resources_available"
         :message="t('Certains fichiers ne sont pas disponibles')"
       />
@@ -62,8 +62,8 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
-import DatasetQualityItemWarning from './DatasetQualityItemWarning.vue'
-import DatasetQualityScore from './DatasetQualityScore.vue'
+import QualityItemWarning from './QualityItemWarning.vue'
+import QualityScore from './QualityScore.vue'
 import Toggletip from './Toggletip.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/DatasetQualityInline.vue

@@ -7,7 +7,7 @@
     >
       <RiInformationLine class="size-3.5 shrink-0" />
       <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
-      <DatasetQualityScore :score="quality.score" />
+      <QualityScore :score="quality.score" />
       <template #toggletip>
         <DatasetQualityTooltipContent :quality />
       </template>
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
-import DatasetQualityScore from './DatasetQualityScore.vue'
+import QualityScore from './QualityScore.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import Toggletip from './Toggletip.vue'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/DatasetQualityTooltipContent.vue

@@ -68,7 +68,7 @@
 import type { Quality } from '../types/datasets'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
-import DatasetQualityItem from './DatasetQualityItem.vue'
+import DatasetQualityItem from './QualityItem.vue'
 
 defineProps<{
   quality: Quality

package/src/components/Form/Listbox.vue

@@ -0,0 +1,101 @@
+<template>
+  <Listbox v-model="model">
+    <div class="relative min-w-0">
+      <div
+        ref="floatingReference"
+        class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+      >
+        <ListboxButton class="input shadow-input text-sm flex items-center gap-2">
+          <slot name="button">
+            <div class="w-full flex items-center justify-between gap-2">
+              <div
+                class="truncate"
+                :class="{ 'text-new-disabled-text': isDisabled(model) }"
+              >
+                {{ displayValue(model) }}
+              </div>
+              <RiArrowDownSLine class="flex-none size-4 justify-self-end" />
+            </div>
+          </slot>
+        </ListboxButton>
+      </div>
+
+      <ListboxOptions
+        ref="popover"
+        :style="floatingStyles"
+        class="z-10 mt-1 absolute max-h-60 min-w-80 w-full overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm pl-0"
+      >
+        <ListboxOption
+          v-for="option in options"
+          :key="getOptionId(toValue(option))"
+          v-slot="{ active, selected }"
+          as="template"
+          :value="option"
+        >
+          <li
+            class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
+            :class="{
+              'bg-gray-lower': active && !isDisabled(toValue(option)),
+              'text-new-disabled-text': isDisabled(toValue(option)),
+              'pl-2': selected,
+              'pl-6': !selected,
+            }"
+          >
+            <div class="flex items-center justify-center aspect-square">
+              <RiCheckLine
+                v-if="selected"
+                class="size-4"
+                :class="isDisabled(toValue(option)) ?' text-new-disabled-text' : 'text-new-primary'"
+              />
+            </div>
+            <slot
+              name="option"
+              v-bind="{ option, active }"
+            >
+              {{ displayValue(option) }}
+            </slot>
+          </li>
+        </ListboxOption>
+      </ListboxOptions>
+    </div>
+  </Listbox>
+</template>
+
+<script setup lang="ts" generic="T extends string | number | object">
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { toValue, useTemplateRef } from 'vue'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/vue'
+
+withDefaults(defineProps<{
+  options?: Array<T>
+  getOptionId?: (option: T) => string | number
+  displayValue: (option: T | null) => string
+  isDisabled?: (option: T | null) => boolean
+}>(), {
+  getOptionId: (option: T): string | number => {
+    if (typeof option === 'string') return option
+    if (typeof option === 'number') return option
+    if (typeof option === 'object' && 'id' in option) return option.id as string
+
+    throw new Error('Please set getOptionId()')
+  },
+  isDisabled: (option: T | null): boolean => {
+    if (option && typeof option === 'object' && 'disabled' in option) return option.disabled as boolean
+
+    return false
+  },
+})
+
+const model = defineModel<T | null>({ required: true })
+
+const referenceRef = useTemplateRef('floatingReference')
+const floatingRef = useTemplateRef<InstanceType<typeof ListboxOptions>>('popover')
+const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+    crossAxis: true,
+  })],
+  whileElementsMounted: autoUpdate,
+})
+</script>