@datagouv/components-next 1.0.2-dev.154 → 1.0.2-dev.156

package/dist/{vue3-xml-viewer.common-omEYjVTS.js → vue3-xml-viewer.common-C2hQ2aXh.js}

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.154",
+  "version": "1.0.2-dev.156",
   "private": false,
   "type": "module",
   "engines": {
@@ -31,7 +31,7 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/router": "^14.3.0",
     "chart.js": "^4.5.1",
-    "dompurify": "^3.4.7",
+    "dompurify": "^3.4.11",
     "echarts": "^6.1.0",
     "geopf-extensions-openlayers": "1.0.0-beta.11",
     "leaflet": "^1.9.4",

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,11 +23,12 @@ const props = defineProps<{
   chart: Chart | ChartForApi
   series: {
     data: Record<string, Array<Record<string, unknown>>>
-    columns: Record<string, Array<{ name: string, type: string }>>
+    columns: ColumnsDefinition
   }
 }>()
 
 const { locale } = useTranslation()
+const { formatDate } = useFormatDate()
 const chartContainer = ref<HTMLElement | null>(null)
 let echartsInstance: EChartsType | null = null
 
@@ -36,9 +38,11 @@ function capture(): string | null {
 
 defineExpose({ capture })
 
-function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
+// 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 === 'continuous' ? 'value' : 'category'
+  if (xAxis.type !== 'continuous') return 'category'
+  return isDateAxis.value ? 'time' : 'value'
 }
 
 function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
@@ -50,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
@@ -64,12 +139,15 @@ const echartsOption = computed(() => {
       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]
@@ -142,6 +220,8 @@ const echartsOption = computed(() => {
     seriesData.data.push(curr.data)
   }
 
+  const xAxisType = mapXAxisType(props.chart.x_axis)
+
   return {
     dataset: [...seriesData.data],
     textStyle: {
@@ -152,10 +232,12 @@ const echartsOption = computed(() => {
       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
       },
@@ -172,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/TabularExplorer/TabularCell.vue

@@ -20,10 +20,6 @@
     class="inline-block rounded font-medium px-2 py-0.5 text-xs max-w-full truncate"
     :style="categoryBadgeStyle ? { backgroundColor: categoryBadgeStyle.backgroundColor, color: categoryBadgeStyle.color } : undefined"
   >{{ value }}</span>
-  <span
-    v-else-if="columnType === 'number' && noNumberFormat"
-    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
-  >{{ value }}</span>
   <span
     v-else-if="columnType === 'number'"
     :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
@@ -32,10 +28,6 @@
     v-else-if="columnType === 'date'"
     :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
   >{{ formatCellDate(value) }}</span>
-  <span
-    v-else-if="columnType === 'year'"
-    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
-  >{{ value }}</span>
   <span
     v-else
     class="text-gray-title truncate block text-xs"
@@ -52,7 +44,6 @@ defineProps<{
   columnType: ColumnType
   categoryBadgeStyle?: BadgeStyle
   compact?: boolean
-  noNumberFormat?: boolean
 }>()
 
 const { t } = useTranslation()

package/src/components/TabularExplorer/TabularCellPopover.vue

@@ -128,7 +128,7 @@ function filterByValue() {
   const val = String(cell.value.value ?? '')
   const col = cell.value.column
   const existing = filters.value[col] ?? {}
-  if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || cell.value.columnType === 'date' || cell.value.columnType === 'year') {
+  if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || cell.value.columnType === 'date') {
     const current = existing.in ?? []
     if (!current.includes(val)) {
       filters.value = { ...filters.value, [col]: { ...existing, in: [...current, val] } }

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -63,7 +63,6 @@
            ExploreResourceView), so they line up with the resource title /
            download button above. Only the table itself goes edge-to-edge
            (via -mx-4 below). -->
-      <slot name="toolbar-top" />
       <div>
         <div class="flex items-center py-3 gap-2">
           <!-- Mobile: filter & sort button -->
@@ -380,32 +379,15 @@
                 v-for="col in displayedColumns"
                 :key="col"
                 data-cell
-                class="p-2 align-middle whitespace-nowrap border-r border-gray-default last:border-r-0 overflow-hidden"
-                :class="[
-                  !props.disablePopover && 'cursor-pointer',
-                  { 'text-right font-mono tabular-nums text-sm': getColumnType(col) === 'number' || getColumnType(col) === 'date' || getColumnType(col) === 'year' },
-                ]"
+                class="p-2 align-middle whitespace-nowrap border-r border-gray-default last:border-r-0 overflow-hidden cursor-pointer hover:bg-gray-200/50"
+                :class="{ 'text-right font-mono tabular-nums text-sm': getColumnType(col) === 'number' || getColumnType(col) === 'date' }"
                 :style="columnWidths[col] ? { maxWidth: columnWidths[col] + 'px' } : { maxWidth: '300px' }"
                 @click="onCellClick(col, row[col], $event)"
               >
-                <a
-                  v-if="linkColumns?.has(col)"
-                  :href="getRowHref(row) ?? ''"
-                  class="link"
-                >
-                  <TabularCell
-                    :value="row[col]"
-                    :column-type="getColumnType(col)"
-                    :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
-                    :no-number-format="props.noFormatColumns?.includes(col)"
-                  />
-                </a>
                 <TabularCell
-                  v-else
                   :value="row[col]"
                   :column-type="getColumnType(col)"
                   :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
-                  :no-number-format="props.noFormatColumns?.includes(col)"
                 />
               </td>
             </tr>
@@ -420,7 +402,6 @@
 
       <!-- Cell popover -->
       <TabularCellPopover
-        v-if="!props.disablePopover"
         v-model:cell="activeCell"
         v-model:filters="filters"
       />
@@ -469,25 +450,11 @@
               class="min-w-0 pl-4 cursor-pointer"
               @click="onCellClick(col, row[col], $event)"
             >
-              <a
-                v-if="linkColumns?.has(col)"
-                :href="getRowHref(row) ?? ''"
-              >
-                <TabularCell
-                  :value="row[col]"
-                  :column-type="getColumnType(col)"
-                  :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
-                  compact
-                  :no-number-format="props.noFormatColumns?.includes(col)"
-                />
-              </a>
               <TabularCell
-                v-else
                 :value="row[col]"
                 :column-type="getColumnType(col)"
                 :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
                 compact
-                :no-number-format="props.noFormatColumns?.includes(col)"
               />
             </div>
           </div>
@@ -647,7 +614,7 @@ import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
 import { injectTabularProfile } from '../../composables/useTabularProfile'
-import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType, buildGlobalSearchConditions } from '../../functions/tabular'
+import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
 import BrandedButton from '../BrandedButton.vue'
@@ -666,37 +633,8 @@ const props = defineProps<{
   // the host's padding. Used on the standalone explore page where the table
   // should span the whole screen while the toolbar stays inside the container.
   fullBleed?: boolean
-  // When set, searches across multiple columns using the Tabular API's or(...)
-  // parameter. Text and categorical columns get a __contains filter; number
-  // columns get a __exact filter (since __contains is not supported for numbers
-  // by the API). Date and boolean columns are excluded.
-  // Note: combined via AND with any existing column-specific `contains` filters,
-  // so it acts as an additional narrowing constraint, not a replacement.
-  globalSearch?: string
-  // When true, clicking a cell does not open the popover. Use when row-click
-  // navigation is the primary interaction.
-  disablePopover?: boolean
-  // Initial filters applied on mount, e.g. { 'Administration': { contains: 'Ministère' } }.
-  // Used when navigating from the detail page badge with query params.
-  initialFilters?: Record<string, ColumnFilters>
-  // When set, renders <a> tags inside the specified column cells for native
-  // browser UX (hover URL, ctrl+click, middle-click).
-  rowHref?: { columns: string[], href: (row: TabularRow) => string }
-  // Columns listed here render their values raw (no number formatting).
-  // Useful for identifier columns.
-  noFormatColumns?: string[]
 }>()
 
-const rowHrefFn = computed(() => props.rowHref?.href ?? null)
-
-function getRowHref(row: TabularRow): string | null {
-  return rowHrefFn.value?.(row) ?? null
-}
-
-const linkColumns = computed(() =>
-  props.rowHref ? new Set(props.rowHref.columns) : null,
-)
-
 const { t } = useTranslation()
 const config = useComponentsConfig()
 
@@ -720,10 +658,6 @@ const dataUrl = computed(() =>
 const sort = ref<SortConfig | null>(null)
 const filters = ref<Record<string, ColumnFilters>>({})
 
-if (props.initialFilters) {
-  filters.value = { ...props.initialFilters }
-}
-
 const PAGE_SIZE = 50
 
 const dataQuery = computed(() => {
@@ -754,10 +688,6 @@ const dataQuery = computed(() => {
       q[`${col}__isnotnull`] = ''
     }
   }
-  if (props.globalSearch && profileData.value?.profile) {
-    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, props.globalSearch)
-    q.or = '(' + conditions.join(',') + ')'
-  }
   return q
 })
 
@@ -1008,7 +938,6 @@ onUnmounted(() => {
 const activeCell = ref<CellInfo | null>(null)
 
 function onCellClick(col: string, value: unknown, event: MouseEvent) {
-  if (props.disablePopover) return
   const el = (event.target as HTMLElement).closest('[data-cell]') as HTMLElement | null
   if (!el) return
   if (activeCell.value && activeCell.value.element === el) {
@@ -1032,12 +961,7 @@ const activeFilters = computed<ActiveFilter[]>(() => {
       parts.push(`= ${filter.in.join(', ')}`)
     }
     if (filter.exact != null) {
-      if (getColumnType(col) === 'boolean') {
-        parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
-      }
-      else {
-        parts.push(`= ${filter.exact}`)
-      }
+      parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
     }
     if (filter.contains) {
       parts.push(`${t('contient')} "${filter.contains}"`)

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -154,14 +154,14 @@
 
     <!-- Number range -->
     <form
-      v-if="(columnType === 'number' || columnType === 'year') && columnProfile"
+      v-if="columnType === 'number' && columnProfile"
       class="px-3 py-2 border-b border-black/10 space-y-2"
       @submit.prevent="applyRange"
     >
       <div class="flex items-center gap-2 text-xs text-gray-plain">
-        <span class="tabular-nums">{{ columnType === 'year' ? profileMin : formatNumber(profileMin) }}</span>
+        <span class="tabular-nums">{{ formatNumber(profileMin) }}</span>
         <span class="text-gray-medium">—</span>
-        <span class="tabular-nums">{{ columnType === 'year' ? profileMax : formatNumber(profileMax) }}</span>
+        <span class="tabular-nums">{{ formatNumber(profileMax) }}</span>
       </div>
       <div class="flex items-center gap-2">
         <input

package/src/components/TabularExplorer/types.ts

@@ -51,8 +51,8 @@ export type TabularColumnProfile = {
   tops: TabularTopValue[]
   nb_distinct: number
   nb_missing_values: number
-  min?: number
-  max?: number
+  min?: number | string
+  max?: number | string
   std?: number
   mean?: number
 }
@@ -62,13 +62,13 @@ export type TabularTopValue = {
   count: number
 }
 
-export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean' | 'year'
+export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean'
 
 export type ColumnFilters = {
   in?: string[]
   exact?: string
-  min?: number | string
-  max?: number | string
+  min?: number
+  max?: number
   contains?: string
   null?: 'only' | 'exclude'
 }

package/src/functions/charts.ts

@@ -1,5 +1,5 @@
 import type { Chart, ChartForm, ChartForApi, Filter, ColumnDefinition } from '../types/visualizations'
-import type { TabularProfile } from '../components/TabularExplorer/types'
+import type { ColumnType, TabularProfile } from '../components/TabularExplorer/types'
 import { resolveColumnType } from './tabular'
 
 export function toChartForm(chart: Chart) {
@@ -74,6 +74,22 @@ export function buildColumnsFromProfile(profile: { profile: TabularProfile }): A
     const colInfo = profile.profile.columns[name]
     const isCategorical = profile.profile.categorical.includes(name)
     const colType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
-    return { name, type: colType }
+    const colProfile = profile.profile.profile[name]
+    return {
+      name,
+      type: colType,
+      min: normalizeProfileNumber(colProfile?.min, colType),
+      max: normalizeProfileNumber(colProfile?.max, colType),
+    }
   })
 }
+
+function normalizeProfileNumber(value: number | string | undefined, type: ColumnType): number | undefined {
+  if (value === undefined || value === null) return undefined
+  if (type === 'date' && typeof value === 'string') {
+    const timestamp = new Date(value).getTime()
+    return Number.isNaN(timestamp) ? undefined : timestamp
+  }
+  const parsed = Number(value)
+  return Number.isNaN(parsed) ? undefined : parsed
+}

package/src/functions/tabular.ts

@@ -42,13 +42,12 @@ export function buildTypeConfig(t: TranslationFunction): Record<ColumnType, Type
     text: { icon: RiText, label: t('Texte') },
     date: { icon: RiCalendarLine, label: t('Date') },
     boolean: { icon: RiCheckboxLine, label: t('Booléen') },
-    year: { icon: RiCalendarLine, label: t('Année') },
   }
 }
 
 export function resolveColumnType(colInfo: { python_type: string, format?: string }, isCategorical: boolean): ColumnType {
-  if (colInfo.format === 'year') return 'year'
   if (['int', 'float'].includes(colInfo.python_type)) return 'number'
+  if (colInfo.format === 'year') return 'date'
   if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
   if (colInfo.python_type === 'bool') return 'boolean'
   if (isCategorical) return 'categorical'
@@ -159,30 +158,6 @@ export function useFormatTabular() {
 const TRUTHY_VALUES = ['true', '1', 'oui', 'yes']
 const FALSY_VALUES = ['false', '0', 'non', 'no']
 
-/**
- * Builds the OR conditions for global search across all columns.
- * Text and categorical columns get a `__contains` filter; number columns
- * get a `__exact` filter only when the search value is numeric.
- * Date and boolean columns are excluded.
- */
-export function buildGlobalSearchConditions(
-  allColumns: string[],
-  getColumnType: (col: string) => ColumnType,
-  searchValue: string,
-): string[] {
-  const conditions: string[] = []
-  for (const col of allColumns) {
-    const type = getColumnType(col)
-    if (type === 'text' || type === 'categorical') {
-      conditions.push(col + '__contains.' + encodeURIComponent(searchValue))
-    }
-    else if (type === 'number' && searchValue.length > 0 && isFinite(Number(searchValue))) {
-      conditions.push(col + '__exact.' + encodeURIComponent(searchValue))
-    }
-  }
-  return conditions
-}
-
 export function isTruthy(value: unknown): boolean {
   if (typeof value === 'boolean') return value
   if (typeof value === 'string') return TRUTHY_VALUES.includes(value.toLowerCase())

package/src/types/visualizations.ts

@@ -89,5 +89,5 @@ export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organ
   filter: GenericFilter | null
 }
 
-export type ColumnDefinition = { name: string, type: ColumnType }
+export type ColumnDefinition = { name: string, type: ColumnType, min?: number, max?: number }
 export type ColumnsDefinition = Record<string, Array<ColumnDefinition>>