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

---
 .../src/components/Form/Listbox.vue           |  74 +++++++
 datagouv-components/src/main.ts               |   2 +
 pages/design.vue                              |   7 +-
 pages/design/listbox.vue                      | 186 ++++++++++++++++++
 4 files changed, 268 insertions(+), 1 deletion(-)
 create mode 100644 datagouv-components/src/components/Form/Listbox.vue
 create mode 100644 pages/design/listbox.vue

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
new file mode 100644
index 000000000..a8f06127e
--- /dev/null
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -0,0 +1,74 @@
+<template>
+    <Listbox v-slot="{ activeOption }" v-model="model">
+      <div class="relative">
+        <div ref="floatingReference"
+            class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+            <ListboxButton class="input shadow-input">
+                <slot name="button">
+                    {{ model ? displayValue(model) : '' }}
+                </slot>
+            </ListboxButton>
+        </div>
+
+        <ListboxOptions ref="popover" :style="floatingStyles"
+            class="z-10 mt-1 absolute max-h-60 min-w-80 w-full overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm pl-0">
+            <ListboxOption v-for="option in options" :key="getOptionId(toValue(option))" v-slot="{selected}"
+                           as="template" :value="option">
+                <li class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
+                    :class="{
+                                'bg-gray-lower': isActive(activeOption, option),
+                                'pl-2': selected,
+                                'pl-6': !selected,
+                              }">
+                    <div class="flex items-center justify-center aspect-square">
+                        <RiCheckLine v-if="selected" class="size-4 text-new-primary" />
+                    </div>
+                    <slot
+                        name="option"
+                        v-bind="{ option, active: isActive(activeOption, option) }"
+                    >
+                        {{ displayValue(option) }}
+                    </slot>
+                </li>
+            </ListboxOption>
+        </ListboxOptions>
+      </div>
+    </Listbox>
+</template>
+
+<script setup lang="ts" generic="T extends string | number | object">
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { toValue, useTemplateRef } from 'vue'
+import { RiCheckLine } from '@remixicon/vue';
+
+const props = withDefaults(defineProps<{
+    options?: Array<T>
+    getOptionId?: (option: T) => string | number
+    displayValue: (option: T) => string
+}>(), {
+    getOptionId: (option: T): string | number => {
+        if (typeof option === 'string') return option
+        if (typeof option === 'number') return option
+        if (typeof option === 'object' && 'id' in option) return option.id as string
+
+        throw new Error('Please set getOptionId()')
+    },
+})
+
+const model = defineModel<T | null>()
+
+const referenceRef = useTemplateRef('floatingReference')
+const floatingRef = useTemplateRef<InstanceType<typeof ListboxOptions>>('popover')
+const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+    middleware: [autoPlacement({
+        allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+        crossAxis: true,
+    })],
+    whileElementsMounted: autoUpdate,
+})
+
+function isActive(activeOption: T, currentOption: T) {
+    return activeOption ? props.getOptionId(activeOption) === props.getOptionId(currentOption) : false
+}
+</script>
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 47abe01a2..e777147f1 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -94,6 +94,7 @@ import GlobalSearch from './components/Search/GlobalSearch.vue'
 import SearchInput from './components/Search/SearchInput.vue'
 import SearchableSelect from './components/Form/SearchableSelect.vue'
 import SelectGroup from './components/Form/SelectGroup.vue'
+import Listbox from './components/Form/Listbox.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
@@ -318,4 +319,5 @@ export {
   SearchInput,
   SearchableSelect,
   SelectGroup,
+  Listbox,
 }
diff --git a/pages/design.vue b/pages/design.vue
index 76a413626..271352da5 100644
--- a/pages/design.vue
+++ b/pages/design.vue
@@ -68,6 +68,11 @@
           :label="$t('Traductions')"
           to="/design/translations"
         />
+        <AdminSidebarLink
+          :icon="RiListCheck"
+          :label="$t('Listbox')"
+          to="/design/listbox"
+        />
       </ul>
     </Sidemenu>
     <div class="w-8/12 space-y-8 px-8 bg-gray-50 pb-32">
@@ -77,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { RiEyeLine, RiExternalLinkLine, RiFileSearchLine, RiIdCardLine, RiListView, RiRadioButtonLine, RiSearch2Line, RiSearchEyeLine, RiTranslate, RiUserSearchLine } from '@remixicon/vue'
+import { RiEyeLine, RiExternalLinkLine, RiFileSearchLine, RiIdCardLine, RiListView, RiRadioButtonLine, RiSearch2Line, RiSearchEyeLine, RiTranslate, RiUserSearchLine, RiListCheck } from '@remixicon/vue'
 import AdminSidebarLink from '~/components/AdminSidebar/AdminSidebarLink/AdminSidebarLink.vue'
 import LogoOnly from '~/components/LogoOnly.vue'
 import Sidemenu from '~/components/Sidemenu/Sidemenu.global.vue'
diff --git a/pages/design/listbox.vue b/pages/design/listbox.vue
new file mode 100644
index 000000000..970001316
--- /dev/null
+++ b/pages/design/listbox.vue
@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <Breadcrumb>
+      <BreadcrumbItem to="/design">
+        {{ $t('Système de design') }}
+      </BreadcrumbItem>
+      <BreadcrumbItem to="/design/listbox">
+        {{ $t('Listbox') }}
+      </BreadcrumbItem>
+    </Breadcrumb>
+    <h1 class="mb-3">
+      Listbox
+    </h1>
+
+    <div class="space-y-8 py-8">
+      <section>
+        <h2 class="!mb-3">
+          Basic usage
+        </h2>
+        <p class="mb-4 text-gray-600">
+          Simple listbox with string options.
+        </p>
+        <div class="w-80">
+          <Listbox
+            v-model="selectedCondition"
+            :options="conditions"
+            :display-value="(option: string) => option"
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 class="!mb-3">
+          With object options
+        </h2>
+        <p class="mb-4 text-gray-600">
+          Listbox with object options using custom display value.
+        </p>
+        <div class="w-80">
+          <Listbox
+            v-model="selectedFruit"
+            :options="fruits"
+            :display-value="(option: Fruit) => option.label"
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 class="!mb-3">
+          With custom option slot
+        </h2>
+        <p class="mb-4 text-gray-600">
+          Listbox with custom option rendering using the #option slot.
+        </p>
+        <div class="w-80">
+          <Listbox
+            v-model="selectedStatus"
+            :options="statuses"
+            :display-value="(option: Status) => option.label"
+          >
+            <template #option="{ option, active }">
+              <span
+                class="size-2 rounded-full"
+                :class="{
+                  'bg-gray-400': option.id === 'draft',
+                  'bg-yellow-400': option.id === 'review',
+                  'bg-green-500': option.id === 'published',
+                }"
+              />
+              {{ option.label }}
+              <span v-if="active" class="text-xs text-gray-500">(active)</span>
+            </template>
+          </Listbox>
+        </div>
+      </section>
+
+      <section>
+        <h2 class="!mb-3">
+          With button and option slots
+        </h2>
+        <p class="mb-4 text-gray-600">
+          Listbox using both #button and #option slots for full customization.
+        </p>
+        <div class="w-80">
+          <Listbox
+            v-model="selectedPriority"
+            :options="priorities"
+            :display-value="(option: Priority) => option.label"
+          >
+            <template #button>
+              <span class="flex items-center gap-2">
+                <span
+                  class="size-3 rounded-full"
+                  :class="{
+                    'bg-red-500': selectedPriority?.id === 'high',
+                    'bg-yellow-500': selectedPriority?.id === 'medium',
+                    'bg-green-500': selectedPriority?.id === 'low',
+                  }"
+                />
+                {{ selectedPriority?.label || 'Select priority' }}
+              </span>
+            </template>
+            <template #option="{ option, active }">
+              <span
+                class="size-3 rounded-full"
+                :class="{
+                  'bg-red-500': option.id === 'high',
+                  'bg-yellow-500': option.id === 'medium',
+                  'bg-green-500': option.id === 'low',
+                }"
+              />
+              {{ option.label }}
+              <span v-if="active" class="ml-auto text-xs text-gray-500">(active)</span>
+            </template>
+          </Listbox>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Listbox } from '@datagouv/components-next'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+
+interface Fruit {
+  id: string
+  label: string
+}
+
+interface Color {
+  id: string
+  name: string
+  hex: string
+}
+
+interface Status {
+  id: string
+  label: string
+}
+
+interface Priority {
+  id: string
+  label: string
+}
+
+const conditions = ['equal', 'greater', 'less', 'contains', 'starts_with']
+
+const selectedCondition = ref<string | null>('equal')
+
+const fruits: Fruit[] = [
+  { id: 'apple', label: '🍎 Apple' },
+  { id: 'banana', label: '🍌 Banana' },
+  { id: 'orange', label: '🍊 Orange' },
+  { id: 'grape', label: '🍇 Grape' },
+  { id: 'strawberry', label: '🍓 Strawberry' },
+]
+
+const selectedFruit = ref<Fruit | null>(fruits[0])
+
+const colors: Color[] = [
+  { id: 'red', name: 'Red', hex: '#ef4444' },
+  { id: 'green', name: 'Green', hex: '#22c55e' },
+  { id: 'blue', name: 'Blue', hex: '#3b82f6' },
+  { id: 'yellow', name: 'Yellow', hex: '#eab308' },
+  { id: 'purple', name: 'Purple', hex: '#a855f7' },
+]
+
+const selectedColor = ref<Color | null>(colors[0])
+
+const statuses: Status[] = [
+  { id: 'draft', label: 'Draft' },
+  { id: 'review', label: 'In Review' },
+  { id: 'published', label: 'Published' },
+]
+
+const selectedStatus = ref<Status | null>(statuses[0])
+
+const priorities: Priority[] = [
+  { id: 'high', label: 'High' },
+  { id: 'medium', label: 'Medium' },
+  { id: 'low', label: 'Low' },
+]
+
+const selectedPriority = ref<Priority | null>(priorities[0])
+</script>

From a46f4ded33d76cf78cf0f37e1243ff4aa60e27d7 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 1 Apr 2026 15:39:36 +0200
Subject: [PATCH 2/7] chore: lint

---
 .../src/components/Form/Listbox.vue           | 118 ++++++++++--------
 pages/design/listbox.vue                      |  12 +-
 2 files changed, 76 insertions(+), 54 deletions(-)

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index a8f06127e..2a2e96529 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -1,59 +1,77 @@
 <template>
-    <Listbox v-slot="{ activeOption }" v-model="model">
-      <div class="relative">
-        <div ref="floatingReference"
-            class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-            <ListboxButton class="input shadow-input">
-                <slot name="button">
-                    {{ model ? displayValue(model) : '' }}
-                </slot>
-            </ListboxButton>
-        </div>
-
-        <ListboxOptions ref="popover" :style="floatingStyles"
-            class="z-10 mt-1 absolute max-h-60 min-w-80 w-full overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm pl-0">
-            <ListboxOption v-for="option in options" :key="getOptionId(toValue(option))" v-slot="{selected}"
-                           as="template" :value="option">
-                <li class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
-                    :class="{
-                                'bg-gray-lower': isActive(activeOption, option),
-                                'pl-2': selected,
-                                'pl-6': !selected,
-                              }">
-                    <div class="flex items-center justify-center aspect-square">
-                        <RiCheckLine v-if="selected" class="size-4 text-new-primary" />
-                    </div>
-                    <slot
-                        name="option"
-                        v-bind="{ option, active: isActive(activeOption, option) }"
-                    >
-                        {{ displayValue(option) }}
-                    </slot>
-                </li>
-            </ListboxOption>
-        </ListboxOptions>
+  <Listbox
+    v-slot="{ activeOption }"
+    v-model="model"
+  >
+    <div class="relative">
+      <div
+        ref="floatingReference"
+        class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+      >
+        <ListboxButton class="input shadow-input">
+          <slot name="button">
+            {{ model ? displayValue(model) : '' }}
+          </slot>
+        </ListboxButton>
       </div>
-    </Listbox>
+
+      <ListboxOptions
+        ref="popover"
+        :style="floatingStyles"
+        class="z-10 mt-1 absolute max-h-60 min-w-80 w-full overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm pl-0"
+      >
+        <ListboxOption
+          v-for="option in options"
+          :key="getOptionId(toValue(option))"
+          v-slot="{ selected }"
+          as="template"
+          :value="option"
+        >
+          <li
+            class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
+            :class="{
+              'bg-gray-lower': isActive(activeOption, option),
+              'pl-2': selected,
+              'pl-6': !selected,
+            }"
+          >
+            <div class="flex items-center justify-center aspect-square">
+              <RiCheckLine
+                v-if="selected"
+                class="size-4 text-new-primary"
+              />
+            </div>
+            <slot
+              name="option"
+              v-bind="{ option, active: isActive(activeOption, option) }"
+            >
+              {{ displayValue(option) }}
+            </slot>
+          </li>
+        </ListboxOption>
+      </ListboxOptions>
+    </div>
+  </Listbox>
 </template>
 
 <script setup lang="ts" generic="T extends string | number | object">
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
 import { toValue, useTemplateRef } from 'vue'
-import { RiCheckLine } from '@remixicon/vue';
+import { RiCheckLine } from '@remixicon/vue'
 
 const props = withDefaults(defineProps<{
-    options?: Array<T>
-    getOptionId?: (option: T) => string | number
-    displayValue: (option: T) => string
+  options?: Array<T>
+  getOptionId?: (option: T) => string | number
+  displayValue: (option: T) => string
 }>(), {
-    getOptionId: (option: T): string | number => {
-        if (typeof option === 'string') return option
-        if (typeof option === 'number') return option
-        if (typeof option === 'object' && 'id' in option) return option.id as string
+  getOptionId: (option: T): string | number => {
+    if (typeof option === 'string') return option
+    if (typeof option === 'number') return option
+    if (typeof option === 'object' && 'id' in option) return option.id as string
 
-        throw new Error('Please set getOptionId()')
-    },
+    throw new Error('Please set getOptionId()')
+  },
 })
 
 const model = defineModel<T | null>()
@@ -61,14 +79,14 @@ const model = defineModel<T | null>()
 const referenceRef = useTemplateRef('floatingReference')
 const floatingRef = useTemplateRef<InstanceType<typeof ListboxOptions>>('popover')
 const { floatingStyles } = useFloating(referenceRef, floatingRef, {
-    middleware: [autoPlacement({
-        allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
-        crossAxis: true,
-    })],
-    whileElementsMounted: autoUpdate,
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+    crossAxis: true,
+  })],
+  whileElementsMounted: autoUpdate,
 })
 
 function isActive(activeOption: T, currentOption: T) {
-    return activeOption ? props.getOptionId(activeOption) === props.getOptionId(currentOption) : false
+  return activeOption ? props.getOptionId(activeOption) === props.getOptionId(currentOption) : false
 }
 </script>
diff --git a/pages/design/listbox.vue b/pages/design/listbox.vue
index 970001316..e98b8ebea 100644
--- a/pages/design/listbox.vue
+++ b/pages/design/listbox.vue
@@ -68,7 +68,10 @@
                 }"
               />
               {{ option.label }}
-              <span v-if="active" class="text-xs text-gray-500">(active)</span>
+              <span
+                v-if="active"
+                class="text-xs text-gray-500"
+              >(active)</span>
             </template>
           </Listbox>
         </div>
@@ -110,7 +113,10 @@
                 }"
               />
               {{ option.label }}
-              <span v-if="active" class="ml-auto text-xs text-gray-500">(active)</span>
+              <span
+                v-if="active"
+                class="ml-auto text-xs text-gray-500"
+              >(active)</span>
             </template>
           </Listbox>
         </div>
@@ -166,8 +172,6 @@ const colors: Color[] = [
   { id: 'purple', name: 'Purple', hex: '#a855f7' },
 ]
 
-const selectedColor = ref<Color | null>(colors[0])
-
 const statuses: Status[] = [
   { id: 'draft', label: 'Draft' },
   { id: 'review', label: 'In Review' },

From e4088434fb9d0c6d9961647eb16fbed851bcea8d Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 1 Apr 2026 15:43:41 +0200
Subject: [PATCH 3/7] chore: linter

---
 pages/design/listbox.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/pages/design/listbox.vue b/pages/design/listbox.vue
index e98b8ebea..6ee329f60 100644
--- a/pages/design/listbox.vue
+++ b/pages/design/listbox.vue
@@ -164,14 +164,6 @@ const fruits: Fruit[] = [
 
 const selectedFruit = ref<Fruit | null>(fruits[0])
 
-const colors: Color[] = [
-  { id: 'red', name: 'Red', hex: '#ef4444' },
-  { id: 'green', name: 'Green', hex: '#22c55e' },
-  { id: 'blue', name: 'Blue', hex: '#3b82f6' },
-  { id: 'yellow', name: 'Yellow', hex: '#eab308' },
-  { id: 'purple', name: 'Purple', hex: '#a855f7' },
-]
-
 const statuses: Status[] = [
   { id: 'draft', label: 'Draft' },
   { id: 'review', label: 'In Review' },

From 6a808d0ec4ade017a6c29e17408c6b7e0fd1e86f Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Wed, 1 Apr 2026 15:46:09 +0200
Subject: [PATCH 4/7] chore: lint

---
 pages/design/listbox.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/pages/design/listbox.vue b/pages/design/listbox.vue
index 6ee329f60..6f9b87022 100644
--- a/pages/design/listbox.vue
+++ b/pages/design/listbox.vue
@@ -129,23 +129,17 @@
 import { Listbox } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 
-interface Fruit {
+type Fruit = {
   id: string
   label: string
 }
 
-interface Color {
-  id: string
-  name: string
-  hex: string
-}
-
-interface Status {
+type Status = {
   id: string
   label: string
 }
 
-interface Priority {
+type Priority = {
   id: string
   label: string
 }

From 2d7329c2eaedf0a0c8fb1d8b65bd9a059d0f9d1c Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 2 Apr 2026 08:58:16 +0200
Subject: [PATCH 5/7] fix(listbox) layout

---
 .../src/components/Form/Listbox.vue           |  11 +-
 design-system/ChartConfigurator.vue           | 567 ++++++++++++++++++
 2 files changed, 574 insertions(+), 4 deletions(-)
 create mode 100644 design-system/ChartConfigurator.vue

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index 2a2e96529..b8ff1ef36 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -8,9 +8,12 @@
         ref="floatingReference"
         class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
       >
-        <ListboxButton class="input shadow-input">
-          <slot name="button">
-            {{ model ? displayValue(model) : '' }}
+        <ListboxButton class="input shadow-input text-sm flex items-center gap-2">
+            <slot name="button">
+              <div class="w-100 flex items-center justify-between gap-2">
+                {{ model ? displayValue(model) : '' }}
+                <RiArrowDownSLine class="size-4 justify-self-end" />
+              </div>
           </slot>
         </ListboxButton>
       </div>
@@ -58,7 +61,7 @@
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
 import { toValue, useTemplateRef } from 'vue'
-import { RiCheckLine } from '@remixicon/vue'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/vue'
 
 const props = withDefaults(defineProps<{
   options?: Array<T>
diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
new file mode 100644
index 000000000..e9acf1acd
--- /dev/null
+++ b/design-system/ChartConfigurator.vue
@@ -0,0 +1,567 @@
+<template>
+  <div class="grid lg:grid-cols-12 gap-4">
+    <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
+      <div>
+        <label
+          for="chart-title"
+          class="font-bold fr-label"
+        >{{ $t('Titre') }}</label>
+        <input
+          id="chart-title"
+          v-model="title"
+          type="text"
+          class="w-full fr-input"
+        >
+      </div>
+
+      <div>
+        <label
+          for="chart-description"
+          class="font-bold fr-label"
+        >{{ $t('Description') }}</label>
+        <textarea
+          id="chart-description"
+          v-model="desc"
+          class="w-full fr-input"
+          rows="2"
+        />
+      </div>
+      <div class="mt-4">
+        <ClientOnly>
+          <ChartViewerWrapper
+            v-model="form"
+            @columns="columns = $event"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+    <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
+      <fieldset class="px-6 space-y-4">
+        <label
+          for="existing-charts"
+          class="mb-2 font-bold"
+        >
+          {{ $t('Graphiques existants') }}
+        </label>
+        <div class="flex gap-2">
+          <select
+            id="existing-charts"
+            v-model="selectedChartId"
+            class="flex-1 fr-select"
+          >
+            <option
+              value=""
+              disabled
+            >
+              {{ $t('Sélectionnez un graphique') }}
+            </option>
+            <option
+              v-for="chart in charts?.data"
+              :key="chart.id"
+              :value="chart.id"
+            >
+              {{ chart.title }}
+            </option>
+          </select>
+          <button
+            class="fr-btn"
+            :disabled="!selectedChartId"
+            @click="loadSelectedChart"
+          >
+            {{ $t('Charger') }}
+          </button>
+        </div>
+      </fieldset>
+      <fieldset class="px-6">
+        <p class="mb-2 font-bold">
+          {{ $t('Source de données') }}
+        </p>
+        <SearchableSelect
+          v-model="dataset"
+          :label="$t('Jeu de données')"
+          :placeholder="$t('Recherchez un jeu de données...')"
+          :display-value="(option: DatasetSuggest) => option.title"
+          :get-option-id="(option: DatasetSuggest) => option.id"
+          :multiple="false"
+          :suggest="suggestDataset"
+          class="mb-4"
+        />
+        <label
+          for="resource-select"
+          class="fr-label"
+        >{{ $t('Choix de la ressource') }}</label>
+        <select
+          id="resource-select"
+          v-model="selectedResource"
+          class="w-full fr-select"
+          :disabled="!dataset"
+        >
+          <option
+            value=""
+            disabled
+          >
+            {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
+          </option>
+          <option
+            v-for="resource in resources"
+            :key="resource.id"
+            :value="resource.id"
+          >
+            {{ resource.title }}
+          </option>
+        </select>
+      </fieldset>
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <label
+          for="chart-type"
+          class="fr-label font-bold"
+        >
+          {{ $t('Type de graphique') }}
+        </label>
+        <div>
+          <select
+            id="chart-type"
+            v-model="form.chart_type"
+            class="w-full fr-select"
+          >
+            <option value="line">
+              {{ $t('Ligne') }}
+            </option>
+            <option value="histogram">
+              {{ $t('Histogramme') }}
+            </option>
+          </select>
+        </div>
+      </fieldset>
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Axe X') }}
+        </p>
+        <div>
+          <label
+            for="x-axis-column"
+            class="fr-label"
+          >{{ $t('Choisir quoi afficher') }}</label>
+          <select
+            id="x-axis-column"
+            v-model="form.x_axis.column_x"
+            class="w-full fr-select"
+          >
+            <optgroup
+              v-for="{ key, value } in flattenedColumns"
+              :key="key"
+              :label="savedResources[key]?.title ?? key"
+            >
+              <option
+                v-for="column in value"
+                :key="column"
+                :value="column"
+              >
+                {{ column }}
+              </option>
+            </optgroup>
+          </select>
+        </div>
+        <div>
+          <label
+            for="x-axis-type"
+            class="fr-label"
+          >{{ $t('Type') }}</label>
+          <select
+            id="x-axis-type"
+            v-model="form.x_axis.type"
+            class="w-full fr-select"
+          >
+            <option value="discrete">
+              {{ $t('Discret (catégories)') }}
+            </option>
+            <option value="continuous">
+              {{ $t('Continu (valeurs)') }}
+            </option>
+          </select>
+        </div>
+        <div>
+          <label
+            for="x-axis-sort-combined"
+            class="fr-label"
+          >{{ $t('Trier par') }}</label>
+          <select
+            id="x-axis-sort-combined"
+            v-model="form.x_axis.sort_combined"
+            class="w-full fr-select"
+          >
+            <option
+              v-for="(label, value) in sortOptionLabels"
+              :key="value"
+              :value
+            >
+              {{ label }}
+            </option>
+          </select>
+        </div>
+      </fieldset>
+
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Série') }}
+        </p>
+        <div
+          v-for="(serie, index) in form.series"
+          :key="index"
+          class="space-y-4"
+        >
+          <div>
+            <label
+              :for="`column-y-${index}`"
+              class="fr-label"
+            >{{ $t('Colonne Y')
+            }}</label>
+            <select
+              :id="`column-y-${index}`"
+              v-model="serie.column_y"
+              class="w-full fr-select"
+            >
+              <template v-if="selectedResource">
+                <option
+                  v-for="column in columns[selectedResource]"
+                  :key="column"
+                  :value="column"
+                >
+                  {{ column }}
+                </option>
+              </template>
+            </select>
+          </div>
+
+          <div>
+            <label
+              :for="`aggregate-y-${index}`"
+              class="fr-label"
+            >{{ $t('Agrégation')
+            }}</label>
+            <select
+              :id="`aggregate-y-${index}`"
+              v-model="serie.aggregate_y"
+              class="w-full fr-select"
+            >
+              <option :value="null">
+                {{ $t('Non') }}
+              </option>
+              <option value="sum">
+                {{ $t('Somme') }}
+              </option>
+              <option value="avg">
+                {{ $t('Moyenne') }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </fieldset>
+
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Filtre') }}
+        </p>
+        <div
+          v-if="form.filter && selectedResource"
+          class="flex items-center gap-2 flex-wrap md:flex-nowrap"
+        >
+          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
+
+          <!-- Column select -->
+          <Listbox
+            v-model="form.filter.column"
+            class="text-sm"
+            :display-value="(o: string) => o"
+            :options="columns[selectedResource]"
+          />
+          <div class="relative shrink-0">
+            <Listbox
+              v-model="form.filter.condition"
+              :display-value="(o: string) => ({ equal: $t('est'), greater: $t('supérieur à') }[o] ?? '')"
+              :options="['equal', 'greater']"
+            />
+          </div>
+
+          <!-- Value input -->
+          <input
+            v-model="form.filter.value"
+            type="text"
+            class="fr-input text-sm w-32"
+            :placeholder="$t('Valeur')"
+          >
+
+          <!-- Remove button -->
+          <BrandedButton
+            :icon="RiDeleteBinLine"
+            color="tertiary"
+            size="sm"
+            :disabled="!form.filter.column"
+            class="block"
+            :keep-margins-even-without-borders="true"
+            @click="removeFilter"
+          />
+        </div>
+        <div v-else>
+          <BrandedButton
+            size="sm"
+            color="tertiary"
+            :icon="RiAddLine"
+            @click="form.filter={ column: '', condition: 'equal', value: '' }"
+          >
+            {{ $t('Ajouter un filtre') }}
+          </BrandedButton>
+        </div>
+      </fieldset>
+      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
+        <p class="font-bold mb-2">
+          {{ $t('Axe Y') }}
+        </p>
+        <div>
+          <label
+            for="y-axis-label"
+            class="fr-label"
+          >{{ $t('Label') }}</label>
+          <input
+            id="y-axis-label"
+            v-model="form.y_axis.label"
+            type="text"
+            class="w-full fr-input"
+          >
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label
+              for="y-axis-min"
+              class="fr-label"
+            >{{ $t('Min') }}</label>
+            <input
+              id="y-axis-min"
+              v-model.number="form.y_axis.min"
+              type="number"
+              class="w-full fr-input"
+            >
+          </div>
+          <div>
+            <label
+              for="y-axis-max"
+              class="fr-label"
+            >{{ $t('Max') }}</label>
+            <input
+              id="y-axis-max"
+              v-model.number="form.y_axis.max"
+              type="number"
+              class="w-full fr-input"
+            >
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label
+              for="y-axis-unit"
+              class="fr-label"
+            >{{ $t('Unité') }}</label>
+            <input
+              id="y-axis-unit"
+              v-model="form.y_axis.unit"
+              type="text"
+              class="w-full fr-input"
+              :placeholder="$t('ex: €, %, kg')"
+            >
+          </div>
+          <div>
+            <label
+              for="y-axis-unit-position"
+              class="fr-label"
+            >{{ $t('Position unité')
+            }}</label>
+            <select
+              id="y-axis-unit-position"
+              v-model="form.y_axis.unit_position"
+              class="w-full fr-select"
+            >
+              <option value="suffix">
+                {{ $t('Suffixe') }}
+              </option>
+              <option value="prefix">
+                {{ $t('Préfixe') }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </fieldset>
+
+      <div class="px-6">
+        <BrandedButton @click="saveChart">
+          {{ $t('Sauvegarder le graphique') }}
+        </BrandedButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
+import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox } from '@datagouv/components-next'
+import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
+import type { DatasetSuggest } from '~/types/types'
+import { RiAddLine, RiDeleteBinLine } from '@remixicon/vue'
+import { useAPI } from '~/utils/api'
+
+const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
+
+const form = defineModel<ChartForm>({
+  required: true,
+})
+
+const { t } = useTranslation()
+
+const columns = ref<Record<string, Array<string>>>({})
+const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
+
+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('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 sortOptionLabels = computed(() => {
+  const xAxisColumn = form.value.x_axis.column_x
+  const yAxisColumn = form.value.series[0]?.column_y
+  return {
+    '': t('Aucun'),
+    'axis_x-asc': xAxisColumn ? `${xAxisColumn} - ${t('Ascendant')}` : t('Axe X - Ascendant'),
+    'axis_x-desc': xAxisColumn ? `${xAxisColumn} - ${t('Descendant')}` : t('Axe X - Descendant'),
+    'axis_y-asc': yAxisColumn ? `${yAxisColumn} - ${t('Ascendant')}` : t('Axe Y - Ascendant'),
+    'axis_y-desc': yAxisColumn ? `${yAxisColumn} - ${t('Descendant')}` : t('Axe Y - Descendant'),
+  }
+})
+
+const { $api } = useNuxtApp()
+const hasTabularData = useHasTabularData()
+const getProfile = useGetProfile()
+
+const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
+
+watch(dataset, async (newDataset) => {
+  if (!newDataset) return
+  try {
+    const fetchedResources = await $api<PaginatedArray<Resource>>(`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)
+  }
+}, { 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
+})
+
+async function loadMissingResourcesForChart(resourceIds: Set<string>) {
+  for (const id of resourceIds) {
+    if (savedResources[id]) continue
+
+    try {
+      const resource = await $api<{ resource: Resource, dataset_id: string }>(`https://demo.data.gouv.fr/api/2/datasets/resources/${id}/`)
+      savedResources[id] = resource.resource
+    }
+    catch (error) {
+      console.error(`Failed to fetch resource ${id}:`, error)
+    }
+  }
+}
+
+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 },
+  })
+}
+
+function removeFilter() {
+  form.value.filter = undefined
+}
+
+async function loadChart(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 = toChartForm(data.value)
+      title.value = data.value.title
+      desc.value = data.value.description
+
+      await loadMissingResourcesForChart(chartResources)
+
+      toast.success(t('Graphique chargé !'))
+    }
+  }
+  catch (error) {
+    console.error('Failed to load chart:', error)
+    toast.error(t('Erreur lors du chargement du graphique'))
+  }
+}
+
+function loadSelectedChart() {
+  if (selectedChartId.value) {
+    loadChart(selectedChartId.value)
+  }
+}
+
+async function saveChart() {
+  try {
+    const chartForApi = toChartApi(form.value)
+    const update = savedChart.value?.id
+    if (update) {
+      savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value!.id}/`, {
+        method: 'PATCH',
+        body: JSON.stringify(chartForApi),
+      })
+    }
+    else {
+      savedChart.value = await $api<Chart>('/api/1/visualizations/', {
+        method: 'POST',
+        body: JSON.stringify(chartForApi),
+      })
+    }
+
+    toast.success(update ? t('Graphique mis à jour !') : t('Graphique sauvegardé !'))
+    await refresh()
+    selectedChartId.value = savedChart.value.id
+  }
+  catch (error) {
+    console.error('Failed to save chart:', error)
+  }
+}
+</script>

From 6a37df9eda4b0f57f18c290e82777e8adb008dba Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Thu, 2 Apr 2026 09:00:30 +0200
Subject: [PATCH 6/7] chore: unwanted file from stash

---
 design-system/ChartConfigurator.vue | 567 ----------------------------
 1 file changed, 567 deletions(-)
 delete mode 100644 design-system/ChartConfigurator.vue

diff --git a/design-system/ChartConfigurator.vue b/design-system/ChartConfigurator.vue
deleted file mode 100644
index e9acf1acd..000000000
--- a/design-system/ChartConfigurator.vue
+++ /dev/null
@@ -1,567 +0,0 @@
-<template>
-  <div class="grid lg:grid-cols-12 gap-4">
-    <div class="col-span-7 space-y-4 py-4 px-6 rounded-lg bg-white border border-new-gray-light">
-      <div>
-        <label
-          for="chart-title"
-          class="font-bold fr-label"
-        >{{ $t('Titre') }}</label>
-        <input
-          id="chart-title"
-          v-model="title"
-          type="text"
-          class="w-full fr-input"
-        >
-      </div>
-
-      <div>
-        <label
-          for="chart-description"
-          class="font-bold fr-label"
-        >{{ $t('Description') }}</label>
-        <textarea
-          id="chart-description"
-          v-model="desc"
-          class="w-full fr-input"
-          rows="2"
-        />
-      </div>
-      <div class="mt-4">
-        <ClientOnly>
-          <ChartViewerWrapper
-            v-model="form"
-            @columns="columns = $event"
-          />
-        </ClientOnly>
-      </div>
-    </div>
-    <div class="col-span-5 space-y-6 lg:ml-4 py-4 rounded-lg bg-white border border-new-gray-light">
-      <fieldset class="px-6 space-y-4">
-        <label
-          for="existing-charts"
-          class="mb-2 font-bold"
-        >
-          {{ $t('Graphiques existants') }}
-        </label>
-        <div class="flex gap-2">
-          <select
-            id="existing-charts"
-            v-model="selectedChartId"
-            class="flex-1 fr-select"
-          >
-            <option
-              value=""
-              disabled
-            >
-              {{ $t('Sélectionnez un graphique') }}
-            </option>
-            <option
-              v-for="chart in charts?.data"
-              :key="chart.id"
-              :value="chart.id"
-            >
-              {{ chart.title }}
-            </option>
-          </select>
-          <button
-            class="fr-btn"
-            :disabled="!selectedChartId"
-            @click="loadSelectedChart"
-          >
-            {{ $t('Charger') }}
-          </button>
-        </div>
-      </fieldset>
-      <fieldset class="px-6">
-        <p class="mb-2 font-bold">
-          {{ $t('Source de données') }}
-        </p>
-        <SearchableSelect
-          v-model="dataset"
-          :label="$t('Jeu de données')"
-          :placeholder="$t('Recherchez un jeu de données...')"
-          :display-value="(option: DatasetSuggest) => option.title"
-          :get-option-id="(option: DatasetSuggest) => option.id"
-          :multiple="false"
-          :suggest="suggestDataset"
-          class="mb-4"
-        />
-        <label
-          for="resource-select"
-          class="fr-label"
-        >{{ $t('Choix de la ressource') }}</label>
-        <select
-          id="resource-select"
-          v-model="selectedResource"
-          class="w-full fr-select"
-          :disabled="!dataset"
-        >
-          <option
-            value=""
-            disabled
-          >
-            {{ dataset ? $t('Sélectionnez une ressource') : $t('Sélectionnez d\'abord un jeu de données') }}
-          </option>
-          <option
-            v-for="resource in resources"
-            :key="resource.id"
-            :value="resource.id"
-          >
-            {{ resource.title }}
-          </option>
-        </select>
-      </fieldset>
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <label
-          for="chart-type"
-          class="fr-label font-bold"
-        >
-          {{ $t('Type de graphique') }}
-        </label>
-        <div>
-          <select
-            id="chart-type"
-            v-model="form.chart_type"
-            class="w-full fr-select"
-          >
-            <option value="line">
-              {{ $t('Ligne') }}
-            </option>
-            <option value="histogram">
-              {{ $t('Histogramme') }}
-            </option>
-          </select>
-        </div>
-      </fieldset>
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Axe X') }}
-        </p>
-        <div>
-          <label
-            for="x-axis-column"
-            class="fr-label"
-          >{{ $t('Choisir quoi afficher') }}</label>
-          <select
-            id="x-axis-column"
-            v-model="form.x_axis.column_x"
-            class="w-full fr-select"
-          >
-            <optgroup
-              v-for="{ key, value } in flattenedColumns"
-              :key="key"
-              :label="savedResources[key]?.title ?? key"
-            >
-              <option
-                v-for="column in value"
-                :key="column"
-                :value="column"
-              >
-                {{ column }}
-              </option>
-            </optgroup>
-          </select>
-        </div>
-        <div>
-          <label
-            for="x-axis-type"
-            class="fr-label"
-          >{{ $t('Type') }}</label>
-          <select
-            id="x-axis-type"
-            v-model="form.x_axis.type"
-            class="w-full fr-select"
-          >
-            <option value="discrete">
-              {{ $t('Discret (catégories)') }}
-            </option>
-            <option value="continuous">
-              {{ $t('Continu (valeurs)') }}
-            </option>
-          </select>
-        </div>
-        <div>
-          <label
-            for="x-axis-sort-combined"
-            class="fr-label"
-          >{{ $t('Trier par') }}</label>
-          <select
-            id="x-axis-sort-combined"
-            v-model="form.x_axis.sort_combined"
-            class="w-full fr-select"
-          >
-            <option
-              v-for="(label, value) in sortOptionLabels"
-              :key="value"
-              :value
-            >
-              {{ label }}
-            </option>
-          </select>
-        </div>
-      </fieldset>
-
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Série') }}
-        </p>
-        <div
-          v-for="(serie, index) in form.series"
-          :key="index"
-          class="space-y-4"
-        >
-          <div>
-            <label
-              :for="`column-y-${index}`"
-              class="fr-label"
-            >{{ $t('Colonne Y')
-            }}</label>
-            <select
-              :id="`column-y-${index}`"
-              v-model="serie.column_y"
-              class="w-full fr-select"
-            >
-              <template v-if="selectedResource">
-                <option
-                  v-for="column in columns[selectedResource]"
-                  :key="column"
-                  :value="column"
-                >
-                  {{ column }}
-                </option>
-              </template>
-            </select>
-          </div>
-
-          <div>
-            <label
-              :for="`aggregate-y-${index}`"
-              class="fr-label"
-            >{{ $t('Agrégation')
-            }}</label>
-            <select
-              :id="`aggregate-y-${index}`"
-              v-model="serie.aggregate_y"
-              class="w-full fr-select"
-            >
-              <option :value="null">
-                {{ $t('Non') }}
-              </option>
-              <option value="sum">
-                {{ $t('Somme') }}
-              </option>
-              <option value="avg">
-                {{ $t('Moyenne') }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </fieldset>
-
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Filtre') }}
-        </p>
-        <div
-          v-if="form.filter && selectedResource"
-          class="flex items-center gap-2 flex-wrap md:flex-nowrap"
-        >
-          <span class="text-sm text-gray-600">{{ $t('Quand') }}</span>
-
-          <!-- Column select -->
-          <Listbox
-            v-model="form.filter.column"
-            class="text-sm"
-            :display-value="(o: string) => o"
-            :options="columns[selectedResource]"
-          />
-          <div class="relative shrink-0">
-            <Listbox
-              v-model="form.filter.condition"
-              :display-value="(o: string) => ({ equal: $t('est'), greater: $t('supérieur à') }[o] ?? '')"
-              :options="['equal', 'greater']"
-            />
-          </div>
-
-          <!-- Value input -->
-          <input
-            v-model="form.filter.value"
-            type="text"
-            class="fr-input text-sm w-32"
-            :placeholder="$t('Valeur')"
-          >
-
-          <!-- Remove button -->
-          <BrandedButton
-            :icon="RiDeleteBinLine"
-            color="tertiary"
-            size="sm"
-            :disabled="!form.filter.column"
-            class="block"
-            :keep-margins-even-without-borders="true"
-            @click="removeFilter"
-          />
-        </div>
-        <div v-else>
-          <BrandedButton
-            size="sm"
-            color="tertiary"
-            :icon="RiAddLine"
-            @click="form.filter={ column: '', condition: 'equal', value: '' }"
-          >
-            {{ $t('Ajouter un filtre') }}
-          </BrandedButton>
-        </div>
-      </fieldset>
-      <fieldset class="border-t border-new-gray-light py-4 px-6 space-y-4">
-        <p class="font-bold mb-2">
-          {{ $t('Axe Y') }}
-        </p>
-        <div>
-          <label
-            for="y-axis-label"
-            class="fr-label"
-          >{{ $t('Label') }}</label>
-          <input
-            id="y-axis-label"
-            v-model="form.y_axis.label"
-            type="text"
-            class="w-full fr-input"
-          >
-        </div>
-        <div class="grid grid-cols-2 gap-4">
-          <div>
-            <label
-              for="y-axis-min"
-              class="fr-label"
-            >{{ $t('Min') }}</label>
-            <input
-              id="y-axis-min"
-              v-model.number="form.y_axis.min"
-              type="number"
-              class="w-full fr-input"
-            >
-          </div>
-          <div>
-            <label
-              for="y-axis-max"
-              class="fr-label"
-            >{{ $t('Max') }}</label>
-            <input
-              id="y-axis-max"
-              v-model.number="form.y_axis.max"
-              type="number"
-              class="w-full fr-input"
-            >
-          </div>
-        </div>
-        <div class="grid grid-cols-2 gap-4">
-          <div>
-            <label
-              for="y-axis-unit"
-              class="fr-label"
-            >{{ $t('Unité') }}</label>
-            <input
-              id="y-axis-unit"
-              v-model="form.y_axis.unit"
-              type="text"
-              class="w-full fr-input"
-              :placeholder="$t('ex: €, %, kg')"
-            >
-          </div>
-          <div>
-            <label
-              for="y-axis-unit-position"
-              class="fr-label"
-            >{{ $t('Position unité')
-            }}</label>
-            <select
-              id="y-axis-unit-position"
-              v-model="form.y_axis.unit_position"
-              class="w-full fr-select"
-            >
-              <option value="suffix">
-                {{ $t('Suffixe') }}
-              </option>
-              <option value="prefix">
-                {{ $t('Préfixe') }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </fieldset>
-
-      <div class="px-6">
-        <BrandedButton @click="saveChart">
-          {{ $t('Sauvegarder le graphique') }}
-        </BrandedButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Resource, PaginatedArray, ChartForm, Chart } from '@datagouv/components-next'
-import { SearchableSelect, useDebouncedRef, useGetProfile, useHasTabularData, toast, BrandedButton, Listbox } from '@datagouv/components-next'
-import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
-import type { DatasetSuggest } from '~/types/types'
-import { RiAddLine, RiDeleteBinLine } from '@remixicon/vue'
-import { useAPI } from '~/utils/api'
-
-const ChartViewerWrapper = defineAsyncComponent(() => import('@datagouv/components-next').then(m => m.ChartViewerWrapper))
-
-const form = defineModel<ChartForm>({
-  required: true,
-})
-
-const { t } = useTranslation()
-
-const columns = ref<Record<string, Array<string>>>({})
-const flattenedColumns = computed(() => Object.entries(columns.value).map(([key, value]) => ({ key, value })).flat())
-
-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('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 sortOptionLabels = computed(() => {
-  const xAxisColumn = form.value.x_axis.column_x
-  const yAxisColumn = form.value.series[0]?.column_y
-  return {
-    '': t('Aucun'),
-    'axis_x-asc': xAxisColumn ? `${xAxisColumn} - ${t('Ascendant')}` : t('Axe X - Ascendant'),
-    'axis_x-desc': xAxisColumn ? `${xAxisColumn} - ${t('Descendant')}` : t('Axe X - Descendant'),
-    'axis_y-asc': yAxisColumn ? `${yAxisColumn} - ${t('Ascendant')}` : t('Axe Y - Ascendant'),
-    'axis_y-desc': yAxisColumn ? `${yAxisColumn} - ${t('Descendant')}` : t('Axe Y - Descendant'),
-  }
-})
-
-const { $api } = useNuxtApp()
-const hasTabularData = useHasTabularData()
-const getProfile = useGetProfile()
-
-const { data: charts, refresh: refresh } = await useAPI<PaginatedArray<Chart>>('/api/1/visualizations/', { lazy: true })
-
-watch(dataset, async (newDataset) => {
-  if (!newDataset) return
-  try {
-    const fetchedResources = await $api<PaginatedArray<Resource>>(`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)
-  }
-}, { 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
-})
-
-async function loadMissingResourcesForChart(resourceIds: Set<string>) {
-  for (const id of resourceIds) {
-    if (savedResources[id]) continue
-
-    try {
-      const resource = await $api<{ resource: Resource, dataset_id: string }>(`https://demo.data.gouv.fr/api/2/datasets/resources/${id}/`)
-      savedResources[id] = resource.resource
-    }
-    catch (error) {
-      console.error(`Failed to fetch resource ${id}:`, error)
-    }
-  }
-}
-
-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 },
-  })
-}
-
-function removeFilter() {
-  form.value.filter = undefined
-}
-
-async function loadChart(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 = toChartForm(data.value)
-      title.value = data.value.title
-      desc.value = data.value.description
-
-      await loadMissingResourcesForChart(chartResources)
-
-      toast.success(t('Graphique chargé !'))
-    }
-  }
-  catch (error) {
-    console.error('Failed to load chart:', error)
-    toast.error(t('Erreur lors du chargement du graphique'))
-  }
-}
-
-function loadSelectedChart() {
-  if (selectedChartId.value) {
-    loadChart(selectedChartId.value)
-  }
-}
-
-async function saveChart() {
-  try {
-    const chartForApi = toChartApi(form.value)
-    const update = savedChart.value?.id
-    if (update) {
-      savedChart.value = await $api<Chart>(`/api/1/visualizations/${savedChart.value!.id}/`, {
-        method: 'PATCH',
-        body: JSON.stringify(chartForApi),
-      })
-    }
-    else {
-      savedChart.value = await $api<Chart>('/api/1/visualizations/', {
-        method: 'POST',
-        body: JSON.stringify(chartForApi),
-      })
-    }
-
-    toast.success(update ? t('Graphique mis à jour !') : t('Graphique sauvegardé !'))
-    await refresh()
-    selectedChartId.value = savedChart.value.id
-  }
-  catch (error) {
-    console.error('Failed to save chart:', error)
-  }
-}
-</script>

From f2a64856e1375eee39a58a07b14cabb7358fed16 Mon Sep 17 00:00:00 2001
From: Nicolas Kempf Le Stanc <nicolas@conciergerie.dev>
Date: Tue, 7 Apr 2026 12:21:39 +0200
Subject: [PATCH 7/7] fix(listbox): width

---
 datagouv-components/src/components/Form/Listbox.vue | 10 +++++-----
 pages/design/listbox.vue                            |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/datagouv-components/src/components/Form/Listbox.vue b/datagouv-components/src/components/Form/Listbox.vue
index b8ff1ef36..49f62e1f3 100644
--- a/datagouv-components/src/components/Form/Listbox.vue
+++ b/datagouv-components/src/components/Form/Listbox.vue
@@ -9,11 +9,11 @@
         class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
       >
         <ListboxButton class="input shadow-input text-sm flex items-center gap-2">
-            <slot name="button">
-              <div class="w-100 flex items-center justify-between gap-2">
-                {{ model ? displayValue(model) : '' }}
-                <RiArrowDownSLine class="size-4 justify-self-end" />
-              </div>
+          <slot name="button">
+            <div class="w-full flex items-center justify-between gap-2">
+              {{ model ? displayValue(model) : '' }}
+              <RiArrowDownSLine class="size-4 justify-self-end" />
+            </div>
           </slot>
         </ListboxButton>
       </div>
diff --git a/pages/design/listbox.vue b/pages/design/listbox.vue
index 6f9b87022..f9019cee3 100644
--- a/pages/design/listbox.vue
+++ b/pages/design/listbox.vue
@@ -144,7 +144,7 @@ type Priority = {
   label: string
 }
 
-const conditions = ['equal', 'greater', 'less', 'contains', 'starts_with']
+const conditions = ['equal', 'greater', 'less', 'contains', 'starts_with', 'really long option should not push the content like the default select tag and should be truncated when selected']
 
 const selectedCondition = ref<string | null>('equal')