@tekkare/romulus 0.1.210 → 0.1.212

package/dist/runtime/components/DashboardWidgetEditor.vue

@@ -0,0 +1,474 @@
+<!--
+  RmDashboardWidgetEditor - ajouter ou regler un widget d'un tableau de bord.
+
+  Un tiroir plutot qu'une modale : le catalogue, les reglages et un apercu a
+  taille utile tiennent cote a cote, chacun defilant de son cote.
+
+  A gauche le catalogue de l'app, groupe par source : ce qu'on peut afficher.
+  A droite les reglages de l'entree choisie : visualisation, parametres,
+  marques, colonnes et titre. Un widget existant s'ouvre sur son entree et
+  ses reglages ; changer d'entree repart de ses valeurs par defaut, les
+  parametres d'une source ne valant pas pour une autre.
+
+  Les marques suivent le contexte par defaut (`scopeLabel` dit lequel : le
+  projet, la vue...). « Choisir » fige une liste parmi ces marques : le
+  widget ne bouge plus quand le contexte en gagne d'autres.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import {
+  RM_VIZ_ICONS,
+  RM_VIZ_LABELS,
+  rmShownColumns,
+  rmWidgetKind,
+  rmWidgetParams,
+  type RmDashboardLang,
+  type RmDashboardViz,
+  type RmDashboardWidget,
+  type RmWidgetColumn,
+  type RmWidgetContext,
+  type RmWidgetData,
+  type RmWidgetKind,
+  type RmWidgetParam,
+  type RmWidgetSource,
+} from '../utils/dashboard'
+
+const props = withDefaults(defineProps<{
+  modelValue: boolean
+  /** Le widget a regler ; absent, on en ajoute un. */
+  widget: RmDashboardWidget | null
+  catalog: RmWidgetKind<any>[]
+  context: RmWidgetContext
+  /** La source d'une entree, pour l'apercu. */
+  sourceOf: (kind: RmWidgetKind<any>) => RmWidgetSource
+  lang?: RmDashboardLang
+  /** Ce que suivent les marques par defaut : « Celles du projet », « Celles de la vue ». */
+  scopeLabel?: string
+  /** Ce que dit l'editeur quand le contexte n'a aucune marque. */
+  noBrandsText?: string
+}>(), {
+  lang: 'fr',
+  scopeLabel: undefined,
+  noBrandsText: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  /** Le widget regle, sans sa place : la grille la lui donne. */
+  'save': [value: Pick<RmDashboardWidget, 'kind' | 'viz' | 'title' | 'params'>]
+}>()
+
+defineSlots<{
+  cards(props: { kind: string, items: unknown[], editing: boolean }): unknown
+}>()
+
+const en = computed(() => props.lang === 'en')
+
+const T = computed(() => en.value
+  ? {
+      add: 'Add a widget',
+      edit: 'Edit the widget',
+      catalog: 'Widget catalogue',
+      title: 'Title',
+      display: 'Display',
+      brands: 'Brands',
+      scope: 'All brands',
+      pick: 'Pick',
+      columns: 'Columns',
+      order: 'Shown columns, in order',
+      left: (c: string) => `Move ${c} left`,
+      right: (c: string) => `Move ${c} right`,
+      hide: (c: string) => `Hide ${c}`,
+      addColumn: 'Add:',
+      orderHint: 'Shown columns are displayed and exported in this order.',
+      reset: 'Back to the default columns',
+      preview: 'Preview',
+      cancel: 'Cancel',
+      save: 'Save',
+      addToBoard: 'Add to the dashboard',
+      noBrands: 'No brand to read yet.',
+      follows: (list: string) => `Follows ${list}.`,
+      fixed: 'A fixed list: brands added later will not appear.',
+    }
+  : {
+      add: 'Ajouter un widget',
+      edit: 'Régler le widget',
+      catalog: 'Catalogue de widgets',
+      title: 'Titre',
+      display: 'Affichage',
+      brands: 'Marques',
+      scope: 'Toutes les marques',
+      pick: 'Choisir',
+      columns: 'Colonnes',
+      order: 'Colonnes affichées, dans l\'ordre',
+      left: (c: string) => `Avancer ${c}`,
+      right: (c: string) => `Reculer ${c}`,
+      hide: (c: string) => `Masquer ${c}`,
+      addColumn: 'Ajouter :',
+      orderHint: 'Les colonnes affichées sont montrées et exportées dans cet ordre.',
+      reset: 'Revenir aux colonnes par défaut',
+      preview: 'Aperçu',
+      cancel: 'Annuler',
+      save: 'Enregistrer',
+      addToBoard: 'Ajouter au tableau de bord',
+      noBrands: 'Aucune marque à lire pour l\'instant.',
+      follows: (list: string) => `Suit ${list}.`,
+      fixed: 'Une liste figée : les marques ajoutées plus tard n\'y apparaîtront pas.',
+    })
+
+const heading = computed(() => (props.widget ? T.value.edit : T.value.add))
+
+const groups = computed(() => {
+  const out: { label: string, entries: RmWidgetKind<any>[] }[] = []
+  for (const entry of props.catalog) {
+    const label = entry.group[props.lang]
+    let group = out.find(g => g.label === label)
+    if (!group) out.push((group = { label, entries: [] }))
+    group.entries.push(entry)
+  }
+  return out
+})
+
+const kind = ref('')
+const title = ref('')
+const viz = ref<RmDashboardViz>('line')
+const values = ref<Record<string, string>>({})
+const brandMode = ref<'project' | 'pick'>('project')
+const picked = ref<string[]>([])
+/** Colonnes cochees ; `null` : celles de l'entree par defaut. */
+const columns = ref<string[] | null>(null)
+
+/** Les colonnes que la liste propose, lues dans l'apercu : elles dependent du regroupement choisi. */
+const available = ref<RmWidgetColumn[]>([])
+function onPreviewData(value: { data: RmWidgetData } | null) {
+  available.value = value?.data.type === 'rows' ? value.data.columns : []
+}
+
+/** Les colonnes affichees, dans l'ordre choisi (meme regle que le widget). */
+const shown = computed(() => rmShownColumns(available.value, columns.value).map(c => c.key))
+
+const hidden = computed(() => available.value.filter(c => !shown.value.includes(c.key)))
+
+function labelOf(key: string) {
+  return available.value.find(c => c.key === key)?.label ?? key
+}
+
+/** Une colonne ajoutee va en fin de liste ; on la place ensuite. */
+function toggleColumn(key: string) {
+  const current = shown.value
+  if (current.includes(key)) {
+    if (current.length === 1) return
+    columns.value = current.filter(k => k !== key)
+  }
+  else {
+    columns.value = [...current, key]
+  }
+}
+
+function moveColumn(key: string, step: number) {
+  const list = [...shown.value]
+  const from = list.indexOf(key)
+  const to = from + step
+  if (from < 0 || to < 0 || to >= list.length) return
+  list.splice(to, 0, ...list.splice(from, 1))
+  columns.value = list
+}
+
+const dragged = ref('')
+const target = ref(-1)
+
+function onDragStart(event: DragEvent, key: string) {
+  dragged.value = key
+  event.dataTransfer?.setData('text/plain', key)
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+}
+
+function onDrop(index: number) {
+  const key = dragged.value
+  dragged.value = ''
+  target.value = -1
+  if (!key) return
+  const list = shown.value.filter(k => k !== key)
+  list.splice(index, 0, key)
+  columns.value = list
+}
+
+const entry = computed(() => rmWidgetKind(props.catalog, kind.value))
+/** Les reglages a peu de choix se lisent en bascule ; au-dela de trois, en liste (le rail passerait sur deux lignes). */
+const toggles = computed(() => (entry.value?.params ?? []).filter(p => p.options.length <= 3))
+const lists = computed(() => (entry.value?.params ?? []).filter(p => p.options.length > 3))
+
+const vizOptions = computed(() =>
+  (entry.value?.viz ?? []).map(value => ({ value, label: RM_VIZ_LABELS[value][props.lang] })),
+)
+
+function pick(next: string, from?: RmDashboardWidget | null) {
+  const chosen = rmWidgetKind(props.catalog, next)
+  if (!chosen) return
+  kind.value = next
+  const params = from?.kind === next ? from.params : {}
+  values.value = rmWidgetParams(chosen, params)
+  viz.value = from?.kind === next && chosen.viz.includes(from.viz) ? from.viz : chosen.viz[0]!
+  const brands = params.brands
+  brandMode.value = Array.isArray(brands) ? 'pick' : 'project'
+  picked.value = Array.isArray(brands) ? (brands as string[]) : []
+  columns.value = Array.isArray(params.columns) ? (params.columns as string[]) : null
+  available.value = []
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) return
+    title.value = props.widget?.title ?? ''
+    pick(props.widget?.kind ?? props.catalog[0]!.kind, props.widget)
+  },
+  { immediate: true },
+)
+
+function optionLabel(param: RmWidgetParam, value: string | undefined) {
+  return param.options.find(o => o.value === value)?.label[props.lang]
+}
+
+function optionValue(param: RmWidgetParam, label: string) {
+  return param.options.find(o => o.label[props.lang] === label)?.value ?? param.options[0]!.value
+}
+
+const brandHint = computed(() => {
+  if (!props.context.brands.length) return props.noBrandsText ?? T.value.noBrands
+  if (brandMode.value === 'project') return T.value.follows(props.context.brands.join(', '))
+  return T.value.fixed
+})
+
+/** Le widget tel qu'il sera enregistre, pour l'apercu. */
+const draft = computed<RmDashboardWidget | null>(() => {
+  if (!entry.value || !canSave.value) return null
+  return { id: 'preview', ...settings(), layout: { x: 0, y: 0, ...entry.value.size } }
+})
+
+function settings(): Pick<RmDashboardWidget, 'kind' | 'viz' | 'title' | 'params'> {
+  const params: Record<string, unknown> = { ...values.value }
+  if (entry.value?.usesBrands && brandMode.value === 'pick') params.brands = [...picked.value]
+  if (columns.value) params.columns = [...columns.value]
+  return { kind: kind.value, viz: viz.value, title: title.value.trim() || undefined, params }
+}
+
+const canSave = computed(() => !!entry.value && (brandMode.value === 'project' || picked.value.length > 0))
+
+function save() {
+  if (!entry.value || !canSave.value) return
+  emit('save', settings())
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <RmDrawer
+    :model-value="modelValue"
+    size="min(1200px, 94vw)"
+    :label="heading"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #header>
+      <h2 class="rm-dash-editor__title">{{ heading }}</h2>
+    </template>
+
+    <div class="rm-dash-editor">
+      <nav class="rm-dash-editor__catalog" :aria-label="T.catalog">
+        <section v-for="group in groups" :key="group.label" class="rm-dash-editor__group">
+          <p class="rm-dash-editor__group-label">{{ group.label }}</p>
+          <button
+            v-for="item in group.entries"
+            :key="item.kind"
+            type="button"
+            class="rm-dash-editor__entry"
+            :class="{ 'is-active': item.kind === kind }"
+            :aria-pressed="item.kind === kind"
+            @click="pick(item.kind)"
+          >
+            <span class="rm-dash-editor__entry-icon" aria-hidden="true">
+              <RmIcon :name="RM_VIZ_ICONS[item.viz[0]!]" :size="18" />
+            </span>
+            <span class="rm-dash-editor__entry-body">
+              <span class="rm-dash-editor__entry-title">{{ item.title[lang] }}</span>
+              <span class="rm-dash-editor__entry-text">{{ item.description[lang] }}</span>
+            </span>
+          </button>
+        </section>
+      </nav>
+
+      <div v-if="entry" class="rm-dash-editor__main">
+        <div class="rm-dash-editor__settings">
+          <RmInput
+            v-model="title"
+            class="rm-dash-editor__wide"
+            :label="T.title"
+            :placeholder="entry.title[lang]"
+          />
+
+          <!-- Deux rangees, une par nature de controle : les bascules (choix
+               courts, tous visibles) sur une ligne, les listes deroulantes sur
+               la suivante. Alternees sur une grille, elles se decalaient d'une
+               colonne a l'autre. -->
+          <div class="rm-dash-editor__row rm-dash-editor__wide">
+            <div class="rm-dash-editor__field">
+              <span class="rm-dash-editor__label">{{ T.display }}</span>
+              <RmSegmented v-model="viz" size="sm" :options="vizOptions" :aria-label="T.display" />
+            </div>
+
+            <div v-for="param in toggles" :key="param.key" class="rm-dash-editor__field">
+              <span class="rm-dash-editor__label">{{ param.label[lang] }}</span>
+              <RmSegmented
+                v-model="values[param.key]"
+                size="sm"
+                :options="param.options.map(o => ({ value: o.value, label: o.label[lang] }))"
+                :aria-label="param.label[lang]"
+              />
+            </div>
+
+            <div v-if="entry.usesBrands" class="rm-dash-editor__field">
+              <span class="rm-dash-editor__label">{{ T.brands }}</span>
+              <RmSegmented
+                v-model="brandMode"
+                size="sm"
+                :options="[
+                  { value: 'project', label: scopeLabel ?? T.scope },
+                  { value: 'pick', label: T.pick, disabled: !context.brands.length },
+                ]"
+                :aria-label="T.brands"
+              />
+            </div>
+          </div>
+
+          <!-- Les listes portent leur propre libelle (RmDropdownSelect) : pas de second titre au-dessus. -->
+          <div v-if="lists.length || (entry.usesBrands && brandMode === 'pick')" class="rm-dash-editor__row rm-dash-editor__wide">
+            <RmDropdownSelect
+              v-for="param in lists"
+              :key="param.key"
+              :model-value="optionLabel(param, values[param.key])"
+              :label="param.label[lang]"
+              :options="param.options.map(o => o.label[lang])"
+              :lang="lang"
+              @change="(label: string) => (values[param.key] = optionValue(param, label))"
+            />
+            <RmMultipleSelect
+              v-if="entry.usesBrands && brandMode === 'pick'"
+              v-model="picked"
+              :label="T.brands"
+              :options="context.brands"
+              search
+              :lang="lang"
+            />
+          </div>
+
+          <p v-if="entry.usesBrands" class="rm-dash-editor__hint rm-dash-editor__wide">{{ brandHint }}</p>
+
+          <!-- Les cartes sont celles des pages de l'app : elles gardent leurs champs. -->
+          <div v-if="viz === 'table' && available.length" class="rm-dash-editor__field rm-dash-editor__wide">
+            <span class="rm-dash-editor__label">{{ T.columns }}</span>
+            <!-- Les colonnes affichees, dans leur ordre : on les glisse, ou on
+                 les deplace aux fleches (le glisser n'existe pas au clavier). -->
+            <ol class="rm-dash-editor__order" :aria-label="T.order">
+              <li
+                v-for="(key, index) in shown"
+                :key="key"
+                class="rm-dash-editor__chip"
+                :class="{ 'is-dragged': dragged === key, 'is-target': target === index && dragged !== key }"
+                draggable="true"
+                @dragstart="onDragStart($event, key)"
+                @dragover.prevent="target = index"
+                @dragleave="target === index && (target = -1)"
+                @drop.prevent="onDrop(index)"
+                @dragend="dragged = ''; target = -1"
+              >
+                <RmIcon name="DotsSixVertical" :size="14" class="rm-dash-editor__chip-grip" aria-hidden="true" />
+                <span class="rm-dash-editor__chip-label">{{ labelOf(key) }}</span>
+                <button
+                  type="button"
+                  class="rm-dash-editor__chip-btn"
+                  :disabled="index === 0"
+                  :aria-label="T.left(labelOf(key))"
+                  @click="moveColumn(key, -1)"
+                >
+                  <RmIcon name="CaretLeft" :size="12" />
+                </button>
+                <button
+                  type="button"
+                  class="rm-dash-editor__chip-btn"
+                  :disabled="index === shown.length - 1"
+                  :aria-label="T.right(labelOf(key))"
+                  @click="moveColumn(key, 1)"
+                >
+                  <RmIcon name="CaretRight" :size="12" />
+                </button>
+                <button
+                  type="button"
+                  class="rm-dash-editor__chip-btn"
+                  :disabled="shown.length === 1"
+                  :aria-label="T.hide(labelOf(key))"
+                  @click="toggleColumn(key)"
+                >
+                  <RmIcon name="X" :size="12" />
+                </button>
+              </li>
+            </ol>
+            <div v-if="hidden.length" class="rm-dash-editor__columns">
+              <span class="rm-dash-editor__hint">{{ T.addColumn }}</span>
+              <RmPill
+                v-for="column in hidden"
+                :key="column.key"
+                :label="`+ ${column.label}`"
+                type="button"
+                @click="toggleColumn(column.key)"
+              />
+            </div>
+            <p class="rm-dash-editor__hint">
+              {{ T.orderHint }}
+              <button v-if="columns" type="button" class="rm-dash-editor__link" @click="columns = null">
+                {{ T.reset }}
+              </button>
+            </p>
+          </div>
+        </div>
+
+        <div class="rm-dash-editor__preview">
+          <span class="rm-dash-editor__label">{{ T.preview }}</span>
+          <div class="rm-dash-editor__preview-frame">
+            <RmDashboardWidget
+              v-if="draft"
+              :key="draft.kind"
+              :widget="draft"
+              :kind="entry"
+              :context="context"
+              :source="sourceOf(entry)"
+              :editing="false"
+              :chart-height="320"
+              :lang="lang"
+              :no-brands-text="noBrandsText"
+              @data="onPreviewData"
+            >
+              <template #cards="slotProps">
+                <slot name="cards" v-bind="slotProps" />
+              </template>
+            </RmDashboardWidget>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="rm-dash-editor__footer">
+        <RmButton variant="tertiary" @click="emit('update:modelValue', false)">
+          {{ T.cancel }}
+        </RmButton>
+        <RmButton variant="primary" :disabled="!canSave" @click="save">
+          {{ widget ? T.save : T.addToBoard }}
+        </RmButton>
+      </div>
+    </template>
+  </RmDrawer>
+</template>
+
+<style scoped>
+.rm-dash-editor__title{font-family:var(--font-serif);font-size:var(--font-22);font-weight:var(--weight-normal);margin:0}.rm-dash-editor{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100% + 48px);margin:-24px}@media (max-width:860px){.rm-dash-editor{grid-template-columns:1fr;height:auto}}.rm-dash-editor__catalog{background:var(--bg-surface-2);border-right:1px solid var(--border-default);display:flex;flex-direction:column;gap:20px;overflow:auto;padding:20px 16px}.rm-dash-editor__group{display:flex;flex-direction:column;gap:8px}.rm-dash-editor__group-label{color:var(--text-muted);font-size:var(--font-11);font-weight:var(--weight-semibold);letter-spacing:.06em;margin:0 4px;text-transform:uppercase}.rm-dash-editor__entry{align-items:flex-start;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;gap:12px;padding:12px;text-align:left;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);width:100%}.rm-dash-editor__entry:hover{border-color:var(--border-default);box-shadow:var(--shadow-xs)}.rm-dash-editor__entry:focus-visible{box-shadow:var(--shadow-focus);outline:none}.rm-dash-editor__entry.is-active{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.rm-dash-editor__entry-icon{align-items:center;background:color-mix(in srgb,var(--color-primary) 10%,var(--bg-surface));border-radius:var(--radius-md);color:var(--color-primary);display:inline-flex;flex:none;height:32px;justify-content:center;width:32px}.rm-dash-editor__entry-body{display:flex;flex-direction:column;gap:2px;min-width:0}.rm-dash-editor__entry-title{font-size:var(--font-13);font-weight:var(--weight-semibold);line-height:18px}.rm-dash-editor__entry-text{color:var(--text-secondary);font-size:var(--font-12);line-height:16px}.rm-dash-editor__main{display:flex;flex-direction:column;gap:28px;min-width:0;overflow:auto;padding:24px 32px}.rm-dash-editor__settings{display:grid;gap:16px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}.rm-dash-editor__wide{grid-column:1/-1}.rm-dash-editor__field{align-items:flex-start;display:flex;flex-direction:column;gap:6px;min-width:0}.rm-dash-editor__label{color:var(--text-secondary);font-size:var(--font-12);line-height:14px}.rm-dash-editor__row{align-items:flex-end;display:flex;flex-wrap:wrap;gap:16px 28px}.rm-dash-editor__columns{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.rm-dash-editor__order{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}.rm-dash-editor__chip{align-items:center;background:color-mix(in srgb,var(--color-primary) 8%,var(--bg-surface));border:1px solid var(--color-primary);border-radius:999px;color:var(--text-primary);cursor:grab;display:inline-flex;font-size:var(--font-12);gap:2px;padding:3px 4px 3px 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rm-dash-editor__chip.is-dragged{opacity:.4}.rm-dash-editor__chip.is-target{box-shadow:-4px 0 0 0 var(--color-primary)}.rm-dash-editor__chip-grip{color:var(--text-muted)}.rm-dash-editor__chip-label{margin:0 4px 0 2px;white-space:nowrap}.rm-dash-editor__chip-btn{align-items:center;background:none;border-radius:999px;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:20px;justify-content:center;padding:0;width:20px}.rm-dash-editor__chip-btn:hover:not(:disabled){background:var(--bg-surface-2);color:var(--text-primary)}.rm-dash-editor__chip-btn:disabled{cursor:default;opacity:.3}.rm-dash-editor__chip-btn:focus-visible{box-shadow:var(--shadow-focus);outline:none}.rm-dash-editor__link{background:none;color:var(--color-primary);cursor:pointer;font-size:inherit;margin-left:4px;padding:0;text-decoration:underline}.rm-dash-editor__hint{color:var(--text-muted);font-size:var(--font-12);margin:0}.rm-dash-editor__footer{display:flex;gap:8px;justify-content:flex-end}.rm-dash-editor__preview{display:flex;flex-direction:column;gap:6px}.rm-dash-editor__preview-frame{background:var(--bg-surface-2);border:1px dashed var(--border-default);border-radius:var(--radius-lg);height:480px;padding:16px;position:relative}
+</style>

package/dist/runtime/components/LineChart.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useChartTheme } from '../composables/useChartTheme'
-import { rmLineOption, type RmSeriesInput, RM_CHART_HEIGHTS, RM_LINE_LABEL_MAX_SERIES } from '../utils/chart'
+import { rmLineOption, type RmLineLabelFormatter, type RmSeriesInput, RM_CHART_HEIGHTS, RM_LINE_LABEL_MAX_SERIES } from '../utils/chart'
 import { rmCompact, rmNumber } from '../utils/format'
 
 const props = withDefaults(defineProps<{
@@ -58,6 +58,16 @@ const props = withDefaults(defineProps<{
    * partout, y compris au survol.
    */
   valueFormatter?: (value: number) => string
+  /**
+   * Etiquette de chaque point, quand la valeur seule ne suffit pas : elle
+   * recoit aussi le rang du point et celui de sa serie, de quoi ecrire une
+   * evolution par rapport au point precedent ou une part du total. Ne touche
+   * ni l'axe ni l'infobulle, qui gardent `valueFormatter`.
+   *
+   * ORIGINE AURIGA : reprend l'etiquette de `arg-chart` en `with-percentages`
+   * (« valeur (+x %) ») et les `dataLabels.formatter` passes par `:options`.
+   */
+  labelFormatter?: RmLineLabelFormatter
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string
 }>(), {
@@ -71,6 +81,7 @@ const props = withDefaults(defineProps<{
   startAtZero: false,
   numberFormat: undefined,
   valueFormatter: undefined,
+  labelFormatter: undefined,
   height: 'standard',
   description: undefined,
 })
@@ -108,6 +119,7 @@ const option = computed(() => {
     legendPosition: props.legendPosition,
     startAtZero: props.startAtZero,
     valueFormatter: formatter.value,
+    labelFormatter: props.labelFormatter,
     tooltipFormatter: props.valueFormatter,
   }) as Record<string, any>
   if (built.legend && Object.keys(legendSelected.value).length) {

package/dist/runtime/components/ViewPill.vue

@@ -77,7 +77,7 @@ const emit = defineEmits<{
 
 const WORDS = {
   fr: {
-    key: 'Vue :',
+    key: 'Changer de vue :',
     none: 'Aucune vue',
     favorites: 'Favoris',
     actions: 'Actions',
@@ -88,7 +88,7 @@ const WORDS = {
     aria: 'Vue affichée',
   },
   en: {
-    key: 'View:',
+    key: 'Change view:',
     none: 'No view',
     favorites: 'Favorites',
     actions: 'Actions',

package/dist/runtime/composables/useRmDashboard.d.ts

@@ -0,0 +1,42 @@
+/**
+ * useRmDashboard - l'etat d'un tableau de bord a widgets : chargement,
+ * tableau de depart, sauvegarde temporisee.
+ *
+ * Le paquet ne sait pas ou le tableau vit : l'app passe `load` et `save`
+ * (deux appels d'API, le tableau part en entier), et `defaults`, le tableau
+ * de depart d'un ecran jamais enregistre. Chaque geste (deplacer, regler,
+ * retirer) l'ecrit apres un court delai : une rafale de fleches au clavier
+ * part en une requete, pas en dix.
+ *
+ * Jamais enregistre (`null`), le tableau est celui de depart, recalcule par
+ * `defaults` a chaque fois que ce qu'il lit change (les marques d'un projet,
+ * par exemple) : un ecran cree vide puis rempli montre ses donnees sans que
+ * personne ait eu a les ajouter. Il ne s'ecrit qu'au premier geste.
+ */
+import { type MaybeRef } from 'vue';
+import type { RmDashboardModel, RmDashboardWidget, RmWidgetKind } from '../utils/dashboard.js';
+export interface RmDashboardOptions {
+    /** Le catalogue de l'app : un widget d'un `kind` absent est ignore a l'affichage, pas perdu. */
+    catalog: MaybeRef<RmWidgetKind<any>[]>;
+    load: () => Promise<RmDashboardModel | null | undefined>;
+    save: (model: RmDashboardModel) => Promise<unknown>;
+    /**
+     * Le tableau de depart. Lu dans un `computed` : il se recalcule quand ce
+     * qu'il lit change, et seulement alors, pour que les identifiants des
+     * widgets restent stables entre deux rendus.
+     */
+    defaults: () => RmDashboardModel;
+    /** Delai avant l'ecriture d'un geste, en millisecondes. */
+    saveDelay?: number;
+}
+export declare function useRmDashboard(options: RmDashboardOptions): {
+    dashboard: import("vue").ComputedRef<RmDashboardModel>;
+    widgets: import("vue").ComputedRef<RmDashboardWidget[]>;
+    loading: import("vue").Ref<boolean, boolean>;
+    failed: import("vue").Ref<boolean, boolean>;
+    saving: import("vue").Ref<boolean, boolean>;
+    saveFailed: import("vue").Ref<boolean, boolean>;
+    load: () => Promise<void>;
+    update: (next: RmDashboardWidget[]) => void;
+    retrySave: () => Promise<void>;
+};

package/dist/runtime/composables/useRmDashboard.js

@@ -0,0 +1,52 @@
+import { computed, onBeforeUnmount, ref, unref } from "vue";
+export function useRmDashboard(options) {
+  const stored = ref(null);
+  const fallback = computed(() => options.defaults());
+  const loading = ref(true);
+  const failed = ref(false);
+  const saving = ref(false);
+  const saveFailed = ref(false);
+  const dashboard = computed(() => stored.value ?? fallback.value);
+  const widgets = computed(() => {
+    const catalog = unref(options.catalog);
+    return dashboard.value.widgets.filter((w) => catalog.some((e) => e.kind === w.kind));
+  });
+  async function load() {
+    loading.value = true;
+    failed.value = false;
+    try {
+      stored.value = await options.load() ?? null;
+    } catch {
+      failed.value = true;
+    } finally {
+      loading.value = false;
+    }
+  }
+  let timer;
+  async function flush() {
+    timer = void 0;
+    if (!stored.value) return;
+    saving.value = true;
+    try {
+      await options.save(stored.value);
+      saveFailed.value = false;
+    } catch {
+      saveFailed.value = true;
+    } finally {
+      saving.value = false;
+    }
+  }
+  function update(next) {
+    const unknown = dashboard.value.widgets.filter((w) => !widgets.value.includes(w));
+    stored.value = { version: 1, widgets: [...next, ...unknown] };
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(flush, options.saveDelay ?? 600);
+  }
+  onBeforeUnmount(() => {
+    if (timer) {
+      clearTimeout(timer);
+      flush();
+    }
+  });
+  return { dashboard, widgets, loading, failed, saving, saveFailed, load, update, retrySave: flush };
+}

package/dist/runtime/composables/useRmExport.js

@@ -295,7 +295,13 @@ export function useRmExport() {
       rowCount += rows.length;
       data.push(rows);
       schema.push(xlsxColumnsOf(sheet, config.columns));
-      names.push(sheet.name.replace(/[[\]:*?/\\]/g, " ").slice(0, 31));
+      const base = sheet.name.replace(/[[\]:*?/\\]/g, " ").slice(0, 31);
+      let name = base;
+      for (let n = 2; names.some((taken) => taken.toLowerCase() === name.toLowerCase()); n++) {
+        const suffix = ` (${n})`;
+        name = base.slice(0, 31 - suffix.length) + suffix;
+      }
+      names.push(name);
     });
     await writeXlsxFile(data, { schema, sheets: names, fileName, stickyRowsCount: 1 });
     return { fileName, rows: rowCount, bytes: 0 };

package/dist/runtime/utils/chart.d.ts

@@ -200,6 +200,13 @@ export interface RmSeriesInput {
  * (« 1 240 (18 %) »), et c'est l'index qui la retrouve.
  */
 export type RmBarLabelFormatter = (value: number, index: number) => string;
+/**
+ * Etiquette d'un point de courbe, qui connait sa position : rang du point
+ * dans la serie et rang de la serie. C'est ce qu'il faut pour ecrire une
+ * evolution (« 1 200 (+4,3 %) », par rapport au point precedent) ou une part
+ * du total de la periode, la ou `valueFormatter` ne voit que la valeur.
+ */
+export type RmLineLabelFormatter = (value: number, index: number, seriesIndex: number) => string;
 export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter, valueFormatter?: (value: number) => string): {
     tooltip: {
         valueFormatter: (value: unknown) => string;
@@ -507,6 +514,8 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     startAtZero?: boolean;
     /** Formate les valeurs, dans les etiquettes comme dans l'infobulle. */
     valueFormatter?: (value: number) => string;
+    /** Etiquette de chaque point, a la place de `valueFormatter`. */
+    labelFormatter?: RmLineLabelFormatter;
     /**
      * Formate l'infobulle a la place de `rmNumber`. Une app qui impose sa
      * propre regle d'arrondi la veut aussi au survol, pas seulement sur l'axe.
@@ -737,6 +746,7 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
             borderRadius: number;
             formatter: (p: {
                 value: number | null;
+                dataIndex: number;
             }) => string;
         } | undefined;
         lineStyle: {