@datagouv/components-next 1.0.2-dev.18 → 1.0.2-dev.181

package/src/components/Chart/ChartViewer.vue

@@ -0,0 +1,320 @@
+<template>
+  <div
+    ref="chartContainer"
+    class="w-full min-h-96"
+  />
+</template>
+
+<script setup lang="ts">
+import { format, use, type ComposeOption } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart, type BarSeriesOption, type LineSeriesOption } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components'
+import { init, type ECharts as EChartsType } from 'echarts'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { summarize } from '../../functions/helpers'
+import { useFormatDate } from '../../functions/dates'
+import type { Chart, ColumnDefinition, ColumnsDefinition, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
+import { useTranslation } from '../../composables/useTranslation'
+
+use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
+
+const props = defineProps<{
+  chart: Chart | ChartForApi
+  series: {
+    data: Record<string, Array<Record<string, unknown>>>
+    columns: ColumnsDefinition
+  }
+}>()
+
+const { locale } = useTranslation()
+const { formatDate } = useFormatDate()
+const chartContainer = ref<HTMLElement | null>(null)
+let echartsInstance: EChartsType | null = null
+
+function capture(): string | null {
+  return echartsInstance?.getDataURL() ?? null
+}
+
+defineExpose({ capture })
+
+// ECharts has a dedicated 'time' axis type for continuous date values.
+function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' | 'time' {
+  if (!xAxis) return 'category'
+  if (xAxis.type !== 'continuous') return 'category'
+  return isDateAxis.value ? 'time' : 'value'
+}
+
+function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
+  return (value: number) => {
+    const v = summarize(value)
+    if (!yAxis.unit) return v
+    if (yAxis.unit_position === 'prefix') return `${yAxis.unit} ${v}`
+    return `${v} ${yAxis.unit}`
+  }
+}
+
+function buildXAxisFormatter(column: ColumnDefinition | null, options?: Intl.DateTimeFormatOptions): ((value: string | number | Date) => string) | undefined {
+  if (column?.type !== 'date') return undefined
+  return (value: string | number | Date) => {
+    if (value === null || value === undefined) return ''
+    const date = value instanceof Date ? value : new Date(value)
+    if (Number.isNaN(date.getTime())) return String(value)
+    return formatDate(date, options ?? { dateStyle: 'short' })
+  }
+}
+
+function parseXValueAsDate(row: Record<string, unknown>, xColumn: string): Record<string, unknown> {
+  const value = row[xColumn]
+  if (value === null || value === undefined || value instanceof Date) return row
+  if (typeof value === 'string') {
+    const date = new Date(value)
+    if (!Number.isNaN(date.getTime())) {
+      return { ...row, [xColumn]: date }
+    }
+  }
+  return row
+}
+
+const xAxisColumn = computed(() => {
+  const columnName = props.chart.x_axis.column_x
+  if (!columnName) return null
+  for (const columns of Object.values(props.series.columns)) {
+    const column = columns.find(c => c.name === columnName)
+    if (column) return column
+  }
+  return null
+})
+
+const isDateAxis = computed(() => xAxisColumn.value?.type === 'date')
+
+const xAxisBounds = computed(() => {
+  const columnName = props.chart.x_axis.column_x
+  if (!columnName) return { min: undefined, max: undefined }
+
+  let min: number | undefined
+  let max: number | undefined
+
+  for (const s of props.chart.series) {
+    const xColumn = s.column_x_name_override ?? columnName
+    const data = props.series.data[s.resource_id]
+    if (!data) continue
+
+    for (const row of data) {
+      const value = row[xColumn]
+      if (value === null || value === undefined) continue
+
+      let numericValue: number | undefined
+      if (value instanceof Date) {
+        numericValue = value.getTime()
+      }
+      else if (isDateAxis.value && typeof value === 'string') {
+        numericValue = new Date(value).getTime()
+      }
+      else {
+        numericValue = Number(value)
+      }
+
+      if (numericValue === undefined || Number.isNaN(numericValue)) continue
+
+      if (min === undefined || numericValue < min) min = numericValue
+      if (max === undefined || numericValue > max) max = numericValue
+    }
+  }
+
+  return { min, max }
+})
+
+const echartsOption = computed(() => {
+  const seriesCount = props.chart.series.length
+  if (!props.chart.series || seriesCount === 0) return
+
+  const seriesArray = props.chart.series.map((s) => {
+    const xColumn = s.column_x_name_override ?? props.chart.x_axis.column_x
+    const yColumn = s.aggregate_y ? `${s.column_y}__${s.aggregate_y}` : s.column_y
+    const resourceId = s.resource_id
+
+    const resourceColumns = props.series.columns[resourceId]
+    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !resourceColumns) {
+      return null
+    }
+
+    const rawData = props.series.data[resourceId]
+    const sortedData = isDateAxis.value
+      ? rawData.map(row => parseXValueAsDate(row, xColumn))
+      : [...rawData]
+    const sortBy = props.chart.x_axis.sort_x_by ?? (isDateAxis.value ? 'axis_x' : null)
+    const sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
+
+    if (sortBy && sortDirection && props.chart.x_axis.column_x) {
+      const sortKey = sortBy === 'axis_y' ? yColumn : xColumn
+      sortedData.sort((a, b) => {
+        const valA = a[sortKey]
+        const valB = b[sortKey]
+
+        const aNullish = valA === null || valA === undefined
+        const bNullish = valB === null || valB === undefined
+        if (aNullish && bNullish) return 0
+        if (aNullish) return sortDirection === 'asc' ? -1 : 1
+        if (bNullish) return sortDirection === 'asc' ? 1 : -1
+
+        if (valA instanceof Date && valB instanceof Date) {
+          const timeA = valA.getTime()
+          const timeB = valB.getTime()
+          if (timeA < timeB) return sortDirection === 'asc' ? -1 : 1
+          if (timeA > timeB) return sortDirection === 'asc' ? 1 : -1
+          return 0
+        }
+
+        if (typeof valA === 'boolean' && typeof valB === 'boolean') {
+          if (valA === valB) return 0
+          // false comes before true in ascending order
+          if (valB) return sortDirection === 'asc' ? -1 : 1
+          return sortDirection === 'asc' ? 1 : -1
+        }
+
+        const numA = Number(valA)
+        const numB = Number(valB)
+        const bothNumeric = !isNaN(numA) && !isNaN(numB)
+
+        if (bothNumeric) {
+          if (numA < numB) return sortDirection === 'asc' ? -1 : 1
+          if (numA > numB) return sortDirection === 'asc' ? 1 : -1
+          return 0
+        }
+
+        const strA = String(valA)
+        const strB = String(valB)
+        return strA.localeCompare(strB, locale, {
+          sensitivity: 'base',
+          numeric: true,
+        }) * (sortDirection === 'asc' ? 1 : -1)
+      })
+    }
+
+    return {
+      series: {
+        type: s.type === 'histogram' ? 'bar' : 'line',
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
+        name: yColumn,
+        encode: {
+          x: xColumn,
+          y: yColumn,
+        },
+      } as LineSeriesOption | BarSeriesOption,
+      data: {
+        source: sortedData,
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
+      },
+    }
+  })
+
+  const seriesData = {
+    series: [] as Array<LineSeriesOption | BarSeriesOption>,
+    data: [] as Array<Record<string, unknown>>,
+  }
+
+  for (const curr of seriesArray) {
+    if (!curr) continue
+    seriesData.series.push(curr.series)
+    seriesData.data.push(curr.data)
+  }
+
+  const xAxisType = mapXAxisType(props.chart.x_axis)
+
+  return {
+    dataset: [...seriesData.data],
+    textStyle: {
+      fontFamily: 'Marianne, arial, sans-serif',
+    },
+    color: '#000091',
+    tooltip: {
+      trigger: 'axis' as const,
+      formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
+        let tooltip = ''
+        const valueFormatter = new Intl.NumberFormat(locale)
+        const xAxisFormatter = buildXAxisFormatter(xAxisColumn.value, { dateStyle: 'medium' })
+        for (const param of params) {
+          const seriesName = param.seriesName
+          const axisLabel = xAxisFormatter ? xAxisFormatter(param.axisValueLabel) : param.axisValueLabel
+          tooltip += `${format.encodeHTML(String(axisLabel))}: <strong>${valueFormatter.format(Number(param.value[seriesName]))}</strong><br>`
+        }
+        return tooltip
+      },
+    },
+    legend: {
+      show: false,
+      bottom: 0,
+    },
+    grid: {
+      top: 60,
+      bottom: 40,
+      left: 20,
+      right: 20,
+      containLabel: true,
+    },
+    xAxis: {
+      type: xAxisType,
+      name: (props.chart.x_axis as XAxis).column_x,
+      min: xAxisType !== 'category' ? xAxisColumn.value?.min ?? xAxisBounds.value.min ?? undefined : undefined,
+      max: xAxisType !== 'category' ? xAxisColumn.value?.max ?? xAxisBounds.value.max ?? undefined : undefined,
+      axisLabel: xAxisType === 'time'
+        ? { formatter: buildXAxisFormatter(xAxisColumn.value) }
+        : undefined,
+    },
+    yAxis: {
+      type: 'value' as const,
+      name: props.chart.y_axis.label ?? undefined,
+      min: props.chart.y_axis.min ?? undefined,
+      max: props.chart.y_axis.max ?? undefined,
+      axisLabel: {
+        formatter: buildYAxisFormatter(props.chart.y_axis),
+      },
+    },
+    series: seriesData.series,
+  } satisfies ComposeOption<
+    | BarSeriesOption
+    | LineSeriesOption
+  >
+})
+
+onMounted(() => {
+  if (chartContainer.value) {
+    echartsInstance = init(chartContainer.value)
+    updateChart()
+  }
+})
+
+onUnmounted(() => {
+  if (echartsInstance) {
+    echartsInstance.dispose()
+    echartsInstance = null
+  }
+})
+
+watch(() => props.chart, updateChart, { deep: true })
+
+watch(() => props.series, updateChart, { deep: true })
+
+function updateChart() {
+  if (!echartsInstance) return
+  const option = echartsOption.value
+  if (option) {
+    echartsInstance.setOption(option, { notMerge: true })
+  }
+}
+
+const handleResize = () => {
+  if (echartsInstance) {
+    echartsInstance.resize()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>

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/CopyButton.vue

@@ -17,7 +17,7 @@
       />
       <span
         class="copy-label"
-        :class="{ 'sr-only': hideLabel }"
+        :class="{ 'sr-only': hideLabel || iconOnly }"
       >{{ copiedLabel }}</span>
     </span>
     <span
@@ -32,7 +32,7 @@
       />
       <span
         class="copy-link copy-label"
-        :class="{ 'sr-only': hideLabel }"
+        :class="{ 'sr-only': hideLabel || iconOnly }"
       >{{ label }}</span>
     </span>
   </button>
@@ -49,9 +49,13 @@ const props = withDefaults(defineProps<{
   label: string
   copiedLabel: string
   hideLabel?: boolean
+  // Like hideLabel but keeps the default icon and has no bordered box — just the
+  // plain copy icon with an sr-only label.
+  iconOnly?: boolean
   reverse?: boolean
 }>(), {
   hideLabel: false,
+  iconOnly: false,
   reverse: false,
 })
 

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>