From 11c81dd1a0abcec6848fe50b74c89c1b620c49e8 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 18:02:14 +0200
Subject: [PATCH 001/121] fix(resources): fix wrong checks and refactor to
 provide a single function as source of truth

---
 components/Datasets/FileEditModal.vue         |  5 ++--
 .../ResourceAccordion/ResourceAccordion.vue   |  2 +-
 .../src/composables/useHasTabularData.ts      | 23 ++++++++++++-------
 .../composables/useResourceCapabilities.ts    |  4 ++--
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/components/Datasets/FileEditModal.vue b/components/Datasets/FileEditModal.vue
index 09baceb46..2dd8b0129 100644
--- a/components/Datasets/FileEditModal.vue
+++ b/components/Datasets/FileEditModal.vue
@@ -228,11 +228,12 @@ const resourceForm = ref(cloneDeep(props.resource))
 const open = ref(false)
 const hasFileChanged = ref(false)
 
-const hasTabularData = useHasTabularData()
+// Use the composable for tabular data detection
+const { hasTabularData } = useHasTabularData()
 
 // Check if resource has tabular API
 const hasTabularApi = computed(() => {
-  return props.resource.resource ? hasTabularData(props.resource.resource) : false
+  return hasTabularData(props.resource.resource || { extras: {}, filetype: undefined })
 })
 
 // Watch for file changes
diff --git a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
index d28f7e21b..06d076fd5 100644
--- a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
+++ b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
@@ -426,7 +426,7 @@ const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue
 
 const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
-const checkTabularData = useHasTabularData()
+const { hasTabularData: checkTabularData } = useHasTabularData()
 
 const hasPreview = computed(() => {
   // For JSON, PDF, and XML files, show preview.
diff --git a/datagouv-components/src/composables/useHasTabularData.ts b/datagouv-components/src/composables/useHasTabularData.ts
index 7b02a78ba..107a720ac 100644
--- a/datagouv-components/src/composables/useHasTabularData.ts
+++ b/datagouv-components/src/composables/useHasTabularData.ts
@@ -1,15 +1,22 @@
 import { useComponentsConfig } from '../config'
-import type { Resource } from '../types/resources'
 
+/**
+ * Composable to determine if a resource has tabular data.
+ * This is used to show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure).
+ *
+ * @returns An object containing the hasTabularData function.
+ */
 export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
-  return (resource: Resource) => {
-    return (
-      config.tabularApiUrl
-      && resource.extras['analysis:parsing:parsing_table']
-      && !resource.extras['analysis:parsing:error']
-      && (config.tabularAllowRemote || resource.filetype === 'file')
-    )
+  return {
+    hasTabularData: (resource: { extras: Record<string, unknown>, filetype?: string }) => {
+      return (
+        config.tabularApiUrl
+        && resource.extras['analysis:parsing:parsing_table']
+        && !resource.extras['analysis:parsing:error']
+        && (config.tabularAllowRemote || resource.filetype === 'file')
+      )
+    },
   }
 }
diff --git a/datagouv-components/src/composables/useResourceCapabilities.ts b/datagouv-components/src/composables/useResourceCapabilities.ts
index 052e62694..14c4f885b 100644
--- a/datagouv-components/src/composables/useResourceCapabilities.ts
+++ b/datagouv-components/src/composables/useResourceCapabilities.ts
@@ -17,7 +17,7 @@ export function useResourceCapabilities(
 ) {
   const config = useComponentsConfig()
   const { t } = useTranslation()
-  const checkTabularData = useHasTabularData()
+  const { hasTabularData: hasTabularDataFromComposable } = useHasTabularData()
 
   const hasPreview = computed(() => {
     const format = toValue(resource).format?.toLowerCase()
@@ -26,7 +26,7 @@ export function useResourceCapabilities(
 
   const hasTabularData = computed(() => {
     const r = toValue(resource)
-    return checkTabularData(r)
+    return hasTabularDataFromComposable(r)
   })
 
   const hasPmtiles = computed(() => {

From 3818a3525eeaa191e46a51a0df48c96fff5d137f Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 24 Feb 2026 12:41:12 +0100
Subject: [PATCH 002/121] fix: condition

---
 components/Datasets/FileEditModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Datasets/FileEditModal.vue b/components/Datasets/FileEditModal.vue
index 2dd8b0129..d10963631 100644
--- a/components/Datasets/FileEditModal.vue
+++ b/components/Datasets/FileEditModal.vue
@@ -233,7 +233,7 @@ const { hasTabularData } = useHasTabularData()
 
 // Check if resource has tabular API
 const hasTabularApi = computed(() => {
-  return hasTabularData(props.resource.resource || { extras: {}, filetype: undefined })
+  return props.resource.resource ? hasTabularData(props.resource.resource) : false
 })
 
 // Watch for file changes

From f193dd22169d2f937e7cdd9e3403ae73923a7912 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 24 Feb 2026 12:42:36 +0100
Subject: [PATCH 003/121] refac: naming

---
 .../src/composables/useResourceCapabilities.ts                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/datagouv-components/src/composables/useResourceCapabilities.ts b/datagouv-components/src/composables/useResourceCapabilities.ts
index 14c4f885b..ce911b3b0 100644
--- a/datagouv-components/src/composables/useResourceCapabilities.ts
+++ b/datagouv-components/src/composables/useResourceCapabilities.ts
@@ -17,7 +17,7 @@ export function useResourceCapabilities(
 ) {
   const config = useComponentsConfig()
   const { t } = useTranslation()
-  const { hasTabularData: hasTabularDataFromComposable } = useHasTabularData()
+  const { hasTabularData: checkTabularData } = useHasTabularData()
 
   const hasPreview = computed(() => {
     const format = toValue(resource).format?.toLowerCase()
@@ -26,7 +26,7 @@ export function useResourceCapabilities(
 
   const hasTabularData = computed(() => {
     const r = toValue(resource)
-    return hasTabularDataFromComposable(r)
+    return checkTabularData(r)
   })
 
   const hasPmtiles = computed(() => {

From 2d187c8e1cf1d3644cc31e5ad4108281e850e761 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 18:04:23 +0200
Subject: [PATCH 004/121] wip: add chart visualization types, viewer and
 configurator

---
 datagouv-components/package.json              |   1 +
 .../src/components/ChartViewer.vue            | 113 +++++++
 datagouv-components/src/main.ts               |  16 +
 .../src/types/visualizations.ts               |  87 ++++++
 design-system/ChartConfigurator.vue           | 293 ++++++++++++++++++
 nuxt.config.ts                                |   2 +-
 pages/design/chart.vue                        |  22 ++
 pnpm-lock.yaml                                |  34 ++
 8 files changed, 567 insertions(+), 1 deletion(-)
 create mode 100644 datagouv-components/src/components/ChartViewer.vue
 create mode 100644 datagouv-components/src/types/visualizations.ts
 create mode 100644 design-system/ChartConfigurator.vue
 create mode 100644 pages/design/chart.vue

diff --git a/datagouv-components/package.json b/datagouv-components/package.json
index 93a85015c..d17ccd248 100644
--- a/datagouv-components/package.json
+++ b/datagouv-components/package.json
@@ -46,6 +46,7 @@
     "@vueuse/router": "^14.2.1",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
+    "echarts": "^6.0.0",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
diff --git a/datagouv-components/src/components/ChartViewer.vue b/datagouv-components/src/components/ChartViewer.vue
new file mode 100644
index 000000000..dc30ee4f2
--- /dev/null
+++ b/datagouv-components/src/components/ChartViewer.vue
@@ -0,0 +1,113 @@
+<template>
+  <VChart
+    class="chart-viewer"
+    :option="echartsOption"
+    autoresize
+  />
+</template>
+
+<script setup lang="ts">
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import { computed } from 'vue'
+import type { Chart, DataSeries, XAxis, YAxis } from '../types/visualizations'
+
+use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
+
+const props = defineProps<{
+  chart: Chart
+}>()
+
+const DUMMY_SOURCE = [
+  ['category', 'Série 1', 'Série 2'],
+  ['Jan', 120, 80],
+  ['Fév', 132, 95],
+  ['Mar', 101, 110],
+  ['Avr', 134, 87],
+  ['Mai', 90, 125],
+  ['Juin', 230, 145],
+  ['Juil', 210, 160],
+  ['Août', 182, 130],
+  ['Sep', 191, 140],
+  ['Oct', 234, 155],
+  ['Nov', 260, 170],
+  ['Déc', 300, 190],
+]
+
+function mapSeriesType(type: DataSeries['type']): 'line' | 'bar' {
+  return type === 'histogram' ? 'bar' : 'line'
+}
+
+function mapXAxisType(xAxis?: XAxis): 'category' | 'value' {
+  if (!xAxis) return 'category'
+  return xAxis.type === 'continuous' ? 'value' : 'category'
+}
+
+function buildYAxisFormatter(yAxis?: YAxis): ((value: number) => string) | undefined {
+  if (!yAxis?.unit) return undefined
+  return (value: number) => {
+    if (yAxis.unit_position === 'prefix') return `${yAxis.unit}${value}`
+    return `${value}${yAxis.unit}`
+  }
+}
+
+const echartsOption = computed(() => {
+  const series = (props.chart.series ?? []).map((s, i) => ({
+    type: mapSeriesType(s.type),
+    name: s.column_x_name_override ?? `Série ${i + 1}`,
+    encode: {
+      x: 'category',
+      y: s.column_y ?? DUMMY_SOURCE[0]![i + 1],
+    },
+  }))
+
+  // Default to a single line series if none defined
+  if (series.length === 0) {
+    series.push({ type: 'line', name: 'Série 1', encode: { x: 'category', y: 'Série 1' } })
+  }
+
+  return {
+    dataset: { source: DUMMY_SOURCE },
+    title: {
+      text: props.chart.title,
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      bottom: 0,
+    },
+    grid: {
+      top: 60,
+      bottom: 40,
+      left: 60,
+      right: 20,
+      containLabel: true,
+    },
+    xAxis: {
+      type: mapXAxisType(props.chart.x_axis),
+    },
+    yAxis: {
+      type: 'value',
+      name: props.chart.y_axis?.label,
+      min: props.chart.y_axis?.min ?? undefined,
+      max: props.chart.y_axis?.max ?? undefined,
+      axisLabel: {
+        formatter: buildYAxisFormatter(props.chart.y_axis),
+      },
+    },
+    series,
+  }
+})
+</script>
+
+<style scoped>
+.chart-viewer {
+  width: 100%;
+  min-height: 400px;
+}
+</style>
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 39b418ed7..3f5bc9c74 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -23,6 +23,7 @@ import type { Site } from './types/site'
 import type { Weight, WellType } from './types/ui'
 import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
+import type { Chart, ChartForm, FilterCondition, Filter, AndFilters, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, UnitPosition, YAxis, DataSeriesType, AggregateType, DataSeries } from './types/visualizations'
 import type { GlobalSearchConfig, SearchType, SortOption } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
 
@@ -216,6 +217,21 @@ export type {
   ValidataError,
   Weight,
   WellType,
+  Chart,
+  ChartForm,
+  FilterCondition,
+  Filter,
+  AndFilters,
+  GenericFilter,
+  XAxisType,
+  XAxisSortBy,
+  SortDirection,
+  XAxis,
+  UnitPosition,
+  YAxis,
+  DataSeriesType,
+  AggregateType,
+  DataSeries,
 }
 
 export {
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
new file mode 100644
index 000000000..b24ef4d4c
--- /dev/null
+++ b/datagouv-components/src/types/visualizations.ts
@@ -0,0 +1,87 @@
+import type { Owned, OwnedWithId } from './owned'
+
+// Filter types
+export type FilterCondition = 'equal' | 'greater'
+
+export type Filter = {
+  column: string
+  condition: FilterCondition
+  value?: string
+}
+
+export type AndFilters = {
+  filters: Array<Filter | AndFilters>
+}
+
+export type GenericFilter = Filter | AndFilters
+
+// Axis types
+export type XAxisType = 'discrete' | 'continuous'
+
+export type XAxisSortBy = 'axis_x' | 'axis_y'
+
+export type SortDirection = 'asc' | 'desc'
+
+export type XAxis = {
+  column_x: string
+  sort_x_by?: XAxisSortBy
+  sort_x_direction?: SortDirection
+  type: XAxisType
+}
+
+export type UnitPosition = 'prefix' | 'suffix'
+
+export type YAxis = {
+  min?: number
+  max?: number
+  label?: string
+  unit?: string
+  unit_position?: UnitPosition
+}
+
+// Data series types
+export type DataSeriesType = 'line' | 'histogram'
+
+export type AggregateType = 'sum' | 'median'
+
+export type DataSeries = {
+  type: DataSeriesType
+  column_y?: string
+  aggregate_y?: AggregateType
+  resource_id?: string
+  column_x_name_override?: string
+  filters?: GenericFilter
+}
+
+// Chart form fields (for POST/PATCH requests)
+export type ChartForm = OwnedWithId & {
+  title: string
+  description: string
+  private?: boolean
+  x_axis?: XAxis
+  y_axis?: YAxis
+  series?: Array<DataSeries>
+  extras?: Record<string, unknown>
+}
+
+// Chart read fields (API responses)
+export type Chart = Owned & {
+  id: string
+  title: string
+  slug: string
+  description: string
+  private: boolean
+  created_at: string
+  last_modified: string
+  deleted_at: string | null
+  uri: string
+  page: string
+  x_axis?: XAxis
+  y_axis?: YAxis
+  series?: Array<DataSeries>
+  extras: Record<string, unknown>
+  permissions: { delete: boolean, edit: boolean, read: boolean }
+  metrics: {
+    views: number
+  }
+}
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
new file mode 100644
index 000000000..27ca2df5a
--- /dev/null
+++ b/design-system/ChartConfigurator.vue
@@ -0,0 +1,293 @@
+<template>
+  <div class="grid lg:grid-cols-2 gap-8">
+    <!-- Live preview -->
+    <div class="border border-gray-light rounded-lg p-4">
+      <h3 class="text-lg font-bold mb-4">
+        Aperçu
+      </h3>
+      <ClientOnly>
+        <ChartViewer :chart="chartPreview" />
+      </ClientOnly>
+    </div>
+
+    <!-- Form -->
+    <div class="space-y-6">
+      <h3 class="text-lg font-bold">
+        Configuration
+      </h3>
+
+      <!-- Title -->
+      <div>
+        <label
+          for="chart-title"
+          class="block text-sm font-medium mb-1"
+        >Titre</label>
+        <input
+          id="chart-title"
+          v-model="form.title"
+          type="text"
+          class="w-full border border-gray-light rounded px-3 py-2"
+        >
+      </div>
+
+      <!-- Description -->
+      <div>
+        <label
+          for="chart-description"
+          class="block text-sm font-medium mb-1"
+        >Description</label>
+        <textarea
+          id="chart-description"
+          v-model="form.description"
+          class="w-full border border-gray-light rounded px-3 py-2"
+          rows="2"
+        />
+      </div>
+
+      <!-- X Axis -->
+      <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
+        <legend class="text-sm font-bold px-2">
+          Axe X
+        </legend>
+        <div>
+          <label
+            for="x-axis-type"
+            class="block text-sm font-medium mb-1"
+          >Type</label>
+          <select
+            id="x-axis-type"
+            v-model="form.xAxisType"
+            class="w-full border border-gray-light rounded px-3 py-2"
+          >
+            <option value="discrete">
+              Discret (catégories)
+            </option>
+            <option value="continuous">
+              Continu (valeurs)
+            </option>
+          </select>
+        </div>
+        <div>
+          <label
+            for="x-axis-sort-by"
+            class="block text-sm font-medium mb-1"
+          >Trier par</label>
+          <select
+            id="x-axis-sort-by"
+            v-model="form.xAxisSortBy"
+            class="w-full border border-gray-light rounded px-3 py-2"
+          >
+            <option value="">
+              Aucun
+            </option>
+            <option value="axis_x">
+              Axe X
+            </option>
+            <option value="axis_y">
+              Axe Y
+            </option>
+          </select>
+        </div>
+        <div>
+          <label
+            for="x-axis-sort-direction"
+            class="block text-sm font-medium mb-1"
+          >Direction du tri</label>
+          <select
+            id="x-axis-sort-direction"
+            v-model="form.xAxisSortDirection"
+            class="w-full border border-gray-light rounded px-3 py-2"
+          >
+            <option value="asc">
+              Ascendant
+            </option>
+            <option value="desc">
+              Descendant
+            </option>
+          </select>
+        </div>
+      </fieldset>
+
+      <!-- Y Axis -->
+      <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
+        <legend class="text-sm font-bold px-2">
+          Axe Y
+        </legend>
+        <div>
+          <label
+            for="y-axis-label"
+            class="block text-sm font-medium mb-1"
+          >Label</label>
+          <input
+            id="y-axis-label"
+            v-model="form.yAxisLabel"
+            type="text"
+            class="w-full border border-gray-light rounded px-3 py-2"
+          >
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label
+              for="y-axis-min"
+              class="block text-sm font-medium mb-1"
+            >Min</label>
+            <input
+              id="y-axis-min"
+              v-model.number="form.yAxisMin"
+              type="number"
+              class="w-full border border-gray-light rounded px-3 py-2"
+            >
+          </div>
+          <div>
+            <label
+              for="y-axis-max"
+              class="block text-sm font-medium mb-1"
+            >Max</label>
+            <input
+              id="y-axis-max"
+              v-model.number="form.yAxisMax"
+              type="number"
+              class="w-full border border-gray-light rounded px-3 py-2"
+            >
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label
+              for="y-axis-unit"
+              class="block text-sm font-medium mb-1"
+            >Unité</label>
+            <input
+              id="y-axis-unit"
+              v-model="form.yAxisUnit"
+              type="text"
+              class="w-full border border-gray-light rounded px-3 py-2"
+              placeholder="ex: €, %, kg"
+            >
+          </div>
+          <div>
+            <label
+              for="y-axis-unit-position"
+              class="block text-sm font-medium mb-1"
+            >Position unité</label>
+            <select
+              id="y-axis-unit-position"
+              v-model="form.yAxisUnitPosition"
+              class="w-full border border-gray-light rounded px-3 py-2"
+            >
+              <option value="suffix">
+                Suffixe
+              </option>
+              <option value="prefix">
+                Préfixe
+              </option>
+            </select>
+          </div>
+        </div>
+      </fieldset>
+
+      <!-- Series -->
+      <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
+        <legend class="text-sm font-bold px-2">
+          Séries
+        </legend>
+        <div
+          v-for="(serie, index) in form.series"
+          :key="index"
+          class="flex items-center gap-4"
+        >
+          <span class="text-sm text-gray-medium">{{ index + 1 }}.</span>
+          <select
+            v-model="serie.type"
+            class="flex-1 border border-gray-light rounded px-3 py-2"
+          >
+            <option value="line">
+              Ligne
+            </option>
+            <option value="histogram">
+              Histogramme
+            </option>
+          </select>
+          <button
+            class="text-danger-dark text-sm"
+            @click="form.series.splice(index, 1)"
+          >
+            Supprimer
+          </button>
+        </div>
+        <button
+          class="text-sm text-datagouv underline"
+          @click="form.series.push({ type: 'line' })"
+        >
+          + Ajouter une série
+        </button>
+      </fieldset>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Chart, DataSeriesType, XAxisType, XAxisSortBy, SortDirection, UnitPosition } from '@datagouv/components-next'
+import { computed, defineAsyncComponent, reactive } from 'vue'
+
+const ChartViewer = defineAsyncComponent(() => import('../datagouv-components/src/components/ChartViewer.vue'))
+
+const form = reactive<{
+  title: string
+  description: string
+  xAxisType: XAxisType
+  xAxisSortBy: XAxisSortBy | ''
+  xAxisSortDirection: SortDirection
+  yAxisLabel: string
+  yAxisMin: number | undefined
+  yAxisMax: number | undefined
+  yAxisUnit: string
+  yAxisUnitPosition: UnitPosition
+  series: Array<{ type: DataSeriesType }>
+}>({
+  title: 'Mon graphique',
+  description: '',
+  xAxisType: 'discrete',
+  xAxisSortBy: '',
+  xAxisSortDirection: 'asc',
+  yAxisLabel: '',
+  yAxisMin: undefined,
+  yAxisMax: undefined,
+  yAxisUnit: '',
+  yAxisUnitPosition: 'suffix',
+  series: [{ type: 'line' }, { type: 'histogram' }],
+})
+
+const chartPreview = computed<Chart>(() => ({
+  id: 'preview',
+  title: form.title,
+  slug: 'preview',
+  description: form.description,
+  private: false,
+  organization: null,
+  owner: { class: 'User', id: 'preview', first_name: 'Preview', last_name: 'User', slug: 'preview', uri: '', page: '', avatar: '', avatar_thumbnail: '' },
+  created_at: new Date().toISOString(),
+  last_modified: new Date().toISOString(),
+  deleted_at: null,
+  uri: '',
+  page: '',
+  x_axis: {
+    column_x: 'category',
+    type: form.xAxisType,
+    ...(form.xAxisSortBy ? { sort_x_by: form.xAxisSortBy, sort_x_direction: form.xAxisSortDirection } : {}),
+  },
+  y_axis: {
+    label: form.yAxisLabel || undefined,
+    min: form.yAxisMin,
+    max: form.yAxisMax,
+    unit: form.yAxisUnit || undefined,
+    unit_position: form.yAxisUnitPosition,
+  },
+  series: form.series.map(s => ({
+    type: s.type,
+  })),
+  extras: {},
+  permissions: { delete: false, edit: true, read: true },
+  metrics: { views: 0 },
+}))
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f0cd84372..1c8eb3bfe 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -213,7 +213,7 @@ export default defineNuxtConfig({
 
   devServer: {
     port: 3000,
-    host: 'dev.local',
+    host: 'localhost',
   },
 
   features: {
diff --git a/pages/design/chart.vue b/pages/design/chart.vue
new file mode 100644
index 000000000..5a6a967a6
--- /dev/null
+++ b/pages/design/chart.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <Breadcrumb>
+      <BreadcrumbItem to="/design">
+        {{ $t('Système de design') }}
+      </BreadcrumbItem>
+      <BreadcrumbItem to="/design/chart">
+        {{ $t('Chart') }}
+      </BreadcrumbItem>
+    </Breadcrumb>
+    <h1 class="!mb-3">
+      Chart Configurator
+    </h1>
+
+    <ChartConfigurator />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+import ChartConfigurator from '~/design-system/ChartConfigurator.vue'
+</script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1ed84b17f..95b181cb5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -237,6 +237,9 @@ importers:
       dompurify:
         specifier: ^3.2.5
         version: 3.2.7
+      echarts:
+        specifier: ^6.0.0
+        version: 6.0.0
       geopf-extensions-openlayers:
         specifier: ^1.0.0-beta.5
         version: 1.0.0-beta.6
@@ -5152,6 +5155,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -8476,6 +8482,9 @@ packages:
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
 
@@ -9032,6 +9041,12 @@ packages:
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
+  vue-echarts@8.0.1:
+    resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
+    peerDependencies:
+      echarts: ^6.0.0
+      vue: ^3.3.0
+
   vue-eslint-parser@10.2.0:
     resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -9301,6 +9316,9 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
   zstddec@0.1.0:
     resolution: {integrity: sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==}
 
@@ -15019,6 +15037,11 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.328: {}
@@ -19368,6 +19391,8 @@ snapshots:
 
   tslib@1.14.1: {}
 
+  tslib@2.3.0: {}
+
   tslib@2.4.0: {}
 
   tslib@2.8.1: {}
@@ -20051,6 +20076,11 @@ snapshots:
 
   vue-devtools-stub@0.1.0: {}
 
+  vue-echarts@8.0.1(echarts@6.0.0)(vue@3.5.22(typescript@5.9.2)):
+    dependencies:
+      echarts: 6.0.0
+      vue: 3.5.22(typescript@5.9.2)
+
   vue-eslint-parser@10.2.0(eslint@9.36.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
@@ -20351,6 +20381,10 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.7.0
 
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+
   zstddec@0.1.0: {}
 
   zwitch@2.0.4: {}

From 51fef170559d2632c8e8222d1f9c5fb7e3a1258f Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 23 Feb 2026 09:30:13 +0100
Subject: [PATCH 005/121] feat(visualizations): configurator wip

---
 .../components/{ => Chart}/ChartViewer.vue    |  50 +++---
 .../components/Chart/ChartViewerWrapper.vue   | 143 ++++++++++++++++++
 .../src/functions/tabularApi.ts               |  35 ++++-
 .../src/types/visualizations.ts               |  26 ++--
 design-system/ChartConfigurator.vue           |   6 +-
 pages/design.vue                              |  13 +-
 6 files changed, 217 insertions(+), 56 deletions(-)
 rename datagouv-components/src/components/{ => Chart}/ChartViewer.vue (69%)
 create mode 100644 datagouv-components/src/components/Chart/ChartViewerWrapper.vue

diff --git a/datagouv-components/src/components/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
similarity index 69%
rename from datagouv-components/src/components/ChartViewer.vue
rename to datagouv-components/src/components/Chart/ChartViewer.vue
index dc30ee4f2..2a42aa2ce 100644
--- a/datagouv-components/src/components/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -13,30 +13,15 @@ import { LineChart, BarChart } from 'echarts/charts'
 import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components'
 import VChart from 'vue-echarts'
 import { computed } from 'vue'
-import type { Chart, DataSeries, XAxis, YAxis } from '../types/visualizations'
+import type { Chart, DataSeries, XAxis, YAxis } from '../../types/visualizations'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
 
 const props = defineProps<{
   chart: Chart
+  seriesData: Record<string, Array<Array<unknown>>>
 }>()
 
-const DUMMY_SOURCE = [
-  ['category', 'Série 1', 'Série 2'],
-  ['Jan', 120, 80],
-  ['Fév', 132, 95],
-  ['Mar', 101, 110],
-  ['Avr', 134, 87],
-  ['Mai', 90, 125],
-  ['Juin', 230, 145],
-  ['Juil', 210, 160],
-  ['Août', 182, 130],
-  ['Sep', 191, 140],
-  ['Oct', 234, 155],
-  ['Nov', 260, 170],
-  ['Déc', 300, 190],
-]
-
 function mapSeriesType(type: DataSeries['type']): 'line' | 'bar' {
   return type === 'histogram' ? 'bar' : 'line'
 }
@@ -55,22 +40,27 @@ function buildYAxisFormatter(yAxis?: YAxis): ((value: number) => string) | undef
 }
 
 const echartsOption = computed(() => {
-  const series = (props.chart.series ?? []).map((s, i) => ({
-    type: mapSeriesType(s.type),
-    name: s.column_x_name_override ?? `Série ${i + 1}`,
-    encode: {
-      x: 'category',
-      y: s.column_y ?? DUMMY_SOURCE[0]![i + 1],
-    },
-  }))
+  if (!props.chart.series || props.chart.series.length === 0) return
 
-  // Default to a single line series if none defined
-  if (series.length === 0) {
-    series.push({ type: 'line', name: 'Série 1', encode: { x: 'category', y: 'Série 1' } })
-  }
+  // Create series configuration with data mapping
+  const series = (props.chart.series).map((s) => {
+    return {
+      type: mapSeriesType(s.type),
+      name: s.column_x_name_override ?? props.chart.x_axis.column_x,
+      encode: {
+        x: 'category',
+        y: s.column_y,
+      },
+    }
+  })
+
+  // Use the first dataset as the primary source if available
+  const primarySource = Object.values(props.seriesData ?? {})[0]
 
   return {
-    dataset: { source: DUMMY_SOURCE },
+    dataset: {
+      source: primarySource,
+    },
     title: {
       text: props.chart.title,
       left: 'center',
diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
new file mode 100644
index 000000000..05309872f
--- /dev/null
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -0,0 +1,143 @@
+<template>
+  <LoadingBlock
+    :status="status"
+    :data="seriesData"
+  >
+    <ChartViewer
+      :chart="chartWithData"
+      :series-data="seriesData"
+    />
+    <template #error>
+      <div class="text-center py-8 text-gray-500">
+        Une erreur est survenue lors du chargement des données du graphique.
+      </div>
+    </template>
+  </LoadingBlock>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import ChartViewer from './ChartViewer.vue'
+import LoadingBlock from '../../components/LoadingBlock.vue'
+import { useComponentsConfig } from '../../config'
+import { fetchTabularData } from '../../functions/tabularApi'
+import type { Chart } from '../../types/visualizations'
+import type { TabularDataResponse } from '../../functions/tabularApi'
+
+const props = defineProps<{
+  chart: Chart
+}>()
+
+const config = useComponentsConfig()
+
+// Loading and error states
+const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
+const error = ref<Error | null>(null)
+
+// Dataset source for the chart
+const seriesData = ref<Array<{ resource_id: string, data: Array<Array<unknown>> }> | null>(null)
+
+// Fetch data for all series
+const fetchSeriesData = async () => {
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (!props.chart.series || props.chart.series.length === 0) {
+      status.value = 'success'
+      seriesData.value = null
+      return
+    }
+
+    // Fetch data for all series in parallel
+    const fetchPromises = props.chart.series.map(async (series) => {
+      if (!series.resource_id) return null
+      return await fetchTabularData(config, {
+        resourceId: series.resource_id,
+        page: 1,
+        pageSize: 100,
+      })
+    })
+
+    const results = await Promise.all(fetchPromises)
+    const validResults = results.filter(Boolean) as Array<TabularDataResponse>
+
+    // Transform data into echarts format
+    // const source = combineSeriesData(validResults)
+    seriesData.value = [
+      ...validResults.map(result => ({
+        resource_id: result.meta.resource_id || '',
+        data: transformTabularDataToSource(result),
+      })),
+    ]
+
+    status.value = 'success'
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series data')
+    status.value = 'error'
+    seriesData.value = null
+  }
+}
+
+// Watch for changes in the chart or its series
+watch(() => props.chart, async () => {
+  await fetchSeriesData()
+}, { immediate: true, deep: true })
+
+/**
+ * Transforms tabular data into a format suitable for echarts dataset source.
+ * @param data - The tabular data response from the API
+ * @returns An array suitable for echarts dataset source
+ */
+function transformTabularDataToSource(data: TabularDataResponse): Array<Array<unknown>> {
+  if (!data.data || data.data.length === 0) {
+    return []
+  }
+
+  // Get all unique column names from the data
+  const columns = Array.from(new Set(data.data.flatMap(Object.keys)))
+
+  // Build the source array with headers as the first row
+  const source: Array<Array<unknown>> = [columns]
+
+  // Add data rows
+  data.data.forEach((row) => {
+    const rowValues = columns.map(column => row[column])
+    source.push(rowValues)
+  })
+
+  return source
+}
+
+/**
+ * Combines data from multiple series into a single echarts dataset source
+ */
+// function combineSeriesData(seriesData: Array<TabularDataResponse | null>): Array<Array<unknown>> {
+//   if (!seriesData.length || seriesData.every(data => !data || !data.data || data.data.length === 0)) {
+//     return []
+//   }
+
+//   // Get all unique columns from all series
+//   const allColumns = Array.from(new Set(seriesData.flatMap(data =>
+//     data?.data?.flatMap(Object.keys) || []
+//   )))
+
+//   // Build the source array with headers
+//   const source: Array<Array<unknown>> = [allColumns]
+
+//   // Add data rows - for simplicity, we'll use data from the first series
+//   // In a real implementation, you'd want to merge/combine the data appropriately
+//   const firstData = seriesData.find(data => data?.data?.length)?.data
+//   if (firstData) {
+//     firstData.forEach(row => {
+//       const rowValues = allColumns.map(column => row[column])
+//       source.push(rowValues)
+//     })
+//   }
+
+//   return source
+// }
+
+const chartWithData = computed(() => props.chart)
+</script>
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 1881cc341..c13991595 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -6,15 +6,38 @@ export type SortConfig = {
   type: string
 } | null
 
+export type TabularDataResponse = {
+  data: Array<Record<string, unknown>>
+  meta: { total: number }
+}
+
+export type FetchTabularDataOptions = {
+  resourceId: string
+  page?: number
+  pageSize?: number
+  sort?: SortConfig
+}
+
 /**
- * Call Tabular-api to get table content
+ * Call Tabular-api to get table content with options object
  */
-export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig) {
-  let url = `${config.tabularApiUrl}/api/resources/${id}/data/?page=${page}&page_size=${config.tabularApiPageSize || 15}`
-  if (sortConfig) {
-    url = url + `&${sortConfig.column}__sort=${sortConfig.type}`
+export async function fetchTabularData(config: PluginConfig, options: FetchTabularDataOptions): Promise<TabularDataResponse> {
+  const resourceId = options.resourceId
+  const page = options.page ?? 1
+  const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
+  const sort = options.sort
+  let url = `${config.tabularApiUrl}/api/resources/${resourceId}/data/?page=${page}&page_size=${pageSize}`
+  if (sort) {
+    url += `&${sort.column}__sort=${sort.type}`
   }
-  return await ofetch(url)
+  return await ofetch<TabularDataResponse>(url)
+}
+
+/**
+ * Call Tabular-api to get table content
+ */
+export function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig) {
+  return fetchTabularData(config, { resourceId: id, page, sort: sortConfig })
 }
 
 /**
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index b24ef4d4c..89275ef51 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -24,8 +24,8 @@ export type SortDirection = 'asc' | 'desc'
 
 export type XAxis = {
   column_x: string
-  sort_x_by?: XAxisSortBy
-  sort_x_direction?: SortDirection
+  sort_x_by: XAxisSortBy
+  sort_x_direction: SortDirection
   type: XAxisType
 }
 
@@ -46,9 +46,9 @@ export type AggregateType = 'sum' | 'median'
 
 export type DataSeries = {
   type: DataSeriesType
-  column_y?: string
-  aggregate_y?: AggregateType
-  resource_id?: string
+  column_y: string
+  aggregate_y: AggregateType
+  resource_id: string
   column_x_name_override?: string
   filters?: GenericFilter
 }
@@ -57,11 +57,11 @@ export type DataSeries = {
 export type ChartForm = OwnedWithId & {
   title: string
   description: string
-  private?: boolean
-  x_axis?: XAxis
-  y_axis?: YAxis
-  series?: Array<DataSeries>
-  extras?: Record<string, unknown>
+  private: boolean
+  x_axis: XAxis
+  y_axis: YAxis
+  series: Array<DataSeries>
+  extras: Record<string, unknown>
 }
 
 // Chart read fields (API responses)
@@ -76,9 +76,9 @@ export type Chart = Owned & {
   deleted_at: string | null
   uri: string
   page: string
-  x_axis?: XAxis
-  y_axis?: YAxis
-  series?: Array<DataSeries>
+  x_axis: XAxis
+  y_axis: YAxis
+  series: Array<DataSeries>
   extras: Record<string, unknown>
   permissions: { delete: boolean, edit: boolean, read: boolean }
   metrics: {
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 27ca2df5a..7b1b46853 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="grid lg:grid-cols-2 gap-8">
+  <div class="grid lg:grid-cols-2 gap-4">
     <!-- Live preview -->
-    <div class="border border-gray-light rounded-lg p-4">
+    <div class="border border-gray-light rounded-lg p-6">
       <h3 class="text-lg font-bold mb-4">
         Aperçu
       </h3>
@@ -11,7 +11,7 @@
     </div>
 
     <!-- Form -->
-    <div class="space-y-6">
+    <div class="space-y-6 lg:pl-4">
       <h3 class="text-lg font-bold">
         Configuration
       </h3>
diff --git a/pages/design.vue b/pages/design.vue
index 76a413626..ac5d1c4ed 100644
--- a/pages/design.vue
+++ b/pages/design.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex">
+  <div class="flex flex-col md:flex-row">
     <Sidemenu
-      class="w-4/12 mx-2"
+      class="mx-2 md:w-4/12 lg:w-3/12 shrink-0"
       :button-text="$t('Menu')"
       :fixed="true"
     >
@@ -68,16 +68,21 @@
           :label="$t('Traductions')"
           to="/design/translations"
         />
+        <AdminSidebarLink
+          :icon="RiLineChartLine"
+          :label="$t('Charts')"
+          to="/design/chart"
+        />
       </ul>
     </Sidemenu>
-    <div class="w-8/12 space-y-8 px-8 bg-gray-50 pb-32">
+    <div class="w-full md:flex-1 space-y-8 px-4 md:px-8 bg-gray-50 pb-32 min-w-0">
       <NuxtPage />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { RiEyeLine, RiExternalLinkLine, RiFileSearchLine, RiIdCardLine, RiListView, RiRadioButtonLine, RiSearch2Line, RiSearchEyeLine, RiTranslate, RiUserSearchLine } from '@remixicon/vue'
+import { RiEyeLine, RiExternalLinkLine, RiFileSearchLine, RiIdCardLine, RiLineChartLine, RiListView, RiRadioButtonLine, RiSearch2Line, RiSearchEyeLine, RiTranslate, RiUserSearchLine } from '@remixicon/vue'
 import AdminSidebarLink from '~/components/AdminSidebar/AdminSidebarLink/AdminSidebarLink.vue'
 import LogoOnly from '~/components/LogoOnly.vue'
 import Sidemenu from '~/components/Sidemenu/Sidemenu.global.vue'

From 7b12dd4b8f85b87e167068859e3f295df457e187 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 18:04:51 +0200
Subject: [PATCH 006/121] feat(visualizations): load columns

---
 .../src/components/Chart/ChartViewer.vue      | 152 +++++++++++++++---
 .../components/Chart/ChartViewerWrapper.vue   | 118 +++++++-------
 .../src/functions/tabularApi.ts               |  44 ++++-
 .../src/types/visualizations.ts               |   6 +-
 design-system/ChartConfigurator.vue           |  87 ++++++----
 pages/design/chart.vue                        |   2 +-
 6 files changed, 293 insertions(+), 116 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 2a42aa2ce..fb3635c73 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -1,25 +1,30 @@
 <template>
   <VChart
-    class="chart-viewer"
+    class="w-full min-h-96"
     :option="echartsOption"
     autoresize
   />
 </template>
 
 <script setup lang="ts">
-import { use } from 'echarts/core'
+import { use, type ComposeOption } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart, BarChart } from 'echarts/charts'
+import { LineChart, BarChart, type BarSeriesOption, type LineSeriesOption } from 'echarts/charts'
 import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components'
 import VChart from 'vue-echarts'
 import { computed } from 'vue'
-import type { Chart, DataSeries, XAxis, YAxis } from '../../types/visualizations'
+import { summarize } from '../../functions/helpers'
+import { throwOnNever } from '../../functions/never'
+import type { Chart, DataSeries, XAxis, YAxis, AggregateType } from '../../types/visualizations'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
 
 const props = defineProps<{
   chart: Chart
-  seriesData: Record<string, Array<Array<unknown>>>
+  series: {
+    data: Record<string, Array<Record<string, unknown>>>
+    columns: Record<string, Array<string>>
+  }
 }>()
 
 function mapSeriesType(type: DataSeries['type']): 'line' | 'bar' {
@@ -34,32 +39,132 @@ function mapXAxisType(xAxis?: XAxis): 'category' | 'value' {
 function buildYAxisFormatter(yAxis?: YAxis): ((value: number) => string) | undefined {
   if (!yAxis?.unit) return undefined
   return (value: number) => {
-    if (yAxis.unit_position === 'prefix') return `${yAxis.unit}${value}`
-    return `${value}${yAxis.unit}`
+    const v = summarize(value)
+    if (yAxis.unit_position === 'prefix') return `${yAxis.unit} ${v}`
+    return `${v} ${yAxis.unit}`
+  }
+}
+
+/**
+ * Aggregates data based on the specified aggregate type
+ */
+function aggregateData(data: Array<Record<string, unknown>>, yColumn: string, aggregateType: AggregateType): number | null {
+  const values: number[] = []
+
+  for (const row of data) {
+    const value = row[yColumn]
+    if (typeof value === 'number') {
+      values.push(value)
+    }
+  }
+
+  if (values.length === 0) return null
+
+  switch (aggregateType) {
+    case 'sum':
+      return values.reduce((sum, val) => sum + val, 0)
+    case 'median': {
+      // Calculate median
+      const sorted = [...values].sort((a, b) => a - b)
+      const mid = Math.floor(sorted.length / 2)
+      if (sorted.length % 2 === 0) {
+        const median = (sorted[mid - 1]! + sorted[mid]!) / 2
+        return isNaN(median) ? null : median
+      }
+      else {
+        return sorted[mid]!
+      }
+    }
+    // case 'average':
+    //   const sum = values.reduce((sum, val) => sum + val, 0)
+    //   const average = sum / values.length
+    //   return isNaN(average) ? null : average
+    // case 'count':
+    //   return values.length
+    // case 'count_distinct':
+    //   // Count distinct values
+    //   const distinctValues = new Set(values)
+    //   return distinctValues.size
+    //  }
+    default:
+      return throwOnNever(aggregateType, 'Aggregate type unknown')
+  }
+}
+
+/**
+ * Transforms the dataset by applying aggregation based on aggregate_y
+ */
+function transformDatasetWithAggregation(
+  data: Record<string, Array<Record<string, unknown>>>,
+  seriesConfig: DataSeries[],
+  xColumn: string,
+) {
+  const transformedData: Array<Record<string, unknown>> = []
+
+  for (const [resourceId, resourceData] of Object.entries(data)) {
+    const resourceConfig = seriesConfig.find(s => s.resource_id === resourceId)
+    if (!resourceConfig) continue
+
+    const xLocal = resourceConfig.column_x_name_override ?? xColumn
+
+    // Group data by x-axis column
+    const groupedData: Record<string, Array<Record<string, unknown>>> = {}
+    for (const item of resourceData) {
+      const xValue = item[xLocal]?.toString() ?? 'unknown'
+      if (!groupedData[xValue]) {
+        groupedData[xValue] = []
+      }
+      groupedData[xValue].push(item)
+    }
+
+    for (const [xValue, group] of Object.entries(groupedData)) {
+      const aggregatedY = aggregateData(group, resourceConfig.column_y, resourceConfig.aggregate_y)
+      if (aggregatedY !== null) {
+        const existingRow = transformedData.find(row => row[xColumn] === xValue)
+        if (existingRow) {
+          existingRow[resourceConfig.column_y] = aggregatedY
+        }
+        else {
+          transformedData.push({
+            [xColumn]: xValue,
+            [resourceConfig.column_y]: aggregatedY,
+          })
+        }
+      }
+    }
   }
+  return transformedData
 }
 
 const echartsOption = computed(() => {
   if (!props.chart.series || props.chart.series.length === 0) return
 
+  // Apply data transformation with aggregation
+  // Better done in the API for large files
+  const transformedData = transformDatasetWithAggregation(
+    props.series.data,
+    props.chart.series,
+    props.chart.x_axis.column_x,
+  )
+
   // Create series configuration with data mapping
   const series = (props.chart.series).map((s) => {
     return {
       type: mapSeriesType(s.type),
-      name: s.column_x_name_override ?? props.chart.x_axis.column_x,
+      dimensions: props.series.columns[s.resource_id],
+      name: s.column_y,
       encode: {
-        x: 'category',
+        x: s.column_x_name_override ?? props.chart.x_axis.column_x,
         y: s.column_y,
       },
     }
   })
 
-  // Use the first dataset as the primary source if available
-  const primarySource = Object.values(props.seriesData ?? {})[0]
+  console.log(transformedData)
 
   return {
     dataset: {
-      source: primarySource,
+      source: transformedData,
     },
     title: {
       text: props.chart.title,
@@ -68,18 +173,21 @@ const echartsOption = computed(() => {
     tooltip: {
       trigger: 'axis',
     },
-    legend: {
-      bottom: 0,
-    },
+    legend: props.chart.series.length > 1
+      ? {
+          bottom: 0,
+        }
+      : undefined,
     grid: {
       top: 60,
       bottom: 40,
-      left: 60,
+      left: 20,
       right: 20,
       containLabel: true,
     },
     xAxis: {
       type: mapXAxisType(props.chart.x_axis),
+      name: props.chart.x_axis?.column_x,
     },
     yAxis: {
       type: 'value',
@@ -91,13 +199,9 @@ const echartsOption = computed(() => {
       },
     },
     series,
-  }
+  } satisfies ComposeOption<
+    | BarSeriesOption
+    | LineSeriesOption
+  >
 })
 </script>
-
-<style scoped>
-.chart-viewer {
-  width: 100%;
-  min-height: 400px;
-}
-</style>
diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 05309872f..e0975e08b 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -1,12 +1,14 @@
 <template>
   <LoadingBlock
     :status="status"
-    :data="seriesData"
+    :data="series"
   >
-    <ChartViewer
-      :chart="chartWithData"
-      :series-data="seriesData"
-    />
+    <template #default="{ data }">
+      <ChartViewer
+        :chart="chart"
+        :series="data"
+      />
+    </template>
     <template #error>
       <div class="text-center py-8 text-gray-500">
         Une erreur est survenue lors du chargement des données du graphique.
@@ -16,26 +18,34 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
-import { fetchTabularData } from '../../functions/tabularApi'
+import { fetchTabularData, useGetProfile } from '../../functions/tabularApi'
 import type { Chart } from '../../types/visualizations'
-import type { TabularDataResponse } from '../../functions/tabularApi'
 
-const props = defineProps<{
-  chart: Chart
+const chart = defineModel<Chart>({ required: true })
+
+const emit = defineEmits<{
+  columns: [columns: Record<string, Array<string>>]
 }>()
 
 const config = useComponentsConfig()
+const getProfile = useGetProfile()
 
 // Loading and error states
 const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
 const error = ref<Error | null>(null)
 
 // Dataset source for the chart
-const seriesData = ref<Array<{ resource_id: string, data: Array<Array<unknown>> }> | null>(null)
+const series = reactive<{
+  data: Record<string, Array<Record<string, unknown>>>
+  columns: Record<string, Array<string>>
+}>({
+  data: {},
+  columns: {},
+})
 
 // Fetch data for all series
 const fetchSeriesData = async () => {
@@ -43,72 +53,64 @@ const fetchSeriesData = async () => {
   error.value = null
 
   try {
-    if (!props.chart.series || props.chart.series.length === 0) {
+    if (chart.value.series.length === 0) {
       status.value = 'success'
-      seriesData.value = null
+      series.data = {}
+      series.columns = {}
       return
     }
 
     // Fetch data for all series in parallel
-    const fetchPromises = props.chart.series.map(async (series) => {
-      if (!series.resource_id) return null
-      return await fetchTabularData(config, {
-        resourceId: series.resource_id,
-        page: 1,
-        pageSize: 100,
-      })
+    const fetchPromises = chart.value.series.map(async (serie) => {
+      return {
+        id: serie.resource_id,
+        profile: await getProfile(serie.resource_id),
+        data: await fetchTabularData(config, {
+          resourceId: serie.resource_id,
+          page: 1,
+          pageSize: 100,
+        }),
+      }
     })
 
-    const results = await Promise.all(fetchPromises)
-    const validResults = results.filter(Boolean) as Array<TabularDataResponse>
-
+    const results = (await Promise.allSettled(fetchPromises))
+      .filter(r => r.status === 'fulfilled')
+      .map(r => r.value)
     // Transform data into echarts format
-    // const source = combineSeriesData(validResults)
-    seriesData.value = [
-      ...validResults.map(result => ({
-        resource_id: result.meta.resource_id || '',
-        data: transformTabularDataToSource(result),
-      })),
-    ]
-
+    series.data = Object.fromEntries(results.map(result => [
+      result.id,
+      result.data.data,
+    ]))
+    series.columns = Object.fromEntries(results.map(result => [
+      result.id,
+      result.profile.profile.header,
+    ]))
+    if (results.length > 0) {
+      const columns = Object.keys(results[0]?.data.data[0] ?? [])
+      const firstColumn = columns.filter(c => c !== '__id')[0]
+      if (!chart.value.x_axis.column_x && firstColumn) {
+        chart.value.x_axis.column_x = firstColumn
+      }
+    }
     status.value = 'success'
   }
   catch (err) {
     error.value = err instanceof Error ? err : new Error('Failed to fetch series data')
     status.value = 'error'
-    seriesData.value = null
+    console.log(err)
+    series.data = {}
+    series.columns = {}
   }
 }
 
 // Watch for changes in the chart or its series
-watch(() => props.chart, async () => {
+watch(() => chart.value.series, async () => {
   await fetchSeriesData()
 }, { immediate: true, deep: true })
 
-/**
- * Transforms tabular data into a format suitable for echarts dataset source.
- * @param data - The tabular data response from the API
- * @returns An array suitable for echarts dataset source
- */
-function transformTabularDataToSource(data: TabularDataResponse): Array<Array<unknown>> {
-  if (!data.data || data.data.length === 0) {
-    return []
-  }
-
-  // Get all unique column names from the data
-  const columns = Array.from(new Set(data.data.flatMap(Object.keys)))
-
-  // Build the source array with headers as the first row
-  const source: Array<Array<unknown>> = [columns]
-
-  // Add data rows
-  data.data.forEach((row) => {
-    const rowValues = columns.map(column => row[column])
-    source.push(rowValues)
-  })
-
-  return source
-}
+watch(() => series.columns, () => {
+  emit('columns', series.columns)
+})
 
 /**
  * Combines data from multiple series into a single echarts dataset source
@@ -138,6 +140,4 @@ function transformTabularDataToSource(data: TabularDataResponse): Array<Array<un
 
 //   return source
 // }
-
-const chartWithData = computed(() => props.chart)
 </script>
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index c13991595..c448ecd0d 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -18,6 +18,48 @@ export type FetchTabularDataOptions = {
   sort?: SortConfig
 }
 
+export type TabularProfileResponse = {
+  profile: {
+    header: Array<string>
+    columns: Record<string, {
+      score: number
+      format: string
+      python_type: string
+    }>
+    formats: Record<string, Array<string>>
+    profile: Record<string, {
+      tops: Array<{ count: number, value: string }>
+      nb_distinct: number
+      nb_missing_values: number
+      min?: number
+      max?: number
+      std?: number
+      mean?: number
+    }>
+    encoding: string
+    separator: string
+    categorical: Array<string>
+    total_lines: number
+    nb_duplicates: number
+    columns_fields: Record<string, {
+      score: number
+      format: string
+      python_type: string
+    }>
+    columns_labels: Record<string, {
+      score: number
+      format: string
+      python_type: string
+    }>
+    header_row_idx: number
+    heading_columns: number
+    trailing_columns: number
+  }
+  deleted_at: string | null
+  dataset_id: string
+  indexes: null
+}
+
 /**
  * Call Tabular-api to get table content with options object
  */
@@ -45,5 +87,5 @@ export function getData(config: PluginConfig, id: string, page: number, sortConf
  */
 export function useGetProfile() {
   const config = useComponentsConfig()
-  return (id: string) => ofetch(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
+  return (id: string) => ofetch<TabularProfileResponse>(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
 }
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index 89275ef51..8585ffe8f 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -58,9 +58,9 @@ export type ChartForm = OwnedWithId & {
   title: string
   description: string
   private: boolean
-  x_axis: XAxis
-  y_axis: YAxis
-  series: Array<DataSeries>
+  x_axis: Partial<XAxis>
+  y_axis: Partial<YAxis>
+  series: Array<Partial<DataSeries>>
   extras: Record<string, unknown>
 }
 
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 7b1b46853..525becbe4 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -1,17 +1,20 @@
 <template>
-  <div class="grid lg:grid-cols-2 gap-4">
+  <div class="grid lg:grid-cols-12 gap-4">
     <!-- Live preview -->
-    <div class="border border-gray-light rounded-lg p-6">
+    <div class="col-span-7 border border-gray-light rounded-lg p-6">
       <h3 class="text-lg font-bold mb-4">
         Aperçu
       </h3>
       <ClientOnly>
-        <ChartViewer :chart="chartPreview" />
+        <ChartViewerWrapper
+          v-model="chartPreview"
+          @columns="columns = $event"
+        />
       </ClientOnly>
     </div>
 
     <!-- Form -->
-    <div class="space-y-6 lg:pl-4">
+    <div class="col-span-5 space-y-6 lg:pl-4">
       <h3 class="text-lg font-bold">
         Configuration
       </h3>
@@ -26,7 +29,7 @@
           id="chart-title"
           v-model="form.title"
           type="text"
-          class="w-full border border-gray-light rounded px-3 py-2"
+          class="w-full fr-input"
         >
       </div>
 
@@ -39,7 +42,7 @@
         <textarea
           id="chart-description"
           v-model="form.description"
-          class="w-full border border-gray-light rounded px-3 py-2"
+          class="w-full fr-input"
           rows="2"
         />
       </div>
@@ -49,7 +52,26 @@
         <legend class="text-sm font-bold px-2">
           Axe X
         </legend>
-        <div>
+        <div class="fr-fieldset__element">
+          <label
+            for="x-axis-column"
+            class="block text-sm font-medium mb-1"
+          >Column</label>
+          <select
+            id="x-axis-column"
+            v-model="form.xAxisColumn"
+            class="w-full fr-select"
+          >
+            <option
+              v-for="column in flattenedColumns"
+              :key="column"
+              :value="column"
+            >
+              {{ column }}
+            </option>
+          </select>
+        </div>
+        <div class="fr-fieldset__element">
           <label
             for="x-axis-type"
             class="block text-sm font-medium mb-1"
@@ -57,7 +79,7 @@
           <select
             id="x-axis-type"
             v-model="form.xAxisType"
-            class="w-full border border-gray-light rounded px-3 py-2"
+            class="w-full fr-select"
           >
             <option value="discrete">
               Discret (catégories)
@@ -67,7 +89,7 @@
             </option>
           </select>
         </div>
-        <div>
+        <div class="fr-fieldset__element">
           <label
             for="x-axis-sort-by"
             class="block text-sm font-medium mb-1"
@@ -75,7 +97,7 @@
           <select
             id="x-axis-sort-by"
             v-model="form.xAxisSortBy"
-            class="w-full border border-gray-light rounded px-3 py-2"
+            class="w-full fr-select"
           >
             <option value="">
               Aucun
@@ -88,7 +110,7 @@
             </option>
           </select>
         </div>
-        <div>
+        <div class="fr-fieldset__element">
           <label
             for="x-axis-sort-direction"
             class="block text-sm font-medium mb-1"
@@ -96,7 +118,7 @@
           <select
             id="x-axis-sort-direction"
             v-model="form.xAxisSortDirection"
-            class="w-full border border-gray-light rounded px-3 py-2"
+            class="w-full fr-select"
           >
             <option value="asc">
               Ascendant
@@ -122,7 +144,7 @@
             id="y-axis-label"
             v-model="form.yAxisLabel"
             type="text"
-            class="w-full border border-gray-light rounded px-3 py-2"
+            class="w-full fr-input"
           >
         </div>
         <div class="grid grid-cols-2 gap-4">
@@ -135,7 +157,7 @@
               id="y-axis-min"
               v-model.number="form.yAxisMin"
               type="number"
-              class="w-full border border-gray-light rounded px-3 py-2"
+              class="w-full fr-input"
             >
           </div>
           <div>
@@ -147,7 +169,7 @@
               id="y-axis-max"
               v-model.number="form.yAxisMax"
               type="number"
-              class="w-full border border-gray-light rounded px-3 py-2"
+              class="w-full fr-input"
             >
           </div>
         </div>
@@ -161,7 +183,7 @@
               id="y-axis-unit"
               v-model="form.yAxisUnit"
               type="text"
-              class="w-full border border-gray-light rounded px-3 py-2"
+              class="w-full fr-input"
               placeholder="ex: €, %, kg"
             >
           </div>
@@ -173,7 +195,7 @@
             <select
               id="y-axis-unit-position"
               v-model="form.yAxisUnitPosition"
-              class="w-full border border-gray-light rounded px-3 py-2"
+              class="w-full fr-input"
             >
               <option value="suffix">
                 Suffixe
@@ -199,7 +221,7 @@
           <span class="text-sm text-gray-medium">{{ index + 1 }}.</span>
           <select
             v-model="serie.type"
-            class="flex-1 border border-gray-light rounded px-3 py-2"
+            class="flex-1 fr-select"
           >
             <option value="line">
               Ligne
@@ -217,7 +239,7 @@
         </div>
         <button
           class="text-sm text-datagouv underline"
-          @click="form.series.push({ type: 'line' })"
+          @click="form.series.push(dummySerie)"
         >
           + Ajouter une série
         </button>
@@ -227,14 +249,24 @@
 </template>
 
 <script setup lang="ts">
-import type { Chart, DataSeriesType, XAxisType, XAxisSortBy, SortDirection, UnitPosition } from '@datagouv/components-next'
+import type { Chart, XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive } from 'vue'
 
-const ChartViewer = defineAsyncComponent(() => import('../datagouv-components/src/components/ChartViewer.vue'))
+const ChartViewerWrapper = defineAsyncComponent(() => import('../datagouv-components/src/components/Chart/ChartViewerWrapper.vue'))
+const columns = ref<Record<string, Array<string>>>({})
+const flattenedColumns = computed(() => Object.values(columns.value).flat())
+
+const dummySerie: DataSeries = {
+  type: 'histogram',
+  column_y: 'Nombre de logements',
+  aggregate_y: 'sum',
+  resource_id: '14dba482-41e3-4c54-b82a-d8c11d1d80eb',
+}
 
 const form = reactive<{
   title: string
   description: string
+  xAxisColumn: string
   xAxisType: XAxisType
   xAxisSortBy: XAxisSortBy | ''
   xAxisSortDirection: SortDirection
@@ -243,10 +275,11 @@ const form = reactive<{
   yAxisMax: number | undefined
   yAxisUnit: string
   yAxisUnitPosition: UnitPosition
-  series: Array<{ type: DataSeriesType }>
+  series: Array<DataSeries>
 }>({
   title: 'Mon graphique',
   description: '',
+  xAxisColumn: 'nom_region',
   xAxisType: 'discrete',
   xAxisSortBy: '',
   xAxisSortDirection: 'asc',
@@ -255,7 +288,7 @@ const form = reactive<{
   yAxisMax: undefined,
   yAxisUnit: '',
   yAxisUnitPosition: 'suffix',
-  series: [{ type: 'line' }, { type: 'histogram' }],
+  series: [dummySerie],
 })
 
 const chartPreview = computed<Chart>(() => ({
@@ -272,7 +305,7 @@ const chartPreview = computed<Chart>(() => ({
   uri: '',
   page: '',
   x_axis: {
-    column_x: 'category',
+    column_x: form.xAxisColumn,
     type: form.xAxisType,
     ...(form.xAxisSortBy ? { sort_x_by: form.xAxisSortBy, sort_x_direction: form.xAxisSortDirection } : {}),
   },
@@ -283,11 +316,9 @@ const chartPreview = computed<Chart>(() => ({
     unit: form.yAxisUnit || undefined,
     unit_position: form.yAxisUnitPosition,
   },
-  series: form.series.map(s => ({
-    type: s.type,
-  })),
+  series: form.series,
   extras: {},
   permissions: { delete: false, edit: true, read: true },
   metrics: { views: 0 },
-}))
+} satisfies Chart))
 </script>
diff --git a/pages/design/chart.vue b/pages/design/chart.vue
index 5a6a967a6..c7eea00b9 100644
--- a/pages/design/chart.vue
+++ b/pages/design/chart.vue
@@ -8,7 +8,7 @@
         {{ $t('Chart') }}
       </BreadcrumbItem>
     </Breadcrumb>
-    <h1 class="!mb-3">
+    <h1 class="mb-3">
       Chart Configurator
     </h1>
 

From b15822eb4e9bc647faee1dba79721509816281cc Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 24 Feb 2026 12:11:30 +0100
Subject: [PATCH 007/121] fix(datasets): fix card description

---
 components/dataset/card-lg.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dataset/card-lg.vue b/components/dataset/card-lg.vue
index 4f420321a..71f6f2556 100644
--- a/components/dataset/card-lg.vue
+++ b/components/dataset/card-lg.vue
@@ -2,7 +2,7 @@
   <DatasetCard
     :dataset
     :style
-    :show-description
+    :show-description-short="showDescription"
     :dataset-url="dataset.page"
     :organization-url="dataset.organization?.page"
   />

From 69585f09f42f6dd9fabd4ba5ec78af3e84abc119 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 24 Feb 2026 12:12:24 +0100
Subject: [PATCH 008/121] feat(visualizations): search resources

---
 design-system/ChartConfigurator.vue | 115 +++++++++++++++++++++++-----
 1 file changed, 95 insertions(+), 20 deletions(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 525becbe4..51603e35b 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -1,24 +1,7 @@
 <template>
   <div class="grid lg:grid-cols-12 gap-4">
     <!-- Live preview -->
-    <div class="col-span-7 border border-gray-light rounded-lg p-6">
-      <h3 class="text-lg font-bold mb-4">
-        Aperçu
-      </h3>
-      <ClientOnly>
-        <ChartViewerWrapper
-          v-model="chartPreview"
-          @columns="columns = $event"
-        />
-      </ClientOnly>
-    </div>
-
-    <!-- Form -->
-    <div class="col-span-5 space-y-6 lg:pl-4">
-      <h3 class="text-lg font-bold">
-        Configuration
-      </h3>
-
+    <div class="col-span-7 space-y-4">
       <!-- Title -->
       <div>
         <label
@@ -46,7 +29,66 @@
           rows="2"
         />
       </div>
+      <div class="border border-gray-light rounded-lg p-6">
+        <h3 class="text-lg font-bold mb-4">
+          Aperçu
+        </h3>
+        <ClientOnly>
+          <ChartViewerWrapper
+            v-model="chartPreview"
+            @columns="columns = $event"
+          />
+        </ClientOnly>
+      </div>
+    </div>
 
+    <!-- Form -->
+    <div class="col-span-5 space-y-6 lg:pl-4">
+      <h3 class="text-lg font-bold">
+        Configuration
+      </h3>
+      <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
+        <legend class="text-sm font-bold px-2">
+          Ressources
+        </legend>
+        <SearchableSelect
+          v-model="dataset"
+          :label="$t('Jeu de données')"
+          :placeholder="$t('Recherchez un jeu de données...')"
+          :display-value="(option: DatasetSuggest) => option.title"
+          :get-option-id="(option: DatasetSuggest) => option.id"
+          :multiple="false"
+          :suggest="suggestDataset"
+          class="mb-4"
+        />
+        <!-- Resources select -->
+        <div class="fr-fieldset__element">
+          <label
+            for="resource-select"
+            class="block text-sm font-medium mb-1"
+          >Choix de la ressource</label>
+          <select
+            id="resource-select"
+            v-model="selectedResource"
+            class="w-full fr-select"
+            :disabled="!dataset"
+          >
+            <option
+              value=""
+              disabled
+            >
+              {{ dataset ? 'Sélectionnez une ressource' : 'Sélectionnez d\'abord un jeu de données' }}
+            </option>
+            <option
+              v-for="resource in resources"
+              :key="resource.id"
+              :value="resource.id"
+            >
+              {{ resource.title }}
+            </option>
+          </select>
+        </div>
+      </fieldset>
       <!-- X Axis -->
       <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
         <legend class="text-sm font-bold px-2">
@@ -249,13 +291,46 @@
 </template>
 
 <script setup lang="ts">
-import type { Chart, XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries } from '@datagouv/components-next'
-import { computed, defineAsyncComponent, reactive } from 'vue'
+import type { Chart, XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray } from '@datagouv/components-next'
+import { SearchableSelect } from '@datagouv/components-next'
+import { computed, defineAsyncComponent, reactive, watch, ref } from 'vue'
+import type { DatasetSuggest } from '~/types/types'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('../datagouv-components/src/components/Chart/ChartViewerWrapper.vue'))
 const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.values(columns.value).flat())
 
+const dataset = ref<DatasetSuggest>()
+const resources = ref<Array<Resource>>([])
+const selectedResource = ref('')
+
+const { $api } = useNuxtApp()
+
+const suggestDataset = async (q: string): Promise<Array<DatasetSuggest>> => {
+  return await $api<Array<DatasetSuggest>>('/api/1/datasets/suggest/', {
+    query: {
+      q,
+      size: 5,
+    },
+  })
+}
+
+watch(dataset, async (newDataset) => {
+  if (newDataset) {
+    try {
+      const fetchedResources = await $api<PaginatedArray<Resource>>(`/api/2/datasets/${newDataset.id}/resources/`)
+      resources.value = fetchedResources.data
+    }
+    catch (error) {
+      console.error('Failed to fetch resources:', error)
+      resources.value = []
+    }
+  }
+  else {
+    resources.value = []
+  }
+}, { immediate: false })
+
 const dummySerie: DataSeries = {
   type: 'histogram',
   column_y: 'Nombre de logements',

From b969f76017a03b70496ab6186e38efc9856e7feb Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 24 Feb 2026 13:19:19 +0100
Subject: [PATCH 009/121] feat: add hasTabularData

---
 design-system/ChartConfigurator.vue | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 51603e35b..baf820af9 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -291,11 +291,13 @@
 </template>
 
 <script setup lang="ts">
-import type { Chart, XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray } from '@datagouv/components-next'
-import { SearchableSelect } from '@datagouv/components-next'
+import type { XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray, ChartForm } from '@datagouv/components-next'
+import { SearchableSelect, useHasTabularData } from '@datagouv/components-next'
+
 import { computed, defineAsyncComponent, reactive, watch, ref } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 
+const { hasTabularData } = useHasTabularData()
 const ChartViewerWrapper = defineAsyncComponent(() => import('../datagouv-components/src/components/Chart/ChartViewerWrapper.vue'))
 const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.values(columns.value).flat())
@@ -319,7 +321,7 @@ watch(dataset, async (newDataset) => {
   if (newDataset) {
     try {
       const fetchedResources = await $api<PaginatedArray<Resource>>(`/api/2/datasets/${newDataset.id}/resources/`)
-      resources.value = fetchedResources.data
+      resources.value = fetchedResources.data.filter(resource => hasTabularData(resource))
     }
     catch (error) {
       console.error('Failed to fetch resources:', error)
@@ -366,19 +368,14 @@ const form = reactive<{
   series: [dummySerie],
 })
 
-const chartPreview = computed<Chart>(() => ({
-  id: 'preview',
+const user = useMaybeMe()
+
+const chartPreview = computed<ChartForm>(() => ({
+  organization: null,
+  owner: user.value ? user.value.id : 'dummyForDS',
   title: form.title,
-  slug: 'preview',
   description: form.description,
   private: false,
-  organization: null,
-  owner: { class: 'User', id: 'preview', first_name: 'Preview', last_name: 'User', slug: 'preview', uri: '', page: '', avatar: '', avatar_thumbnail: '' },
-  created_at: new Date().toISOString(),
-  last_modified: new Date().toISOString(),
-  deleted_at: null,
-  uri: '',
-  page: '',
   x_axis: {
     column_x: form.xAxisColumn,
     type: form.xAxisType,
@@ -393,7 +390,5 @@ const chartPreview = computed<Chart>(() => ({
   },
   series: form.series,
   extras: {},
-  permissions: { delete: false, edit: true, read: true },
-  metrics: { views: 0 },
-} satisfies Chart))
+} satisfies ChartForm))
 </script>

From ad1ff90b6efe7d2f4381c09168293f13286f62ac Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 24 Feb 2026 16:56:27 +0100
Subject: [PATCH 010/121] refac: composable changes

---
 components/Datasets/FileEditModal.vue         |  2 +-
 .../ResourceAccordion/ResourceAccordion.vue   |  2 +-
 .../src/composables/useHasTabularData.ts      | 21 ++++++++++---------
 .../composables/useResourceCapabilities.ts    |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/Datasets/FileEditModal.vue b/components/Datasets/FileEditModal.vue
index d10963631..4167068eb 100644
--- a/components/Datasets/FileEditModal.vue
+++ b/components/Datasets/FileEditModal.vue
@@ -229,7 +229,7 @@ const open = ref(false)
 const hasFileChanged = ref(false)
 
 // Use the composable for tabular data detection
-const { hasTabularData } = useHasTabularData()
+const hasTabularData = useHasTabularData()
 
 // Check if resource has tabular API
 const hasTabularApi = computed(() => {
diff --git a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
index 06d076fd5..d28f7e21b 100644
--- a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
+++ b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
@@ -426,7 +426,7 @@ const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue
 
 const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
-const { hasTabularData: checkTabularData } = useHasTabularData()
+const checkTabularData = useHasTabularData()
 
 const hasPreview = computed(() => {
   // For JSON, PDF, and XML files, show preview.
diff --git a/datagouv-components/src/composables/useHasTabularData.ts b/datagouv-components/src/composables/useHasTabularData.ts
index 107a720ac..57dc1aed6 100644
--- a/datagouv-components/src/composables/useHasTabularData.ts
+++ b/datagouv-components/src/composables/useHasTabularData.ts
@@ -1,22 +1,23 @@
 import { useComponentsConfig } from '../config'
+import type { Resource } from '../types/resources'
 
 /**
  * Composable to determine if a resource has tabular data.
  * This is used to show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure).
  *
- * @returns An object containing the hasTabularData function.
+ * @returns A function to check if a resource has tabular data.
  */
 export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
-  return {
-    hasTabularData: (resource: { extras: Record<string, unknown>, filetype?: string }) => {
-      return (
-        config.tabularApiUrl
-        && resource.extras['analysis:parsing:parsing_table']
-        && !resource.extras['analysis:parsing:error']
-        && (config.tabularAllowRemote || resource.filetype === 'file')
-      )
-    },
+  const hasTabularData = (resource: Resource) => {
+    return (
+      config.tabularApiUrl
+      && resource.extras['analysis:parsing:parsing_table']
+      && !resource.extras['analysis:parsing:error']
+      && (config.tabularAllowRemote || resource.filetype === 'file')
+    )
   }
+
+  return hasTabularData
 }
diff --git a/datagouv-components/src/composables/useResourceCapabilities.ts b/datagouv-components/src/composables/useResourceCapabilities.ts
index ce911b3b0..052e62694 100644
--- a/datagouv-components/src/composables/useResourceCapabilities.ts
+++ b/datagouv-components/src/composables/useResourceCapabilities.ts
@@ -17,7 +17,7 @@ export function useResourceCapabilities(
 ) {
   const config = useComponentsConfig()
   const { t } = useTranslation()
-  const { hasTabularData: checkTabularData } = useHasTabularData()
+  const checkTabularData = useHasTabularData()
 
   const hasPreview = computed(() => {
     const format = toValue(resource).format?.toLowerCase()

From 062284fa8f46af82064551329f8dd65be22e5bf9 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 24 Feb 2026 16:56:50 +0100
Subject: [PATCH 011/121] feat: select resource and show series

---
 .../src/components/Chart/ChartViewer.vue      |   6 +-
 .../components/Chart/ChartViewerWrapper.vue   |   4 +-
 design-system/ChartConfigurator.vue           | 202 +++++++++++-------
 3 files changed, 128 insertions(+), 84 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index fb3635c73..a1919cb8f 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -15,12 +15,12 @@ import VChart from 'vue-echarts'
 import { computed } from 'vue'
 import { summarize } from '../../functions/helpers'
 import { throwOnNever } from '../../functions/never'
-import type { Chart, DataSeries, XAxis, YAxis, AggregateType } from '../../types/visualizations'
+import type { Chart, DataSeries, XAxis, YAxis, AggregateType, ChartForm } from '../../types/visualizations'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
 
 const props = defineProps<{
-  chart: Chart
+  chart: Chart | ChartForm
   series: {
     data: Record<string, Array<Record<string, unknown>>>
     columns: Record<string, Array<string>>
@@ -160,8 +160,6 @@ const echartsOption = computed(() => {
     }
   })
 
-  console.log(transformedData)
-
   return {
     dataset: {
       source: transformedData,
diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index e0975e08b..e2ea442fc 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -23,9 +23,9 @@ import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
 import { fetchTabularData, useGetProfile } from '../../functions/tabularApi'
-import type { Chart } from '../../types/visualizations'
+import type { Chart, ChartForm } from '../../types/visualizations'
 
-const chart = defineModel<Chart>({ required: true })
+const chart = defineModel<Chart | ChartForm>({ required: true })
 
 const emit = defineEmits<{
   columns: [columns: Record<string, Array<string>>]
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index baf820af9..b4942437d 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="grid lg:grid-cols-12 gap-4">
     <!-- Live preview -->
-    <div class="col-span-7 space-y-4">
+    <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
       <!-- Title -->
       <div>
         <label
@@ -29,10 +29,7 @@
           rows="2"
         />
       </div>
-      <div class="border border-gray-light rounded-lg p-6">
-        <h3 class="text-lg font-bold mb-4">
-          Aperçu
-        </h3>
+      <div class="mt-4">
         <ClientOnly>
           <ChartViewerWrapper
             v-model="chartPreview"
@@ -43,14 +40,11 @@
     </div>
 
     <!-- Form -->
-    <div class="col-span-5 space-y-6 lg:pl-4">
-      <h3 class="text-lg font-bold">
-        Configuration
-      </h3>
-      <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
-        <legend class="text-sm font-bold px-2">
+    <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
+      <fieldset class="px-6 space-y-4">
+        <p class="mb-2 font-bold">
           Ressources
-        </legend>
+        </p>
         <SearchableSelect
           v-model="dataset"
           :label="$t('Jeu de données')"
@@ -62,42 +56,40 @@
           class="mb-4"
         />
         <!-- Resources select -->
-        <div class="fr-fieldset__element">
-          <label
-            for="resource-select"
-            class="block text-sm font-medium mb-1"
-          >Choix de la ressource</label>
-          <select
-            id="resource-select"
-            v-model="selectedResource"
-            class="w-full fr-select"
-            :disabled="!dataset"
+        <label
+          for="resource-select"
+          class="mb-1"
+        >Choix de la ressource</label>
+        <select
+          id="resource-select"
+          v-model="selectedResource"
+          class="w-full fr-select"
+          :disabled="!dataset"
+        >
+          <option
+            value=""
+            disabled
           >
-            <option
-              value=""
-              disabled
-            >
-              {{ dataset ? 'Sélectionnez une ressource' : 'Sélectionnez d\'abord un jeu de données' }}
-            </option>
-            <option
-              v-for="resource in resources"
-              :key="resource.id"
-              :value="resource.id"
-            >
-              {{ resource.title }}
-            </option>
-          </select>
-        </div>
+            {{ dataset ? 'Sélectionnez une ressource' : 'Sélectionnez d\'abord un jeu de données' }}
+          </option>
+          <option
+            v-for="resource in resources"
+            :key="resource.id"
+            :value="resource.id"
+          >
+            {{ resource.title }}
+          </option>
+        </select>
       </fieldset>
       <!-- X Axis -->
-      <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
-        <legend class="text-sm font-bold px-2">
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
           Axe X
-        </legend>
-        <div class="fr-fieldset__element">
+        </p>
+        <div>
           <label
             for="x-axis-column"
-            class="block text-sm font-medium mb-1"
+            class="mb-1"
           >Column</label>
           <select
             id="x-axis-column"
@@ -113,10 +105,10 @@
             </option>
           </select>
         </div>
-        <div class="fr-fieldset__element">
+        <div>
           <label
             for="x-axis-type"
-            class="block text-sm font-medium mb-1"
+            class="mb-1"
           >Type</label>
           <select
             id="x-axis-type"
@@ -131,10 +123,10 @@
             </option>
           </select>
         </div>
-        <div class="fr-fieldset__element">
+        <div>
           <label
             for="x-axis-sort-by"
-            class="block text-sm font-medium mb-1"
+            class="mb-1"
           >Trier par</label>
           <select
             id="x-axis-sort-by"
@@ -152,10 +144,10 @@
             </option>
           </select>
         </div>
-        <div class="fr-fieldset__element">
+        <div>
           <label
             for="x-axis-sort-direction"
-            class="block text-sm font-medium mb-1"
+            class="mb-1"
           >Direction du tri</label>
           <select
             id="x-axis-sort-direction"
@@ -173,14 +165,14 @@
       </fieldset>
 
       <!-- Y Axis -->
-      <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
-        <legend class="text-sm font-bold px-2">
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
           Axe Y
-        </legend>
+        </p>
         <div>
           <label
             for="y-axis-label"
-            class="block text-sm font-medium mb-1"
+            class="mb-1"
           >Label</label>
           <input
             id="y-axis-label"
@@ -251,33 +243,82 @@
       </fieldset>
 
       <!-- Series -->
-      <fieldset class="border border-gray-light rounded-lg p-4 space-y-4">
-        <legend class="text-sm font-bold px-2">
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
           Séries
-        </legend>
+        </p>
         <div
           v-for="(serie, index) in form.series"
           :key="index"
-          class="flex items-center gap-4"
+          class="border rounded-lg p-4 mb-2 space-y-4"
         >
-          <span class="text-sm text-gray-medium">{{ index + 1 }}.</span>
-          <select
-            v-model="serie.type"
-            class="flex-1 fr-select"
-          >
-            <option value="line">
-              Ligne
-            </option>
-            <option value="histogram">
-              Histogramme
-            </option>
-          </select>
-          <button
-            class="text-danger-dark text-sm"
-            @click="form.series.splice(index, 1)"
-          >
-            Supprimer
-          </button>
+          <div class="flex items-center gap-2 mb-2">
+            <select
+              v-model="serie.type"
+              class="flex-1 fr-select"
+            >
+              <option value="line">
+                Ligne
+              </option>
+              <option value="histogram">
+                Histogramme
+              </option>
+            </select>
+            <button
+              title="Supprimer la série"
+              class="text-new-error rounded-full p-2 border border-new-error"
+              @click="form.series.splice(index, 1)"
+            >
+              <RiDeleteBinLine class="size-4" />
+            </button>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium mb-1">Ressource</label>
+            <select
+              v-model="serie.resource_id"
+              class="w-full fr-select"
+            >
+              <option
+                v-for="resource in resources"
+                :key="resource.id"
+                :value="resource.id"
+              >
+                {{ resource.title }}
+              </option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium mb-1">Colonne Y</label>
+            <select
+              v-model="serie.column_y"
+              class="w-full fr-select"
+            >
+              <option
+                v-for="column in flattenedColumns"
+                :key="column"
+                :value="column"
+              >
+                {{ column }}
+              </option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium mb-1">Agrégation</label>
+            <select
+              v-model="serie.aggregate_y"
+              class="w-full fr-select"
+            >
+              <option value="sum">
+                Somme
+              </option>
+              <option value="median">
+                Médianne
+              </option>
+            </select>
+          </div>
         </div>
         <button
           class="text-sm text-datagouv underline"
@@ -293,23 +334,25 @@
 <script setup lang="ts">
 import type { XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray, ChartForm } from '@datagouv/components-next'
 import { SearchableSelect, useHasTabularData } from '@datagouv/components-next'
+import { RiDeleteBinLine } from '@remixicon/vue'
 
 import { computed, defineAsyncComponent, reactive, watch, ref } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 
-const { hasTabularData } = useHasTabularData()
+const hasTabularData = useHasTabularData()
 const ChartViewerWrapper = defineAsyncComponent(() => import('../datagouv-components/src/components/Chart/ChartViewerWrapper.vue'))
 const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.values(columns.value).flat())
 
 const dataset = ref<DatasetSuggest>()
 const resources = ref<Array<Resource>>([])
+const savedResources = reactive<Record<string, Resource>>({})
 const selectedResource = ref('')
 
 const { $api } = useNuxtApp()
 
 const suggestDataset = async (q: string): Promise<Array<DatasetSuggest>> => {
-  return await $api<Array<DatasetSuggest>>('/api/1/datasets/suggest/', {
+  return await $api<Array<DatasetSuggest>>('https://www.data.gouv.fr/api/1/datasets/suggest/', {
     query: {
       q,
       size: 5,
@@ -320,8 +363,11 @@ const suggestDataset = async (q: string): Promise<Array<DatasetSuggest>> => {
 watch(dataset, async (newDataset) => {
   if (newDataset) {
     try {
-      const fetchedResources = await $api<PaginatedArray<Resource>>(`/api/2/datasets/${newDataset.id}/resources/`)
+      const fetchedResources = await $api<PaginatedArray<Resource>>(`https://www.data.gouv.fr/api/2/datasets/${newDataset.id}/resources/`)
       resources.value = fetchedResources.data.filter(resource => hasTabularData(resource))
+      for (const r of resources.value) {
+        savedResources[r.id] = r
+      }
     }
     catch (error) {
       console.error('Failed to fetch resources:', error)
@@ -331,7 +377,7 @@ watch(dataset, async (newDataset) => {
   else {
     resources.value = []
   }
-}, { immediate: false })
+})
 
 const dummySerie: DataSeries = {
   type: 'histogram',

From 1f1c2433987a8904ef665fa84d60899f4024b0f6 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 26 Feb 2026 10:41:02 +0100
Subject: [PATCH 012/121] feat(visualizations): use tabular aggregate

---
 .../src/components/Chart/ChartViewer.vue      | 129 +++---------------
 .../components/Chart/ChartViewerWrapper.vue   |   7 +-
 .../src/functions/tabularApi.ts               |  19 ++-
 datagouv-components/src/main.ts               |   1 +
 design-system/ChartConfigurator.vue           |  57 +++++---
 5 files changed, 76 insertions(+), 137 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index a1919cb8f..2cb5ef45d 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -14,8 +14,7 @@ import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, Datas
 import VChart from 'vue-echarts'
 import { computed } from 'vue'
 import { summarize } from '../../functions/helpers'
-import { throwOnNever } from '../../functions/never'
-import type { Chart, DataSeries, XAxis, YAxis, AggregateType, ChartForm } from '../../types/visualizations'
+import type { Chart, DataSeries, XAxis, YAxis, ChartForm } from '../../types/visualizations'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
 
@@ -45,125 +44,28 @@ function buildYAxisFormatter(yAxis?: YAxis): ((value: number) => string) | undef
   }
 }
 
-/**
- * Aggregates data based on the specified aggregate type
- */
-function aggregateData(data: Array<Record<string, unknown>>, yColumn: string, aggregateType: AggregateType): number | null {
-  const values: number[] = []
-
-  for (const row of data) {
-    const value = row[yColumn]
-    if (typeof value === 'number') {
-      values.push(value)
-    }
-  }
-
-  if (values.length === 0) return null
-
-  switch (aggregateType) {
-    case 'sum':
-      return values.reduce((sum, val) => sum + val, 0)
-    case 'median': {
-      // Calculate median
-      const sorted = [...values].sort((a, b) => a - b)
-      const mid = Math.floor(sorted.length / 2)
-      if (sorted.length % 2 === 0) {
-        const median = (sorted[mid - 1]! + sorted[mid]!) / 2
-        return isNaN(median) ? null : median
-      }
-      else {
-        return sorted[mid]!
-      }
-    }
-    // case 'average':
-    //   const sum = values.reduce((sum, val) => sum + val, 0)
-    //   const average = sum / values.length
-    //   return isNaN(average) ? null : average
-    // case 'count':
-    //   return values.length
-    // case 'count_distinct':
-    //   // Count distinct values
-    //   const distinctValues = new Set(values)
-    //   return distinctValues.size
-    //  }
-    default:
-      return throwOnNever(aggregateType, 'Aggregate type unknown')
-  }
-}
-
-/**
- * Transforms the dataset by applying aggregation based on aggregate_y
- */
-function transformDatasetWithAggregation(
-  data: Record<string, Array<Record<string, unknown>>>,
-  seriesConfig: DataSeries[],
-  xColumn: string,
-) {
-  const transformedData: Array<Record<string, unknown>> = []
-
-  for (const [resourceId, resourceData] of Object.entries(data)) {
-    const resourceConfig = seriesConfig.find(s => s.resource_id === resourceId)
-    if (!resourceConfig) continue
-
-    const xLocal = resourceConfig.column_x_name_override ?? xColumn
-
-    // Group data by x-axis column
-    const groupedData: Record<string, Array<Record<string, unknown>>> = {}
-    for (const item of resourceData) {
-      const xValue = item[xLocal]?.toString() ?? 'unknown'
-      if (!groupedData[xValue]) {
-        groupedData[xValue] = []
-      }
-      groupedData[xValue].push(item)
-    }
-
-    for (const [xValue, group] of Object.entries(groupedData)) {
-      const aggregatedY = aggregateData(group, resourceConfig.column_y, resourceConfig.aggregate_y)
-      if (aggregatedY !== null) {
-        const existingRow = transformedData.find(row => row[xColumn] === xValue)
-        if (existingRow) {
-          existingRow[resourceConfig.column_y] = aggregatedY
-        }
-        else {
-          transformedData.push({
-            [xColumn]: xValue,
-            [resourceConfig.column_y]: aggregatedY,
-          })
-        }
-      }
-    }
-  }
-  return transformedData
-}
-
 const echartsOption = computed(() => {
   if (!props.chart.series || props.chart.series.length === 0) return
 
-  // Apply data transformation with aggregation
-  // Better done in the API for large files
-  const transformedData = transformDatasetWithAggregation(
-    props.series.data,
-    props.chart.series,
-    props.chart.x_axis.column_x,
-  )
-
   // Create series configuration with data mapping
   const series = (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
     return {
       type: mapSeriesType(s.type),
-      dimensions: props.series.columns[s.resource_id],
+      dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[s.resource_id],
       name: s.column_y,
       encode: {
-        x: s.column_x_name_override ?? props.chart.x_axis.column_x,
-        y: s.column_y,
+        x: xColumn,
+        y: yColumn,
       },
     }
   })
-
+  const sources = Object.values(props.series.data).map(data => ({
+    source: data,
+  }))
   return {
-    dataset: {
-      source: transformedData,
-    },
+    dataset: sources,
     title: {
       text: props.chart.title,
       left: 'center',
@@ -171,11 +73,9 @@ const echartsOption = computed(() => {
     tooltip: {
       trigger: 'axis',
     },
-    legend: props.chart.series.length > 1
-      ? {
-          bottom: 0,
-        }
-      : undefined,
+    legend: {
+      bottom: 0,
+    },
     grid: {
       top: 60,
       bottom: 40,
@@ -202,4 +102,7 @@ const echartsOption = computed(() => {
     | LineSeriesOption
   >
 })
+watchEffect(() => {
+  console.log(echartsOption.value)
+})
 </script>
diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index e2ea442fc..ef6211e8e 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -48,7 +48,7 @@ const series = reactive<{
 })
 
 // Fetch data for all series
-const fetchSeriesData = async () => {
+async function fetchSeriesData() {
   status.value = 'pending'
   error.value = null
 
@@ -69,6 +69,11 @@ const fetchSeriesData = async () => {
           resourceId: serie.resource_id,
           page: 1,
           pageSize: 100,
+          groupBy: serie.column_x_name_override ?? chart.value.x_axis.column_x,
+          aggregation: {
+            column: serie.column_y,
+            type: serie.aggregate_y,
+          },
         }),
       }
     })
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index c448ecd0d..82dd05b2b 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -16,6 +16,11 @@ export type FetchTabularDataOptions = {
   page?: number
   pageSize?: number
   sort?: SortConfig
+  groupBy?: string
+  aggregation?: {
+    column: string
+    type: 'svg' | 'avg' | 'sum' | 'count' | 'min' | 'max'
+  }
 }
 
 export type TabularProfileResponse = {
@@ -64,13 +69,17 @@ export type TabularProfileResponse = {
  * Call Tabular-api to get table content with options object
  */
 export async function fetchTabularData(config: PluginConfig, options: FetchTabularDataOptions): Promise<TabularDataResponse> {
-  const resourceId = options.resourceId
   const page = options.page ?? 1
   const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
-  const sort = options.sort
-  let url = `${config.tabularApiUrl}/api/resources/${resourceId}/data/?page=${page}&page_size=${pageSize}`
-  if (sort) {
-    url += `&${sort.column}__sort=${sort.type}`
+  let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
+  if (options.sort) {
+    url += `&${options.sort.column}__sort=${options.sort.type}`
+  }
+  if (options.groupBy) {
+    url += `&${options.groupBy}__groupby`
+  }
+  if (options.aggregation) {
+    url += `&${options.aggregation.column}__${options.aggregation.type}`
   }
   return await ofetch<TabularDataResponse>(url)
 }
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 3f5bc9c74..d5e44918a 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -121,6 +121,7 @@ export * from './functions/resources'
 export * from './functions/reuses'
 export * from './functions/schemas'
 export * from './functions/users'
+export * from './functions/tabularApi'
 export * from './types/access_types'
 
 export type {
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index b4942437d..90d84dc02 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -96,13 +96,19 @@
             v-model="form.xAxisColumn"
             class="w-full fr-select"
           >
-            <option
-              v-for="column in flattenedColumns"
-              :key="column"
-              :value="column"
+            <optgroup
+              v-for="{ key, value } in flattenedColumns"
+              :key="key"
+              :label="key"
             >
-              {{ column }}
-            </option>
+              <option
+                v-for="column in value"
+                :key="column"
+                :value="column"
+              >
+                {{ column }}
+              </option>
+            </optgroup>
           </select>
         </div>
         <div>
@@ -296,7 +302,7 @@
               class="w-full fr-select"
             >
               <option
-                v-for="column in flattenedColumns"
+                v-for="column in columns[serie.resource_id]"
                 :key="column"
                 :value="column"
               >
@@ -333,16 +339,16 @@
 
 <script setup lang="ts">
 import type { XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray, ChartForm } from '@datagouv/components-next'
-import { SearchableSelect, useHasTabularData } from '@datagouv/components-next'
+import { SearchableSelect, useGetProfile, useHasTabularData } from '@datagouv/components-next'
 import { RiDeleteBinLine } from '@remixicon/vue'
-
 import { computed, defineAsyncComponent, reactive, watch, ref } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 
 const hasTabularData = useHasTabularData()
+const getProfile = useGetProfile()
 const ChartViewerWrapper = defineAsyncComponent(() => import('../datagouv-components/src/components/Chart/ChartViewerWrapper.vue'))
 const columns = ref<Record<string, Array<string>>>({})
-const flattenedColumns = computed(() => Object.values(columns.value).flat())
+const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
 
 const dataset = ref<DatasetSuggest>()
 const resources = ref<Array<Resource>>([])
@@ -352,7 +358,7 @@ const selectedResource = ref('')
 const { $api } = useNuxtApp()
 
 const suggestDataset = async (q: string): Promise<Array<DatasetSuggest>> => {
-  return await $api<Array<DatasetSuggest>>('https://www.data.gouv.fr/api/1/datasets/suggest/', {
+  return await $api<Array<DatasetSuggest>>('https://demo.data.gouv.fr/api/1/datasets/suggest/', {
     query: {
       q,
       size: 5,
@@ -360,10 +366,22 @@ const suggestDataset = async (q: string): Promise<Array<DatasetSuggest>> => {
   })
 }
 
+const dummyDataset = { id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' }
+const dummySerie: DataSeries = {
+  type: 'histogram',
+  column_y: 'Nombre de logements',
+  aggregate_y: 'sum',
+  resource_id: '14dba482-41e3-4c54-b82a-d8c11d1d80eb',
+}
+
+onMounted(() => {
+  dataset.value = dummyDataset
+})
+
 watch(dataset, async (newDataset) => {
   if (newDataset) {
     try {
-      const fetchedResources = await $api<PaginatedArray<Resource>>(`https://www.data.gouv.fr/api/2/datasets/${newDataset.id}/resources/`)
+      const fetchedResources = await $api<PaginatedArray<Resource>>(`https://demo.data.gouv.fr/api/2/datasets/${newDataset.id}/resources/`)
       resources.value = fetchedResources.data.filter(resource => hasTabularData(resource))
       for (const r of resources.value) {
         savedResources[r.id] = r
@@ -379,12 +397,15 @@ watch(dataset, async (newDataset) => {
   }
 })
 
-const dummySerie: DataSeries = {
-  type: 'histogram',
-  column_y: 'Nombre de logements',
-  aggregate_y: 'sum',
-  resource_id: '14dba482-41e3-4c54-b82a-d8c11d1d80eb',
-}
+watch([selectedResource], async ([r]) => {
+  if (r) {
+    if (columns.value[r]) {
+      return
+    }
+    const profile = await getProfile(r)
+    columns.value[r] = profile.profile.header
+  }
+})
 
 const form = reactive<{
   title: string

From 2c0baaeabe548b8cbcf3b14fdd493d402b47cb97 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 26 Feb 2026 11:48:47 +0100
Subject: [PATCH 013/121] feat(visualizations): fix tooltip formatting

---
 .../src/components/Chart/ChartViewer.vue             | 12 +++++++++++-
 design-system/ChartConfigurator.vue                  |  4 ++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 2cb5ef45d..a8658380e 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { use, type ComposeOption } from 'echarts/core'
+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'
@@ -72,6 +72,16 @@ const echartsOption = computed(() => {
     },
     tooltip: {
       trigger: 'axis',
+      formatter: (params) => {
+        let tooltip = ''
+        for (const param of params) {
+          const keys = Object.keys(param.value)
+          const col = keys.find(key => key.startsWith(param.seriesName))!
+          const formatter = new Intl.NumberFormat('fr-FR')
+          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(param.value[col])}</strong><br>`
+        }
+        return tooltip
+      },
     },
     legend: {
       bottom: 0,
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 90d84dc02..2cb92a314 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -320,8 +320,8 @@
               <option value="sum">
                 Somme
               </option>
-              <option value="median">
-                Médianne
+              <option value="avg">
+                Moyenne
               </option>
             </select>
           </div>

From 04e4b02732204bc90f02535d806e0c7a968681be Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 26 Feb 2026 13:38:32 +0100
Subject: [PATCH 014/121] feat(visualizations): show axis formatter without
 unit

---
 datagouv-components/src/components/Chart/ChartViewer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index a8658380e..d12e51ade 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -35,10 +35,10 @@ function mapXAxisType(xAxis?: XAxis): 'category' | 'value' {
   return xAxis.type === 'continuous' ? 'value' : 'category'
 }
 
-function buildYAxisFormatter(yAxis?: YAxis): ((value: number) => string) | undefined {
-  if (!yAxis?.unit) return undefined
+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}`
   }

From a816df5800f19a6a1ea9acdf9b965a8dcd01a98b Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 26 Feb 2026 14:29:51 +0100
Subject: [PATCH 015/121] feat(visualizations): allow no aggregate

---
 datagouv-components/src/functions/tabularApi.ts | 7 ++-----
 design-system/ChartConfigurator.vue             | 3 +++
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 82dd05b2b..141d5619c 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -75,11 +75,8 @@ export async function fetchTabularData(config: PluginConfig, options: FetchTabul
   if (options.sort) {
     url += `&${options.sort.column}__sort=${options.sort.type}`
   }
-  if (options.groupBy) {
-    url += `&${options.groupBy}__groupby`
-  }
-  if (options.aggregation) {
-    url += `&${options.aggregation.column}__${options.aggregation.type}`
+  if (options.groupBy && options.aggregation?.type) {
+    url += `&${options.groupBy}__groupby&${options.aggregation.column}__${options.aggregation.type}`
   }
   return await ofetch<TabularDataResponse>(url)
 }
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 2cb92a314..77953be1a 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -317,6 +317,9 @@
               v-model="serie.aggregate_y"
               class="w-full fr-select"
             >
+              <option value="">
+                Non
+              </option>
               <option value="sum">
                 Somme
               </option>

From 7fb9350d6dabfb2357429b0d44c42c8a22e8b574 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 26 Feb 2026 19:00:08 +0100
Subject: [PATCH 016/121] feat(visualizations): sort transformer wip

---
 .../src/components/Chart/ChartViewer.vue      | 46 +++++++---
 .../components/Chart/ChartViewerWrapper.vue   | 90 ++++++++++++++-----
 .../src/functions/tabularApi.ts               | 12 ++-
 .../src/types/visualizations.ts               | 13 ++-
 design-system/ChartConfigurator.vue           |  6 +-
 nuxt.config.ts                                |  2 +-
 6 files changed, 121 insertions(+), 48 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index d12e51ade..39f4298ff 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -12,7 +12,7 @@ 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 VChart from 'vue-echarts'
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { summarize } from '../../functions/helpers'
 import type { Chart, DataSeries, XAxis, YAxis, ChartForm } from '../../types/visualizations'
 
@@ -45,27 +45,47 @@ function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefi
 }
 
 const echartsOption = computed(() => {
-  if (!props.chart.series || props.chart.series.length === 0) return
+  const seriesCount = props.chart.series.length
+  if (!props.chart.series || seriesCount === 0) return
 
   // Create series configuration with data mapping
-  const series = (props.chart.series).map((s) => {
+  const { data, series } = 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 sortColumn = xColumn && props.chart.x_axis.sort_x_by && (props.chart.x_axis.sort_x_by === 'axis_x' || yColumn) ? {
+    // 'axis_x': xColumn,
+    // 'axis_y': yColumn
+    // }[props.chart.x_axis.sort_x_by] : undefined
     return {
-      type: mapSeriesType(s.type),
-      dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[s.resource_id],
-      name: s.column_y,
-      encode: {
-        x: xColumn,
-        y: yColumn,
+      series: {
+        type: mapSeriesType(s.type),
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[s.resource_id],
+        name: s.column_y,
+        encode: {
+          x: xColumn,
+          y: yColumn,
+        },
+        // datasetIndex: props.chart.x_axis.sort_x_by ? seriesCount + i : i,
+      },
+      data: {
+        source: props.series.data[s.resource_id],
+        // dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[s.resource_id],
+        // transform: sortColumn ? {
+        //  type: 'sort',
+        //  config: { dimension: xColumn, order: props.chart.x_axis.sort_x_direction }
+        // } : {},
       },
     }
+  }).reduce((acc, curr) => {
+    acc.series.push(curr.series)
+    acc.data.push(curr.data)
+    return acc
+  }, {
+    series: [],
+    data: [],
   })
-  const sources = Object.values(props.series.data).map(data => ({
-    source: data,
-  }))
   return {
-    dataset: sources,
+    dataset: data,
     title: {
       text: props.chart.title,
       left: 'center',
diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index ef6211e8e..7123f6a70 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -22,7 +22,7 @@ import { 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 { fetchTabularData, useGetProfile, type TabularDataResponse, type TabularProfileResponse } from '../../functions/tabularApi'
 import type { Chart, ChartForm } from '../../types/visualizations'
 
 const chart = defineModel<Chart | ChartForm>({ required: true })
@@ -47,8 +47,7 @@ const series = reactive<{
   columns: {},
 })
 
-// Fetch data for all series
-async function fetchSeriesData() {
+async function fetchSeriesProfile() {
   status.value = 'pending'
   error.value = null
 
@@ -62,36 +61,25 @@ async function fetchSeriesData() {
 
     // Fetch data for all series in parallel
     const fetchPromises = chart.value.series.map(async (serie) => {
+      if (!serie.resource_id) return
       return {
         id: serie.resource_id,
         profile: await getProfile(serie.resource_id),
-        data: await fetchTabularData(config, {
-          resourceId: serie.resource_id,
-          page: 1,
-          pageSize: 100,
-          groupBy: serie.column_x_name_override ?? chart.value.x_axis.column_x,
-          aggregation: {
-            column: serie.column_y,
-            type: serie.aggregate_y,
-          },
-        }),
       }
-    })
+    }).filter(Boolean) as Array<Promise<{
+      id: string
+      profile: TabularProfileResponse
+    }>>
 
     const results = (await Promise.allSettled(fetchPromises))
       .filter(r => r.status === 'fulfilled')
       .map(r => r.value)
-    // Transform data into echarts format
-    series.data = Object.fromEntries(results.map(result => [
-      result.id,
-      result.data.data,
-    ]))
     series.columns = Object.fromEntries(results.map(result => [
       result.id,
       result.profile.profile.header,
     ]))
     if (results.length > 0) {
-      const columns = Object.keys(results[0]?.data.data[0] ?? [])
+      const columns = results[0]?.profile.profile.header ?? []
       const firstColumn = columns.filter(c => c !== '__id')[0]
       if (!chart.value.x_axis.column_x && firstColumn) {
         chart.value.x_axis.column_x = firstColumn
@@ -100,16 +88,74 @@ async function fetchSeriesData() {
     status.value = 'success'
   }
   catch (err) {
-    error.value = err instanceof Error ? err : new Error('Failed to fetch series data')
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series profile')
     status.value = 'error'
     console.log(err)
-    series.data = {}
     series.columns = {}
   }
 }
 
+async function fetchSeriesData() {
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (chart.value.series.length === 0 || !chart.value.x_axis.column_x) {
+      status.value = 'success'
+      series.data = {}
+      return
+    }
+
+    // Fetch data for all series in parallel
+    const fetchPromises = chart.value.series.map(async (serie) => {
+      const xColumn = serie.column_x_name_override ?? chart.value.x_axis.column_x
+      if (!xColumn || !serie.resource_id || !serie.column_y) return
+      return {
+        id: serie.resource_id,
+        profile: await getProfile(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,
+        }),
+      }
+    }).filter(Boolean) as Array<Promise<{
+      id: string
+      data: TabularDataResponse
+    }>>
+
+    const results = (await Promise.allSettled(fetchPromises))
+      .filter(r => r.status === 'fulfilled')
+      .map(r => r.value)
+    // Transform data into echarts format
+    series.data = Object.fromEntries(results.map(result => [
+      result.id,
+      result.data.data,
+    ]))
+    status.value = 'success'
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series data')
+    status.value = 'error'
+    series.data = {}
+  }
+}
+
 // Watch for changes in the chart or its series
 watch(() => chart.value.series, async () => {
+  await fetchSeriesProfile()
+}, { immediate: true, deep: true })
+
+// Watch for changes in the chart or its series
+watch([() => chart.value.series, () => chart.value.x_axis.column_x], async () => {
   await fetchSeriesData()
 }, { immediate: true, deep: true })
 
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 141d5619c..b6abd3aa9 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -11,16 +11,19 @@ export type TabularDataResponse = {
   meta: { total: number }
 }
 
+export type TabularAggregateType = 'avg' | 'sum' | 'count' | 'min' | 'max'
+
 export type FetchTabularDataOptions = {
   resourceId: string
   page?: number
   pageSize?: number
+  columns?: Array<string> | undefined
   sort?: SortConfig
-  groupBy?: string
+  groupBy?: string | undefined
   aggregation?: {
     column: string
-    type: 'svg' | 'avg' | 'sum' | 'count' | 'min' | 'max'
-  }
+    type: TabularAggregateType
+  } | undefined
 }
 
 export type TabularProfileResponse = {
@@ -72,6 +75,9 @@ export async function fetchTabularData(config: PluginConfig, options: FetchTabul
   const page = options.page ?? 1
   const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
   let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
+  if (options.columns) {
+    url += `&columns=${options.columns.join(',')}`
+  }
   if (options.sort) {
     url += `&${options.sort.column}__sort=${options.sort.type}`
   }
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index 8585ffe8f..ce12dac34 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -1,3 +1,4 @@
+import type { TabularAggregateType } from '../functions/tabularApi'
 import type { Owned, OwnedWithId } from './owned'
 
 // Filter types
@@ -24,8 +25,8 @@ export type SortDirection = 'asc' | 'desc'
 
 export type XAxis = {
   column_x: string
-  sort_x_by: XAxisSortBy
-  sort_x_direction: SortDirection
+  sort_x_by?: XAxisSortBy
+  sort_x_direction?: SortDirection
   type: XAxisType
 }
 
@@ -42,15 +43,13 @@ export type YAxis = {
 // Data series types
 export type DataSeriesType = 'line' | 'histogram'
 
-export type AggregateType = 'sum' | 'median'
-
 export type DataSeries = {
   type: DataSeriesType
   column_y: string
-  aggregate_y: AggregateType
+  aggregate_y: TabularAggregateType | null
   resource_id: string
-  column_x_name_override?: string
-  filters?: GenericFilter
+  column_x_name_override: string | null
+  filters: GenericFilter | null
 }
 
 // Chart form fields (for POST/PATCH requests)
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 77953be1a..1a2dd44e5 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -235,7 +235,7 @@
             <select
               id="y-axis-unit-position"
               v-model="form.yAxisUnitPosition"
-              class="w-full fr-input"
+              class="w-full fr-select"
             >
               <option value="suffix">
                 Suffixe
@@ -373,8 +373,10 @@ const dummyDataset = { id: '6170ae10981edd7b132f28a0', title: 'Logements et loge
 const dummySerie: DataSeries = {
   type: 'histogram',
   column_y: 'Nombre de logements',
-  aggregate_y: 'sum',
+  aggregate_y: null,
   resource_id: '14dba482-41e3-4c54-b82a-d8c11d1d80eb',
+  filters: null,
+  column_x_name_override: null,
 }
 
 onMounted(() => {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1c8eb3bfe..26763a2af 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -69,7 +69,7 @@ export default defineNuxtConfig({
       maxPdfPreviewByteSize: 10000000, // (10 MB)
       maxXmlPreviewCharSize: 100000, // (~100KB)
       schemaValidataUrl: 'https://validata.fr',
-      tabularApiUrl: 'https://tabular-api.data.gouv.fr',
+      tabularApiUrl: 'https://tabular-api.preprod.data.gouv.fr',
       tabularApiDataserviceId: undefined,
 
       qualityDescriptionLength: 100,

From 56fb33a9db81d1b7c347c81e6518734670ad4a27 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 27 Feb 2026 15:42:56 +0100
Subject: [PATCH 017/121] feat(visualizations): sort

---
 .../src/components/Chart/ChartViewer.vue      | 84 +++++++++++--------
 1 file changed, 49 insertions(+), 35 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 39f4298ff..e02cee339 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -12,7 +12,7 @@ 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 VChart from 'vue-echarts'
-import { computed, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { summarize } from '../../functions/helpers'
 import type { Chart, DataSeries, XAxis, YAxis, ChartForm } from '../../types/visualizations'
 
@@ -27,12 +27,12 @@ const props = defineProps<{
 }>()
 
 function mapSeriesType(type: DataSeries['type']): 'line' | 'bar' {
-  return type === 'histogram' ? 'bar' : 'line'
+  return (type ?? 'line') === 'histogram' ? 'bar' : 'line'
 }
 
-function mapXAxisType(xAxis?: XAxis): 'category' | 'value' {
+function mapXAxisType(xAxis?: XAxis | Partial<XAxis>): 'category' | 'value' {
   if (!xAxis) return 'category'
-  return xAxis.type === 'continuous' ? 'value' : 'category'
+  return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
 }
 
 function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
@@ -49,56 +49,73 @@ const echartsOption = computed(() => {
   if (!props.chart.series || seriesCount === 0) return
 
   // Create series configuration with data mapping
-  const { data, series } = props.chart.series.map((s) => {
+  const seriesData = 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 sortColumn = xColumn && props.chart.x_axis.sort_x_by && (props.chart.x_axis.sort_x_by === 'axis_x' || yColumn) ? {
-    // 'axis_x': xColumn,
-    // 'axis_y': yColumn
-    // }[props.chart.x_axis.sort_x_by] : undefined
+    const resourceId = s.resource_id
+    const seriesType = s.type
+
+    if (!xColumn || !yColumn || !resourceId || !seriesType || !props.series.data[resourceId] || !props.series.columns[resourceId]) {
+      return null
+    }
+
+    // Sort data before passing to ECharts to avoid transform issues
+    const sortedData = [...props.series.data[resourceId]]
+    const sortBy = props.chart.x_axis.sort_x_by
+    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
+      sortedData.sort((a, b) => {
+        const valA = a[sortKey] as number
+        const valB = b[sortKey] as number
+        if (valA < valB) return sortDirection === 'asc' ? -1 : 1
+        if (valA > valB) return sortDirection === 'asc' ? 1 : -1
+        return 0
+      })
+    }
+
     return {
       series: {
-        type: mapSeriesType(s.type),
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[s.resource_id],
+        type: mapSeriesType(seriesType),
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
         name: s.column_y,
         encode: {
           x: xColumn,
           y: yColumn,
         },
-        // datasetIndex: props.chart.x_axis.sort_x_by ? seriesCount + i : i,
-      },
+      } as LineSeriesOption | BarSeriesOption,
       data: {
-        source: props.series.data[s.resource_id],
-        // dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[s.resource_id],
-        // transform: sortColumn ? {
-        //  type: 'sort',
-        //  config: { dimension: xColumn, order: props.chart.x_axis.sort_x_direction }
-        // } : {},
+        source: sortedData,
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
       },
     }
-  }).reduce((acc, curr) => {
-    acc.series.push(curr.series)
-    acc.data.push(curr.data)
+  }).filter(Boolean).reduce((acc: { series: Array<LineSeriesOption | BarSeriesOption>, data: Array<Record<string, unknown>> }, curr) => {
+    if (curr) {
+      acc.series.push(curr.series)
+      acc.data.push(curr.data)
+    }
     return acc
   }, {
     series: [],
     data: [],
   })
+
   return {
-    dataset: data,
+    dataset: [...seriesData.data],
     title: {
       text: props.chart.title,
       left: 'center',
     },
     tooltip: {
-      trigger: 'axis',
-      formatter: (params) => {
+      trigger: 'axis' as const,
+      formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
         let tooltip = ''
         for (const param of params) {
           const keys = Object.keys(param.value)
           const col = keys.find(key => key.startsWith(param.seriesName))!
           const formatter = new Intl.NumberFormat('fr-FR')
-          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(param.value[col])}</strong><br>`
+          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[col]))}</strong><br>`
         }
         return tooltip
       },
@@ -115,24 +132,21 @@ const echartsOption = computed(() => {
     },
     xAxis: {
       type: mapXAxisType(props.chart.x_axis),
-      name: props.chart.x_axis?.column_x,
+      name: (props.chart.x_axis as XAxis).column_x,
     },
     yAxis: {
-      type: 'value',
-      name: props.chart.y_axis?.label,
-      min: props.chart.y_axis?.min ?? undefined,
-      max: props.chart.y_axis?.max ?? undefined,
+      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,
+    series: seriesData.series,
   } satisfies ComposeOption<
     | BarSeriesOption
     | LineSeriesOption
   >
 })
-watchEffect(() => {
-  console.log(echartsOption.value)
-})
 </script>

From 72f8d651a8b13901ed05a3d5da17deb38598d4dc Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 2 Mar 2026 14:21:21 +0100
Subject: [PATCH 018/121] feat: add save chart

---
 design-system/ChartConfigurator.vue | 36 +++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 1a2dd44e5..d30e4f6b4 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -336,13 +336,22 @@
           + Ajouter une série
         </button>
       </fieldset>
+
+      <div class="px-6">
+        <!-- Save button -->
+        <BrandedButton
+          @click="saveChart"
+        >
+          Sauvegarder le graphique
+        </BrandedButton>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray, ChartForm } from '@datagouv/components-next'
-import { SearchableSelect, useGetProfile, useHasTabularData } from '@datagouv/components-next'
+import type { XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
+import { SearchableSelect, useGetProfile, useHasTabularData, toast, BrandedButton } from '@datagouv/components-next'
 import { RiDeleteBinLine } from '@remixicon/vue'
 import { computed, defineAsyncComponent, reactive, watch, ref } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
@@ -357,6 +366,7 @@ const dataset = ref<DatasetSuggest>()
 const resources = ref<Array<Resource>>([])
 const savedResources = reactive<Record<string, Resource>>({})
 const selectedResource = ref('')
+const savedChart = ref<Chart | null>(null)
 
 const { $api } = useNuxtApp()
 
@@ -463,4 +473,26 @@ const chartPreview = computed<ChartForm>(() => ({
   series: form.series,
   extras: {},
 } satisfies ChartForm))
+
+const saveChart = async () => {
+  try {
+    if (savedChart.value?.id) {
+      savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value.id}/`, {
+        method: 'PATCH',
+        body: JSON.stringify(chartPreview.value),
+      })
+    }
+    else {
+      savedChart.value = await $api<Chart>('/api/1/visualizations/', {
+        method: 'POST',
+        body: JSON.stringify(chartPreview.value),
+      })
+    }
+
+    toast.success(savedChart.value?.id ? 'Graphique mis à jour !' : 'Graphique sauvegardé !')
+  }
+  catch (error) {
+    console.error('Failed to save chart:', error)
+  }
+}
 </script>

From 207d9329d3ea20f38b18604ea5c8bd53599f2c5d Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 4 Mar 2026 16:39:43 +0100
Subject: [PATCH 019/121] refactor(chart-configurator): use savedResources and
 add chart loading

- Convert resources to computed from savedResources
- Add loadChart() to fetch chart and extract resource IDs from series
- Add loadMissingResourcesForChart() to fetch individual resources
- Add loadSelectedChart() triggered by Charger button
- Switch form from reactive to ref
- Move dataset initialization to top level
- Fetch charts list at top level instead of onMounted
---
 design-system/ChartConfigurator.vue | 192 ++++++++++++++++++++--------
 1 file changed, 139 insertions(+), 53 deletions(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index d30e4f6b4..3b4616227 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -41,6 +41,39 @@
 
     <!-- Form -->
     <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
+      <!-- Chart selection -->
+      <fieldset class="px-6 space-y-4">
+        <p class="mb-2 font-bold">
+          Graphiques existants
+        </p>
+        <div class="flex gap-2">
+          <select
+            v-model="selectedChartId"
+            class="flex-1 fr-select"
+          >
+            <option
+              value=""
+              disabled
+            >
+              Sélectionnez un graphique
+            </option>
+            <option
+              v-for="chart in charts?.data"
+              :key="chart.id"
+              :value="chart.id"
+            >
+              {{ chart.title }}
+            </option>
+          </select>
+          <button
+            class="fr-btn"
+            :disabled="!selectedChartId"
+            @click="loadSelectedChart"
+          >
+            Charger
+          </button>
+        </div>
+      </fieldset>
       <fieldset class="px-6 space-y-4">
         <p class="mb-2 font-bold">
           Ressources
@@ -355,6 +388,7 @@ import { SearchableSelect, useGetProfile, useHasTabularData, toast, BrandedButto
 import { RiDeleteBinLine } from '@remixicon/vue'
 import { computed, defineAsyncComponent, reactive, watch, ref } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
+import { useAPI } from '~/utils/api'
 
 const hasTabularData = useHasTabularData()
 const getProfile = useGetProfile()
@@ -363,21 +397,14 @@ const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
 
 const dataset = ref<DatasetSuggest>()
-const resources = ref<Array<Resource>>([])
 const savedResources = reactive<Record<string, Resource>>({})
 const selectedResource = ref('')
 const savedChart = ref<Chart | null>(null)
+const selectedChartId = ref('')
 
-const { $api } = useNuxtApp()
+const resources = computed(() => Object.values(savedResources))
 
-const suggestDataset = async (q: string): Promise<Array<DatasetSuggest>> => {
-  return await $api<Array<DatasetSuggest>>('https://demo.data.gouv.fr/api/1/datasets/suggest/', {
-    query: {
-      q,
-      size: 5,
-    },
-  })
-}
+const { $api } = useNuxtApp()
 
 const dummyDataset = { id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' }
 const dummySerie: DataSeries = {
@@ -389,40 +416,11 @@ const dummySerie: DataSeries = {
   column_x_name_override: null,
 }
 
-onMounted(() => {
-  dataset.value = dummyDataset
-})
-
-watch(dataset, async (newDataset) => {
-  if (newDataset) {
-    try {
-      const fetchedResources = await $api<PaginatedArray<Resource>>(`https://demo.data.gouv.fr/api/2/datasets/${newDataset.id}/resources/`)
-      resources.value = fetchedResources.data.filter(resource => hasTabularData(resource))
-      for (const r of resources.value) {
-        savedResources[r.id] = r
-      }
-    }
-    catch (error) {
-      console.error('Failed to fetch resources:', error)
-      resources.value = []
-    }
-  }
-  else {
-    resources.value = []
-  }
-})
+const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
 
-watch([selectedResource], async ([r]) => {
-  if (r) {
-    if (columns.value[r]) {
-      return
-    }
-    const profile = await getProfile(r)
-    columns.value[r] = profile.profile.header
-  }
-})
+dataset.value = dummyDataset
 
-const form = reactive<{
+const form = ref<{
   title: string
   description: string
   xAxisColumn: string
@@ -455,25 +453,112 @@ const user = useMaybeMe()
 const chartPreview = computed<ChartForm>(() => ({
   organization: null,
   owner: user.value ? user.value.id : 'dummyForDS',
-  title: form.title,
-  description: form.description,
+  title: form.value.title,
+  description: form.value.description,
   private: false,
   x_axis: {
-    column_x: form.xAxisColumn,
-    type: form.xAxisType,
-    ...(form.xAxisSortBy ? { sort_x_by: form.xAxisSortBy, sort_x_direction: form.xAxisSortDirection } : {}),
+    column_x: form.value.xAxisColumn,
+    type: form.value.xAxisType,
+    ...(form.value.xAxisSortBy ? { sort_x_by: form.value.xAxisSortBy, sort_x_direction: form.value.xAxisSortDirection } : {}),
   },
   y_axis: {
-    label: form.yAxisLabel || undefined,
-    min: form.yAxisMin,
-    max: form.yAxisMax,
-    unit: form.yAxisUnit || undefined,
-    unit_position: form.yAxisUnitPosition,
+    label: form.value.yAxisLabel || undefined,
+    min: form.value.yAxisMin,
+    max: form.value.yAxisMax,
+    unit: form.value.yAxisUnit || undefined,
+    unit_position: form.value.yAxisUnitPosition,
   },
-  series: form.series,
+  series: form.value.series,
   extras: {},
 } satisfies ChartForm))
 
+watch(dataset, async (newDataset) => {
+  if (newDataset) {
+    try {
+      const fetchedResources = await $api<PaginatedArray<Resource>>(`https://demo.data.gouv.fr/api/2/datasets/${newDataset.id}/resources/`)
+      for (const r of fetchedResources.data.filter(resource => hasTabularData(resource))) {
+        savedResources[r.id] = r
+      }
+    }
+    catch (error) {
+      console.error('Failed to fetch resources:', error)
+    }
+  }
+})
+
+const loadMissingResourcesForChart = async (resourceIds: Set<string>) => {
+  for (const id of resourceIds) {
+    if (savedResources[id]) continue
+
+    try {
+      const resource = await $api<Resource>(`https://demo.data.gouv.fr/api/2/datasets/resources/${id}/`)
+      savedResources[id] = resource
+    }
+    catch (error) {
+      console.error(`Failed to fetch resource ${id}:`, error)
+    }
+  }
+}
+
+watch([selectedResource], async ([r]) => {
+  if (r) {
+    if (columns.value[r]) {
+      return
+    }
+    const profile = await getProfile(r)
+    columns.value[r] = profile.profile.header
+  }
+})
+
+const suggestDataset = async (q: string): Promise<Array<DatasetSuggest>> => {
+  return await $api<Array<DatasetSuggest>>('https://demo.data.gouv.fr/api/1/datasets/suggest/', {
+    query: { q, size: 5 },
+  })
+}
+
+const loadChart = async (id: string) => {
+  try {
+    const { data } = await useAPI<Chart>(`/api/1/visualizations/${id}/`)
+    if (data.value) {
+      savedChart.value = data.value
+
+      const chartResources = new Set<string>()
+      for (const serie of data.value.series) {
+        if (serie.resource_id) {
+          chartResources.add(serie.resource_id)
+        }
+      }
+
+      form.value = {
+        ...data.value,
+        xAxisType: data.value.x_axis.type,
+        xAxisColumn: data.value.x_axis.column_x,
+        xAxisSortBy: data.value.x_axis.sort_x_by || '',
+        xAxisSortDirection: data.value.x_axis.sort_x_direction || 'asc',
+        yAxisLabel: data.value.y_axis.label || '',
+        yAxisMin: data.value.y_axis.min,
+        yAxisMax: data.value.y_axis.max,
+        yAxisUnit: data.value.y_axis.unit || '',
+        yAxisUnitPosition: data.value.y_axis.unit_position || 'suffix',
+      }
+
+      await loadMissingResourcesForChart(chartResources)
+
+      toast.success('Graphique chargé !')
+    }
+  }
+  catch (error) {
+    console.error('Failed to load chart:', error)
+    toast.error('Erreur lors du chargement du graphique')
+  }
+}
+
+const loadSelectedChart = () => {
+  if (selectedChartId.value) {
+    loadChart(selectedChartId.value)
+  }
+}
+
 const saveChart = async () => {
   try {
     if (savedChart.value?.id) {
@@ -490,6 +575,7 @@ const saveChart = async () => {
     }
 
     toast.success(savedChart.value?.id ? 'Graphique mis à jour !' : 'Graphique sauvegardé !')
+    await refresh()
   }
   catch (error) {
     console.error('Failed to save chart:', error)

From 967db704f7fd879e8a1e8bf464a3c8589687cc57 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 5 Mar 2026 11:32:54 +0100
Subject: [PATCH 020/121] refactor(chart-configurator): separate
 title/description refs and add debounced preview

---
 design-system/ChartConfigurator.vue | 43 +++++++++++++----------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 3b4616227..5fe49148b 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="grid lg:grid-cols-12 gap-4">
-    <!-- Live preview -->
     <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
-      <!-- Title -->
       <div>
         <label
           for="chart-title"
@@ -10,13 +8,12 @@
         >Titre</label>
         <input
           id="chart-title"
-          v-model="form.title"
+          v-model="titleRef"
           type="text"
           class="w-full fr-input"
         >
       </div>
 
-      <!-- Description -->
       <div>
         <label
           for="chart-description"
@@ -24,7 +21,7 @@
         >Description</label>
         <textarea
           id="chart-description"
-          v-model="form.description"
+          v-model="descRef"
           class="w-full fr-input"
           rows="2"
         />
@@ -38,10 +35,7 @@
         </ClientOnly>
       </div>
     </div>
-
-    <!-- Form -->
     <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
-      <!-- Chart selection -->
       <fieldset class="px-6 space-y-4">
         <p class="mb-2 font-bold">
           Graphiques existants
@@ -88,7 +82,6 @@
           :suggest="suggestDataset"
           class="mb-4"
         />
-        <!-- Resources select -->
         <label
           for="resource-select"
           class="mb-1"
@@ -114,7 +107,6 @@
           </option>
         </select>
       </fieldset>
-      <!-- X Axis -->
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
           Axe X
@@ -281,7 +273,6 @@
         </div>
       </fieldset>
 
-      <!-- Series -->
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
           Séries
@@ -371,7 +362,6 @@
       </fieldset>
 
       <div class="px-6">
-        <!-- Save button -->
         <BrandedButton
           @click="saveChart"
         >
@@ -384,14 +374,12 @@
 
 <script setup lang="ts">
 import type { XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
-import { SearchableSelect, useGetProfile, useHasTabularData, toast, BrandedButton } from '@datagouv/components-next'
+import { SearchableSelect, useGetProfile, useHasTabularData, toast, BrandedButton, useDebouncedRef } from '@datagouv/components-next'
 import { RiDeleteBinLine } from '@remixicon/vue'
-import { computed, defineAsyncComponent, reactive, watch, ref } from 'vue'
+import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 import { useAPI } from '~/utils/api'
 
-const hasTabularData = useHasTabularData()
-const getProfile = useGetProfile()
 const ChartViewerWrapper = defineAsyncComponent(() => import('../datagouv-components/src/components/Chart/ChartViewerWrapper.vue'))
 const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
@@ -405,8 +393,10 @@ const selectedChartId = ref('')
 const resources = computed(() => Object.values(savedResources))
 
 const { $api } = useNuxtApp()
+const hasTabularData = useHasTabularData()
+const getProfile = useGetProfile()
 
-const dummyDataset = { id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' }
+const dummyDataset = { id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' } as DatasetSuggest
 const dummySerie: DataSeries = {
   type: 'histogram',
   column_y: 'Nombre de logements',
@@ -421,8 +411,6 @@ const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('
 dataset.value = dummyDataset
 
 const form = ref<{
-  title: string
-  description: string
   xAxisColumn: string
   xAxisType: XAxisType
   xAxisSortBy: XAxisSortBy | ''
@@ -434,8 +422,6 @@ const form = ref<{
   yAxisUnitPosition: UnitPosition
   series: Array<DataSeries>
 }>({
-  title: 'Mon graphique',
-  description: '',
   xAxisColumn: 'nom_region',
   xAxisType: 'discrete',
   xAxisSortBy: '',
@@ -450,11 +436,18 @@ const form = ref<{
 
 const user = useMaybeMe()
 
+const debounceMs = 300
+const titleRef = ref('Mon graphique')
+const descRef = ref('')
+
+const titleDebounced = useDebouncedRef(titleRef, debounceMs)
+const descDebounced = useDebouncedRef(descRef, debounceMs)
+
 const chartPreview = computed<ChartForm>(() => ({
   organization: null,
   owner: user.value ? user.value.id : 'dummyForDS',
-  title: form.value.title,
-  description: form.value.description,
+  title: titleDebounced.debounced.value,
+  description: descDebounced.debounced.value,
   private: false,
   x_axis: {
     column_x: form.value.xAxisColumn,
@@ -470,7 +463,7 @@ const chartPreview = computed<ChartForm>(() => ({
   },
   series: form.value.series,
   extras: {},
-} satisfies ChartForm))
+}))
 
 watch(dataset, async (newDataset) => {
   if (newDataset) {
@@ -541,6 +534,8 @@ const loadChart = async (id: string) => {
         yAxisUnit: data.value.y_axis.unit || '',
         yAxisUnitPosition: data.value.y_axis.unit_position || 'suffix',
       }
+      titleRef.value = data.value.title
+      descRef.value = data.value.description
 
       await loadMissingResourcesForChart(chartResources)
 

From e047f9a44fadf15481d032c4434944a41f6298a2 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 5 Mar 2026 11:41:09 +0100
Subject: [PATCH 021/121] feat(components): export useDebouncedRef

---
 datagouv-components/src/main.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index d5e44918a..f1b2ff396 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -101,6 +101,7 @@ import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 export { Toaster, toast } from 'vue-sonner'
 
 export * from './composables/useActiveDescendant'
+export * from './composables/useDebouncedRef'
 export * from './composables/useMetrics'
 export * from './composables/useReuseType'
 export * from './composables/useTranslation'

From de5ea112687eab74bbd15230f0bea8cfae5db821 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 5 Mar 2026 11:41:54 +0100
Subject: [PATCH 022/121] refactor(chart-configurator): restore satisfies
 clause

---
 design-system/ChartConfigurator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 5fe49148b..3c181cf4d 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -463,7 +463,7 @@ const chartPreview = computed<ChartForm>(() => ({
   },
   series: form.value.series,
   extras: {},
-}))
+} satisfies ChartForm))
 
 watch(dataset, async (newDataset) => {
   if (newDataset) {

From 0c027fe208c50a14951ca8001d967e549d7a9258 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 18:05:20 +0200
Subject: [PATCH 023/121] feat(visualizations): better GET / POST / PATCH

---
 .../src/components/Chart/ChartViewer.vue      |   4 +-
 datagouv-components/src/main.ts               |   6 +-
 .../src/types/visualizations.ts               |  40 ++--
 design-system/ChartConfigurator.vue           | 212 +++++++-----------
 nuxt.config.ts                                |   2 +-
 pages/design/chart.vue                        |  35 ++-
 utils/charts.ts                               |  55 +++++
 7 files changed, 195 insertions(+), 159 deletions(-)
 create mode 100644 utils/charts.ts

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index e02cee339..8c03f5ef0 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -14,7 +14,7 @@ import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, Datas
 import VChart from 'vue-echarts'
 import { computed } from 'vue'
 import { summarize } from '../../functions/helpers'
-import type { Chart, DataSeries, XAxis, YAxis, ChartForm } from '../../types/visualizations'
+import type { Chart, DataSeries, XAxis, YAxis, ChartForm, XAxisForm } from '../../types/visualizations'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
 
@@ -30,7 +30,7 @@ function mapSeriesType(type: DataSeries['type']): 'line' | 'bar' {
   return (type ?? 'line') === 'histogram' ? 'bar' : 'line'
 }
 
-function mapXAxisType(xAxis?: XAxis | Partial<XAxis>): 'category' | 'value' {
+function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
   if (!xAxis) return 'category'
   return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
 }
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index f1b2ff396..6a274627d 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -23,7 +23,7 @@ import type { Site } from './types/site'
 import type { Weight, WellType } from './types/ui'
 import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
-import type { Chart, ChartForm, FilterCondition, Filter, AndFilters, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, UnitPosition, YAxis, DataSeriesType, AggregateType, DataSeries } from './types/visualizations'
+import type { Chart, ChartForm, ChartForApi, FilterCondition, Filter, AndFilters, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, XAxisForm, UnitPosition, YAxis, DataSeriesType, DataSeries, DataSeriesForm } from './types/visualizations'
 import type { GlobalSearchConfig, SearchType, SortOption } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
 
@@ -221,6 +221,7 @@ export type {
   WellType,
   Chart,
   ChartForm,
+  ChartForApi,
   FilterCondition,
   Filter,
   AndFilters,
@@ -229,11 +230,12 @@ export type {
   XAxisSortBy,
   SortDirection,
   XAxis,
+  XAxisForm,
   UnitPosition,
   YAxis,
   DataSeriesType,
-  AggregateType,
   DataSeries,
+  DataSeriesForm,
 }
 
 export {
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index ce12dac34..560dc4eea 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -1,7 +1,6 @@
 import type { TabularAggregateType } from '../functions/tabularApi'
 import type { Owned, OwnedWithId } from './owned'
 
-// Filter types
 export type FilterCondition = 'equal' | 'greater'
 
 export type Filter = {
@@ -16,7 +15,6 @@ export type AndFilters = {
 
 export type GenericFilter = Filter | AndFilters
 
-// Axis types
 export type XAxisType = 'discrete' | 'continuous'
 
 export type XAxisSortBy = 'axis_x' | 'axis_y'
@@ -25,22 +23,23 @@ export type SortDirection = 'asc' | 'desc'
 
 export type XAxis = {
   column_x: string
-  sort_x_by?: XAxisSortBy
-  sort_x_direction?: SortDirection
+  sort_x_by: XAxisSortBy | null
+  sort_x_direction: SortDirection | null
   type: XAxisType
 }
 
+export type XAxisForm = Omit<XAxis, 'sort_x_by'> & { sort_x_by: XAxisSortBy | '' | null }
+
 export type UnitPosition = 'prefix' | 'suffix'
 
 export type YAxis = {
-  min?: number
-  max?: number
-  label?: string
-  unit?: string
-  unit_position?: UnitPosition
+  min: number | null
+  max: number | null
+  label: string | null
+  unit: string | null
+  unit_position: UnitPosition | null
 }
 
-// Data series types
 export type DataSeriesType = 'line' | 'histogram'
 
 export type DataSeries = {
@@ -52,18 +51,9 @@ export type DataSeries = {
   filters: GenericFilter | null
 }
 
-// Chart form fields (for POST/PATCH requests)
-export type ChartForm = OwnedWithId & {
-  title: string
-  description: string
-  private: boolean
-  x_axis: Partial<XAxis>
-  y_axis: Partial<YAxis>
-  series: Array<Partial<DataSeries>>
-  extras: Record<string, unknown>
-}
+// Type for form where aggregate_y can be empty string for select binding
+export type DataSeriesForm = Omit<DataSeries, 'aggregate_y'> & { aggregate_y: TabularAggregateType | '' | null }
 
-// Chart read fields (API responses)
 export type Chart = Owned & {
   id: string
   title: string
@@ -84,3 +74,11 @@ export type Chart = Owned & {
     views: number
   }
 }
+
+export type ChartForApi = OwnedWithId & Pick<Chart, 'title' | 'description' | 'private' | 'x_axis' | 'y_axis' | 'series' | 'extras'>
+
+export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organization'> & {
+  owned: OwnedWithId
+  x_axis: XAxisForm
+  series: Array<DataSeriesForm>
+}
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 3c181cf4d..b83001733 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -8,7 +8,7 @@
         >Titre</label>
         <input
           id="chart-title"
-          v-model="titleRef"
+          v-model="title"
           type="text"
           class="w-full fr-input"
         >
@@ -21,7 +21,7 @@
         >Description</label>
         <textarea
           id="chart-description"
-          v-model="descRef"
+          v-model="desc"
           class="w-full fr-input"
           rows="2"
         />
@@ -29,7 +29,7 @@
       <div class="mt-4">
         <ClientOnly>
           <ChartViewerWrapper
-            v-model="chartPreview"
+            v-model="form"
             @columns="columns = $event"
           />
         </ClientOnly>
@@ -118,13 +118,13 @@
           >Column</label>
           <select
             id="x-axis-column"
-            v-model="form.xAxisColumn"
+            v-model="form.x_axis.column_x"
             class="w-full fr-select"
           >
             <optgroup
               v-for="{ key, value } in flattenedColumns"
               :key="key"
-              :label="key"
+              :label="savedResources[key].title"
             >
               <option
                 v-for="column in value"
@@ -143,7 +143,7 @@
           >Type</label>
           <select
             id="x-axis-type"
-            v-model="form.xAxisType"
+            v-model="form.x_axis.type"
             class="w-full fr-select"
           >
             <option value="discrete">
@@ -161,7 +161,7 @@
           >Trier par</label>
           <select
             id="x-axis-sort-by"
-            v-model="form.xAxisSortBy"
+            v-model="form.x_axis.sort_x_by"
             class="w-full fr-select"
           >
             <option value="">
@@ -182,7 +182,7 @@
           >Direction du tri</label>
           <select
             id="x-axis-sort-direction"
-            v-model="form.xAxisSortDirection"
+            v-model="form.x_axis.sort_x_direction"
             class="w-full fr-select"
           >
             <option value="asc">
@@ -207,7 +207,7 @@
           >Label</label>
           <input
             id="y-axis-label"
-            v-model="form.yAxisLabel"
+            v-model="form.y_axis.label"
             type="text"
             class="w-full fr-input"
           >
@@ -220,7 +220,7 @@
             >Min</label>
             <input
               id="y-axis-min"
-              v-model.number="form.yAxisMin"
+              v-model.number="form.y_axis.min"
               type="number"
               class="w-full fr-input"
             >
@@ -232,7 +232,7 @@
             >Max</label>
             <input
               id="y-axis-max"
-              v-model.number="form.yAxisMax"
+              v-model.number="form.y_axis.max"
               type="number"
               class="w-full fr-input"
             >
@@ -246,7 +246,7 @@
             >Unité</label>
             <input
               id="y-axis-unit"
-              v-model="form.yAxisUnit"
+              v-model="form.y_axis.unit"
               type="text"
               class="w-full fr-input"
               placeholder="ex: €, %, kg"
@@ -259,7 +259,7 @@
             >Position unité</label>
             <select
               id="y-axis-unit-position"
-              v-model="form.yAxisUnitPosition"
+              v-model="form.y_axis.unit_position"
               class="w-full fr-select"
             >
               <option value="suffix">
@@ -325,13 +325,15 @@
               v-model="serie.column_y"
               class="w-full fr-select"
             >
-              <option
-                v-for="column in columns[serie.resource_id]"
-                :key="column"
-                :value="column"
-              >
-                {{ column }}
-              </option>
+              <template v-if="serie.resource_id">
+                <option
+                  v-for="column in columns[serie.resource_id]"
+                  :key="column"
+                  :value="column"
+                >
+                  {{ column }}
+                </option>
+              </template>
             </select>
           </div>
 
@@ -341,7 +343,7 @@
               v-model="serie.aggregate_y"
               class="w-full fr-select"
             >
-              <option value="">
+              <option :value="null">
                 Non
               </option>
               <option value="sum">
@@ -355,7 +357,14 @@
         </div>
         <button
           class="text-sm text-datagouv underline"
-          @click="form.series.push(dummySerie)"
+          @click="form.series.push({
+            type: 'histogram',
+            column_y: '',
+            resource_id: selectedResource,
+            column_x_name_override: null,
+            filters: null,
+            aggregate_y: null,
+          })"
         >
           + Ajouter une série
         </button>
@@ -373,113 +382,73 @@
 </template>
 
 <script setup lang="ts">
-import type { XAxisType, XAxisSortBy, SortDirection, UnitPosition, DataSeries, Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
-import { SearchableSelect, useGetProfile, useHasTabularData, toast, BrandedButton, useDebouncedRef } from '@datagouv/components-next'
+import type { Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
+import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton } from '@datagouv/components-next'
 import { RiDeleteBinLine } from '@remixicon/vue'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 import { useAPI } from '~/utils/api'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('../datagouv-components/src/components/Chart/ChartViewerWrapper.vue'))
+
+const form = defineModel<ChartForm>({
+  required: true,
+})
+
 const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
 
-const dataset = ref<DatasetSuggest>()
+const dataset = ref<DatasetSuggest | undefined>({ id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' } as DatasetSuggest)
 const savedResources = reactive<Record<string, Resource>>({})
-const selectedResource = ref('')
+const selectedResource = ref('14dba482-41e3-4c54-b82a-d8c11d1d80eb')
 const savedChart = ref<Chart | null>(null)
 const selectedChartId = ref('')
 
+const debounceMs = 300
+const title = ref(form.value.title)
+const desc = ref(form.value.description)
+
+const { debounced: titleDebounced } = useDebouncedRef(title, debounceMs)
+const { debounced: descDebounced } = useDebouncedRef(desc, debounceMs)
+
 const resources = computed(() => Object.values(savedResources))
 
 const { $api } = useNuxtApp()
 const hasTabularData = useHasTabularData()
 const getProfile = useGetProfile()
 
-const dummyDataset = { id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' } as DatasetSuggest
-const dummySerie: DataSeries = {
-  type: 'histogram',
-  column_y: 'Nombre de logements',
-  aggregate_y: null,
-  resource_id: '14dba482-41e3-4c54-b82a-d8c11d1d80eb',
-  filters: null,
-  column_x_name_override: null,
-}
-
 const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
 
-dataset.value = dummyDataset
-
-const form = ref<{
-  xAxisColumn: string
-  xAxisType: XAxisType
-  xAxisSortBy: XAxisSortBy | ''
-  xAxisSortDirection: SortDirection
-  yAxisLabel: string
-  yAxisMin: number | undefined
-  yAxisMax: number | undefined
-  yAxisUnit: string
-  yAxisUnitPosition: UnitPosition
-  series: Array<DataSeries>
-}>({
-  xAxisColumn: 'nom_region',
-  xAxisType: 'discrete',
-  xAxisSortBy: '',
-  xAxisSortDirection: 'asc',
-  yAxisLabel: '',
-  yAxisMin: undefined,
-  yAxisMax: undefined,
-  yAxisUnit: '',
-  yAxisUnitPosition: 'suffix',
-  series: [dummySerie],
-})
-
-const user = useMaybeMe()
-
-const debounceMs = 300
-const titleRef = ref('Mon graphique')
-const descRef = ref('')
-
-const titleDebounced = useDebouncedRef(titleRef, debounceMs)
-const descDebounced = useDebouncedRef(descRef, debounceMs)
-
-const chartPreview = computed<ChartForm>(() => ({
-  organization: null,
-  owner: user.value ? user.value.id : 'dummyForDS',
-  title: titleDebounced.debounced.value,
-  description: descDebounced.debounced.value,
-  private: false,
-  x_axis: {
-    column_x: form.value.xAxisColumn,
-    type: form.value.xAxisType,
-    ...(form.value.xAxisSortBy ? { sort_x_by: form.value.xAxisSortBy, sort_x_direction: form.value.xAxisSortDirection } : {}),
-  },
-  y_axis: {
-    label: form.value.yAxisLabel || undefined,
-    min: form.value.yAxisMin,
-    max: form.value.yAxisMax,
-    unit: form.value.yAxisUnit || undefined,
-    unit_position: form.value.yAxisUnitPosition,
-  },
-  series: form.value.series,
-  extras: {},
-} satisfies ChartForm))
-
 watch(dataset, async (newDataset) => {
-  if (newDataset) {
-    try {
-      const fetchedResources = await $api<PaginatedArray<Resource>>(`https://demo.data.gouv.fr/api/2/datasets/${newDataset.id}/resources/`)
-      for (const r of fetchedResources.data.filter(resource => hasTabularData(resource))) {
-        savedResources[r.id] = r
-      }
+  if (!newDataset) return
+  try {
+    const fetchedResources = await $api<PaginatedArray<Resource>>(`https://demo.data.gouv.fr/api/2/datasets/${newDataset.id}/resources/`)
+    for (const r of fetchedResources.data.filter(resource => hasTabularData(resource))) {
+      savedResources[r.id] = r
     }
-    catch (error) {
-      console.error('Failed to fetch resources:', error)
+  }
+  catch (error) {
+    console.error('Failed to fetch resources:', error)
+  }
+}, { immediate: true })
+
+watch(selectedResource, async (r) => {
+  if (r) {
+    await loadMissingResourcesForChart(new Set([r]))
+    if (columns.value[r]) {
+      return
     }
+    const profile = await getProfile(r)
+    columns.value[r] = profile.profile.header
   }
+}, { immediate: true })
+
+watch([titleDebounced, descDebounced], ([title, desc]) => {
+  form.value.title = title
+  form.value.description = desc
 })
 
-const loadMissingResourcesForChart = async (resourceIds: Set<string>) => {
+async function loadMissingResourcesForChart(resourceIds: Set<string>) {
   for (const id of resourceIds) {
     if (savedResources[id]) continue
 
@@ -493,23 +462,13 @@ const loadMissingResourcesForChart = async (resourceIds: Set<string>) => {
   }
 }
 
-watch([selectedResource], async ([r]) => {
-  if (r) {
-    if (columns.value[r]) {
-      return
-    }
-    const profile = await getProfile(r)
-    columns.value[r] = profile.profile.header
-  }
-})
-
-const suggestDataset = async (q: string): Promise<Array<DatasetSuggest>> => {
+async function suggestDataset(q: string): Promise<Array<DatasetSuggest>> {
   return await $api<Array<DatasetSuggest>>('https://demo.data.gouv.fr/api/1/datasets/suggest/', {
     query: { q, size: 5 },
   })
 }
 
-const loadChart = async (id: string) => {
+async function loadChart(id: string) {
   try {
     const { data } = await useAPI<Chart>(`/api/1/visualizations/${id}/`)
     if (data.value) {
@@ -522,20 +481,9 @@ const loadChart = async (id: string) => {
         }
       }
 
-      form.value = {
-        ...data.value,
-        xAxisType: data.value.x_axis.type,
-        xAxisColumn: data.value.x_axis.column_x,
-        xAxisSortBy: data.value.x_axis.sort_x_by || '',
-        xAxisSortDirection: data.value.x_axis.sort_x_direction || 'asc',
-        yAxisLabel: data.value.y_axis.label || '',
-        yAxisMin: data.value.y_axis.min,
-        yAxisMax: data.value.y_axis.max,
-        yAxisUnit: data.value.y_axis.unit || '',
-        yAxisUnitPosition: data.value.y_axis.unit_position || 'suffix',
-      }
-      titleRef.value = data.value.title
-      descRef.value = data.value.description
+      form.value = toChartForm(data.value)
+      title.value = data.value.title
+      desc.value = data.value.description
 
       await loadMissingResourcesForChart(chartResources)
 
@@ -548,24 +496,24 @@ const loadChart = async (id: string) => {
   }
 }
 
-const loadSelectedChart = () => {
+function loadSelectedChart() {
   if (selectedChartId.value) {
     loadChart(selectedChartId.value)
   }
 }
 
-const saveChart = async () => {
+async function saveChart() {
   try {
     if (savedChart.value?.id) {
       savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value.id}/`, {
         method: 'PATCH',
-        body: JSON.stringify(chartPreview.value),
+        body: JSON.stringify(form.value),
       })
     }
     else {
       savedChart.value = await $api<Chart>('/api/1/visualizations/', {
         method: 'POST',
-        body: JSON.stringify(chartPreview.value),
+        body: JSON.stringify(form.value),
       })
     }
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 26763a2af..766adaadb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -213,7 +213,7 @@ export default defineNuxtConfig({
 
   devServer: {
     port: 3000,
-    host: 'localhost',
+    host: 'dev.local',
   },
 
   features: {
diff --git a/pages/design/chart.vue b/pages/design/chart.vue
index c7eea00b9..a84d94094 100644
--- a/pages/design/chart.vue
+++ b/pages/design/chart.vue
@@ -12,11 +12,44 @@
       Chart Configurator
     </h1>
 
-    <ChartConfigurator />
+    <ChartConfigurator v-model="chart" />
   </div>
 </template>
 
 <script setup lang="ts">
+import type { ChartForm } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import ChartConfigurator from '~/design-system/ChartConfigurator.vue'
+
+const chart = ref<ChartForm>({
+  owned: {
+    organization: null,
+    owner: 'dummyForDS',
+  },
+  title: 'Mon graphique',
+  description: '',
+  private: false,
+  x_axis: {
+    column_x: 'libellé_EPCI',
+    type: 'discrete',
+    sort_x_by: null,
+    sort_x_direction: null,
+  },
+  y_axis: {
+    label: '',
+    min: null,
+    max: null,
+    unit: '',
+    unit_position: 'suffix',
+  },
+  series: [{
+    type: 'histogram',
+    column_y: 'Nombre de logements',
+    aggregate_y: null,
+    resource_id: '14dba482-41e3-4c54-b82a-d8c11d1d80eb',
+    filters: null,
+    column_x_name_override: null,
+  }],
+  extras: {},
+})
 </script>
diff --git a/utils/charts.ts b/utils/charts.ts
new file mode 100644
index 000000000..59d80324e
--- /dev/null
+++ b/utils/charts.ts
@@ -0,0 +1,55 @@
+import type { Chart, ChartForm, ChartForApi } from '@datagouv/components-next'
+
+export function toChartForm(chart: Chart) {
+  return {
+    title: chart.title,
+    description: chart.description,
+    private: chart.private,
+    owned: chart.organization ? { organization: chart.organization.id, owner: null } : { owner: chart.owner.id, organization: null },
+    x_axis: {
+      column_x: chart.x_axis.column_x,
+      type: chart.x_axis.type,
+      sort_x_by: chart.x_axis.sort_x_by || '',
+      sort_x_direction: chart.x_axis.sort_x_direction || 'asc',
+    },
+    y_axis: {
+      label: chart.y_axis.label || '',
+      min: chart.y_axis.min,
+      max: chart.y_axis.max,
+      unit: chart.y_axis.unit || '',
+      unit_position: chart.y_axis.unit_position || 'suffix',
+    },
+    series: chart.series.map(serie => ({
+      ...serie,
+      aggregate_y: serie.aggregate_y || '',
+    })),
+    extras: chart.extras,
+  } satisfies ChartForm
+}
+
+export function toChartApi(chartForm: ChartForm): ChartForApi {
+  return {
+    ...chartForm.owned,
+    title: chartForm.title,
+    description: chartForm.description,
+    private: chartForm.private,
+    x_axis: {
+      column_x: chartForm.x_axis.column_x,
+      type: chartForm.x_axis.type,
+      sort_x_by: chartForm.x_axis.sort_x_by || null,
+      sort_x_direction: chartForm.x_axis.sort_x_direction || null,
+    },
+    y_axis: {
+      label: chartForm.y_axis.label ?? null,
+      min: chartForm.y_axis.min ?? null,
+      max: chartForm.y_axis.max ?? null,
+      unit: chartForm.y_axis.unit ?? null,
+      unit_position: chartForm.y_axis.unit_position ?? null,
+    },
+    series: chartForm.series.map(serie => ({
+      ...serie,
+      aggregate_y: serie.aggregate_y || null,
+    })),
+    extras: chartForm.extras,
+  }
+}

From fc1e55528c96931693d6bc364c38740f9f4b99d8 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 11 Mar 2026 14:25:26 +0100
Subject: [PATCH 024/121] fix: condition

---
 .../src/components/ResourceAccordion/Preview.vue                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datagouv-components/src/components/ResourceAccordion/Preview.vue b/datagouv-components/src/components/ResourceAccordion/Preview.vue
index 71505774e..d52d38f56 100644
--- a/datagouv-components/src/components/ResourceAccordion/Preview.vue
+++ b/datagouv-components/src/components/ResourceAccordion/Preview.vue
@@ -142,7 +142,7 @@ async function getTableInfos(page: number, sortConfig?: SortConfig) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
-    if ('data' in response && response.data && response.data.length > 0) {
+    if ('data' in response && response.data && 0 in response.data) {
       // Update existing rows
       rows.value = response.data
       columns.value = Object.keys(response.data[0]).filter(item => item !== '__id')

From 103c98feb70e146ad26775764768e7f32e35246d Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 13 Mar 2026 15:11:02 +0100
Subject: [PATCH 025/121] fix: broken import

---
 design-system/SearchInput.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/design-system/SearchInput.vue b/design-system/SearchInput.vue
index a1024e247..dd286fb83 100644
--- a/design-system/SearchInput.vue
+++ b/design-system/SearchInput.vue
@@ -11,5 +11,7 @@
 </template>
 
 <script setup lang="ts">
+import { SearchInput } from '@datagouv/components-next'
+
 const model = ref('')
 </script>

From 95df6247c1e4d64931c55d03583dfb24056df86d Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 20 Mar 2026 13:26:47 +0100
Subject: [PATCH 026/121] feat(visualizations): switch to single serie
 interface

---
 design-system/ChartConfigurator.vue | 25 ++-----------------------
 1 file changed, 2 insertions(+), 23 deletions(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index b83001733..e7388bf11 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -275,12 +275,12 @@
 
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
-          Séries
+          Série
         </p>
         <div
           v-for="(serie, index) in form.series"
           :key="index"
-          class="border rounded-lg p-4 mb-2 space-y-4"
+          class="space-y-4"
         >
           <div class="flex items-center gap-2 mb-2">
             <select
@@ -294,13 +294,6 @@
                 Histogramme
               </option>
             </select>
-            <button
-              title="Supprimer la série"
-              class="text-new-error rounded-full p-2 border border-new-error"
-              @click="form.series.splice(index, 1)"
-            >
-              <RiDeleteBinLine class="size-4" />
-            </button>
           </div>
 
           <div>
@@ -355,19 +348,6 @@
             </select>
           </div>
         </div>
-        <button
-          class="text-sm text-datagouv underline"
-          @click="form.series.push({
-            type: 'histogram',
-            column_y: '',
-            resource_id: selectedResource,
-            column_x_name_override: null,
-            filters: null,
-            aggregate_y: null,
-          })"
-        >
-          + Ajouter une série
-        </button>
       </fieldset>
 
       <div class="px-6">
@@ -384,7 +364,6 @@
 <script setup lang="ts">
 import type { Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
 import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton } from '@datagouv/components-next'
-import { RiDeleteBinLine } from '@remixicon/vue'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 import { useAPI } from '~/utils/api'

From 768fa8afddd63679868f2308e784fb644abeabf3 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 20 Mar 2026 14:08:53 +0100
Subject: [PATCH 027/121] feat(visualizations): wording

---
 design-system/ChartConfigurator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index e7388bf11..ea11e6b3a 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -70,7 +70,7 @@
       </fieldset>
       <fieldset class="px-6 space-y-4">
         <p class="mb-2 font-bold">
-          Ressources
+          {{ $t('Source de données') }}
         </p>
         <SearchableSelect
           v-model="dataset"

From 3c1edd3bb42a9dc9162dd1edce70887db13e4ed8 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 20 Mar 2026 17:10:42 +0100
Subject: [PATCH 028/121] feat(visualizations): move chart type outside of
 series

Also add translations
---
 .../src/types/visualizations.ts               |   1 +
 design-system/ChartConfigurator.vue           | 117 ++++++++++--------
 utils/charts.ts                               |   4 +-
 3 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index 560dc4eea..b52f734d1 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -81,4 +81,5 @@ export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organ
   owned: OwnedWithId
   x_axis: XAxisForm
   series: Array<DataSeriesForm>
+  chart_type?: DataSeriesType | null
 }
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index ea11e6b3a..f6649a97b 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -5,7 +5,7 @@
         <label
           for="chart-title"
           class="block text-sm font-medium mb-1"
-        >Titre</label>
+        >{{ $t('Titre') }}</label>
         <input
           id="chart-title"
           v-model="title"
@@ -18,7 +18,7 @@
         <label
           for="chart-description"
           class="block text-sm font-medium mb-1"
-        >Description</label>
+        >{{ $t('Description') }}</label>
         <textarea
           id="chart-description"
           v-model="desc"
@@ -38,7 +38,7 @@
     <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
       <fieldset class="px-6 space-y-4">
         <p class="mb-2 font-bold">
-          Graphiques existants
+          {{ $t('Graphiques existants') }}
         </p>
         <div class="flex gap-2">
           <select
@@ -49,7 +49,7 @@
               value=""
               disabled
             >
-              Sélectionnez un graphique
+              {{ $t('Sélectionnez un graphique') }}
             </option>
             <option
               v-for="chart in charts?.data"
@@ -64,7 +64,7 @@
             :disabled="!selectedChartId"
             @click="loadSelectedChart"
           >
-            Charger
+            {{ $t('Charger') }}
           </button>
         </div>
       </fieldset>
@@ -85,7 +85,7 @@
         <label
           for="resource-select"
           class="mb-1"
-        >Choix de la ressource</label>
+        >{{ $t('Choix de la ressource') }}</label>
         <select
           id="resource-select"
           v-model="selectedResource"
@@ -96,7 +96,7 @@
             value=""
             disabled
           >
-            {{ dataset ? 'Sélectionnez une ressource' : 'Sélectionnez d\'abord un jeu de données' }}
+            {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
           </option>
           <option
             v-for="resource in resources"
@@ -109,13 +109,31 @@
       </fieldset>
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
-          Axe X
+          {{ $t('Type de graphique') }}
+        </p>
+        <div>
+          <select
+            v-model="form.chart_type"
+            class="w-full fr-select"
+          >
+            <option value="line">
+              {{ $t('Ligne') }}
+            </option>
+            <option value="histogram">
+              {{ $t('Histogramme') }}
+            </option>
+          </select>
+        </div>
+      </fieldset>
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Axe X') }}
         </p>
         <div>
           <label
             for="x-axis-column"
             class="mb-1"
-          >Column</label>
+          >{{ $t('Column') }}</label>
           <select
             id="x-axis-column"
             v-model="form.x_axis.column_x"
@@ -140,17 +158,17 @@
           <label
             for="x-axis-type"
             class="mb-1"
-          >Type</label>
+          >{{ $t('Type') }}</label>
           <select
             id="x-axis-type"
             v-model="form.x_axis.type"
             class="w-full fr-select"
           >
             <option value="discrete">
-              Discret (catégories)
+              {{ $t('Discret (catégories)') }}
             </option>
             <option value="continuous">
-              Continu (valeurs)
+              {{ $t('Continu (valeurs)') }}
             </option>
           </select>
         </div>
@@ -158,20 +176,20 @@
           <label
             for="x-axis-sort-by"
             class="mb-1"
-          >Trier par</label>
+          >{{ $t('Trier par') }}</label>
           <select
             id="x-axis-sort-by"
             v-model="form.x_axis.sort_x_by"
             class="w-full fr-select"
           >
             <option value="">
-              Aucun
+              {{ $t('Aucun') }}
             </option>
             <option value="axis_x">
-              Axe X
+              {{ $t('Axe X') }}
             </option>
             <option value="axis_y">
-              Axe Y
+              {{ $t('Axe Y') }}
             </option>
           </select>
         </div>
@@ -179,17 +197,17 @@
           <label
             for="x-axis-sort-direction"
             class="mb-1"
-          >Direction du tri</label>
+          >{{ $t('Direction du tri') }}</label>
           <select
             id="x-axis-sort-direction"
             v-model="form.x_axis.sort_x_direction"
             class="w-full fr-select"
           >
             <option value="asc">
-              Ascendant
+              {{ $t('Ascendant') }}
             </option>
             <option value="desc">
-              Descendant
+              {{ $t('Descendant') }}
             </option>
           </select>
         </div>
@@ -198,13 +216,13 @@
       <!-- Y Axis -->
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
-          Axe Y
+          {{ $t('Axe Y') }}
         </p>
         <div>
           <label
             for="y-axis-label"
             class="mb-1"
-          >Label</label>
+          >{{ $t('Label') }}</label>
           <input
             id="y-axis-label"
             v-model="form.y_axis.label"
@@ -217,7 +235,7 @@
             <label
               for="y-axis-min"
               class="block text-sm font-medium mb-1"
-            >Min</label>
+            >{{ $t('Min') }}</label>
             <input
               id="y-axis-min"
               v-model.number="form.y_axis.min"
@@ -229,7 +247,7 @@
             <label
               for="y-axis-max"
               class="block text-sm font-medium mb-1"
-            >Max</label>
+            >{{ $t('Max') }}</label>
             <input
               id="y-axis-max"
               v-model.number="form.y_axis.max"
@@ -243,30 +261,30 @@
             <label
               for="y-axis-unit"
               class="block text-sm font-medium mb-1"
-            >Unité</label>
+            >{{ $t('Unité') }}</label>
             <input
               id="y-axis-unit"
               v-model="form.y_axis.unit"
               type="text"
               class="w-full fr-input"
-              placeholder="ex: €, %, kg"
+              :placeholder="$t('ex: €, %, kg')"
             >
           </div>
           <div>
             <label
               for="y-axis-unit-position"
               class="block text-sm font-medium mb-1"
-            >Position unité</label>
+            >{{ $t('Position unité') }}</label>
             <select
               id="y-axis-unit-position"
               v-model="form.y_axis.unit_position"
               class="w-full fr-select"
             >
               <option value="suffix">
-                Suffixe
+                {{ $t('Suffixe') }}
               </option>
               <option value="prefix">
-                Préfixe
+                {{ $t('Préfixe') }}
               </option>
             </select>
           </div>
@@ -275,29 +293,15 @@
 
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
-          Série
+          {{ $t('Série') }}
         </p>
         <div
           v-for="(serie, index) in form.series"
           :key="index"
           class="space-y-4"
         >
-          <div class="flex items-center gap-2 mb-2">
-            <select
-              v-model="serie.type"
-              class="flex-1 fr-select"
-            >
-              <option value="line">
-                Ligne
-              </option>
-              <option value="histogram">
-                Histogramme
-              </option>
-            </select>
-          </div>
-
           <div>
-            <label class="block text-sm font-medium mb-1">Ressource</label>
+            <label class="block text-sm font-medium mb-1">{{ $t('Ressource') }}</label>
             <select
               v-model="serie.resource_id"
               class="w-full fr-select"
@@ -313,7 +317,7 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium mb-1">Colonne Y</label>
+            <label class="block text-sm font-medium mb-1">{{ $t('Colonne Y') }}</label>
             <select
               v-model="serie.column_y"
               class="w-full fr-select"
@@ -331,19 +335,19 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium mb-1">Agrégation</label>
+            <label class="block text-sm font-medium mb-1">{{ $t('Agrégation') }}</label>
             <select
               v-model="serie.aggregate_y"
               class="w-full fr-select"
             >
               <option :value="null">
-                Non
+                {{ $t('Non') }}
               </option>
               <option value="sum">
-                Somme
+                {{ $t('Somme') }}
               </option>
               <option value="avg">
-                Moyenne
+                {{ $t('Moyenne') }}
               </option>
             </select>
           </div>
@@ -354,7 +358,7 @@
         <BrandedButton
           @click="saveChart"
         >
-          Sauvegarder le graphique
+          {{ $t('Sauvegarder le graphique') }}
         </BrandedButton>
       </div>
     </div>
@@ -374,6 +378,8 @@ const form = defineModel<ChartForm>({
   required: true,
 })
 
+const { t } = useTranslation()
+
 const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
 
@@ -466,12 +472,12 @@ async function loadChart(id: string) {
 
       await loadMissingResourcesForChart(chartResources)
 
-      toast.success('Graphique chargé !')
+      toast.success(t('Graphique chargé !'))
     }
   }
   catch (error) {
     console.error('Failed to load chart:', error)
-    toast.error('Erreur lors du chargement du graphique')
+    toast.error(t('Erreur lors du chargement du graphique'))
   }
 }
 
@@ -483,20 +489,21 @@ function loadSelectedChart() {
 
 async function saveChart() {
   try {
+    const chartForApi = toChartApi(form.value)
     if (savedChart.value?.id) {
       savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value.id}/`, {
         method: 'PATCH',
-        body: JSON.stringify(form.value),
+        body: JSON.stringify(chartForApi),
       })
     }
     else {
       savedChart.value = await $api<Chart>('/api/1/visualizations/', {
         method: 'POST',
-        body: JSON.stringify(form.value),
+        body: JSON.stringify(chartForApi),
       })
     }
 
-    toast.success(savedChart.value?.id ? 'Graphique mis à jour !' : 'Graphique sauvegardé !')
+    toast.success(savedChart.value?.id ? t('Graphique mis à jour !') : t('Graphique sauvegardé !'))
     await refresh()
   }
   catch (error) {
diff --git a/utils/charts.ts b/utils/charts.ts
index 59d80324e..4d9a9e540 100644
--- a/utils/charts.ts
+++ b/utils/charts.ts
@@ -24,6 +24,7 @@ export function toChartForm(chart: Chart) {
       aggregate_y: serie.aggregate_y || '',
     })),
     extras: chart.extras,
+    chart_type: chart.series.length > 0 ? chart.series[0].type : null,
   } satisfies ChartForm
 }
 
@@ -46,8 +47,9 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
       unit: chartForm.y_axis.unit ?? null,
       unit_position: chartForm.y_axis.unit_position ?? null,
     },
-    series: chartForm.series.map(serie => ({
+    series: chartForm.series.map((serie, index) => ({
       ...serie,
+      type: index === 0 && chartForm.chart_type ? chartForm.chart_type : serie.type,
       aggregate_y: serie.aggregate_y || null,
     })),
     extras: chartForm.extras,

From f3c3975363a97ddcbf91ec998f09221a6d697286 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 20 Mar 2026 17:12:17 +0100
Subject: [PATCH 029/121] feat(visualizations): update default design chart
 value

---
 pages/design/chart.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/design/chart.vue b/pages/design/chart.vue
index a84d94094..cd7470608 100644
--- a/pages/design/chart.vue
+++ b/pages/design/chart.vue
@@ -42,6 +42,7 @@ const chart = ref<ChartForm>({
     unit: '',
     unit_position: 'suffix',
   },
+  chart_type: 'histogram',
   series: [{
     type: 'histogram',
     column_y: 'Nombre de logements',

From 2bb06e81dacfaa61fb8aaf80e69bbdd1da2e61ca Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Mon, 23 Mar 2026 11:14:42 +0100
Subject: [PATCH 030/121] =?UTF-8?q?ui:=20remove=20resource=20select=20from?=
 =?UTF-8?q?=20s=C3=A9rie=20fieldset=20-=20Remove=20per-series=20resource?=
 =?UTF-8?q?=20selection=20-=20All=20series=20now=20use=20the=20globally=20?=
 =?UTF-8?q?selected=20resource=20-=20Simplifies=20UI=20and=20ensures=20con?=
 =?UTF-8?q?sistency=20across=20series?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 design-system/ChartConfigurator.vue | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index f6649a97b..3de9f5f75 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -300,31 +300,15 @@
           :key="index"
           class="space-y-4"
         >
-          <div>
-            <label class="block text-sm font-medium mb-1">{{ $t('Ressource') }}</label>
-            <select
-              v-model="serie.resource_id"
-              class="w-full fr-select"
-            >
-              <option
-                v-for="resource in resources"
-                :key="resource.id"
-                :value="resource.id"
-              >
-                {{ resource.title }}
-              </option>
-            </select>
-          </div>
-
           <div>
             <label class="block text-sm font-medium mb-1">{{ $t('Colonne Y') }}</label>
             <select
               v-model="serie.column_y"
               class="w-full fr-select"
             >
-              <template v-if="serie.resource_id">
+              <template v-if="selectedResource">
                 <option
-                  v-for="column in columns[serie.resource_id]"
+                  v-for="column in columns[selectedResource]"
                   :key="column"
                   :value="column"
                 >

From 95b68b4daafe1cbe4074a7de02536d4078b90158 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Mon, 23 Mar 2026 17:07:23 +0100
Subject: [PATCH 031/121] types: add CombinedSort type alias for merged sort
 select

---
 datagouv-components/src/types/visualizations.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index b52f734d1..521e426e7 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -28,7 +28,9 @@ export type XAxis = {
   type: XAxisType
 }
 
-export type XAxisForm = Omit<XAxis, 'sort_x_by'> & { sort_x_by: XAxisSortBy | '' | null }
+export type CombinedSort = '' | 'axis_x-asc' | 'axis_x-desc' | 'axis_y-asc' | 'axis_y-desc'
+
+export type XAxisForm = Omit<XAxis, 'sort_x_by' | 'sort_x_direction'> & { sort_combined: CombinedSort }
 
 export type UnitPosition = 'prefix' | 'suffix'
 

From 7c02fb726482d354b77520464ba5af4ff29e5398 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Mon, 23 Mar 2026 17:13:55 +0100
Subject: [PATCH 032/121] feat: update toChartForm and toChartApi mappers for
 combined sort

---
 utils/charts.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/utils/charts.ts b/utils/charts.ts
index 4d9a9e540..46a76ddda 100644
--- a/utils/charts.ts
+++ b/utils/charts.ts
@@ -9,8 +9,9 @@ export function toChartForm(chart: Chart) {
     x_axis: {
       column_x: chart.x_axis.column_x,
       type: chart.x_axis.type,
-      sort_x_by: chart.x_axis.sort_x_by || '',
-      sort_x_direction: chart.x_axis.sort_x_direction || 'asc',
+      sort_combined: chart.x_axis.sort_x_by && chart.x_axis.sort_x_direction
+        ? `${chart.x_axis.sort_x_by}-${chart.x_axis.sort_x_direction}`
+        : '',
     },
     y_axis: {
       label: chart.y_axis.label || '',
@@ -37,8 +38,12 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
     x_axis: {
       column_x: chartForm.x_axis.column_x,
       type: chartForm.x_axis.type,
-      sort_x_by: chartForm.x_axis.sort_x_by || null,
-      sort_x_direction: chartForm.x_axis.sort_x_direction || null,
+      sort_x_by: chartForm.x_axis.sort_combined
+        ? (chartForm.x_axis.sort_combined.split('-')[0] as 'axis_x' | 'axis_y')
+        : null,
+      sort_x_direction: chartForm.x_axis.sort_combined
+        ? (chartForm.x_axis.sort_combined.split('-')[1] as 'asc' | 'desc')
+        : null,
     },
     y_axis: {
       label: chartForm.y_axis.label ?? null,

From 6bc34fe58b4a3da5bd28b835d89cca3dd40a0439 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Mon, 23 Mar 2026 19:30:23 +0100
Subject: [PATCH 033/121] feat: merge sort selects into single combined select

- Update ChartConfigurator.vue to use single sort_combined select
- Update ChartViewer.vue to handle both old and new sort formats
- Update pages/design/chart.vue to use sort_combined
- Update toChartForm/toChartApi mappers for combined sort conversion
- Add CombinedSort type alias in visualizations.ts
---
 .../src/components/Chart/ChartViewer.vue      | 15 ++++++--
 design-system/ChartConfigurator.vue           | 34 ++++++-------------
 pages/design/chart.vue                        |  3 +-
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 8c03f5ef0..9f342ccf9 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -61,8 +61,19 @@ const echartsOption = computed(() => {
 
     // Sort data before passing to ECharts to avoid transform issues
     const sortedData = [...props.series.data[resourceId]]
-    const sortBy = props.chart.x_axis.sort_x_by
-    const sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
+    // Handle both old format (sort_x_by, sort_x_direction) and new format (sort_combined)
+    const sortCombined = (props.chart.x_axis as XAxis | XAxisForm).sort_combined
+    let sortBy: string | null = null
+    let sortDirection: 'asc' | 'desc' = 'asc'
+    if (sortCombined) {
+      const [sort, direction] = sortCombined.split('-')
+      sortBy = sort
+      sortDirection = direction as 'asc' | 'desc'
+    }
+    else {
+      sortBy = (props.chart.x_axis as XAxis).sort_x_by
+      sortDirection = (props.chart.x_axis as XAxis).sort_x_direction ?? 'asc'
+    }
 
     if (sortBy && sortDirection && props.chart.x_axis.column_x) {
       const sortKey = sortBy === 'axis_x' ? xColumn : yColumn
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 3de9f5f75..c2afff142 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -174,40 +174,28 @@
         </div>
         <div>
           <label
-            for="x-axis-sort-by"
+            for="x-axis-sort-combined"
             class="mb-1"
           >{{ $t('Trier par') }}</label>
           <select
-            id="x-axis-sort-by"
-            v-model="form.x_axis.sort_x_by"
+            id="x-axis-sort-combined"
+            v-model="form.x_axis.sort_combined"
             class="w-full fr-select"
           >
             <option value="">
               {{ $t('Aucun') }}
             </option>
-            <option value="axis_x">
-              {{ $t('Axe X') }}
+            <option value="axis_x-asc">
+              {{ $t('Axe X - Ascendant') }}
             </option>
-            <option value="axis_y">
-              {{ $t('Axe Y') }}
+            <option value="axis_x-desc">
+              {{ $t('Axe X - Descendant') }}
             </option>
-          </select>
-        </div>
-        <div>
-          <label
-            for="x-axis-sort-direction"
-            class="mb-1"
-          >{{ $t('Direction du tri') }}</label>
-          <select
-            id="x-axis-sort-direction"
-            v-model="form.x_axis.sort_x_direction"
-            class="w-full fr-select"
-          >
-            <option value="asc">
-              {{ $t('Ascendant') }}
+            <option value="axis_y-asc">
+              {{ $t('Axe Y - Ascendant') }}
             </option>
-            <option value="desc">
-              {{ $t('Descendant') }}
+            <option value="axis_y-desc">
+              {{ $t('Axe Y - Descendant') }}
             </option>
           </select>
         </div>
diff --git a/pages/design/chart.vue b/pages/design/chart.vue
index cd7470608..78895e622 100644
--- a/pages/design/chart.vue
+++ b/pages/design/chart.vue
@@ -32,8 +32,7 @@ const chart = ref<ChartForm>({
   x_axis: {
     column_x: 'libellé_EPCI',
     type: 'discrete',
-    sort_x_by: null,
-    sort_x_direction: null,
+    sort_combined: '',
   },
   y_axis: {
     label: '',

From 107cea157862046672acdecd80e7288654729523 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 25 Mar 2026 15:31:24 +0100
Subject: [PATCH 034/121] feat(visualizations): show column name in sort
 options

---
 E2E-TESTING.md                      |  2 +-
 design-system/ChartConfigurator.vue | 48 +++++++++++++++++------------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/E2E-TESTING.md b/E2E-TESTING.md
index b6cb455eb..d103a7ceb 100644
--- a/E2E-TESTING.md
+++ b/E2E-TESTING.md
@@ -12,7 +12,7 @@ Voir **e2e.yml**.
 
 Les tests E2E simulent un environnement complet avec :
 - **Base de données** : MongoDB (via Docker)
-- **Cache/Queue** : Redis (via Docker)  
+- **Cache/Queue** : Redis (via Docker)
 - **Backend API** : udata (Flask) qui fournit l'API
 - **Frontend** : cdata (Nuxt.js) qui consomme l'API
 
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index c2afff142..0c2124160 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -182,20 +182,12 @@
             v-model="form.x_axis.sort_combined"
             class="w-full fr-select"
           >
-            <option value="">
-              {{ $t('Aucun') }}
-            </option>
-            <option value="axis_x-asc">
-              {{ $t('Axe X - Ascendant') }}
-            </option>
-            <option value="axis_x-desc">
-              {{ $t('Axe X - Descendant') }}
-            </option>
-            <option value="axis_y-asc">
-              {{ $t('Axe Y - Ascendant') }}
-            </option>
-            <option value="axis_y-desc">
-              {{ $t('Axe Y - Descendant') }}
+            <option
+              v-for="(label, value) in sortOptionLabels"
+              :key="value"
+              :value
+            >
+              {{ label }}
             </option>
           </select>
         </div>
@@ -289,8 +281,12 @@
           class="space-y-4"
         >
           <div>
-            <label class="block text-sm font-medium mb-1">{{ $t('Colonne Y') }}</label>
+            <label
+              :for="`column-y-${index}`"
+              class=" block text-sm font-medium mb-1"
+            >{{ $t('Colonne Y') }}</label>
             <select
+              :id="`column-y-${index}`"
               v-model="serie.column_y"
               class="w-full fr-select"
             >
@@ -307,8 +303,12 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium mb-1">{{ $t('Agrégation') }}</label>
+            <label
+              :for="`aggregate-y-${index}`"
+              class="block text-sm font-medium mb-1"
+            >{{ $t('Agrégation') }}</label>
             <select
+              :id="`aggregate-y-${index}`"
               v-model="serie.aggregate_y"
               class="w-full fr-select"
             >
@@ -327,9 +327,7 @@
       </fieldset>
 
       <div class="px-6">
-        <BrandedButton
-          @click="saveChart"
-        >
+        <BrandedButton @click="saveChart">
           {{ $t('Sauvegarder le graphique') }}
         </BrandedButton>
       </div>
@@ -370,6 +368,18 @@ const { debounced: descDebounced } = useDebouncedRef(desc, debounceMs)
 
 const resources = computed(() => Object.values(savedResources))
 
+const sortOptionLabels = computed(() => {
+  const xAxisColumn = form.value.x_axis.column_x
+  const yAxisColumn = form.value.series[0]?.column_y
+  return {
+    '': t('Aucun'),
+    'axis_x-asc': xAxisColumn ? `${xAxisColumn} - ${t('Ascendant')}` : t('Axe X - Ascendant'),
+    'axis_x-desc': xAxisColumn ? `${xAxisColumn} - ${t('Descendant')}` : t('Axe X - Descendant'),
+    'axis_y-asc': yAxisColumn ? `${yAxisColumn} - ${t('Ascendant')}` : t('Axe Y - Ascendant'),
+    'axis_y-desc': yAxisColumn ? `${yAxisColumn} - ${t('Descendant')}` : t('Axe Y - Descendant'),
+  }
+})
+
 const { $api } = useNuxtApp()
 const hasTabularData = useHasTabularData()
 const getProfile = useGetProfile()

From 068bc72338051e3fffb6659751ecc1c8bf08aee6 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 27 Mar 2026 09:36:26 +0100
Subject: [PATCH 035/121] feat(vizualisations): update and work on e2e tests

---
 E2E-TESTING.md                           |   6 +-
 design-system/ChartConfigurator.vue      | 111 +++++++++++------------
 tests/visualizations/sort-select.spec.ts |  51 +++++++++++
 3 files changed, 111 insertions(+), 57 deletions(-)
 create mode 100644 tests/visualizations/sort-select.spec.ts

diff --git a/E2E-TESTING.md b/E2E-TESTING.md
index d103a7ceb..47ca5dea7 100644
--- a/E2E-TESTING.md
+++ b/E2E-TESTING.md
@@ -6,7 +6,7 @@ Ce document explique comment les tests E2E sont configurés pour tester l'intég
 
 ### GitHub Actions
 
-Voir **e2e.yml**.
+Voir **.github/workflows/ci.yml**.
 
 ### Architecture des tests
 
@@ -62,3 +62,7 @@ pnpm run test:e2e
 - `pnpm run test:e2e` : Lance les tests E2E en mode headless
 - `pnpm run test:e2e:ui` : Lance les tests avec l'interface Playwright
 - `pnpm run test:e2e:headed` : Lance les tests en mode visible
+
+## Paramètres fréquemment utilisés
+- `--project firefox`: Lance uniquement les tests pour firefox (existe aussi avec `--project chromium`)
+- `--only-changed`: Lance uniquement les tests modifiés depuis le dernier commit, et les tests qui importent un fichier modifié
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 0c2124160..3b308a56a 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -193,7 +193,61 @@
         </div>
       </fieldset>
 
-      <!-- Y Axis -->
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Série') }}
+        </p>
+        <div
+          v-for="(serie, index) in form.series"
+          :key="index"
+          class="space-y-4"
+        >
+          <div>
+            <label
+              :for="`column-y-${index}`"
+              class=" block text-sm font-medium mb-1"
+            >{{ $t('Colonne Y') }}</label>
+            <select
+              :id="`column-y-${index}`"
+              v-model="serie.column_y"
+              class="w-full fr-select"
+            >
+              <template v-if="selectedResource">
+                <option
+                  v-for="column in columns[selectedResource]"
+                  :key="column"
+                  :value="column"
+                >
+                  {{ column }}
+                </option>
+              </template>
+            </select>
+          </div>
+
+          <div>
+            <label
+              :for="`aggregate-y-${index}`"
+              class="block text-sm font-medium mb-1"
+            >{{ $t('Agrégation') }}</label>
+            <select
+              :id="`aggregate-y-${index}`"
+              v-model="serie.aggregate_y"
+              class="w-full fr-select"
+            >
+              <option :value="null">
+                {{ $t('Non') }}
+              </option>
+              <option value="sum">
+                {{ $t('Somme') }}
+              </option>
+              <option value="avg">
+                {{ $t('Moyenne') }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </fieldset>
+
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
           {{ $t('Axe Y') }}
@@ -271,61 +325,6 @@
         </div>
       </fieldset>
 
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Série') }}
-        </p>
-        <div
-          v-for="(serie, index) in form.series"
-          :key="index"
-          class="space-y-4"
-        >
-          <div>
-            <label
-              :for="`column-y-${index}`"
-              class=" block text-sm font-medium mb-1"
-            >{{ $t('Colonne Y') }}</label>
-            <select
-              :id="`column-y-${index}`"
-              v-model="serie.column_y"
-              class="w-full fr-select"
-            >
-              <template v-if="selectedResource">
-                <option
-                  v-for="column in columns[selectedResource]"
-                  :key="column"
-                  :value="column"
-                >
-                  {{ column }}
-                </option>
-              </template>
-            </select>
-          </div>
-
-          <div>
-            <label
-              :for="`aggregate-y-${index}`"
-              class="block text-sm font-medium mb-1"
-            >{{ $t('Agrégation') }}</label>
-            <select
-              :id="`aggregate-y-${index}`"
-              v-model="serie.aggregate_y"
-              class="w-full fr-select"
-            >
-              <option :value="null">
-                {{ $t('Non') }}
-              </option>
-              <option value="sum">
-                {{ $t('Somme') }}
-              </option>
-              <option value="avg">
-                {{ $t('Moyenne') }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </fieldset>
-
       <div class="px-6">
         <BrandedButton @click="saveChart">
           {{ $t('Sauvegarder le graphique') }}
diff --git a/tests/visualizations/sort-select.spec.ts b/tests/visualizations/sort-select.spec.ts
new file mode 100644
index 000000000..c15f6a5e1
--- /dev/null
+++ b/tests/visualizations/sort-select.spec.ts
@@ -0,0 +1,51 @@
+import { test, expect } from '../base'
+
+test('sort select displays dynamic column names', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  // Check that the sort select now shows dynamic column names instead of static "Axe X - Ascendant"
+  const sortOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+
+  expect(sortOptions[0]).toBe('Aucun')
+
+  // Second option should show the dynamic column name, not "Axe X - Ascendant"
+  expect(sortOptions[1]).toContain('libellé_EPCI')
+  expect(sortOptions[1]).not.toContain('Axe X - Ascendant')
+
+  await page.getByLabel('Trier par').selectOption({ label: 'libellé_EPCI - Descendant' })
+
+  const selectedValue = await page.getByLabel('Trier par').inputValue()
+  expect(selectedValue).toBe('axis_x-desc')
+})
+
+test('sort select updates reactively when column changes', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  const firstOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+  expect(firstOptions[1]).toContain('libellé_EPCI')
+
+  await page.getByLabel('Column').selectOption('nom_region')
+
+  await page.waitForTimeout(500)
+
+  const updatedOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+  expect(updatedOptions[1]).toContain('nom_region')
+  expect(updatedOptions[1]).not.toContain('libellé_EPCI')
+})
+
+test('Y axis sort options show dynamic series column name too', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  await page.waitForTimeout(1000)
+
+  await page.getByLabel('Colonne Y').selectOption('Nombre de logements')
+
+  const sortOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+
+  // Y axis ascending option should show dynamic column name
+  expect(sortOptions[3]).toContain('Nombre de logements')
+  expect(sortOptions[3]).not.toContain('Axe Y - Ascendant')
+})

From eea85d3ab55419541135ea91cc9026ec0dab2b72 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Fri, 27 Mar 2026 10:05:10 +0100
Subject: [PATCH 036/121] test: add initial chart configurator e2e test (title
 debounce)

---
 tests/visualizations/chart-configurator.spec.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 tests/visualizations/chart-configurator.spec.ts

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
new file mode 100644
index 000000000..11c09f0cc
--- /dev/null
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '../base'
+
+test('title input updates form value with debounce', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  await page.getByLabel('Titre').fill('Nouveau titre de graphique')
+
+  // Wait for debounce (300ms as per component)
+  await page.waitForTimeout(400)
+
+  // The chart viewer should reflect the new title
+  await expect(page).not.toContainText('Mon graphique')
+})

From af9992cc19c1e5472204453946dac1a502072433 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 31 Mar 2026 09:12:55 +0200
Subject: [PATCH 037/121] feat(visualizations): add e2e tests

---
 .../src/components/Chart/ChartViewer.vue      |  29 ++---
 .../components/Chart/ChartViewerWrapper.vue   |  29 -----
 datagouv-components/src/main.ts               |   4 +
 design-system/ChartConfigurator.vue           |  65 ++++++----
 pages/design/chart.vue                        |   4 +-
 tests/helpers.ts                              |   4 +
 .../visualizations/chart-configurator.spec.ts | 114 +++++++++++++++++-
 7 files changed, 171 insertions(+), 78 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 9f342ccf9..d827aa12b 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -14,7 +14,7 @@ import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, Datas
 import VChart from 'vue-echarts'
 import { computed } from 'vue'
 import { summarize } from '../../functions/helpers'
-import type { Chart, DataSeries, XAxis, YAxis, ChartForm, XAxisForm } from '../../types/visualizations'
+import type { Chart, XAxis, YAxis, ChartForm, XAxisForm } from '../../types/visualizations'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
 
@@ -26,10 +26,6 @@ const props = defineProps<{
   }
 }>()
 
-function mapSeriesType(type: DataSeries['type']): 'line' | 'bar' {
-  return (type ?? 'line') === 'histogram' ? 'bar' : 'line'
-}
-
 function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
   if (!xAxis) return 'category'
   return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
@@ -48,31 +44,26 @@ const echartsOption = computed(() => {
   const seriesCount = props.chart.series.length
   if (!props.chart.series || seriesCount === 0) return
 
-  // Create series configuration with data mapping
   const seriesData = 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 seriesType = s.type
 
-    if (!xColumn || !yColumn || !resourceId || !seriesType || !props.series.data[resourceId] || !props.series.columns[resourceId]) {
+    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !props.series.columns[resourceId]) {
       return null
     }
 
-    // Sort data before passing to ECharts to avoid transform issues
     const sortedData = [...props.series.data[resourceId]]
-    // Handle both old format (sort_x_by, sort_x_direction) and new format (sort_combined)
-    const sortCombined = (props.chart.x_axis as XAxis | XAxisForm).sort_combined
     let sortBy: string | null = null
     let sortDirection: 'asc' | 'desc' = 'asc'
-    if (sortCombined) {
-      const [sort, direction] = sortCombined.split('-')
-      sortBy = sort
+    if ('sort_combined' in props.chart.x_axis) {
+      const [sort, direction] = props.chart.x_axis.sort_combined.split('-')
+      sortBy = sort ?? null
       sortDirection = direction as 'asc' | 'desc'
     }
     else {
-      sortBy = (props.chart.x_axis as XAxis).sort_x_by
-      sortDirection = (props.chart.x_axis as XAxis).sort_x_direction ?? 'asc'
+      sortBy = props.chart.x_axis.sort_x_by
+      sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
     }
 
     if (sortBy && sortDirection && props.chart.x_axis.column_x) {
@@ -86,9 +77,13 @@ const echartsOption = computed(() => {
       })
     }
 
+    if ('chart_type' in props.chart && props.chart.chart_type) {
+      s.type = props.chart.chart_type
+    }
+
     return {
       series: {
-        type: mapSeriesType(seriesType),
+        type: s.type === 'histogram' ? 'bar' : 'line',
         dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
         name: s.column_y,
         encode: {
diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 7123f6a70..f76bd89f6 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -162,33 +162,4 @@ watch([() => chart.value.series, () => chart.value.x_axis.column_x], async () =>
 watch(() => series.columns, () => {
   emit('columns', series.columns)
 })
-
-/**
- * Combines data from multiple series into a single echarts dataset source
- */
-// function combineSeriesData(seriesData: Array<TabularDataResponse | null>): Array<Array<unknown>> {
-//   if (!seriesData.length || seriesData.every(data => !data || !data.data || data.data.length === 0)) {
-//     return []
-//   }
-
-//   // Get all unique columns from all series
-//   const allColumns = Array.from(new Set(seriesData.flatMap(data =>
-//     data?.data?.flatMap(Object.keys) || []
-//   )))
-
-//   // Build the source array with headers
-//   const source: Array<Array<unknown>> = [allColumns]
-
-//   // Add data rows - for simplicity, we'll use data from the first series
-//   // In a real implementation, you'd want to merge/combine the data appropriately
-//   const firstData = seriesData.find(data => data?.data?.length)?.data
-//   if (firstData) {
-//     firstData.forEach(row => {
-//       const rowValues = allColumns.map(column => row[column])
-//       source.push(rowValues)
-//     })
-//   }
-
-//   return source
-// }
 </script>
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 6a274627d..22c377967 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -81,6 +81,8 @@ import ReuseDetails from './components/ReuseDetails.vue'
 import SchemaCard from './components/SchemaCard.vue'
 import SimpleBanner from './components/SimpleBanner.vue'
 import SmallChart from './components/SmallChart.vue'
+import ChartViewer from './components/Chart/ChartViewer.vue'
+import ChartViewerWrapper from './components/Chart/ChartViewerWrapper.vue'
 import StatBox from './components/StatBox.vue'
 import Tab from './components/Tabs/Tab.vue'
 import TabGroup from './components/Tabs/TabGroup.vue'
@@ -321,6 +323,8 @@ export {
   SchemaCard,
   SimpleBanner,
   SmallChart,
+  ChartViewer,
+  ChartViewerWrapper,
   StatBox,
   OpenApiViewer,
   Tab,
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 3b308a56a..3bbdae67d 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -4,7 +4,7 @@
       <div>
         <label
           for="chart-title"
-          class="block text-sm font-medium mb-1"
+          class="font-bold fr-label"
         >{{ $t('Titre') }}</label>
         <input
           id="chart-title"
@@ -17,7 +17,7 @@
       <div>
         <label
           for="chart-description"
-          class="block text-sm font-medium mb-1"
+          class="font-bold fr-label"
         >{{ $t('Description') }}</label>
         <textarea
           id="chart-description"
@@ -37,11 +37,15 @@
     </div>
     <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
       <fieldset class="px-6 space-y-4">
-        <p class="mb-2 font-bold">
+        <label
+          for="existing-charts"
+          class="mb-2 font-bold"
+        >
           {{ $t('Graphiques existants') }}
-        </p>
+        </label>
         <div class="flex gap-2">
           <select
+            id="existing-charts"
             v-model="selectedChartId"
             class="flex-1 fr-select"
           >
@@ -68,7 +72,7 @@
           </button>
         </div>
       </fieldset>
-      <fieldset class="px-6 space-y-4">
+      <fieldset class="px-6">
         <p class="mb-2 font-bold">
           {{ $t('Source de données') }}
         </p>
@@ -84,7 +88,7 @@
         />
         <label
           for="resource-select"
-          class="mb-1"
+          class="fr-label"
         >{{ $t('Choix de la ressource') }}</label>
         <select
           id="resource-select"
@@ -108,11 +112,15 @@
         </select>
       </fieldset>
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
+        <label
+          for="chart-type"
+          class="fr-label font-bold"
+        >
           {{ $t('Type de graphique') }}
-        </p>
+        </label>
         <div>
           <select
+            id="chart-type"
             v-model="form.chart_type"
             class="w-full fr-select"
           >
@@ -132,8 +140,8 @@
         <div>
           <label
             for="x-axis-column"
-            class="mb-1"
-          >{{ $t('Column') }}</label>
+            class="fr-label"
+          >{{ $t('Choisir quoi afficher') }}</label>
           <select
             id="x-axis-column"
             v-model="form.x_axis.column_x"
@@ -157,7 +165,7 @@
         <div>
           <label
             for="x-axis-type"
-            class="mb-1"
+            class="fr-label"
           >{{ $t('Type') }}</label>
           <select
             id="x-axis-type"
@@ -175,7 +183,7 @@
         <div>
           <label
             for="x-axis-sort-combined"
-            class="mb-1"
+            class="fr-label"
           >{{ $t('Trier par') }}</label>
           <select
             id="x-axis-sort-combined"
@@ -205,8 +213,9 @@
           <div>
             <label
               :for="`column-y-${index}`"
-              class=" block text-sm font-medium mb-1"
-            >{{ $t('Colonne Y') }}</label>
+              class="fr-label"
+            >{{ $t('Colonne Y')
+            }}</label>
             <select
               :id="`column-y-${index}`"
               v-model="serie.column_y"
@@ -227,8 +236,9 @@
           <div>
             <label
               :for="`aggregate-y-${index}`"
-              class="block text-sm font-medium mb-1"
-            >{{ $t('Agrégation') }}</label>
+              class="fr-label"
+            >{{ $t('Agrégation')
+            }}</label>
             <select
               :id="`aggregate-y-${index}`"
               v-model="serie.aggregate_y"
@@ -255,7 +265,7 @@
         <div>
           <label
             for="y-axis-label"
-            class="mb-1"
+            class="fr-label"
           >{{ $t('Label') }}</label>
           <input
             id="y-axis-label"
@@ -268,7 +278,7 @@
           <div>
             <label
               for="y-axis-min"
-              class="block text-sm font-medium mb-1"
+              class="fr-label"
             >{{ $t('Min') }}</label>
             <input
               id="y-axis-min"
@@ -280,7 +290,7 @@
           <div>
             <label
               for="y-axis-max"
-              class="block text-sm font-medium mb-1"
+              class="fr-label"
             >{{ $t('Max') }}</label>
             <input
               id="y-axis-max"
@@ -294,7 +304,7 @@
           <div>
             <label
               for="y-axis-unit"
-              class="block text-sm font-medium mb-1"
+              class="fr-label"
             >{{ $t('Unité') }}</label>
             <input
               id="y-axis-unit"
@@ -307,8 +317,9 @@
           <div>
             <label
               for="y-axis-unit-position"
-              class="block text-sm font-medium mb-1"
-            >{{ $t('Position unité') }}</label>
+              class="fr-label"
+            >{{ $t('Position unité')
+            }}</label>
             <select
               id="y-axis-unit-position"
               v-model="form.y_axis.unit_position"
@@ -341,7 +352,7 @@ import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 import { useAPI } from '~/utils/api'
 
-const ChartViewerWrapper = defineAsyncComponent(() => import('../datagouv-components/src/components/Chart/ChartViewerWrapper.vue'))
+const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
 
 const form = defineModel<ChartForm>({
   required: true,
@@ -471,8 +482,9 @@ function loadSelectedChart() {
 async function saveChart() {
   try {
     const chartForApi = toChartApi(form.value)
-    if (savedChart.value?.id) {
-      savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value.id}/`, {
+    const update = savedChart.value?.id
+    if (update) {
+      savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value!.id}/`, {
         method: 'PATCH',
         body: JSON.stringify(chartForApi),
       })
@@ -484,8 +496,9 @@ async function saveChart() {
       })
     }
 
-    toast.success(savedChart.value?.id ? t('Graphique mis à jour !') : t('Graphique sauvegardé !'))
+    toast.success(update ? t('Graphique mis à jour !') : t('Graphique sauvegardé !'))
     await refresh()
+    selectedChartId.value = savedChart.value.id
   }
   catch (error) {
     console.error('Failed to save chart:', error)
diff --git a/pages/design/chart.vue b/pages/design/chart.vue
index 78895e622..d8c74a5f6 100644
--- a/pages/design/chart.vue
+++ b/pages/design/chart.vue
@@ -21,10 +21,12 @@ import type { ChartForm } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import ChartConfigurator from '~/design-system/ChartConfigurator.vue'
 
+const me = useMaybeMe()
+
 const chart = ref<ChartForm>({
   owned: {
     organization: null,
-    owner: 'dummyForDS',
+    owner: me.value ? me.value.id : 'dummyForDS',
   },
   title: 'Mon graphique',
   description: '',
diff --git a/tests/helpers.ts b/tests/helpers.ts
index c86b1580a..4e7789e15 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -10,6 +10,10 @@ export const clickOutside = async (page: Page) => {
   await page.mouse.click(1, 1)
 }
 
+export const getApiBase = () => {
+  return process.env.NUXT_PUBLIC_API_BASE || 'http://dev.local:7000'
+}
+
 const IGNORED_MESSAGES = [
   // Cookie secure flag doesn't work in dev (HTTP)
   'non-HTTPS cookie',
diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 11c09f0cc..0075620ad 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -1,14 +1,118 @@
+import type { Chart } from '@datagouv/components-next'
 import { test, expect } from '../base'
+import { getApiBase } from '../helpers'
 
-test('title input updates form value with debounce', async ({ page }) => {
+test('dataset selector shows default dataset', async ({ page }) => {
   await page.goto('/design/chart')
   await page.waitForLoadState('networkidle')
 
-  await page.getByLabel('Titre').fill('Nouveau titre de graphique')
+  const datasetSelect = page.getByPlaceholder('Recherchez un jeu de données...')
+  // SearchableSelect displays the selected value in a different way
+  const displayedValue = await datasetSelect.inputValue()
+  expect(datasetSelect).toBeVisible()
+  expect(displayedValue || datasetSelect.inputValue()).toContain('Logements et logements sociaux')
+})
+
+test('resource selector shows available resources', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  const resourceOptions = await page.getByLabel('Choix de la ressource').locator('option').all()
+
+  expect(resourceOptions.length).toBeGreaterThan(1)
+})
+
+test('x-axis column selector shows available columns', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  const columnOptions = await page.getByLabel('Choisir quoi afficher').locator('option').allTextContents()
+
+  expect(columnOptions).toContain('libellé_EPCI')
+  expect(columnOptions).toContain('nom_region')
+})
+
+test('series column y selector shows available columns', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  const columnYOptions = await page.getByLabel('Colonne Y').locator('option').allTextContents()
+
+  expect(columnYOptions).toContain('Nombre de logements')
+  expect(columnYOptions).toContain('libellé_EPCI')
+})
+
+test('save button is visible and clickable', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
 
-  // Wait for debounce (300ms as per component)
+  const saveButton = page.getByRole('button', { name: 'Sauvegarder' })
+  await expect(saveButton).toBeVisible()
+  await expect(saveButton).toBeEnabled()
+})
+
+test('saving chart sends correct data to API', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  await page.getByLabel('Titre').fill('Test Chart')
+  await page.getByLabel('Description').fill('Test Description')
+  await page.waitForTimeout(500)
+
+  const responsePromise = page.waitForResponse(`${getApiBase()}/api/1/visualizations/*`)
+
+  await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
+
+  const response = await responsePromise
+  const responseBody = (await response.json()) as Chart
+
+  expect(responseBody!.title).toBe('Test Chart')
+  expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.title)
+  await page.request.delete(`${getApiBase()}/api/1/visualization/${responseBody!.id}/`)
+})
+
+test('complete chart configuration flow', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  await page.getByLabel('Titre').fill('Graphique complet')
+  await page.getByLabel('Description').fill('Test complet de configuration')
   await page.waitForTimeout(400)
 
-  // The chart viewer should reflect the new title
-  await expect(page).not.toContainText('Mon graphique')
+  await page.getByLabel('Type de graphique').selectOption('line')
+
+  await page.getByLabel('Choisir quoi afficher').selectOption('code_region')
+  await page.getByLabel('Type', { exact: true }).first().selectOption('continuous')
+
+  await page.getByLabel('Colonne Y').selectOption('Parc social - Taux de logements vacants* (en %)')
+  await page.getByLabel('Agrégation').selectOption('avg')
+
+  await page.getByLabel('Label').fill('Taux (%)')
+  await page.getByLabel('Min').fill('0')
+  await page.getByLabel('Max').fill('100')
+  await page.locator('#y-axis-unit').fill('%')
+  await page.getByLabel('Position unité').selectOption('suffix')
+
+  const responsePromise = page.waitForResponse(`${getApiBase()}/api/1/visualizations/*`)
+
+  await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
+  const response = await responsePromise
+  const responseBody = (await response.json()) as Chart
+
+  expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.title)
+
+  expect(await page.getByLabel('Titre').inputValue()).toBe('Graphique complet')
+  expect(await page.getByLabel('Description').inputValue()).toBe('Test complet de configuration')
+  expect(await page.getByLabel('Type de graphique').inputValue()).toBe('line')
+  expect(await page.getByLabel('Choisir quoi afficher').inputValue()).toBe('code_region')
+  expect(await page.getByLabel('Type', { exact: true }).first().inputValue()).toBe('continuous')
+  expect(await page.getByLabel('Colonne Y').inputValue()).toBe('Parc social - Taux de logements vacants* (en %)')
+  expect(await page.getByLabel('Agrégation').inputValue()).toBe('avg')
+  expect(await page.getByLabel('Label').inputValue()).toBe('Taux (%)')
+  expect(await page.getByLabel('Min').inputValue()).toBe('0')
+  expect(await page.getByLabel('Max').inputValue()).toBe('100')
+  expect(await page.getByLabel('Unité', { exact: true }).inputValue()).toBe('%')
+  expect(await page.getByLabel('Position unité').inputValue()).toBe('prefix')
+
+  await page.request.delete(`${getApiBase()}/api/1/visualization/${responseBody!.id}/`)
 })

From 2aa5137e3f2f9f01abb6e53d263b18c0ef6227e8 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Tue, 31 Mar 2026 16:07:54 +0200
Subject: [PATCH 038/121] refactor: integrate filter state into ChartForm type

- Add filter?: Filter property to ChartForm type
- Update toChartForm mapper to extract filter from series[0].filters
- Update toChartApi mapper to inject filter into series[0].filters
- Remove filterState reactive object from ChartConfigurator
- Remove filter computed property and watch logic
- Simplify template bindings to use form.filter?.column, etc.
- Update removeFilter to reset form.filter directly
---
 {.husky => .github/.husky}/pre-commit         |  0
 .../src/types/visualizations.ts               |  1 +
 design-system/ChartConfigurator.vue           | 67 ++++++++++++++++++-
 utils/charts.ts                               |  4 ++
 4 files changed, 71 insertions(+), 1 deletion(-)
 rename {.husky => .github/.husky}/pre-commit (100%)

diff --git a/.husky/pre-commit b/.github/.husky/pre-commit
similarity index 100%
rename from .husky/pre-commit
rename to .github/.husky/pre-commit
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index 521e426e7..951a07a60 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -84,4 +84,5 @@ export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organ
   x_axis: XAxisForm
   series: Array<DataSeriesForm>
   chart_type?: DataSeriesType | null
+  filter?: Filter
 }
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 3bbdae67d..4878585b7 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -258,6 +258,66 @@
         </div>
       </fieldset>
 
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Filtre') }}
+        </p>
+        <div class="flex items-center gap-2 flex-wrap">
+          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
+          
+          <!-- Column select -->
+          <select
+            v-model="form.filter?.column"
+            class="fr-select text-sm"
+          >
+            <option value="" disabled>
+              {{ $t('Colonne') }}
+            </option>
+            <template v-if="selectedResource">
+              <option
+                v-for="column in columns[selectedResource]"
+                :key="column"
+                :value="column"
+              >
+                {{ column }}
+              </option>
+            </template>
+          </select>
+          
+          <!-- Condition select -->
+          <select
+            v-model="form.filter?.condition"
+            class="fr-select text-sm"
+          >
+            <option value="" disabled>
+              {{ $t('Condition') }}
+            </option>
+            <option value="equal">
+              {{ $t('est') }}
+            </option>
+            <option value="greater">
+              {{ $t('est supérieur à') }}
+            </option>
+          </select>
+          
+          <!-- Value input -->
+          <input
+            v-model="form.filter?.value"
+            type="text"
+            class="fr-input text-sm w-32"
+            :placeholder="$t('Valeur')"
+          >
+          
+          <!-- Remove button -->
+          <BrandedButton
+            size="sm"
+            @click="removeFilter"
+            :disabled="!form.filter?.column"
+          >
+            <RiDeleteBinLine class="w-4 h-4" />
+          </BrandedButton>
+        </div>
+      </fieldset>
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
           {{ $t('Axe Y') }}
@@ -346,10 +406,11 @@
 </template>
 
 <script setup lang="ts">
-import type { Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
+import type { Resource, PaginatedArray, ChartForm, Chart, Filter, FilterCondition } from '@datagouv/components-next'
 import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
+import { RiDeleteBinLine } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
@@ -445,6 +506,10 @@ async function suggestDataset(q: string): Promise<Array<DatasetSuggest>> {
   })
 }
 
+function removeFilter() {
+  form.value.filter = undefined
+}
+
 async function loadChart(id: string) {
   try {
     const { data } = await useAPI<Chart>(`/api/1/visualizations/${id}/`)
diff --git a/utils/charts.ts b/utils/charts.ts
index 46a76ddda..7ab77c5d5 100644
--- a/utils/charts.ts
+++ b/utils/charts.ts
@@ -1,6 +1,8 @@
 import type { Chart, ChartForm, ChartForApi } from '@datagouv/components-next'
 
 export function toChartForm(chart: Chart) {
+  const seriesFilter = chart.series[0]?.filters as Filter | null
+  
   return {
     title: chart.title,
     description: chart.description,
@@ -26,6 +28,7 @@ export function toChartForm(chart: Chart) {
     })),
     extras: chart.extras,
     chart_type: chart.series.length > 0 ? chart.series[0].type : null,
+    filter: seriesFilter && 'column' in seriesFilter ? seriesFilter : undefined,
   } satisfies ChartForm
 }
 
@@ -56,6 +59,7 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
       ...serie,
       type: index === 0 && chartForm.chart_type ? chartForm.chart_type : serie.type,
       aggregate_y: serie.aggregate_y || null,
+      filters: index === 0 && chartForm.filter ? chartForm.filter : serie.filters,
     })),
     extras: chartForm.extras,
   }

From 8510293ef7e6d25a181be05114b5c542bd9379b3 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 1 Apr 2026 10:21:11 +0200
Subject: [PATCH 039/121] feat(visualizations): fitlers wip

---
 design-system/ChartConfigurator.vue | 674 +++++++++++-----------------
 utils/charts.ts                     |   2 +-
 2 files changed, 270 insertions(+), 406 deletions(-)

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 4878585b7..09145b5e1 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -1,417 +1,270 @@
 <template>
-  <div class="grid lg:grid-cols-12 gap-4">
-    <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
-      <div>
-        <label
-          for="chart-title"
-          class="font-bold fr-label"
-        >{{ $t('Titre') }}</label>
-        <input
-          id="chart-title"
-          v-model="title"
-          type="text"
-          class="w-full fr-input"
-        >
-      </div>
-
-      <div>
-        <label
-          for="chart-description"
-          class="font-bold fr-label"
-        >{{ $t('Description') }}</label>
-        <textarea
-          id="chart-description"
-          v-model="desc"
-          class="w-full fr-input"
-          rows="2"
-        />
-      </div>
-      <div class="mt-4">
-        <ClientOnly>
-          <ChartViewerWrapper
-            v-model="form"
-            @columns="columns = $event"
-          />
-        </ClientOnly>
-      </div>
-    </div>
-    <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
-      <fieldset class="px-6 space-y-4">
-        <label
-          for="existing-charts"
-          class="mb-2 font-bold"
-        >
-          {{ $t('Graphiques existants') }}
-        </label>
-        <div class="flex gap-2">
-          <select
-            id="existing-charts"
-            v-model="selectedChartId"
-            class="flex-1 fr-select"
-          >
-            <option
-              value=""
-              disabled
-            >
-              {{ $t('Sélectionnez un graphique') }}
-            </option>
-            <option
-              v-for="chart in charts?.data"
-              :key="chart.id"
-              :value="chart.id"
-            >
-              {{ chart.title }}
-            </option>
-          </select>
-          <button
-            class="fr-btn"
-            :disabled="!selectedChartId"
-            @click="loadSelectedChart"
-          >
-            {{ $t('Charger') }}
-          </button>
-        </div>
-      </fieldset>
-      <fieldset class="px-6">
-        <p class="mb-2 font-bold">
-          {{ $t('Source de données') }}
-        </p>
-        <SearchableSelect
-          v-model="dataset"
-          :label="$t('Jeu de données')"
-          :placeholder="$t('Recherchez un jeu de données...')"
-          :display-value="(option: DatasetSuggest) => option.title"
-          :get-option-id="(option: DatasetSuggest) => option.id"
-          :multiple="false"
-          :suggest="suggestDataset"
-          class="mb-4"
-        />
-        <label
-          for="resource-select"
-          class="fr-label"
-        >{{ $t('Choix de la ressource') }}</label>
-        <select
-          id="resource-select"
-          v-model="selectedResource"
-          class="w-full fr-select"
-          :disabled="!dataset"
-        >
-          <option
-            value=""
-            disabled
-          >
-            {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
-          </option>
-          <option
-            v-for="resource in resources"
-            :key="resource.id"
-            :value="resource.id"
-          >
-            {{ resource.title }}
-          </option>
-        </select>
-      </fieldset>
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <label
-          for="chart-type"
-          class="fr-label font-bold"
-        >
-          {{ $t('Type de graphique') }}
-        </label>
-        <div>
-          <select
-            id="chart-type"
-            v-model="form.chart_type"
-            class="w-full fr-select"
-          >
-            <option value="line">
-              {{ $t('Ligne') }}
-            </option>
-            <option value="histogram">
-              {{ $t('Histogramme') }}
-            </option>
-          </select>
-        </div>
-      </fieldset>
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Axe X') }}
-        </p>
-        <div>
-          <label
-            for="x-axis-column"
-            class="fr-label"
-          >{{ $t('Choisir quoi afficher') }}</label>
-          <select
-            id="x-axis-column"
-            v-model="form.x_axis.column_x"
-            class="w-full fr-select"
-          >
-            <optgroup
-              v-for="{ key, value } in flattenedColumns"
-              :key="key"
-              :label="savedResources[key].title"
-            >
-              <option
-                v-for="column in value"
-                :key="column"
-                :value="column"
-              >
-                {{ column }}
-              </option>
-            </optgroup>
-          </select>
-        </div>
-        <div>
-          <label
-            for="x-axis-type"
-            class="fr-label"
-          >{{ $t('Type') }}</label>
-          <select
-            id="x-axis-type"
-            v-model="form.x_axis.type"
-            class="w-full fr-select"
-          >
-            <option value="discrete">
-              {{ $t('Discret (catégories)') }}
-            </option>
-            <option value="continuous">
-              {{ $t('Continu (valeurs)') }}
-            </option>
-          </select>
-        </div>
-        <div>
-          <label
-            for="x-axis-sort-combined"
-            class="fr-label"
-          >{{ $t('Trier par') }}</label>
-          <select
-            id="x-axis-sort-combined"
-            v-model="form.x_axis.sort_combined"
-            class="w-full fr-select"
-          >
-            <option
-              v-for="(label, value) in sortOptionLabels"
-              :key="value"
-              :value
-            >
-              {{ label }}
-            </option>
-          </select>
-        </div>
-      </fieldset>
-
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Série') }}
-        </p>
-        <div
-          v-for="(serie, index) in form.series"
-          :key="index"
-          class="space-y-4"
-        >
-          <div>
-            <label
-              :for="`column-y-${index}`"
-              class="fr-label"
-            >{{ $t('Colonne Y')
-            }}</label>
-            <select
-              :id="`column-y-${index}`"
-              v-model="serie.column_y"
-              class="w-full fr-select"
-            >
-              <template v-if="selectedResource">
-                <option
-                  v-for="column in columns[selectedResource]"
-                  :key="column"
-                  :value="column"
-                >
-                  {{ column }}
-                </option>
-              </template>
-            </select>
-          </div>
-
-          <div>
-            <label
-              :for="`aggregate-y-${index}`"
-              class="fr-label"
-            >{{ $t('Agrégation')
-            }}</label>
-            <select
-              :id="`aggregate-y-${index}`"
-              v-model="serie.aggregate_y"
-              class="w-full fr-select"
-            >
-              <option :value="null">
-                {{ $t('Non') }}
-              </option>
-              <option value="sum">
-                {{ $t('Somme') }}
-              </option>
-              <option value="avg">
-                {{ $t('Moyenne') }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </fieldset>
-
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Filtre') }}
-        </p>
-        <div class="flex items-center gap-2 flex-wrap">
-          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
-          
-          <!-- Column select -->
-          <select
-            v-model="form.filter?.column"
-            class="fr-select text-sm"
-          >
-            <option value="" disabled>
-              {{ $t('Colonne') }}
-            </option>
-            <template v-if="selectedResource">
-              <option
-                v-for="column in columns[selectedResource]"
-                :key="column"
-                :value="column"
-              >
-                {{ column }}
-              </option>
-            </template>
-          </select>
-          
-          <!-- Condition select -->
-          <select
-            v-model="form.filter?.condition"
-            class="fr-select text-sm"
-          >
-            <option value="" disabled>
-              {{ $t('Condition') }}
-            </option>
-            <option value="equal">
-              {{ $t('est') }}
-            </option>
-            <option value="greater">
-              {{ $t('est supérieur à') }}
-            </option>
-          </select>
-          
-          <!-- Value input -->
-          <input
-            v-model="form.filter?.value"
-            type="text"
-            class="fr-input text-sm w-32"
-            :placeholder="$t('Valeur')"
-          >
-          
-          <!-- Remove button -->
-          <BrandedButton
-            size="sm"
-            @click="removeFilter"
-            :disabled="!form.filter?.column"
-          >
-            <RiDeleteBinLine class="w-4 h-4" />
-          </BrandedButton>
+    <div class="grid lg:grid-cols-12 gap-4">
+        <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
+            <div>
+                <label for="chart-title" class="font-bold fr-label">{{ $t('Titre') }}</label>
+                <input id="chart-title" v-model="title" type="text" class="w-full fr-input">
+            </div>
+
+            <div>
+                <label for="chart-description" class="font-bold fr-label">{{ $t('Description') }}</label>
+                <textarea id="chart-description" v-model="desc" class="w-full fr-input" rows="2" />
+            </div>
+            <div class="mt-4">
+                <ClientOnly>
+                    <ChartViewerWrapper v-model="form" @columns="columns = $event" />
+                </ClientOnly>
+            </div>
         </div>
-      </fieldset>
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Axe Y') }}
-        </p>
-        <div>
-          <label
-            for="y-axis-label"
-            class="fr-label"
-          >{{ $t('Label') }}</label>
-          <input
-            id="y-axis-label"
-            v-model="form.y_axis.label"
-            type="text"
-            class="w-full fr-input"
-          >
+        <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
+            <fieldset class="px-6 space-y-4">
+                <label for="existing-charts" class="mb-2 font-bold">
+                    {{ $t('Graphiques existants') }}
+                </label>
+                <div class="flex gap-2">
+                    <select id="existing-charts" v-model="selectedChartId" class="flex-1 fr-select">
+                        <option value="" disabled>
+                            {{ $t('Sélectionnez un graphique') }}
+                        </option>
+                        <option v-for="chart in charts?.data" :key="chart.id" :value="chart.id">
+                            {{ chart.title }}
+                        </option>
+                    </select>
+                    <button class="fr-btn" :disabled="!selectedChartId" @click="loadSelectedChart">
+                        {{ $t('Charger') }}
+                    </button>
+                </div>
+            </fieldset>
+            <fieldset class="px-6">
+                <p class="mb-2 font-bold">
+                    {{ $t('Source de données') }}
+                </p>
+                <SearchableSelect v-model="dataset" :label="$t('Jeu de données')"
+                    :placeholder="$t('Recherchez un jeu de données...')"
+                    :display-value="(option: DatasetSuggest) => option.title"
+                    :get-option-id="(option: DatasetSuggest) => option.id" :multiple="false" :suggest="suggestDataset"
+                    class="mb-4" />
+                <label for="resource-select" class="fr-label">{{ $t('Choix de la ressource') }}</label>
+                <select id="resource-select" v-model="selectedResource" class="w-full fr-select" :disabled="!dataset">
+                    <option value="" disabled>
+                        {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
+                    </option>
+                    <option v-for="resource in resources" :key="resource.id" :value="resource.id">
+                        {{ resource.title }}
+                    </option>
+                </select>
+            </fieldset>
+            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+                <label for="chart-type" class="fr-label font-bold">
+                    {{ $t('Type de graphique') }}
+                </label>
+                <div>
+                    <select id="chart-type" v-model="form.chart_type" class="w-full fr-select">
+                        <option value="line">
+                            {{ $t('Ligne') }}
+                        </option>
+                        <option value="histogram">
+                            {{ $t('Histogramme') }}
+                        </option>
+                    </select>
+                </div>
+            </fieldset>
+            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+                <p class="font-bold mb-2">
+                    {{ $t('Axe X') }}
+                </p>
+                <div>
+                    <label for="x-axis-column" class="fr-label">{{ $t('Choisir quoi afficher') }}</label>
+                    <select id="x-axis-column" v-model="form.x_axis.column_x" class="w-full fr-select">
+                        <optgroup v-for="{ key, value } in flattenedColumns" :key="key"
+                            :label="savedResources[key]?.title ?? key">
+                            <option v-for="column in value" :key="column" :value="column">
+                                {{ column }}
+                            </option>
+                        </optgroup>
+                    </select>
+                </div>
+                <div>
+                    <label for="x-axis-type" class="fr-label">{{ $t('Type') }}</label>
+                    <select id="x-axis-type" v-model="form.x_axis.type" class="w-full fr-select">
+                        <option value="discrete">
+                            {{ $t('Discret (catégories)') }}
+                        </option>
+                        <option value="continuous">
+                            {{ $t('Continu (valeurs)') }}
+                        </option>
+                    </select>
+                </div>
+                <div>
+                    <label for="x-axis-sort-combined" class="fr-label">{{ $t('Trier par') }}</label>
+                    <select id="x-axis-sort-combined" v-model="form.x_axis.sort_combined" class="w-full fr-select">
+                        <option v-for="(label, value) in sortOptionLabels" :key="value" :value>
+                            {{ label }}
+                        </option>
+                    </select>
+                </div>
+            </fieldset>
+
+            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+                <p class="font-bold mb-2">
+                    {{ $t('Série') }}
+                </p>
+                <div v-for="(serie, index) in form.series" :key="index" class="space-y-4">
+                    <div>
+                        <label :for="`column-y-${index}`" class="fr-label">{{ $t('Colonne Y')
+                            }}</label>
+                        <select :id="`column-y-${index}`" v-model="serie.column_y" class="w-full fr-select">
+                            <template v-if="selectedResource">
+                                <option v-for="column in columns[selectedResource]" :key="column" :value="column">
+                                    {{ column }}
+                                </option>
+                            </template>
+                        </select>
+                    </div>
+
+                    <div>
+                        <label :for="`aggregate-y-${index}`" class="fr-label">{{ $t('Agrégation')
+                            }}</label>
+                        <select :id="`aggregate-y-${index}`" v-model="serie.aggregate_y" class="w-full fr-select">
+                            <option :value="null">
+                                {{ $t('Non') }}
+                            </option>
+                            <option value="sum">
+                                {{ $t('Somme') }}
+                            </option>
+                            <option value="avg">
+                                {{ $t('Moyenne') }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </fieldset>
+
+            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+                <p class="font-bold mb-2">
+                    {{ $t('Filtre') }}
+                </p>
+                <div class="flex items-center gap-2 flex-wrap md:flex-nowrap" v-if="form.filter">
+                    <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
+
+                    <!-- Column select -->
+                    <select v-model="form.filter.column" class="fr-select text-sm">
+                        <option value="" disabled>
+                            {{ $t('Colonne') }}
+                        </option>
+                        <template v-if="selectedResource">
+                            <option v-for="column in columns[selectedResource]" :key="column" :value="column">
+                                {{ column }}
+                            </option>
+                        </template>
+                    </select>
+                    <div class="relative">
+                    <Listbox v-model="form.filter.condition">
+                      <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">{{ form.filter.condition }}</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-slot="{active, selected}" as="template" value="equal">
+                            <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,
+                                'pl-2': selected,
+                                'pl-6': !selected,
+                              }"
+                            >
+                              <div
+                                class="flex items-center justify-center aspect-square"
+                              >
+                                <RiCheckLine
+                                  v-if="selected"
+                                  class="size-4 text-new-primary"
+                                />
+                              </div>
+                              {{ $t('Est') }}
+                            </li>
+                        </ListboxOption>
+                        <ListboxOption class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900" value="greater">
+                          {{ $t('Est supérieur à') }}
+                        </ListboxOption>
+                      </ListboxOptions>
+                    </Listbox>
+                    </div>
+
+                    <!-- Value input -->
+                    <input v-model="form.filter.value" type="text" class="fr-input text-sm w-32"
+                        :placeholder="$t('Valeur')">
+
+                    <!-- Remove button -->
+                    <BrandedButton size="sm" @click="removeFilter" :disabled="!form.filter.column">
+                        <RiDeleteBinLine class="w-4 h-4" />
+                    </BrandedButton>
+                </div>
+                <div v-else>
+                    <BrandedButton size="sm" color="tertiary" :icon="RiAddLine"
+                        @click="form.filter={column: '', condition: 'equal', value: ''}">
+                        {{ $t('Ajouter un filtre') }}
+                    </BrandedButton>
+
+                </div>
+            </fieldset>
+            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+                <p class="font-bold mb-2">
+                    {{ $t('Axe Y') }}
+                </p>
+                <div>
+                    <label for="y-axis-label" class="fr-label">{{ $t('Label') }}</label>
+                    <input id="y-axis-label" v-model="form.y_axis.label" type="text" class="w-full fr-input">
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label for="y-axis-min" class="fr-label">{{ $t('Min') }}</label>
+                        <input id="y-axis-min" v-model.number="form.y_axis.min" type="number" class="w-full fr-input">
+                    </div>
+                    <div>
+                        <label for="y-axis-max" class="fr-label">{{ $t('Max') }}</label>
+                        <input id="y-axis-max" v-model.number="form.y_axis.max" type="number" class="w-full fr-input">
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label for="y-axis-unit" class="fr-label">{{ $t('Unité') }}</label>
+                        <input id="y-axis-unit" v-model="form.y_axis.unit" type="text" class="w-full fr-input"
+                            :placeholder="$t('ex: €, %, kg')">
+                    </div>
+                    <div>
+                        <label for="y-axis-unit-position" class="fr-label">{{ $t('Position unité')
+                            }}</label>
+                        <select id="y-axis-unit-position" v-model="form.y_axis.unit_position" class="w-full fr-select">
+                            <option value="suffix">
+                                {{ $t('Suffixe') }}
+                            </option>
+                            <option value="prefix">
+                                {{ $t('Préfixe') }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </fieldset>
+
+            <div class="px-6">
+                <BrandedButton @click="saveChart">
+                    {{ $t('Sauvegarder le graphique') }}
+                </BrandedButton>
+            </div>
         </div>
-        <div class="grid grid-cols-2 gap-4">
-          <div>
-            <label
-              for="y-axis-min"
-              class="fr-label"
-            >{{ $t('Min') }}</label>
-            <input
-              id="y-axis-min"
-              v-model.number="form.y_axis.min"
-              type="number"
-              class="w-full fr-input"
-            >
-          </div>
-          <div>
-            <label
-              for="y-axis-max"
-              class="fr-label"
-            >{{ $t('Max') }}</label>
-            <input
-              id="y-axis-max"
-              v-model.number="form.y_axis.max"
-              type="number"
-              class="w-full fr-input"
-            >
-          </div>
-        </div>
-        <div class="grid grid-cols-2 gap-4">
-          <div>
-            <label
-              for="y-axis-unit"
-              class="fr-label"
-            >{{ $t('Unité') }}</label>
-            <input
-              id="y-axis-unit"
-              v-model="form.y_axis.unit"
-              type="text"
-              class="w-full fr-input"
-              :placeholder="$t('ex: €, %, kg')"
-            >
-          </div>
-          <div>
-            <label
-              for="y-axis-unit-position"
-              class="fr-label"
-            >{{ $t('Position unité')
-            }}</label>
-            <select
-              id="y-axis-unit-position"
-              v-model="form.y_axis.unit_position"
-              class="w-full fr-select"
-            >
-              <option value="suffix">
-                {{ $t('Suffixe') }}
-              </option>
-              <option value="prefix">
-                {{ $t('Préfixe') }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </fieldset>
-
-      <div class="px-6">
-        <BrandedButton @click="saveChart">
-          {{ $t('Sauvegarder le graphique') }}
-        </BrandedButton>
-      </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-import type { Resource, PaginatedArray, ChartForm, Chart, Filter, FilterCondition } from '@datagouv/components-next'
+import type { Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
 import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
-import { RiDeleteBinLine } from '@remixicon/vue'
+import { RiAddLine, RiDeleteBinLine } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
 
@@ -421,6 +274,17 @@ const form = defineModel<ChartForm>({
 
 const { t } = useTranslation()
 
+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,
+})
+
+
 const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
 
@@ -491,8 +355,8 @@ async function loadMissingResourcesForChart(resourceIds: Set<string>) {
     if (savedResources[id]) continue
 
     try {
-      const resource = await $api<Resource>(`https://demo.data.gouv.fr/api/2/datasets/resources/${id}/`)
-      savedResources[id] = resource
+      const resource = await $api<{resource: Resource, dataset_id: string}>(`https://demo.data.gouv.fr/api/2/datasets/resources/${id}/`)
+      savedResources[id] = resource.resource
     }
     catch (error) {
       console.error(`Failed to fetch resource ${id}:`, error)
diff --git a/utils/charts.ts b/utils/charts.ts
index 7ab77c5d5..3852372e5 100644
--- a/utils/charts.ts
+++ b/utils/charts.ts
@@ -1,4 +1,4 @@
-import type { Chart, ChartForm, ChartForApi } from '@datagouv/components-next'
+import type { Chart, ChartForm, ChartForApi, Filter } from '@datagouv/components-next'
 
 export function toChartForm(chart: Chart) {
   const seriesFilter = chart.series[0]?.filters as Filter | null

From 5109fe0c20549ce3a036095483fca754d1e2781e Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 1 Apr 2026 15:09:19 +0200
Subject: [PATCH 040/121] feat(datagouv-components): add listbox components

---
 .../src/components/Form/Listbox.vue           |  74 +++++++
 datagouv-components/src/main.ts               |   2 +
 design-system/ChartConfigurator.vue           |  23 +--
 pages/design.vue                              |   7 +-
 pages/design/listbox.vue                      | 186 ++++++++++++++++++
 5 files changed, 274 insertions(+), 18 deletions(-)
 create mode 100644 datagouv-components/src/components/Form/Listbox.vue
 create mode 100644 pages/design/listbox.vue

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
new file mode 100644
index 000000000..a8f06127e
--- /dev/null
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -0,0 +1,74 @@
+<template>
+    <Listbox v-slot="{ activeOption }" v-model="model">
+      <div class="relative">
+        <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">
+                <slot name="button">
+                    {{ model ? displayValue(model) : '' }}
+                </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="{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': isActive(activeOption, option),
+                                'pl-2': selected,
+                                'pl-6': !selected,
+                              }">
+                    <div class="flex items-center justify-center aspect-square">
+                        <RiCheckLine v-if="selected" class="size-4 text-new-primary" />
+                    </div>
+                    <slot
+                        name="option"
+                        v-bind="{ option, active: isActive(activeOption, option) }"
+                    >
+                        {{ 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 { RiCheckLine } from '@remixicon/vue';
+
+const props = withDefaults(defineProps<{
+    options?: Array<T>
+    getOptionId?: (option: T) => string | number
+    displayValue: (option: T) => string
+}>(), {
+    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()')
+    },
+})
+
+const model = defineModel<T | null>()
+
+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,
+})
+
+function isActive(activeOption: T, currentOption: T) {
+    return activeOption ? props.getOptionId(activeOption) === props.getOptionId(currentOption) : false
+}
+</script>
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 22c377967..e10766862 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -97,6 +97,7 @@ import GlobalSearch from './components/Search/GlobalSearch.vue'
 import SearchInput from './components/Search/SearchInput.vue'
 import SearchableSelect from './components/Form/SearchableSelect.vue'
 import SelectGroup from './components/Form/SelectGroup.vue'
+import Listbox from './components/Form/Listbox.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
@@ -341,4 +342,5 @@ export {
   SearchInput,
   SearchableSelect,
   SelectGroup,
+  Listbox,
 }
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 09145b5e1..3e47aee10 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -160,11 +160,10 @@
                     </select>
                     <div class="relative">
                     <Listbox v-model="form.filter.condition">
-                      <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">{{ form.filter.condition }}</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-slot="{active, selected}" as="template" value="equal">
+                        <template #button>
+                            {{ form.filter.condition }}
+                        </template>
+                        <ListboxOption v-slot="{active, selected}" as="template" value="equal">
                             <li
                               class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
                               :class="{
@@ -187,7 +186,6 @@
                         <ListboxOption class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900" value="greater">
                           {{ $t('Est supérieur à') }}
                         </ListboxOption>
-                      </ListboxOptions>
                     </Listbox>
                     </div>
 
@@ -263,8 +261,8 @@ import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 import { RiAddLine, RiDeleteBinLine } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
-import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { Listbox } from '@datagouv/components-next'
+import { ListboxOption } from '@headlessui/vue'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
 
@@ -274,15 +272,6 @@ const form = defineModel<ChartForm>({
 
 const { t } = useTranslation()
 
-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,
-})
 
 
 const columns = ref<Record<string, Array<string>>>({})
diff --git a/pages/design.vue b/pages/design.vue
index ac5d1c4ed..8078eddb4 100644
--- a/pages/design.vue
+++ b/pages/design.vue
@@ -73,6 +73,11 @@
           :label="$t('Charts')"
           to="/design/chart"
         />
+        <AdminSidebarLink
+          :icon="RiListCheck"
+          :label="$t('Listbox')"
+          to="/design/listbox"
+        />
       </ul>
     </Sidemenu>
     <div class="w-full md:flex-1 space-y-8 px-4 md:px-8 bg-gray-50 pb-32 min-w-0">
@@ -82,7 +87,7 @@
 </template>
 
 <script setup lang="ts">
-import { RiEyeLine, RiExternalLinkLine, RiFileSearchLine, RiIdCardLine, RiLineChartLine, RiListView, RiRadioButtonLine, RiSearch2Line, RiSearchEyeLine, RiTranslate, RiUserSearchLine } from '@remixicon/vue'
+import { RiEyeLine, RiExternalLinkLine, RiFileSearchLine, RiIdCardLine, RiLineChartLine, RiListView, RiRadioButtonLine, RiSearch2Line, RiSearchEyeLine, RiTranslate, RiUserSearchLine, RiListCheck } from '@remixicon/vue'
 import AdminSidebarLink from '~/components/AdminSidebar/AdminSidebarLink/AdminSidebarLink.vue'
 import LogoOnly from '~/components/LogoOnly.vue'
 import Sidemenu from '~/components/Sidemenu/Sidemenu.global.vue'
diff --git a/pages/design/listbox.vue b/pages/design/listbox.vue
new file mode 100644
index 000000000..970001316
--- /dev/null
+++ b/pages/design/listbox.vue
@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <Breadcrumb>
+      <BreadcrumbItem to="/design">
+        {{ $t('Système de design') }}
+      </BreadcrumbItem>
+      <BreadcrumbItem to="/design/listbox">
+        {{ $t('Listbox') }}
+      </BreadcrumbItem>
+    </Breadcrumb>
+    <h1 class="mb-3">
+      Listbox
+    </h1>
+
+    <div class="space-y-8 py-8">
+      <section>
+        <h2 class="!mb-3">
+          Basic usage
+        </h2>
+        <p class="mb-4 text-gray-600">
+          Simple listbox with string options.
+        </p>
+        <div class="w-80">
+          <Listbox
+            v-model="selectedCondition"
+            :options="conditions"
+            :display-value="(option: string) => option"
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 class="!mb-3">
+          With object options
+        </h2>
+        <p class="mb-4 text-gray-600">
+          Listbox with object options using custom display value.
+        </p>
+        <div class="w-80">
+          <Listbox
+            v-model="selectedFruit"
+            :options="fruits"
+            :display-value="(option: Fruit) => option.label"
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 class="!mb-3">
+          With custom option slot
+        </h2>
+        <p class="mb-4 text-gray-600">
+          Listbox with custom option rendering using the #option slot.
+        </p>
+        <div class="w-80">
+          <Listbox
+            v-model="selectedStatus"
+            :options="statuses"
+            :display-value="(option: Status) => option.label"
+          >
+            <template #option="{ option, active }">
+              <span
+                class="size-2 rounded-full"
+                :class="{
+                  'bg-gray-400': option.id === 'draft',
+                  'bg-yellow-400': option.id === 'review',
+                  'bg-green-500': option.id === 'published',
+                }"
+              />
+              {{ option.label }}
+              <span v-if="active" class="text-xs text-gray-500">(active)</span>
+            </template>
+          </Listbox>
+        </div>
+      </section>
+
+      <section>
+        <h2 class="!mb-3">
+          With button and option slots
+        </h2>
+        <p class="mb-4 text-gray-600">
+          Listbox using both #button and #option slots for full customization.
+        </p>
+        <div class="w-80">
+          <Listbox
+            v-model="selectedPriority"
+            :options="priorities"
+            :display-value="(option: Priority) => option.label"
+          >
+            <template #button>
+              <span class="flex items-center gap-2">
+                <span
+                  class="size-3 rounded-full"
+                  :class="{
+                    'bg-red-500': selectedPriority?.id === 'high',
+                    'bg-yellow-500': selectedPriority?.id === 'medium',
+                    'bg-green-500': selectedPriority?.id === 'low',
+                  }"
+                />
+                {{ selectedPriority?.label || 'Select priority' }}
+              </span>
+            </template>
+            <template #option="{ option, active }">
+              <span
+                class="size-3 rounded-full"
+                :class="{
+                  'bg-red-500': option.id === 'high',
+                  'bg-yellow-500': option.id === 'medium',
+                  'bg-green-500': option.id === 'low',
+                }"
+              />
+              {{ option.label }}
+              <span v-if="active" class="ml-auto text-xs text-gray-500">(active)</span>
+            </template>
+          </Listbox>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Listbox } from '@datagouv/components-next'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+
+interface Fruit {
+  id: string
+  label: string
+}
+
+interface Color {
+  id: string
+  name: string
+  hex: string
+}
+
+interface Status {
+  id: string
+  label: string
+}
+
+interface Priority {
+  id: string
+  label: string
+}
+
+const conditions = ['equal', 'greater', 'less', 'contains', 'starts_with']
+
+const selectedCondition = ref<string | null>('equal')
+
+const fruits: Fruit[] = [
+  { id: 'apple', label: '🍎 Apple' },
+  { id: 'banana', label: '🍌 Banana' },
+  { id: 'orange', label: '🍊 Orange' },
+  { id: 'grape', label: '🍇 Grape' },
+  { id: 'strawberry', label: '🍓 Strawberry' },
+]
+
+const selectedFruit = ref<Fruit | null>(fruits[0])
+
+const colors: Color[] = [
+  { id: 'red', name: 'Red', hex: '#ef4444' },
+  { id: 'green', name: 'Green', hex: '#22c55e' },
+  { id: 'blue', name: 'Blue', hex: '#3b82f6' },
+  { id: 'yellow', name: 'Yellow', hex: '#eab308' },
+  { id: 'purple', name: 'Purple', hex: '#a855f7' },
+]
+
+const selectedColor = ref<Color | null>(colors[0])
+
+const statuses: Status[] = [
+  { id: 'draft', label: 'Draft' },
+  { id: 'review', label: 'In Review' },
+  { id: 'published', label: 'Published' },
+]
+
+const selectedStatus = ref<Status | null>(statuses[0])
+
+const priorities: Priority[] = [
+  { id: 'high', label: 'High' },
+  { id: 'medium', label: 'Medium' },
+  { id: 'low', label: 'Low' },
+]
+
+const selectedPriority = ref<Priority | null>(priorities[0])
+</script>

From cad2035de29d8dac85f8e15c098e50ce787901e3 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 2 Apr 2026 09:17:46 +0200
Subject: [PATCH 041/121] feat(visualizations): better filter condition

---
 .../src/components/Form/Listbox.vue           | 121 ++--
 design-system/ChartConfigurator.vue           | 677 +++++++++++-------
 pages/design/listbox.vue                      |  26 +-
 utils/charts.ts                               |   2 +-
 4 files changed, 500 insertions(+), 326 deletions(-)

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index a8f06127e..ea02ee868 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -1,59 +1,80 @@
 <template>
-    <Listbox v-slot="{ activeOption }" v-model="model">
-      <div class="relative">
-        <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">
-                <slot name="button">
-                    {{ model ? displayValue(model) : '' }}
-                </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="{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': isActive(activeOption, option),
-                                'pl-2': selected,
-                                'pl-6': !selected,
-                              }">
-                    <div class="flex items-center justify-center aspect-square">
-                        <RiCheckLine v-if="selected" class="size-4 text-new-primary" />
-                    </div>
-                    <slot
-                        name="option"
-                        v-bind="{ option, active: isActive(activeOption, option) }"
-                    >
-                        {{ displayValue(option) }}
-                    </slot>
-                </li>
-            </ListboxOption>
-        </ListboxOptions>
+  <Listbox
+    v-slot="{ activeOption }"
+    v-model="model"
+  >
+    <div class="relative">
+      <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-100 flex items-center justify-between gap-2">
+              {{ model ? displayValue(model) : '' }}
+              <RiArrowDownSLine class="size-4 justify-self-end" />
+            </div>
+          </slot>
+        </ListboxButton>
       </div>
-    </Listbox>
+
+      <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="{ 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': isActive(activeOption, option),
+              'pl-2': selected,
+              'pl-6': !selected,
+            }"
+          >
+            <div class="flex items-center justify-center aspect-square">
+              <RiCheckLine
+                v-if="selected"
+                class="size-4 text-new-primary"
+              />
+            </div>
+            <slot
+              name="option"
+              v-bind="{ option, active: isActive(activeOption, option) }"
+            >
+              {{ 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 { RiCheckLine } from '@remixicon/vue';
+import { RiCheckLine } from '@remixicon/vue'
 
 const props = withDefaults(defineProps<{
-    options?: Array<T>
-    getOptionId?: (option: T) => string | number
-    displayValue: (option: T) => string
+  options?: Array<T>
+  getOptionId?: (option: T) => string | number
+  displayValue: (option: T) => string
 }>(), {
-    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
+  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()')
-    },
+    throw new Error('Please set getOptionId()')
+  },
 })
 
 const model = defineModel<T | null>()
@@ -61,14 +82,14 @@ const model = defineModel<T | null>()
 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,
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+    crossAxis: true,
+  })],
+  whileElementsMounted: autoUpdate,
 })
 
 function isActive(activeOption: T, currentOption: T) {
-    return activeOption ? props.getOptionId(activeOption) === props.getOptionId(currentOption) : false
+  return activeOption ? props.getOptionId(activeOption) === props.getOptionId(currentOption) : false
 }
 </script>
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 3e47aee10..1627f1cb9 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -1,268 +1,424 @@
 <template>
-    <div class="grid lg:grid-cols-12 gap-4">
-        <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
-            <div>
-                <label for="chart-title" class="font-bold fr-label">{{ $t('Titre') }}</label>
-                <input id="chart-title" v-model="title" type="text" class="w-full fr-input">
-            </div>
-
-            <div>
-                <label for="chart-description" class="font-bold fr-label">{{ $t('Description') }}</label>
-                <textarea id="chart-description" v-model="desc" class="w-full fr-input" rows="2" />
-            </div>
-            <div class="mt-4">
-                <ClientOnly>
-                    <ChartViewerWrapper v-model="form" @columns="columns = $event" />
-                </ClientOnly>
-            </div>
+  <div class="grid lg:grid-cols-12 gap-4">
+    <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
+      <div>
+        <label
+          for="chart-title"
+          class="font-bold fr-label"
+        >{{ $t('Titre') }}</label>
+        <input
+          id="chart-title"
+          v-model="title"
+          type="text"
+          class="w-full fr-input"
+        >
+      </div>
+
+      <div>
+        <label
+          for="chart-description"
+          class="font-bold fr-label"
+        >{{ $t('Description') }}</label>
+        <textarea
+          id="chart-description"
+          v-model="desc"
+          class="w-full fr-input"
+          rows="2"
+        />
+      </div>
+      <div class="mt-4">
+        <ClientOnly>
+          <ChartViewerWrapper
+            v-model="form"
+            @columns="columns = $event"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+    <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
+      <fieldset class="px-6 space-y-4">
+        <label
+          for="existing-charts"
+          class="mb-2 font-bold"
+        >
+          {{ $t('Graphiques existants') }}
+        </label>
+        <div class="flex gap-2">
+          <select
+            id="existing-charts"
+            v-model="selectedChartId"
+            class="flex-1 fr-select"
+          >
+            <option
+              value=""
+              disabled
+            >
+              {{ $t('Sélectionnez un graphique') }}
+            </option>
+            <option
+              v-for="chart in charts?.data"
+              :key="chart.id"
+              :value="chart.id"
+            >
+              {{ chart.title }}
+            </option>
+          </select>
+          <button
+            class="fr-btn"
+            :disabled="!selectedChartId"
+            @click="loadSelectedChart"
+          >
+            {{ $t('Charger') }}
+          </button>
+        </div>
+      </fieldset>
+      <fieldset class="px-6">
+        <p class="mb-2 font-bold">
+          {{ $t('Source de données') }}
+        </p>
+        <SearchableSelect
+          v-model="dataset"
+          :label="$t('Jeu de données')"
+          :placeholder="$t('Recherchez un jeu de données...')"
+          :display-value="(option: DatasetSuggest) => option.title"
+          :get-option-id="(option: DatasetSuggest) => option.id"
+          :multiple="false"
+          :suggest="suggestDataset"
+          class="mb-4"
+        />
+        <label
+          for="resource-select"
+          class="fr-label"
+        >{{ $t('Choix de la ressource') }}</label>
+        <select
+          id="resource-select"
+          v-model="selectedResource"
+          class="w-full fr-select"
+          :disabled="!dataset"
+        >
+          <option
+            value=""
+            disabled
+          >
+            {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
+          </option>
+          <option
+            v-for="resource in resources"
+            :key="resource.id"
+            :value="resource.id"
+          >
+            {{ resource.title }}
+          </option>
+        </select>
+      </fieldset>
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <label
+          for="chart-type"
+          class="fr-label font-bold"
+        >
+          {{ $t('Type de graphique') }}
+        </label>
+        <div>
+          <select
+            id="chart-type"
+            v-model="form.chart_type"
+            class="w-full fr-select"
+          >
+            <option value="line">
+              {{ $t('Ligne') }}
+            </option>
+            <option value="histogram">
+              {{ $t('Histogramme') }}
+            </option>
+          </select>
+        </div>
+      </fieldset>
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Axe X') }}
+        </p>
+        <div>
+          <label
+            for="x-axis-column"
+            class="fr-label"
+          >{{ $t('Choisir quoi afficher') }}</label>
+          <select
+            id="x-axis-column"
+            v-model="form.x_axis.column_x"
+            class="w-full fr-select"
+          >
+            <optgroup
+              v-for="{ key, value } in flattenedColumns"
+              :key="key"
+              :label="savedResources[key]?.title ?? key"
+            >
+              <option
+                v-for="column in value"
+                :key="column"
+                :value="column"
+              >
+                {{ column }}
+              </option>
+            </optgroup>
+          </select>
+        </div>
+        <div>
+          <label
+            for="x-axis-type"
+            class="fr-label"
+          >{{ $t('Type') }}</label>
+          <select
+            id="x-axis-type"
+            v-model="form.x_axis.type"
+            class="w-full fr-select"
+          >
+            <option value="discrete">
+              {{ $t('Discret (catégories)') }}
+            </option>
+            <option value="continuous">
+              {{ $t('Continu (valeurs)') }}
+            </option>
+          </select>
+        </div>
+        <div>
+          <label
+            for="x-axis-sort-combined"
+            class="fr-label"
+          >{{ $t('Trier par') }}</label>
+          <select
+            id="x-axis-sort-combined"
+            v-model="form.x_axis.sort_combined"
+            class="w-full fr-select"
+          >
+            <option
+              v-for="(label, value) in sortOptionLabels"
+              :key="value"
+              :value
+            >
+              {{ label }}
+            </option>
+          </select>
+        </div>
+      </fieldset>
+
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Série') }}
+        </p>
+        <div
+          v-for="(serie, index) in form.series"
+          :key="index"
+          class="space-y-4"
+        >
+          <div>
+            <label
+              :for="`column-y-${index}`"
+              class="fr-label"
+            >{{ $t('Colonne Y')
+            }}</label>
+            <select
+              :id="`column-y-${index}`"
+              v-model="serie.column_y"
+              class="w-full fr-select"
+            >
+              <template v-if="selectedResource">
+                <option
+                  v-for="column in columns[selectedResource]"
+                  :key="column"
+                  :value="column"
+                >
+                  {{ column }}
+                </option>
+              </template>
+            </select>
+          </div>
+
+          <div>
+            <label
+              :for="`aggregate-y-${index}`"
+              class="fr-label"
+            >{{ $t('Agrégation')
+            }}</label>
+            <select
+              :id="`aggregate-y-${index}`"
+              v-model="serie.aggregate_y"
+              class="w-full fr-select"
+            >
+              <option :value="null">
+                {{ $t('Non') }}
+              </option>
+              <option value="sum">
+                {{ $t('Somme') }}
+              </option>
+              <option value="avg">
+                {{ $t('Moyenne') }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </fieldset>
+
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Filtre') }}
+        </p>
+        <div
+          v-if="form.filter"
+          class="flex items-center gap-2 flex-wrap md:flex-nowrap"
+        >
+          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
+
+          <!-- Column select -->
+          <select
+            v-model="form.filter.column"
+            class="fr-select text-sm"
+          >
+            <option
+              value=""
+              disabled
+            >
+              {{ $t('Colonne') }}
+            </option>
+            <template v-if="selectedResource">
+              <option
+                v-for="column in columns[selectedResource]"
+                :key="column"
+                :value="column"
+              >
+                {{ column }}
+              </option>
+            </template>
+          </select>
+          <div class="relative">
+            <Listbox
+              v-model="form.filter.condition"
+              :options="conditionOptions"
+              :display-value="getConditionLabel"
+            />
+          </div>
+
+          <!-- Value input -->
+          <input
+            v-model="form.filter.value"
+            type="text"
+            class="fr-input text-sm w-32"
+            :placeholder="$t('Valeur')"
+          >
+
+          <!-- Remove button -->
+          <BrandedButton
+            size="sm"
+            :disabled="!form.filter.column"
+            @click="removeFilter"
+          >
+            <RiDeleteBinLine class="w-4 h-4" />
+          </BrandedButton>
+        </div>
+        <div v-else>
+          <BrandedButton
+            size="sm"
+            color="tertiary"
+            :icon="RiAddLine"
+            @click="form.filter={ column: '', condition: 'equal', value: '' }"
+          >
+            {{ $t('Ajouter un filtre') }}
+          </BrandedButton>
+        </div>
+      </fieldset>
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Axe Y') }}
+        </p>
+        <div>
+          <label
+            for="y-axis-label"
+            class="fr-label"
+          >{{ $t('Label') }}</label>
+          <input
+            id="y-axis-label"
+            v-model="form.y_axis.label"
+            type="text"
+            class="w-full fr-input"
+          >
         </div>
-        <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
-            <fieldset class="px-6 space-y-4">
-                <label for="existing-charts" class="mb-2 font-bold">
-                    {{ $t('Graphiques existants') }}
-                </label>
-                <div class="flex gap-2">
-                    <select id="existing-charts" v-model="selectedChartId" class="flex-1 fr-select">
-                        <option value="" disabled>
-                            {{ $t('Sélectionnez un graphique') }}
-                        </option>
-                        <option v-for="chart in charts?.data" :key="chart.id" :value="chart.id">
-                            {{ chart.title }}
-                        </option>
-                    </select>
-                    <button class="fr-btn" :disabled="!selectedChartId" @click="loadSelectedChart">
-                        {{ $t('Charger') }}
-                    </button>
-                </div>
-            </fieldset>
-            <fieldset class="px-6">
-                <p class="mb-2 font-bold">
-                    {{ $t('Source de données') }}
-                </p>
-                <SearchableSelect v-model="dataset" :label="$t('Jeu de données')"
-                    :placeholder="$t('Recherchez un jeu de données...')"
-                    :display-value="(option: DatasetSuggest) => option.title"
-                    :get-option-id="(option: DatasetSuggest) => option.id" :multiple="false" :suggest="suggestDataset"
-                    class="mb-4" />
-                <label for="resource-select" class="fr-label">{{ $t('Choix de la ressource') }}</label>
-                <select id="resource-select" v-model="selectedResource" class="w-full fr-select" :disabled="!dataset">
-                    <option value="" disabled>
-                        {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
-                    </option>
-                    <option v-for="resource in resources" :key="resource.id" :value="resource.id">
-                        {{ resource.title }}
-                    </option>
-                </select>
-            </fieldset>
-            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-                <label for="chart-type" class="fr-label font-bold">
-                    {{ $t('Type de graphique') }}
-                </label>
-                <div>
-                    <select id="chart-type" v-model="form.chart_type" class="w-full fr-select">
-                        <option value="line">
-                            {{ $t('Ligne') }}
-                        </option>
-                        <option value="histogram">
-                            {{ $t('Histogramme') }}
-                        </option>
-                    </select>
-                </div>
-            </fieldset>
-            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-                <p class="font-bold mb-2">
-                    {{ $t('Axe X') }}
-                </p>
-                <div>
-                    <label for="x-axis-column" class="fr-label">{{ $t('Choisir quoi afficher') }}</label>
-                    <select id="x-axis-column" v-model="form.x_axis.column_x" class="w-full fr-select">
-                        <optgroup v-for="{ key, value } in flattenedColumns" :key="key"
-                            :label="savedResources[key]?.title ?? key">
-                            <option v-for="column in value" :key="column" :value="column">
-                                {{ column }}
-                            </option>
-                        </optgroup>
-                    </select>
-                </div>
-                <div>
-                    <label for="x-axis-type" class="fr-label">{{ $t('Type') }}</label>
-                    <select id="x-axis-type" v-model="form.x_axis.type" class="w-full fr-select">
-                        <option value="discrete">
-                            {{ $t('Discret (catégories)') }}
-                        </option>
-                        <option value="continuous">
-                            {{ $t('Continu (valeurs)') }}
-                        </option>
-                    </select>
-                </div>
-                <div>
-                    <label for="x-axis-sort-combined" class="fr-label">{{ $t('Trier par') }}</label>
-                    <select id="x-axis-sort-combined" v-model="form.x_axis.sort_combined" class="w-full fr-select">
-                        <option v-for="(label, value) in sortOptionLabels" :key="value" :value>
-                            {{ label }}
-                        </option>
-                    </select>
-                </div>
-            </fieldset>
-
-            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-                <p class="font-bold mb-2">
-                    {{ $t('Série') }}
-                </p>
-                <div v-for="(serie, index) in form.series" :key="index" class="space-y-4">
-                    <div>
-                        <label :for="`column-y-${index}`" class="fr-label">{{ $t('Colonne Y')
-                            }}</label>
-                        <select :id="`column-y-${index}`" v-model="serie.column_y" class="w-full fr-select">
-                            <template v-if="selectedResource">
-                                <option v-for="column in columns[selectedResource]" :key="column" :value="column">
-                                    {{ column }}
-                                </option>
-                            </template>
-                        </select>
-                    </div>
-
-                    <div>
-                        <label :for="`aggregate-y-${index}`" class="fr-label">{{ $t('Agrégation')
-                            }}</label>
-                        <select :id="`aggregate-y-${index}`" v-model="serie.aggregate_y" class="w-full fr-select">
-                            <option :value="null">
-                                {{ $t('Non') }}
-                            </option>
-                            <option value="sum">
-                                {{ $t('Somme') }}
-                            </option>
-                            <option value="avg">
-                                {{ $t('Moyenne') }}
-                            </option>
-                        </select>
-                    </div>
-                </div>
-            </fieldset>
-
-            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-                <p class="font-bold mb-2">
-                    {{ $t('Filtre') }}
-                </p>
-                <div class="flex items-center gap-2 flex-wrap md:flex-nowrap" v-if="form.filter">
-                    <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
-
-                    <!-- Column select -->
-                    <select v-model="form.filter.column" class="fr-select text-sm">
-                        <option value="" disabled>
-                            {{ $t('Colonne') }}
-                        </option>
-                        <template v-if="selectedResource">
-                            <option v-for="column in columns[selectedResource]" :key="column" :value="column">
-                                {{ column }}
-                            </option>
-                        </template>
-                    </select>
-                    <div class="relative">
-                    <Listbox v-model="form.filter.condition">
-                        <template #button>
-                            {{ form.filter.condition }}
-                        </template>
-                        <ListboxOption v-slot="{active, selected}" as="template" value="equal">
-                            <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,
-                                'pl-2': selected,
-                                'pl-6': !selected,
-                              }"
-                            >
-                              <div
-                                class="flex items-center justify-center aspect-square"
-                              >
-                                <RiCheckLine
-                                  v-if="selected"
-                                  class="size-4 text-new-primary"
-                                />
-                              </div>
-                              {{ $t('Est') }}
-                            </li>
-                        </ListboxOption>
-                        <ListboxOption class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900" value="greater">
-                          {{ $t('Est supérieur à') }}
-                        </ListboxOption>
-                    </Listbox>
-                    </div>
-
-                    <!-- Value input -->
-                    <input v-model="form.filter.value" type="text" class="fr-input text-sm w-32"
-                        :placeholder="$t('Valeur')">
-
-                    <!-- Remove button -->
-                    <BrandedButton size="sm" @click="removeFilter" :disabled="!form.filter.column">
-                        <RiDeleteBinLine class="w-4 h-4" />
-                    </BrandedButton>
-                </div>
-                <div v-else>
-                    <BrandedButton size="sm" color="tertiary" :icon="RiAddLine"
-                        @click="form.filter={column: '', condition: 'equal', value: ''}">
-                        {{ $t('Ajouter un filtre') }}
-                    </BrandedButton>
-
-                </div>
-            </fieldset>
-            <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-                <p class="font-bold mb-2">
-                    {{ $t('Axe Y') }}
-                </p>
-                <div>
-                    <label for="y-axis-label" class="fr-label">{{ $t('Label') }}</label>
-                    <input id="y-axis-label" v-model="form.y_axis.label" type="text" class="w-full fr-input">
-                </div>
-                <div class="grid grid-cols-2 gap-4">
-                    <div>
-                        <label for="y-axis-min" class="fr-label">{{ $t('Min') }}</label>
-                        <input id="y-axis-min" v-model.number="form.y_axis.min" type="number" class="w-full fr-input">
-                    </div>
-                    <div>
-                        <label for="y-axis-max" class="fr-label">{{ $t('Max') }}</label>
-                        <input id="y-axis-max" v-model.number="form.y_axis.max" type="number" class="w-full fr-input">
-                    </div>
-                </div>
-                <div class="grid grid-cols-2 gap-4">
-                    <div>
-                        <label for="y-axis-unit" class="fr-label">{{ $t('Unité') }}</label>
-                        <input id="y-axis-unit" v-model="form.y_axis.unit" type="text" class="w-full fr-input"
-                            :placeholder="$t('ex: €, %, kg')">
-                    </div>
-                    <div>
-                        <label for="y-axis-unit-position" class="fr-label">{{ $t('Position unité')
-                            }}</label>
-                        <select id="y-axis-unit-position" v-model="form.y_axis.unit_position" class="w-full fr-select">
-                            <option value="suffix">
-                                {{ $t('Suffixe') }}
-                            </option>
-                            <option value="prefix">
-                                {{ $t('Préfixe') }}
-                            </option>
-                        </select>
-                    </div>
-                </div>
-            </fieldset>
-
-            <div class="px-6">
-                <BrandedButton @click="saveChart">
-                    {{ $t('Sauvegarder le graphique') }}
-                </BrandedButton>
-            </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label
+              for="y-axis-min"
+              class="fr-label"
+            >{{ $t('Min') }}</label>
+            <input
+              id="y-axis-min"
+              v-model.number="form.y_axis.min"
+              type="number"
+              class="w-full fr-input"
+            >
+          </div>
+          <div>
+            <label
+              for="y-axis-max"
+              class="fr-label"
+            >{{ $t('Max') }}</label>
+            <input
+              id="y-axis-max"
+              v-model.number="form.y_axis.max"
+              type="number"
+              class="w-full fr-input"
+            >
+          </div>
         </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label
+              for="y-axis-unit"
+              class="fr-label"
+            >{{ $t('Unité') }}</label>
+            <input
+              id="y-axis-unit"
+              v-model="form.y_axis.unit"
+              type="text"
+              class="w-full fr-input"
+              :placeholder="$t('ex: €, %, kg')"
+            >
+          </div>
+          <div>
+            <label
+              for="y-axis-unit-position"
+              class="fr-label"
+            >{{ $t('Position unité')
+            }}</label>
+            <select
+              id="y-axis-unit-position"
+              v-model="form.y_axis.unit_position"
+              class="w-full fr-select"
+            >
+              <option value="suffix">
+                {{ $t('Suffixe') }}
+              </option>
+              <option value="prefix">
+                {{ $t('Préfixe') }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </fieldset>
+
+      <div class="px-6">
+        <BrandedButton @click="saveChart">
+          {{ $t('Sauvegarder le graphique') }}
+        </BrandedButton>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import type { Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
-import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton } from '@datagouv/components-next'
+import type { Resource, PaginatedArray, ChartForm, Chart, FilterCondition } from '@datagouv/components-next'
+import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 import { RiAddLine, RiDeleteBinLine } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
-import { Listbox } from '@datagouv/components-next'
-import { ListboxOption } from '@headlessui/vue'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
 
@@ -272,8 +428,6 @@ const form = defineModel<ChartForm>({
 
 const { t } = useTranslation()
 
-
-
 const columns = ref<Record<string, Array<string>>>({})
 const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
 
@@ -292,6 +446,15 @@ const { debounced: descDebounced } = useDebouncedRef(desc, debounceMs)
 
 const resources = computed(() => Object.values(savedResources))
 
+const conditionOptions: Array<FilterCondition> = ['equal', 'greater']
+
+function getConditionLabel(condition: FilterCondition) {
+  return {
+    equal: t('est'),
+    greater: t('est supérieur à'),
+  }[condition]
+}
+
 const sortOptionLabels = computed(() => {
   const xAxisColumn = form.value.x_axis.column_x
   const yAxisColumn = form.value.series[0]?.column_y
@@ -344,7 +507,7 @@ async function loadMissingResourcesForChart(resourceIds: Set<string>) {
     if (savedResources[id]) continue
 
     try {
-      const resource = await $api<{resource: Resource, dataset_id: string}>(`https://demo.data.gouv.fr/api/2/datasets/resources/${id}/`)
+      const resource = await $api<{ resource: Resource, dataset_id: string }>(`https://demo.data.gouv.fr/api/2/datasets/resources/${id}/`)
       savedResources[id] = resource.resource
     }
     catch (error) {
diff --git a/pages/design/listbox.vue b/pages/design/listbox.vue
index 970001316..5753c76d3 100644
--- a/pages/design/listbox.vue
+++ b/pages/design/listbox.vue
@@ -68,7 +68,10 @@
                 }"
               />
               {{ option.label }}
-              <span v-if="active" class="text-xs text-gray-500">(active)</span>
+              <span
+                v-if="active"
+                class="text-xs text-gray-500"
+              >(active)</span>
             </template>
           </Listbox>
         </div>
@@ -110,7 +113,10 @@
                 }"
               />
               {{ option.label }}
-              <span v-if="active" class="ml-auto text-xs text-gray-500">(active)</span>
+              <span
+                v-if="active"
+                class="ml-auto text-xs text-gray-500"
+              >(active)</span>
             </template>
           </Listbox>
         </div>
@@ -128,12 +134,6 @@ interface Fruit {
   label: string
 }
 
-interface Color {
-  id: string
-  name: string
-  hex: string
-}
-
 interface Status {
   id: string
   label: string
@@ -158,16 +158,6 @@ const fruits: Fruit[] = [
 
 const selectedFruit = ref<Fruit | null>(fruits[0])
 
-const colors: Color[] = [
-  { id: 'red', name: 'Red', hex: '#ef4444' },
-  { id: 'green', name: 'Green', hex: '#22c55e' },
-  { id: 'blue', name: 'Blue', hex: '#3b82f6' },
-  { id: 'yellow', name: 'Yellow', hex: '#eab308' },
-  { id: 'purple', name: 'Purple', hex: '#a855f7' },
-]
-
-const selectedColor = ref<Color | null>(colors[0])
-
 const statuses: Status[] = [
   { id: 'draft', label: 'Draft' },
   { id: 'review', label: 'In Review' },
diff --git a/utils/charts.ts b/utils/charts.ts
index 3852372e5..384924002 100644
--- a/utils/charts.ts
+++ b/utils/charts.ts
@@ -2,7 +2,7 @@ import type { Chart, ChartForm, ChartForApi, Filter } from '@datagouv/components
 
 export function toChartForm(chart: Chart) {
   const seriesFilter = chart.series[0]?.filters as Filter | null
-  
+
   return {
     title: chart.title,
     description: chart.description,

From 98364e7500926a340e598d5c053f89a8f68cb089 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 7 Apr 2026 12:04:08 +0200
Subject: [PATCH 042/121] fix: listbox

---
 .../src/components/Form/Listbox.vue           |   6 +-
 design-system/ChartConfigurator.vue           | 118 ++++++++----------
 2 files changed, 54 insertions(+), 70 deletions(-)

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index ea02ee868..a9bdcda3a 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -10,9 +10,9 @@
       >
         <ListboxButton class="input shadow-input text-sm flex items-center gap-2">
           <slot name="button">
-            <div class="w-100 flex items-center justify-between gap-2">
+            <div class="w-full flex items-center justify-between gap-2">
               {{ model ? displayValue(model) : '' }}
-              <RiArrowDownSLine class="size-4 justify-self-end" />
+                <RiArrowDownSLine class="flex-none size-4 justify-self-end" />
             </div>
           </slot>
         </ListboxButton>
@@ -61,7 +61,7 @@
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
 import { toValue, useTemplateRef } from 'vue'
-import { RiCheckLine } from '@remixicon/vue'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/vue'
 
 const props = withDefaults(defineProps<{
   options?: Array<T>
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 1627f1cb9..ea4b77622 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -111,6 +111,57 @@
           </option>
         </select>
       </fieldset>
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Filtre') }}
+        </p>
+        <div
+          v-if="form.filter"
+          class="flex items-center gap-2 flex-wrap md:flex-nowrap"
+        >
+          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
+          <div class="relative">
+            <Listbox
+              v-model="form.filter.column"
+              :options="columns[selectedResource]"
+              :display-value="(d: string) => d"
+            />
+          </div>
+          <div class="relative">
+            <Listbox
+              v-model="form.filter.condition"
+              :options="conditionOptions"
+              :display-value="getConditionLabel"
+            />
+          </div>
+
+          <input
+            v-model="form.filter.value"
+            type="text"
+            class="fr-input text-sm w-32"
+            :placeholder="$t('Valeur')"
+          >
+
+          <BrandedButton
+            size="sm"
+            :disabled="!form.filter.column"
+            @click="removeFilter"
+          >
+            <RiDeleteBinLine class="w-4 h-4" />
+          </BrandedButton>
+        </div>
+        <div v-else>
+          <BrandedButton
+            size="sm"
+            color="tertiary"
+            :icon="RiAddLine"
+            @click="form.filter={ column: '', condition: 'equal', value: '' }"
+          >
+            {{ $t('Ajouter un filtre') }}
+          </BrandedButton>
+        </div>
+      </fieldset>
+
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <label
           for="chart-type"
@@ -258,73 +309,6 @@
         </div>
       </fieldset>
 
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Filtre') }}
-        </p>
-        <div
-          v-if="form.filter"
-          class="flex items-center gap-2 flex-wrap md:flex-nowrap"
-        >
-          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
-
-          <!-- Column select -->
-          <select
-            v-model="form.filter.column"
-            class="fr-select text-sm"
-          >
-            <option
-              value=""
-              disabled
-            >
-              {{ $t('Colonne') }}
-            </option>
-            <template v-if="selectedResource">
-              <option
-                v-for="column in columns[selectedResource]"
-                :key="column"
-                :value="column"
-              >
-                {{ column }}
-              </option>
-            </template>
-          </select>
-          <div class="relative">
-            <Listbox
-              v-model="form.filter.condition"
-              :options="conditionOptions"
-              :display-value="getConditionLabel"
-            />
-          </div>
-
-          <!-- Value input -->
-          <input
-            v-model="form.filter.value"
-            type="text"
-            class="fr-input text-sm w-32"
-            :placeholder="$t('Valeur')"
-          >
-
-          <!-- Remove button -->
-          <BrandedButton
-            size="sm"
-            :disabled="!form.filter.column"
-            @click="removeFilter"
-          >
-            <RiDeleteBinLine class="w-4 h-4" />
-          </BrandedButton>
-        </div>
-        <div v-else>
-          <BrandedButton
-            size="sm"
-            color="tertiary"
-            :icon="RiAddLine"
-            @click="form.filter={ column: '', condition: 'equal', value: '' }"
-          >
-            {{ $t('Ajouter un filtre') }}
-          </BrandedButton>
-        </div>
-      </fieldset>
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
           {{ $t('Axe Y') }}

From 92c41556e7c6d705c072023c57f8f3462f4df4c1 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 7 Apr 2026 16:26:15 +0200
Subject: [PATCH 043/121] feat(chart): handle filter

---
 .../src/components/Form/Listbox.vue           | 38 +++++++------
 design-system/ChartConfigurator.vue           | 55 ++++++++++++-------
 2 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index a9bdcda3a..6398f897e 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -1,9 +1,6 @@
 <template>
-  <Listbox
-    v-slot="{ activeOption }"
-    v-model="model"
-  >
-    <div class="relative">
+  <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"
@@ -11,8 +8,13 @@
         <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">
-              {{ model ? displayValue(model) : '' }}
-                <RiArrowDownSLine class="flex-none size-4 justify-self-end" />
+              <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>
@@ -26,14 +28,15 @@
         <ListboxOption
           v-for="option in options"
           :key="getOptionId(toValue(option))"
-          v-slot="{ selected }"
+          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': isActive(activeOption, option),
+              'bg-gray-lower': active && !isDisabled(toValue(option)),
+              'text-new-disabled-text': isDisabled(toValue(option)),
               'pl-2': selected,
               'pl-6': !selected,
             }"
@@ -41,12 +44,13 @@
             <div class="flex items-center justify-center aspect-square">
               <RiCheckLine
                 v-if="selected"
-                class="size-4 text-new-primary"
+                class="size-4"
+                :class="isDisabled(toValue(option)) ?' text-new-disabled-text' : 'text-new-primary'"
               />
             </div>
             <slot
               name="option"
-              v-bind="{ option, active: isActive(activeOption, option) }"
+              v-bind="{ option, active }"
             >
               {{ displayValue(option) }}
             </slot>
@@ -66,7 +70,8 @@ import { RiArrowDownSLine, RiCheckLine } from '@remixicon/vue'
 const props = withDefaults(defineProps<{
   options?: Array<T>
   getOptionId?: (option: T) => string | number
-  displayValue: (option: T) => string
+  displayValue: (option: T | null) => string
+  isDisabled?: (option: T | null) => boolean
 }>(), {
   getOptionId: (option: T): string | number => {
     if (typeof option === 'string') return option
@@ -75,9 +80,12 @@ const props = withDefaults(defineProps<{
 
     throw new Error('Please set getOptionId()')
   },
+  isDisabled: (_option: T | null): boolean => {
+    return false
+  },
 })
 
-const model = defineModel<T | null>()
+const model = defineModel<T | null>({ required: true })
 
 const referenceRef = useTemplateRef('floatingReference')
 const floatingRef = useTemplateRef<InstanceType<typeof ListboxOptions>>('popover')
@@ -88,8 +96,4 @@ const { floatingStyles } = useFloating(referenceRef, floatingRef, {
   })],
   whileElementsMounted: autoUpdate,
 })
-
-function isActive(activeOption: T, currentOption: T) {
-  return activeOption ? props.getOptionId(activeOption) === props.getOptionId(currentOption) : false
-}
 </script>
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index ea4b77622..9a93dacb8 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -111,7 +111,7 @@
           </option>
         </select>
       </fieldset>
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+      <fieldset class="min-w-0 border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
           {{ $t('Filtre') }}
         </p>
@@ -119,36 +119,38 @@
           v-if="form.filter"
           class="flex items-center gap-2 flex-wrap md:flex-nowrap"
         >
-          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
-          <div class="relative">
-            <Listbox
-              v-model="form.filter.column"
-              :options="columns[selectedResource]"
-              :display-value="(d: string) => d"
-            />
-          </div>
-          <div class="relative">
-            <Listbox
-              v-model="form.filter.condition"
-              :options="conditionOptions"
-              :display-value="getConditionLabel"
-            />
+          <div class="text-xs text-gray-600">
+            {{ $t('Quand') }}
           </div>
+          <Listbox
+            v-model="form.filter.column"
+            :options="getColumnOptions()"
+            :display-value="d => getColumn(d)!.value"
+            :get-option-id="d => getColumn(d)!.key"
+            :is-disabled="d => getColumn(d)!.disabled"
+          />
+
+          <Listbox
+            class="min-w-20"
+            v-model="form.filter.condition"
+            :options="conditionOptions"
+            :display-value="getConditionLabel"
+          />
 
           <input
             v-model="form.filter.value"
             type="text"
-            class="fr-input text-sm w-32"
+            class="fr-input text-sm w-32 min-w-0"
             :placeholder="$t('Valeur')"
           >
 
           <BrandedButton
-            size="sm"
+            size="xs"
             :disabled="!form.filter.column"
+            :icon="RiDeleteBinLine"
+            icon-only
             @click="removeFilter"
-          >
-            <RiDeleteBinLine class="w-4 h-4" />
-          </BrandedButton>
+          />
         </div>
         <div v-else>
           <BrandedButton
@@ -432,7 +434,8 @@ const resources = computed(() => Object.values(savedResources))
 
 const conditionOptions: Array<FilterCondition> = ['equal', 'greater']
 
-function getConditionLabel(condition: FilterCondition) {
+function getConditionLabel(condition: FilterCondition | null) {
+  if (!condition) return ''
   return {
     equal: t('est'),
     greater: t('est supérieur à'),
@@ -451,6 +454,16 @@ const sortOptionLabels = computed(() => {
   }
 })
 
+const columnDetails = computed(() => [{ key: '', value: t('Colonne'), disabled: true }, ...columns.value[selectedResource.value].map(c => ({ key: c, value: c, disabled: false }))])
+
+function getColumnOptions() {
+  return columnDetails.value.map(d => d.key)
+}
+
+function getColumn(key: string | null) {
+  return columnDetails.value.find(c => c.key === key)
+}
+
 const { $api } = useNuxtApp()
 const hasTabularData = useHasTabularData()
 const getProfile = useGetProfile()

From 4c6cb0cadf45ebf1ccca12bb4793cc7c2661c7d8 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 18:07:39 +0200
Subject: [PATCH 044/121] feat(chart): filters wip

---
 .../components/Chart/ChartViewerWrapper.vue   | 12 ++-
 .../src/types/visualizations.ts               |  3 +-
 design-system/ChartConfigurator.vue           | 76 ++++++++++++++++++-
 3 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index f76bd89f6..ff4bf8b4d 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -23,7 +23,7 @@ import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
 import { fetchTabularData, useGetProfile, type TabularDataResponse, type TabularProfileResponse } from '../../functions/tabularApi'
-import type { Chart, ChartForm } from '../../types/visualizations'
+import type { AndFilters, Chart, ChartForm, GenericFilter } from '../../types/visualizations'
 
 const chart = defineModel<Chart | ChartForm>({ required: true })
 
@@ -93,7 +93,11 @@ async function fetchSeriesProfile() {
     console.log(err)
     series.columns = {}
   }
-}
+ }
+
+ function isMultipleFilters(filter: GenericFilter): filter is AndFilters {
+   return 'filters' in filter
+ }
 
 async function fetchSeriesData() {
   status.value = 'pending'
@@ -109,10 +113,12 @@ async function fetchSeriesData() {
     // Fetch data for all series in parallel
     const fetchPromises = chart.value.series.map(async (serie) => {
       const xColumn = serie.column_x_name_override ?? chart.value.x_axis.column_x
+
+      const filters = serie.filters ? serie.filters : {}
+
       if (!xColumn || !serie.resource_id || !serie.column_y) return
       return {
         id: serie.resource_id,
-        profile: await getProfile(serie.resource_id),
         data: await fetchTabularData(config, {
           columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
           resourceId: serie.resource_id,
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index 951a07a60..a8d2dfa1a 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -1,8 +1,7 @@
 import type { TabularAggregateType } from '../functions/tabularApi'
 import type { Owned, OwnedWithId } from './owned'
 
-export type FilterCondition = 'equal' | 'greater'
-
+export type FilterCondition = 'exact' | 'differs' | 'is_null' | 'is_not_null' | 'greater' | 'less' | 'strictly_greater' | 'strictly_less'
 export type Filter = {
   column: string
   condition: FilterCondition
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 9a93dacb8..06da58d4e 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -311,6 +311,68 @@
         </div>
       </fieldset>
 
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Filtre') }}
+        </p>
+        <div
+          v-if="form.filter && selectedResource"
+          class="flex items-center gap-2 flex-wrap md:flex-nowrap"
+        >
+          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
+
+          <!-- Column select -->
+          <Listbox
+            v-model="form.filter.column"
+            :options="columns[selectedResource]"
+            :display-value="(o: string) => o"
+            class="min-w-28 max-w-36"
+          >
+            <template #button>
+              <div class="w-full truncate">
+                {{ form.filter.column }}
+              </div>
+              <RiArrowDownSLine class="shrink-0 size-4 justify-self-end" />
+            </template>
+          </Listbox>
+
+          <Listbox
+            v-model="form.filter.condition"
+            :options="conditionOptions"
+            :display-value="getConditionLabel"
+            class="shrink-0"
+          />
+
+          <!-- Value input -->
+          <input
+            v-model="form.filter.value"
+            type="text"
+            class="fr-input text-sm flex-1 max-w-1/3"
+            :placeholder="$t('Valeur')"
+          >
+
+          <!-- Remove button -->
+          <BrandedButton
+            size="xs"
+            color="tertiary"
+            keep-margins-even-without-borders
+            :icon="RiDeleteBinLine"
+            icon-only
+            :disabled="!form.filter.column"
+            @click="removeFilter"
+          />
+        </div>
+        <div v-else>
+          <BrandedButton
+            size="sm"
+            color="tertiary"
+            :icon="RiAddLine"
+            @click="form.filter = { column: '', condition: 'equal', value: '' }"
+          >
+            {{ $t('Ajouter un filtre') }}
+          </BrandedButton>
+        </div>
+      </fieldset>
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
           {{ $t('Axe Y') }}
@@ -403,7 +465,7 @@ import type { Resource, PaginatedArray, ChartForm, Chart, FilterCondition } from
 import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
-import { RiAddLine, RiDeleteBinLine } from '@remixicon/vue'
+import { RiAddLine, RiArrowDownSLine, RiDeleteBinLine } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
@@ -432,13 +494,19 @@ const { debounced: descDebounced } = useDebouncedRef(desc, debounceMs)
 
 const resources = computed(() => Object.values(savedResources))
 
-const conditionOptions: Array<FilterCondition> = ['equal', 'greater']
+const conditionOptions: Array<FilterCondition> = ['exact', 'differs', 'is_null', 'is_not_null', 'greater', 'less', 'strictly_greater', 'strictly_less']
 
 function getConditionLabel(condition: FilterCondition | null) {
   if (!condition) return ''
   return {
-    equal: t('est'),
-    greater: t('est supérieur à'),
+      exact: t('est'),
+      differs: t("n'est pas"),
+      is_null: t('est vide'),
+      is_not_null: t("n'est pas vide"),
+      greater: t('supérieur ou égal à'),
+      less: t('inférieur ou égal à'),
+      strictly_greater: t('supérieur à'),
+      strictly_less: t('inférieur à'),
   }[condition]
 }
 

From 5cc662cb0f0bcf9122209ec9f0808c3df1db54a3 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Thu, 2 Apr 2026 15:29:39 +0200
Subject: [PATCH 045/121] feat: add filter support to Tabular API fetch
 function

---
 datagouv-components/src/functions/tabularApi.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index b6abd3aa9..fb77b105a 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -24,6 +24,11 @@ export type FetchTabularDataOptions = {
     column: string
     type: TabularAggregateType
   } | undefined
+  filters?: Array<{
+    column: string
+    operator: string
+    value?: string
+  }> | undefined
 }
 
 export type TabularProfileResponse = {
@@ -84,6 +89,17 @@ export async function fetchTabularData(config: PluginConfig, options: FetchTabul
   if (options.groupBy && options.aggregation?.type) {
     url += `&${options.groupBy}__groupby&${options.aggregation.column}__${options.aggregation.type}`
   }
+  if (options.filters) {
+    for (const filter of options.filters) {
+      if (filter.operator === 'isnull') {
+        url += `&${filter.column}__isnull`
+      } else if (filter.operator === 'isnotnull') {
+        url += `&${filter.column}__isnotnull`
+      } else if (filter.value !== undefined && filter.value !== '') {
+        url += `&${filter.column}__${filter.operator}=${encodeURIComponent(filter.value)}`
+      }
+    }
+  }
   return await ofetch<TabularDataResponse>(url)
 }
 

From 84feecc00eee7ae7d741845c1314ed346ac6c733 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Thu, 2 Apr 2026 15:30:39 +0200
Subject: [PATCH 046/121] feat: add filter condition to operator mapping
 utility

---
 .../src/functions/filterUtils.ts              | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 datagouv-components/src/functions/filterUtils.ts

diff --git a/datagouv-components/src/functions/filterUtils.ts b/datagouv-components/src/functions/filterUtils.ts
new file mode 100644
index 000000000..c3035d3af
--- /dev/null
+++ b/datagouv-components/src/functions/filterUtils.ts
@@ -0,0 +1,35 @@
+import type { FilterCondition, Filter } from '../types/visualizations'
+
+/**
+ * Maps frontend filter conditions to Tabular API query parameter operators
+ */
+export const CONDITION_TO_OPERATOR: Record<FilterCondition, string> = {
+  exact: 'exact',
+  differs: 'differs',
+  is_null: 'isnull',
+  is_not_null: 'isnotnull',
+  greater: 'greater',
+  less: 'less',
+  strictly_greater: 'strictly_greater',
+  strictly_less: 'strictly_less',
+}
+
+/**
+ * Converts a Filter object to the format expected by fetchTabularData
+ */
+export function filterToApiFormat(filter: Filter | undefined): Array<{
+  column: string
+  operator: string
+  value?: string
+}> | undefined {
+  if (!filter || !filter.column) return undefined
+  
+  const operator = CONDITION_TO_OPERATOR[filter.condition]
+  if (!operator) return undefined
+  
+  return [{
+    column: filter.column,
+    operator,
+    value: filter.value || undefined,
+  }]
+}

From 4e7bcc6f6feefd5cfe5549603e57a05c0f9360db Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Thu, 2 Apr 2026 15:55:51 +0200
Subject: [PATCH 047/121] feat: pass chart filter to series in
 ChartConfigurator

---
 datagouv-components/src/main.ts     |  1 +
 design-system/ChartConfigurator.vue | 44 +++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index e10766862..7e0568db5 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -126,6 +126,7 @@ export * from './functions/reuses'
 export * from './functions/schemas'
 export * from './functions/users'
 export * from './functions/tabularApi'
+export * from './functions/filterUtils'
 export * from './types/access_types'
 
 export type {
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 06da58d4e..5c74af33a 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -463,6 +463,7 @@
 <script setup lang="ts">
 import type { Resource, PaginatedArray, ChartForm, Chart, FilterCondition } from '@datagouv/components-next'
 import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox } from '@datagouv/components-next'
+import { filterToApiFormat } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 import { RiAddLine, RiArrowDownSLine, RiDeleteBinLine } from '@remixicon/vue'
@@ -625,6 +626,49 @@ function loadSelectedChart() {
   }
 }
 
+function toChartApi(form: ChartForm): any {
+  const xAxis: any = {
+    column_x: form.x_axis.column_x,
+    type: form.x_axis.type,
+    sort_x_by: null,
+    sort_x_direction: null,
+  }
+  
+  // Parse combined sort into separate fields
+  if (form.x_axis.sort_combined) {
+    const [sortBy, direction] = form.x_axis.sort_combined.split('-')
+    xAxis.sort_x_by = sortBy.replace('axis_', '')
+    xAxis.sort_x_direction = direction
+  }
+  
+  return {
+    title: form.title,
+    description: form.description,
+    private: form.private ?? false,
+    x_axis: xAxis,
+    y_axis: form.y_axis,
+    series: form.series.map(serie => {
+      // Convert chart-level filter to series-level filter if it exists
+      let seriesFilters = serie.filters
+      if (form.filter && !seriesFilters) {
+        seriesFilters = filterToApiFormat(form.filter)
+      }
+      
+      return {
+        type: form.chart_type ?? 'histogram',
+        column_y: serie.column_y,
+        aggregate_y: serie.aggregate_y || null,
+        resource_id: serie.resource_id,
+        column_x_name_override: serie.column_x_name_override ?? null,
+        filters: seriesFilters ?? null,
+      }
+    }),
+    extras: form.extras ?? {},
+    ...(form.owned.owner ? { owner: form.owned.owner } : {}),
+    ...(form.owned.organization ? { organization: form.owned.organization } : {}),
+  }
+}
+
 async function saveChart() {
   try {
     const chartForApi = toChartApi(form.value)

From e3d1ebfb6077b28d984542d589837ff72d29b91f Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Thu, 2 Apr 2026 15:57:37 +0200
Subject: [PATCH 048/121] feat: apply series filters when fetching chart data

---
 .../src/components/Chart/ChartViewerWrapper.vue              | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index ff4bf8b4d..945338572 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -23,6 +23,7 @@ import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
 import { fetchTabularData, useGetProfile, type TabularDataResponse, type TabularProfileResponse } from '../../functions/tabularApi'
+import { filterToApiFormat } from '../../functions/filterUtils'
 import type { AndFilters, Chart, ChartForm, GenericFilter } from '../../types/visualizations'
 
 const chart = defineModel<Chart | ChartForm>({ required: true })
@@ -114,7 +115,8 @@ async function fetchSeriesData() {
     const fetchPromises = chart.value.series.map(async (serie) => {
       const xColumn = serie.column_x_name_override ?? chart.value.x_axis.column_x
 
-      const filters = serie.filters ? serie.filters : {}
+      // Convert series-level filters to API format
+      const apiFilters = serie.filters ? filterToApiFormat(serie.filters) : undefined
 
       if (!xColumn || !serie.resource_id || !serie.column_y) return
       return {
@@ -131,6 +133,7 @@ async function fetchSeriesData() {
                 type: serie.aggregate_y,
               }
             : undefined,
+          filters: apiFilters,
         }),
       }
     }).filter(Boolean) as Array<Promise<{

From b6bdb823e57037870781f9633b64117daf2922a5 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Thu, 2 Apr 2026 16:27:53 +0200
Subject: [PATCH 049/121] fix: correct filter conversion between API and
 frontend formats

---
 .../src/functions/filterUtils.ts              | 35 +++++++++++++++
 datagouv-components/src/main.ts               |  1 +
 design-system/ChartConfigurator.vue           | 43 -------------------
 utils/charts.ts                               | 28 ++++++------
 4 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/datagouv-components/src/functions/filterUtils.ts b/datagouv-components/src/functions/filterUtils.ts
index c3035d3af..5b4072a0d 100644
--- a/datagouv-components/src/functions/filterUtils.ts
+++ b/datagouv-components/src/functions/filterUtils.ts
@@ -14,6 +14,41 @@ export const CONDITION_TO_OPERATOR: Record<FilterCondition, string> = {
   strictly_less: 'strictly_less',
 }
 
+/**
+ * Maps Tabular API operators to frontend filter conditions
+ */
+export const OPERATOR_TO_CONDITION: Record<string, FilterCondition> = {
+  exact: 'exact',
+  differs: 'differs',
+  isnull: 'is_null',
+  isnotnull: 'is_not_null',
+  greater: 'greater',
+  less: 'less',
+  strictly_greater: 'strictly_greater',
+  strictly_less: 'strictly_less',
+}
+
+/**
+ * Converts a Filter API format object to the frontend Filter format
+ */
+export function filterFromApiFormat(filter: Array<{
+  column: string
+  operator: string
+  value?: string
+}> | undefined): Filter | undefined {
+  if (!filter || filter.length === 0) return undefined
+  
+  const filterObj = filter[0]
+  const condition = OPERATOR_TO_CONDITION[filterObj.operator]
+  if (!condition) return undefined
+  
+  return {
+    column: filterObj.column,
+    condition,
+    value: filterObj.value || undefined,
+  }
+}
+
 /**
  * Converts a Filter object to the format expected by fetchTabularData
  */
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 7e0568db5..e7e63ed83 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -127,6 +127,7 @@ export * from './functions/schemas'
 export * from './functions/users'
 export * from './functions/tabularApi'
 export * from './functions/filterUtils'
+export { filterFromApiFormat, OPERATOR_TO_CONDITION } from './functions/filterUtils'
 export * from './types/access_types'
 
 export type {
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 5c74af33a..36948d3d9 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -626,49 +626,6 @@ function loadSelectedChart() {
   }
 }
 
-function toChartApi(form: ChartForm): any {
-  const xAxis: any = {
-    column_x: form.x_axis.column_x,
-    type: form.x_axis.type,
-    sort_x_by: null,
-    sort_x_direction: null,
-  }
-  
-  // Parse combined sort into separate fields
-  if (form.x_axis.sort_combined) {
-    const [sortBy, direction] = form.x_axis.sort_combined.split('-')
-    xAxis.sort_x_by = sortBy.replace('axis_', '')
-    xAxis.sort_x_direction = direction
-  }
-  
-  return {
-    title: form.title,
-    description: form.description,
-    private: form.private ?? false,
-    x_axis: xAxis,
-    y_axis: form.y_axis,
-    series: form.series.map(serie => {
-      // Convert chart-level filter to series-level filter if it exists
-      let seriesFilters = serie.filters
-      if (form.filter && !seriesFilters) {
-        seriesFilters = filterToApiFormat(form.filter)
-      }
-      
-      return {
-        type: form.chart_type ?? 'histogram',
-        column_y: serie.column_y,
-        aggregate_y: serie.aggregate_y || null,
-        resource_id: serie.resource_id,
-        column_x_name_override: serie.column_x_name_override ?? null,
-        filters: seriesFilters ?? null,
-      }
-    }),
-    extras: form.extras ?? {},
-    ...(form.owned.owner ? { owner: form.owned.owner } : {}),
-    ...(form.owned.organization ? { organization: form.owned.organization } : {}),
-  }
-}
-
 async function saveChart() {
   try {
     const chartForApi = toChartApi(form.value)
diff --git a/utils/charts.ts b/utils/charts.ts
index 384924002..b44ae1619 100644
--- a/utils/charts.ts
+++ b/utils/charts.ts
@@ -1,4 +1,5 @@
 import type { Chart, ChartForm, ChartForApi, Filter } from '@datagouv/components-next'
+import { filterFromApiFormat } from '@datagouv/components-next'
 
 export function toChartForm(chart: Chart) {
   const seriesFilter = chart.series[0]?.filters as Filter | null
@@ -28,26 +29,28 @@ export function toChartForm(chart: Chart) {
     })),
     extras: chart.extras,
     chart_type: chart.series.length > 0 ? chart.series[0].type : null,
-    filter: seriesFilter && 'column' in seriesFilter ? seriesFilter : undefined,
+    filter: seriesFilter && 'column' in seriesFilter ? filterFromApiFormat(seriesFilter) : undefined,
   } satisfies ChartForm
 }
 
 export function toChartApi(chartForm: ChartForm): ChartForApi {
+  const xAxis = {
+    column_x: chartForm.x_axis.column_x,
+    type: chartForm.x_axis.type,
+    sort_x_by: chartForm.x_axis.sort_combined
+      ? (chartForm.x_axis.sort_combined.split('-')[0] as 'axis_x' | 'axis_y')
+      : null,
+    sort_x_direction: chartForm.x_axis.sort_combined
+      ? (chartForm.x_axis.sort_combined.split('-')[1] as 'asc' | 'desc')
+      : null,
+  }
+
   return {
     ...chartForm.owned,
     title: chartForm.title,
     description: chartForm.description,
     private: chartForm.private,
-    x_axis: {
-      column_x: chartForm.x_axis.column_x,
-      type: chartForm.x_axis.type,
-      sort_x_by: chartForm.x_axis.sort_combined
-        ? (chartForm.x_axis.sort_combined.split('-')[0] as 'axis_x' | 'axis_y')
-        : null,
-      sort_x_direction: chartForm.x_axis.sort_combined
-        ? (chartForm.x_axis.sort_combined.split('-')[1] as 'asc' | 'desc')
-        : null,
-    },
+    x_axis: xAxis,
     y_axis: {
       label: chartForm.y_axis.label ?? null,
       min: chartForm.y_axis.min ?? null,
@@ -59,7 +62,8 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
       ...serie,
       type: index === 0 && chartForm.chart_type ? chartForm.chart_type : serie.type,
       aggregate_y: serie.aggregate_y || null,
-      filters: index === 0 && chartForm.filter ? chartForm.filter : serie.filters,
+      // Use series filter if exists, otherwise use chart-level filter
+      filters: serie.filters || (index === 0 && chartForm.filter ? chartForm.filter : null),
     })),
     extras: chartForm.extras,
   }

From 2ca45a0de95f14f3422d6eb66cce40c43a4503b1 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 7 Apr 2026 09:37:01 +0200
Subject: [PATCH 050/121] feat: filters wip

---
 .../src/components/Chart/ChartViewerWrapper.vue | 17 ++++++++++++-----
 datagouv-components/src/functions/tabularApi.ts |  1 +
 datagouv-components/src/types/visualizations.ts |  2 +-
 design-system/ChartConfigurator.vue             |  3 +--
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 945338572..160e1a091 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -113,13 +113,20 @@ async function fetchSeriesData() {
 
     // Fetch data for all series in parallel
     const fetchPromises = chart.value.series.map(async (serie) => {
-      const xColumn = serie.column_x_name_override ?? chart.value.x_axis.column_x
+    const xColumn = serie.column_x_name_override ?? chart.value.x_axis.column_x
 
-      // Convert series-level filters to API format
-      const apiFilters = serie.filters ? filterToApiFormat(serie.filters) : undefined
+    console.log(chart.value)
+    if ('filter' in chart.value && chart.value.filter) {
+      serie.filters = chart.value.filter
+    }
 
-      if (!xColumn || !serie.resource_id || !serie.column_y) return
-      return {
+
+        // Convert series-level filters to API format
+        console.log(serie.filters)
+        const apiFilters = serie.filters ? filterToApiFormat(serie.filters) : undefined
+
+        if (!xColumn || !serie.resource_id || !serie.column_y) return
+        return {
         id: serie.resource_id,
         data: await fetchTabularData(config, {
           columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index fb77b105a..9c1d3bf7d 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -79,6 +79,7 @@ export type TabularProfileResponse = {
 export async function fetchTabularData(config: PluginConfig, options: FetchTabularDataOptions): Promise<TabularDataResponse> {
   const page = options.page ?? 1
   const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
+  console.log(options)
   let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
   if (options.columns) {
     url += `&columns=${options.columns.join(',')}`
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index a8d2dfa1a..b799689c2 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -83,5 +83,5 @@ export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organ
   x_axis: XAxisForm
   series: Array<DataSeriesForm>
   chart_type?: DataSeriesType | null
-  filter?: Filter
+  filter: GenericFilter
 }
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 36948d3d9..140de607c 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -367,7 +367,7 @@
             size="sm"
             color="tertiary"
             :icon="RiAddLine"
-            @click="form.filter = { column: '', condition: 'equal', value: '' }"
+            @click="form.filter = { column: '', condition: 'exact', value: '' }"
           >
             {{ $t('Ajouter un filtre') }}
           </BrandedButton>
@@ -463,7 +463,6 @@
 <script setup lang="ts">
 import type { Resource, PaginatedArray, ChartForm, Chart, FilterCondition } from '@datagouv/components-next'
 import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox } from '@datagouv/components-next'
-import { filterToApiFormat } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
 import { RiAddLine, RiArrowDownSLine, RiDeleteBinLine } from '@remixicon/vue'

From 83007e15c885799cea440438160eeeca37cafc81 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 18:10:23 +0200
Subject: [PATCH 051/121] feat: Task 1 - Create ChartFilterRow component

---
 .../src/components/Chart/ChartViewer.vue      |  19 +---
 .../components/Chart/ChartViewerWrapper.vue   |  52 +++------
 .../src/components/Form/Listbox.vue           |   2 +-
 .../src/functions}/charts.ts                  |   5 +-
 .../src/functions/filterUtils.ts              |  70 ------------
 .../src/functions/tabularApi.ts               |  20 ++--
 datagouv-components/src/main.ts               |   3 +-
 .../src/types/visualizations.ts               |   4 +-
 design-system/ChartConfigurator.vue           | 100 +++++-------------
 design-system/ChartFilterRow.vue              |  99 +++++++++++++++++
 pages/design/chart.vue                        |   1 +
 11 files changed, 160 insertions(+), 215 deletions(-)
 rename {utils => datagouv-components/src/functions}/charts.ts (90%)
 delete mode 100644 datagouv-components/src/functions/filterUtils.ts
 create mode 100644 design-system/ChartFilterRow.vue

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index d827aa12b..9e985529d 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -14,12 +14,12 @@ import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, Datas
 import VChart from 'vue-echarts'
 import { computed } from 'vue'
 import { summarize } from '../../functions/helpers'
-import type { Chart, XAxis, YAxis, ChartForm, XAxisForm } from '../../types/visualizations'
+import type { Chart, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
 
 const props = defineProps<{
-  chart: Chart | ChartForm
+  chart: Chart | ChartForApi
   series: {
     data: Record<string, Array<Record<string, unknown>>>
     columns: Record<string, Array<string>>
@@ -56,15 +56,8 @@ const echartsOption = computed(() => {
     const sortedData = [...props.series.data[resourceId]]
     let sortBy: string | null = null
     let sortDirection: 'asc' | 'desc' = 'asc'
-    if ('sort_combined' in props.chart.x_axis) {
-      const [sort, direction] = props.chart.x_axis.sort_combined.split('-')
-      sortBy = sort ?? null
-      sortDirection = direction as 'asc' | 'desc'
-    }
-    else {
-      sortBy = props.chart.x_axis.sort_x_by
-      sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
-    }
+    sortBy = props.chart.x_axis.sort_x_by
+    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
@@ -77,10 +70,6 @@ const echartsOption = computed(() => {
       })
     }
 
-    if ('chart_type' in props.chart && props.chart.chart_type) {
-      s.type = props.chart.chart_type
-    }
-
     return {
       series: {
         type: s.type === 'histogram' ? 'bar' : 'line',
diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 160e1a091..1e6779dd8 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -22,11 +22,13 @@ import { reactive, ref, watch } from 'vue'
 import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
+import { filterToApiFormat } from '../../functions/charts'
 import { fetchTabularData, useGetProfile, type TabularDataResponse, type TabularProfileResponse } from '../../functions/tabularApi'
-import { filterToApiFormat } from '../../functions/filterUtils'
-import type { AndFilters, Chart, ChartForm, GenericFilter } from '../../types/visualizations'
+import type { Chart, ChartForApi } from '../../types/visualizations'
 
-const chart = defineModel<Chart | ChartForm>({ required: true })
+const props = defineProps<{
+  chart: Chart | ChartForApi
+}>()
 
 const emit = defineEmits<{
   columns: [columns: Record<string, Array<string>>]
@@ -53,7 +55,7 @@ async function fetchSeriesProfile() {
   error.value = null
 
   try {
-    if (chart.value.series.length === 0) {
+    if (props.chart.series.length === 0) {
       status.value = 'success'
       series.data = {}
       series.columns = {}
@@ -61,7 +63,7 @@ async function fetchSeriesProfile() {
     }
 
     // Fetch data for all series in parallel
-    const fetchPromises = chart.value.series.map(async (serie) => {
+    const fetchPromises = props.chart.series.map(async (serie) => {
       if (!serie.resource_id) return
       return {
         id: serie.resource_id,
@@ -79,13 +81,6 @@ async function fetchSeriesProfile() {
       result.id,
       result.profile.profile.header,
     ]))
-    if (results.length > 0) {
-      const columns = results[0]?.profile.profile.header ?? []
-      const firstColumn = columns.filter(c => c !== '__id')[0]
-      if (!chart.value.x_axis.column_x && firstColumn) {
-        chart.value.x_axis.column_x = firstColumn
-      }
-    }
     status.value = 'success'
   }
   catch (err) {
@@ -94,39 +89,24 @@ async function fetchSeriesProfile() {
     console.log(err)
     series.columns = {}
   }
- }
-
- function isMultipleFilters(filter: GenericFilter): filter is AndFilters {
-   return 'filters' in filter
- }
+}
 
 async function fetchSeriesData() {
   status.value = 'pending'
   error.value = null
 
   try {
-    if (chart.value.series.length === 0 || !chart.value.x_axis.column_x) {
+    if (props.chart.series.length === 0 || !props.chart.x_axis.column_x) {
       status.value = 'success'
       series.data = {}
       return
     }
 
-    // Fetch data for all series in parallel
-    const fetchPromises = chart.value.series.map(async (serie) => {
-    const xColumn = serie.column_x_name_override ?? chart.value.x_axis.column_x
+    const fetchPromises = props.chart.series.map(async (serie) => {
+      const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
 
-    console.log(chart.value)
-    if ('filter' in chart.value && chart.value.filter) {
-      serie.filters = chart.value.filter
-    }
-
-
-        // Convert series-level filters to API format
-        console.log(serie.filters)
-        const apiFilters = serie.filters ? filterToApiFormat(serie.filters) : undefined
-
-        if (!xColumn || !serie.resource_id || !serie.column_y) return
-        return {
+      if (!xColumn || !serie.resource_id || !serie.column_y) return
+      return {
         id: serie.resource_id,
         data: await fetchTabularData(config, {
           columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
@@ -140,7 +120,7 @@ async function fetchSeriesData() {
                 type: serie.aggregate_y,
               }
             : undefined,
-          filters: apiFilters,
+          filters: serie.filters ?? undefined,
         }),
       }
     }).filter(Boolean) as Array<Promise<{
@@ -166,12 +146,12 @@ async function fetchSeriesData() {
 }
 
 // Watch for changes in the chart or its series
-watch(() => chart.value.series, async () => {
+watch(() => props.chart.series, async () => {
   await fetchSeriesProfile()
 }, { immediate: true, deep: true })
 
 // Watch for changes in the chart or its series
-watch([() => chart.value.series, () => chart.value.x_axis.column_x], async () => {
+watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () => {
   await fetchSeriesData()
 }, { immediate: true, deep: true })
 
diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index 6398f897e..9ac0f0cd9 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -67,7 +67,7 @@ import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
 import { toValue, useTemplateRef } from 'vue'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/vue'
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
   options?: Array<T>
   getOptionId?: (option: T) => string | number
   displayValue: (option: T | null) => string
diff --git a/utils/charts.ts b/datagouv-components/src/functions/charts.ts
similarity index 90%
rename from utils/charts.ts
rename to datagouv-components/src/functions/charts.ts
index b44ae1619..6891909d6 100644
--- a/utils/charts.ts
+++ b/datagouv-components/src/functions/charts.ts
@@ -1,5 +1,4 @@
-import type { Chart, ChartForm, ChartForApi, Filter } from '@datagouv/components-next'
-import { filterFromApiFormat } from '@datagouv/components-next'
+import type { Chart, ChartForm, ChartForApi, Filter, FilterCondition } from '../types/visualizations'
 
 export function toChartForm(chart: Chart) {
   const seriesFilter = chart.series[0]?.filters as Filter | null
@@ -29,7 +28,7 @@ export function toChartForm(chart: Chart) {
     })),
     extras: chart.extras,
     chart_type: chart.series.length > 0 ? chart.series[0].type : null,
-    filter: seriesFilter && 'column' in seriesFilter ? filterFromApiFormat(seriesFilter) : undefined,
+    filter: seriesFilter && 'column' in seriesFilter ? seriesFilter : null,
   } satisfies ChartForm
 }
 
diff --git a/datagouv-components/src/functions/filterUtils.ts b/datagouv-components/src/functions/filterUtils.ts
deleted file mode 100644
index 5b4072a0d..000000000
--- a/datagouv-components/src/functions/filterUtils.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { FilterCondition, Filter } from '../types/visualizations'
-
-/**
- * Maps frontend filter conditions to Tabular API query parameter operators
- */
-export const CONDITION_TO_OPERATOR: Record<FilterCondition, string> = {
-  exact: 'exact',
-  differs: 'differs',
-  is_null: 'isnull',
-  is_not_null: 'isnotnull',
-  greater: 'greater',
-  less: 'less',
-  strictly_greater: 'strictly_greater',
-  strictly_less: 'strictly_less',
-}
-
-/**
- * Maps Tabular API operators to frontend filter conditions
- */
-export const OPERATOR_TO_CONDITION: Record<string, FilterCondition> = {
-  exact: 'exact',
-  differs: 'differs',
-  isnull: 'is_null',
-  isnotnull: 'is_not_null',
-  greater: 'greater',
-  less: 'less',
-  strictly_greater: 'strictly_greater',
-  strictly_less: 'strictly_less',
-}
-
-/**
- * Converts a Filter API format object to the frontend Filter format
- */
-export function filterFromApiFormat(filter: Array<{
-  column: string
-  operator: string
-  value?: string
-}> | undefined): Filter | undefined {
-  if (!filter || filter.length === 0) return undefined
-  
-  const filterObj = filter[0]
-  const condition = OPERATOR_TO_CONDITION[filterObj.operator]
-  if (!condition) return undefined
-  
-  return {
-    column: filterObj.column,
-    condition,
-    value: filterObj.value || undefined,
-  }
-}
-
-/**
- * Converts a Filter object to the format expected by fetchTabularData
- */
-export function filterToApiFormat(filter: Filter | undefined): Array<{
-  column: string
-  operator: string
-  value?: string
-}> | undefined {
-  if (!filter || !filter.column) return undefined
-  
-  const operator = CONDITION_TO_OPERATOR[filter.condition]
-  if (!operator) return undefined
-  
-  return [{
-    column: filter.column,
-    operator,
-    value: filter.value || undefined,
-  }]
-}
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 9c1d3bf7d..78d8a04d0 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -1,5 +1,6 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
+import type { Filter, GenericFilter } from '../types/visualizations'
 
 export type SortConfig = {
   column: string
@@ -24,11 +25,7 @@ export type FetchTabularDataOptions = {
     column: string
     type: TabularAggregateType
   } | undefined
-  filters?: Array<{
-    column: string
-    operator: string
-    value?: string
-  }> | undefined
+  filters?: GenericFilter | undefined
 }
 
 export type TabularProfileResponse = {
@@ -91,15 +88,16 @@ export async function fetchTabularData(config: PluginConfig, options: FetchTabul
     url += `&${options.groupBy}__groupby&${options.aggregation.column}__${options.aggregation.type}`
   }
   if (options.filters) {
-    for (const filter of options.filters) {
-      if (filter.operator === 'isnull') {
+    const filter = options.filters as Filter
+      if (filter.condition === 'is_null') {
         url += `&${filter.column}__isnull`
-      } else if (filter.operator === 'isnotnull') {
+      }
+      else if (filter.condition === 'is_not_null') {
         url += `&${filter.column}__isnotnull`
-      } else if (filter.value !== undefined && filter.value !== '') {
-        url += `&${filter.column}__${filter.operator}=${encodeURIComponent(filter.value)}`
       }
-    }
+      else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
+        url += `&${filter.column}__${filter.condition}=${encodeURIComponent(filter.value)}`
+      }
   }
   return await ofetch<TabularDataResponse>(url)
 }
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index e7e63ed83..ab76d512c 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -126,8 +126,7 @@ export * from './functions/reuses'
 export * from './functions/schemas'
 export * from './functions/users'
 export * from './functions/tabularApi'
-export * from './functions/filterUtils'
-export { filterFromApiFormat, OPERATOR_TO_CONDITION } from './functions/filterUtils'
+export * from './functions/charts'
 export * from './types/access_types'
 
 export type {
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index b799689c2..16e439c12 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -5,7 +5,7 @@ export type FilterCondition = 'exact' | 'differs' | 'is_null' | 'is_not_null' |
 export type Filter = {
   column: string
   condition: FilterCondition
-  value?: string
+  value: string | null
 }
 
 export type AndFilters = {
@@ -83,5 +83,5 @@ export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organ
   x_axis: XAxisForm
   series: Array<DataSeriesForm>
   chart_type?: DataSeriesType | null
-  filter: GenericFilter
+  filter: GenericFilter | null
 }
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index 140de607c..ad5844f99 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -29,7 +29,7 @@
       <div class="mt-4">
         <ClientOnly>
           <ChartViewerWrapper
-            v-model="form"
+            :chart="toChartApi(form)"
             @columns="columns = $event"
           />
         </ClientOnly>
@@ -157,7 +157,7 @@
             size="sm"
             color="tertiary"
             :icon="RiAddLine"
-            @click="form.filter={ column: '', condition: 'equal', value: '' }"
+            @click="addFilter"
           >
             {{ $t('Ajouter un filtre') }}
           </BrandedButton>
@@ -311,68 +311,6 @@
         </div>
       </fieldset>
 
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Filtre') }}
-        </p>
-        <div
-          v-if="form.filter && selectedResource"
-          class="flex items-center gap-2 flex-wrap md:flex-nowrap"
-        >
-          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
-
-          <!-- Column select -->
-          <Listbox
-            v-model="form.filter.column"
-            :options="columns[selectedResource]"
-            :display-value="(o: string) => o"
-            class="min-w-28 max-w-36"
-          >
-            <template #button>
-              <div class="w-full truncate">
-                {{ form.filter.column }}
-              </div>
-              <RiArrowDownSLine class="shrink-0 size-4 justify-self-end" />
-            </template>
-          </Listbox>
-
-          <Listbox
-            v-model="form.filter.condition"
-            :options="conditionOptions"
-            :display-value="getConditionLabel"
-            class="shrink-0"
-          />
-
-          <!-- Value input -->
-          <input
-            v-model="form.filter.value"
-            type="text"
-            class="fr-input text-sm flex-1 max-w-1/3"
-            :placeholder="$t('Valeur')"
-          >
-
-          <!-- Remove button -->
-          <BrandedButton
-            size="xs"
-            color="tertiary"
-            keep-margins-even-without-borders
-            :icon="RiDeleteBinLine"
-            icon-only
-            :disabled="!form.filter.column"
-            @click="removeFilter"
-          />
-        </div>
-        <div v-else>
-          <BrandedButton
-            size="sm"
-            color="tertiary"
-            :icon="RiAddLine"
-            @click="form.filter = { column: '', condition: 'exact', value: '' }"
-          >
-            {{ $t('Ajouter un filtre') }}
-          </BrandedButton>
-        </div>
-      </fieldset>
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
           {{ $t('Axe Y') }}
@@ -462,10 +400,10 @@
 
 <script setup lang="ts">
 import type { Resource, PaginatedArray, ChartForm, Chart, FilterCondition } from '@datagouv/components-next'
-import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox } from '@datagouv/components-next'
+import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox, toChartApi, toChartForm } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
-import { RiAddLine, RiArrowDownSLine, RiDeleteBinLine } from '@remixicon/vue'
+import { RiAddLine, RiDeleteBinLine } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
@@ -499,14 +437,14 @@ const conditionOptions: Array<FilterCondition> = ['exact', 'differs', 'is_null',
 function getConditionLabel(condition: FilterCondition | null) {
   if (!condition) return ''
   return {
-      exact: t('est'),
-      differs: t("n'est pas"),
-      is_null: t('est vide'),
-      is_not_null: t("n'est pas vide"),
-      greater: t('supérieur ou égal à'),
-      less: t('inférieur ou égal à'),
-      strictly_greater: t('supérieur à'),
-      strictly_less: t('inférieur à'),
+    exact: t('est'),
+    differs: t('n\'est pas'),
+    is_null: t('est vide'),
+    is_not_null: t('n\'est pas vide'),
+    greater: t('supérieur ou égal à'),
+    less: t('inférieur ou égal à'),
+    strictly_greater: t('supérieur à'),
+    strictly_less: t('inférieur à'),
   }[condition]
 }
 
@@ -567,6 +505,14 @@ watch([titleDebounced, descDebounced], ([title, desc]) => {
   form.value.description = desc
 })
 
+watch(columns, (columnsPerResource) => {
+  const firstColumns = Object.values(columnsPerResource) ?? []
+  const firstColumn = firstColumns[0].filter(c => c !== '__id')[0]
+  if (!form.value.x_axis.column_x && firstColumn) {
+    form.value.x_axis.column_x = firstColumn
+  }
+})
+
 async function loadMissingResourcesForChart(resourceIds: Set<string>) {
   for (const id of resourceIds) {
     if (savedResources[id]) continue
@@ -588,7 +534,7 @@ async function suggestDataset(q: string): Promise<Array<DatasetSuggest>> {
 }
 
 function removeFilter() {
-  form.value.filter = undefined
+  form.value.filter = null
 }
 
 async function loadChart(id: string) {
@@ -650,4 +596,8 @@ async function saveChart() {
     console.error('Failed to save chart:', error)
   }
 }
+
+function addFilter() {
+  form.value.filter = { column: '', condition: 'exact' as const, value: '' }
+}
 </script>
diff --git a/design-system/ChartFilterRow.vue b/design-system/ChartFilterRow.vue
new file mode 100644
index 000000000..b7c2b23da
--- /dev/null
+++ b/design-system/ChartFilterRow.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="flex items-center gap-2 flex-wrap md:flex-nowrap">
+    <div class="text-xs text-gray-600">
+      {{ index === 0 ? $t('Quand') : $t('Et que') }}
+    </div>
+    <Listbox
+      v-model="localFilter.column"
+      class="min-w-28 max-w-36"
+      :options="columnOptions"
+      :display-value="d => getColumnLabel(d)"
+      :get-option-id="d => getColumnKey(d)"
+      :is-disabled="d => isColumnDisabled(d)"
+    />
+
+    <Listbox
+      v-model="localFilter.condition"
+      class="min-w-20"
+      :options="conditionOptions"
+      :display-value="getConditionLabel"
+    />
+
+    <input
+      v-if="showValueInput"
+      v-model="localFilter.value"
+      type="text"
+      class="fr-input text-sm w-32 min-w-0 max-w-1/3"
+      :placeholder="$t('Valeur')"
+    />
+
+    <BrandedButton
+      size="xs"
+      :disabled="!localFilter.column"
+      :icon="RiDeleteBinLine"
+      icon-only
+      @click="$emit('remove')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Filter, FilterCondition } from '@datagouv/components-next'
+import { Listbox, BrandedButton } from '@datagouv/components-next'
+import { RiDeleteBinLine } from '@remixicon/vue'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: Filter
+  index: number
+  columnOptions: Array<{ key: string, value: string, disabled: boolean }>
+  conditionOptions: Array<FilterCondition>
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [filter: Filter]
+  'remove': []
+}>()
+
+const { t } = useTranslation()
+
+const localFilter = ref<Filter>({ ...props.modelValue })
+
+watch(localFilter, (newFilter) => {
+  emit('update:modelValue', { ...newFilter })
+}, { deep: true })
+
+watch(() => props.modelValue, (newValue) => {
+  localFilter.value = { ...newValue }
+}, { deep: true })
+
+const showValueInput = computed(() => {
+  return !['is_null', 'is_not_null'].includes(localFilter.value.condition)
+})
+
+function getColumnLabel(col: { key: string, value: string }) {
+  return col.value
+}
+
+function getColumnKey(col: { key: string, value: string }) {
+  return col.key
+}
+
+function isColumnDisabled(col: { key: string, value: string, disabled: boolean }) {
+  return col.disabled
+}
+
+function getConditionLabel(condition: FilterCondition | null) {
+  if (!condition) return ''
+  return {
+    exact: t('est'),
+    differs: t('n\'est pas'),
+    is_null: t('est vide'),
+    is_not_null: t('n\'est pas vide'),
+    greater: t('supérieur ou égal à'),
+    less: t('inférieur ou égal à'),
+    strictly_greater: t('supérieur à'),
+    strictly_less: t('inférieur à'),
+  }[condition]
+}
+</script>
diff --git a/pages/design/chart.vue b/pages/design/chart.vue
index d8c74a5f6..5acfc3a7b 100644
--- a/pages/design/chart.vue
+++ b/pages/design/chart.vue
@@ -43,6 +43,7 @@ const chart = ref<ChartForm>({
     unit: '',
     unit_position: 'suffix',
   },
+  filter: null,
   chart_type: 'histogram',
   series: [{
     type: 'histogram',

From 281127a4259069fd1ba172f6c0b88e32dfbb93b6 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 18:11:12 +0200
Subject: [PATCH 052/121] feat(chart): allow multiple filters

commit 54f55758a68b0cc4ad67f672a42292b5c0fc580c
Author: Conciergerie AI <contact@conciergerie.dev>
Date:   Wed Apr 8 17:00:48 2026 +0200

    fix: resolve TypeScript type errors in chart components and listbox

commit 881c042d3c27083ef4d44a4aa7863c2729b064f1
Author: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date:   Wed Apr 8 16:26:55 2026 +0200

    chore: lint

commit c1ca65ee40c53d9d507879db29080acd9192665d
Author: Conciergerie AI <contact@conciergerie.dev>
Date:   Wed Apr 8 16:16:17 2026 +0200

    feat: support multiple filters with AND logic in ChartConfigurator
---
 .../components/Chart/ChartViewerWrapper.vue   |   1 -
 datagouv-components/src/functions/charts.ts   |   4 +-
 .../src/functions/tabularApi.ts               |  49 +++++--
 design-system/ChartConfigurator.vue           | 127 ++++++++----------
 design-system/ChartFilterRow.vue              |  23 +++-
 pages/design/listbox.vue                      |   8 +-
 6 files changed, 119 insertions(+), 93 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 1e6779dd8..527ef0482 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -22,7 +22,6 @@ import { reactive, ref, watch } from 'vue'
 import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
-import { filterToApiFormat } from '../../functions/charts'
 import { fetchTabularData, useGetProfile, type TabularDataResponse, type TabularProfileResponse } from '../../functions/tabularApi'
 import type { Chart, ChartForApi } from '../../types/visualizations'
 
diff --git a/datagouv-components/src/functions/charts.ts b/datagouv-components/src/functions/charts.ts
index 6891909d6..84c8f6d9e 100644
--- a/datagouv-components/src/functions/charts.ts
+++ b/datagouv-components/src/functions/charts.ts
@@ -1,4 +1,4 @@
-import type { Chart, ChartForm, ChartForApi, Filter, FilterCondition } from '../types/visualizations'
+import type { Chart, ChartForm, ChartForApi, Filter } from '../types/visualizations'
 
 export function toChartForm(chart: Chart) {
   const seriesFilter = chart.series[0]?.filters as Filter | null
@@ -28,7 +28,7 @@ export function toChartForm(chart: Chart) {
     })),
     extras: chart.extras,
     chart_type: chart.series.length > 0 ? chart.series[0].type : null,
-    filter: seriesFilter && 'column' in seriesFilter ? seriesFilter : null,
+    filter: seriesFilter ?? null,
   } satisfies ChartForm
 }
 
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 78d8a04d0..007ad9420 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -1,6 +1,6 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
-import type { Filter, GenericFilter } from '../types/visualizations'
+import type { GenericFilter } from '../types/visualizations'
 
 export type SortConfig = {
   column: string
@@ -88,18 +88,47 @@ export async function fetchTabularData(config: PluginConfig, options: FetchTabul
     url += `&${options.groupBy}__groupby&${options.aggregation.column}__${options.aggregation.type}`
   }
   if (options.filters) {
-    const filter = options.filters as Filter
-      if (filter.condition === 'is_null') {
-        url += `&${filter.column}__isnull`
-      }
-      else if (filter.condition === 'is_not_null') {
-        url += `&${filter.column}__isnotnull`
+    const filterQuery = buildFilterQuery(options.filters)
+    if (filterQuery) {
+      url += `&${filterQuery}`
+    }
+  }
+  return await ofetch<TabularDataResponse>(url)
+}
+
+function buildFilterQuery(filters: GenericFilter): string {
+  const params: Array<string> = []
+  if ('filters' in filters) {
+    for (const filter of filters.filters) {
+      if ('filters' in filter) {
+        params.push(buildFilterQuery(filter))
       }
-      else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
-        url += `&${filter.column}__${filter.condition}=${encodeURIComponent(filter.value)}`
+      else {
+        if (filter.condition === 'is_null') {
+          params.push(`${filter.column}__isnull`)
+        }
+        else if (filter.condition === 'is_not_null') {
+          params.push(`${filter.column}__isnotnull`)
+        }
+        else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
+          params.push(`${filter.column}__${filter.condition}=${encodeURIComponent(filter.value)}`)
+        }
       }
+    }
   }
-  return await ofetch<TabularDataResponse>(url)
+  else {
+    const filter = filters
+    if (filter.condition === 'is_null') {
+      params.push(`${filter.column}__isnull`)
+    }
+    else if (filter.condition === 'is_not_null') {
+      params.push(`${filter.column}__isnotnull`)
+    }
+    else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
+      params.push(`${filter.column}__${filter.condition}=${encodeURIComponent(filter.value)}`)
+    }
+  }
+  return params.join('&')
 }
 
 /**
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
index ad5844f99..ac0b04425 100644
--- a/design-system/ChartConfigurator.vue
+++ b/design-system/ChartConfigurator.vue
@@ -113,55 +113,28 @@
       </fieldset>
       <fieldset class="min-w-0 border-t border-new-gray-light py-4 px-6 space-y-4">
         <p class="font-bold mb-2">
-          {{ $t('Filtre') }}
+          {{ $t('Filtres') }}
         </p>
-        <div
-          v-if="form.filter"
-          class="flex items-center gap-2 flex-wrap md:flex-nowrap"
-        >
-          <div class="text-xs text-gray-600">
-            {{ $t('Quand') }}
-          </div>
-          <Listbox
-            v-model="form.filter.column"
-            :options="getColumnOptions()"
-            :display-value="d => getColumn(d)!.value"
-            :get-option-id="d => getColumn(d)!.key"
-            :is-disabled="d => getColumn(d)!.disabled"
-          />
-
-          <Listbox
-            class="min-w-20"
-            v-model="form.filter.condition"
-            :options="conditionOptions"
-            :display-value="getConditionLabel"
-          />
-
-          <input
-            v-model="form.filter.value"
-            type="text"
-            class="fr-input text-sm w-32 min-w-0"
-            :placeholder="$t('Valeur')"
-          >
-
-          <BrandedButton
-            size="xs"
-            :disabled="!form.filter.column"
-            :icon="RiDeleteBinLine"
-            icon-only
-            @click="removeFilter"
+        <div class="space-y-3">
+          <ChartFilterRow
+            v-for="(filter, index) in filterList"
+            :key="index"
+            :model-value="filter"
+            :index="index"
+            :column-options="getColumnOptions()"
+            :condition-options="conditionOptions"
+            @update:model-value="updateFilter(index, $event)"
+            @remove="removeFilter(index)"
           />
         </div>
-        <div v-else>
-          <BrandedButton
-            size="sm"
-            color="tertiary"
-            :icon="RiAddLine"
-            @click="addFilter"
-          >
-            {{ $t('Ajouter un filtre') }}
-          </BrandedButton>
-        </div>
+        <BrandedButton
+          size="sm"
+          color="tertiary"
+          :icon="RiAddLine"
+          @click="addFilter"
+        >
+          {{ $t('Ajouter un filtre') }}
+        </BrandedButton>
       </fieldset>
 
       <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
@@ -399,13 +372,15 @@
 </template>
 
 <script setup lang="ts">
-import type { Resource, PaginatedArray, ChartForm, Chart, FilterCondition } from '@datagouv/components-next'
-import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox, toChartApi, toChartForm } from '@datagouv/components-next'
+import type { Resource, PaginatedArray, ChartForm, Chart, Filter, FilterCondition } from '@datagouv/components-next'
+import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, toChartApi, toChartForm } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
 import type { DatasetSuggest } from '~/types/types'
-import { RiAddLine, RiDeleteBinLine } from '@remixicon/vue'
+import { RiAddLine } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
 
+import ChartFilterRow from './ChartFilterRow.vue'
+
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
 
 const form = defineModel<ChartForm>({
@@ -434,20 +409,6 @@ const resources = computed(() => Object.values(savedResources))
 
 const conditionOptions: Array<FilterCondition> = ['exact', 'differs', 'is_null', 'is_not_null', 'greater', 'less', 'strictly_greater', 'strictly_less']
 
-function getConditionLabel(condition: FilterCondition | null) {
-  if (!condition) return ''
-  return {
-    exact: t('est'),
-    differs: t('n\'est pas'),
-    is_null: t('est vide'),
-    is_not_null: t('n\'est pas vide'),
-    greater: t('supérieur ou égal à'),
-    less: t('inférieur ou égal à'),
-    strictly_greater: t('supérieur à'),
-    strictly_less: t('inférieur à'),
-  }[condition]
-}
-
 const sortOptionLabels = computed(() => {
   const xAxisColumn = form.value.x_axis.column_x
   const yAxisColumn = form.value.series[0]?.column_y
@@ -463,11 +424,7 @@ const sortOptionLabels = computed(() => {
 const columnDetails = computed(() => [{ key: '', value: t('Colonne'), disabled: true }, ...columns.value[selectedResource.value].map(c => ({ key: c, value: c, disabled: false }))])
 
 function getColumnOptions() {
-  return columnDetails.value.map(d => d.key)
-}
-
-function getColumn(key: string | null) {
-  return columnDetails.value.find(c => c.key === key)
+  return columnDetails.value
 }
 
 const { $api } = useNuxtApp()
@@ -533,8 +490,12 @@ async function suggestDataset(q: string): Promise<Array<DatasetSuggest>> {
   })
 }
 
-function removeFilter() {
-  form.value.filter = null
+function removeFilter(index: number) {
+  if (!form.value.filter || !('filters' in form.value.filter)) return
+  form.value.filter.filters.splice(index, 1)
+  if (form.value.filter.filters.length === 0) {
+    form.value.filter = null
+  }
 }
 
 async function loadChart(id: string) {
@@ -597,7 +558,31 @@ async function saveChart() {
   }
 }
 
+const filterList = computed<Array<Filter>>(() => {
+  if (!form.value.filter) return []
+  if ('filters' in form.value.filter) {
+    return form.value.filter.filters.filter((f): f is Filter => 'column' in f)
+  }
+  return [form.value.filter]
+})
+
+function updateFilter(index: number, newFilter: Filter) {
+  if (!form.value.filter || !('filters' in form.value.filter)) {
+    form.value.filter = { filters: [] }
+  }
+  form.value.filter.filters[index] = newFilter
+}
+
 function addFilter() {
-  form.value.filter = { column: '', condition: 'exact' as const, value: '' }
+  const newFilter: Filter = { column: '', condition: 'exact' as const, value: '' }
+  if (!form.value.filter) {
+    form.value.filter = { filters: [newFilter] }
+  }
+  else if ('filters' in form.value.filter) {
+    form.value.filter.filters.push(newFilter)
+  }
+  else {
+    form.value.filter = { filters: [form.value.filter, newFilter] }
+  }
 }
 </script>
diff --git a/design-system/ChartFilterRow.vue b/design-system/ChartFilterRow.vue
index b7c2b23da..dc415f79d 100644
--- a/design-system/ChartFilterRow.vue
+++ b/design-system/ChartFilterRow.vue
@@ -4,7 +4,7 @@
       {{ index === 0 ? $t('Quand') : $t('Et que') }}
     </div>
     <Listbox
-      v-model="localFilter.column"
+      v-model="selectedColumnObj"
       class="min-w-28 max-w-36"
       :options="columnOptions"
       :display-value="d => getColumnLabel(d)"
@@ -25,7 +25,7 @@
       type="text"
       class="fr-input text-sm w-32 min-w-0 max-w-1/3"
       :placeholder="$t('Valeur')"
-    />
+    >
 
     <BrandedButton
       size="xs"
@@ -59,6 +59,16 @@ const { t } = useTranslation()
 
 const localFilter = ref<Filter>({ ...props.modelValue })
 
+const selectedColumnObj = ref<{ key: string, value: string, disabled: boolean } | null>(null)
+
+watch(() => localFilter.value.column, (col) => {
+  selectedColumnObj.value = props.columnOptions.find(opt => opt.key === col) || null
+}, { immediate: true })
+
+watch(selectedColumnObj, (newVal) => {
+  localFilter.value.column = newVal?.key || ''
+})
+
 watch(localFilter, (newFilter) => {
   emit('update:modelValue', { ...newFilter })
 }, { deep: true })
@@ -71,15 +81,18 @@ const showValueInput = computed(() => {
   return !['is_null', 'is_not_null'].includes(localFilter.value.condition)
 })
 
-function getColumnLabel(col: { key: string, value: string }) {
+function getColumnLabel(col: { key: string, value: string } | null) {
+  if (!col) return ''
   return col.value
 }
 
-function getColumnKey(col: { key: string, value: string }) {
+function getColumnKey(col: { key: string, value: string } | null) {
+  if (!col) return ''
   return col.key
 }
 
-function isColumnDisabled(col: { key: string, value: string, disabled: boolean }) {
+function isColumnDisabled(col: { key: string, value: string, disabled: boolean } | null) {
+  if (!col) return false
   return col.disabled
 }
 
diff --git a/pages/design/listbox.vue b/pages/design/listbox.vue
index 5753c76d3..e648cf738 100644
--- a/pages/design/listbox.vue
+++ b/pages/design/listbox.vue
@@ -24,7 +24,7 @@
           <Listbox
             v-model="selectedCondition"
             :options="conditions"
-            :display-value="(option: string) => option"
+            :display-value="(option: string | null) => option || ''"
           />
         </div>
       </section>
@@ -40,7 +40,7 @@
           <Listbox
             v-model="selectedFruit"
             :options="fruits"
-            :display-value="(option: Fruit) => option.label"
+            :display-value="(option: Fruit | null) => option?.label || ''"
           />
         </div>
       </section>
@@ -56,7 +56,7 @@
           <Listbox
             v-model="selectedStatus"
             :options="statuses"
-            :display-value="(option: Status) => option.label"
+            :display-value="(option: Status | null) => option?.label || ''"
           >
             <template #option="{ option, active }">
               <span
@@ -88,7 +88,7 @@
           <Listbox
             v-model="selectedPriority"
             :options="priorities"
-            :display-value="(option: Priority) => option.label"
+            :display-value="(option: Priority | null) => option?.label || ''"
           >
             <template #button>
               <span class="flex items-center gap-2">

From a19a7a7586c1a37454546f4108e3c4839dfe40f6 Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Wed, 8 Apr 2026 17:29:10 +0200
Subject: [PATCH 053/121] fix: add isUpdating guard to ChartFilterRow.vue to
 prevent reactivity loops

---
 design-system/ChartFilterRow.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/design-system/ChartFilterRow.vue b/design-system/ChartFilterRow.vue
index dc415f79d..5c0e26875 100644
--- a/design-system/ChartFilterRow.vue
+++ b/design-system/ChartFilterRow.vue
@@ -41,7 +41,7 @@
 import type { Filter, FilterCondition } from '@datagouv/components-next'
 import { Listbox, BrandedButton } from '@datagouv/components-next'
 import { RiDeleteBinLine } from '@remixicon/vue'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue: Filter
@@ -60,13 +60,18 @@ const { t } = useTranslation()
 const localFilter = ref<Filter>({ ...props.modelValue })
 
 const selectedColumnObj = ref<{ key: string, value: string, disabled: boolean } | null>(null)
+const isUpdating = ref(false)
 
 watch(() => localFilter.value.column, (col) => {
+  if (isUpdating.value) return
   selectedColumnObj.value = props.columnOptions.find(opt => opt.key === col) || null
 }, { immediate: true })
 
 watch(selectedColumnObj, (newVal) => {
+  if (isUpdating.value) return
+  isUpdating.value = true
   localFilter.value.column = newVal?.key || ''
+  nextTick(() => { isUpdating.value = false })
 })
 
 watch(localFilter, (newFilter) => {

From 96c0206b115c623eb004bb9c976fdeb076891ff6 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 8 Apr 2026 19:17:37 +0200
Subject: [PATCH 054/121] refac: simplify

---
 design-system/ChartFilterRow.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/design-system/ChartFilterRow.vue b/design-system/ChartFilterRow.vue
index 5c0e26875..8a51ab09d 100644
--- a/design-system/ChartFilterRow.vue
+++ b/design-system/ChartFilterRow.vue
@@ -41,7 +41,7 @@
 import type { Filter, FilterCondition } from '@datagouv/components-next'
 import { Listbox, BrandedButton } from '@datagouv/components-next'
 import { RiDeleteBinLine } from '@remixicon/vue'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue: Filter
@@ -60,18 +60,15 @@ const { t } = useTranslation()
 const localFilter = ref<Filter>({ ...props.modelValue })
 
 const selectedColumnObj = ref<{ key: string, value: string, disabled: boolean } | null>(null)
-const isUpdating = ref(false)
 
-watch(() => localFilter.value.column, (col) => {
-  if (isUpdating.value) return
+watch(() => localFilter.value.column, (col, oldCol) => {
+  if (col === oldCol) return
   selectedColumnObj.value = props.columnOptions.find(opt => opt.key === col) || null
 }, { immediate: true })
 
-watch(selectedColumnObj, (newVal) => {
-  if (isUpdating.value) return
-  isUpdating.value = true
+watch(selectedColumnObj, (newVal, oldVal) => {
+  if (newVal?.key === oldVal?.key) return
   localFilter.value.column = newVal?.key || ''
-  nextTick(() => { isUpdating.value = false })
 })
 
 watch(localFilter, (newFilter) => {

From 7422aeb66382643fa1f01f8616bfae220ffb1478 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 9 Apr 2026 09:14:59 +0200
Subject: [PATCH 055/121] feat(char): allow multiple filters

---
 design-system/ChartFilterRow.vue | 76 +++++++++++++-------------------
 1 file changed, 31 insertions(+), 45 deletions(-)

diff --git a/design-system/ChartFilterRow.vue b/design-system/ChartFilterRow.vue
index 8a51ab09d..a4aa3a331 100644
--- a/design-system/ChartFilterRow.vue
+++ b/design-system/ChartFilterRow.vue
@@ -4,16 +4,16 @@
       {{ index === 0 ? $t('Quand') : $t('Et que') }}
     </div>
     <Listbox
-      v-model="selectedColumnObj"
+      v-model="filter.column"
       class="min-w-28 max-w-36"
-      :options="columnOptions"
-      :display-value="d => getColumnLabel(d)"
-      :get-option-id="d => getColumnKey(d)"
-      :is-disabled="d => isColumnDisabled(d)"
+      :options="listboxOptions"
+      :display-value="getOptionLabel"
+      :get-option-id="getOptionId"
+      :is-disabled="isOptionDisabled"
     />
 
     <Listbox
-      v-model="localFilter.condition"
+      v-model="filter.condition"
       class="min-w-20"
       :options="conditionOptions"
       :display-value="getConditionLabel"
@@ -21,7 +21,7 @@
 
     <input
       v-if="showValueInput"
-      v-model="localFilter.value"
+      v-model="filter.value"
       type="text"
       class="fr-input text-sm w-32 min-w-0 max-w-1/3"
       :placeholder="$t('Valeur')"
@@ -29,7 +29,7 @@
 
     <BrandedButton
       size="xs"
-      :disabled="!localFilter.column"
+      :disabled="!filter.column"
       :icon="RiDeleteBinLine"
       icon-only
       @click="$emit('remove')"
@@ -41,63 +41,49 @@
 import type { Filter, FilterCondition } from '@datagouv/components-next'
 import { Listbox, BrandedButton } from '@datagouv/components-next'
 import { RiDeleteBinLine } from '@remixicon/vue'
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
+
+const filter = defineModel<Filter>({ required: true })
 
 const props = defineProps<{
-  modelValue: Filter
   index: number
   columnOptions: Array<{ key: string, value: string, disabled: boolean }>
   conditionOptions: Array<FilterCondition>
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [filter: Filter]
   'remove': []
 }>()
 
-const { t } = useTranslation()
-
-const localFilter = ref<Filter>({ ...props.modelValue })
-
-const selectedColumnObj = ref<{ key: string, value: string, disabled: boolean } | null>(null)
-
-watch(() => localFilter.value.column, (col, oldCol) => {
-  if (col === oldCol) return
-  selectedColumnObj.value = props.columnOptions.find(opt => opt.key === col) || null
-}, { immediate: true })
-
-watch(selectedColumnObj, (newVal, oldVal) => {
-  if (newVal?.key === oldVal?.key) return
-  localFilter.value.column = newVal?.key || ''
-})
-
-watch(localFilter, (newFilter) => {
-  emit('update:modelValue', { ...newFilter })
-}, { deep: true })
+ const { t } = useTranslation()
 
-watch(() => props.modelValue, (newValue) => {
-  localFilter.value = { ...newValue }
-}, { deep: true })
+const listboxOptions = computed(() =>
+  props.columnOptions.map(opt => opt.key)
+)
 
-const showValueInput = computed(() => {
-  return !['is_null', 'is_not_null'].includes(localFilter.value.condition)
-})
+const getOptionByKey = (key: string) =>
+  props.columnOptions.find(opt => opt.key === key) || null
 
-function getColumnLabel(col: { key: string, value: string } | null) {
-  if (!col) return ''
-  return col.value
+function getOptionLabel(key: string | null): string {
+  if (!key) return ''
+  const option = getOptionByKey(key)
+  return option?.value || ''
 }
 
-function getColumnKey(col: { key: string, value: string } | null) {
-  if (!col) return ''
-  return col.key
+function getOptionId(key: string | null): string {
+  return key || ''
 }
 
-function isColumnDisabled(col: { key: string, value: string, disabled: boolean } | null) {
-  if (!col) return false
-  return col.disabled
+function isOptionDisabled(key: string | null): boolean {
+    if (!key) return false
+    const option = getOptionByKey(key)
+    return option?.disabled || false
 }
 
+const showValueInput = computed(() => {
+    return !['is_null', 'is_not_null'].includes(filter.value.condition)
+})
+
 function getConditionLabel(condition: FilterCondition | null) {
   if (!condition) return ''
   return {

From 413fbeb2b27da0e8d70cbc0cf09bc4fa205b82a3 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 9 Apr 2026 10:34:20 +0200
Subject: [PATCH 056/121] refac: lint

---
 design-system/ChartFilterRow.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/design-system/ChartFilterRow.vue b/design-system/ChartFilterRow.vue
index a4aa3a331..f30512697 100644
--- a/design-system/ChartFilterRow.vue
+++ b/design-system/ChartFilterRow.vue
@@ -51,14 +51,14 @@ const props = defineProps<{
   conditionOptions: Array<FilterCondition>
 }>()
 
-const emit = defineEmits<{
-  'remove': []
+defineEmits<{
+  remove: []
 }>()
 
- const { t } = useTranslation()
+const { t } = useTranslation()
 
 const listboxOptions = computed(() =>
-  props.columnOptions.map(opt => opt.key)
+  props.columnOptions.map(opt => opt.key),
 )
 
 const getOptionByKey = (key: string) =>
@@ -75,13 +75,13 @@ function getOptionId(key: string | null): string {
 }
 
 function isOptionDisabled(key: string | null): boolean {
-    if (!key) return false
-    const option = getOptionByKey(key)
-    return option?.disabled || false
+  if (!key) return false
+  const option = getOptionByKey(key)
+  return option?.disabled || false
 }
 
 const showValueInput = computed(() => {
-    return !['is_null', 'is_not_null'].includes(filter.value.condition)
+  return !['is_null', 'is_not_null'].includes(filter.value.condition)
 })
 
 function getConditionLabel(condition: FilterCondition | null) {

From 015305056d76ad202f1641ccc21dc444dc515d57 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 18:11:40 +0200
Subject: [PATCH 057/121] try to fix packages

---
 package.json   |  2 +-
 pnpm-lock.yaml | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 0441be3e4..f48acc9be 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
     "@milkdown/vue": "^7.19.0",
     "@nuxt/image": "^2.0.0",
     "@nuxtjs/sitemap": "^8.0.8",
-    "@prosemirror-adapter/vue": "^0.4.6",
+    "@prosemirror-adapter/vue": "^0.5.3",
     "@remixicon/vue": "^4.9.0",
     "@rollup/pluginutils": "^5.3.0",
     "@sentry/nuxt": "^10.45.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95b181cb5..9db5c4f71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1900,6 +1900,9 @@ packages:
   '@ocavue/utils@1.6.0':
     resolution: {integrity: sha512-8W3q1hxx9qFdrYgPtbElllG/tqYkO/dMhlRUiqasO0SuDFTj78azSQjhIrBTFWxlBPPsSZN6zXYHmb3RwN2Jtg==}
 
+  '@ocavue/utils@1.6.0':
+    resolution: {integrity: sha512-8W3q1hxx9qFdrYgPtbElllG/tqYkO/dMhlRUiqasO0SuDFTj78azSQjhIrBTFWxlBPPsSZN6zXYHmb3RwN2Jtg==}
+
   '@opentelemetry/api-logs@0.207.0':
     resolution: {integrity: sha512-lAb0jQRVyleQQGiuuvCOTDVspc14nx6XJjP4FspJ1sNARo3Regq4ZZbrc3rN4b1TYSuUCvgH+UXUPug4SLOqEQ==}
     engines: {node: '>=8.0.0'}
@@ -2676,11 +2679,11 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.8
 
-  '@prosemirror-adapter/core@0.4.6':
-    resolution: {integrity: sha512-qbqd4u9IyDXXolFFmX1tzE000IpF9JbCiiwuSvqIh7lT9ZqjeMcyDVR/vxyM4oVY1sVyQQQj+WxHMAIhj7egVg==}
+  '@prosemirror-adapter/core@0.5.3':
+    resolution: {integrity: sha512-jGcI/eq3USFqf1fCaejgCmifmXYDyFco6/5KjyyNBnuEhLqyLjD+020CtcduEOsnN4xPZr5ikclgHIR6kEFkQg==}
 
-  '@prosemirror-adapter/vue@0.4.6':
-    resolution: {integrity: sha512-1zDxyi4JqH4Iw8SPAvkNSAfUPEHQDRi0Oshi2qOmRf3xFHk1hBiV8CL0kEmOUE2C40ipk9AWkX2uu3UgO/8IYw==}
+  '@prosemirror-adapter/vue@0.5.3':
+    resolution: {integrity: sha512-k+qofvyTk6XXIOSdy1nzX0dQjk8tDf+HVJAj4E9GDBICeiwMiIvHcbgcpCvL+K1BuGm2zwlNFUNIFFq5ExQQhg==}
     peerDependencies:
       vue: ^3.0.0
     peerDependenciesMeta:
@@ -11906,6 +11909,8 @@ snapshots:
 
   '@ocavue/utils@1.6.0': {}
 
+  '@ocavue/utils@1.6.0': {}
+
   '@opentelemetry/api-logs@0.207.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
@@ -12512,7 +12517,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@prosemirror-adapter/core@0.4.6':
+  '@prosemirror-adapter/core@0.5.3':
     dependencies:
       prosemirror-model: 1.25.4
       prosemirror-state: 1.4.4

From eb6bf1a8dfee86679daef374bd6e4065ac411f4b Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 9 Apr 2026 11:22:56 +0200
Subject: [PATCH 058/121] fix: typecheck

---
 datagouv-components/src/functions/charts.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datagouv-components/src/functions/charts.ts b/datagouv-components/src/functions/charts.ts
index 84c8f6d9e..4844596c3 100644
--- a/datagouv-components/src/functions/charts.ts
+++ b/datagouv-components/src/functions/charts.ts
@@ -27,7 +27,7 @@ export function toChartForm(chart: Chart) {
       aggregate_y: serie.aggregate_y || '',
     })),
     extras: chart.extras,
-    chart_type: chart.series.length > 0 ? chart.series[0].type : null,
+    chart_type: chart.series[0] ? chart.series[0].type : null,
     filter: seriesFilter ?? null,
   } satisfies ChartForm
 }

From 54f3ea01e33f4dedabbe152bb18ef560b5189b83 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 9 Apr 2026 11:31:22 +0200
Subject: [PATCH 059/121] fix: lint

---
 datagouv-components/src/components/Form/Listbox.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index 9ac0f0cd9..7d1bdcf6d 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -71,7 +71,7 @@ withDefaults(defineProps<{
   options?: Array<T>
   getOptionId?: (option: T) => string | number
   displayValue: (option: T | null) => string
-  isDisabled?: (option: T | null) => boolean
+  isDisabled?: (option: T) => boolean
 }>(), {
   getOptionId: (option: T): string | number => {
     if (typeof option === 'string') return option
@@ -80,8 +80,10 @@ withDefaults(defineProps<{
 
     throw new Error('Please set getOptionId()')
   },
-  isDisabled: (_option: T | null): boolean => {
-    return false
+    isDisabled: (option: T): boolean => {
+      if (option && typeof option === 'object' && 'disabled' in option) return option.disabled as boolean
+
+      return false
   },
 })
 

From 89af34cc570a672b09c9a23c2a1739af4729f186 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 9 Apr 2026 11:38:43 +0200
Subject: [PATCH 060/121] fix: lint

---
 datagouv-components/src/components/Form/Listbox.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index 7d1bdcf6d..27dfa4b56 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -80,10 +80,10 @@ withDefaults(defineProps<{
 
     throw new Error('Please set getOptionId()')
   },
-    isDisabled: (option: T): boolean => {
-      if (option && typeof option === 'object' && 'disabled' in option) return option.disabled as boolean
+  isDisabled: (option: T): boolean => {
+    if (option && typeof option === 'object' && 'disabled' in option) return option.disabled as boolean
 
-      return false
+    return false
   },
 })
 

From a2d5eb577f683d09df24750c568ad3fb1bc0b3d3 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 9 Apr 2026 14:47:01 +0200
Subject: [PATCH 061/121] fix: typecheck

---
 datagouv-components/src/components/Form/Listbox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index 27dfa4b56..9aa487ee6 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -71,7 +71,7 @@ withDefaults(defineProps<{
   options?: Array<T>
   getOptionId?: (option: T) => string | number
   displayValue: (option: T | null) => string
-  isDisabled?: (option: T) => boolean
+  isDisabled?: (option: T | null) => boolean
 }>(), {
   getOptionId: (option: T): string | number => {
     if (typeof option === 'string') return option
@@ -80,7 +80,7 @@ withDefaults(defineProps<{
 
     throw new Error('Please set getOptionId()')
   },
-  isDisabled: (option: T): boolean => {
+  isDisabled: (option: T | null): boolean => {
     if (option && typeof option === 'object' && 'disabled' in option) return option.disabled as boolean
 
     return false

From 07bc4aa4a216970d30c9fcaf747b702465b529fb Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 10 Apr 2026 16:04:26 +0200
Subject: [PATCH 062/121] chore: move components out of design-system

---
 {design-system => components/Charts}/ChartConfigurator.vue | 0
 {design-system => components/Charts}/ChartFilterRow.vue    | 0
 pages/design/chart.vue                                     | 2 +-
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename {design-system => components/Charts}/ChartConfigurator.vue (100%)
 rename {design-system => components/Charts}/ChartFilterRow.vue (100%)

diff --git a/design-system/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
similarity index 100%
rename from design-system/ChartConfigurator.vue
rename to components/Charts/ChartConfigurator.vue
diff --git a/design-system/ChartFilterRow.vue b/components/Charts/ChartFilterRow.vue
similarity index 100%
rename from design-system/ChartFilterRow.vue
rename to components/Charts/ChartFilterRow.vue
diff --git a/pages/design/chart.vue b/pages/design/chart.vue
index 5acfc3a7b..ccbc5c3e4 100644
--- a/pages/design/chart.vue
+++ b/pages/design/chart.vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import type { ChartForm } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
-import ChartConfigurator from '~/design-system/ChartConfigurator.vue'
+import ChartConfigurator from '~/components/Charts/ChartConfigurator.vue'
 
 const me = useMaybeMe()
 

From d6df607d8b757745df233eec1378e379529191a3 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 13 Apr 2026 17:15:20 +0200
Subject: [PATCH 063/121] feat: add next page load wip

---
 .../components/Chart/ChartViewerWrapper.vue   | 66 ++++++++++++++++++-
 .../src/functions/tabularApi.ts               |  5 ++
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 49 ++------------
 4 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 527ef0482..2dd6ce833 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -27,6 +27,7 @@ import type { Chart, ChartForApi } from '../../types/visualizations'
 
 const props = defineProps<{
   chart: Chart | ChartForApi
+  loadAllPages?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -44,9 +45,13 @@ const error = ref<Error | null>(null)
 const series = reactive<{
   data: Record<string, Array<Record<string, unknown>>>
   columns: Record<string, Array<string>>
-}>({
+  page: Record<string, number>
+  hasNextPage: Record<string, boolean>
+ }>({
   data: {},
   columns: {},
+  page: {},
+  hasNextPage: {},
 })
 
 async function fetchSeriesProfile() {
@@ -90,6 +95,48 @@ async function fetchSeriesProfile() {
   }
 }
 
+async function loadMorePages() {
+  for (const serie of props.chart.series) {
+    const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
+    const resourceId = serie.resource_id
+    if (!xColumn || !resourceId || !serie.column_y) continue
+
+    // Check if there's more data to load for this series
+    if (!series.hasNextPage[resourceId]) {
+      continue
+    }
+
+    // Calculate the next page to fetch
+    const nextPage = (series.page[resourceId] || 0) + 1
+    
+    const response = await fetchTabularData(config, {
+      columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
+      resourceId,
+      page: nextPage,
+      pageSize: 100,
+      groupBy: xColumn,
+      aggregation: serie.column_y && serie.aggregate_y
+        ? {
+            column: serie.column_y,
+            type: serie.aggregate_y,
+          }
+        : undefined,
+      filters: serie.filters ?? undefined,
+    })
+
+      // Update the page tracker
+    series.page[resourceId] = nextPage
+      
+    if (!series.data[resourceId]) {
+      series.data[resourceId] = []
+    }
+    series.data[resourceId] = [...series.data[resourceId], ...response.data]
+
+    // Update hasNextPage based on the API response
+    series.hasNextPage[resourceId] = !!response.links.next
+  }
+}
+
 async function fetchSeriesData() {
   status.value = 'pending'
   error.value = null
@@ -135,6 +182,23 @@ async function fetchSeriesData() {
       result.id,
       result.data.data,
     ]))
+    
+    // Reset page tracking for each series to 0 (page 1 has been loaded)
+    // Also initialize hasNextPage based on the response
+    for (const result of results) {
+      const serie = props.chart.series.find(s => s.resource_id === result.id)
+      if (serie) {
+        series.page[result.id] = 0
+        series.hasNextPage[result.id] = !!result.data.links.next
+      }
+    }
+    
+    // If loadAllPages is true, fetch the next page (loadMorePages can be called again for more)
+    // This allows progressive loading - first page loads quickly, then more can be loaded on demand
+    if (props.loadAllPages) {
+      await loadMorePages()
+    }
+    
     status.value = 'success'
   }
   catch (err) {
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 007ad9420..237bfe238 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -9,6 +9,11 @@ export type SortConfig = {
 
 export type TabularDataResponse = {
   data: Array<Record<string, unknown>>
+  links: {
+    profile: string
+    swagger: string
+    next: string
+  }
   meta: { total: number }
 }
 
diff --git a/package.json b/package.json
index f48acc9be..0441be3e4 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
     "@milkdown/vue": "^7.19.0",
     "@nuxt/image": "^2.0.0",
     "@nuxtjs/sitemap": "^8.0.8",
-    "@prosemirror-adapter/vue": "^0.5.3",
+    "@prosemirror-adapter/vue": "^0.4.6",
     "@remixicon/vue": "^4.9.0",
     "@rollup/pluginutils": "^5.3.0",
     "@sentry/nuxt": "^10.45.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9db5c4f71..1ed84b17f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -237,9 +237,6 @@ importers:
       dompurify:
         specifier: ^3.2.5
         version: 3.2.7
-      echarts:
-        specifier: ^6.0.0
-        version: 6.0.0
       geopf-extensions-openlayers:
         specifier: ^1.0.0-beta.5
         version: 1.0.0-beta.6
@@ -1900,9 +1897,6 @@ packages:
   '@ocavue/utils@1.6.0':
     resolution: {integrity: sha512-8W3q1hxx9qFdrYgPtbElllG/tqYkO/dMhlRUiqasO0SuDFTj78azSQjhIrBTFWxlBPPsSZN6zXYHmb3RwN2Jtg==}
 
-  '@ocavue/utils@1.6.0':
-    resolution: {integrity: sha512-8W3q1hxx9qFdrYgPtbElllG/tqYkO/dMhlRUiqasO0SuDFTj78azSQjhIrBTFWxlBPPsSZN6zXYHmb3RwN2Jtg==}
-
   '@opentelemetry/api-logs@0.207.0':
     resolution: {integrity: sha512-lAb0jQRVyleQQGiuuvCOTDVspc14nx6XJjP4FspJ1sNARo3Regq4ZZbrc3rN4b1TYSuUCvgH+UXUPug4SLOqEQ==}
     engines: {node: '>=8.0.0'}
@@ -2679,11 +2673,11 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.8
 
-  '@prosemirror-adapter/core@0.5.3':
-    resolution: {integrity: sha512-jGcI/eq3USFqf1fCaejgCmifmXYDyFco6/5KjyyNBnuEhLqyLjD+020CtcduEOsnN4xPZr5ikclgHIR6kEFkQg==}
+  '@prosemirror-adapter/core@0.4.6':
+    resolution: {integrity: sha512-qbqd4u9IyDXXolFFmX1tzE000IpF9JbCiiwuSvqIh7lT9ZqjeMcyDVR/vxyM4oVY1sVyQQQj+WxHMAIhj7egVg==}
 
-  '@prosemirror-adapter/vue@0.5.3':
-    resolution: {integrity: sha512-k+qofvyTk6XXIOSdy1nzX0dQjk8tDf+HVJAj4E9GDBICeiwMiIvHcbgcpCvL+K1BuGm2zwlNFUNIFFq5ExQQhg==}
+  '@prosemirror-adapter/vue@0.4.6':
+    resolution: {integrity: sha512-1zDxyi4JqH4Iw8SPAvkNSAfUPEHQDRi0Oshi2qOmRf3xFHk1hBiV8CL0kEmOUE2C40ipk9AWkX2uu3UgO/8IYw==}
     peerDependencies:
       vue: ^3.0.0
     peerDependenciesMeta:
@@ -5158,9 +5152,6 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  echarts@6.0.0:
-    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
-
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -8485,9 +8476,6 @@ packages:
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
-  tslib@2.3.0:
-    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
-
   tslib@2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
 
@@ -9044,12 +9032,6 @@ packages:
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
-  vue-echarts@8.0.1:
-    resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
-    peerDependencies:
-      echarts: ^6.0.0
-      vue: ^3.3.0
-
   vue-eslint-parser@10.2.0:
     resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -9319,9 +9301,6 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
-  zrender@6.0.0:
-    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
-
   zstddec@0.1.0:
     resolution: {integrity: sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==}
 
@@ -11909,8 +11888,6 @@ snapshots:
 
   '@ocavue/utils@1.6.0': {}
 
-  '@ocavue/utils@1.6.0': {}
-
   '@opentelemetry/api-logs@0.207.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
@@ -12517,7 +12494,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@prosemirror-adapter/core@0.5.3':
+  '@prosemirror-adapter/core@0.4.6':
     dependencies:
       prosemirror-model: 1.25.4
       prosemirror-state: 1.4.4
@@ -15042,11 +15019,6 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  echarts@6.0.0:
-    dependencies:
-      tslib: 2.3.0
-      zrender: 6.0.0
-
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.328: {}
@@ -19396,8 +19368,6 @@ snapshots:
 
   tslib@1.14.1: {}
 
-  tslib@2.3.0: {}
-
   tslib@2.4.0: {}
 
   tslib@2.8.1: {}
@@ -20081,11 +20051,6 @@ snapshots:
 
   vue-devtools-stub@0.1.0: {}
 
-  vue-echarts@8.0.1(echarts@6.0.0)(vue@3.5.22(typescript@5.9.2)):
-    dependencies:
-      echarts: 6.0.0
-      vue: 3.5.22(typescript@5.9.2)
-
   vue-eslint-parser@10.2.0(eslint@9.36.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
@@ -20386,10 +20351,6 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.7.0
 
-  zrender@6.0.0:
-    dependencies:
-      tslib: 2.3.0
-
   zstddec@0.1.0: {}
 
   zwitch@2.0.4: {}

From cd6c7ade49860136ff74b7e6be329bdcd6592f67 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 08:49:10 +0200
Subject: [PATCH 064/121] ci: fix

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9725655f6..b672aaf5e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -109,7 +109,7 @@ jobs:
           - browser: firefox
             projects: "--project=setup --project=setup-normal-user --project=firefox"
     container:
-      image: mcr.microsoft.com/playwright:v1.58.2-noble
+      image: mcr.microsoft.com/playwright:v1.59.1-noble
       options: --user 1001
 
     services:

From 68ebfcdfa0953fc5918983688fe33fe0087a45b1 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 14 Apr 2026 08:49:36 +0200
Subject: [PATCH 065/121] chore: lint

---
 .../src/components/Chart/ChartViewerWrapper.vue    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 2dd6ce833..eaa5eedd5 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -47,7 +47,7 @@ const series = reactive<{
   columns: Record<string, Array<string>>
   page: Record<string, number>
   hasNextPage: Record<string, boolean>
- }>({
+}>({
   data: {},
   columns: {},
   page: {},
@@ -108,7 +108,7 @@ async function loadMorePages() {
 
     // Calculate the next page to fetch
     const nextPage = (series.page[resourceId] || 0) + 1
-    
+
     const response = await fetchTabularData(config, {
       columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
       resourceId,
@@ -124,9 +124,9 @@ async function loadMorePages() {
       filters: serie.filters ?? undefined,
     })
 
-      // Update the page tracker
+    // Update the page tracker
     series.page[resourceId] = nextPage
-      
+
     if (!series.data[resourceId]) {
       series.data[resourceId] = []
     }
@@ -182,7 +182,7 @@ async function fetchSeriesData() {
       result.id,
       result.data.data,
     ]))
-    
+
     // Reset page tracking for each series to 0 (page 1 has been loaded)
     // Also initialize hasNextPage based on the response
     for (const result of results) {
@@ -192,13 +192,13 @@ async function fetchSeriesData() {
         series.hasNextPage[result.id] = !!result.data.links.next
       }
     }
-    
+
     // If loadAllPages is true, fetch the next page (loadMorePages can be called again for more)
     // This allows progressive loading - first page loads quickly, then more can be loaded on demand
     if (props.loadAllPages) {
       await loadMorePages()
     }
-    
+
     status.value = 'success'
   }
   catch (err) {

From cd380ef279523af4131a24f207e9f3c5ce11d3d2 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 15 Apr 2026 11:39:12 +0200
Subject: [PATCH 066/121] fix: use previous playwright version

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b672aaf5e..9725655f6 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -109,7 +109,7 @@ jobs:
           - browser: firefox
             projects: "--project=setup --project=setup-normal-user --project=firefox"
     container:
-      image: mcr.microsoft.com/playwright:v1.59.1-noble
+      image: mcr.microsoft.com/playwright:v1.58.2-noble
       options: --user 1001
 
     services:

From 1c7f261e5b3ca073ff3d615e9869b22e9ac23639 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 15 Apr 2026 11:43:13 +0200
Subject: [PATCH 067/121] fix: revert moved file ?

---
 {.github/.husky => .husky}/pre-commit | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {.github/.husky => .husky}/pre-commit (100%)

diff --git a/.github/.husky/pre-commit b/.husky/pre-commit
similarity index 100%
rename from .github/.husky/pre-commit
rename to .husky/pre-commit

From ce680770336a73aa3306ca9713426e23e5d11158 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 15 Apr 2026 11:45:52 +0200
Subject: [PATCH 068/121] fix: wrong packages installed

---
 datagouv-components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datagouv-components/package.json b/datagouv-components/package.json
index d17ccd248..023e96909 100644
--- a/datagouv-components/package.json
+++ b/datagouv-components/package.json
@@ -46,7 +46,6 @@
     "@vueuse/router": "^14.2.1",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
-    "echarts": "^6.0.0",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
@@ -70,6 +69,7 @@
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vue-content-loader": "^2.0.1",
+    "vue-echarts": "^8.0.1",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",

From cc0fa376d73850d586324c126681bb2f1527ac0b Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 15 Apr 2026 11:49:47 +0200
Subject: [PATCH 069/121] feat: hide load / save charts for non-admin

---
 components/Charts/ChartConfigurator.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index ac0b04425..4799f7110 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -36,7 +36,10 @@
       </div>
     </div>
     <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
-      <fieldset class="px-6 space-y-4">
+      <fieldset
+        v-if="isAdmin"
+        class="px-6 space-y-4"
+      >
         <label
           for="existing-charts"
           class="mb-2 font-bold"
@@ -362,7 +365,10 @@
         </div>
       </fieldset>
 
-      <div class="px-6">
+      <div
+        v-if="isAdmin"
+        class="px-6"
+      >
         <BrandedButton @click="saveChart">
           {{ $t('Sauvegarder le graphique') }}
         </BrandedButton>
@@ -430,6 +436,7 @@ function getColumnOptions() {
 const { $api } = useNuxtApp()
 const hasTabularData = useHasTabularData()
 const getProfile = useGetProfile()
+const isAdmin = isMeAdmin()
 
 const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
 

From b3c37fac36b9f3de7b5731f5213241a168c8385e Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 15 Apr 2026 14:19:42 +0200
Subject: [PATCH 070/121] fix: surround column name with `"`

---
 datagouv-components/src/functions/tabularApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 237bfe238..16a14c0a4 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -84,7 +84,7 @@ export async function fetchTabularData(config: PluginConfig, options: FetchTabul
   console.log(options)
   let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
   if (options.columns) {
-    url += `&columns=${options.columns.join(',')}`
+    url += `&columns=${options.columns.map(c => `"${c}"`).join(',')}`
   }
   if (options.sort) {
     url += `&${options.sort.column}__sort=${options.sort.type}`

From 6ae7fd49c99252395696b3d6a25fa5d7703e2cd7 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 15 Apr 2026 14:46:37 +0200
Subject: [PATCH 071/121] test: update after label change

---
 tests/visualizations/sort-select.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/visualizations/sort-select.spec.ts b/tests/visualizations/sort-select.spec.ts
index c15f6a5e1..0377e85dc 100644
--- a/tests/visualizations/sort-select.spec.ts
+++ b/tests/visualizations/sort-select.spec.ts
@@ -26,7 +26,7 @@ test('sort select updates reactively when column changes', async ({ page }) => {
   const firstOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
   expect(firstOptions[1]).toContain('libellé_EPCI')
 
-  await page.getByLabel('Column').selectOption('nom_region')
+  await page.getByLabel('Choisir quoi afficher').selectOption('nom_region')
 
   await page.waitForTimeout(500)
 

From 451343d84ce1998841a6c52c55a108d0a12cb3cd Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 15 Apr 2026 14:49:38 +0200
Subject: [PATCH 072/121] ci: use related udata branch

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9725655f6..c57ecb5ec 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -137,7 +137,7 @@ jobs:
         with:
           repository: opendatateam/udata
           path: ${{ env.UDATA_WORKING_DIR }}
-          ref: main
+          ref: feat_add_viz_poc_1 # TODO : move back to main
 
       - name: Set up uv
         uses: astral-sh/setup-uv@v6

From 12dc9eb655f920eea640fb8a50fa3b7ca3cdf5f5 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 09:37:17 +0200
Subject: [PATCH 073/121] fix: dont add `"` around columns name

---
 datagouv-components/src/functions/tabularApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 16a14c0a4..237bfe238 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -84,7 +84,7 @@ export async function fetchTabularData(config: PluginConfig, options: FetchTabul
   console.log(options)
   let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
   if (options.columns) {
-    url += `&columns=${options.columns.map(c => `"${c}"`).join(',')}`
+    url += `&columns=${options.columns.join(',')}`
   }
   if (options.sort) {
     url += `&${options.sort.column}__sort=${options.sort.type}`

From 2ee70aac0074601cf41ec5b7f8811b928fc0eb7a Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 14:19:38 +0200
Subject: [PATCH 074/121] fix: generic issues

---
 datagouv-components/src/functions/charts.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/datagouv-components/src/functions/charts.ts b/datagouv-components/src/functions/charts.ts
index 4844596c3..928f3ca82 100644
--- a/datagouv-components/src/functions/charts.ts
+++ b/datagouv-components/src/functions/charts.ts
@@ -61,7 +61,6 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
       ...serie,
       type: index === 0 && chartForm.chart_type ? chartForm.chart_type : serie.type,
       aggregate_y: serie.aggregate_y || null,
-      // Use series filter if exists, otherwise use chart-level filter
       filters: serie.filters || (index === 0 && chartForm.filter ? chartForm.filter : null),
     })),
     extras: chartForm.extras,

From a6e7fb1f04d69bc5cd5aaf2176cac9c68c83f66c Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 14:20:34 +0200
Subject: [PATCH 075/121] fix: generic issues

---
 components/Charts/ChartConfigurator.vue         | 8 ++++----
 datagouv-components/src/types/visualizations.ts | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index 4799f7110..1b71c93c3 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -575,21 +575,21 @@ const filterList = computed<Array<Filter>>(() => {
 
 function updateFilter(index: number, newFilter: Filter) {
   if (!form.value.filter || !('filters' in form.value.filter)) {
-    form.value.filter = { filters: [] }
+    form.value.filter = { _cls: 'AndFilters', filters: [] }
   }
   form.value.filter.filters[index] = newFilter
 }
 
 function addFilter() {
-  const newFilter: Filter = { column: '', condition: 'exact' as const, value: '' }
+  const newFilter: Filter = { _cls: 'Filter', column: '', condition: 'exact' as const, value: '' }
   if (!form.value.filter) {
-    form.value.filter = { filters: [newFilter] }
+    form.value.filter = { _cls: 'AndFilters', filters: [newFilter] }
   }
   else if ('filters' in form.value.filter) {
     form.value.filter.filters.push(newFilter)
   }
   else {
-    form.value.filter = { filters: [form.value.filter, newFilter] }
+    form.value.filter = { _cls: 'AndFilters', filters: [form.value.filter, newFilter] }
   }
 }
 </script>
diff --git a/datagouv-components/src/types/visualizations.ts b/datagouv-components/src/types/visualizations.ts
index 16e439c12..d55badeb7 100644
--- a/datagouv-components/src/types/visualizations.ts
+++ b/datagouv-components/src/types/visualizations.ts
@@ -3,12 +3,14 @@ import type { Owned, OwnedWithId } from './owned'
 
 export type FilterCondition = 'exact' | 'differs' | 'is_null' | 'is_not_null' | 'greater' | 'less' | 'strictly_greater' | 'strictly_less'
 export type Filter = {
+  _cls: 'Filter'
   column: string
   condition: FilterCondition
   value: string | null
 }
 
 export type AndFilters = {
+  _cls: 'AndFilters'
   filters: Array<Filter | AndFilters>
 }
 

From 78c84dcffbe91cb296ede675fa5b071e2af2efce Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 15:23:44 +0200
Subject: [PATCH 076/121] test: fix e2e save tests

---
 tests/visualizations/chart-configurator.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 0075620ad..c61ba5302 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -67,7 +67,7 @@ test('saving chart sends correct data to API', async ({ page }) => {
   const responseBody = (await response.json()) as Chart
 
   expect(responseBody!.title).toBe('Test Chart')
-  expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.title)
+  expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.id)
   await page.request.delete(`${getApiBase()}/api/1/visualization/${responseBody!.id}/`)
 })
 
@@ -99,7 +99,7 @@ test('complete chart configuration flow', async ({ page }) => {
   const response = await responsePromise
   const responseBody = (await response.json()) as Chart
 
-  expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.title)
+  expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.id)
 
   expect(await page.getByLabel('Titre').inputValue()).toBe('Graphique complet')
   expect(await page.getByLabel('Description').inputValue()).toBe('Test complet de configuration')

From 2bc0190fe94f0879e6957e7718a0c247f639b709 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 15:37:57 +0200
Subject: [PATCH 077/121] test: fix selection to match test

---
 tests/visualizations/chart-configurator.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index c61ba5302..baf38faae 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -91,7 +91,7 @@ test('complete chart configuration flow', async ({ page }) => {
   await page.getByLabel('Min').fill('0')
   await page.getByLabel('Max').fill('100')
   await page.locator('#y-axis-unit').fill('%')
-  await page.getByLabel('Position unité').selectOption('suffix')
+  await page.getByLabel('Position unité').selectOption('prefix')
 
   const responsePromise = page.waitForResponse(`${getApiBase()}/api/1/visualizations/*`)
 

From 6cc6cd8f313215964d13de7e7bfa42912d8fee02 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 16:12:46 +0200
Subject: [PATCH 078/121] test: fix saved tests

---
 tests/visualizations/chart-configurator.spec.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index baf38faae..c2e901742 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -59,12 +59,13 @@ test('saving chart sends correct data to API', async ({ page }) => {
   await page.getByLabel('Description').fill('Test Description')
   await page.waitForTimeout(500)
 
-  const responsePromise = page.waitForResponse(`${getApiBase()}/api/1/visualizations/*`)
+  const responsePromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'POST')
+  const getPromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
-
   const response = await responsePromise
   const responseBody = (await response.json()) as Chart
+  await getPromise
 
   expect(responseBody!.title).toBe('Test Chart')
   expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.id)
@@ -93,12 +94,15 @@ test('complete chart configuration flow', async ({ page }) => {
   await page.locator('#y-axis-unit').fill('%')
   await page.getByLabel('Position unité').selectOption('prefix')
 
-  const responsePromise = page.waitForResponse(`${getApiBase()}/api/1/visualizations/*`)
+  const responsePromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'POST')
+  const getPromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
   const response = await responsePromise
   const responseBody = (await response.json()) as Chart
+  await getPromise
 
+  expect(responseBody!.title).toBe('Graphique complet')
   expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.id)
 
   expect(await page.getByLabel('Titre').inputValue()).toBe('Graphique complet')

From bc24eefc43a4bc630159a58263bb9dc50185170b Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 16:14:46 +0200
Subject: [PATCH 079/121] ci: revert udata to main

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c57ecb5ec..9725655f6 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -137,7 +137,7 @@ jobs:
         with:
           repository: opendatateam/udata
           path: ${{ env.UDATA_WORKING_DIR }}
-          ref: feat_add_viz_poc_1 # TODO : move back to main
+          ref: main
 
       - name: Set up uv
         uses: astral-sh/setup-uv@v6

From 2291cc39c0d636e4507e3ba4ff10291c0b89b6b1 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 16:37:49 +0200
Subject: [PATCH 080/121] feat: add back vue-echarts

---
 package.json   |   1 +
 pnpm-lock.yaml | 112 ++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 111 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0441be3e4..a53d7bffb 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "uqr": "^0.1.2",
     "uuid": "^13.0.0",
     "vue-content-loader": "^2.0.1",
+    "vue-echart": "^1.0.5",
     "vue-router": "^5.0.4",
     "vue3-text-clamp": "^0.1.2"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1ed84b17f..b757b36e3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -137,6 +137,9 @@ importers:
       vue-content-loader:
         specifier: ^2.0.1
         version: 2.0.1(vue@3.5.31(typescript@5.9.3))
+      vue-echart:
+        specifier: ^1.0.5
+        version: 1.0.5
       vue-router:
         specifier: ^5.0.4
         version: 5.0.4(@vue/compiler-sfc@3.5.31)(vue@3.5.31(typescript@5.9.3))
@@ -306,6 +309,9 @@ importers:
       vue-content-loader:
         specifier: ^2.0.1
         version: 2.0.1(vue@3.5.31(typescript@5.9.2))
+      vue-echarts:
+        specifier: ^8.0.1
+        version: 8.0.1(echarts@6.0.0)(vue@3.5.31(typescript@5.9.2))
       vue-sonner:
         specifier: ^2.0.9
         version: 2.0.9(@nuxt/kit@4.4.2(magicast@0.5.2))(@nuxt/schema@4.4.2)(nuxt@4.2.2(@parcel/watcher@2.5.6)(@types/node@22.18.7)(@vue/compiler-sfc@3.5.31)(cac@6.7.14)(db0@0.3.4)(eslint@9.36.0(jiti@2.6.1))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(rollup@4.60.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.1)(lightningcss@1.32.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(yaml@2.8.3))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.3))
@@ -4199,6 +4205,9 @@ packages:
   '@vue/compiler-dom@3.5.31':
     resolution: {integrity: sha512-BMY/ozS/xxjYqRFL+tKdRpATJYDTTgWSo0+AJvJNg4ig+Hgb0dOsHPXvloHQ5hmlivUqw1Yt2pPIqp4e0v1GUw==}
 
+  '@vue/compiler-sfc@2.7.16':
+    resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
+
   '@vue/compiler-sfc@3.5.22':
     resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
 
@@ -4544,6 +4553,10 @@ packages:
     resolution: {integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==}
     engines: {node: '>=4'}
 
+  axios@0.17.1:
+    resolution: {integrity: sha512-mZzWRyJeJ0rtK7e1/6iYBUzmeXjzei+1h1IvbedyU0sB52++tU5AU6r6TLXpwNVR0ebXIpvTVW+9CpWNyc1n8w==}
+    deprecated: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
+
   axios@1.12.2:
     resolution: {integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==}
 
@@ -5152,6 +5165,12 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  echarts@3.8.5:
+    resolution: {integrity: sha512-E+nnROMfCeiLeoT/fZyX8SE8mKzwkTjyemyoBF543oqjRtjTSKQAVDEihMXy4oC6pJS0tYGdMqCA2ATk8onyRg==}
+
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -7533,6 +7552,11 @@ packages:
     peerDependencies:
       prettier: ^2.1.0
 
+  prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   prettier@3.7.4:
     resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
     engines: {node: '>=14'}
@@ -8206,6 +8230,9 @@ packages:
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
+  statistic-sdk@1.0.3:
+    resolution: {integrity: sha512-iaGJuOBK6TzRskNYSUgO7xOWU0/aDjg6uWkgAeRqKMYusOIUzNV+PVT6Xs8K0rXFLymf1mUFjScD4Ik5D9dtzQ==}
+
   statuses@2.0.2:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
@@ -8476,6 +8503,9 @@ packages:
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
 
@@ -9032,6 +9062,15 @@ packages:
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
+  vue-echart@1.0.5:
+    resolution: {integrity: sha512-uAgHltHM6e8hXuTGmNq9JmVYPOqx8k/6PjDhpg94yde72+OtDly46xv8jM+cfS/7IWtl8Mrb+AL8ZrMqKzrBNQ==}
+
+  vue-echarts@8.0.1:
+    resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
+    peerDependencies:
+      echarts: ^6.0.0
+      vue: ^3.3.0
+
   vue-eslint-parser@10.2.0:
     resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -9110,6 +9149,10 @@ packages:
       core-js: ^3.23.3
       vue: ^3.2.33
 
+  vue@2.7.16:
+    resolution: {integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==}
+    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
+
   vue@3.5.31:
     resolution: {integrity: sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==}
     peerDependencies:
@@ -9301,6 +9344,12 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zrender@3.7.4:
+    resolution: {integrity: sha512-5Nz7+L1wIoL0+Pp/iOP56jD6eD017qC9VRSgUBheXBiAHgOBJZ4uh4/g6e83acIwa8RKSyZf/FlceKu5ntUuxQ==}
+
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
   zstddec@0.1.0:
     resolution: {integrity: sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==}
 
@@ -14029,6 +14078,14 @@ snapshots:
       '@vue/compiler-core': 3.5.31
       '@vue/shared': 3.5.31
 
+  '@vue/compiler-sfc@2.7.16':
+    dependencies:
+      '@babel/parser': 7.29.2
+      postcss: 8.5.8
+      source-map: 0.6.1
+    optionalDependencies:
+      prettier: 2.8.8
+
   '@vue/compiler-sfc@3.5.22':
     dependencies:
       '@babel/parser': 7.28.4
@@ -14458,6 +14515,13 @@ snapshots:
 
   axe-core@4.11.1: {}
 
+  axios@0.17.1:
+    dependencies:
+      follow-redirects: 1.15.11
+      is-buffer: 1.1.6
+    transitivePeerDependencies:
+      - debug
+
   axios@1.12.2:
     dependencies:
       follow-redirects: 1.15.11
@@ -15019,6 +15083,15 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  echarts@3.8.5:
+    dependencies:
+      zrender: 3.7.4
+
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.328: {}
@@ -15578,8 +15651,7 @@ snapshots:
 
   flatted@3.3.3: {}
 
-  follow-redirects@1.15.11:
-    optional: true
+  follow-redirects@1.15.11: {}
 
   fontaine@0.8.0:
     dependencies:
@@ -18306,6 +18378,9 @@ snapshots:
       '@types/prettier': 2.7.3
       prettier: 3.7.4
 
+  prettier@2.8.8:
+    optional: true
+
   prettier@3.7.4: {}
 
   pretty-bytes@7.1.0: {}
@@ -19101,6 +19176,13 @@ snapshots:
 
   standard-as-callback@2.1.0: {}
 
+  statistic-sdk@1.0.3:
+    dependencies:
+      axios: 0.17.1
+      vue: 2.7.16
+    transitivePeerDependencies:
+      - debug
+
   statuses@2.0.2: {}
 
   std-env@3.10.0: {}
@@ -19368,6 +19450,8 @@ snapshots:
 
   tslib@1.14.1: {}
 
+  tslib@2.3.0: {}
+
   tslib@2.4.0: {}
 
   tslib@2.8.1: {}
@@ -20051,6 +20135,19 @@ snapshots:
 
   vue-devtools-stub@0.1.0: {}
 
+  vue-echart@1.0.5:
+    dependencies:
+      echarts: 3.8.5
+      statistic-sdk: 1.0.3
+      vue: 2.7.16
+    transitivePeerDependencies:
+      - debug
+
+  vue-echarts@8.0.1(echarts@6.0.0)(vue@3.5.31(typescript@5.9.2)):
+    dependencies:
+      echarts: 6.0.0
+      vue: 3.5.31(typescript@5.9.2)
+
   vue-eslint-parser@10.2.0(eslint@9.36.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
@@ -20175,6 +20272,11 @@ snapshots:
       core-js: 3.47.0
       vue: 3.5.31(typescript@5.9.2)
 
+  vue@2.7.16:
+    dependencies:
+      '@vue/compiler-sfc': 2.7.16
+      csstype: 3.2.3
+
   vue@3.5.31(typescript@5.9.2):
     dependencies:
       '@vue/compiler-dom': 3.5.31
@@ -20351,6 +20453,12 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.7.0
 
+  zrender@3.7.4: {}
+
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+
   zstddec@0.1.0: {}
 
   zwitch@2.0.4: {}

From c88456045e457aa495508b48a1c4a553ce48fecb Mon Sep 17 00:00:00 2001
From: Conciergerie AI <contact@conciergerie.dev>
Date: Thu, 16 Apr 2026 16:42:44 +0200
Subject: [PATCH 081/121] fix: imports

---
 pnpm-lock.yaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b757b36e3..c22e22118 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12635,7 +12635,7 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       rollup: 4.60.0
 
@@ -14237,12 +14237,12 @@ snapshots:
   '@vue/language-core@3.2.6':
     dependencies:
       '@volar/language-core': 2.4.28
-      '@vue/compiler-dom': 3.5.30
+      '@vue/compiler-dom': 3.5.31
       '@vue/shared': 3.5.31
       alien-signals: 3.1.2
       muggle-string: 0.4.1
       path-browserify: 1.0.1
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   '@vue/reactivity@3.5.31':
     dependencies:

From a40f73171ad6dcb78e65016bb9af29d123f6f5b7 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 16 Apr 2026 16:49:20 +0200
Subject: [PATCH 082/121] feat: add back echarts

---
 datagouv-components/package.json | 1 +
 pnpm-lock.yaml                   | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/datagouv-components/package.json b/datagouv-components/package.json
index 023e96909..78d6f670b 100644
--- a/datagouv-components/package.json
+++ b/datagouv-components/package.json
@@ -46,6 +46,7 @@
     "@vueuse/router": "^14.2.1",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
+    "echarts": "^6.0.0",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c22e22118..ec0246ecb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -240,6 +240,9 @@ importers:
       dompurify:
         specifier: ^3.2.5
         version: 3.2.7
+      echarts:
+        specifier: ^6.0.0
+        version: 6.0.0
       geopf-extensions-openlayers:
         specifier: ^1.0.0-beta.5
         version: 1.0.0-beta.6

From 1dca13ec52ce13f7ee8a1fc513b8eebbd433e26c Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 10:49:05 +0200
Subject: [PATCH 083/121] fix: remove unused package

---
 package.json   |  2 +-
 pnpm-lock.yaml | 78 ++------------------------------------------------
 2 files changed, 3 insertions(+), 77 deletions(-)

diff --git a/package.json b/package.json
index a53d7bffb..34e66c0ca 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "uqr": "^0.1.2",
     "uuid": "^13.0.0",
     "vue-content-loader": "^2.0.1",
-    "vue-echart": "^1.0.5",
+
     "vue-router": "^5.0.4",
     "vue3-text-clamp": "^0.1.2"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec0246ecb..f99fbaa2f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -137,9 +137,6 @@ importers:
       vue-content-loader:
         specifier: ^2.0.1
         version: 2.0.1(vue@3.5.31(typescript@5.9.3))
-      vue-echart:
-        specifier: ^1.0.5
-        version: 1.0.5
       vue-router:
         specifier: ^5.0.4
         version: 5.0.4(@vue/compiler-sfc@3.5.31)(vue@3.5.31(typescript@5.9.3))
@@ -4208,9 +4205,6 @@ packages:
   '@vue/compiler-dom@3.5.31':
     resolution: {integrity: sha512-BMY/ozS/xxjYqRFL+tKdRpATJYDTTgWSo0+AJvJNg4ig+Hgb0dOsHPXvloHQ5hmlivUqw1Yt2pPIqp4e0v1GUw==}
 
-  '@vue/compiler-sfc@2.7.16':
-    resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
-
   '@vue/compiler-sfc@3.5.22':
     resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
 
@@ -4556,10 +4550,6 @@ packages:
     resolution: {integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==}
     engines: {node: '>=4'}
 
-  axios@0.17.1:
-    resolution: {integrity: sha512-mZzWRyJeJ0rtK7e1/6iYBUzmeXjzei+1h1IvbedyU0sB52++tU5AU6r6TLXpwNVR0ebXIpvTVW+9CpWNyc1n8w==}
-    deprecated: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
-
   axios@1.12.2:
     resolution: {integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==}
 
@@ -5168,9 +5158,6 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  echarts@3.8.5:
-    resolution: {integrity: sha512-E+nnROMfCeiLeoT/fZyX8SE8mKzwkTjyemyoBF543oqjRtjTSKQAVDEihMXy4oC6pJS0tYGdMqCA2ATk8onyRg==}
-
   echarts@6.0.0:
     resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
 
@@ -7555,11 +7542,6 @@ packages:
     peerDependencies:
       prettier: ^2.1.0
 
-  prettier@2.8.8:
-    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
   prettier@3.7.4:
     resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
     engines: {node: '>=14'}
@@ -8233,9 +8215,6 @@ packages:
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
-  statistic-sdk@1.0.3:
-    resolution: {integrity: sha512-iaGJuOBK6TzRskNYSUgO7xOWU0/aDjg6uWkgAeRqKMYusOIUzNV+PVT6Xs8K0rXFLymf1mUFjScD4Ik5D9dtzQ==}
-
   statuses@2.0.2:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
@@ -9065,9 +9044,6 @@ packages:
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
-  vue-echart@1.0.5:
-    resolution: {integrity: sha512-uAgHltHM6e8hXuTGmNq9JmVYPOqx8k/6PjDhpg94yde72+OtDly46xv8jM+cfS/7IWtl8Mrb+AL8ZrMqKzrBNQ==}
-
   vue-echarts@8.0.1:
     resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
     peerDependencies:
@@ -9152,10 +9128,6 @@ packages:
       core-js: ^3.23.3
       vue: ^3.2.33
 
-  vue@2.7.16:
-    resolution: {integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==}
-    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
-
   vue@3.5.31:
     resolution: {integrity: sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==}
     peerDependencies:
@@ -9347,9 +9319,6 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
-  zrender@3.7.4:
-    resolution: {integrity: sha512-5Nz7+L1wIoL0+Pp/iOP56jD6eD017qC9VRSgUBheXBiAHgOBJZ4uh4/g6e83acIwa8RKSyZf/FlceKu5ntUuxQ==}
-
   zrender@6.0.0:
     resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
 
@@ -14081,14 +14050,6 @@ snapshots:
       '@vue/compiler-core': 3.5.31
       '@vue/shared': 3.5.31
 
-  '@vue/compiler-sfc@2.7.16':
-    dependencies:
-      '@babel/parser': 7.29.2
-      postcss: 8.5.8
-      source-map: 0.6.1
-    optionalDependencies:
-      prettier: 2.8.8
-
   '@vue/compiler-sfc@3.5.22':
     dependencies:
       '@babel/parser': 7.28.4
@@ -14518,13 +14479,6 @@ snapshots:
 
   axe-core@4.11.1: {}
 
-  axios@0.17.1:
-    dependencies:
-      follow-redirects: 1.15.11
-      is-buffer: 1.1.6
-    transitivePeerDependencies:
-      - debug
-
   axios@1.12.2:
     dependencies:
       follow-redirects: 1.15.11
@@ -15086,10 +15040,6 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  echarts@3.8.5:
-    dependencies:
-      zrender: 3.7.4
-
   echarts@6.0.0:
     dependencies:
       tslib: 2.3.0
@@ -15654,7 +15604,8 @@ snapshots:
 
   flatted@3.3.3: {}
 
-  follow-redirects@1.15.11: {}
+  follow-redirects@1.15.11:
+    optional: true
 
   fontaine@0.8.0:
     dependencies:
@@ -18381,9 +18332,6 @@ snapshots:
       '@types/prettier': 2.7.3
       prettier: 3.7.4
 
-  prettier@2.8.8:
-    optional: true
-
   prettier@3.7.4: {}
 
   pretty-bytes@7.1.0: {}
@@ -19179,13 +19127,6 @@ snapshots:
 
   standard-as-callback@2.1.0: {}
 
-  statistic-sdk@1.0.3:
-    dependencies:
-      axios: 0.17.1
-      vue: 2.7.16
-    transitivePeerDependencies:
-      - debug
-
   statuses@2.0.2: {}
 
   std-env@3.10.0: {}
@@ -20138,14 +20079,6 @@ snapshots:
 
   vue-devtools-stub@0.1.0: {}
 
-  vue-echart@1.0.5:
-    dependencies:
-      echarts: 3.8.5
-      statistic-sdk: 1.0.3
-      vue: 2.7.16
-    transitivePeerDependencies:
-      - debug
-
   vue-echarts@8.0.1(echarts@6.0.0)(vue@3.5.31(typescript@5.9.2)):
     dependencies:
       echarts: 6.0.0
@@ -20275,11 +20208,6 @@ snapshots:
       core-js: 3.47.0
       vue: 3.5.31(typescript@5.9.2)
 
-  vue@2.7.16:
-    dependencies:
-      '@vue/compiler-sfc': 2.7.16
-      csstype: 3.2.3
-
   vue@3.5.31(typescript@5.9.2):
     dependencies:
       '@vue/compiler-dom': 3.5.31
@@ -20456,8 +20384,6 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.7.0
 
-  zrender@3.7.4: {}
-
   zrender@6.0.0:
     dependencies:
       tslib: 2.3.0

From e169c48353e734067de62564ef346f0c1abae667 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 10:49:25 +0200
Subject: [PATCH 084/121] test: fix api calls for clean up

---
 tests/visualizations/chart-configurator.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index c2e901742..753da8804 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -69,7 +69,7 @@ test('saving chart sends correct data to API', async ({ page }) => {
 
   expect(responseBody!.title).toBe('Test Chart')
   expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.id)
-  await page.request.delete(`${getApiBase()}/api/1/visualization/${responseBody!.id}/`)
+  await page.request.delete(`${getApiBase()}/api/1/visualizations/${responseBody!.id}/`)
 })
 
 test('complete chart configuration flow', async ({ page }) => {
@@ -118,5 +118,5 @@ test('complete chart configuration flow', async ({ page }) => {
   expect(await page.getByLabel('Unité', { exact: true }).inputValue()).toBe('%')
   expect(await page.getByLabel('Position unité').inputValue()).toBe('prefix')
 
-  await page.request.delete(`${getApiBase()}/api/1/visualization/${responseBody!.id}/`)
+  await page.request.delete(`${getApiBase()}/api/1/visualizations/${responseBody!.id}/`)
 })

From 4192131b26b25d0f265117d948d51166db9a1a6b Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 10:59:28 +0200
Subject: [PATCH 085/121] fix: prevent null issue

---
 components/Charts/ChartConfigurator.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index 1b71c93c3..f9515a676 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -250,7 +250,7 @@
               v-model="serie.column_y"
               class="w-full fr-select"
             >
-              <template v-if="selectedResource">
+              <template v-if="selectedResource && columns[selectedResource]">
                 <option
                   v-for="column in columns[selectedResource]"
                   :key="column"
@@ -427,7 +427,16 @@ const sortOptionLabels = computed(() => {
   }
 })
 
-const columnDetails = computed(() => [{ key: '', value: t('Colonne'), disabled: true }, ...columns.value[selectedResource.value].map(c => ({ key: c, value: c, disabled: false }))])
+const columnDetails = computed(() => {
+  const options = [{ key: '', value: t('Colonne'), disabled: true }]
+  const resourceColumns = columns.value[selectedResource.value]
+
+  if (resourceColumns) {
+    options.push(...resourceColumns.map(c => ({ key: c, value: c, disabled: false })))
+  }
+
+  return options
+})
 
 function getColumnOptions() {
   return columnDetails.value

From b574f5fcb4c22f6626a642d4d83518667723ac54 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 11:39:16 +0200
Subject: [PATCH 086/121] feat: remove unecessary demo base URL

Now that we are live on demo, we can remove the base URLs
---
 components/Charts/ChartConfigurator.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index f9515a676..08b5ae97f 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -452,7 +452,7 @@ const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('
 watch(dataset, async (newDataset) => {
   if (!newDataset) return
   try {
-    const fetchedResources = await $api<PaginatedArray<Resource>>(`https://demo.data.gouv.fr/api/2/datasets/${newDataset.id}/resources/`)
+    const fetchedResources = await $api<PaginatedArray<Resource>>(`/api/2/datasets/${newDataset.id}/resources/`)
     for (const r of fetchedResources.data.filter(resource => hasTabularData(resource))) {
       savedResources[r.id] = r
     }
@@ -479,7 +479,8 @@ watch([titleDebounced, descDebounced], ([title, desc]) => {
 })
 
 watch(columns, (columnsPerResource) => {
-  const firstColumns = Object.values(columnsPerResource) ?? []
+  const firstColumns = Object.values(columnsPerResource ?? {})
+  if (firstColumns.length === 0) return
   const firstColumn = firstColumns[0].filter(c => c !== '__id')[0]
   if (!form.value.x_axis.column_x && firstColumn) {
     form.value.x_axis.column_x = firstColumn
@@ -491,7 +492,7 @@ async function loadMissingResourcesForChart(resourceIds: Set<string>) {
     if (savedResources[id]) continue
 
     try {
-      const resource = await $api<{ resource: Resource, dataset_id: string }>(`https://demo.data.gouv.fr/api/2/datasets/resources/${id}/`)
+      const resource = await $api<{ resource: Resource, dataset_id: string }>(`/api/2/datasets/resources/${id}/`)
       savedResources[id] = resource.resource
     }
     catch (error) {
@@ -501,7 +502,7 @@ async function loadMissingResourcesForChart(resourceIds: Set<string>) {
 }
 
 async function suggestDataset(q: string): Promise<Array<DatasetSuggest>> {
-  return await $api<Array<DatasetSuggest>>('https://demo.data.gouv.fr/api/1/datasets/suggest/', {
+  return await $api<Array<DatasetSuggest>>('/api/1/datasets/suggest/', {
     query: { q, size: 5 },
   })
 }

From e4c59f23f719f93ad6a01f724b428ffe6f92b78b Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 12:47:42 +0200
Subject: [PATCH 087/121] refac: remove leftover function

---
 components/Charts/ChartConfigurator.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index 08b5ae97f..da94e4efd 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -124,7 +124,7 @@
             :key="index"
             :model-value="filter"
             :index="index"
-            :column-options="getColumnOptions()"
+            :column-options="columnDetails.value"
             :condition-options="conditionOptions"
             @update:model-value="updateFilter(index, $event)"
             @remove="removeFilter(index)"
@@ -438,10 +438,6 @@ const columnDetails = computed(() => {
   return options
 })
 
-function getColumnOptions() {
-  return columnDetails.value
-}
-
 const { $api } = useNuxtApp()
 const hasTabularData = useHasTabularData()
 const getProfile = useGetProfile()

From 9498800c437d063f99595c613540c4d93dc93e95 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 12:47:52 +0200
Subject: [PATCH 088/121] test: simplify

---
 tests/visualizations/chart-configurator.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 753da8804..bd8a9b97b 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -10,7 +10,7 @@ test('dataset selector shows default dataset', async ({ page }) => {
   // SearchableSelect displays the selected value in a different way
   const displayedValue = await datasetSelect.inputValue()
   expect(datasetSelect).toBeVisible()
-  expect(displayedValue || datasetSelect.inputValue()).toContain('Logements et logements sociaux')
+  expect(displayedValue).toContain('Logements et logements sociaux')
 })
 
 test('resource selector shows available resources', async ({ page }) => {

From 4df6dc9446c9b3b121a28e9a9386f40818a0cf8e Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 13:46:02 +0200
Subject: [PATCH 089/121] chore: remove console.log

---
 datagouv-components/src/functions/tabularApi.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 237bfe238..fad493ec7 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -81,7 +81,6 @@ export type TabularProfileResponse = {
 export async function fetchTabularData(config: PluginConfig, options: FetchTabularDataOptions): Promise<TabularDataResponse> {
   const page = options.page ?? 1
   const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
-  console.log(options)
   let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
   if (options.columns) {
     url += `&columns=${options.columns.join(',')}`

From d3b6bacaac337a1971e9b48f1d29bb01a8ba9803 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 13:46:49 +0200
Subject: [PATCH 090/121] chore: log error as error

---
 datagouv-components/src/components/Chart/ChartViewerWrapper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index eaa5eedd5..484091673 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -90,7 +90,7 @@ async function fetchSeriesProfile() {
   catch (err) {
     error.value = err instanceof Error ? err : new Error('Failed to fetch series profile')
     status.value = 'error'
-    console.log(err)
+    console.error(err)
     series.columns = {}
   }
 }

From 80aaa7891d6e5deb2059d38500bda51cbb2b198e Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 13:47:07 +0200
Subject: [PATCH 091/121] chore: remove comment

---
 components/Datasets/FileEditModal.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Datasets/FileEditModal.vue b/components/Datasets/FileEditModal.vue
index 4167068eb..09baceb46 100644
--- a/components/Datasets/FileEditModal.vue
+++ b/components/Datasets/FileEditModal.vue
@@ -228,7 +228,6 @@ const resourceForm = ref(cloneDeep(props.resource))
 const open = ref(false)
 const hasFileChanged = ref(false)
 
-// Use the composable for tabular data detection
 const hasTabularData = useHasTabularData()
 
 // Check if resource has tabular API

From 7afecfadf073e1e251f3b553afe4df7d9ec7ceea Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 13:59:07 +0200
Subject: [PATCH 092/121] chore: remove redundant check

---
 components/Charts/ChartConfigurator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index da94e4efd..fe44bee5e 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -475,7 +475,7 @@ watch([titleDebounced, descDebounced], ([title, desc]) => {
 })
 
 watch(columns, (columnsPerResource) => {
-  const firstColumns = Object.values(columnsPerResource ?? {})
+  const firstColumns = Object.values(columnsPerResource)
   if (firstColumns.length === 0) return
   const firstColumn = firstColumns[0].filter(c => c !== '__id')[0]
   if (!form.value.x_axis.column_x && firstColumn) {

From 539fd04b8041a475e9883083e3dcc7943f9548df Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 13:59:19 +0200
Subject: [PATCH 093/121] test: remove unecessary one

---
 tests/visualizations/chart-configurator.spec.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index bd8a9b97b..46f95391d 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -42,15 +42,6 @@ test('series column y selector shows available columns', async ({ page }) => {
   expect(columnYOptions).toContain('libellé_EPCI')
 })
 
-test('save button is visible and clickable', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
-
-  const saveButton = page.getByRole('button', { name: 'Sauvegarder' })
-  await expect(saveButton).toBeVisible()
-  await expect(saveButton).toBeEnabled()
-})
-
 test('saving chart sends correct data to API', async ({ page }) => {
   await page.goto('/design/chart')
   await page.waitForLoadState('networkidle')

From 231b339ae4b75ac8dfa57aa757db96956500ea96 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 14:06:32 +0200
Subject: [PATCH 094/121] chore: PR review

---
 datagouv-components/src/components/Chart/ChartViewer.vue    | 6 ++----
 .../src/components/ResourceAccordion/Preview.vue            | 2 +-
 datagouv-components/src/composables/useHasTabularData.ts    | 4 +---
 tests/visualizations/chart-configurator.spec.ts             | 4 ++--
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 9e985529d..80e001033 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -54,10 +54,8 @@ const echartsOption = computed(() => {
     }
 
     const sortedData = [...props.series.data[resourceId]]
-    let sortBy: string | null = null
-    let sortDirection: 'asc' | 'desc' = 'asc'
-    sortBy = props.chart.x_axis.sort_x_by
-    sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
+    const sortBy = props.chart.x_axis.sort_x_by
+    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
diff --git a/datagouv-components/src/components/ResourceAccordion/Preview.vue b/datagouv-components/src/components/ResourceAccordion/Preview.vue
index d52d38f56..71505774e 100644
--- a/datagouv-components/src/components/ResourceAccordion/Preview.vue
+++ b/datagouv-components/src/components/ResourceAccordion/Preview.vue
@@ -142,7 +142,7 @@ async function getTableInfos(page: number, sortConfig?: SortConfig) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
-    if ('data' in response && response.data && 0 in response.data) {
+    if ('data' in response && response.data && response.data.length > 0) {
       // Update existing rows
       rows.value = response.data
       columns.value = Object.keys(response.data[0]).filter(item => item !== '__id')
diff --git a/datagouv-components/src/composables/useHasTabularData.ts b/datagouv-components/src/composables/useHasTabularData.ts
index 57dc1aed6..73eaa832e 100644
--- a/datagouv-components/src/composables/useHasTabularData.ts
+++ b/datagouv-components/src/composables/useHasTabularData.ts
@@ -10,7 +10,7 @@ import type { Resource } from '../types/resources'
 export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
-  const hasTabularData = (resource: Resource) => {
+  return (resource: Resource) => {
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
@@ -18,6 +18,4 @@ export const useHasTabularData = () => {
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }
-
-  return hasTabularData
 }
diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 46f95391d..f00686573 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -48,7 +48,7 @@ test('saving chart sends correct data to API', async ({ page }) => {
 
   await page.getByLabel('Titre').fill('Test Chart')
   await page.getByLabel('Description').fill('Test Description')
-  await page.waitForTimeout(500)
+  await page.waitForTimeout(300)
 
   const responsePromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'POST')
   const getPromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'GET')
@@ -69,7 +69,7 @@ test('complete chart configuration flow', async ({ page }) => {
 
   await page.getByLabel('Titre').fill('Graphique complet')
   await page.getByLabel('Description').fill('Test complet de configuration')
-  await page.waitForTimeout(400)
+  await page.waitForTimeout(300)
 
   await page.getByLabel('Type de graphique').selectOption('line')
 

From 395a21a095ad7fcb94709a6c96460df84318b7ad Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 15:29:09 +0200
Subject: [PATCH 095/121] fix: use production tabular API in nuxt config

---
 .github/workflows/ci.yml | 1 +
 nuxt.config.ts           | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9725655f6..f5c3de9aa 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -233,6 +233,7 @@ jobs:
           NUXT_PUBLIC_API_BASE: http://localhost:7000
           NUXT_PUBLIC_HOMEPAGE_HERO_IMAGES: "hero_15.png"
           NUXT_SITE_URL: http://localhost:3000
+          NUXT_PUBLIC_TABULAR_API_URL: https://tabular-api.preprod.data.gouv.fr
         run: |
           # Start cdata server in background using pre-built artifacts
           PORT=3000 node .output/server/index.mjs > cdata.log 2>&1 &
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 766adaadb..f0cd84372 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -69,7 +69,7 @@ export default defineNuxtConfig({
       maxPdfPreviewByteSize: 10000000, // (10 MB)
       maxXmlPreviewCharSize: 100000, // (~100KB)
       schemaValidataUrl: 'https://validata.fr',
-      tabularApiUrl: 'https://tabular-api.preprod.data.gouv.fr',
+      tabularApiUrl: 'https://tabular-api.data.gouv.fr',
       tabularApiDataserviceId: undefined,
 
       qualityDescriptionLength: 100,

From 73ff52549f5c184d8785d8deb9f5e8ed6f0574ae Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 20 Apr 2026 16:54:19 +0200
Subject: [PATCH 096/121] feat: separate charts baseURL from the other one

---
 .github/workflows/ci.yml                      |  1 +
 app.vue                                       |  1 +
 components/Charts/ChartConfigurator.vue       | 33 +++++---
 datagouv-components/src/config.ts             |  1 +
 nuxt.config.ts                                |  1 +
 .../visualizations/chart-configurator.spec.ts | 80 +++++++++++++++++--
 tests/visualizations/sort-select.spec.ts      | 51 ------------
 7 files changed, 98 insertions(+), 70 deletions(-)
 delete mode 100644 tests/visualizations/sort-select.spec.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f5c3de9aa..cd7131666 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -234,6 +234,7 @@ jobs:
           NUXT_PUBLIC_HOMEPAGE_HERO_IMAGES: "hero_15.png"
           NUXT_SITE_URL: http://localhost:3000
           NUXT_PUBLIC_TABULAR_API_URL: https://tabular-api.preprod.data.gouv.fr
+          NUXT_PUBLIC_CHARTS_API_BASE: https://demo.data.gouv.fr
         run: |
           # Start cdata server in background using pre-built artifacts
           PORT=3000 node .output/server/index.mjs > cdata.log 2>&1 &
diff --git a/app.vue b/app.vue
index 3aca41671..ebe44f841 100644
--- a/app.vue
+++ b/app.vue
@@ -36,6 +36,7 @@ app.vueApp.use(datagouv, {
   baseUrl: siteConfig.url,
   trustedDomains: runtimeConfig.public.trustedDomains,
   apiBase: runtimeConfig.public.apiBase,
+  chartsApiBase: runtimeConfig.public.chartsApiBase,
   devApiKey: runtimeConfig.public.devApiKey,
   datasetQualityGuideUrl: runtimeConfig.public.datasetQualityGuideUrl,
   maxJsonPreviewCharSize: runtimeConfig.public.maxJsonPreviewCharSize,
diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index fe44bee5e..42f6c26fc 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -439,16 +439,27 @@ const columnDetails = computed(() => {
 })
 
 const { $api } = useNuxtApp()
+const runtimeConfig = useRuntimeConfig()
 const hasTabularData = useHasTabularData()
 const getProfile = useGetProfile()
 const isAdmin = isMeAdmin()
 
+// Create a new API client for chart-related API calls
+const $chartsApi = $fetch.create({
+  baseURL: runtimeConfig.public.chartsApiBase,
+  onRequest({ options }) {
+    options.headers.set('Content-Type', 'application/json')
+    options.headers.set('Accept', 'application/json')
+    options.credentials = 'include'
+  },
+})
+
 const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
 
 watch(dataset, async (newDataset) => {
   if (!newDataset) return
   try {
-    const fetchedResources = await $api<PaginatedArray<Resource>>(`/api/2/datasets/${newDataset.id}/resources/`)
+    const fetchedResources = await $chartsApi<PaginatedArray<Resource>>(`/api/2/datasets/${newDataset.id}/resources/`)
     for (const r of fetchedResources.data.filter(resource => hasTabularData(resource))) {
       savedResources[r.id] = r
     }
@@ -488,7 +499,7 @@ async function loadMissingResourcesForChart(resourceIds: Set<string>) {
     if (savedResources[id]) continue
 
     try {
-      const resource = await $api<{ resource: Resource, dataset_id: string }>(`/api/2/datasets/resources/${id}/`)
+      const resource = await $chartsApi<{ resource: Resource, dataset_id: string }>(`/api/2/datasets/resources/${id}/`)
       savedResources[id] = resource.resource
     }
     catch (error) {
@@ -513,20 +524,20 @@ function removeFilter(index: number) {
 
 async function loadChart(id: string) {
   try {
-    const { data } = await useAPI<Chart>(`/api/1/visualizations/${id}/`)
-    if (data.value) {
-      savedChart.value = data.value
+    const data = await $api<Chart>(`/api/1/visualizations/${id}/`)
+    if (data) {
+      savedChart.value = data
 
       const chartResources = new Set<string>()
-      for (const serie of data.value.series) {
+      for (const serie of data.series) {
         if (serie.resource_id) {
           chartResources.add(serie.resource_id)
         }
       }
 
-      form.value = toChartForm(data.value)
-      title.value = data.value.title
-      desc.value = data.value.description
+      form.value = toChartForm(data)
+      title.value = data.title
+      desc.value = data.description
 
       await loadMissingResourcesForChart(chartResources)
 
@@ -550,13 +561,13 @@ async function saveChart() {
     const chartForApi = toChartApi(form.value)
     const update = savedChart.value?.id
     if (update) {
-      savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value!.id}/`, {
+      savedChart.value = await $chartsApi<Chart>(`/api/1/visualizations/${savedChart.value!.id}/`, {
         method: 'PATCH',
         body: JSON.stringify(chartForApi),
       })
     }
     else {
-      savedChart.value = await $api<Chart>('/api/1/visualizations/', {
+      savedChart.value = await $chartsApi<Chart>('/api/1/visualizations/', {
         method: 'POST',
         body: JSON.stringify(chartForApi),
       })
diff --git a/datagouv-components/src/config.ts b/datagouv-components/src/config.ts
index c87568b80..c9873f6ee 100644
--- a/datagouv-components/src/config.ts
+++ b/datagouv-components/src/config.ts
@@ -20,6 +20,7 @@ export type PluginConfig = {
   schemasSiteUrl?: string
   schemasSiteName?: string
   tabularApiUrl?: string
+  chartsApiBase?: string
   tabularApiPageSize?: number
   tabularAllowRemote?: boolean
   tabularApiDataserviceId?: string
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f0cd84372..e253ff0d4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -61,6 +61,7 @@ export default defineNuxtConfig({
       title: 'data.gouv.fr',
       description: 'Plateforme des données publiques françaises : télécharger, partager et réutiliser les données de l\'État et des collectivités',
       apiBase: 'http://dev.local:7000',
+      chartsApiBase: 'http://dev.local:7000',
       metricsApi: 'https://metric-api.data.gouv.fr',
       metricsSince: '2022-07-01',
       devApiKey: undefined,
diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index f00686573..2dae14a05 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -2,6 +2,20 @@ import type { Chart } from '@datagouv/components-next'
 import { test, expect } from '../base'
 import { getApiBase } from '../helpers'
 
+const envBaseURL = getApiBase()
+
+test.beforeAll(async ({ baseURL }) => {
+  if (baseURL === envBaseURL) {
+    baseURL = 'https://demo.data.gouv.fr'
+  }
+})
+
+test.afterAll(async ({ baseURL }) => {
+  if (baseURL !== envBaseURL) {
+    baseURL = envBaseURL
+  }
+})
+
 test('dataset selector shows default dataset', async ({ page }) => {
   await page.goto('/design/chart')
   await page.waitForLoadState('networkidle')
@@ -42,7 +56,57 @@ test('series column y selector shows available columns', async ({ page }) => {
   expect(columnYOptions).toContain('libellé_EPCI')
 })
 
-test('saving chart sends correct data to API', async ({ page }) => {
+test('sort select displays dynamic column names', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  // Check that the sort select now shows dynamic column names instead of static "Axe X - Ascendant"
+  const sortOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+
+  expect(sortOptions[0]).toBe('Aucun')
+
+  // Second option should show the dynamic column name, not "Axe X - Ascendant"
+  expect(sortOptions[1]).toContain('libellé_EPCI')
+  expect(sortOptions[1]).not.toContain('Axe X - Ascendant')
+
+  await page.getByLabel('Trier par').selectOption({ label: 'libellé_EPCI - Descendant' })
+
+  const selectedValue = await page.getByLabel('Trier par').inputValue()
+  expect(selectedValue).toBe('axis_x-desc')
+})
+
+test('sort select updates reactively when column changes', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  const firstOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+  expect(firstOptions[1]).toContain('libellé_EPCI')
+
+  await page.getByLabel('Choisir quoi afficher').selectOption('nom_region')
+
+  await page.waitForTimeout(500)
+
+  const updatedOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+  expect(updatedOptions[1]).toContain('nom_region')
+  expect(updatedOptions[1]).not.toContain('libellé_EPCI')
+})
+
+test('Y axis sort options show dynamic series column name too', async ({ page }) => {
+  await page.goto('/design/chart')
+  await page.waitForLoadState('networkidle')
+
+  await page.waitForTimeout(1000)
+
+  await page.getByLabel('Colonne Y').selectOption('Nombre de logements')
+
+  const sortOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
+
+  // Y axis ascending option should show dynamic column name
+  expect(sortOptions[3]).toContain('Nombre de logements')
+  expect(sortOptions[3]).not.toContain('Axe Y - Ascendant')
+})
+
+test('saving chart sends correct data to API', async ({ page, baseURL }) => {
   await page.goto('/design/chart')
   await page.waitForLoadState('networkidle')
 
@@ -50,8 +114,8 @@ test('saving chart sends correct data to API', async ({ page }) => {
   await page.getByLabel('Description').fill('Test Description')
   await page.waitForTimeout(300)
 
-  const responsePromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'POST')
-  const getPromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'GET')
+  const responsePromise = page.waitForResponse(response => response.url().includes(`${baseURL}/api/1/visualizations/`) && response.request().method() === 'POST')
+  const getPromise = page.waitForResponse(response => response.url().includes(`${baseURL}/api/1/visualizations/`) && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
   const response = await responsePromise
@@ -60,10 +124,10 @@ test('saving chart sends correct data to API', async ({ page }) => {
 
   expect(responseBody!.title).toBe('Test Chart')
   expect(await page.getByLabel('Graphiques existants').inputValue()).toBe(responseBody!.id)
-  await page.request.delete(`${getApiBase()}/api/1/visualizations/${responseBody!.id}/`)
+  await page.request.delete(`${baseURL}/api/1/visualizations/${responseBody!.id}/`)
 })
 
-test('complete chart configuration flow', async ({ page }) => {
+test('complete chart configuration flow', async ({ page, baseURL }) => {
   await page.goto('/design/chart')
   await page.waitForLoadState('networkidle')
 
@@ -85,8 +149,8 @@ test('complete chart configuration flow', async ({ page }) => {
   await page.locator('#y-axis-unit').fill('%')
   await page.getByLabel('Position unité').selectOption('prefix')
 
-  const responsePromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'POST')
-  const getPromise = page.waitForResponse(response => response.url().includes(`${getApiBase()}/api/1/visualizations/`) && response.request().method() === 'GET')
+  const responsePromise = page.waitForResponse(response => response.url().includes(`${baseURL}/api/1/visualizations/`) && response.request().method() === 'POST')
+  const getPromise = page.waitForResponse(response => response.url().includes(`${baseURL}/api/1/visualizations/`) && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
   const response = await responsePromise
@@ -109,5 +173,5 @@ test('complete chart configuration flow', async ({ page }) => {
   expect(await page.getByLabel('Unité', { exact: true }).inputValue()).toBe('%')
   expect(await page.getByLabel('Position unité').inputValue()).toBe('prefix')
 
-  await page.request.delete(`${getApiBase()}/api/1/visualizations/${responseBody!.id}/`)
+  await page.request.delete(`${baseURL}/api/1/visualizations/${responseBody!.id}/`)
 })
diff --git a/tests/visualizations/sort-select.spec.ts b/tests/visualizations/sort-select.spec.ts
deleted file mode 100644
index 0377e85dc..000000000
--- a/tests/visualizations/sort-select.spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { test, expect } from '../base'
-
-test('sort select displays dynamic column names', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
-
-  // Check that the sort select now shows dynamic column names instead of static "Axe X - Ascendant"
-  const sortOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
-
-  expect(sortOptions[0]).toBe('Aucun')
-
-  // Second option should show the dynamic column name, not "Axe X - Ascendant"
-  expect(sortOptions[1]).toContain('libellé_EPCI')
-  expect(sortOptions[1]).not.toContain('Axe X - Ascendant')
-
-  await page.getByLabel('Trier par').selectOption({ label: 'libellé_EPCI - Descendant' })
-
-  const selectedValue = await page.getByLabel('Trier par').inputValue()
-  expect(selectedValue).toBe('axis_x-desc')
-})
-
-test('sort select updates reactively when column changes', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
-
-  const firstOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
-  expect(firstOptions[1]).toContain('libellé_EPCI')
-
-  await page.getByLabel('Choisir quoi afficher').selectOption('nom_region')
-
-  await page.waitForTimeout(500)
-
-  const updatedOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
-  expect(updatedOptions[1]).toContain('nom_region')
-  expect(updatedOptions[1]).not.toContain('libellé_EPCI')
-})
-
-test('Y axis sort options show dynamic series column name too', async ({ page }) => {
-  await page.goto('/design/chart')
-  await page.waitForLoadState('networkidle')
-
-  await page.waitForTimeout(1000)
-
-  await page.getByLabel('Colonne Y').selectOption('Nombre de logements')
-
-  const sortOptions = await page.getByLabel('Trier par').locator('option').allTextContents()
-
-  // Y axis ascending option should show dynamic column name
-  expect(sortOptions[3]).toContain('Nombre de logements')
-  expect(sortOptions[3]).not.toContain('Axe Y - Ascendant')
-})

From cc13b14e3f4e800bb614c17d2c12f908d80fd0cb Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 21 Apr 2026 09:13:10 +0200
Subject: [PATCH 097/121] fix: value not necessary

---
 components/Charts/ChartConfigurator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index 42f6c26fc..b564f123f 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -124,7 +124,7 @@
             :key="index"
             :model-value="filter"
             :index="index"
-            :column-options="columnDetails.value"
+            :column-options="columnDetails"
             :condition-options="conditionOptions"
             @update:model-value="updateFilter(index, $event)"
             @remove="removeFilter(index)"

From 81ba8977f417270cd668138045b0ea18d4f6e635 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 21 Apr 2026 09:16:27 +0200
Subject: [PATCH 098/121] fix: chartApi not needed here

---
 components/Charts/ChartConfigurator.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index b564f123f..6559d7e24 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -561,13 +561,13 @@ async function saveChart() {
     const chartForApi = toChartApi(form.value)
     const update = savedChart.value?.id
     if (update) {
-      savedChart.value = await $chartsApi<Chart>(`/api/1/visualizations/${savedChart.value!.id}/`, {
+      savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value!.id}/`, {
         method: 'PATCH',
         body: JSON.stringify(chartForApi),
       })
     }
     else {
-      savedChart.value = await $chartsApi<Chart>('/api/1/visualizations/', {
+      savedChart.value = await $api<Chart>('/api/1/visualizations/', {
         method: 'POST',
         body: JSON.stringify(chartForApi),
       })

From acca0c604ef21cc56b10dbd116ab6791c2db7e57 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 21 Apr 2026 09:37:16 +0200
Subject: [PATCH 099/121] fix: typecheck error

---
 .../src/components/ResourceAccordion/Preview.vue                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datagouv-components/src/components/ResourceAccordion/Preview.vue b/datagouv-components/src/components/ResourceAccordion/Preview.vue
index 71505774e..d52d38f56 100644
--- a/datagouv-components/src/components/ResourceAccordion/Preview.vue
+++ b/datagouv-components/src/components/ResourceAccordion/Preview.vue
@@ -142,7 +142,7 @@ async function getTableInfos(page: number, sortConfig?: SortConfig) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
-    if ('data' in response && response.data && response.data.length > 0) {
+    if ('data' in response && response.data && 0 in response.data) {
       // Update existing rows
       rows.value = response.data
       columns.value = Object.keys(response.data[0]).filter(item => item !== '__id')

From f9f3124ae7a50ca42cf1015972bc710835b15eb1 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 21 Apr 2026 09:40:42 +0200
Subject: [PATCH 100/121] test: missing expect

---
 tests/visualizations/chart-configurator.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 2dae14a05..66df4a811 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -23,7 +23,7 @@ test('dataset selector shows default dataset', async ({ page }) => {
   const datasetSelect = page.getByPlaceholder('Recherchez un jeu de données...')
   // SearchableSelect displays the selected value in a different way
   const displayedValue = await datasetSelect.inputValue()
-  expect(datasetSelect).toBeVisible()
+  await expect(datasetSelect).toBeVisible()
   expect(displayedValue).toContain('Logements et logements sociaux')
 })
 

From fd11586dd6e691e597a44e116878c2c7dd2f9b38 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 21 Apr 2026 12:04:57 +0200
Subject: [PATCH 101/121] fix: remove baseUrl override

---
 tests/visualizations/chart-configurator.spec.ts | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 66df4a811..ab4795abc 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -1,20 +1,5 @@
 import type { Chart } from '@datagouv/components-next'
 import { test, expect } from '../base'
-import { getApiBase } from '../helpers'
-
-const envBaseURL = getApiBase()
-
-test.beforeAll(async ({ baseURL }) => {
-  if (baseURL === envBaseURL) {
-    baseURL = 'https://demo.data.gouv.fr'
-  }
-})
-
-test.afterAll(async ({ baseURL }) => {
-  if (baseURL !== envBaseURL) {
-    baseURL = envBaseURL
-  }
-})
 
 test('dataset selector shows default dataset', async ({ page }) => {
   await page.goto('/design/chart')

From f2ac8160a8326b1972639314f9fabf066f10c715 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 21 Apr 2026 14:18:24 +0200
Subject: [PATCH 102/121] test: fix

---
 tests/visualizations/chart-configurator.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index ab4795abc..39be8c33a 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -99,8 +99,8 @@ test('saving chart sends correct data to API', async ({ page, baseURL }) => {
   await page.getByLabel('Description').fill('Test Description')
   await page.waitForTimeout(300)
 
-  const responsePromise = page.waitForResponse(response => response.url().includes(`${baseURL}/api/1/visualizations/`) && response.request().method() === 'POST')
-  const getPromise = page.waitForResponse(response => response.url().includes(`${baseURL}/api/1/visualizations/`) && response.request().method() === 'GET')
+  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
+  const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
   const response = await responsePromise
@@ -134,8 +134,8 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
   await page.locator('#y-axis-unit').fill('%')
   await page.getByLabel('Position unité').selectOption('prefix')
 
-  const responsePromise = page.waitForResponse(response => response.url().includes(`${baseURL}/api/1/visualizations/`) && response.request().method() === 'POST')
-  const getPromise = page.waitForResponse(response => response.url().includes(`${baseURL}/api/1/visualizations/`) && response.request().method() === 'GET')
+  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
+  const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
   const response = await responsePromise

From d7959bfaaadf68e24e2be3d7d948c1341d4740bd Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 22 Apr 2026 09:26:32 +0200
Subject: [PATCH 103/121] test: add log

---
 tests/visualizations/chart-configurator.spec.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 39be8c33a..0084c200c 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -97,9 +97,12 @@ test('saving chart sends correct data to API', async ({ page, baseURL }) => {
 
   await page.getByLabel('Titre').fill('Test Chart')
   await page.getByLabel('Description').fill('Test Description')
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(500)
 
-  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
+  const responsePromise = page.waitForResponse((response) => {
+    console.log(response.url())
+    return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
+  })
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
@@ -118,7 +121,7 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
 
   await page.getByLabel('Titre').fill('Graphique complet')
   await page.getByLabel('Description').fill('Test complet de configuration')
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(500)
 
   await page.getByLabel('Type de graphique').selectOption('line')
 
@@ -134,7 +137,10 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
   await page.locator('#y-axis-unit').fill('%')
   await page.getByLabel('Position unité').selectOption('prefix')
 
-  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
+  const responsePromise = page.waitForResponse((response) => {
+    console.log(response.url())
+    return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
+  })
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()

From 7981a531287ac267270d514e119ad22e4c181c9f Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 22 Apr 2026 09:44:21 +0200
Subject: [PATCH 104/121] test: remove logs

---
 tests/visualizations/chart-configurator.spec.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 0084c200c..15f66714c 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -99,10 +99,7 @@ test('saving chart sends correct data to API', async ({ page, baseURL }) => {
   await page.getByLabel('Description').fill('Test Description')
   await page.waitForTimeout(500)
 
-  const responsePromise = page.waitForResponse((response) => {
-    console.log(response.url())
-    return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
-  })
+  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
@@ -137,10 +134,7 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
   await page.locator('#y-axis-unit').fill('%')
   await page.getByLabel('Position unité').selectOption('prefix')
 
-  const responsePromise = page.waitForResponse((response) => {
-    console.log(response.url())
-    return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
-  })
+  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()

From ed311bba002740036396b0fd11c4ef2c959b4400 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 22 Apr 2026 10:06:54 +0200
Subject: [PATCH 105/121] test: try to get trace

---
 playwright.config.ts                            |  2 +-
 tests/visualizations/chart-configurator.spec.ts | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index e77570820..223374343 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -33,7 +33,7 @@ export default defineConfig({
     baseURL: process.env.BASE_URL || 'http://dev.local:3000',
 
     screenshot: 'only-on-failure',
-    trace: 'retain-on-failure',
+    trace: 'on',
 
     locale: 'fr-FR',
 
diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 15f66714c..0084c200c 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -99,7 +99,10 @@ test('saving chart sends correct data to API', async ({ page, baseURL }) => {
   await page.getByLabel('Description').fill('Test Description')
   await page.waitForTimeout(500)
 
-  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
+  const responsePromise = page.waitForResponse((response) => {
+    console.log(response.url())
+    return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
+  })
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
@@ -134,7 +137,10 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
   await page.locator('#y-axis-unit').fill('%')
   await page.getByLabel('Position unité').selectOption('prefix')
 
-  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
+  const responsePromise = page.waitForResponse((response) => {
+    console.log(response.url())
+    return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
+  })
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()

From e93b5200f3e3716f8948c861031bac3d4064acee Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 22 Apr 2026 13:39:45 +0200
Subject: [PATCH 106/121] test: more log

---
 tests/visualizations/chart-configurator.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 0084c200c..02f2c0759 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -101,6 +101,7 @@ test('saving chart sends correct data to API', async ({ page, baseURL }) => {
 
   const responsePromise = page.waitForResponse((response) => {
     console.log(response.url())
+    console.log(response.url().includes('/api/1/visualizations/'))
     return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
   })
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
@@ -139,6 +140,7 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
 
   const responsePromise = page.waitForResponse((response) => {
     console.log(response.url())
+    console.log(response.url().includes('/api/1/visualizations/'))
     return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
   })
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')

From 856df5973a917d63a1227efccf8752cf62d64435 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 22 Apr 2026 14:05:12 +0200
Subject: [PATCH 107/121] test: try without log

---
 tests/visualizations/chart-configurator.spec.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 02f2c0759..9ab1ad622 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -100,8 +100,6 @@ test('saving chart sends correct data to API', async ({ page, baseURL }) => {
   await page.waitForTimeout(500)
 
   const responsePromise = page.waitForResponse((response) => {
-    console.log(response.url())
-    console.log(response.url().includes('/api/1/visualizations/'))
     return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
   })
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
@@ -139,8 +137,6 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
   await page.getByLabel('Position unité').selectOption('prefix')
 
   const responsePromise = page.waitForResponse((response) => {
-    console.log(response.url())
-    console.log(response.url().includes('/api/1/visualizations/'))
     return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
   })
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')

From 902afb52bd563b8f1573138c54fed6ca458fa156 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 22 Apr 2026 14:19:35 +0200
Subject: [PATCH 108/121] test: try short syntax

---
 tests/visualizations/chart-configurator.spec.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/tests/visualizations/chart-configurator.spec.ts b/tests/visualizations/chart-configurator.spec.ts
index 9ab1ad622..15f66714c 100644
--- a/tests/visualizations/chart-configurator.spec.ts
+++ b/tests/visualizations/chart-configurator.spec.ts
@@ -99,9 +99,7 @@ test('saving chart sends correct data to API', async ({ page, baseURL }) => {
   await page.getByLabel('Description').fill('Test Description')
   await page.waitForTimeout(500)
 
-  const responsePromise = page.waitForResponse((response) => {
-    return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
-  })
+  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()
@@ -136,9 +134,7 @@ test('complete chart configuration flow', async ({ page, baseURL }) => {
   await page.locator('#y-axis-unit').fill('%')
   await page.getByLabel('Position unité').selectOption('prefix')
 
-  const responsePromise = page.waitForResponse((response) => {
-    return response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST'
-  })
+  const responsePromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'POST')
   const getPromise = page.waitForResponse(response => response.url().includes('/api/1/visualizations/') && response.request().method() === 'GET')
 
   await page.getByRole('button', { name: 'Sauvegarder le graphique' }).click()

From 2a52f5befd528e978c2d482b1cb17247b21435e7 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 22 Apr 2026 15:00:40 +0200
Subject: [PATCH 109/121] fix: typecheck

---
 datagouv-components/src/functions/tabularApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 07dd1da21..6cf596b96 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -140,7 +140,7 @@ export async function getData(config: PluginConfig, id: string, page: number, so
   return fetchTabularData(config, {
     resourceId: id,
     page,
-    sort: sortConfig,
+    sort: sortConfig ?? undefined,
   })
 }
 

From eeb8f7f2b5ca489a92b2498b871f6eec7805753d Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 23 Apr 2026 14:33:16 +0200
Subject: [PATCH 110/121] feat(tabular): add parameter encoding

---
 .../src/functions/tabularApi.ts                | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 6cf596b96..f954784df 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -81,13 +81,13 @@ export async function fetchTabularData(config: PluginConfig, options: FetchTabul
   const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
   let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
   if (options.columns) {
-    url += `&columns=${options.columns.join(',')}`
+    url += `&columns=${options.columns.map(col => encodeURIComponent(col)).join(',')}`
   }
   if (options.sort) {
-    url += `&${options.sort.column}__sort=${options.sort.direction}`
+    url += `&${encodeURIComponent(options.sort.column)}__sort=${encodeURIComponent(options.sort.direction)}`
   }
   if (options.groupBy && options.aggregation?.type) {
-    url += `&${options.groupBy}__groupby&${options.aggregation.column}__${options.aggregation.type}`
+    url += `&${encodeURIComponent(options.groupBy)}__groupby&${encodeURIComponent(options.aggregation.column)}__${encodeURIComponent(options.aggregation.type)}`
   }
   if (options.filters) {
     const filterQuery = buildFilterQuery(options.filters)
@@ -107,13 +107,13 @@ function buildFilterQuery(filters: GenericFilter): string {
       }
       else {
         if (filter.condition === 'is_null') {
-          params.push(`${filter.column}__isnull`)
+          params.push(`${encodeURIComponent(filter.column)}__isnull`)
         }
         else if (filter.condition === 'is_not_null') {
-          params.push(`${filter.column}__isnotnull`)
+          params.push(`${encodeURIComponent(filter.column)}__isnotnull`)
         }
         else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
-          params.push(`${filter.column}__${filter.condition}=${encodeURIComponent(filter.value)}`)
+          params.push(`${encodeURIComponent(filter.column)}__${encodeURIComponent(filter.condition)}=${encodeURIComponent(filter.value)}`)
         }
       }
     }
@@ -121,13 +121,13 @@ function buildFilterQuery(filters: GenericFilter): string {
   else {
     const filter = filters
     if (filter.condition === 'is_null') {
-      params.push(`${filter.column}__isnull`)
+      params.push(`${encodeURIComponent(filter.column)}__isnull`)
     }
     else if (filter.condition === 'is_not_null') {
-      params.push(`${filter.column}__isnotnull`)
+      params.push(`${encodeURIComponent(filter.column)}__isnotnull`)
     }
     else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
-      params.push(`${filter.column}__${filter.condition}=${encodeURIComponent(filter.value)}`)
+      params.push(`${encodeURIComponent(filter.column)}__${encodeURIComponent(filter.condition)}=${encodeURIComponent(filter.value)}`)
     }
   }
   return params.join('&')

From 6692ab34fda5ef994e7bcbbceebb75134221c69a Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 23 Apr 2026 14:34:17 +0200
Subject: [PATCH 111/121] fix(visualization): proper filter and error handling

---
 .../components/Chart/ChartViewerWrapper.vue   | 96 +++++++++++--------
 1 file changed, 55 insertions(+), 41 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 484091673..61c1b2ed8 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -11,7 +11,7 @@
     </template>
     <template #error>
       <div class="text-center py-8 text-gray-500">
-        Une erreur est survenue lors du chargement des données du graphique.
+        {{ t('Une erreur est survenue lors du chargement des données du graphique.') }}
       </div>
     </template>
   </LoadingBlock>
@@ -22,8 +22,9 @@ import { reactive, ref, watch } from 'vue'
 import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
-import { fetchTabularData, useGetProfile, type TabularDataResponse, type TabularProfileResponse } from '../../functions/tabularApi'
+import { fetchTabularData, useGetProfile } from '../../functions/tabularApi'
 import type { Chart, ChartForApi } from '../../types/visualizations'
+import { useTranslation } from '../../composables/useTranslation'
 
 const props = defineProps<{
   chart: Chart | ChartForApi
@@ -34,6 +35,7 @@ const emit = defineEmits<{
   columns: [columns: Record<string, Array<string>>]
 }>()
 
+const { t } = useTranslation()
 const config = useComponentsConfig()
 const getProfile = useGetProfile()
 
@@ -41,7 +43,8 @@ const getProfile = useGetProfile()
 const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
 const error = ref<Error | null>(null)
 
-// Dataset source for the chart
+const pendingOperations = ref(0)
+
 const series = reactive<{
   data: Record<string, Array<Record<string, unknown>>>
   columns: Record<string, Array<string>>
@@ -55,6 +58,7 @@ const series = reactive<{
 })
 
 async function fetchSeriesProfile() {
+  pendingOperations.value++
   status.value = 'pending'
   error.value = null
 
@@ -66,17 +70,14 @@ async function fetchSeriesProfile() {
       return
     }
 
-    // Fetch data for all series in parallel
-    const fetchPromises = props.chart.series.map(async (serie) => {
-      if (!serie.resource_id) return
-      return {
-        id: serie.resource_id,
-        profile: await getProfile(serie.resource_id),
-      }
-    }).filter(Boolean) as Array<Promise<{
-      id: string
-      profile: TabularProfileResponse
-    }>>
+    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')
@@ -93,6 +94,9 @@ async function fetchSeriesProfile() {
     console.error(err)
     series.columns = {}
   }
+  finally {
+    pendingOperations.value--
+  }
 }
 
 async function loadMorePages() {
@@ -138,6 +142,7 @@ async function loadMorePages() {
 }
 
 async function fetchSeriesData() {
+  pendingOperations.value++
   status.value = 'pending'
   error.value = null
 
@@ -148,31 +153,31 @@ async function fetchSeriesData() {
       return
     }
 
-    const fetchPromises = props.chart.series.map(async (serie) => {
-      const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
-
-      if (!xColumn || !serie.resource_id || !serie.column_y) return
-      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,
-        }),
-      }
-    }).filter(Boolean) as Array<Promise<{
-      id: string
-      data: TabularDataResponse
-    }>>
+    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')
@@ -206,14 +211,15 @@ async function fetchSeriesData() {
     status.value = 'error'
     series.data = {}
   }
+  finally {
+    pendingOperations.value--
+  }
 }
 
-// Watch for changes in the chart or its series
 watch(() => props.chart.series, async () => {
   await fetchSeriesProfile()
 }, { immediate: true, deep: true })
 
-// Watch for changes in the chart or its series
 watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () => {
   await fetchSeriesData()
 }, { immediate: true, deep: true })
@@ -221,4 +227,12 @@ watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () =>
 watch(() => series.columns, () => {
   emit('columns', series.columns)
 })
+
+watch(pendingOperations, (count) => {
+  if (count === 0) {
+    if (error.value === null && status.value === 'pending') {
+      status.value = 'success'
+    }
+  }
+})
 </script>

From 1c394b8e3a07f0629c8e9a0e5a98d3782e7925fa Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 23 Apr 2026 14:44:08 +0200
Subject: [PATCH 112/121] feat(visualizations): add form

---
 components/Charts/ChartConfigurator.vue | 633 ++++++++++++------------
 1 file changed, 317 insertions(+), 316 deletions(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index 6559d7e24..a0b5944c5 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -1,391 +1,392 @@
 <template>
-  <div class="grid lg:grid-cols-12 gap-4">
-    <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
-      <div>
-        <label
-          for="chart-title"
-          class="font-bold fr-label"
-        >{{ $t('Titre') }}</label>
-        <input
-          id="chart-title"
-          v-model="title"
-          type="text"
-          class="w-full fr-input"
-        >
-      </div>
-
-      <div>
-        <label
-          for="chart-description"
-          class="font-bold fr-label"
-        >{{ $t('Description') }}</label>
-        <textarea
-          id="chart-description"
-          v-model="desc"
-          class="w-full fr-input"
-          rows="2"
-        />
-      </div>
-      <div class="mt-4">
-        <ClientOnly>
-          <ChartViewerWrapper
-            :chart="toChartApi(form)"
-            @columns="columns = $event"
-          />
-        </ClientOnly>
-      </div>
-    </div>
-    <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
-      <fieldset
-        v-if="isAdmin"
-        class="px-6 space-y-4"
-      >
-        <label
-          for="existing-charts"
-          class="mb-2 font-bold"
-        >
-          {{ $t('Graphiques existants') }}
-        </label>
-        <div class="flex gap-2">
-          <select
-            id="existing-charts"
-            v-model="selectedChartId"
-            class="flex-1 fr-select"
-          >
-            <option
-              value=""
-              disabled
-            >
-              {{ $t('Sélectionnez un graphique') }}
-            </option>
-            <option
-              v-for="chart in charts?.data"
-              :key="chart.id"
-              :value="chart.id"
-            >
-              {{ chart.title }}
-            </option>
-          </select>
-          <button
-            class="fr-btn"
-            :disabled="!selectedChartId"
-            @click="loadSelectedChart"
+  <form
+    id="chart-form"
+    class="block"
+    @submit.prevent="saveChart"
+  >
+    <div class="grid lg:grid-cols-12 gap-4">
+      <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
+        <div>
+          <label
+            for="chart-title"
+            class="font-bold fr-label"
+          >{{ $t('Titre') }}</label>
+          <input
+            id="chart-title"
+            v-model="title"
+            type="text"
+            class="w-full fr-input"
           >
-            {{ $t('Charger') }}
-          </button>
         </div>
-      </fieldset>
-      <fieldset class="px-6">
-        <p class="mb-2 font-bold">
-          {{ $t('Source de données') }}
-        </p>
-        <SearchableSelect
-          v-model="dataset"
-          :label="$t('Jeu de données')"
-          :placeholder="$t('Recherchez un jeu de données...')"
-          :display-value="(option: DatasetSuggest) => option.title"
-          :get-option-id="(option: DatasetSuggest) => option.id"
-          :multiple="false"
-          :suggest="suggestDataset"
-          class="mb-4"
-        />
-        <label
-          for="resource-select"
-          class="fr-label"
-        >{{ $t('Choix de la ressource') }}</label>
-        <select
-          id="resource-select"
-          v-model="selectedResource"
-          class="w-full fr-select"
-          :disabled="!dataset"
-        >
-          <option
-            value=""
-            disabled
-          >
-            {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
-          </option>
-          <option
-            v-for="resource in resources"
-            :key="resource.id"
-            :value="resource.id"
-          >
-            {{ resource.title }}
-          </option>
-        </select>
-      </fieldset>
-      <fieldset class="min-w-0 border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Filtres') }}
-        </p>
-        <div class="space-y-3">
-          <ChartFilterRow
-            v-for="(filter, index) in filterList"
-            :key="index"
-            :model-value="filter"
-            :index="index"
-            :column-options="columnDetails"
-            :condition-options="conditionOptions"
-            @update:model-value="updateFilter(index, $event)"
-            @remove="removeFilter(index)"
+
+        <div>
+          <label
+            for="chart-description"
+            class="font-bold fr-label"
+          >{{ $t('Description') }}</label>
+          <textarea
+            id="chart-description"
+            v-model="desc"
+            class="w-full fr-input"
+            rows="2"
           />
         </div>
-        <BrandedButton
-          size="sm"
-          color="tertiary"
-          :icon="RiAddLine"
-          @click="addFilter"
-        >
-          {{ $t('Ajouter un filtre') }}
-        </BrandedButton>
-      </fieldset>
-
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <label
-          for="chart-type"
-          class="fr-label font-bold"
-        >
-          {{ $t('Type de graphique') }}
-        </label>
-        <div>
-          <select
-            id="chart-type"
-            v-model="form.chart_type"
-            class="w-full fr-select"
-          >
-            <option value="line">
-              {{ $t('Ligne') }}
-            </option>
-            <option value="histogram">
-              {{ $t('Histogramme') }}
-            </option>
-          </select>
+        <div class="mt-4">
+          <ClientOnly>
+            <ChartViewerWrapper
+              :chart="toChartApi(form)"
+              @columns="columns = $event"
+            />
+          </ClientOnly>
         </div>
-      </fieldset>
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Axe X') }}
-        </p>
-        <div>
+      </div>
+
+      <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
+        <fieldset
+          v-if="isAdmin"
+          class="px-6 space-y-4"
+        >
           <label
-            for="x-axis-column"
-            class="fr-label"
-          >{{ $t('Choisir quoi afficher') }}</label>
-          <select
-            id="x-axis-column"
-            v-model="form.x_axis.column_x"
-            class="w-full fr-select"
+            for="existing-charts"
+            class="mb-2 font-bold"
           >
-            <optgroup
-              v-for="{ key, value } in flattenedColumns"
-              :key="key"
-              :label="savedResources[key]?.title ?? key"
+            {{ $t('Graphiques existants') }}
+          </label>
+          <div class="flex gap-2">
+            <select
+              id="existing-charts"
+              v-model="selectedChartId"
+              class="flex-1 fr-select"
             >
               <option
-                v-for="column in value"
-                :key="column"
+                v-for="column in charts?.data"
+                :key="column.id"
                 :value="column"
               >
                 {{ column }}
               </option>
-            </optgroup>
-          </select>
-        </div>
-        <div>
+            </select>
+            <button
+              class="fr-btn"
+              :disabled="!selectedChartId"
+              @click="loadSelectedChart"
+            >
+              {{ $t('Charger') }}
+            </button>
+          </div>
+        </fieldset>
+        <fieldset class="px-6">
+          <p class="mb-2 font-bold">
+            {{ $t('Source de données') }}
+          </p>
+          <SearchableSelect
+            v-model="dataset"
+            :label="$t('Jeu de données')"
+            :placeholder="$t('Recherchez un jeu de données...')"
+            :display-value="(option: DatasetSuggest) => option.title"
+            :get-option-id="(option: DatasetSuggest) => option.id"
+            :multiple="false"
+            :suggest="suggestDataset"
+            class="mb-4"
+          />
           <label
-            for="x-axis-type"
+            for="resource-select"
             class="fr-label"
-          >{{ $t('Type') }}</label>
+          >{{ $t('Choix de la ressource') }}</label>
           <select
-            id="x-axis-type"
-            v-model="form.x_axis.type"
+            id="resource-select"
+            v-model="selectedResource"
             class="w-full fr-select"
+            :disabled="!dataset"
           >
-            <option value="discrete">
-              {{ $t('Discret (catégories)') }}
-            </option>
-            <option value="continuous">
-              {{ $t('Continu (valeurs)') }}
+            <option
+              value=""
+              disabled
+            >
+              {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
             </option>
-          </select>
-        </div>
-        <div>
-          <label
-            for="x-axis-sort-combined"
-            class="fr-label"
-          >{{ $t('Trier par') }}</label>
-          <select
-            id="x-axis-sort-combined"
-            v-model="form.x_axis.sort_combined"
-            class="w-full fr-select"
-          >
             <option
-              v-for="(label, value) in sortOptionLabels"
-              :key="value"
-              :value
+              v-for="resource in resources"
+              :key="resource.id"
+              :value="resource.id"
             >
-              {{ label }}
+              {{ resource.title }}
             </option>
           </select>
-        </div>
-      </fieldset>
+        </fieldset>
+        <fieldset class="min-w-0 border-t border-new-gray-light py-4 px-6 space-y-4">
+          <p class="font-bold mb-2">
+            {{ $t('Filtres') }}
+          </p>
+          <div class="space-y-3">
+            <ChartFilterRow
+              v-for="(filter, index) in filterList"
+              :key="index"
+              :model-value="filter"
+              :index="index"
+              :column-options="columnDetails"
+              :condition-options="conditionOptions"
+              @update:model-value="updateFilter(index, $event)"
+              @remove="removeFilter(index)"
+            />
+          </div>
+          <BrandedButton
+            size="sm"
+            color="tertiary"
+            :icon="RiAddLine"
+            @click="addFilter"
+          >
+            {{ $t('Ajouter un filtre') }}
+          </BrandedButton>
+        </fieldset>
 
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Série') }}
-        </p>
-        <div
-          v-for="(serie, index) in form.series"
-          :key="index"
-          class="space-y-4"
-        >
+        <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+          <label
+            for="chart-type"
+            class="fr-label font-bold"
+          >
+            {{ $t('Type de graphique') }}
+          </label>
+          <div>
+            <select
+              id="chart-type"
+              v-model="form.chart_type"
+              class="w-full fr-select"
+            >
+              <option value="line">
+                {{ $t('Ligne') }}
+              </option>
+              <option value="histogram">
+                {{ $t('Histogramme') }}
+              </option>
+            </select>
+          </div>
+        </fieldset>
+        <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+          <p class="font-bold mb-2">
+            {{ $t('Axe X') }}
+          </p>
           <div>
             <label
-              :for="`column-y-${index}`"
+              for="x-axis-column"
               class="fr-label"
-            >{{ $t('Colonne Y')
-            }}</label>
+            >{{ $t('Choisir quoi afficher') }}</label>
             <select
-              :id="`column-y-${index}`"
-              v-model="serie.column_y"
+              id="x-axis-column"
+              v-model="form.x_axis.column_x"
               class="w-full fr-select"
             >
-              <template v-if="selectedResource && columns[selectedResource]">
+              <optgroup
+                v-for="{ key, value } in columnsArray"
+                :key="key"
+                :label="savedResources[key]?.title ?? key"
+              >
                 <option
-                  v-for="column in columns[selectedResource]"
+                  v-for="column in value"
                   :key="column"
                   :value="column"
                 >
                   {{ column }}
                 </option>
-              </template>
+              </optgroup>
             </select>
           </div>
-
           <div>
             <label
-              :for="`aggregate-y-${index}`"
+              for="x-axis-type"
               class="fr-label"
-            >{{ $t('Agrégation')
-            }}</label>
+            >{{ $t('Type') }}</label>
             <select
-              :id="`aggregate-y-${index}`"
-              v-model="serie.aggregate_y"
+              id="x-axis-type"
+              v-model="form.x_axis.type"
               class="w-full fr-select"
             >
-              <option :value="null">
-                {{ $t('Non') }}
-              </option>
-              <option value="sum">
-                {{ $t('Somme') }}
+              <option value="discrete">
+                {{ $t('Discret (catégories)') }}
               </option>
-              <option value="avg">
-                {{ $t('Moyenne') }}
+              <option value="continuous">
+                {{ $t('Continu (valeurs)') }}
               </option>
             </select>
           </div>
-        </div>
-      </fieldset>
-
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Axe Y') }}
-        </p>
-        <div>
-          <label
-            for="y-axis-label"
-            class="fr-label"
-          >{{ $t('Label') }}</label>
-          <input
-            id="y-axis-label"
-            v-model="form.y_axis.label"
-            type="text"
-            class="w-full fr-input"
-          >
-        </div>
-        <div class="grid grid-cols-2 gap-4">
           <div>
             <label
-              for="y-axis-min"
+              for="x-axis-sort-combined"
               class="fr-label"
-            >{{ $t('Min') }}</label>
-            <input
-              id="y-axis-min"
-              v-model.number="form.y_axis.min"
-              type="number"
-              class="w-full fr-input"
+            >{{ $t('Trier par') }}</label>
+            <select
+              id="x-axis-sort-combined"
+              v-model="form.x_axis.sort_combined"
+              class="w-full fr-select"
             >
+              <option
+                v-for="(label, value) in sortOptionLabels"
+                :key="value"
+                :value
+              >
+                {{ label }}
+              </option>
+            </select>
           </div>
-          <div>
-            <label
-              for="y-axis-max"
-              class="fr-label"
-            >{{ $t('Max') }}</label>
-            <input
-              id="y-axis-max"
-              v-model.number="form.y_axis.max"
-              type="number"
-              class="w-full fr-input"
-            >
+        </fieldset>
+
+        <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+          <p class="font-bold mb-2">
+            {{ $t('Série') }}
+          </p>
+          <div
+            v-for="(serie, index) in form.series"
+            :key="index"
+            class="space-y-4"
+          >
+            <div>
+              <label
+                :for="`column-y-${index}`"
+                class="fr-label"
+              >{{ $t('Colonne Y')
+              }}</label>
+              <select
+                :id="`column-y-${index}`"
+                v-model="serie.column_y"
+                class="w-full fr-select"
+              >
+                <template v-if="selectedResource && columns[selectedResource]">
+                  <option
+                    v-for="column in columns[selectedResource]"
+                    :key="column"
+                    :value="column"
+                  >
+                    {{ column }}
+                  </option>
+                </template>
+              </select>
+            </div>
+
+            <div>
+              <label
+                :for="`aggregate-y-${index}`"
+                class="fr-label"
+              >{{ $t('Agrégation')
+              }}</label>
+              <select
+                :id="`aggregate-y-${index}`"
+                v-model="serie.aggregate_y"
+                class="w-full fr-select"
+              >
+                <option :value="null">
+                  {{ $t('Non') }}
+                </option>
+                <option value="sum">
+                  {{ $t('Somme') }}
+                </option>
+                <option value="avg">
+                  {{ $t('Moyenne') }}
+                </option>
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="grid grid-cols-2 gap-4">
+        </fieldset>
+
+        <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+          <p class="font-bold mb-2">
+            {{ $t('Axe Y') }}
+          </p>
           <div>
             <label
-              for="y-axis-unit"
+              for="y-axis-label"
               class="fr-label"
-            >{{ $t('Unité') }}</label>
+            >{{ $t('Label') }}</label>
             <input
-              id="y-axis-unit"
-              v-model="form.y_axis.unit"
+              id="y-axis-label"
+              v-model="form.y_axis.label"
               type="text"
               class="w-full fr-input"
-              :placeholder="$t('ex: €, %, kg')"
             >
           </div>
-          <div>
-            <label
-              for="y-axis-unit-position"
-              class="fr-label"
-            >{{ $t('Position unité')
-            }}</label>
-            <select
-              id="y-axis-unit-position"
-              v-model="form.y_axis.unit_position"
-              class="w-full fr-select"
-            >
-              <option value="suffix">
-                {{ $t('Suffixe') }}
-              </option>
-              <option value="prefix">
-                {{ $t('Préfixe') }}
-              </option>
-            </select>
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label
+                for="y-axis-min"
+                class="fr-label"
+              >{{ $t('Min') }}</label>
+              <input
+                id="y-axis-min"
+                v-model.number="form.y_axis.min"
+                type="number"
+                class="w-full fr-input"
+              >
+            </div>
+            <div>
+              <label
+                for="y-axis-max"
+                class="fr-label"
+              >{{ $t('Max') }}</label>
+              <input
+                id="y-axis-max"
+                v-model.number="form.y_axis.max"
+                type="number"
+                class="w-full fr-input"
+              >
+            </div>
           </div>
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label
+                for="y-axis-unit"
+                class="fr-label"
+              >{{ $t('Unité') }}</label>
+              <input
+                id="y-axis-unit"
+                v-model="form.y_axis.unit"
+                type="text"
+                class="w-full fr-input"
+                :placeholder="$t('ex: €, %, kg')"
+              >
+            </div>
+            <div>
+              <label
+                for="y-axis-unit-position"
+                class="fr-label"
+              >{{ $t('Position unité')
+              }}</label>
+              <select
+                id="y-axis-unit-position"
+                v-model="form.y_axis.unit_position"
+                class="w-full fr-select"
+              >
+                <option value="suffix">
+                  {{ $t('Suffixe') }}
+                </option>
+                <option value="prefix">
+                  {{ $t('Préfixe') }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </fieldset>
+
+        <div
+          v-if="isAdmin"
+          class="px-6"
+        >
+          <BrandedButton type="submit">
+            {{ $t('Sauvegarder le graphique') }}
+          </BrandedButton>
         </div>
-      </fieldset>
-
-      <div
-        v-if="isAdmin"
-        class="px-6"
-      >
-        <BrandedButton @click="saveChart">
-          {{ $t('Sauvegarder le graphique') }}
-        </BrandedButton>
       </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <script setup lang="ts">
 import type { Resource, PaginatedArray, ChartForm, Chart, Filter, FilterCondition } from '@datagouv/components-next'
-import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, toChartApi, toChartForm } from '@datagouv/components-next'
+import { useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, toChartApi, toChartForm, SearchableSelect } from '@datagouv/components-next'
 import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
-import type { DatasetSuggest } from '~/types/types'
 import { RiAddLine } from '@remixicon/vue'
 import { useAPI } from '~/utils/api'
 
 import ChartFilterRow from './ChartFilterRow.vue'
+import type { DatasetSuggest } from '~/types/types'
 
 const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
 
@@ -396,9 +397,9 @@ const form = defineModel<ChartForm>({
 const { t } = useTranslation()
 
 const columns = ref<Record<string, Array<string>>>({})
-const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
+const columnsArray = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })))
 
-const dataset = ref<DatasetSuggest | undefined>({ id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' } as DatasetSuggest)
+const dataset = ref<DatasetSuggest>({ id: '6170ae10981edd7b132f28a0', title: 'Logements et logements sociaux dans les EPCI' } as DatasetSuggest)
 const savedResources = reactive<Record<string, Resource>>({})
 const selectedResource = ref('14dba482-41e3-4c54-b82a-d8c11d1d80eb')
 const savedChart = ref<Chart | null>(null)
@@ -446,7 +447,7 @@ const isAdmin = isMeAdmin()
 
 // Create a new API client for chart-related API calls
 const $chartsApi = $fetch.create({
-  baseURL: runtimeConfig.public.chartsApiBase,
+  baseURL: runtimeConfig.public.chartsApiBase as string,
   onRequest({ options }) {
     options.headers.set('Content-Type', 'application/json')
     options.headers.set('Accept', 'application/json')
@@ -454,7 +455,7 @@ const $chartsApi = $fetch.create({
   },
 })
 
-const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
+const { data: charts, refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
 
 watch(dataset, async (newDataset) => {
   if (!newDataset) return

From 8b7ccbfd51a697c655d7962b8ce551021da2f9d4 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 23 Apr 2026 15:33:05 +0200
Subject: [PATCH 113/121] feat(visualizations): more sort options

---
 .../src/components/Chart/ChartViewer.vue      | 75 ++++++++++++++-----
 1 file changed, 58 insertions(+), 17 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 80e001033..b04be782b 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -15,6 +15,7 @@ import VChart from 'vue-echarts'
 import { computed } from 'vue'
 import { summarize } from '../../functions/helpers'
 import type { Chart, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
+import { useTranslation } from '../../composables/useTranslation'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
 
@@ -26,6 +27,8 @@ const props = defineProps<{
   }
 }>()
 
+const { locale } = useTranslation()
+
 function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
   if (!xAxis) return 'category'
   return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
@@ -44,7 +47,7 @@ const echartsOption = computed(() => {
   const seriesCount = props.chart.series.length
   if (!props.chart.series || seriesCount === 0) return
 
-  const seriesData = props.chart.series.map((s) => {
+  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
@@ -60,11 +63,46 @@ const echartsOption = computed(() => {
     if (sortBy && sortDirection && props.chart.x_axis.column_x) {
       const sortKey = sortBy === 'axis_x' ? xColumn : yColumn
       sortedData.sort((a, b) => {
-        const valA = a[sortKey] as number
-        const valB = b[sortKey] as number
-        if (valA < valB) return sortDirection === 'asc' ? -1 : 1
-        if (valA > valB) return sortDirection === 'asc' ? 1 : -1
-        return 0
+        const valA = a[sortKey]
+        const valB = b[sortKey]
+
+        // Handle null/undefined values - place them at the front
+        if (valA === null || valA === undefined) return sortDirection === 'asc' ? -1 : 1
+        if (valB === null || valB === undefined) return sortDirection === 'asc' ? 1 : -1
+        if (valA === null && valB === null) return 0
+        if (valA === undefined && valB === undefined) return 0
+
+        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)
       })
     }
 
@@ -83,17 +121,19 @@ const echartsOption = computed(() => {
         dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
       },
     }
-  }).filter(Boolean).reduce((acc: { series: Array<LineSeriesOption | BarSeriesOption>, data: Array<Record<string, unknown>> }, curr) => {
-    if (curr) {
-      acc.series.push(curr.series)
-      acc.data.push(curr.data)
-    }
-    return acc
-  }, {
-    series: [],
-    data: [],
   })
 
+  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)
+  }
+
   return {
     dataset: [...seriesData.data],
     title: {
@@ -104,10 +144,11 @@ 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')
         for (const param of params) {
           const keys = Object.keys(param.value)
-          const col = keys.find(key => key.startsWith(param.seriesName))!
-          const formatter = new Intl.NumberFormat('fr-FR')
+          const seriesName = param.seriesName
+          const col = keys.find(key => key === seriesName || key.startsWith(`${seriesName}__`))!
           tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[col]))}</strong><br>`
         }
         return tooltip

From 9f3c23185b8494825a81c93287fcc922e33a4fa3 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 23 Apr 2026 16:08:00 +0200
Subject: [PATCH 114/121] fix(visualizations): compute col name

---
 datagouv-components/src/components/Chart/ChartViewer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index b04be782b..11a7a88fa 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -146,9 +146,9 @@ const echartsOption = computed(() => {
         let tooltip = ''
         const formatter = new Intl.NumberFormat('fr-FR')
         for (const param of params) {
-          const keys = Object.keys(param.value)
           const seriesName = param.seriesName
-          const col = keys.find(key => key === seriesName || key.startsWith(`${seriesName}__`))!
+          const seriesConfig = props.chart.series.find(s => s.column_y === seriesName)
+          const col = seriesConfig?.aggregate_y ? `${seriesName}__${seriesConfig.aggregate_y}` : seriesName
           tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[col]))}</strong><br>`
         }
         return tooltip

From 9a0e2c87cf2dd6d52ade8d7b8845fd89d5d3894b Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 23 Apr 2026 16:13:51 +0200
Subject: [PATCH 115/121] ci: revert to retain-on-failure

---
 playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 223374343..e77570820 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -33,7 +33,7 @@ export default defineConfig({
     baseURL: process.env.BASE_URL || 'http://dev.local:3000',
 
     screenshot: 'only-on-failure',
-    trace: 'on',
+    trace: 'retain-on-failure',
 
     locale: 'fr-FR',
 

From c7608ba63e5b59296c31d6172cc055099d43a8a8 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 23 Apr 2026 16:14:32 +0200
Subject: [PATCH 116/121] chore: remove diff

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index c9c0a1230..dde75202f 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,6 @@
     "uqr": "^0.1.2",
     "uuid": "^13.0.0",
     "vue-content-loader": "^2.0.1",
-
     "vue-router": "^5.0.4",
     "vue3-text-clamp": "^0.1.2"
   },

From dff125819118b754c9879cb5393e2ab80f2e8206 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 23 Apr 2026 16:17:11 +0200
Subject: [PATCH 117/121] chore: remove unused function

---
 tests/helpers.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/tests/helpers.ts b/tests/helpers.ts
index 4e7789e15..c86b1580a 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -10,10 +10,6 @@ export const clickOutside = async (page: Page) => {
   await page.mouse.click(1, 1)
 }
 
-export const getApiBase = () => {
-  return process.env.NUXT_PUBLIC_API_BASE || 'http://dev.local:7000'
-}
-
 const IGNORED_MESSAGES = [
   // Cookie secure flag doesn't work in dev (HTTP)
   'non-HTTPS cookie',

From 28c7cb15f92a6f7dc3f943715c88c31aec1fb116 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 24 Apr 2026 09:00:51 +0200
Subject: [PATCH 118/121] chore: remove comments

---
 .../src/components/Chart/ChartViewerWrapper.vue        | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
index 61c1b2ed8..07ce62702 100644
--- a/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
+++ b/datagouv-components/src/components/Chart/ChartViewerWrapper.vue
@@ -39,7 +39,6 @@ const { t } = useTranslation()
 const config = useComponentsConfig()
 const getProfile = useGetProfile()
 
-// Loading and error states
 const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
 const error = ref<Error | null>(null)
 
@@ -105,12 +104,10 @@ async function loadMorePages() {
     const resourceId = serie.resource_id
     if (!xColumn || !resourceId || !serie.column_y) continue
 
-    // Check if there's more data to load for this series
     if (!series.hasNextPage[resourceId]) {
       continue
     }
 
-    // Calculate the next page to fetch
     const nextPage = (series.page[resourceId] || 0) + 1
 
     const response = await fetchTabularData(config, {
@@ -128,7 +125,6 @@ async function loadMorePages() {
       filters: serie.filters ?? undefined,
     })
 
-    // Update the page tracker
     series.page[resourceId] = nextPage
 
     if (!series.data[resourceId]) {
@@ -136,7 +132,6 @@ async function loadMorePages() {
     }
     series.data[resourceId] = [...series.data[resourceId], ...response.data]
 
-    // Update hasNextPage based on the API response
     series.hasNextPage[resourceId] = !!response.links.next
   }
 }
@@ -182,14 +177,11 @@ async function fetchSeriesData() {
     const results = (await Promise.allSettled(fetchPromises))
       .filter(r => r.status === 'fulfilled')
       .map(r => r.value)
-    // Transform data into echarts format
     series.data = Object.fromEntries(results.map(result => [
       result.id,
       result.data.data,
     ]))
 
-    // Reset page tracking for each series to 0 (page 1 has been loaded)
-    // Also initialize hasNextPage based on the response
     for (const result of results) {
       const serie = props.chart.series.find(s => s.resource_id === result.id)
       if (serie) {
@@ -198,8 +190,6 @@ async function fetchSeriesData() {
       }
     }
 
-    // If loadAllPages is true, fetch the next page (loadMorePages can be called again for more)
-    // This allows progressive loading - first page loads quickly, then more can be loaded on demand
     if (props.loadAllPages) {
       await loadMorePages()
     }

From d62de9c1e12251cf1563e372ea10e4c441c6731a Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 24 Apr 2026 13:55:13 +0200
Subject: [PATCH 119/121] feat: remove vue-echarts dependency

---
 datagouv-components/package.json              |  1 -
 .../src/components/Chart/ChartViewer.vue      | 52 ++++++++++++++++---
 pnpm-lock.yaml                                | 16 +-----
 3 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/datagouv-components/package.json b/datagouv-components/package.json
index 78d6f670b..d17ccd248 100644
--- a/datagouv-components/package.json
+++ b/datagouv-components/package.json
@@ -70,7 +70,6 @@
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vue-content-loader": "^2.0.1",
-    "vue-echarts": "^8.0.1",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",
diff --git a/datagouv-components/src/components/Chart/ChartViewer.vue b/datagouv-components/src/components/Chart/ChartViewer.vue
index 11a7a88fa..239e72ab8 100644
--- a/datagouv-components/src/components/Chart/ChartViewer.vue
+++ b/datagouv-components/src/components/Chart/ChartViewer.vue
@@ -1,8 +1,7 @@
 <template>
-  <VChart
+  <div
+    ref="chartContainer"
     class="w-full min-h-96"
-    :option="echartsOption"
-    autoresize
   />
 </template>
 
@@ -11,8 +10,8 @@ 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 VChart from 'vue-echarts'
-import { computed } from 'vue'
+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 { useTranslation } from '../../composables/useTranslation'
@@ -28,6 +27,8 @@ const props = defineProps<{
 }>()
 
 const { locale } = useTranslation()
+const chartContainer = ref<HTMLElement | null>(null)
+const echartsInstance = ref<EChartsType | null>(null)
 
 function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
   if (!xAxis) return 'category'
@@ -66,7 +67,6 @@ const echartsOption = computed(() => {
         const valA = a[sortKey]
         const valB = b[sortKey]
 
-        // Handle null/undefined values - place them at the front
         if (valA === null || valA === undefined) return sortDirection === 'asc' ? -1 : 1
         if (valB === null || valB === undefined) return sortDirection === 'asc' ? 1 : -1
         if (valA === null && valB === null) return 0
@@ -183,4 +183,44 @@ const echartsOption = computed(() => {
     | LineSeriesOption
   >
 })
+
+onMounted(() => {
+  if (chartContainer.value) {
+    echartsInstance.value = init(chartContainer.value)
+    updateChart()
+  }
+})
+
+onUnmounted(() => {
+  if (echartsInstance.value) {
+    echartsInstance.value.dispose()
+    echartsInstance.value = null
+  }
+})
+
+watch(() => props.chart, updateChart, { deep: true })
+
+watch(() => props.series, updateChart, { deep: true })
+
+function updateChart() {
+  if (!echartsInstance.value) return
+  const option = echartsOption.value
+  if (option) {
+    echartsInstance.value.setOption(option, { notMerge: true })
+  }
+}
+
+const handleResize = () => {
+  if (echartsInstance.value) {
+    echartsInstance.value.resize()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
 </script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1e09be85..1b224acc4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -314,9 +314,6 @@ importers:
       vue-content-loader:
         specifier: ^2.0.1
         version: 2.0.1(vue@3.5.31(typescript@5.9.2))
-      vue-echarts:
-        specifier: ^8.0.1
-        version: 8.0.1(echarts@6.0.0)(vue@3.5.31(typescript@5.9.2))
       vue-sonner:
         specifier: ^2.0.9
         version: 2.0.9(@nuxt/kit@4.4.2(magicast@0.5.2))(@nuxt/schema@4.4.2)(nuxt@4.2.2(@parcel/watcher@2.5.6)(@types/node@22.18.7)(@vue/compiler-sfc@3.5.31)(cac@6.7.14)(db0@0.3.4)(eslint@9.36.0(jiti@2.6.1))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(rollup@4.60.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(typescript@5.9.2)(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.1)(lightningcss@1.32.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(yaml@2.8.3))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.3))
@@ -9049,12 +9046,6 @@ packages:
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
-  vue-echarts@8.0.1:
-    resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
-    peerDependencies:
-      echarts: ^6.0.0
-      vue: ^3.3.0
-
   vue-eslint-parser@10.2.0:
     resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -11126,7 +11117,7 @@ snapshots:
       '@nuxt/devtools-wizard': 3.2.4
       '@nuxt/kit': 4.4.2(magicast@0.5.2)
       '@vue/devtools-core': 8.1.1(vue@3.5.31(typescript@5.9.2))
-      '@vue/devtools-kit': 8.1.0
+      '@vue/devtools-kit': 8.1.1
       birpc: 4.0.0
       consola: 3.4.2
       destr: 2.0.5
@@ -20084,11 +20075,6 @@ snapshots:
 
   vue-devtools-stub@0.1.0: {}
 
-  vue-echarts@8.0.1(echarts@6.0.0)(vue@3.5.31(typescript@5.9.2)):
-    dependencies:
-      echarts: 6.0.0
-      vue: 3.5.31(typescript@5.9.2)
-
   vue-eslint-parser@10.2.0(eslint@9.36.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3

From 416ee53a2fb3169e27207b03badb1d12309ef840 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 24 Apr 2026 14:41:34 +0200
Subject: [PATCH 120/121] chore: more RAM for build

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dde75202f..b9d2b9583 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "lint-staged": "lint-staged",
-    "build": "nuxt build",
+    "build": "NODE_OPTIONS=--max-old-space-size=8192 nuxt build",
     "typecheck": "nuxt typecheck",
     "dev": "nuxt dev",
     "generate": "nuxt generate",

From d0e99f48e7635ed70acc465da8b2d7b9456d3519 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 24 Apr 2026 15:23:13 +0200
Subject: [PATCH 121/121] fix: select graph unwanted changes

---
 components/Charts/ChartConfigurator.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/Charts/ChartConfigurator.vue b/components/Charts/ChartConfigurator.vue
index a0b5944c5..4c05f73df 100644
--- a/components/Charts/ChartConfigurator.vue
+++ b/components/Charts/ChartConfigurator.vue
@@ -58,12 +58,18 @@
               v-model="selectedChartId"
               class="flex-1 fr-select"
             >
+              <option
+                value=""
+                disabled
+              >
+                {{ $t('Sélectionnez un graphique') }}
+              </option>
               <option
                 v-for="column in charts?.data"
                 :key="column.id"
-                :value="column"
+                :value="column.id"
               >
-                {{ column }}
+                {{ column.title }}
               </option>
             </select>
             <button