@sentropic/design-system-svelte 0.28.0 → 0.30.0

package/dist/LineChart.svelte

@@ -13,6 +13,31 @@
     x: number | string;
     y: number;
   };
+
+  /**
+   * Semantic tone for an analytical overlay (reference line / band / goal).
+   * Maps to the feedback token family — markers, not categorical series.
+   */
+  export type ChartOverlayTone = "neutral" | "success" | "warning" | "error" | "info";
+
+  export type ChartReferenceLine = {
+    value: number;
+    label?: string;
+    tone?: ChartOverlayTone;
+    axis?: "x" | "y";
+  };
+
+  export type ChartBand = {
+    from: number;
+    to: number;
+    label?: string;
+    tone?: ChartOverlayTone;
+  };
+
+  export type ChartGoalLine = {
+    value: number;
+    label?: string;
+  };
 </script>
 
 <script lang="ts">
@@ -26,6 +51,14 @@
     smooth?: boolean;
     area?: boolean;
     label: string;
+    /** Reference lines (default `axis: "y"` → horizontal at `value`). */
+    referenceLines?: ChartReferenceLine[];
+    /** Shaded value-axis bands between `from`..`to`. */
+    bands?: ChartBand[];
+    /** A single goal line, emphasised above the data. */
+    goalLine?: ChartGoalLine;
+    /** Least-squares trend line over the data points. */
+    trend?: boolean;
     class?: string;
   };
 
@@ -37,6 +70,10 @@
     smooth = false,
     area = false,
     label,
+    referenceLines,
+    bands,
+    goalLine,
+    trend = false,
     class: className
   }: LineChartProps = $props();
 
@@ -80,6 +117,86 @@
     return typeof x === "number" && Number.isFinite(x);
   }
 
+  // --- Analytical overlay helpers (inline; parity with chartScale) ----------
+  function overlayToneClass(prefix: string, t: ChartOverlayTone | undefined): string {
+    return `${prefix}--${t ?? "neutral"}`;
+  }
+
+  function linearRegression(
+    pts: { x: number; y: number }[]
+  ): { slope: number; intercept: number; minX: number; maxX: number } | null {
+    const finite = pts.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+    if (finite.length < 2) return null;
+    const n = finite.length;
+    let sx = 0;
+    let sy = 0;
+    let sxx = 0;
+    let sxy = 0;
+    let minX = Infinity;
+    let maxX = -Infinity;
+    for (const p of finite) {
+      sx += p.x;
+      sy += p.y;
+      sxx += p.x * p.x;
+      sxy += p.x * p.y;
+      if (p.x < minX) minX = p.x;
+      if (p.x > maxX) maxX = p.x;
+    }
+    const denom = n * sxx - sx * sx;
+    if (denom === 0) return null;
+    const slope = (n * sxy - sx * sy) / denom;
+    const intercept = (sy - slope * sx) / n;
+    if (!Number.isFinite(slope) || !Number.isFinite(intercept)) return null;
+    return { slope, intercept, minX, maxX };
+  }
+
+  function extendValueDomain(
+    minV: number,
+    maxV: number,
+    refs: ChartReferenceLine[] | undefined,
+    bnds: ChartBand[] | undefined,
+    goal: ChartGoalLine | null
+  ): [number, number] {
+    let lo = minV;
+    let hi = maxV;
+    const fold = (v: number | undefined) => {
+      if (v === undefined || !Number.isFinite(v)) return;
+      if (v < lo) lo = v;
+      if (v > hi) hi = v;
+    };
+    for (const r of refs ?? []) if ((r.axis ?? "y") === "y") fold(r.value);
+    for (const b of bnds ?? []) {
+      fold(b.from);
+      fold(b.to);
+    }
+    if (goal) fold(goal.value);
+    return [lo, hi];
+  }
+
+  function overlayDataListItems(
+    refs: ChartReferenceLine[] | undefined,
+    bnds: ChartBand[] | undefined,
+    goal: ChartGoalLine | null,
+    trendModel: { slope: number } | null
+  ): string[] {
+    const items: string[] = [];
+    for (const r of refs ?? []) {
+      if (!Number.isFinite(r.value)) continue;
+      items.push(r.label ? `Référence: ${r.label} = ${r.value}` : `Référence: ${r.value}`);
+    }
+    for (const b of bnds ?? []) {
+      if (!Number.isFinite(b.from) || !Number.isFinite(b.to)) continue;
+      const lo = Math.min(b.from, b.to);
+      const hi = Math.max(b.from, b.to);
+      items.push(b.label ? `Bande: ${b.label} (${lo}–${hi})` : `Bande: ${lo}–${hi}`);
+    }
+    if (goal && Number.isFinite(goal.value)) {
+      items.push(goal.label ? `Objectif: ${goal.label} = ${goal.value}` : `Objectif: ${goal.value}`);
+    }
+    if (trendModel) items.push(`Tendance: pente ${trendModel.slope.toFixed(2)}`);
+    return items;
+  }
+
   let hoveredIndex: number | null = $state(null);
 
   const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
@@ -95,11 +212,16 @@
     return { kind: "ordinal" as const, values: data.map((d) => d.x) };
   });
 
+  // A valid goal line needs a finite value; otherwise it is ignored entirely.
+  const goal = $derived(goalLine && Number.isFinite(goalLine.value) ? goalLine : null);
+
   const yTicks = $derived.by(() => {
-    const ys = data.map((d) => d.y);
-    if (ys.length === 0) return [0];
-    const minRaw = Math.min(...ys);
-    const maxRaw = Math.max(...ys);
+    const ys = data.map((d) => d.y).filter((y) => Number.isFinite(y));
+    if (ys.length === 0 && !referenceLines?.length && !bands?.length && !goal) return [0];
+    let minRaw = ys.length ? Math.min(...ys) : 0;
+    let maxRaw = ys.length ? Math.max(...ys) : 0;
+    // Fold overlay values into the domain so they never fall outside the plot.
+    [minRaw, maxRaw] = extendValueDomain(minRaw, maxRaw, referenceLines, bands, goal);
     const padded = (maxRaw - minRaw) * 0.08 || Math.max(Math.abs(maxRaw), 1) * 0.1;
     return niceTicks(minRaw - padded, maxRaw + padded, 5);
   });
@@ -130,7 +252,72 @@
     });
   });
 
-  const dataValueItems = $derived(data.map((d) => `${d.x}: ${d.y}`));
+  // --- Analytical overlays --------------------------------------------------
+  // All overlays live in the chart's coordinate space, below the data series
+  // (the goal line is the single exception, drawn above for emphasis).
+  const bandRects = $derived(
+    (bands ?? [])
+      .filter((b) => Number.isFinite(b.from) && Number.isFinite(b.to))
+      .map((b, i) => {
+        const y1 = MARGIN.top + scaleLinear(b.from, yDomain.min, yDomain.max, plotHeight, 0);
+        const y2 = MARGIN.top + scaleLinear(b.to, yDomain.min, yDomain.max, plotHeight, 0);
+        return {
+          key: i,
+          x: MARGIN.left,
+          y: Math.min(y1, y2),
+          width: plotWidth,
+          height: Math.max(Math.abs(y2 - y1), 0.5),
+          label: b.label,
+          tone: b.tone
+        };
+      })
+  );
+
+  const refLines = $derived(
+    (referenceLines ?? [])
+      .filter((r) => Number.isFinite(r.value))
+      .map((r, i) => {
+        const axis = r.axis ?? "y";
+        if (axis === "x") {
+          if (xDomain.kind !== "numeric") return null;
+          const x = MARGIN.left + scaleLinear(r.value, xDomain.min, xDomain.max, 0, plotWidth);
+          return { key: i, axis, x1: x, x2: x, y1: MARGIN.top, y2: MARGIN.top + plotHeight, label: r.label, tone: r.tone };
+        }
+        const y = MARGIN.top + scaleLinear(r.value, yDomain.min, yDomain.max, plotHeight, 0);
+        return { key: i, axis, x1: MARGIN.left, x2: MARGIN.left + plotWidth, y1: y, y2: y, label: r.label, tone: r.tone };
+      })
+      .filter((r): r is NonNullable<typeof r> => r !== null)
+  );
+
+  const goalGeom = $derived(
+    goal
+      ? {
+          y: MARGIN.top + scaleLinear(goal.value, yDomain.min, yDomain.max, plotHeight, 0),
+          label: goal.label,
+          value: goal.value
+        }
+      : null
+  );
+
+  const trendModel = $derived(
+    trend && xDomain.kind === "numeric"
+      ? linearRegression(data.map((d) => ({ x: d.x as number, y: d.y })))
+      : null
+  );
+  const trendLine = $derived.by(() => {
+    if (!trendModel || xDomain.kind !== "numeric") return null;
+    return {
+      x1: MARGIN.left + scaleLinear(trendModel.minX, xDomain.min, xDomain.max, 0, plotWidth),
+      y1: MARGIN.top + scaleLinear(trendModel.slope * trendModel.minX + trendModel.intercept, yDomain.min, yDomain.max, plotHeight, 0),
+      x2: MARGIN.left + scaleLinear(trendModel.maxX, xDomain.min, xDomain.max, 0, plotWidth),
+      y2: MARGIN.top + scaleLinear(trendModel.slope * trendModel.maxX + trendModel.intercept, yDomain.min, yDomain.max, plotHeight, 0)
+    };
+  });
+
+  const dataValueItems = $derived([
+    ...data.map((d) => `${d.x}: ${d.y}`),
+    ...overlayDataListItems(referenceLines, bands, goal, trendModel)
+  ]);
 
   function buildLinearPath(pts: { x: number; y: number }[]): string {
     return pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ");
@@ -275,6 +462,31 @@
       </text>
     {/each}
 
+    <!-- Analytical overlays — bands + reference lines + trend BELOW the data
+         (markers, not series); the goal line is drawn above for emphasis. -->
+    {#each bandRects as b (b.key)}
+      <rect class={`st-lineChart__band ${overlayToneClass("st-lineChart__band", b.tone)}`} x={b.x} y={b.y} width={b.width} height={b.height} />
+      {#if b.label}
+        <text class="st-lineChart__overlayLabel" x={b.x + 4} y={b.y + 11}>{b.label}</text>
+      {/if}
+    {/each}
+
+    {#each refLines as r (r.key)}
+      <line class={`st-lineChart__refLine ${overlayToneClass("st-lineChart__refLine", r.tone)}`} x1={r.x1} x2={r.x2} y1={r.y1} y2={r.y2} />
+      {#if r.label}
+        <text
+          class="st-lineChart__overlayLabel"
+          x={r.axis === "x" ? r.x1 + 4 : MARGIN.left + plotWidth - 4}
+          y={r.axis === "x" ? MARGIN.top + 11 : r.y1 - 4}
+          text-anchor={r.axis === "x" ? "start" : "end"}
+        >{r.label}</text>
+      {/if}
+    {/each}
+
+    {#if trendLine}
+      <line class="st-lineChart__trend" x1={trendLine.x1} y1={trendLine.y1} x2={trendLine.x2} y2={trendLine.y2} />
+    {/if}
+
     {#if area && areaPath}
       <path class="st-lineChart__area" d={areaPath} />
     {/if}
@@ -298,6 +510,14 @@
         data-chart-index={p.index}
       />
     {/each}
+
+    <!-- Goal line — emphasised, ABOVE the data. -->
+    {#if goalGeom}
+      <line class="st-lineChart__goalLine" x1={MARGIN.left} x2={MARGIN.left + plotWidth} y1={goalGeom.y} y2={goalGeom.y} />
+      <text class="st-lineChart__goalLabel" x={MARGIN.left + plotWidth - 4} y={goalGeom.y - 4} text-anchor="end">
+        {goalGeom.label ?? `Objectif ${goalGeom.value}`}
+      </text>
+    {/if}
     </svg>
   </div>
 
@@ -406,4 +626,52 @@
   .st-lineChart__tooltipValue {
     opacity: 0.85;
   }
+
+  /* --- Analytical overlay layer --------------------------------------------
+     Bands sit BELOW the data via render order; their fill uses color-mix (a
+     semi-transparent tint of the tone token) rather than raw opacity, so the
+     data series drawn on top keeps full contrast. */
+  .st-lineChart__band {
+    fill: color-mix(in srgb, var(--st-overlay-tone, var(--st-semantic-border-strong)) 12%, transparent);
+    stroke: none;
+  }
+  .st-lineChart__band--neutral { --st-overlay-tone: var(--st-semantic-border-strong); }
+  .st-lineChart__band--success { --st-overlay-tone: var(--st-semantic-feedback-success); }
+  .st-lineChart__band--warning { --st-overlay-tone: var(--st-semantic-feedback-warning); }
+  .st-lineChart__band--error { --st-overlay-tone: var(--st-semantic-feedback-error); }
+  .st-lineChart__band--info { --st-overlay-tone: var(--st-semantic-feedback-info); }
+
+  .st-lineChart__refLine {
+    stroke: var(--st-overlay-tone, var(--st-semantic-border-strong));
+    stroke-width: 1;
+    stroke-dasharray: 4 3;
+  }
+  .st-lineChart__refLine--neutral { --st-overlay-tone: var(--st-semantic-border-strong); }
+  .st-lineChart__refLine--success { --st-overlay-tone: var(--st-semantic-feedback-success); }
+  .st-lineChart__refLine--warning { --st-overlay-tone: var(--st-semantic-feedback-warning); }
+  .st-lineChart__refLine--error { --st-overlay-tone: var(--st-semantic-feedback-error); }
+  .st-lineChart__refLine--info { --st-overlay-tone: var(--st-semantic-feedback-info); }
+
+  .st-lineChart__overlayLabel {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.625rem;
+  }
+
+  .st-lineChart__trend {
+    stroke: var(--st-semantic-text-secondary);
+    stroke-width: 1.5;
+    stroke-dasharray: 6 4;
+    opacity: 0.85;
+  }
+
+  /* Goal line — drawn ABOVE the data, emphasised (thicker, solid accent). */
+  .st-lineChart__goalLine {
+    stroke: var(--st-semantic-feedback-success);
+    stroke-width: 2.5;
+  }
+  .st-lineChart__goalLabel {
+    fill: var(--st-semantic-feedback-success);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
 </style>

package/dist/LineChart.svelte.d.ts

@@ -3,6 +3,27 @@ export type LineChartDatum = {
     x: number | string;
     y: number;
 };
+/**
+ * Semantic tone for an analytical overlay (reference line / band / goal).
+ * Maps to the feedback token family — markers, not categorical series.
+ */
+export type ChartOverlayTone = "neutral" | "success" | "warning" | "error" | "info";
+export type ChartReferenceLine = {
+    value: number;
+    label?: string;
+    tone?: ChartOverlayTone;
+    axis?: "x" | "y";
+};
+export type ChartBand = {
+    from: number;
+    to: number;
+    label?: string;
+    tone?: ChartOverlayTone;
+};
+export type ChartGoalLine = {
+    value: number;
+    label?: string;
+};
 type LineChartProps = {
     data: LineChartDatum[];
     width?: number;
@@ -11,6 +32,14 @@ type LineChartProps = {
     smooth?: boolean;
     area?: boolean;
     label: string;
+    /** Reference lines (default `axis: "y"` → horizontal at `value`). */
+    referenceLines?: ChartReferenceLine[];
+    /** Shaded value-axis bands between `from`..`to`. */
+    bands?: ChartBand[];
+    /** A single goal line, emphasised above the data. */
+    goalLine?: ChartGoalLine;
+    /** Least-squares trend line over the data points. */
+    trend?: boolean;
     class?: string;
 };
 declare const LineChart: import("svelte").Component<LineChartProps, {}, "">;

package/dist/LineChart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LineChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAMF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+OJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LineChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LineChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAMF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,cAAc,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoaJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/RoseChart.svelte

@@ -0,0 +1,291 @@
+<script lang="ts" module>
+  /**
+   * RoseChart (nightingale / polar area) - API canonique (référence Svelte,
+   * React/Vue doivent s'aligner)
+   *
+   * Diagramme polaire de Florence Nightingale : N secteurs d'angle ÉGAL
+   * (360° / N), le RAYON de chaque secteur ∝ value (c'est le rayon qui porte
+   * l'information, PAS l'angle - voilà ce qui le distingue d'un camembert où
+   * l'angle porte l'information et le rayon est constant).
+   *
+   * Échelle du rayon : rayon = sqrt(value / maxValue) * R.
+   *   La racine carrée rend l'AIRE du secteur proportionnelle à la valeur
+   *   (aire ∝ rayon²), donc honnête perceptuellement - un secteur deux fois
+   *   plus « gros » à l'œil vaut bien deux fois plus. Un mapping linéaire
+   *   (value/maxValue * R) exagérerait les grandes valeurs (aire ∝ value²).
+   *
+   * Props obligatoires :
+   *   data   RoseChartDatum[]  - {label, value, tone?}
+   *   label  string            - aria-label du graphique
+   *
+   * Props optionnelles :
+   *   width   number  (défaut 320) - largeur du viewBox en px
+   *   height  number  (défaut 320) - hauteur du viewBox en px
+   *   class   string              - classe CSS supplémentaire
+   *
+   * Labels : le libellé est posé sur le secteur si son rayon est assez grand
+   *   (> 40% de R). Couleur de texte calculée par contrastTextForTone() pour
+   *   garantir le contraste WCAG sur chaque fond catégoriel - pas de blanc fixe.
+   *
+   * NaN/négatif : les valeurs non-finies ou ≤ 0 sont ignorées (rayon 0, pas de
+   *   secteur dessiné) et exclues du calcul de maxValue. Tableau vide → rendu
+   *   vide sans crash.
+   */
+  export type RoseChartTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+
+  export type RoseChartDatum = {
+    label: string;
+    value: number;
+    tone?: RoseChartTone;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+  import { contrastTextForTone } from "./chartContrast.js";
+
+  type RoseChartProps = {
+    data: RoseChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    data,
+    label,
+    width = 320,
+    height = 320,
+    class: className
+  }: RoseChartProps = $props();
+
+  const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8"
+  ] as const;
+
+  function safeValue(value: number): number {
+    return Number.isFinite(value) && value > 0 ? value : 0;
+  }
+
+  function formatNumber(value: number): string {
+    if (!Number.isFinite(value)) return "0";
+    if (Number.isInteger(value)) return String(value);
+    return value.toFixed(2).replace(/\.?0+$/, "");
+  }
+
+  function point(cx: number, cy: number, radius: number, angle: number) {
+    return { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) };
+  }
+
+  function sectorPath(cx: number, cy: number, radius: number, start: number, end: number): string {
+    const safeEnd = Math.min(end, start + Math.PI * 2 - 0.0001);
+    const large = safeEnd - start > Math.PI ? 1 : 0;
+    const outerStart = point(cx, cy, radius, start);
+    const outerEnd = point(cx, cy, radius, safeEnd);
+    return `M ${cx} ${cy} L ${outerStart.x} ${outerStart.y} A ${radius} ${radius} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y} Z`;
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const sectors = $derived.by(() => {
+    const cx = width / 2;
+    const cy = height / 2;
+    const outerLimit = Math.max(Math.min(width, height) / 2 - 6, 1);
+    const count = data.length;
+    if (count === 0) return [];
+
+    const maxValue = Math.max(0, ...data.map((datum) => safeValue(datum.value)));
+    const safeMax = maxValue > 0 ? maxValue : 1;
+    const sweep = (Math.PI * 2) / count;
+
+    return data.map((datum, index) => {
+      const value = safeValue(datum.value);
+      // sqrt → aire du secteur ∝ value (honnête perceptuellement)
+      const radius = Math.sqrt(value / safeMax) * outerLimit;
+      const start = -Math.PI / 2 + sweep * index;
+      const end = start + sweep;
+      const midAngle = (start + end) / 2;
+      const labelPoint = point(cx, cy, radius * 0.62, midAngle);
+      return {
+        datum,
+        value,
+        tone: datum.tone ?? TONES[index % TONES.length],
+        radius,
+        start,
+        end,
+        path: value > 0 ? sectorPath(cx, cy, radius, start, end) : "",
+        labelX: labelPoint.x,
+        labelY: labelPoint.y,
+        // label posé si le secteur est assez grand (rayon > 40% de R)
+        showLabel: value > 0 && radius > outerLimit * 0.4
+      };
+    });
+  });
+
+  const dataValueItems = $derived(
+    data.map((datum) => `${datum.label}: ${formatNumber(safeValue(datum.value))}`)
+  );
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
+
+  const classes = () => ["st-roseChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-roseChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      {#each sectors as sector, i (sector.datum.label)}
+        {#if sector.path}
+          <path
+            class="st-roseChart__sector st-roseChart__sector--{sector.tone}"
+            class:st-roseChart__sector--dim={hoveredIndex !== null && hoveredIndex !== i}
+            d={sector.path}
+            data-chart-index={i}
+          />
+        {/if}
+      {/each}
+
+      {#each sectors as sector (sector.datum.label)}
+        {#if sector.showLabel}
+          <text
+            class="st-roseChart__label"
+            x={sector.labelX}
+            y={sector.labelY}
+            text-anchor="middle"
+            dominant-baseline="middle"
+            fill={contrastTextForTone(sector.tone)}
+          >
+            {sector.datum.label}
+          </text>
+        {/if}
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && sectors[hoveredIndex] && sectors[hoveredIndex].value > 0}
+    {@const sector = sectors[hoveredIndex]}
+    <div
+      class="st-roseChart__tooltip"
+      role="presentation"
+      style="left: {(sector.labelX / width) * 100}%; top: {(sector.labelY / height) * 100}%"
+    >
+      <span class="st-roseChart__tooltipLabel">{sector.datum.label}</span>
+      <span class="st-roseChart__tooltipValue">{formatNumber(sector.value)}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-roseChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    max-width: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-roseChart svg,
+  .st-roseChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-roseChart__sector {
+    cursor: pointer;
+    fill-opacity: 0.82;
+    stroke: var(--st-semantic-surface-default, Canvas);
+    stroke-width: 1;
+    transition: opacity 120ms ease;
+  }
+
+  .st-roseChart__sector--dim {
+    opacity: 0.4;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-roseChart__sector {
+      transition: none;
+    }
+  }
+
+  .st-roseChart__sector--category1 { fill: var(--st-semantic-data-category1); }
+  .st-roseChart__sector--category2 { fill: var(--st-semantic-data-category2); }
+  .st-roseChart__sector--category3 { fill: var(--st-semantic-data-category3); }
+  .st-roseChart__sector--category4 { fill: var(--st-semantic-data-category4); }
+  .st-roseChart__sector--category5 { fill: var(--st-semantic-data-category5); }
+  .st-roseChart__sector--category6 { fill: var(--st-semantic-data-category6); }
+  .st-roseChart__sector--category7 { fill: var(--st-semantic-data-category7); }
+  .st-roseChart__sector--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-roseChart__label {
+    /* fill calculé par contrastTextForTone() en inline - pas de blanc fixe */
+    font-size: 0.68rem;
+    font-weight: 650;
+    pointer-events: none;
+  }
+
+  .st-roseChart__tooltip {
+    background: var(--st-semantic-surface-inverse);
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse);
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 0.75rem;
+    gap: 0.125rem;
+    line-height: 1.2;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, -115%);
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-roseChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-roseChart__tooltipValue {
+    opacity: 0.85;
+  }
+</style>