@datagouv/components-next 1.3.0 → 1.4.0

package/dist/{vue3-xml-viewer.common-BIaEIFYG.js → vue3-xml-viewer.common-Bdcn54ST.js}

@@ -1,4 +1,4 @@
-import { b7 as Ke } from "./main-DKu5SOAl.js";
+import { g as Ke } from "./main-BDcYkhOc.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "type": "module",
   "engines": {
@@ -23,29 +23,31 @@
     "src"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.11",
+    "@floating-ui/vue": "^2.0.1",
     "@headlessui/vue": "^1.7.23",
+    "@internationalized/date": "^3.12.4",
     "@remixicon/vue": "^4.9.0",
-    "@types/hast": "^3.0.4",
-    "@types/leaflet": "^1.9.21",
-    "@vueuse/core": "^14.3.0",
-    "@vueuse/router": "^14.3.0",
+    "@types/hast": "^3.0.5",
+    "@types/leaflet": "^1.9.22",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/router": "^14.4.0",
     "chart.js": "^4.5.1",
-    "dompurify": "^3.4.7",
+    "dompurify": "^3.4.15",
     "echarts": "^6.1.0",
     "geopf-extensions-openlayers": "1.0.0-beta.11",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.24.0",
     "ofetch": "^1.5.1",
-    "ol": "^10.9.0",
+    "ol": "^10.10.0",
     "pdfjs-dist": "^4.10.38",
-    "pmtiles": "^4.4.1",
+    "pmtiles": "^4.5.0",
     "popmotion": "^11.0.5",
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
+    "reka-ui": "^2.10.4",
     "remark-behead": "^3.1.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
@@ -63,34 +65,33 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@intlify/cli": "^0.13.1",
-    "@tailwindcss/cli": "^4.3.0",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tsconfig/node22": "^22.0.5",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tsconfig/node22": "^22.0.6",
     "@types/geojson": "^7946.0.16",
-    "@types/node": "^22.19.19",
-    "@vitejs/plugin-vue": "^6.0.7",
+    "@types/node": "^22.20.2",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/tsconfig": "^0.8.1",
-    "eslint": "^9.39.4",
-    "eslint-plugin-vue": "^10.9.1",
+    "eslint": "^9.39.5",
+    "eslint-plugin-vue": "^10.11.0",
     "jiti": "^2.7.0",
     "npm-run-all2": "^8.0.4",
     "openapi-types": "^12.1.3",
-    "prettier": "^3.8.3",
-    "tailwindcss": "^4.3.0",
+    "prettier": "^3.9.6",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
-    "vite": "^7.3.3",
-    "vite-plugin-vue-devtools": "^8.1.2",
-    "vue": "^3.5.35",
-    "vue-router": "^5.0.7",
-    "vue-tsc": "^3.3.2"
+    "vite": "^7.3.6",
+    "vite-plugin-vue-devtools": "^8.2.1",
+    "vue": "^3.5.42",
+    "vue-router": "^5.3.1",
+    "vue-tsc": "^3.3.11"
   },
   "peerDependencies": {
+    "echarts": "^6.0.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0 || ^5.0.0",
-    "echarts": "^6.0.0"
+    "vue-router": "^4.5.0 || ^5.0.0"
   },
   "scarfSettings": {
     "enabled": false

package/src/components/ActivityList/ActivityList.vue

@@ -12,7 +12,10 @@
           class="my-1"
         >
           <p class="pl-3 mb-1 text-xs text-gray-medium">
-            {{ month }}
+            <FormattedDate
+              :date="month"
+              :options="{ dateStyle: undefined, year: 'numeric', month: 'long', day: undefined }"
+            />
           </p>
           <ul
             class="space-y-2 p-0 m-0"
@@ -82,9 +85,15 @@
                     </template>
                   </slot>
                 </p>
-                <p class="m-0 flex-none text-xs text-gray-medium">
-                  {{ t('le {date}', { date: formatDate(activity.created_at) }) }}
-                </p>
+                <TranslationT
+                  tag="p"
+                  class="m-0 flex-none text-xs text-gray-medium"
+                  keypath="le {date}"
+                >
+                  <template #date>
+                    <FormattedDate :date="activity.created_at" />
+                  </template>
+                </TranslationT>
               </div>
             </li>
           </ul>
@@ -118,13 +127,14 @@ import { useRoute } from 'vue-router'
 import { useTranslation } from '../../composables/useTranslation'
 import { getActivityTranslation } from '../../functions/activities'
 import { useFetch } from '../../functions/api'
-import { useFormatDate } from '../../functions/dates'
 import type { PaginatedArray } from '../../types/api'
 import type { Activity } from '../../types/activity'
 import Avatar from '../Avatar.vue'
 import LoadingBlock from '../LoadingBlock.vue'
 import Pagination from '../Pagination.vue'
 import PaddedContainer from '../PaddedContainer.vue'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import listSrc from '../../../assets/illustrations/list.svg?url'
 
 const props = defineProps<{
@@ -133,7 +143,6 @@ const props = defineProps<{
 }>()
 
 const route = useRoute()
-const { formatDate } = useFormatDate()
 const { t } = useTranslation()
 
 const page = ref(parseInt(route.query.page as string | undefined ?? '1', 10))
@@ -146,13 +155,13 @@ const { data: activities, status } = await useFetch<PaginatedArray<Activity>>('/
   },
 })
 
+// Grouping on a month read in the reader's timezone would change both the number of
+// groups and their keys between the server render and the browser's — a mismatch on
+// the children themselves, which no `data-allow-mismatch` covers. The `YYYY-MM` the
+// timestamp starts with is the same string for everyone; the month is worded from it
+// at render time.
 const groupedActivities = computed(() => activities.value?.data.reduce((grouped, activity) => {
-  const activityMonth = formatDate(activity.created_at, {
-    dateStyle: undefined,
-    day: undefined,
-    month: 'long',
-    year: 'numeric',
-  })
+  const activityMonth = activity.created_at.slice(0, 7)
   if (!grouped[activityMonth]) {
     grouped[activityMonth] = []
   }

package/src/components/AppLink.vue

@@ -3,6 +3,7 @@
     :is="config?.appLink"
     v-if="config.appLink"
     :to
+    :replace
   >
     <slot />
   </component>
@@ -18,6 +19,7 @@
   <RouterLink
     v-else
     :to
+    :replace
   ><slot /></RouterLink>
 </template>
 
@@ -33,6 +35,7 @@ const { locale } = useTranslation()
 
 const props = defineProps<{
   to: string | RouteLocationRaw | null | undefined
+  replace?: boolean
 }>()
 
 const isExternal = computed(() => {

package/src/components/BannerAction.vue

@@ -10,7 +10,9 @@
   >
     <div>
       <div class="text-gray-900">
-        {{ title }}
+        <slot name="title">
+          {{ title }}
+        </slot>
       </div>
       <div
         v-if="$slots.default"
@@ -34,7 +36,9 @@ export const bannerActionTypeKey = Symbol() as InjectionKey<'primary' | 'danger'
 <script setup lang="ts">
 const props = defineProps<{
   type: 'primary' | 'danger' | 'warning'
-  title: string
+  // Optional so the title can be a slot, for instance to make it the toggle of a
+  // disclosure whose panel lives in the banner
+  title?: string
 }>()
 
 provide(bannerActionTypeKey, props.type)

package/src/components/Chart/ChartViewer.vue

@@ -13,7 +13,8 @@ import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, Datas
 import { init, type ECharts as EChartsType } from 'echarts'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { summarize } from '../../functions/helpers'
-import type { Chart, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
+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])
@@ -22,17 +23,26 @@ const props = defineProps<{
   chart: Chart | ChartForApi
   series: {
     data: Record<string, Array<Record<string, unknown>>>
-    columns: Record<string, Array<string>>
+    columns: ColumnsDefinition
   }
 }>()
 
 const { locale } = useTranslation()
+const { formatDate } = useFormatDate()
 const chartContainer = ref<HTMLElement | null>(null)
 let echartsInstance: EChartsType | null = null
 
-function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
+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'
-  return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
+  if (xAxis.type !== 'continuous') return 'category'
+  return isDateAxis.value ? 'time' : 'value'
 }
 
 function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
@@ -44,6 +54,77 @@ function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefi
   }
 }
 
+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
@@ -53,16 +134,20 @@ const echartsOption = computed(() => {
     const yColumn = s.aggregate_y ? `${s.column_y}__${s.aggregate_y}` : s.column_y
     const resourceId = s.resource_id
 
-    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !props.series.columns[resourceId]) {
+    const resourceColumns = props.series.columns[resourceId]
+    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !resourceColumns) {
       return null
     }
 
-    const sortedData = [...props.series.data[resourceId]]
-    const sortBy = props.chart.x_axis.sort_x_by
+    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_x' ? xColumn : yColumn
+      const sortKey = sortBy === 'axis_y' ? yColumn : xColumn
       sortedData.sort((a, b) => {
         const valA = a[sortKey]
         const valB = b[sortKey]
@@ -110,7 +195,7 @@ const echartsOption = computed(() => {
     return {
       series: {
         type: s.type === 'histogram' ? 'bar' : 'line',
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
         name: yColumn,
         encode: {
           x: xColumn,
@@ -119,7 +204,7 @@ const echartsOption = computed(() => {
       } as LineSeriesOption | BarSeriesOption,
       data: {
         source: sortedData,
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
       },
     }
   })
@@ -135,26 +220,30 @@ const echartsOption = computed(() => {
     seriesData.data.push(curr.data)
   }
 
+  const xAxisType = mapXAxisType(props.chart.x_axis)
+
   return {
     dataset: [...seriesData.data],
-    title: {
-      text: props.chart.title,
-      left: 'center',
+    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 formatter = new Intl.NumberFormat('fr-FR')
+        const valueFormatter = new Intl.NumberFormat(locale)
+        const xAxisFormatter = buildXAxisFormatter(xAxisColumn.value, { dateStyle: 'medium' })
         for (const param of params) {
           const seriesName = param.seriesName
-          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[seriesName]))}</strong><br>`
+          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: seriesData.series.length > 1,
+      show: false,
       bottom: 0,
     },
     grid: {
@@ -165,8 +254,13 @@ const echartsOption = computed(() => {
       containLabel: true,
     },
     xAxis: {
-      type: mapXAxisType(props.chart.x_axis),
+      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,

package/src/components/Chart/ChartViewerWrapper.vue

@@ -5,6 +5,7 @@
   >
     <template #default="{ data }">
       <ChartViewer
+        ref="chartViewerRef"
         :chart="chart"
         :series="data"
       />
@@ -18,23 +19,28 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
+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 } from '../../types/visualizations'
+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 emit = defineEmits<{
-  columns: [columns: Record<string, Array<string>>]
-}>()
-
 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()
 
@@ -45,12 +51,18 @@ const pendingOperations = ref(0)
 
 const series = reactive<{
   data: Record<string, Array<Record<string, unknown>>>
-  columns: Record<string, Array<string>>
+  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'
@@ -78,7 +90,7 @@ async function fetchSeriesProfile() {
       .map(r => r.value)
     series.columns = Object.fromEntries(results.map(result => [
       result.id,
-      result.profile.profile.header,
+      buildColumnsFromProfile(result.profile),
     ]))
   }
   catch (err) {
@@ -86,6 +98,7 @@ async function fetchSeriesProfile() {
     status.value = 'error'
     console.error(err)
     series.columns = {}
+    series.data = {}
   }
   finally {
     pendingOperations.value--
@@ -148,17 +161,16 @@ async function fetchSeriesData() {
   }
 }
 
-watch(() => props.chart.series, async () => {
+watch(resourceIds, async () => {
   await fetchSeriesProfile()
-}, { immediate: true, deep: true })
+}, { immediate: true })
 
-watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () => {
+watchDebounced([
+  () => props.chart.series,
+  () => props.chart.x_axis.column_x,
+], async () => {
   await fetchSeriesData()
-}, { immediate: true, deep: true })
-
-watch(() => series.columns, () => {
-  emit('columns', series.columns)
-})
+}, { debounce: config.searchDebounce ?? 300, immediate: true, deep: true })
 
 watch(pendingOperations, (count) => {
   if (count === 0) {

package/src/components/ChartCard.vue

@@ -0,0 +1,112 @@
+<template>
+  <ObjectCard media-size="xl">
+    <template #badge>
+      <ObjectCardBadge
+        v-if="chart.deleted_at"
+        :icon="RiDeleteBinLine"
+      >
+        {{ t('Supprimé') }}
+      </ObjectCardBadge>
+      <ObjectCardBadge
+        v-else-if="chart.private"
+        :icon="RiLockLine"
+      >
+        {{ t('Brouillon') }}
+      </ObjectCardBadge>
+    </template>
+
+    <template #media>
+      <img
+        v-if="chart.image"
+        :src="chart.image"
+        class="w-full h-full object-cover"
+        :alt="chart.title"
+      >
+      <Placeholder
+        v-else
+        type="Chart"
+        class="w-full h-full"
+      />
+    </template>
+
+    <ObjectCardHeader
+      :icon="chartIcon"
+      :url="chartUrl || chart.page"
+    >
+      {{ chart.title }}
+    </ObjectCardHeader>
+
+    <div
+      v-if="chart.organization || chart.owner"
+      class="text-sm flex flex-wrap gap-y-1 items-center truncate"
+    >
+      <ObjectCardOwner
+        :organization="chart.organization"
+        :owner="chart.owner"
+        :organization-url="organizationUrl"
+      />
+      <RiSubtractLine
+        aria-hidden="true"
+        class="size-4 flex-none fill-gray-medium"
+      />
+      <TranslationT
+        tag="p"
+        class="text-sm whitespace-nowrap mb-0 text-gray-medium"
+        keypath="Mis à jour {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="chart.last_modified"
+            format="relative"
+            :options="{ dateStyle: 'medium' }"
+          />
+        </template>
+      </TranslationT>
+    </div>
+
+    <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium mt-1">
+      <p
+        class="text-sm mb-0 flex items-center gap-0.5"
+        :aria-label="t('{n} vues | {n} vue | {n} vues', chart.metrics.views)"
+      >
+        <RiEyeLine
+          aria-hidden="true"
+          class="size-3.5"
+        />{{ summarize(chart.metrics.views) }}
+      </p>
+    </div>
+
+    <ObjectCardShortDescription :text="chart.description" />
+
+    <slot />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiBarChartBoxLine, RiDeleteBinLine, RiEyeLine, RiLineChartLine, RiLockLine, RiSubtractLine } from '@remixicon/vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { Chart } from '../types/visualizations'
+import { summarize } from '../functions/helpers'
+import { useTranslation } from '../composables/useTranslation'
+import Placeholder from './Placeholder.vue'
+import FormattedDate from './FormattedDate.vue'
+import ObjectCard from './ObjectCard.vue'
+import ObjectCardBadge from './ObjectCardBadge.vue'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardOwner from './ObjectCardOwner.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import TranslationT from './TranslationT.vue'
+
+const props = defineProps<{
+  chart: Chart
+  chartUrl?: RouteLocationRaw
+  organizationUrl?: RouteLocationRaw
+}>()
+
+const { t } = useTranslation()
+
+const chartIcon = computed(() => {
+  return props.chart.series[0]?.type === 'line' ? RiLineChartLine : RiBarChartBoxLine
+})
+</script>