@sentropic/design-system-vue 0.36.35 → 0.36.38

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

package/dist/RibbonChart.js.map

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

package/dist/TraceWaterfallChart.d.ts

@@ -0,0 +1,88 @@
+export type TraceSpan = {
+    spanId: string;
+    parentSpanId?: string | null;
+    service: string;
+    start: number;
+    duration: number;
+};
+export type TraceWaterfallChartProps = {
+    data: {
+        spans: TraceSpan[];
+    };
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+};
+export declare const TraceWaterfallChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => {
+            spans: TraceSpan[];
+        };
+        default: () => {
+            spans: 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: () => {
+            spans: TraceSpan[];
+        };
+        default: () => {
+            spans: 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: {
+        spans: TraceSpan[];
+    };
+    label: string;
+    height: number;
+    width: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=TraceWaterfallChart.d.ts.map

package/dist/TraceWaterfallChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TraceWaterfallChart.d.ts","sourceRoot":"","sources":["../src/TraceWaterfallChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE;QAAE,KAAK,EAAE,SAAS,EAAE,CAAA;KAAE,CAAC;IAC7B,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;AA6DF,eAAO,MAAM,mBAAmB;;cAGJ,MAAM;YAAE,KAAK,EAAE,SAAS,EAAE,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA5B,MAAM;YAAE,KAAK,EAAE,SAAS,EAAE,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAb,SAAS,EAAE;;;;;4EAwSpD,CAAC"}