@dnax/ui 0.0.66 → 0.0.69

package/lib/chartFormat.ts

@@ -0,0 +1,222 @@
+// Formatage des valeurs de `<q-chart>` (axes, info-bulles, étiquettes, tableaux).
+//
+// Le traducteur (`chartToECharts`) reste **pur** : ce module ne lit ni le DOM ni la locale
+// du navigateur. La locale vient de la prop `locale` (défaut : `fr-FR`, cohérent avec le
+// reste du design system), éventuellement surchargée par un format.
+//
+// Rien n'est formaté tant que l'appelant ne demande rien : sans `format`, une valeur sort
+// telle quelle (`String(value)`), donc aucun changement de comportement rétroactif.
+
+/** Format « court » : une chaîne suffit (`format: "compact"`) */
+export type QChartFormatKind =
+  | "number"
+  | "decimal"
+  | "percent"
+  | "compact"
+  | "currency"
+  | "date"
+  | "time"
+  | "datetime"
+
+/** Contexte passé aux formateurs (fonction ou objet) */
+export interface QChartFormatContext {
+  /** Locale de repli (celle du graphique) */
+  locale?: string
+  /** Index de la donnée dans sa marque */
+  index?: number
+  /** Ligne d'origine */
+  row?: any
+  /** Nom de la série / de la catégorie, si connu */
+  name?: string
+}
+
+/** Format complet (objet) */
+export interface QChartFormatOptions {
+  /** Famille de formatage */
+  style?: QChartFormatKind
+  /** Locale BCP 47 (`fr-FR`, `en-US`…) — prioritaire sur celle du graphique */
+  locale?: string
+  /** Devise ISO 4217 pour `currency` (`XOF` par défaut → « F CFA ») */
+  currency?: string
+  /** Fuseau horaire IANA (`Africa/Dakar`…) pour les formats de date */
+  timeZone?: string
+  minimumFractionDigits?: number
+  maximumFractionDigits?: number
+  /** `date` / `datetime` : style de la partie date */
+  dateStyle?: "full" | "long" | "medium" | "short"
+  /** `time` / `datetime` : style de la partie heure */
+  timeStyle?: "full" | "long" | "medium" | "short"
+  /** Texte ajouté avant / après la valeur formatée */
+  prefix?: string
+  suffix?: string
+}
+
+/** Un format : chaîne courte, objet d'options, ou fonction `(value, ctx) => string` */
+export type QChartFormat =
+  | QChartFormatKind
+  | QChartFormatOptions
+  | ((value: any, ctx?: QChartFormatContext) => string)
+
+/** Locale par défaut de tous les formats (l'application peut la changer par prop) */
+export const DEFAULT_LOCALE = "fr-FR"
+
+/** Devise par défaut : franc CFA (lisible en `fr-FR` : « 1 234 F CFA ») */
+export const DEFAULT_CURRENCY = "XOF"
+
+const isObject = (v: any): v is QChartFormatOptions => v !== null && typeof v === "object"
+
+/** Normalise un format en options exploitables (`undefined` si aucun format demandé) */
+export function normalizeFormat(
+  format: QChartFormat | undefined,
+): QChartFormatOptions | undefined {
+  if (format === undefined || format === null) return undefined
+  if (typeof format === "string") return { style: format }
+  if (typeof format === "function") return undefined
+  if (isObject(format)) return format
+  return undefined
+}
+
+/** Nombre fini ? (`null`, `""`, `NaN` sont écartés) */
+const finite = (v: any): v is number => typeof v === "number" && Number.isFinite(v)
+
+/** `value` → `Date` (nombre = timestamp, chaîne = ISO / date lisible) */
+function toDate(value: any): Date | undefined {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? undefined : value
+  if (finite(value)) {
+    // Un timestamp en **secondes** (API usuelles) est ramené en millisecondes.
+    const ms = Math.abs(value) < 1e11 ? value * 1000 : value
+    const d = new Date(ms)
+    return Number.isNaN(d.getTime()) ? undefined : d
+  }
+  if (typeof value === "string" && value.trim() !== "") {
+    const d = new Date(value)
+    return Number.isNaN(d.getTime()) ? undefined : d
+  }
+  return undefined
+}
+
+const dateFormatted = (value: any, options: QChartFormatOptions, locale: string): string | undefined => {
+  const date = toDate(value)
+  if (!date) return undefined
+  const style = options.style
+  const opts: Intl.DateTimeFormatOptions = { timeZone: options.timeZone }
+  if (style === "date" || style === "datetime") {
+    opts.dateStyle = options.dateStyle ?? (style === "datetime" ? "short" : "medium")
+  }
+  if (style === "time" || style === "datetime") {
+    opts.timeStyle = options.timeStyle ?? "short"
+  }
+  return new Intl.DateTimeFormat(locale, opts).format(date)
+}
+
+const numberFormatted = (value: any, options: QChartFormatOptions, locale: string): string | undefined => {
+  const style = options.style ?? "number"
+  if (typeof value === "boolean") return String(value)
+  if (!finite(value)) return undefined
+  const digits: Intl.NumberFormatOptions = {}
+  if (options.minimumFractionDigits !== undefined) digits.minimumFractionDigits = options.minimumFractionDigits
+  if (options.maximumFractionDigits !== undefined) digits.maximumFractionDigits = options.maximumFractionDigits
+  if (style === "compact") {
+    return new Intl.NumberFormat(locale, {
+      notation: "compact",
+      compactDisplay: "short",
+      maximumFractionDigits: options.maximumFractionDigits ?? 1,
+    }).format(value)
+  }
+  if (style === "currency") {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: options.currency ?? DEFAULT_CURRENCY,
+      ...digits,
+    }).format(value)
+  }
+  if (style === "percent") {
+    // La valeur est **déjà en pourcentage** (42 → « 42 % ») : `Intl` multiplie par 100,
+    // on divise donc avant (et non l'inverse, qui donnerait 4200 %).
+    return new Intl.NumberFormat(locale, {
+      style: "percent",
+      maximumFractionDigits: options.maximumFractionDigits ?? 1,
+      ...digits,
+    }).format(value / 100)
+  }
+  // `number` / `decimal` / style absent : nombre localisé
+  return new Intl.NumberFormat(locale, {
+    maximumFractionDigits: options.maximumFractionDigits ?? 2,
+    ...digits,
+  }).format(value)
+}
+
+/** Formate une valeur selon `format`.
+ *
+ *  - `undefined` / `null` → chaîne vide ;
+ *  - sans `format` → `String(value)` (aucun formatage implicite) ;
+ *  - `percent` attend une valeur **en pourcentage** (`42` → « 42 % ») ;
+ *  - `currency` utilise `XOF` (F CFA) par défaut ;
+ *  - une date peut être un `Date`, un timestamp (s/ms) ou une chaîne ISO. */
+export function formatValue(
+  value: any,
+  format?: QChartFormat,
+  ctx: QChartFormatContext = {},
+): string {
+  if (typeof format === "function") {
+    const out = format(value, ctx)
+    return out === undefined || out === null ? "" : String(out)
+  }
+  if (value === undefined || value === null || value === "") return ""
+  const options = normalizeFormat(format)
+  if (!options) return String(value)
+  const locale = options.locale ?? ctx.locale ?? DEFAULT_LOCALE
+  const temporal =
+    options.style === "date" || options.style === "time" || options.style === "datetime"
+  const text = temporal
+    ? (dateFormatted(value, options, locale) ?? String(value))
+    : (numberFormatted(value, options, locale) ?? String(value))
+  return `${options.prefix ?? ""}${text}${options.suffix ?? ""}`
+}
+
+/** Un format de pourcentage sans `%` (pour composer soi-même un libellé) */
+export function formatPercent(value: any, format?: QChartFormat, ctx?: QChartFormatContext): string {
+  const options = normalizeFormat(format)
+  const merged: QChartFormat = { ...(options ?? {}), style: "percent" }
+  return formatValue(value, merged, ctx)
+}
+
+
+/** Formateur ECharts pour un axe (`axisLabel.formatter`), ou `undefined` si rien n'est demandé. */
+export function axisFormatter(
+  format: QChartFormat | undefined,
+  ctx: QChartFormatContext = {},
+): ((value: any) => string) | undefined {
+  if (format === undefined || format === null) return undefined
+  return (value: any) => formatValue(value, format, ctx)
+}
+
+/** Graduation d'un axe **temporel** selon sa granularité.
+ *  `auto` (défaut) laisse le moteur choisir : aucune fonction n'est renvoyée. */
+export function timeTickFormatter(
+  unit: "auto" | "day" | "week" | "month" | "quarter" | "year" | undefined,
+  locale = DEFAULT_LOCALE,
+  timeZone?: string,
+): ((value: any) => string) | undefined {
+  if (!unit || unit === "auto") return undefined
+  return (value: any) => {
+    const date = toDate(value)
+    if (!date) return String(value ?? "")
+    if (unit === "quarter") {
+      const quarter = Math.floor(date.getUTCMonth() / 3) + 1
+      const year = String(date.getUTCFullYear()).slice(2)
+      return `T${quarter} ${year}`
+    }
+    const opts: Intl.DateTimeFormatOptions = { timeZone }
+    if (unit === "day" || unit === "week") {
+      opts.day = "numeric"
+      opts.month = "short"
+    } else if (unit === "month") {
+      opts.month = "short"
+      opts.year = "2-digit"
+    } else {
+      opts.year = "numeric"
+    }
+    return new Intl.DateTimeFormat(locale, opts).format(date)
+  }
+}

package/lib/chartStats.ts

@@ -0,0 +1,178 @@
+// Calculs statistiques du traducteur de graphiques — **purs**, testables sans DOM.
+//
+// Utilisés par les marques `histogram`, `boxplot` et `waterfall` (P1 de `QChart`).
+// Aucune notion de couleur ni de rendu : uniquement des nombres, pour que les tests
+// portent sur la sémantique (tranches, quartiles, cumul) et non sur ECharts.
+
+/** Une tranche d'histogramme */
+export interface QChartBin {
+  /** Borne basse (incluse) */
+  x0: number
+  /** Borne haute (exclue, sauf la dernière tranche) */
+  x1: number
+  /** Nombre de valeurs dans la tranche */
+  count: number
+  /** Libellé par défaut (`x0 – x1`) — l'appelant peut le reformater */
+  label: string
+}
+
+/** Arrondit un nombre de borne pour les libellés (évite `0.30000000000000004`) */
+const clean = (v: number) => Number(v.toPrecision(12))
+
+/** Histogramme : répartit des valeurs numériques en `bins` tranches.
+ *
+ *  - `bins` par défaut : `ceil(sqrt(n))` (règle de la racine), borné à `[1, 40]` ;
+ *  - `domain` force les bornes ; sinon `[min, max]` des valeurs ;
+ *  - une valeur `null` / non finie est ignorée ;
+ *  - la borne haute de la **dernière** tranche est inclusive (la valeur maximale compte). */
+export function histogram(
+  values: readonly any[],
+  options: { bins?: number; domain?: [number, number] } = {},
+): QChartBin[] {
+  const nums = values.filter((v): v is number => typeof v === "number" && Number.isFinite(v))
+  if (nums.length === 0) return []
+  let lo = options.domain?.[0] ?? Math.min(...nums)
+  let hi = options.domain?.[1] ?? Math.max(...nums)
+  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return []
+  if (hi < lo) [lo, hi] = [hi, lo]
+  const requested = Math.max(1, Math.min(40, Math.round(options.bins ?? Math.ceil(Math.sqrt(nums.length)))))
+  // Domaine dégénéré (une seule valeur) : une tranche autour de la valeur
+  if (hi === lo) {
+    return [{ x0: lo, x1: hi, count: nums.length, label: `${clean(lo)}` }]
+  }
+  // Le nombre de tranches demandé est **respecté** : pas d'arrondi « joli » qui le changerait.
+  const step = (hi - lo) / requested
+  const bins: QChartBin[] = Array.from({ length: requested }, (_, i) => ({
+    x0: clean(lo + i * step),
+    x1: clean(lo + (i + 1) * step),
+    count: 0,
+    label: "",
+  }))
+  for (const v of nums) {
+    // La valeur maximale tombe dans la dernière tranche (borne haute inclusive)
+    let i = Math.floor((v - lo) / step)
+    if (i < 0) i = 0
+    if (i >= requested) i = requested - 1
+    const bin = bins[i]
+    if (bin) bin.count++
+  }
+  for (const bin of bins) bin.label = `${clean(bin.x0)} – ${clean(bin.x1)}`
+  return bins
+}
+
+/** Quantile (interpolation linéaire, méthode R-7 — celle d'Excel `QUARTILE.INC`) */
+export function quantile(sorted: readonly number[], p: number): number {
+  if (sorted.length === 0) return Number.NaN
+  const pos = (sorted.length - 1) * Math.max(0, Math.min(1, p))
+  const lower = Math.floor(pos)
+  const upper = Math.ceil(pos)
+  if (lower === upper) return sorted[lower]!
+  return sorted[lower]! + (sorted[upper]! - sorted[lower]!) * (pos - lower)
+}
+
+/** Boîte à moustaches (cinq nombres) */
+export interface QChartBox {
+  min: number
+  q1: number
+  median: number
+  q3: number
+  max: number
+}
+
+/** Statistiques d'une série de valeurs (`undefined` si aucune valeur numérique) */
+export function boxStats(values: readonly any[]): QChartBox | undefined {
+  const nums = values
+    .filter((v): v is number => typeof v === "number" && Number.isFinite(v))
+    .slice()
+    .sort((a, b) => a - b)
+  if (nums.length === 0) return undefined
+  return {
+    min: nums[0]!,
+    q1: quantile(nums, 0.25),
+    median: quantile(nums, 0.5),
+    q3: quantile(nums, 0.75),
+    max: nums[nums.length - 1]!,
+  }
+}
+
+/** Ajustement affine par moindres carrés — `undefined` si les abscisses sont toutes égales */
+export function linearFit(
+  points: readonly (readonly [number, number])[],
+): { slope: number; intercept: number } | undefined {
+  const pts = points.filter(
+    ([x, y]) => typeof x === "number" && typeof y === "number" && Number.isFinite(x) && Number.isFinite(y),
+  )
+  if (pts.length < 2) return undefined
+  const n = pts.length
+  const sumX = pts.reduce((s, [x]) => s + x, 0)
+  const sumY = pts.reduce((s, [, y]) => s + y, 0)
+  const meanX = sumX / n
+  const meanY = sumY / n
+  let num = 0
+  let den = 0
+  for (const [x, y] of pts) {
+    num += (x - meanX) * (y - meanY)
+    den += (x - meanX) ** 2
+  }
+  if (den === 0) return undefined
+  const slope = num / den
+  return { slope, intercept: meanY - slope * meanX }
+}
+
+/** Étape d'un graphique en cascade (waterfall) */
+export interface QChartWaterfallStep {
+  /** Valeur de départ de la barre (le cumul précédent) */
+  base: number
+  /** Hauteur signée de la barre (le delta) */
+  delta: number
+  /** Cumul après l'étape */
+  total: number
+  /** Ligne de **total** (barre posée depuis zéro) ? */
+  totalRow: boolean
+}
+
+/** Décompose des deltas en barres flottantes cumulées.
+ *
+ *  `flags[i] === true` marque une ligne de **total** : la barre part de zéro et sa hauteur
+ *  est le cumul courant (elle ne s'ajoute pas une seconde fois au cumul). */
+export function waterfallSteps(
+  values: readonly any[],
+  flags: readonly any[] = [],
+): QChartWaterfallStep[] {
+  const steps: QChartWaterfallStep[] = []
+  let running = 0
+  for (let i = 0; i < values.length; i++) {
+    const raw = values[i]
+    const value = typeof raw === "number" && Number.isFinite(raw) ? raw : 0
+    const totalRow = flags[i] === true || flags[i] === "total"
+    if (totalRow) {
+      steps.push({ base: 0, delta: running, total: running, totalRow: true })
+      continue
+    }
+    steps.push({ base: running, delta: value, total: running + value, totalRow: false })
+    running += value
+  }
+  return steps
+}
+
+/** Répartition en pourcentage (somme des valeurs absolues, `0` évité).
+ *  Une valeur nulle ou non finie vaut `0` : la part reste calculable. */
+export function percentShares(values: readonly any[]): number[] {
+  const nums = values.map((v) => (typeof v === "number" && Number.isFinite(v) ? v : 0))
+  const total = nums.reduce((s, v) => s + Math.abs(v), 0)
+  return total === 0 ? nums.map(() => 0) : nums.map((v) => (Math.abs(v) / total) * 100)
+}
+
+/** Somme par catégorie — sert au calcul des **empilements 100 %**. */
+export function categoryTotals(
+  entries: readonly { category: any; value: any }[],
+): Map<string, number> {
+  const totals = new Map<string, number>()
+  for (const { category, value } of entries) {
+    if (category === undefined || category === null) continue
+    if (typeof value !== "number" || !Number.isFinite(value)) continue
+    const key = String(category)
+    totals.set(key, (totals.get(key) ?? 0) + value)
+  }
+  return totals
+}

package/lib/formula.test.ts

@@ -184,6 +184,14 @@ describe("fonctions dates", () => {
   })
 })
 
+describe("espaces autour de la formule", () => {
+  const e = harness([[]])
+  it("accepte des espaces avant le `=` (isFormulaRaw les tolère)", () => {
+    expect(e("  =1+2")).toBe(3)
+    expect(e(" =SUM(1,2) ")).toBe(3)
+  })
+})
+
 describe("math & erreurs de type", () => {
   const e = harness([[]])
   it("ABS / ROUND / INT / MOD / SQRT / POWER", () => {

package/lib/formula.ts

@@ -1349,9 +1349,11 @@ export const FORMULA_FUNCTION_NAMES: string[] = [
   ]),
 ].sort()
 
-/** Évalue une formule ("=…" optionnel). Retourne une valeur ou une FormulaError. */
+/** Évalue une formule ("=…" optionnel, espaces ignorés). Retourne une valeur ou une FormulaError. */
 export function evaluateFormula(source: string, ctx: FormulaContext): FormulaValue {
-  const src = source.startsWith("=") ? source.slice(1) : source
+  // `isFormulaRaw` accepte des espaces avant le `=` : le moteur doit en faire autant.
+  const trimmed = source.trim()
+  const src = trimmed.startsWith("=") ? trimmed.slice(1) : trimmed
   try {
     const parser = new Parser(src)
     const node = parser.parseExpr()

package/lib/history.test.ts

@@ -0,0 +1,78 @@
+// Historique undo/redo — le point critique est la **réactivité** : des piles en tableau
+// simple laissent `canUndo` figé à `false` (boutons inertes, Ctrl+Z sans effet).
+import { describe, expect, it } from "bun:test"
+import { effect, nextTick } from "vue"
+import { createHistory } from "./history"
+
+describe("createHistory", () => {
+  it("canUndo / canRedo sont réactifs (piles remplacées, pas mutées)", async () => {
+    const h = createHistory<string>(10)
+    const seen: boolean[] = []
+    effect(() => {
+      seen.push(h.canUndo.value)
+    })
+    expect(seen).toEqual([false])
+
+    h.push("a")
+    await nextTick()
+    expect(seen.at(-1)).toBe(true)
+
+    h.undo("b")
+    await nextTick()
+    expect(h.canRedo.value).toBe(true)
+    expect(h.canUndo.value).toBe(false)
+
+    h.redo("c")
+    await nextTick()
+    expect(h.canUndo.value).toBe(true)
+    expect(seen).toContain(true)
+  })
+
+  it("dépile dans le bon ordre et empile l'état courant dans la pile opposée", () => {
+    const h = createHistory<number>()
+    h.push(1)
+    h.push(2)
+
+    expect(h.undo(99)).toBe(2)
+    expect(h.undo(98)).toBe(1)
+    expect(h.undo(97)).toBeNull()
+    expect(h.canUndo.value).toBe(false)
+    expect(h.canRedo.value).toBe(true)
+
+    expect(h.redo(50)).toBe(98)
+    expect(h.redo(51)).toBe(99)
+    expect(h.redo(52)).toBeNull()
+    expect(h.canUndo.value).toBe(true)
+  })
+
+  it("une nouvelle action vide la pile redo", () => {
+    const h = createHistory<number>()
+    h.push(1)
+    h.undo(2)
+    expect(h.canRedo.value).toBe(true)
+
+    h.push(3)
+    expect(h.canRedo.value).toBe(false)
+    expect(h.redo(4)).toBeNull()
+  })
+
+  it("borne la pile à `limit` (la plus ancienne entrée est oubliée)", () => {
+    const h = createHistory<number>(2)
+    h.push(1)
+    h.push(2)
+    h.push(3)
+    expect(h.undoStack.value).toEqual([2, 3])
+    expect(h.undo(0)).toBe(3)
+    expect(h.undo(0)).toBe(2)
+    expect(h.undo(0)).toBeNull()
+  })
+
+  it("clear vide les deux piles", () => {
+    const h = createHistory<number>()
+    h.push(1)
+    h.undo(2)
+    h.clear()
+    expect(h.canUndo.value).toBe(false)
+    expect(h.canRedo.value).toBe(false)
+  })
+})

package/lib/history.ts

@@ -0,0 +1,72 @@
+// Historique undo/redo réactif (QSpreadsheet).
+//
+// Les piles doivent être des `shallowRef` **remplacées** à chaque opération : un `push`
+// sur un tableau simple ne déclenche aucune réactivité. C'est exactement le bug qui
+// figeait `canUndo`/`canRedo` à `false` (boutons désactivés et Ctrl+Z inerte), même
+// quand `pushHistory()` avait bien été appelé (suppression de ligne, tri, remplissage…).
+import { computed, shallowRef } from "vue"
+import type { ComputedRef, ShallowRef } from "vue"
+
+export interface History<T> {
+  readonly undoStack: ShallowRef<T[]>
+  readonly redoStack: ShallowRef<T[]>
+  readonly canUndo: ComputedRef<boolean>
+  readonly canRedo: ComputedRef<boolean>
+  /** Enregistre un état **avant** mutation et vide la pile redo. */
+  push: (snapshot: T) => void
+  /** Dépile undo (et empile `current` dans redo) → instantané à restaurer. */
+  undo: (current: T) => T | null
+  /** Dépile redo (et empile `current` dans undo) → instantané à restaurer. */
+  redo: (current: T) => T | null
+  /** Vide les deux piles. */
+  clear: () => void
+}
+
+/**
+ * Piles d'historique bornées (`limit`, la plus ancienne entrée est oubliée).
+ * Toutes les opérations renvoient/réaffectent des tableaux **neufs** pour rester réactives.
+ */
+export function createHistory<T>(limit = 100): History<T> {
+  const undoStack = shallowRef<T[]>([])
+  const redoStack = shallowRef<T[]>([])
+
+  const push = (snapshot: T) => {
+    const next = [...undoStack.value, snapshot]
+    undoStack.value = next.length > limit ? next.slice(next.length - limit) : next
+    redoStack.value = []
+  }
+
+  const undo = (current: T): T | null => {
+    const stack = undoStack.value
+    if (!stack.length) return null
+    const snapshot = stack[stack.length - 1]!
+    undoStack.value = stack.slice(0, -1)
+    redoStack.value = [...redoStack.value, current]
+    return snapshot
+  }
+
+  const redo = (current: T): T | null => {
+    const stack = redoStack.value
+    if (!stack.length) return null
+    const snapshot = stack[stack.length - 1]!
+    redoStack.value = stack.slice(0, -1)
+    undoStack.value = [...undoStack.value, current]
+    return snapshot
+  }
+
+  const clear = () => {
+    undoStack.value = []
+    redoStack.value = []
+  }
+
+  return {
+    undoStack,
+    redoStack,
+    canUndo: computed(() => undoStack.value.length > 0),
+    canRedo: computed(() => redoStack.value.length > 0),
+    push,
+    undo,
+    redo,
+    clear,
+  }
+}