@sentropic/design-system-vue 0.35.0 → 0.36.18

package/dist/DependencyWheelChart.d.ts

@@ -0,0 +1,73 @@
+export type DependencyWheelChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type DependencyWheelChartLink = {
+    from: string;
+    to: string;
+    weight: number;
+};
+export type DependencyWheelChartProps = {
+    data: DependencyWheelChartLink[];
+    labels?: Record<string, string>;
+    width?: number;
+    height?: number;
+    label: string;
+    class?: string;
+};
+export declare const DependencyWheelChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => DependencyWheelChartLink[];
+        required: true;
+    };
+    labels: {
+        type: () => Record<string, string>;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    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: () => DependencyWheelChartLink[];
+        required: true;
+    };
+    labels: {
+        type: () => Record<string, string>;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    height: number;
+    width: number;
+    labels: Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=DependencyWheelChart.d.ts.map

package/dist/DependencyWheelChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DependencyWheelChart.d.ts","sourceRoot":"","sources":["../src/DependencyWheelChart.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,wBAAwB,GAChC,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0DF,eAAO,MAAM,oBAAoB;;cAGN,MAAM,wBAAwB,EAAE;;;;cAC7B,MAAM,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;cAD/B,MAAM,wBAAwB,EAAE;;;;cAC7B,MAAM,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;4EAsPxD,CAAC"}

package/dist/DependencyWheelChart.js

@@ -0,0 +1,221 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList } from "./chartScale.js";
+import { contrastTextForTone } from "./chartContrast.js";
+import { GraphLegend } from "./GraphLegend.js";
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+const GAP = 0.04;
+const ARC_WIDTH = 12;
+function magnitude(value) {
+    return Number.isFinite(value) && value > 0 ? value : 0;
+}
+function polar(cx, cy, radius, angle) {
+    return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)];
+}
+function arcPath(cx, cy, inner, outer, start, end) {
+    const large = end - start > Math.PI ? 1 : 0;
+    const [x0o, y0o] = polar(cx, cy, outer, start);
+    const [x1o, y1o] = polar(cx, cy, outer, end);
+    const [x1i, y1i] = polar(cx, cy, inner, end);
+    const [x0i, y0i] = polar(cx, cy, inner, start);
+    return `M ${x0o} ${y0o} A ${outer} ${outer} 0 ${large} 1 ${x1o} ${y1o} L ${x1i} ${y1i} A ${inner} ${inner} 0 ${large} 0 ${x0i} ${y0i} Z`;
+}
+export const DependencyWheelChart = defineComponent({
+    name: "DependencyWheelChart",
+    props: {
+        data: { type: Array, required: true },
+        labels: { type: Object, default: undefined },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 240 },
+        label: { type: String, required: true },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        const hoveredLinkIndex = ref(null);
+        function handleLeave() {
+            hoveredLinkIndex.value = null;
+        }
+        function handleVisualPointerMove(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                hoveredLinkIndex.value = null;
+                return;
+            }
+            const index = Number(target.getAttribute("data-link-index"));
+            hoveredLinkIndex.value = Number.isInteger(index) ? index : null;
+        }
+        return () => {
+            const data = props.data;
+            const width = props.width ?? 480;
+            const height = props.height ?? 240;
+            const label = props.label;
+            const displayLabel = (id) => props.labels?.[id] ?? id;
+            const cx = width / 2;
+            const cy = height / 2;
+            const outer = Math.max(Math.min(width, height) / 2 - 6, 1);
+            const inner = Math.max(outer - ARC_WIDTH, 1);
+            const ribbonRadius = Math.max(inner - 2, 0);
+            const links = data
+                .map((link, index) => ({ link, index, weight: magnitude(link.weight) }))
+                .filter((entry) => entry.weight > 0);
+            const order = [];
+            const total = new Map();
+            for (const { link, weight } of links) {
+                for (const id of [link.from, link.to]) {
+                    if (!total.has(id)) {
+                        total.set(id, 0);
+                        order.push(id);
+                    }
+                }
+                total.set(link.from, (total.get(link.from) ?? 0) + weight);
+                total.set(link.to, (total.get(link.to) ?? 0) + weight);
+            }
+            const grandTotal = order.reduce((sum, id) => sum + (total.get(id) ?? 0), 0);
+            const arcs = [];
+            const ribbons = [];
+            const legend = [];
+            if (order.length > 0 && grandTotal > 0) {
+                const totalGap = GAP * order.length;
+                const usable = Math.max(Math.PI * 2 - totalGap, 0.0001);
+                const arcMap = new Map();
+                let angle = -Math.PI / 2;
+                order.forEach((id, index) => {
+                    const span = (usable * (total.get(id) ?? 0)) / grandTotal;
+                    const start = angle + GAP / 2;
+                    const end = start + span;
+                    angle = end + GAP / 2;
+                    const tone = TONES[index % TONES.length];
+                    const mid = (start + end) / 2;
+                    arcMap.set(id, { tone, cursor: start });
+                    const labelRadius = (inner + outer) / 2;
+                    const [lx, ly] = polar(cx, cy, labelRadius, mid);
+                    arcs.push({
+                        id,
+                        tone,
+                        value: total.get(id) ?? 0,
+                        span,
+                        path: arcPath(cx, cy, inner, outer, start, end),
+                        labelX: lx,
+                        labelY: ly,
+                        textColor: contrastTextForTone(tone),
+                    });
+                });
+                const maxWeight = Math.max(1, ...links.map((entry) => entry.weight));
+                links.forEach(({ link, weight, index }) => {
+                    const source = arcMap.get(link.from);
+                    const target = arcMap.get(link.to);
+                    const sourceSpan = (usable * weight) / grandTotal;
+                    const targetSpan = (usable * weight) / grandTotal;
+                    const s0 = source.cursor;
+                    const s1 = source.cursor + sourceSpan;
+                    source.cursor = s1;
+                    const t0 = target.cursor;
+                    const t1 = target.cursor + targetSpan;
+                    target.cursor = t1;
+                    const [ps0x, ps0y] = polar(cx, cy, ribbonRadius, s0);
+                    const [ps1x, ps1y] = polar(cx, cy, ribbonRadius, s1);
+                    const [pt0x, pt0y] = polar(cx, cy, ribbonRadius, t0);
+                    const [pt1x, pt1y] = polar(cx, cy, ribbonRadius, t1);
+                    const path = `M ${ps0x} ${ps0y} ` +
+                        `Q ${cx} ${cy} ${pt1x} ${pt1y} ` +
+                        `A ${ribbonRadius} ${ribbonRadius} 0 0 1 ${pt0x} ${pt0y} ` +
+                        `Q ${cx} ${cy} ${ps1x} ${ps1y} ` +
+                        `A ${ribbonRadius} ${ribbonRadius} 0 0 0 ${ps0x} ${ps0y} Z`;
+                    ribbons.push({
+                        index,
+                        from: link.from,
+                        to: link.to,
+                        weight,
+                        tone: source.tone,
+                        strokeWidth: Math.max(1, (weight / maxWeight) * 4),
+                        path,
+                        midX: cx,
+                        midY: cy,
+                    });
+                });
+                arcs.forEach((arc) => {
+                    legend.push({ label: displayLabel(arc.id), shape: "circle", tone: arc.tone });
+                });
+            }
+            const ribbonNodes = ribbons.map((ribbon) => h("path", {
+                key: ribbon.index,
+                class: classNames("st-dependencyWheelChart__ribbon", `st-dependencyWheelChart__ribbon--${ribbon.tone}`, hoveredLinkIndex.value !== null && hoveredLinkIndex.value !== ribbon.index
+                    ? "st-dependencyWheelChart__ribbon--dim"
+                    : undefined),
+                d: ribbon.path,
+                "stroke-width": ribbon.strokeWidth,
+                "data-link-index": ribbon.index,
+            }));
+            const arcNodes = [];
+            arcs.forEach((arc) => {
+                arcNodes.push(h("path", {
+                    key: arc.id,
+                    class: classNames("st-dependencyWheelChart__arc", `st-dependencyWheelChart__arc--${arc.tone}`),
+                    d: arc.path,
+                }));
+                if (arc.span > 0.34) {
+                    arcNodes.push(h("text", {
+                        key: `lbl${arc.id}`,
+                        class: "st-dependencyWheelChart__arcLabel",
+                        x: arc.labelX,
+                        y: arc.labelY,
+                        "text-anchor": "middle",
+                        "dominant-baseline": "middle",
+                        fill: arc.textColor,
+                    }, displayLabel(arc.id)));
+                }
+            });
+            const dataValueItems = data
+                .filter((link) => magnitude(link.weight) > 0)
+                .map((link) => `${displayLabel(link.from)} -> ${displayLabel(link.to)}: ${link.weight}`);
+            const hovered = hoveredLinkIndex.value !== null ? ribbons.find((r) => r.index === hoveredLinkIndex.value) : undefined;
+            const visualChildren = [
+                h("svg", {
+                    viewBox: `0 0 ${width} ${height}`,
+                    preserveAspectRatio: "xMidYMid meet",
+                    width: "100%",
+                    height: "100%",
+                    focusable: "false",
+                    "aria-hidden": "true",
+                }, [
+                    h("g", { class: "st-dependencyWheelChart__ribbons" }, ribbonNodes),
+                    h("g", { class: "st-dependencyWheelChart__arcs" }, arcNodes),
+                ]),
+            ];
+            if (legend.length > 0) {
+                visualChildren.push(h(GraphLegend, { class: "st-dependencyWheelChart__legend", entries: legend }));
+            }
+            const children = [
+                h("div", {
+                    class: "st-dependencyWheelChart__visual",
+                    role: "img",
+                    "aria-label": label,
+                    onPointermove: handleVisualPointerMove,
+                    onPointerleave: handleLeave,
+                }, visualChildren),
+                chartDataList(label, dataValueItems),
+            ];
+            if (hovered) {
+                children.push(h("div", {
+                    class: "st-dependencyWheelChart__tooltip",
+                    role: "presentation",
+                    style: `left: ${(hovered.midX / width) * 100}%; top: ${(hovered.midY / height) * 100}%`,
+                }, [
+                    h("span", { class: "st-dependencyWheelChart__tooltipLabel" }, `${displayLabel(hovered.from)} -> ${displayLabel(hovered.to)}`),
+                    h("span", { class: "st-dependencyWheelChart__tooltipValue" }, String(hovered.weight)),
+                ]));
+            }
+            return h("div", { ...attrs, class: classNames("st-dependencyWheelChart", props.class) }, children);
+        };
+    },
+});
+//# sourceMappingURL=DependencyWheelChart.js.map

package/dist/DependencyWheelChart.js.map

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

package/dist/DumbbellChart.d.ts

@@ -0,0 +1,104 @@
+export type DumbbellChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type DumbbellChartDatum = {
+    category: string;
+    low: number;
+    high: number;
+};
+export type DumbbellChartProps = {
+    data: DumbbellChartDatum[];
+    width?: number;
+    height?: number;
+    lowTone?: DumbbellChartTone;
+    highTone?: DumbbellChartTone;
+    lowLabel?: string;
+    highLabel?: string;
+    label: string;
+    class?: string;
+};
+export declare const DumbbellChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => DumbbellChartDatum[];
+        default: () => never[];
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lowTone: {
+        type: () => DumbbellChartTone;
+        default: string;
+    };
+    highTone: {
+        type: () => DumbbellChartTone;
+        default: string;
+    };
+    lowLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    highLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    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: () => DumbbellChartDatum[];
+        default: () => never[];
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lowTone: {
+        type: () => DumbbellChartTone;
+        default: string;
+    };
+    highTone: {
+        type: () => DumbbellChartTone;
+        default: string;
+    };
+    lowLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    highLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    data: DumbbellChartDatum[];
+    height: number;
+    width: number;
+    lowTone: DumbbellChartTone;
+    highTone: DumbbellChartTone;
+    lowLabel: string;
+    highLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=DumbbellChart.d.ts.map

package/dist/DumbbellChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DumbbellChart.d.ts","sourceRoot":"","sources":["../src/DumbbellChart.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF,eAAO,MAAM,aAAa;;cAGC,MAAM,kBAAkB,EAAE;;;;;;;;;;;;cAGtB,MAAM,iBAAiB;;;;cACtB,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;cAJ5B,MAAM,kBAAkB,EAAE;;;;;;;;;;;;cAGtB,MAAM,iBAAiB;;;;cACtB,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA8LrD,CAAC"}

package/dist/DumbbellChart.js

@@ -0,0 +1,163 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { CHART_MARGIN, chartDataList, formatTick, niceTicks, scaleLinear } from "./chartScale.js";
+import { GraphLegend } from "./GraphLegend.js";
+// Categories sit on the vertical axis (one row each); the value axis is
+// horizontal. A wider left margin holds the category labels.
+const MARGIN = { ...CHART_MARGIN, left: 96, right: 20, top: 16 };
+const DOT_RADIUS = 5;
+// Normalise a datum: finite low/high, ordered (lo <= hi).
+function normalize(d) {
+    if (!Number.isFinite(d.low) || !Number.isFinite(d.high))
+        return null;
+    return { lo: Math.min(d.low, d.high), hi: Math.max(d.low, d.high) };
+}
+export const DumbbellChart = defineComponent({
+    name: "DumbbellChart",
+    props: {
+        data: { type: Array, default: () => [] },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 240 },
+        lowTone: { type: String, default: "category1" },
+        highTone: { type: String, default: "category2" },
+        lowLabel: { type: String, default: "Bas" },
+        highLabel: { type: String, default: "Haut" },
+        label: { type: String, required: true },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        const hoveredIndex = ref(null);
+        function handleLeave() {
+            hoveredIndex.value = null;
+        }
+        function handleVisualPointerMove(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                hoveredIndex.value = null;
+                return;
+            }
+            const index = Number(target.getAttribute("data-chart-index"));
+            hoveredIndex.value = Number.isInteger(index) ? index : null;
+        }
+        return () => {
+            const width = props.width ?? 480;
+            const height = props.height ?? 240;
+            const lowTone = props.lowTone ?? "category1";
+            const highTone = props.highTone ?? "category2";
+            const lowLabel = props.lowLabel ?? "Bas";
+            const highLabel = props.highLabel ?? "Haut";
+            const label = props.label;
+            const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            // Valid data: finite low + high.
+            const validData = (props.data ?? []).filter((d) => normalize(d) !== null);
+            const dataValueItems = validData.map((d) => {
+                const r = normalize(d);
+                return `${d.category}: ${r.lo} – ${r.hi}`;
+            });
+            // Shrink the category-label font when the reserved left margin is tighter
+            // than the reference default, to avoid clipping (cf. lollipop fix).
+            const categoryFontSize = Math.max(0.5, 0.6875 * Math.min(1, MARGIN.left / 96));
+            let xTicks;
+            if (validData.length === 0) {
+                xTicks = [0];
+            }
+            else {
+                const lows = validData.map((d) => normalize(d).lo);
+                const highs = validData.map((d) => normalize(d).hi);
+                const minRaw = Math.min(...lows);
+                const maxRaw = Math.max(...highs);
+                const padded = (maxRaw - minRaw) * 0.08 || Math.max(Math.abs(maxRaw), 1) * 0.1;
+                xTicks = niceTicks(minRaw - padded, maxRaw + padded, 5);
+            }
+            const xDomain = xTicks.length === 0 ? { min: 0, max: 1 } : { min: xTicks[0], max: xTicks[xTicks.length - 1] };
+            let rows = [];
+            if (validData.length !== 0) {
+                const band = plotHeight / validData.length;
+                rows = validData.map((d, i) => {
+                    const r = normalize(d);
+                    const cy = MARGIN.top + band * (i + 0.5);
+                    const xLow = MARGIN.left + scaleLinear(r.lo, xDomain.min, xDomain.max, 0, plotWidth);
+                    const xHigh = MARGIN.left + scaleLinear(r.hi, xDomain.min, xDomain.max, 0, plotWidth);
+                    return { datum: d, range: r, cy, xLow, xHigh, index: i };
+                });
+            }
+            const gridLines = xTicks.map((tick) => ({
+                value: tick,
+                x: MARGIN.left + scaleLinear(tick, xDomain.min, xDomain.max, 0, plotWidth),
+            }));
+            const gridChildren = [];
+            for (const g of gridLines) {
+                gridChildren.push(h("line", { key: `g${g.value}`, class: "st-dumbbellChart__grid", x1: g.x, x2: g.x, y1: MARGIN.top, y2: height - MARGIN.bottom }), h("text", { key: `t${g.value}`, class: "st-dumbbellChart__tickLabel", x: g.x, y: height - MARGIN.bottom + 16, "text-anchor": "middle" }, formatTick(g.value)));
+            }
+            const rowChildren = [];
+            for (const row of rows) {
+                rowChildren.push(h("text", {
+                    key: `c${row.index}`,
+                    class: "st-dumbbellChart__categoryLabel",
+                    x: MARGIN.left - 8,
+                    y: row.cy,
+                    "text-anchor": "end",
+                    "dominant-baseline": "middle",
+                    style: `font-size: ${categoryFontSize}rem`,
+                }, row.datum.category), h("line", { key: `n${row.index}`, class: "st-dumbbellChart__connector", x1: row.xLow, x2: row.xHigh, y1: row.cy, y2: row.cy }), h("circle", {
+                    key: `l${row.index}`,
+                    class: `st-dumbbellChart__dot st-dumbbellChart__dot--low st-dumbbellChart__dot--${lowTone}`,
+                    cx: row.xLow,
+                    cy: row.cy,
+                    r: DOT_RADIUS,
+                    "data-chart-index": row.index,
+                }), h("circle", {
+                    key: `h${row.index}`,
+                    class: `st-dumbbellChart__dot st-dumbbellChart__dot--high st-dumbbellChart__dot--${highTone}`,
+                    cx: row.xHigh,
+                    cy: row.cy,
+                    r: DOT_RADIUS,
+                    "data-chart-index": row.index,
+                }));
+            }
+            const svgChildren = [
+                ...gridChildren,
+                h("line", { class: "st-dumbbellChart__axis", x1: MARGIN.left, x2: MARGIN.left, y1: MARGIN.top, y2: height - MARGIN.bottom }),
+                h("line", { class: "st-dumbbellChart__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }),
+                ...rowChildren,
+            ];
+            const legendEntries = [
+                { label: lowLabel, shape: "circle", tone: lowTone },
+                { label: highLabel, shape: "circle", tone: highTone },
+            ];
+            const hoveredRow = hoveredIndex.value !== null ? rows[hoveredIndex.value] : undefined;
+            return h("div", { ...attrs, class: classNames("st-dumbbellChart", props.class) }, [
+                h("div", {
+                    class: "st-dumbbellChart__visual",
+                    role: "img",
+                    "aria-label": label,
+                    onPointermove: handleVisualPointerMove,
+                    onPointerleave: handleLeave,
+                }, [
+                    h("svg", {
+                        viewBox: `0 0 ${width} ${height}`,
+                        preserveAspectRatio: "xMidYMid meet",
+                        width: "100%",
+                        height: "100%",
+                        focusable: "false",
+                        "aria-hidden": "true",
+                    }, svgChildren),
+                    h(GraphLegend, { class: "st-dumbbellChart__legend", entries: legendEntries }),
+                ]),
+                chartDataList(label, dataValueItems),
+                hoveredRow
+                    ? h("div", {
+                        class: "st-dumbbellChart__tooltip",
+                        role: "presentation",
+                        style: `left: ${(((hoveredRow.xLow + hoveredRow.xHigh) / 2) / width) * 100}%; top: ${(hoveredRow.cy / height) * 100}%`,
+                    }, [
+                        h("span", { class: "st-dumbbellChart__tooltipLabel" }, String(hoveredRow.datum.category)),
+                        h("span", { class: "st-dumbbellChart__tooltipValue" }, `${hoveredRow.range.lo} – ${hoveredRow.range.hi}`),
+                    ])
+                    : null,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=DumbbellChart.js.map

package/dist/DumbbellChart.js.map

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