@tekkare/romulus 0.1.206 → 0.1.208

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.205",
+  "version": "0.1.207",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/BarChart.vue

@@ -21,11 +21,17 @@ const props = withDefaults(defineProps<{
    * ce qui suffit des que les barres sont nombreuses.
    */
   labelFormatter?: RmBarLabelFormatter
+  /**
+   * Formate l'axe des valeurs et l'infobulle. Independant de `labelFormatter`,
+   * qui seul decide si les barres portent une etiquette.
+   */
+  valueFormatter?: (value: number) => string
 }>(), {
   horizontal: false,
   height: 'standard',
   description: undefined,
   labelFormatter: undefined,
+  valueFormatter: undefined,
 })
 
 const { theme, palette, decal } = useChartTheme()
@@ -39,6 +45,7 @@ const option = computed(() =>
         palette.value.cat,
         decal.value,
         props.labelFormatter,
+        props.valueFormatter,
       )
     : rmBarVerticalOption(
         props.categories,
@@ -47,6 +54,7 @@ const option = computed(() =>
         palette.value.cat,
         decal.value,
         props.labelFormatter,
+        props.valueFormatter,
       ),
 )
 </script>

package/dist/runtime/components/ChoroplethMap.vue

@@ -58,6 +58,11 @@ const props = withDefaults(
     /** Hauteur du dessin, en pixels. */
     height?: number
     lang?: 'fr' | 'en'
+    /**
+     * Formate les valeurs de l'infobulle et des bornes de la legende, a la
+     * place du format de la langue. Pour une app qui a sa regle d'arrondi.
+     */
+    valueFormatter?: (value: number) => string
   }>(),
   {
     data: () => [],
@@ -67,6 +72,7 @@ const props = withDefaults(
     compact: false,
     height: 500,
     lang: 'fr',
+    valueFormatter: undefined,
   },
 )
 
@@ -186,7 +192,11 @@ const T = computed(() =>
 /** Dégradé de la légende, dans l'ordre de lecture de l'échelle. */
 const legendGradient = computed(() => `linear-gradient(90deg, ${ramp.value.join(', ')})`)
 
-const fmt = computed(() => new Intl.NumberFormat(props.lang === 'en' ? 'en-US' : 'fr-FR'))
+const fmt = computed(() =>
+  props.valueFormatter
+    ? { format: props.valueFormatter }
+    : new Intl.NumberFormat(props.lang === 'en' ? 'en-US' : 'fr-FR'),
+)
 </script>
 
 <template>

package/dist/runtime/components/DashboardGrid.vue

@@ -0,0 +1,330 @@
+<!--
+  RmDashboardGrid - une grille de tuiles que l'on deplace et redimensionne,
+  a la maniere des tableaux de bord PostHog ou Grafana.
+
+  La grille ne sait rien du contenu : elle place des cellules (`layout`) et
+  rend chaque tuile par le slot `#item`. Le calcul (chevauchements, tassement
+  vers le haut) vit dans utils/dashboardGrid, pur et teste a part ; ce
+  composant ne fait que traduire pixels et cellules.
+
+  Pendant un geste, la grille montre le resultat sans l'emettre : la tuile
+  tenue suit le pointeur, une empreinte montre ou elle tombera, les autres
+  s'ecartent. `update:layout` ne part qu'au lacher, une fois : l'app enregistre
+  un geste, pas chaque pixel.
+
+  On saisit une tuile par sa poignee, ou par toute zone que l'app marque de
+  `data-rm-dash-drag` (l'en-tete d'une carte, par exemple). Un bouton, un lien
+  ou un champ dans cette zone restent cliquables : un appui ne devient un
+  deplacement qu'au-dela de quelques pixels.
+
+  Clavier : la poignee est un bouton. Les fleches deplacent la tuile d'une
+  cellule, Maj + fleches la redimensionnent, et la nouvelle place est lue
+  (region `aria-live`). Sans ca, la disposition serait reservee a la souris.
+
+  En dessous de `stackBelow` pixels de large, les tuiles s'empilent en une
+  colonne dans l'ordre de lecture (haut puis gauche) et l'edition se coupe :
+  deplacer une tuile sur une colonne de telephone n'a pas de sens.
+-->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { rmGridCompact, rmGridMove, type RmGridItem } from '../utils/dashboardGrid'
+
+const props = withDefaults(defineProps<{
+  /** Les tuiles et leurs cellules. Seules les cles de RmGridItem sont lues. */
+  layout: RmGridItem[]
+  /** Mode edition : poignees, deplacement, redimensionnement. */
+  editable?: boolean
+  cols?: number
+  /** Hauteur d'une ligne de grille, en pixels. */
+  rowHeight?: number
+  /** Ecart entre deux tuiles, en pixels. */
+  gap?: number
+  /** Largeur en dessous de laquelle les tuiles s'empilent. */
+  stackBelow?: number
+  /** Libelle d'une tuile pour la poignee et l'annonce : son titre, en general. */
+  itemLabel?: (id: string) => string
+  lang?: 'fr' | 'en'
+}>(), {
+  editable: false,
+  cols: 12,
+  rowHeight: 80,
+  gap: 16,
+  stackBelow: 640,
+  itemLabel: undefined,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{
+  'update:layout': [layout: RmGridItem[]]
+}>()
+
+defineSlots<{
+  item(props: { item: RmGridItem; editing: boolean }): unknown
+}>()
+
+const T = computed(() => props.lang === 'en'
+  ? {
+      grip: (name: string) => `Move ${name}. Arrow keys move, Shift and arrow keys resize.`,
+      resize: 'Resize',
+      at: (i: RmGridItem) => `Column ${i.x + 1}, row ${i.y + 1}, ${i.w} wide, ${i.h} high`,
+    }
+  : {
+      grip: (name: string) => `Déplacer ${name}. Les flèches déplacent, Maj et flèches redimensionnent.`,
+      resize: 'Redimensionner',
+      at: (i: RmGridItem) => `Colonne ${i.x + 1}, ligne ${i.y + 1}, largeur ${i.w}, hauteur ${i.h}`,
+    })
+
+const root = ref<HTMLElement>()
+const width = ref(0)
+let observer: ResizeObserver | undefined
+
+onMounted(() => {
+  if (!root.value) return
+  width.value = root.value.clientWidth
+  observer = new ResizeObserver(([entry]) => { width.value = entry!.contentRect.width })
+  observer.observe(root.value)
+})
+
+const stacked = computed(() => width.value > 0 && width.value < props.stackBelow)
+const editing = computed(() => props.editable && !stacked.value)
+const colWidth = computed(() => (width.value - props.gap * (props.cols - 1)) / props.cols)
+const stepX = computed(() => colWidth.value + props.gap)
+const stepY = computed(() => props.rowHeight + props.gap)
+
+const base = computed(() => rmGridCompact(props.layout.map(pick), props.cols))
+
+function pick(item: RmGridItem): RmGridItem {
+  const { id, x, y, w, h, minW, minH } = item
+  return { id, x, y, w, h, minW, minH }
+}
+
+// --- Geste en cours ------------------------------------------------------
+
+interface Gesture {
+  id: string
+  mode: 'move' | 'resize'
+  startX: number
+  startY: number
+  origin: RmGridItem
+  /** Decalage du pointeur, en pixels. */
+  dx: number
+  dy: number
+  started: boolean
+  pointerId: number
+}
+
+const gesture = ref<Gesture | null>(null)
+
+/** La cellule visee par le geste. */
+const target = computed(() => {
+  const g = gesture.value
+  if (!g?.started) return null
+  const o = g.origin
+  if (g.mode === 'move') {
+    return { x: Math.round(o.x + g.dx / stepX.value), y: Math.max(0, Math.round(o.y + g.dy / stepY.value)) }
+  }
+  return {
+    w: Math.max(1, Math.round(o.w + g.dx / stepX.value)),
+    h: Math.max(1, Math.round(o.h + g.dy / stepY.value)),
+  }
+})
+
+const preview = computed(() =>
+  target.value && gesture.value ? rmGridMove(base.value, props.cols, gesture.value.id, target.value) : base.value,
+)
+
+const shown = computed(() =>
+  stacked.value ? [...preview.value].sort((a, b) => a.y - b.y || a.x - b.x) : preview.value,
+)
+
+const height = computed(() => {
+  const rows = preview.value.reduce((bottom, item) => Math.max(bottom, item.y + item.h), 0)
+  return rows ? rows * stepY.value - props.gap : 0
+})
+
+function rect(item: RmGridItem) {
+  return {
+    left: item.x * stepX.value,
+    top: item.y * stepY.value,
+    width: item.w * stepX.value - props.gap,
+    height: item.h * stepY.value - props.gap,
+  }
+}
+
+function px(box: { left: number; top: number; width: number; height: number }) {
+  return {
+    transform: `translate(${box.left}px, ${box.top}px)`,
+    width: `${box.width}px`,
+    height: `${box.height}px`,
+  }
+}
+
+function itemStyle(item: RmGridItem) {
+  // Empilees, les tuiles gardent leur hauteur au minimum mais suivent leur contenu.
+  if (stacked.value) return { minHeight: `${item.h * stepY.value - props.gap}px` }
+  const g = gesture.value
+  if (g?.started && g.id === item.id) {
+    // La tuile tenue suit le pointeur, depuis sa place d'origine.
+    const box = rect(g.origin)
+    if (g.mode === 'move') return px({ ...box, left: box.left + g.dx, top: box.top + g.dy })
+    return px({ ...box, width: Math.max(colWidth.value, box.width + g.dx), height: Math.max(props.rowHeight, box.height + g.dy) })
+  }
+  return px(rect(item))
+}
+
+const placeholder = computed(() => {
+  const g = gesture.value
+  if (!g?.started) return null
+  const item = preview.value.find((i) => i.id === g.id)
+  return item ? px(rect(item)) : null
+})
+
+/** Ce qui reste cliquable meme dans une zone de saisie. */
+const INTERACTIVE = 'a, input, select, textarea, [contenteditable], [data-rm-dash-nodrag], button:not(.rm-dash__grip)'
+const THRESHOLD = 4
+
+function onPointerDown(event: PointerEvent, item: RmGridItem, mode: 'move' | 'resize') {
+  if (!editing.value || event.button !== 0) return
+  const el = event.target as HTMLElement
+  if (mode === 'move') {
+    if (!el.closest('.rm-dash__grip, [data-rm-dash-drag]')) return
+    if (el.closest(INTERACTIVE)) return
+  }
+  gesture.value = {
+    id: item.id,
+    mode,
+    startX: event.clientX,
+    startY: event.clientY,
+    origin: { ...item },
+    dx: 0,
+    dy: 0,
+    started: mode === 'resize',
+    pointerId: event.pointerId,
+  }
+  window.addEventListener('pointermove', onPointerMove)
+  window.addEventListener('pointerup', onPointerUp)
+  window.addEventListener('pointercancel', cancel)
+  window.addEventListener('keydown', onEscape)
+  if (mode === 'resize') event.preventDefault()
+}
+
+function onPointerMove(event: PointerEvent) {
+  const g = gesture.value
+  if (!g || event.pointerId !== g.pointerId) return
+  g.dx = event.clientX - g.startX
+  g.dy = event.clientY - g.startY
+  if (!g.started && Math.hypot(g.dx, g.dy) > THRESHOLD) {
+    g.started = true
+    // Plus de selection de texte pendant que l'on tient la tuile.
+    window.getSelection()?.removeAllRanges()
+  }
+  if (g.started) event.preventDefault()
+}
+
+function onPointerUp() {
+  const g = gesture.value
+  const result = g?.started && target.value ? preview.value : null
+  stop()
+  if (g && result) commit(result, g.id)
+}
+
+function onEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape') cancel()
+}
+
+function cancel() {
+  stop()
+}
+
+function stop() {
+  gesture.value = null
+  window.removeEventListener('pointermove', onPointerMove)
+  window.removeEventListener('pointerup', onPointerUp)
+  window.removeEventListener('pointercancel', cancel)
+  window.removeEventListener('keydown', onEscape)
+}
+
+onBeforeUnmount(() => {
+  stop()
+  observer?.disconnect()
+})
+
+// --- Clavier ---------------------------------------------------------------
+
+const announce = ref('')
+
+const KEYS: Record<string, [number, number]> = {
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1],
+}
+
+function onKey(event: KeyboardEvent, item: RmGridItem) {
+  const step = KEYS[event.key]
+  if (!step) return
+  event.preventDefault()
+  const [dx, dy] = step
+  const patch = event.shiftKey
+    ? { w: Math.max(1, item.w + dx), h: Math.max(1, item.h + dy) }
+    : { x: item.x + dx, y: Math.max(0, item.y + dy) }
+  commit(rmGridMove(base.value, props.cols, item.id, patch), item.id)
+}
+
+function commit(next: RmGridItem[], id: string) {
+  const changed = next.some((item) => {
+    const before = base.value.find((b) => b.id === item.id)
+    return !before || before.x !== item.x || before.y !== item.y || before.w !== item.w || before.h !== item.h
+  })
+  const moved = next.find((item) => item.id === id)
+  if (moved) announce.value = T.value.at(moved)
+  if (changed) emit('update:layout', next)
+}
+
+function label(id: string) {
+  return props.itemLabel?.(id) ?? id
+}
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="rm-dash"
+    :class="{ 'rm-dash--stacked': stacked, 'rm-dash--editing': editing, 'rm-dash--moving': gesture?.started }"
+    :style="stacked ? undefined : { height: `${height}px` }"
+  >
+    <div v-if="placeholder" class="rm-dash__placeholder" :style="placeholder" aria-hidden="true" />
+    <div
+      v-for="item in shown"
+      :key="item.id"
+      class="rm-dash__item"
+      :class="{ 'rm-dash__item--held': gesture?.started && gesture.id === item.id }"
+      :style="width ? itemStyle(item) : undefined"
+      @pointerdown="onPointerDown($event, item, 'move')"
+    >
+      <slot name="item" :item="item" :editing="editing" />
+      <template v-if="editing">
+        <button
+          type="button"
+          class="rm-dash__grip"
+          :aria-label="T.grip(label(item.id))"
+          :title="T.grip(label(item.id))"
+          @keydown="onKey($event, item)"
+        >
+          <RmIcon name="DotsSix" :size="16" weight="bold" />
+        </button>
+        <span
+          class="rm-dash__resize"
+          :title="T.resize"
+          aria-hidden="true"
+          @pointerdown.stop="onPointerDown($event, item, 'resize')"
+        />
+      </template>
+    </div>
+    <p class="rm-dash__live" aria-live="polite">{{ announce }}</p>
+  </div>
+</template>
+
+<style scoped>
+.rm-dash{position:relative;width:100%}.rm-dash__item{display:flex;flex-direction:column;left:0;min-width:0;position:absolute;top:0;transition:transform var(--duration-base) var(--ease-out),width var(--duration-base) var(--ease-out),height var(--duration-base) var(--ease-out)}.rm-dash__item>:deep(:first-child){flex:1;min-height:0}.rm-dash--stacked{display:flex;flex-direction:column;gap:var(--space-4)}.rm-dash--stacked .rm-dash__item{position:relative;transform:none}.rm-dash__item--held{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);cursor:grabbing;transition:none;z-index:3}.rm-dash--moving{-webkit-user-select:none;-moz-user-select:none;user-select:none}.rm-dash--editing :deep([data-rm-dash-drag]){cursor:grab;touch-action:none}.rm-dash__placeholder{background:color-mix(in srgb,var(--color-primary) 8%,transparent);border:2px dashed var(--color-primary);border-radius:var(--radius-lg);left:0;position:absolute;top:0;transition:transform var(--duration-fast) var(--ease-out),width var(--duration-fast) var(--ease-out),height var(--duration-fast) var(--ease-out);z-index:0}.rm-dash__grip{align-items:center;background:var(--bg-surface-2);border-radius:999px;color:var(--text-muted);cursor:grab;display:inline-flex;height:16px;justify-content:center;left:50%;padding:0;position:absolute;top:4px;touch-action:none;transform:translateX(-50%);width:36px;z-index:2}.rm-dash__grip:hover{color:var(--text-primary)}.rm-dash__grip:focus-visible{box-shadow:var(--shadow-focus);color:var(--text-primary);outline:none}.rm-dash__resize{background:linear-gradient(135deg,transparent 55%,var(--text-muted) 55%,var(--text-muted) 62%,transparent 62%),linear-gradient(135deg,transparent 75%,var(--text-muted) 75%,var(--text-muted) 82%,transparent 82%);bottom:2px;cursor:nwse-resize;height:14px;position:absolute;right:2px;touch-action:none;width:14px;z-index:2}.rm-dash__live{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion:reduce){.rm-dash__item,.rm-dash__placeholder{transition:none}}
+</style>

package/dist/runtime/components/LineChart.vue

@@ -52,6 +52,12 @@ const props = withDefaults(defineProps<{
    * nombre entier avec ses separateurs de milliers.
    */
   numberFormat?: 'compact' | 'plain'
+  /**
+   * Formateur de l'appelant, pour l'axe, les etiquettes ET l'infobulle. Passe
+   * avant `numberFormat` : une app qui a sa propre regle d'arrondi la veut
+   * partout, y compris au survol.
+   */
+  valueFormatter?: (value: number) => string
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string
 }>(), {
@@ -64,6 +70,7 @@ const props = withDefaults(defineProps<{
   legendPosition: 'bottom',
   startAtZero: false,
   numberFormat: undefined,
+  valueFormatter: undefined,
   height: 'standard',
   description: undefined,
 })
@@ -71,6 +78,7 @@ const props = withDefaults(defineProps<{
 const { theme, palette, decal } = useChartTheme()
 
 const formatter = computed(() => {
+  if (props.valueFormatter) return props.valueFormatter
   if (props.numberFormat === 'compact') return rmCompact
   if (props.numberFormat === 'plain') return rmNumber
   return undefined
@@ -100,6 +108,7 @@ const option = computed(() => {
     legendPosition: props.legendPosition,
     startAtZero: props.startAtZero,
     valueFormatter: formatter.value,
+    tooltipFormatter: props.valueFormatter,
   }) as Record<string, any>
   if (built.legend && Object.keys(legendSelected.value).length) {
     built.legend = { ...built.legend, selected: { ...legendSelected.value } }

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

@@ -200,8 +200,24 @@ export interface RmSeriesInput {
  * (« 1 240 (18 %) »), et c'est l'index qui la retrouve.
  */
 export type RmBarLabelFormatter = (value: number, index: number) => string;
-export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
+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;
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
+    } | {
+        valueFormatter?: undefined;
         trigger: string;
         backgroundColor: string;
         textStyle: {
@@ -270,6 +286,7 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
             show: boolean;
         };
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -284,6 +301,7 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     };
     yAxis: {
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -334,7 +352,38 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     };
 };
 /** Bar chart horizontal, avec valeur affichee en bout de barre. */
-export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
+export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter, valueFormatter?: (value: number) => string): {
+    tooltip: {
+        valueFormatter: (value: unknown) => string;
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
+    } | {
+        valueFormatter?: undefined;
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
+    };
     grid: {
         left: number;
         right: number;
@@ -344,6 +393,7 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
     };
     xAxis: {
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -365,6 +415,7 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
             show: boolean;
         };
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -409,21 +460,6 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
     textStyle: {
         fontFamily: string;
     };
-    tooltip: {
-        trigger: string;
-        backgroundColor: string;
-        textStyle: {
-            color: string;
-            fontFamily: string;
-            fontSize: number;
-        };
-        borderColor: string;
-        borderWidth: number;
-        appendTo: string;
-        confine: boolean;
-        enterable: boolean;
-        extraCssText: string;
-    };
 };
 /** Line ou area chart. `step` produit la marche d'escalier des series de prix. */
 /**
@@ -471,6 +507,11 @@ 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;
+    /**
+     * 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.
+     */
+    tooltipFormatter?: (value: number) => string;
 }): {
     animation: boolean;
     tooltip: {
@@ -544,6 +585,7 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         };
         boundaryGap: boolean;
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;

package/dist/runtime/utils/chart.js

@@ -150,21 +150,26 @@ const valueAxis = (theme, label, hidden = false, formatter) => ({
   axisTick: hidden ? { show: false } : void 0,
   splitLine: { lineStyle: { color: theme.splitLine } }
 });
-const axisCommon = (theme) => ({
-  axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
+const axisCommon = (theme, formatter) => ({
+  axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT, ...formatter ? { formatter } : {} },
   axisLine: { lineStyle: { color: theme.axisLine } },
   splitLine: { lineStyle: { color: theme.splitLine } }
 });
-export function rmBarVerticalOption(categories, series, theme, palette, decal = false, formatter) {
+const rmTooltipValue = (formatter) => formatter ? { valueFormatter: (value) => typeof value === "number" ? formatter(value) : "" } : {};
+export function rmBarVerticalOption(categories, series, theme, palette, decal = false, formatter, valueFormatter) {
   return {
     ...rmBaseOption(theme, decal),
-    tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: rmTooltipTrigger(series.length) },
+    tooltip: {
+      ...rmBaseOption(theme, decal).tooltip,
+      trigger: rmTooltipTrigger(series.length),
+      ...rmTooltipValue(valueFormatter)
+    },
     legend: series.length > 1 ? rmLegend(theme, series.length, "bottom", series.map((s) => String(s.name ?? ""))) : void 0,
     // La legende passee sous le graphe prend sa place dans la gouttiere basse,
     // sinon elle recouvre les libelles de l'axe des abscisses.
     grid: { ...rmBaseOption(theme, decal).grid, bottom: series.length > 1 ? 56 : 36 },
     xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false } },
-    yAxis: { type: "value", ...axisCommon(theme) },
+    yAxis: { type: "value", ...axisCommon(theme, valueFormatter) },
     series: series.map((s, i) => ({
       type: "bar",
       name: s.name,
@@ -184,11 +189,12 @@ export function rmBarVerticalOption(categories, series, theme, palette, decal =
     }))
   };
 }
-export function rmBarHorizontalOption(labels, values, theme, palette, decal = false, formatter) {
+export function rmBarHorizontalOption(labels, values, theme, palette, decal = false, formatter, valueFormatter) {
   return {
     ...rmBaseOption(theme, decal),
+    tooltip: { ...rmBaseOption(theme, decal).tooltip, ...rmTooltipValue(valueFormatter) },
     grid: { left: 140, right: 60, top: 16, bottom: 24, containLabel: true },
-    xAxis: { type: "value", ...axisCommon(theme) },
+    xAxis: { type: "value", ...axisCommon(theme, valueFormatter) },
     yAxis: { type: "category", data: labels, ...axisCommon(theme), splitLine: { show: false } },
     series: [{
       type: "bar",
@@ -203,7 +209,9 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
         fontSize: 11,
         color: theme.mutedColor,
         fontFamily: FONT,
-        formatter: formatter ? (p) => formatter(p.value, p.dataIndex) : void 0
+        // L'etiquette est toujours posee ici : sans formateur d'etiquette, elle
+        // suit au moins celui des valeurs plutot que le nombre brut.
+        formatter: formatter ? (p) => formatter(p.value, p.dataIndex) : valueFormatter ? (p) => valueFormatter(p.value) : void 0
       }
     }]
   };
@@ -220,7 +228,8 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     hideValueAxis = false,
     legendPosition = "bottom",
     startAtZero = false,
-    valueFormatter
+    valueFormatter,
+    tooltipFormatter
   } = options;
   const labelled = valueLabels ?? series.length <= RM_LINE_LABEL_MAX_SERIES;
   const AREA_MAX_SERIES = 10;
@@ -228,7 +237,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
   const dual = series.some((s) => s.axis === 1);
   const bottomLegend = legendPosition === "bottom";
   const format = (value) => valueFormatter ? valueFormatter(value) : String(value);
-  const tooltipFormat = (value) => valueFormatter ? rmNumber(value) : String(value);
+  const tooltipFormat = (value) => tooltipFormatter ? tooltipFormatter(value) : valueFormatter ? rmNumber(value) : String(value);
   const values = series.flatMap((s) => s.data).filter((v) => typeof v === "number");
   const floorAtZero = startAtZero && values.length > 0 && Math.min(...values) >= 0;
   const base = rmBaseOption(theme, decal);
@@ -241,7 +250,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     tooltip: {
       ...base.tooltip,
       trigger: rmTooltipTrigger(series.length),
-      ...valueFormatter ? { valueFormatter: (value) => typeof value === "number" ? tooltipFormat(value) : "" } : {}
+      ...valueFormatter || tooltipFormatter ? { valueFormatter: (value) => typeof value === "number" ? tooltipFormat(value) : "" } : {}
     },
     // Legende obligatoire en double axe : sans elle, rien ne dit quelle courbe
     // se lit sur quel axe.

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

@@ -0,0 +1,34 @@
+/**
+ * Calcul de la grille de RmDashboardGrid : des tuiles posees en cellules
+ * (colonnes fixes, lignes infinies), sans chevauchement, tassees vers le haut.
+ *
+ * Pur et sans DOM : le composant ne fait que convertir pixels et cellules. La
+ * regle est celle des tableaux de bord PostHog ou Grafana : une tuile deplacee
+ * prend la place visee, celles qu'elle touche descendent, puis tout remonte
+ * dans les trous. Un trou ne survit jamais a un geste.
+ */
+export interface RmGridItem {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW?: number;
+    minH?: number;
+}
+/** Une tuile ramenee dans la grille : taille entre son minimum et `cols`, x dans les bornes. */
+export declare function rmGridClamp(item: RmGridItem, cols: number): RmGridItem;
+/**
+ * Tasse la grille vers le haut et defait les chevauchements.
+ *
+ * `pinned` garde sa place pendant un geste : c'est la tuile que l'on tient, les
+ * autres s'ecartent pour elle. Rend les tuiles dans l'ordre recu.
+ */
+export declare function rmGridCompact(items: RmGridItem[], cols: number, pinned?: string): RmGridItem[];
+/**
+ * La grille apres avoir pose `id` en `patch` (position et/ou taille) : la
+ * tuile prend la place visee, les autres s'ecartent, puis tout se tasse.
+ */
+export declare function rmGridMove(items: RmGridItem[], cols: number, id: string, patch: Partial<Pick<RmGridItem, 'x' | 'y' | 'w' | 'h'>>): RmGridItem[];
+/** La premiere ligne libre sous toutes les tuiles : la ou poser une tuile ajoutee. */
+export declare function rmGridBottom(items: RmGridItem[]): number;

package/dist/runtime/utils/dashboardGrid.js

@@ -0,0 +1,32 @@
+function collide(a, b) {
+  return a.id !== b.id && a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+}
+export function rmGridClamp(item, cols) {
+  const w = Math.min(cols, Math.max(item.minW ?? 1, Math.round(item.w)));
+  const h = Math.max(item.minH ?? 1, Math.round(item.h));
+  const x = Math.min(cols - w, Math.max(0, Math.round(item.x)));
+  return { ...item, x, y: Math.max(0, Math.round(item.y)), w, h };
+}
+export function rmGridCompact(items, cols, pinned) {
+  const clamped = items.map((item) => rmGridClamp(item, cols));
+  const placed = clamped.filter((item) => item.id === pinned);
+  const rest = clamped.filter((item) => item.id !== pinned).sort((a, b) => a.y - b.y || a.x - b.x);
+  for (const item of rest) {
+    while (item.y > 0 && !placed.some((other) => collide({ ...item, y: item.y - 1 }, other))) item.y--;
+    let hit = placed.find((other) => collide(item, other));
+    while (hit) {
+      item.y = hit.y + hit.h;
+      hit = placed.find((other) => collide(item, other));
+    }
+    placed.push(item);
+  }
+  const byId = new Map(placed.map((item) => [item.id, item]));
+  return clamped.map((item) => byId.get(item.id));
+}
+export function rmGridMove(items, cols, id, patch) {
+  const moved = items.map((item) => item.id === id ? { ...item, ...patch } : item);
+  return rmGridCompact(rmGridCompact(moved, cols, id), cols);
+}
+export function rmGridBottom(items) {
+  return items.reduce((bottom, item) => Math.max(bottom, item.y + item.h), 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.206",
+  "version": "0.1.208",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",