@sentropic/design-system-vue 0.36.34 → 0.36.36

package/dist/AnomalySwimLaneChart.d.ts

@@ -0,0 +1,88 @@
+export type AnomalySwimLaneTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type AnomalySwimLaneBucket = {
+    at: number;
+    score: number;
+};
+export type AnomalySwimLaneSeries = {
+    job: string;
+    buckets: AnomalySwimLaneBucket[];
+};
+export type AnomalySwimLaneChartProps = {
+    data: AnomalySwimLaneSeries[];
+    max?: number;
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+};
+export declare const AnomalySwimLaneChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => AnomalySwimLaneSeries[];
+        default: () => never[];
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => AnomalySwimLaneSeries[];
+        default: () => never[];
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+    class: string;
+    data: AnomalySwimLaneSeries[];
+    label: string;
+    height: number;
+    max: number;
+    width: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=AnomalySwimLaneChart.d.ts.map

package/dist/AnomalySwimLaneChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnomalySwimLaneChart.d.ts","sourceRoot":"","sources":["../src/AnomalySwimLaneChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAC3B,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,qBAAqB,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoCF,eAAO,MAAM,oBAAoB;;cAGN,MAAM,qBAAqB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA7B,MAAM,qBAAqB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA0QtD,CAAC"}

package/dist/AnomalySwimLaneChart.js

@@ -0,0 +1,227 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList } from "./chartScale.js";
+const MARGIN = { top: 28, right: 18, bottom: 44, left: 132 };
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+// Continuous scale: score intensity normalised 0..max → category1..8 (shared
+// with HeatmapChart). max ≤ 0 or non-finite score → category1 (floor intensity).
+function toneForScore(score, scoreMax) {
+    if (!Number.isFinite(score) || scoreMax <= 0)
+        return "category1";
+    const ratio = Math.max(0, Math.min(1, score / scoreMax));
+    const index = Math.max(0, Math.min(TONES.length - 1, Math.floor(ratio * TONES.length)));
+    return TONES[index];
+}
+// Truncate a label to the left margin width (approx. by char count).
+function ellipsize(text, maxChars) {
+    if (text.length <= maxChars)
+        return text;
+    if (maxChars <= 1)
+        return "…";
+    return `${text.slice(0, maxChars - 1)}…`;
+}
+function formatTick(v) {
+    if (Math.abs(v) >= 1000)
+        return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
+    if (Number.isInteger(v))
+        return String(v);
+    return v.toFixed(1);
+}
+export const AnomalySwimLaneChart = defineComponent({
+    name: "AnomalySwimLaneChart",
+    props: {
+        data: { type: Array, default: () => [] },
+        max: { type: Number, default: undefined },
+        label: { type: String, default: undefined },
+        width: { type: Number, default: undefined },
+        height: { type: Number, default: 300 },
+        size: { type: Number, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        const hoveredKey = ref(null);
+        function handleLeave() {
+            hoveredKey.value = null;
+        }
+        function handlePointerMove(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                hoveredKey.value = null;
+                return;
+            }
+            hoveredKey.value = target.getAttribute("data-chart-key");
+        }
+        return () => {
+            const data = props.data ?? [];
+            const label = props.label;
+            const height = props.height ?? 300;
+            const resolvedWidth = props.width ?? props.size ?? 520;
+            const plotWidth = Math.max(resolvedWidth - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            // Normalise: drop unlabeled jobs and non-finite buckets.
+            const validData = data
+                .filter((d) => typeof d.job === "string" && d.job.length > 0)
+                .map((d) => ({
+                job: d.job,
+                buckets: (d.buckets ?? [])
+                    .filter((b) => Number.isFinite(b.at))
+                    .map((b) => ({ at: b.at, score: b.score })),
+            }));
+            // Distinct time columns (by `at`, ascending).
+            const columnOrder = [];
+            for (const d of validData) {
+                for (const b of d.buckets) {
+                    if (!columnOrder.includes(b.at))
+                        columnOrder.push(b.at);
+                }
+            }
+            columnOrder.sort((a, b) => a - b);
+            // Effective max score: `max` prop when finite and > 0, else from data.
+            const scoreMax = (() => {
+                if (typeof props.max === "number" && Number.isFinite(props.max) && props.max > 0)
+                    return props.max;
+                const scores = validData
+                    .flatMap((d) => d.buckets.map((b) => b.score))
+                    .filter(Number.isFinite);
+                return scores.length > 0 ? Math.max(...scores) : 1;
+            })();
+            let rows = [];
+            if (validData.length > 0 && columnOrder.length > 0) {
+                const band = plotHeight / validData.length;
+                const rowHeight = Math.min(band * 0.78, 34);
+                const colWidth = plotWidth / columnOrder.length;
+                rows = validData.map((d, i) => {
+                    const y = MARGIN.top + band * i + (band - rowHeight) / 2;
+                    const cells = d.buckets.map((b, j) => {
+                        const colIndex = Math.max(0, columnOrder.indexOf(b.at));
+                        const x = MARGIN.left + colIndex * colWidth;
+                        const w = Math.max(colWidth - 2, 1);
+                        return {
+                            key: `${i}-${j}`,
+                            datum: b,
+                            x,
+                            width: w,
+                            cx: x + w / 2,
+                            tone: toneForScore(b.score, scoreMax),
+                        };
+                    });
+                    return {
+                        datum: d,
+                        index: i,
+                        y,
+                        height: rowHeight,
+                        rowCenterY: MARGIN.top + band * (i + 0.5),
+                        cells,
+                    };
+                });
+            }
+            const columns = columnOrder.length === 0
+                ? []
+                : columnOrder.map((at, index) => ({
+                    at,
+                    cx: MARGIN.left + (index + 0.5) * (plotWidth / columnOrder.length),
+                }));
+            const dataValueItems = validData.map((d) => `${d.job}: ${d.buckets.map((b) => `${b.at} = ${b.score}`).join(", ")}`);
+            const legendItems = TONES.map((tone) => ({ tone }));
+            const hasLegend = validData.length > 0 && columnOrder.length > 0;
+            const svgChildren = [];
+            // tick labels (time axis)
+            for (const column of columns) {
+                svgChildren.push(h("text", {
+                    key: `t${column.at}`,
+                    class: "st-anomalySwimLaneChart__tickLabel",
+                    x: column.cx,
+                    y: height - MARGIN.bottom + 16,
+                    "text-anchor": "middle",
+                }, formatTick(column.at)));
+            }
+            // axes
+            svgChildren.push(h("line", { class: "st-anomalySwimLaneChart__axis", x1: MARGIN.left, x2: MARGIN.left, y1: MARGIN.top, y2: height - MARGIN.bottom }));
+            svgChildren.push(h("line", { class: "st-anomalySwimLaneChart__axis", x1: MARGIN.left, x2: resolvedWidth - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }));
+            // one row per job + left label + score cells per bucket
+            for (const row of rows) {
+                const i = row.index;
+                svgChildren.push(h("text", {
+                    key: `lbl${i}`,
+                    class: "st-anomalySwimLaneChart__jobLabel",
+                    x: MARGIN.left - 8,
+                    y: row.rowCenterY,
+                    "text-anchor": "end",
+                    "dominant-baseline": "middle",
+                }, ellipsize(row.datum.job, 18)));
+                for (const cell of row.cells) {
+                    const isDim = hoveredKey.value !== null && hoveredKey.value !== cell.key;
+                    svgChildren.push(h("rect", {
+                        key: `cell${cell.key}`,
+                        class: classNames("st-anomalySwimLaneChart__cell", `st-anomalySwimLaneChart__cell--${cell.tone}`, isDim ? "st-anomalySwimLaneChart__cell--dim" : undefined),
+                        x: cell.x,
+                        y: row.y,
+                        width: cell.width,
+                        height: row.height,
+                        rx: 2,
+                        "data-chart-key": cell.key,
+                    }));
+                }
+            }
+            let hovered = null;
+            if (hoveredKey.value !== null) {
+                for (const row of rows) {
+                    for (const cell of row.cells) {
+                        if (cell.key === hoveredKey.value)
+                            hovered = { row, cell };
+                    }
+                }
+            }
+            const children = [
+                h("div", {
+                    class: "st-anomalySwimLaneChart__visual",
+                    role: "img",
+                    "aria-label": label,
+                    onPointermove: handlePointerMove,
+                    onPointerleave: handleLeave,
+                }, [
+                    h("svg", {
+                        viewBox: `0 0 ${resolvedWidth} ${height}`,
+                        preserveAspectRatio: "xMidYMid meet",
+                        width: "100%",
+                        height: "100%",
+                        focusable: "false",
+                        "aria-hidden": "true",
+                    }, svgChildren),
+                ]),
+            ];
+            if (hasLegend) {
+                children.push(h("div", { class: "st-anomalySwimLaneChart__legend", "aria-hidden": "true" }, [
+                    h("span", { class: "st-anomalySwimLaneChart__legendText" }, "Low"),
+                    h("span", { class: "st-anomalySwimLaneChart__legendRamp" }, legendItems.map((item) => h("span", {
+                        key: item.tone,
+                        class: `st-anomalySwimLaneChart__legendSwatch st-anomalySwimLaneChart__legendSwatch--${item.tone}`,
+                    }))),
+                    h("span", { class: "st-anomalySwimLaneChart__legendText" }, "High"),
+                ]));
+            }
+            children.push(chartDataList(label ?? "anomaly swim lane", dataValueItems));
+            if (hovered) {
+                children.push(h("div", {
+                    class: "st-anomalySwimLaneChart__tooltip",
+                    role: "presentation",
+                    style: `left:${(hovered.cell.cx / resolvedWidth) * 100}%;top:${(hovered.row.rowCenterY / height) * 100}%`,
+                }, [
+                    h("span", { class: "st-anomalySwimLaneChart__tooltipLabel" }, `${hovered.row.datum.job} · ${hovered.cell.datum.at}`),
+                    h("span", { class: "st-anomalySwimLaneChart__tooltipValue" }, `${hovered.cell.datum.score}`),
+                ]));
+            }
+            return h("div", { ...attrs, class: classNames("st-anomalySwimLaneChart", props.class) }, children);
+        };
+    },
+});
+//# sourceMappingURL=AnomalySwimLaneChart.js.map

package/dist/AnomalySwimLaneChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnomalySwimLaneChart.js","sourceRoot":"","sources":["../src/AnomalySwimLaneChart.ts"],"names":[],"mappings":"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"}

package/dist/CopyButton.d.ts

@@ -65,8 +65,8 @@ export declare const CopyButton: import("vue").DefineComponent<import("vue").Ext
     size: CopyButtonSize;
     class: string;
     label: string;
-    value: string;
     text: string;
+    value: string;
     copiedLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=CopyButton.d.ts.map

package/dist/RibbonChart.d.ts

@@ -0,0 +1,76 @@
+export type RibbonChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type RibbonChartDatum = {
+    category: string;
+    period: string | number;
+    value: number;
+    tone?: RibbonChartTone;
+};
+export type RibbonChartProps = {
+    data: RibbonChartDatum[];
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+};
+export declare const RibbonChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => RibbonChartDatum[];
+        default: () => never[];
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => RibbonChartDatum[];
+        default: () => never[];
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+    class: string;
+    data: RibbonChartDatum[];
+    label: string;
+    height: number;
+    width: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=RibbonChart.d.ts.map

package/dist/RibbonChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RibbonChart.d.ts","sourceRoot":"","sources":["../src/RibbonChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsCF,eAAO,MAAM,WAAW;;cAGG,MAAM,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAxB,MAAM,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA0QjD,CAAC"}

package/dist/RibbonChart.js

@@ -0,0 +1,223 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList } from "./chartScale.js";
+const MARGIN = { top: 16, right: 16, bottom: 32, left: 16 };
+const RIBBON_SMOOTH = 0.4;
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+export const RibbonChart = defineComponent({
+    name: "RibbonChart",
+    props: {
+        data: { type: Array, default: () => [] },
+        label: { type: String, default: undefined },
+        width: { type: Number, default: undefined },
+        height: { type: Number, default: 300 },
+        size: { type: Number, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        const hoveredKey = ref(null);
+        function handleLeave() {
+            hoveredKey.value = null;
+        }
+        function handlePointerMove(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                hoveredKey.value = null;
+                return;
+            }
+            hoveredKey.value = target.getAttribute("data-chart-key");
+        }
+        return () => {
+            const data = props.data ?? [];
+            const label = props.label;
+            const height = props.height ?? 300;
+            const resolvedWidth = props.width ?? props.size ?? 520;
+            const plotWidth = Math.max(resolvedWidth - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            // Normalise: drop unlabeled categories and non-finite / negative values.
+            const validData = data.filter((d) => typeof d.category === "string" &&
+                d.category.length > 0 &&
+                Number.isFinite(d.value) &&
+                d.value >= 0);
+            // Distinct periods (first-seen order), stacked columns left to right.
+            const periodOrder = [];
+            for (const d of validData) {
+                if (!periodOrder.includes(d.period))
+                    periodOrder.push(d.period);
+            }
+            // Distinct categories (first-seen order) → categoryN index (1..8, cycled)
+            // when no explicit `tone`. An explicit `tone` on a datum wins.
+            const categoryOrder = [];
+            const explicitToneByCategory = new Map();
+            for (const d of validData) {
+                if (!categoryOrder.includes(d.category))
+                    categoryOrder.push(d.category);
+                if (d.tone)
+                    explicitToneByCategory.set(d.category, d.tone);
+            }
+            const toneOf = (category) => {
+                const explicit = explicitToneByCategory.get(category);
+                if (explicit)
+                    return explicit;
+                const idx = categoryOrder.indexOf(category);
+                return `category${((idx < 0 ? 0 : idx) % 8) + 1}`;
+            };
+            // Per-period stacking: segments SORTED by descending value (rank), the
+            // largest at the foot. Each segment keeps top/bottom y for ribbon paths.
+            let columns = [];
+            if (validData.length > 0 && periodOrder.length > 0) {
+                const band = plotWidth / periodOrder.length;
+                const barWidth = Math.min(band * 0.5, 72);
+                const totals = periodOrder.map((p) => validData.filter((d) => d.period === p).reduce((s, d) => s + Math.max(d.value, 0), 0));
+                const domainMax = Math.max(1, ...totals);
+                columns = periodOrder.map((period, pi) => {
+                    const x = MARGIN.left + band * pi + (band - barWidth) / 2;
+                    const rows = validData
+                        .filter((d) => d.period === period)
+                        .map((d) => ({ category: d.category, value: Math.max(d.value, 0) }))
+                        .sort((a, b) => b.value - a.value);
+                    let acc = 0;
+                    const segments = rows.map((row, ri) => {
+                        const seg = (row.value / domainMax) * plotHeight;
+                        const yBottom = MARGIN.top + plotHeight - acc;
+                        const yTop = yBottom - seg;
+                        acc += seg;
+                        return {
+                            key: `${pi}-${ri}-${row.category}`,
+                            category: row.category,
+                            value: row.value,
+                            tone: toneOf(row.category),
+                            x,
+                            width: barWidth,
+                            yTop,
+                            yBottom,
+                            cx: x + barWidth / 2,
+                            cy: yTop + (yBottom - yTop) / 2,
+                        };
+                    });
+                    return { period, index: pi, cx: MARGIN.left + band * (pi + 0.5), segments };
+                });
+            }
+            // Ribbons: for each category present in two consecutive periods, a smoothed
+            // band connecting the left segment (right edge) to the right (left edge).
+            const ribbons = [];
+            for (let ci = 0; ci < columns.length - 1; ci++) {
+                const left = columns[ci];
+                const right = columns[ci + 1];
+                for (const ls of left.segments) {
+                    const rs = right.segments.find((s) => s.category === ls.category);
+                    if (!rs)
+                        continue;
+                    const x0 = ls.x + ls.width;
+                    const x1 = rs.x;
+                    const mid = x0 + (x1 - x0) * RIBBON_SMOOTH;
+                    const mid2 = x1 - (x1 - x0) * RIBBON_SMOOTH;
+                    const d = `M${x0.toFixed(2)},${ls.yTop.toFixed(2)} ` +
+                        `C${mid.toFixed(2)},${ls.yTop.toFixed(2)} ${mid2.toFixed(2)},${rs.yTop.toFixed(2)} ${x1.toFixed(2)},${rs.yTop.toFixed(2)} ` +
+                        `L${x1.toFixed(2)},${rs.yBottom.toFixed(2)} ` +
+                        `C${mid2.toFixed(2)},${rs.yBottom.toFixed(2)} ${mid.toFixed(2)},${ls.yBottom.toFixed(2)} ${x0.toFixed(2)},${ls.yBottom.toFixed(2)} Z`;
+                    ribbons.push({ key: `${ci}-${ls.category}`, category: ls.category, tone: ls.tone, d });
+                }
+            }
+            const legendItems = categoryOrder.map((category) => ({ category, tone: toneOf(category) }));
+            const hasLegend = categoryOrder.length > 0;
+            const dataValueItems = categoryOrder.map((category) => `${category}: ${periodOrder
+                .map((p) => {
+                const found = validData.find((d) => d.category === category && d.period === p);
+                return `${p} = ${found ? found.value : 0}`;
+            })
+                .join(", ")}`);
+            let hoveredSegment = null;
+            if (hoveredKey.value !== null) {
+                for (const col of columns) {
+                    for (const seg of col.segments) {
+                        if (seg.key === hoveredKey.value)
+                            hoveredSegment = seg;
+                    }
+                }
+            }
+            const svgChildren = [];
+            // inter-period ribbons (beneath the segments)
+            for (const ribbon of ribbons) {
+                const isDim = hoveredSegment !== null && hoveredSegment.category !== ribbon.category;
+                svgChildren.push(h("path", {
+                    key: `r${ribbon.key}`,
+                    class: classNames("st-ribbonChart__ribbon", `st-ribbonChart__ribbon--${ribbon.tone}`, isDim ? "st-ribbonChart__ribbon--dim" : undefined),
+                    d: ribbon.d,
+                }));
+            }
+            // per-period stacked segments
+            for (const col of columns) {
+                svgChildren.push(h("text", {
+                    key: `p${col.index}`,
+                    class: "st-ribbonChart__periodLabel",
+                    x: col.cx,
+                    y: height - MARGIN.bottom + 16,
+                    "text-anchor": "middle",
+                }, String(col.period)));
+                for (const seg of col.segments) {
+                    const isDim = hoveredSegment !== null && hoveredSegment.category !== seg.category;
+                    svgChildren.push(h("rect", {
+                        key: `s${seg.key}`,
+                        class: classNames("st-ribbonChart__seg", `st-ribbonChart__seg--${seg.tone}`, isDim ? "st-ribbonChart__seg--dim" : undefined),
+                        x: seg.x,
+                        y: seg.yTop,
+                        width: seg.width,
+                        height: Math.max(seg.yBottom - seg.yTop, 0),
+                        rx: 2,
+                        "data-chart-key": seg.key,
+                    }));
+                }
+            }
+            const children = [
+                h("div", {
+                    class: "st-ribbonChart__visual",
+                    role: "img",
+                    "aria-label": label,
+                    onPointermove: handlePointerMove,
+                    onPointerleave: handleLeave,
+                }, [
+                    h("svg", {
+                        viewBox: `0 0 ${resolvedWidth} ${height}`,
+                        preserveAspectRatio: "xMidYMid meet",
+                        width: "100%",
+                        height: "100%",
+                        focusable: "false",
+                        "aria-hidden": "true",
+                    }, svgChildren),
+                ]),
+            ];
+            if (hasLegend) {
+                children.push(h("ul", { class: "st-ribbonChart__legend", "aria-label": `Catégories de ${label ?? "ribbon"}` }, legendItems.map((item) => h("li", { key: item.category, class: "st-ribbonChart__legendItem" }, [
+                    h("span", {
+                        class: `st-ribbonChart__legendSwatch st-ribbonChart__legendSwatch--${item.tone}`,
+                        "aria-hidden": "true",
+                    }),
+                    item.category,
+                ]))));
+            }
+            children.push(chartDataList(label ?? "ribbon", dataValueItems));
+            if (hoveredSegment) {
+                children.push(h("div", {
+                    class: "st-ribbonChart__tooltip",
+                    role: "presentation",
+                    style: `left:${(hoveredSegment.cx / resolvedWidth) * 100}%;top:${(hoveredSegment.cy / height) * 100}%`,
+                }, [
+                    h("span", { class: "st-ribbonChart__tooltipLabel" }, hoveredSegment.category),
+                    h("span", { class: "st-ribbonChart__tooltipValue" }, `${hoveredSegment.value}`),
+                ]));
+            }
+            return h("div", { ...attrs, class: classNames("st-ribbonChart", props.class) }, children);
+        };
+    },
+});
+//# sourceMappingURL=RibbonChart.js.map