From 634ab937de970fe0f4c7f7cbc52979cbb11c6ace Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 24 Feb 2026 12:39:15 +0100
Subject: [PATCH 01/23] fix(resources): fix wrong checks and refactor to
 provide a single function as source of truth

---
 components/Datasets/FileEditModal.vue         |  8 ++++---
 .../ResourceAccordion/ResourceAccordion.vue   | 10 +++------
 .../src/composables/useHasTabularData.ts      | 22 +++++++++++++++++++
 .../composables/useResourceCapabilities.ts    |  7 +++---
 datagouv-components/src/main.ts               |  1 +
 5 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 datagouv-components/src/composables/useHasTabularData.ts

diff --git a/components/Datasets/FileEditModal.vue b/components/Datasets/FileEditModal.vue
index 7532bfd2b..2dd8b0129 100644
--- a/components/Datasets/FileEditModal.vue
+++ b/components/Datasets/FileEditModal.vue
@@ -192,7 +192,7 @@
 </template>
 
 <script setup lang="ts">
-import { BannerAction, BrandedButton, isCommunityResource } from '@datagouv/components-next'
+import { BannerAction, BrandedButton, isCommunityResource, useHasTabularData } from '@datagouv/components-next'
 import type { Dataset, DatasetV2, Resource } from '@datagouv/components-next'
 import { cloneDeep } from 'lodash-es'
 import { RiDeleteBin6Line, RiPencilLine } from '@remixicon/vue'
@@ -228,10 +228,12 @@ 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
 const hasTabularApi = computed(() => {
-  return props.resource.resource?.extras?.['analysis:parsing:parsing_table']
-    && !props.resource.resource?.extras?.['analysis:parsing:error']
+  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 b22148f7d..4a532e28a 100644
--- a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
+++ b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
@@ -390,6 +390,7 @@ import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../
 import BrandedButton from '../BrandedButton.vue'
 import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
 import { useTranslation } from '../../composables/useTranslation'
+import { useHasTabularData } from '../../composables/useHasTabularData'
 import Metadata from './Metadata.vue'
 import SchemaBadge from './SchemaBadge.vue'
 import ResourceIcon from './ResourceIcon.vue'
@@ -426,6 +427,7 @@ const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue
 
 const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
+const { hasTabularData: checkTabularData } = useHasTabularData()
 
 const hasPreview = computed(() => {
   // For JSON, PDF, and XML files, show preview.
@@ -435,13 +437,7 @@ const hasPreview = computed(() => {
   return format === 'json' || format === 'pdf' || format === 'xml'
 })
 
-const hasTabularData = computed(() => {
-  // Determines if we should show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure)
-  return config.tabularApiUrl
-    && props.resource.extras['analysis:parsing:parsing_table']
-    && !props.resource.extras['analysis:parsing:error']
-    && (config.tabularAllowRemote || props.resource.filetype === 'file')
-})
+const hasTabularData = computed(() => checkTabularData(props.resource))
 
 const hasPmtiles = computed(() => {
   return props.resource.extras['analysis:parsing:pmtiles_url'] || props.resource.format === 'pmtiles'
diff --git a/datagouv-components/src/composables/useHasTabularData.ts b/datagouv-components/src/composables/useHasTabularData.ts
new file mode 100644
index 000000000..107a720ac
--- /dev/null
+++ b/datagouv-components/src/composables/useHasTabularData.ts
@@ -0,0 +1,22 @@
+import { useComponentsConfig } from '../config'
+
+/**
+ * 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 {
+    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 e0c294820..1597de68d 100644
--- a/datagouv-components/src/composables/useResourceCapabilities.ts
+++ b/datagouv-components/src/composables/useResourceCapabilities.ts
@@ -1,6 +1,7 @@
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from './useTranslation'
+import { useHasTabularData } from './useHasTabularData'
 import { detectOgcService } from '../functions/resources'
 import { isOrganizationCertified } from '../functions/organizations'
 import type { Resource } from '../types/resources'
@@ -15,6 +16,7 @@ export function useResourceCapabilities(
 ) {
   const config = useComponentsConfig()
   const { t } = useTranslation()
+  const { hasTabularData: hasTabularDataFromComposable } = useHasTabularData()
 
   const hasPreview = computed(() => {
     const format = toValue(resource).format?.toLowerCase()
@@ -23,10 +25,7 @@ export function useResourceCapabilities(
 
   const hasTabularData = computed(() => {
     const r = toValue(resource)
-    return config.tabularApiUrl
-      && r.extras['analysis:parsing:parsing_table']
-      && !r.extras['analysis:parsing:error']
-      && (config.tabularAllowRemote || r.filetype === 'file')
+    return hasTabularDataFromComposable(r)
   })
 
   const hasPmtiles = computed(() => {
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 06b800670..727d510f4 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -101,6 +101,7 @@ export * from './composables/useActiveDescendant'
 export * from './composables/useMetrics'
 export * from './composables/useReuseType'
 export * from './composables/useTranslation'
+export * from './composables/useHasTabularData'
 
 export * from './functions/activities'
 export * from './functions/datasets'

From 634899d29b0336b75b8889ee62710a7fe1baa2da 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 02/23] 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 7f818811a70440356657459fcc9b49a7253b5b11 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 03/23] 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 1597de68d..aedce9dd2 100644
--- a/datagouv-components/src/composables/useResourceCapabilities.ts
+++ b/datagouv-components/src/composables/useResourceCapabilities.ts
@@ -16,7 +16,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()
@@ -25,7 +25,7 @@ export function useResourceCapabilities(
 
   const hasTabularData = computed(() => {
     const r = toValue(resource)
-    return hasTabularDataFromComposable(r)
+    return checkTabularData(r)
   })
 
   const hasPmtiles = computed(() => {

From 114c3e4a89d8305ac1410ad90a7faecef76b74a1 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Fri, 20 Feb 2026 14:10:58 +0100
Subject: [PATCH 04/23] wip: add chart visualization types, viewer and
 configurator

---
 datagouv-components/package.json              |   4 +-
 .../src/components/ChartViewer.vue            | 113 +++++++
 datagouv-components/src/main.ts               |  16 +
 .../src/types/visualizations.ts               |  87 ++++++
 design-system/ChartConfigurator.vue           | 293 ++++++++++++++++++
 nuxt.config.ts                                |   8 +-
 pages/design/chart.vue                        |  22 ++
 pnpm-lock.yaml                                |  37 +++
 8 files changed, 575 insertions(+), 5 deletions(-)
 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 f86f6e71b..bd822160a 100644
--- a/datagouv-components/package.json
+++ b/datagouv-components/package.json
@@ -37,14 +37,15 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
-    "@types/leaflet": "^1.9.17",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
     "@types/hast": "^3.0.4",
+    "@types/leaflet": "^1.9.17",
     "@vueuse/core": "^13.1.0",
     "@vueuse/router": "^13.1.0",
     "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 +71,7 @@
     "unist-util-visit": "^5.0.0",
     "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
+    "vue-echarts": "^8.0.1",
     "vue-router": "^4.5.0",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
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 727d510f4..479204a35 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, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions } 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 1831ed132..0105298af 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -56,8 +56,8 @@ export default defineNuxtConfig({
 
       title: 'data.gouv.fr',
       description: 'Plateforme ouverte des données publiques françaises : téléchargez, partagez et réutilisez les données ouvertes de l\'État et des collectivités',
-      apiBase: 'http://dev.local:7000',
-      frontBase: 'http://dev.local:3000',
+      apiBase: 'http://localhost:7000',
+      frontBase: 'http://localhost:3000',
       metricsApi: 'https://metric-api.data.gouv.fr',
       metricsSince: '2022-07-01',
       devApiKey: undefined,
@@ -215,7 +215,7 @@ export default defineNuxtConfig({
 
   devServer: {
     port: 3000,
-    host: 'dev.local',
+    host: 'localhost',
   },
 
   features: {
@@ -265,7 +265,7 @@ export default defineNuxtConfig({
     },
     plugins: [toml(), tailwindcss()],
     server: {
-      allowedHosts: ['dev.local'],
+      allowedHosts: ['localhost'],
     },
   },
 
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 216c9d6c7..68fe944b3 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
@@ -312,6 +315,9 @@ importers:
       vue-content-loader:
         specifier: ^2.0.1
         version: 2.0.1(vue@3.5.22(typescript@5.9.2))
+      vue-echarts:
+        specifier: ^8.0.1
+        version: 8.0.1(echarts@6.0.0)(vue@3.5.22(typescript@5.9.2))
       vue-router:
         specifier: ^4.5.0
         version: 4.5.1(vue@3.5.22(typescript@5.9.2))
@@ -3740,6 +3746,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==}
 
@@ -6855,6 +6864,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==}
 
@@ -7297,6 +7309,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}
@@ -7517,6 +7535,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==}
 
@@ -11574,6 +11595,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.227: {}
@@ -15380,6 +15406,8 @@ snapshots:
 
   tslib@1.14.1: {}
 
+  tslib@2.3.0: {}
+
   tslib@2.4.0: {}
 
   tslib@2.8.1: {}
@@ -15912,6 +15940,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
@@ -16101,6 +16134,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 3f4078e54cc27154602f90116fdd039d26c5095f 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 05/23] 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 7c28a6e1f..3220c4c86 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 831e4cfb24708c71a03e7ee3e701c2e86efa7c79 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Mon, 23 Feb 2026 16:25:34 +0100
Subject: [PATCH 06/23] 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 +-
 pnpm-lock.yaml                                |   5 +-
 7 files changed, 295 insertions(+), 119 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>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 68fe944b3..f0ea0cdb7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -323,7 +323,7 @@ importers:
         version: 4.5.1(vue@3.5.22(typescript@5.9.2))
       vue-sonner:
         specifier: ^2.0.9
-        version: 2.0.9(@nuxt/kit@4.1.2(magicast@0.3.5))(nuxt@3.16.2(@parcel/watcher@2.5.1)(@types/node@20.19.18)(db0@0.3.2)(eslint@9.36.0(jiti@2.6.1))(ioredis@5.8.0)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.7(@types/node@20.19.18)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.1))
+        version: 2.0.9(@nuxt/kit@4.1.2(magicast@0.3.5))
       vue3-json-viewer:
         specifier: ^2.4.1
         version: 2.4.1(vue@3.5.22(typescript@5.9.2))
@@ -15962,10 +15962,9 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.2)
 
-  vue-sonner@2.0.9(@nuxt/kit@4.1.2(magicast@0.3.5))(nuxt@3.16.2(@parcel/watcher@2.5.1)(@types/node@20.19.18)(db0@0.3.2)(eslint@9.36.0(jiti@2.6.1))(ioredis@5.8.0)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.7(@types/node@20.19.18)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.1)):
+  vue-sonner@2.0.9(@nuxt/kit@4.1.2(magicast@0.3.5)):
     optionalDependencies:
       '@nuxt/kit': 4.1.2(magicast@0.3.5)
-      nuxt: 3.16.2(@parcel/watcher@2.5.1)(@types/node@20.19.18)(db0@0.3.2)(eslint@9.36.0(jiti@2.6.1))(ioredis@5.8.0)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.7(@types/node@20.19.18)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.1)
 
   vue-template-compiler@2.7.16:
     dependencies:

From d84c3eee4d2dbd81564a564caf2a01bd83ad0722 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 07/23] 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 1013bc20d1758b6b37f7f9d5f496bda71a3b6a9c 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 08/23] 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 9f70092cec13c8cf822073053924545fc78131cf 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 09/23] 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 66eff7e6164972555a394c0bcf29c66982934e0d 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 10/23] 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 4a532e28a..20f11b71b 100644
--- a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
+++ b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
@@ -427,7 +427,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 aedce9dd2..8fef7644c 100644
--- a/datagouv-components/src/composables/useResourceCapabilities.ts
+++ b/datagouv-components/src/composables/useResourceCapabilities.ts
@@ -16,7 +16,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 315de1eb9e97dd80c908c2c7f2d6e79520146b7c 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 11/23] 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 688140031dcd5be26694bebd83e9477253449e6c 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 12/23] 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 479204a35..dccecf12f 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -120,6 +120,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 2c74604bb417310315ac0d283e75304832849450 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 13/23] 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 800646679884d71e919183d620d94bd784828096 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 14/23] 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 846730389fffd007036cc5f615b416fa6ea3d94e 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 15/23] 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 c243f448bfc2ffaaee21c6695f9ed7b64225b874 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 16/23] 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 0105298af..1aff1f908 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -66,7 +66,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 a74773a2951c14bc5ea179bc214292094859347e 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 17/23] 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 ebea8c715aa627330f64a116f98fba32ca15f366 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 18/23] 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 3f015076e60f76b2c06387bd822f7a9426117a65 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 19/23] 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 de61eb966823d16f504c1460ea453997a43dc480 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 20/23] 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 ce6cc1f1fc80126b3f62ad5281a72142696d9abf 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 21/23] 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 dccecf12f..e14fbf383 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -99,6 +99,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 d3f5586de185e29d927357c4c6157ce1b2bf71d5 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 22/23] 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 cec25e60b8be17a1f0ab667744186bc6aa1eac06 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 10 Mar 2026 16:28:02 +0100
Subject: [PATCH 23/23] 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                                |   8 +-
 pages/design/chart.vue                        |  35 ++-
 utils/charts.ts                               |  55 +++++
 7 files changed, 198 insertions(+), 162 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 e14fbf383..4eaa85c29 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, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions } 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 1aff1f908..d3a6d0fbd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -56,8 +56,8 @@ export default defineNuxtConfig({
 
       title: 'data.gouv.fr',
       description: 'Plateforme ouverte des données publiques françaises : téléchargez, partagez et réutilisez les données ouvertes de l\'État et des collectivités',
-      apiBase: 'http://localhost:7000',
-      frontBase: 'http://localhost:3000',
+      apiBase: 'http://dev.local:7000',
+      frontBase: 'http://dev.local:3000',
       metricsApi: 'https://metric-api.data.gouv.fr',
       metricsSince: '2022-07-01',
       devApiKey: undefined,
@@ -215,7 +215,7 @@ export default defineNuxtConfig({
 
   devServer: {
     port: 3000,
-    host: 'localhost',
+    host: 'dev.local',
   },
 
   features: {
@@ -265,7 +265,7 @@ export default defineNuxtConfig({
     },
     plugins: [toml(), tailwindcss()],
     server: {
-      allowedHosts: ['localhost'],
+      allowedHosts: ['dev.local'],
     },
   },
 
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,
+  }
+}