@dnax/ui 0.0.69 → 0.0.70

package/components/QChart.vue

@@ -11,12 +11,15 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
-import { chartToECharts, COLOR_TOKENS } from "../lib/chart"
+import { chartToECharts, COLOR_TOKENS, tokenCss } from "../lib/chart"
 import { normalizeCssColor } from "../lib/color"
 import { legendPickOf, nextLegendPick, pickFromEvent, sameSelection, tableCsv, tableModel } from "../lib/chart"
+import { cellBarGeometry, cellVisualOf, sparklineGeometry } from "../lib/chartTable"
+import { formatValue } from "../lib/chartFormat"
 import { useConfigLang } from "../lib/useComponentProps"
 import type {
   QChartAxis,
+  QChartCellVisual,
   QChartColumn,
   QChartLegend,
   QChartMark,
@@ -295,8 +298,11 @@ const columnStyle = (column: QChartColumn) => ({
 })
 
 /** Tri suivant : `asc` → `desc` → aucun (l'ordre d'origine revient) */
+const isSortable = (column: QChartColumn) =>
+  column.sortable ?? cellVisualOf(column.cell)?.type !== "sparkline"
+
 const toggleSort = (column: QChartColumn) => {
-  if (column.sortable === false) return
+  if (!isSortable(column)) return
   const base =
     sortState.value ??
     (tableMark.value?.sortBy
@@ -315,8 +321,8 @@ const sortIndicator = (column: QChartColumn) => {
 }
 
 const sortTitle = (column: QChartColumn) => {
-  if (column.sortable === false) return ""
-  return sortIndicator(column) === "\u2191" ? t("sortDescending") : t("sortAscending")
+  if (!isSortable(column)) return ""
+  return sortIndicator(column) === "↑" ? t("sortDescending") : t("sortAscending")
 }
 
 const goPage = (delta: number) => {
@@ -376,12 +382,102 @@ const isSelected = (row: any) => {
   return key !== undefined && !!selected && typeof selected === "object" && String(selected.name) === String(key)
 }
 
-/** Valeur affichée d'une cellule : `format` de la colonne sinon la valeur telle quelle */
-const cellValue = (column: QChartColumn, row: any) => {
-  const value = row?.[column.field]
-  const formatted = column.format?.(value, row)
-  if (formatted !== undefined) return formatted
-  return value === null || value === undefined ? "" : String(value)
+// ─── Micro-visualisations de cellule (barres / delta / heat / sparkline) ──────
+
+/** Cellule prête à rendre (le composant ne calcule plus rien dans le template) */
+interface RenderedCell {
+  kind: "text" | "bar" | "delta" | "heat" | "sparkline"
+  text: string
+  bar?: { style: Record<string, string | number> }
+  textStyle?: Record<string, string>
+  arrow?: string
+  spark?: { path: string; areaPath: string; marker?: { x: number; y: number } }
+  lineColor: string
+  pointColor: string
+  area: boolean
+}
+
+/** Couleur CSS d'un token (`primary` → `var(--primary, #1976d2)`) ou d'une couleur libre */
+const cssColor = (value: string | undefined, fallback: string) => tokenCss(value, fallback)
+
+/** Rend une cellule : texte + (optionnellement) une barre, un delta ou une sparkline.
+ *
+ *  `override` sert à la ligne de **totaux** : on lui donne la valeur brute agrégée et le
+ *  texte déjà formaté par `tableModel`. */
+const renderCell = (
+  column: QChartColumn,
+  row: any,
+  override?: { value?: any; text?: string },
+): RenderedCell => {
+  const visual: QChartCellVisual | undefined = cellVisualOf(column.cell)
+  const rawValue = override ? override.value : row?.[column.field]
+  const numeric = typeof rawValue === "number" && Number.isFinite(rawValue)
+  /** Un `delta` affiche la valeur **absolue** : la flèche porte le signe */
+  const shown = visual?.type === "delta" && visual.absolute !== false && numeric ? Math.abs(rawValue) : rawValue
+  const text =
+    override?.text ??
+    column.format?.(shown, row) ??
+    (visual?.format ? formatValue(shown, visual.format, { locale: locale.value }) : undefined) ??
+    // Sparkline : le texte de repli (accessibilité, CSV) est la **dernière valeur**
+    (Array.isArray(shown)
+      ? shown.length
+        ? String(shown[shown.length - 1])
+        : ""
+      : shown === null || shown === undefined
+        ? ""
+        : String(shown))
+
+  if (visual?.type === "sparkline") {
+    const series = override
+      ? undefined
+      : visual.values
+        ? visual.values(row)
+        : visual.field
+          ? row?.[visual.field]
+          : undefined
+    const spark = sparklineGeometry(Array.isArray(series) ? series : [], { point: visual.point ?? "last" })
+    return {
+      kind: "sparkline",
+      text,
+      spark,
+      lineColor: cssColor(visual.color, "var(--muted-foreground, #71717a)"),
+      pointColor: cssColor(visual.pointColor ?? visual.negativeColor, "var(--negative, #c10015)"),
+      area: visual.area === true,
+    }
+  }
+
+  if (visual) {
+    const scale = table.value?.cellScales?.[column.field]
+    const bar = numeric && scale ? cellBarGeometry(rawValue, visual, scale) : undefined
+    const positive = cssColor(
+      visual.color,
+      visual.type === "delta" ? "var(--primary, #1976d2)" : "var(--muted-foreground, #71717a)",
+    )
+    const negative = cssColor(visual.negativeColor, "var(--negative, #c10015)")
+    if (bar) {
+      const color = bar.sign < 0 ? negative : positive
+      const opacity = visual.opacity ?? (visual.type === "delta" ? 0.85 : visual.type === "heat" ? bar.ratio : 0.18)
+      const showArrow = (visual.arrow ?? visual.type === "delta") && bar.sign !== 0
+      return {
+        kind: visual.type,
+        text,
+        bar: { style: { left: `${bar.left}%`, width: `${bar.width}%`, background: color, opacity } },
+        ...(visual.type === "delta" && bar.sign !== 0 ? { textStyle: { color } } : {}),
+        ...(showArrow ? { arrow: bar.sign > 0 ? "▲" : "▼" } : {}),
+        lineColor: color,
+        pointColor: negative,
+        area: false,
+      }
+    }
+  }
+
+  return {
+    kind: "text",
+    text,
+    lineColor: "currentColor",
+    pointColor: "var(--negative, #c10015)",
+    area: false,
+  }
 }
 
 /** Sélection émise pour un élément — avec la même règle de re-clic que le reste */
@@ -610,7 +706,7 @@ defineExpose({
             :key="column.field"
             :style="columnStyle(column)"
             :title="sortTitle(column)"
-            :class="{ 'is-sortable': column.sortable !== false }"
+            :class="{ 'is-sortable': isSortable(column) }"
             :aria-sort="sortIndicator(column) === '↑' ? 'ascending' : sortIndicator(column) === '↓' ? 'descending' : 'none'"
             @click="toggleSort(column)"
           >
@@ -628,14 +724,76 @@ defineExpose({
           @click="pickRow(row, index)"
         >
           <td v-for="column in table.columns" :key="column.field" :style="columnStyle(column)">
-            {{ cellValue(column, row) }}
+            <div
+              v-for="cell in [renderCell(column, row)]"
+              :key="column.field"
+              class="q-chart__cell"
+              :class="{
+                'q-chart__cell--num': column.align === 'end',
+                'q-chart__cell--delta': cell.kind === 'delta',
+                'q-chart__cell--sparkline': cell.kind === 'sparkline',
+              }"
+              :role="cell.kind === 'sparkline' ? 'img' : undefined"
+              :aria-label="cell.kind === 'sparkline' ? cell.text : undefined"
+              :title="cell.kind === 'sparkline' ? cell.text : undefined"
+            >
+              <span v-if="cell.bar" class="q-chart__cell-bar" :style="cell.bar.style" aria-hidden="true" />
+              <svg
+                v-if="cell.kind === 'sparkline' && cell.spark"
+                class="q-chart__spark"
+                viewBox="0 0 100 24"
+                preserveAspectRatio="none"
+                aria-hidden="true"
+              >
+                <path v-if="cell.area" :d="cell.spark.areaPath" :fill="cell.lineColor" opacity="0.15" />
+                <path
+                  :d="cell.spark.path"
+                  fill="none"
+                  :stroke="cell.lineColor"
+                  stroke-width="1.5"
+                  vector-effect="non-scaling-stroke"
+                />
+                <circle
+                  v-if="cell.spark.marker"
+                  :cx="cell.spark.marker.x"
+                  :cy="cell.spark.marker.y"
+                  r="2.4"
+                  :fill="cell.pointColor"
+                />
+              </svg>
+              <span
+                v-if="cell.kind !== 'sparkline' || !cell.spark"
+                class="q-chart__cell-value"
+                :style="cell.textStyle"
+              >
+                {{ cell.text }}<span v-if="cell.arrow" class="q-chart__cell-arrow">{{ cell.arrow }}</span>
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
       <tfoot v-if="table.totals">
         <tr>
           <td v-for="column in table.columns" :key="column.field" :style="columnStyle(column)">
-            {{ table.totals[column.field] ?? "" }}
+            <div
+              v-for="cell in [
+                renderCell(column, undefined, {
+                  value: table.totalValues?.[column.field],
+                  text: table.totals?.[column.field] ?? '',
+                }),
+              ]"
+              :key="column.field"
+              class="q-chart__cell"
+              :class="{
+                'q-chart__cell--num': column.align === 'end',
+                'q-chart__cell--delta': cell.kind === 'delta',
+              }"
+            >
+              <span v-if="cell.bar" class="q-chart__cell-bar" :style="cell.bar.style" aria-hidden="true" />
+              <span class="q-chart__cell-value" :style="cell.textStyle">
+                {{ cell.text }}<span v-if="cell.arrow" class="q-chart__cell-arrow">{{ cell.arrow }}</span>
+              </span>
+            </div>
           </td>
         </tr>
       </tfoot>
@@ -748,6 +906,63 @@ defineExpose({
   background: var(--accent, #f4f4f5);
 }
 
+/* ─── Micro-visualisations de cellule (barres, delta, sparkline) ─── */
+.q-chart__cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 20px;
+}
+
+.q-chart__cell--num {
+  justify-content: flex-end;
+}
+
+.q-chart__cell-bar {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  left: 0;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.q-chart__cell-value {
+  position: relative;
+  z-index: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* `delta` : axe médian, les barres divergent de part et d'autre */
+.q-chart__cell--delta::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 50%;
+  width: 1px;
+  background: var(--border, #e4e4e7);
+}
+
+.q-chart__cell-arrow {
+  margin-left: 4px;
+  font-size: 9px;
+  vertical-align: 1px;
+}
+
+.q-chart__cell--sparkline {
+  justify-content: stretch;
+}
+
+.q-chart__spark {
+  display: block;
+  width: 100%;
+  height: 22px;
+  min-width: 46px;
+  overflow: visible;
+}
+
 .q-chart__empty {
   margin: 8px 10px;
   font-size: 12px;

package/components/QSpreadsheet.vue

@@ -3158,10 +3158,17 @@ const endResize = () => {
   window.removeEventListener("pointerup", endResize)
 }
 
-const onPointerUpGlobal = () => {
+const onPointerUpGlobal = (e: PointerEvent) => {
   isPointerDown.value = false
   endResize()
   endRowResize()
+  const target = e.target as HTMLElement | null
+  // Ne restaurer le focus de la grille que si le geste se termine **dans la grille**,
+  // et jamais depuis l'éditeur / ses listes. Sinon `td.focus()` déclenche le `blur`
+  // de l'input **avant** le `click` de l'option : `commitEdit()` ferme l'éditeur et
+  // la valeur cliquée (`select` / `multiselect`) était perdue.
+  if (!target?.closest?.(".q-spreadsheet__viewport")) return
+  if (target.closest(".q-spreadsheet__editor")) return
   const s = sel.value
   if (s) focusCell(s.row, s.column)
 }

package/index.ts

@@ -203,7 +203,7 @@ export { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "./lib/layout"
 export type { LayoutView, LayoutZone, LayoutZonePlacement, QLayoutContext } from "./lib/layout"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
-export { chartToECharts, channelValue, pickFromEvent, tableCsv, tableModel, textValue } from "./lib/chart"
+export { chartToECharts, channelValue, pickFromEvent, tableCsv, tableModel, textValue, tokenCss } from "./lib/chart"
 export type {
   QChartAxis,
   QChartChannel,
@@ -226,6 +226,15 @@ export type {
 } from "./lib/chart"
 export { DEFAULT_CURRENCY, DEFAULT_LOCALE, formatValue } from "./lib/chartFormat"
 export { boxStats, histogram, linearFit, waterfallSteps } from "./lib/chartStats"
+export { cellBarGeometry, cellScale, cellVisualOf, sparklineGeometry } from "./lib/chartTable"
+export type {
+  QChartCellBar,
+  QChartCellKind,
+  QChartCellScale,
+  QChartCellVisual,
+  QChartSparkPoint,
+  QChartSparkline,
+} from "./lib/chartTable"
 export { vTouchPan } from "./lib/touchPan"
 export type { PanDetails, TouchPanHandler, PanDirection } from "./lib/touchPan"
 export { vTouchHold } from "./lib/touchHold"

package/lib/chart.ts

@@ -32,8 +32,11 @@
 import { axisFormatter, DEFAULT_LOCALE, formatValue, timeTickFormatter } from "./chartFormat"
 import type { QChartFormat } from "./chartFormat"
 import { boxStats, categoryTotals, histogram, linearFit, waterfallSteps } from "./chartStats"
+import { cellScale, cellVisualOf } from "./chartTable"
+import type { QChartCellScale, QChartCellVisual } from "./chartTable"
 
 export type { QChartFormat, QChartFormatKind, QChartFormatOptions } from "./chartFormat"
+export type { QChartCellKind, QChartCellScale, QChartCellVisual } from "./chartTable"
 
 /** Valeur d'un canal : nom de champ, valeurs explicites ou fonction d'accès */
 export type QChartChannel = string | readonly any[] | ((d: any, i: number) => any) | number
@@ -94,6 +97,9 @@ export interface QChartColumn {
   sortable?: boolean
   /** Agrégat de la ligne de **totaux** (`sum`, `avg`, `min`, `max`, `count`) */
   summary?: "sum" | "avg" | "min" | "max" | "count"
+  /** **Micro-visualisation** de la cellule (façon Power BI) : barre de données, barre
+   *  divergente `delta`, intensité `heat` ou `sparkline`. `true` = barre de données. */
+  cell?: QChartCellVisual | boolean
 }
 
 /** Séparateurs d'une marque `table` : `horizontal` (défaut — un trait sous chaque rangée),
@@ -118,6 +124,10 @@ export interface QChartTable {
   sortDesc?: boolean
   /** Ligne de **totaux** déjà formatée (clé = champ) */
   totals?: Record<string, string>
+  /** Valeurs **brutes** des agrégats de la ligne de totaux (pour ses barres de cellule) */
+  totalValues?: Record<string, number>
+  /** Bornes par colonne, calculées sur les lignes visibles (barres / heat / delta) */
+  cellScales?: Record<string, QChartCellScale>
 }
 
 /** État de vue d'une table (tri / page), piloté par le composant */
@@ -138,14 +148,16 @@ function compareCells(a: any, b: any): number {
   return sa < sb ? -1 : sa > sb ? 1 : 0
 }
 
-/** Agrège une colonne pour la ligne de totaux (`undefined` = pas d'agrégat) */
-function summarize(column: QChartColumn, rows: any[]): string | undefined {
+/** Agrège une colonne pour la ligne de totaux (`undefined` = pas d'agrégat).
+ *  Renvoie la valeur **brute** (pour les barres du pied de table) et son texte formaté. */
+function aggregate(column: QChartColumn, rows: any[]): { value?: number; formatted?: string } | undefined {
   const raw = rows.map((row) => row?.[column.field])
   const nums = raw.filter((v): v is number => typeof v === "number" && Number.isFinite(v))
-  const mode = column.summary ?? (nums.length === raw.filter((v) => v !== null && v !== undefined).length && nums.length > 0 ? "sum" : undefined)
+  const nonEmpty = raw.filter((v) => v !== null && v !== undefined).length
+  const mode = column.summary ?? (nums.length === nonEmpty && nums.length > 0 ? "sum" : undefined)
   if (!mode) return undefined
-  if (mode === "count") return String(rows.length)
-  if (nums.length === 0) return ""
+  if (mode === "count") return { value: rows.length, formatted: String(rows.length) }
+  if (nums.length === 0) return { formatted: "" }
   const value =
     mode === "sum"
       ? nums.reduce((s, v) => s + v, 0)
@@ -154,7 +166,10 @@ function summarize(column: QChartColumn, rows: any[]): string | undefined {
         : mode === "min"
           ? Math.min(...nums)
           : Math.max(...nums)
-  return column.format ? column.format(value, undefined) : String(Number(value.toPrecision(12)))
+  return {
+    value,
+    formatted: column.format ? column.format(value, undefined) : String(Number(value.toPrecision(12))),
+  }
 }
 
 /** Modèle d'une marque `table` : colonnes déclarées ou déduites des lignes, lignes jointes à la
@@ -198,14 +213,36 @@ export function tableModel(
 
   // ── Totaux (sur toutes les lignes visibles, pas seulement la page) ──
   let totals: Record<string, string> | undefined
+  let totalValues: Record<string, number> | undefined
   if (mark.totals) {
     const label = typeof mark.totals === "object" ? (mark.totals.label ?? "") : ""
     const out: Record<string, string> = {}
+    const raw: Record<string, number> = {}
     columns.forEach((column, i) => {
-      const value = i === 0 && label ? label : summarize(column, sorted)
-      if (value !== undefined) out[column.field] = value
+      const agg = aggregate(column, sorted)
+      if (i === 0 && label) out[column.field] = label
+      else if (agg?.formatted !== undefined) out[column.field] = agg.formatted
+      if (agg?.value !== undefined) raw[column.field] = agg.value
     })
     if (Object.keys(out).length) totals = out
+    if (Object.keys(raw).length) totalValues = raw
+  }
+
+  // ── Échelles des micro-visualisations (barres / heat / delta) ──
+  let cellScales: Record<string, QChartCellScale> | undefined
+  const visualColumns = columns.filter((column) => {
+    const visual = cellVisualOf(column.cell)
+    return !!visual && visual.type !== "sparkline"
+  })
+  if (visualColumns.length) {
+    cellScales = {}
+    for (const column of visualColumns) {
+      const visual = cellVisualOf(column.cell)!
+      cellScales[column.field] = cellScale(
+        sorted.map((row) => row?.[column.field]),
+        visual,
+      )
+    }
   }
 
   // ── Pagination ──
@@ -228,6 +265,8 @@ export function tableModel(
     model.allRows = sorted
   }
   if (totals) model.totals = totals
+  if (totalValues) model.totalValues = totalValues
+  if (cellScales) model.cellScales = cellScales
   return model
 }
 
@@ -1027,6 +1066,18 @@ const TOKEN_FALLBACKS: Record<string, string> = {
 
 const isToken = (v: any): v is string => typeof v === "string" && v in TOKEN_FALLBACKS
 
+/** Couleur de **cellule de table** (CSS) : un token `primary` / `chart-1` devient
+ *  `var(--primary, #1976d2)` ; toute autre valeur CSS est rendue telle quelle.
+ *  Les tokens d'un thème hôte qui ne sont pas dans `TOKEN_FALLBACKS` (ex. `muted-foreground`)
+ *  sont acceptés dès qu'ils contiennent un tiret — on leur donne `fallback` pour repli. */
+export function tokenCss(value: string | undefined, fallback = "currentColor"): string {
+  if (!value) return fallback
+  if (isToken(value) || /^[a-z][a-z0-9-]*-[a-z0-9-]+$/i.test(value)) {
+    return `var(--${value}, ${TOKEN_FALLBACKS[value] ?? fallback})`
+  }
+  return value
+}
+
 /** Style de l'info-bulle : carte translucide floutée (verre), rayon 3px, ombre portée.
  *  `var(--card)` rend la surface solidaire du thème hôte (clair/sombre) sans relecture. */
 const TOOLTIP_EXTRA_CSS = [

package/lib/chartTable.test.ts

@@ -0,0 +1,140 @@
+// Tests des **micro-visualisations de cellule** de la marque `table` (barres de données,
+// barres divergentes, heat, sparklines) — purs, sans DOM.
+import { describe, expect, it } from "bun:test"
+import { cellBarGeometry, cellScale, cellVisualOf, sparklineGeometry } from "./chartTable"
+import { tableModel } from "./chart"
+
+describe("cellVisualOf", () => {
+  it("`true` = barre de données, objet rendu tel quel, absent = rien", () => {
+    expect(cellVisualOf(true)).toEqual({ type: "bar" })
+    expect(cellVisualOf(undefined)).toBeUndefined()
+    expect(cellVisualOf(false)).toBeUndefined()
+    expect(cellVisualOf({ type: "delta" })).toEqual({ type: "delta" })
+  })
+})
+
+describe("cellScale", () => {
+  it("bornes observées, ramenées à zéro", () => {
+    expect(cellScale([10, 50, 100], { type: "bar" })).toEqual({ min: 0, max: 100, maxAbs: 100 })
+    expect(cellScale([-10, 20], { type: "delta" })).toEqual({ min: -10, max: 20, maxAbs: 20 })
+  })
+
+  it("bornes explicites (`min` / `max`) et valeurs non numériques ignorées", () => {
+    expect(cellScale([10, null, "x", 30], { type: "bar", min: 0, max: 200 })).toEqual({
+      min: 0,
+      max: 200,
+      maxAbs: 200,
+    })
+    expect(cellScale([], { type: "bar" })).toEqual({ min: 0, max: 0, maxAbs: Number.EPSILON })
+  })
+})
+
+describe("cellBarGeometry", () => {
+  const scale = { min: 0, max: 100, maxAbs: 100 }
+
+  it("`bar` : barre à gauche proportionnelle à la valeur", () => {
+    expect(cellBarGeometry(50, { type: "bar" }, scale)).toEqual({
+      width: 50,
+      left: 0,
+      ratio: 0.5,
+      diverging: false,
+      sign: 1,
+    })
+    expect(cellBarGeometry(-25, { type: "bar" }, scale)?.width).toBe(25)
+    expect(cellBarGeometry(0, { type: "bar" }, scale)?.width).toBe(0)
+  })
+
+  it("`delta` : divergente depuis 50 %, positives à droite", () => {
+    expect(cellBarGeometry(25, { type: "delta" }, scale)).toMatchObject({
+      left: 50,
+      width: 12.5,
+      diverging: true,
+      sign: 1,
+    })
+    expect(cellBarGeometry(-25, { type: "delta" }, scale)).toMatchObject({
+      left: 37.5,
+      width: 12.5,
+      diverging: true,
+      sign: -1,
+    })
+  })
+
+  it("`heat` : barre pleine largeur, l'intensité porte la valeur", () => {
+    expect(cellBarGeometry(25, { type: "heat" }, scale)).toMatchObject({ left: 0, width: 100, ratio: 0.25 })
+  })
+
+  it("aucune barre pour une sparkline ou une valeur manquante", () => {
+    expect(cellBarGeometry(10, { type: "sparkline" }, scale)).toBeUndefined()
+    expect(cellBarGeometry(undefined, { type: "bar" }, scale)).toBeUndefined()
+    expect(cellBarGeometry("x", { type: "bar" }, scale)).toBeUndefined()
+  })
+})
+
+describe("sparklineGeometry", () => {
+  it("trace la ligne, la surface et le point final", () => {
+    const spark = sparklineGeometry([1, 2, 3], { point: "last" })!
+    expect(spark.points.length).toBe(3)
+    expect(spark.path.startsWith("M2,")).toBe(true)
+    expect(spark.path).toContain("L98,2")
+    expect(spark.areaPath).toContain("Z")
+    expect(spark.marker).toEqual(spark.points[2]!)
+  })
+
+  it("met en évidence `first`, `high`, `low` ou rien", () => {
+    const first = sparklineGeometry([3, 1, 7], { point: "first" })!
+    expect(first.marker).toEqual(first.points[0]!)
+    const high = sparklineGeometry([3, 1, 7], { point: "high" })!
+    expect(high.marker).toEqual(high.points[2]!)
+    const low = sparklineGeometry([3, 1, 7], { point: "low" })!
+    expect(low.marker).toEqual(low.points[1]!)
+    expect(sparklineGeometry([3, 1, 7], { point: false })!.marker).toBeUndefined()
+  })
+
+  it("valeurs constantes : ligne au milieu ; aucune valeur : rien", () => {
+    const flat = sparklineGeometry([5, 5, 5])!
+    expect(flat.points.every((p) => p.y === flat.points[0]!.y)).toBe(true)
+    expect(flat.points[0]!.y).toBe(12)
+    expect(sparklineGeometry([])).toBeUndefined()
+    expect(sparklineGeometry(undefined)).toBeUndefined()
+  })
+})
+
+describe("tableModel — échelles et totaux des micro-visualisations", () => {
+  const rows = [
+    { type: "A", orders: 100, target: 10, trend: [1, 2, 3] },
+    { type: "B", orders: 50, target: -5, trend: [3, 2, 1] },
+  ]
+  const mark = {
+    type: "table" as const,
+    data: rows,
+    totals: { label: "Total" },
+    columns: [
+      { field: "type", label: "Type" },
+      { field: "orders", label: "Orders", cell: { type: "bar" as const } },
+      { field: "target", label: "vs Target", cell: { type: "delta" as const } },
+      { field: "trend", label: "Trend", cell: { type: "sparkline" as const } },
+    ],
+  }
+
+  it("calcule une échelle par colonne visualisée (jamais pour une sparkline)", () => {
+    const model = tableModel(mark)
+    expect(model.cellScales).toEqual({
+      orders: { min: 0, max: 100, maxAbs: 100 },
+      target: { min: -5, max: 10, maxAbs: 10 },
+    })
+    expect(model.cellScales?.trend).toBeUndefined()
+  })
+
+  it("expose les valeurs **brutes** des totaux pour les barres du pied de table", () => {
+    const model = tableModel(mark)
+    expect(model.totalValues).toEqual({ orders: 150, target: 5 })
+    expect(model.totals).toEqual({ type: "Total", orders: "150", target: "5" })
+  })
+
+  it("sans `cell`, pas d'échelle (modèle inchangé)", () => {
+    const model = tableModel({ type: "table", data: rows, columns: ["type", "orders"] })
+    expect(model.cellScales).toBeUndefined()
+    expect(model.totalValues).toBeUndefined()
+    expect(model.totals).toBeUndefined()
+  })
+})

package/lib/chartTable.ts

@@ -0,0 +1,193 @@
+// Micro-visualisations **dans les cellules** d'une marque `table` (façon Power BI) :
+// barres de données, barres divergentes (`vs. target`), intensité de cellule et sparklines.
+//
+// Tout est **pur** : les échelles sont calculées sur les lignes visibles et la géométrie est
+// renvoyée en pourcentages / en tracé SVG. `QChart.vue` ne fait que poser des styles.
+
+import type { QChartFormat } from "./chartFormat"
+
+/** Famille de visualisation d'une cellule */
+export type QChartCellKind = "bar" | "delta" | "heat" | "sparkline"
+
+/** Configuration d'une cellule (`column.cell`). `cell: true` équivaut à `{ type: "bar" }`. */
+export interface QChartCellVisual {
+  /** Type de micro-visualisation */
+  type: QChartCellKind
+  /** Couleur principale : barre, ligne de sparkline, valeurs positives */
+  color?: string
+  /** Couleur des valeurs **négatives** (type `delta`) et des barres descendantes */
+  negativeColor?: string
+  /** Couleur du point de sparkline (défaut : `color`) */
+  pointColor?: string
+  /** Borne basse de l'échelle (défaut : `min(0, valeurs)`) */
+  min?: number
+  /** Borne haute de l'échelle (défaut : `max(0, valeurs)`) */
+  max?: number
+  /** Opacité de la barre (défauts : `bar` 0.18, `delta` 0.85, `heat` calculée) */
+  opacity?: number
+  /** `sparkline` : champ de la ligne qui porte la série (tableau de nombres) */
+  field?: string
+  /** `sparkline` : accès direct à la série (prioritaire sur `field`) */
+  values?: (row: any) => readonly number[] | undefined
+  /** `sparkline` : point mis en évidence (défaut : `last`) */
+  point?: "last" | "first" | "high" | "low" | false
+  /** `sparkline` : remplir la surface sous la ligne */
+  area?: boolean
+  /** `delta` : afficher ▲ / ▼ (défaut : oui pour `delta`, non sinon) */
+  arrow?: boolean
+  /** `delta` : imprimer la valeur **absolue** (défaut : oui — la flèche porte le signe) */
+  absolute?: boolean
+  /** Format de la valeur affichée (`compact`, `percent`, `currency`…) si la colonne n'a pas de `format` */
+  format?: QChartFormat
+}
+
+/** Bornes d'une colonne, calculées sur les lignes visibles */
+export interface QChartCellScale {
+  min: number
+  max: number
+  /** Plus grande amplitude par rapport à zéro (barres divergentes) */
+  maxAbs: number
+}
+
+const finite = (v: any): v is number => typeof v === "number" && Number.isFinite(v)
+
+/** Normalise `column.cell` : `true` → barre de données, objet → tel quel. */
+export function cellVisualOf(
+  cell: QChartCellVisual | boolean | undefined,
+): QChartCellVisual | undefined {
+  if (cell === true) return { type: "bar" }
+  return cell || undefined
+}
+
+const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v))
+
+/** Échelle d'une colonne : bornes explicites (`cell.min` / `cell.max`) ou observées. */
+export function cellScale(values: readonly any[], cell: QChartCellVisual): QChartCellScale {
+  const nums = values.filter(finite)
+  const min = cell.min ?? (nums.length ? Math.min(0, ...nums) : 0)
+  const max = cell.max ?? (nums.length ? Math.max(0, ...nums) : 0)
+  const maxAbs = Math.max(Math.abs(min), Math.abs(max), Number.EPSILON)
+  return { min, max, maxAbs }
+}
+
+/** Géométrie d'une barre de cellule (en % de la largeur / hauteur de la cellule). */
+export interface QChartCellBar {
+  /** Largeur, en % de la cellule */
+  width: number
+  /** Décalage depuis la gauche, en % */
+  left: number
+  /** Part de l'échelle (0 → 1) — sert à l'intensité du type `heat` */
+  ratio: number
+  /** Barre **divergente** (part de 50 %, négatifs vers la gauche) ? */
+  diverging: boolean
+  /** Signe de la valeur (-1, 0, 1) */
+  sign: -1 | 0 | 1
+}
+
+/** Positionne la barre d'une cellule.
+ *
+ *  - `bar` : barre **à gauche**, longueur proportionnelle à `|valeur| / maxAbs` ;
+ *  - `delta` : barre **divergente** depuis le centre (50 %), positives à droite ;
+ *  - `heat` : barre pleine largeur, l'opacité porte l'intensité ;
+ *  - `sparkline` : pas de barre (`undefined`). */
+export function cellBarGeometry(
+  value: any,
+  cell: QChartCellVisual,
+  scale: QChartCellScale,
+): QChartCellBar | undefined {
+  if (cell.type === "sparkline" || !finite(value)) return undefined
+  const sign: -1 | 0 | 1 = value > 0 ? 1 : value < 0 ? -1 : 0
+  const span = scale.max - scale.min
+  const ratio = span > 0 ? clamp((value - scale.min) / span, 0, 1) : 0
+  if (cell.type === "delta") {
+    const half = clamp((Math.abs(value) / scale.maxAbs) * 50, 0, 50)
+    return {
+      width: half,
+      left: value >= 0 ? 50 : 50 - half,
+      ratio: clamp(Math.abs(value) / scale.maxAbs, 0, 1),
+      diverging: true,
+      sign,
+    }
+  }
+  if (cell.type === "heat") {
+    return { width: 100, left: 0, ratio, diverging: false, sign }
+  }
+  // `bar` : longueur proportionnelle à l'amplitude, ancrée à gauche
+  return {
+    width: clamp((Math.abs(value) / scale.maxAbs) * 100, 0, 100),
+    left: 0,
+    ratio: clamp(Math.abs(value) / scale.maxAbs, 0, 1),
+    diverging: false,
+    sign,
+  }
+}
+
+/** Point d'un tracé de sparkline */
+export interface QChartSparkPoint {
+  x: number
+  y: number
+}
+
+/** Tracé d'une sparkline, dans un `viewBox` de `width` × `height` */
+export interface QChartSparkline {
+  path: string
+  areaPath: string
+  points: QChartSparkPoint[]
+  /** Point mis en évidence (`point: false` → aucun) */
+  marker?: QChartSparkPoint
+}
+
+const round2 = (v: number) => Math.round(v * 100) / 100
+
+/** Construit la polyligne d'une sparkline.
+ *
+ *  `viewBox` par défaut : `100 × 24`, avec 2 px de marge. Les valeurs non finies sont
+ *  ignorées. Sans aucune valeur, `undefined` (la cellule affiche son texte). */
+export function sparklineGeometry(
+  values: readonly any[] | undefined,
+  options: {
+    point?: "last" | "first" | "high" | "low" | false
+    width?: number
+    height?: number
+    padding?: number
+  } = {},
+): QChartSparkline | undefined {
+  const nums = (values ?? []).filter(finite)
+  if (nums.length === 0) return undefined
+  const width = options.width ?? 100
+  const height = options.height ?? 24
+  const padding = options.padding ?? 2
+  const innerW = Math.max(1, width - padding * 2)
+  const innerH = Math.max(1, height - padding * 2)
+  const min = Math.min(...nums)
+  const max = Math.max(...nums)
+  const flat = max === min
+  const span = max - min || 1
+  const stepX = nums.length > 1 ? innerW / (nums.length - 1) : 0
+  const points: QChartSparkPoint[] = nums.map((v, i) => ({
+    x: padding + i * stepX,
+    y: padding + (flat ? innerH / 2 : (1 - (v - min) / span) * innerH),
+  }))
+  const path = points.map((p, i) => `${i === 0 ? "M" : "L"}${round2(p.x)},${round2(p.y)}`).join(" ")
+  const first = points[0]!
+  const last = points[points.length - 1]!
+  const areaPath = `${path} L${round2(last.x)},${round2(height - padding)} L${round2(first.x)},${round2(
+    height - padding,
+  )} Z`
+  const markerIndex =
+    options.point === false
+      ? undefined
+      : options.point === "first"
+        ? 0
+        : options.point === "high"
+          ? nums.indexOf(max)
+          : options.point === "low"
+            ? nums.indexOf(min)
+            : points.length - 1
+  return {
+    path,
+    areaPath,
+    points,
+    ...(markerIndex !== undefined && points[markerIndex] ? { marker: points[markerIndex] } : {}),
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",