@sentropic/design-system-vue 0.36.0 → 0.36.19

package/dist/ColumnPyramidChart.d.ts

@@ -0,0 +1,75 @@
+export type ColumnPyramidChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type ColumnPyramidChartDatum = {
+    category: string;
+    value: number;
+    tone?: ColumnPyramidChartTone;
+};
+export type ColumnPyramidChartProps = {
+    data: ColumnPyramidChartDatum[];
+    width?: number;
+    height?: number;
+    label: string;
+    /** Default tone for columns whose datum has no `tone`. */
+    tone?: ColumnPyramidChartTone;
+    class?: string;
+};
+export declare const ColumnPyramidChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => ColumnPyramidChartDatum[];
+        default: () => never[];
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    tone: {
+        type: () => ColumnPyramidChartTone;
+        default: string;
+    };
+    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: () => ColumnPyramidChartDatum[];
+        default: () => never[];
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    tone: {
+        type: () => ColumnPyramidChartTone;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    data: ColumnPyramidChartDatum[];
+    height: number;
+    width: number;
+    tone: ColumnPyramidChartTone;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=ColumnPyramidChart.d.ts.map

package/dist/ColumnPyramidChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnPyramidChart.d.ts","sourceRoot":"","sources":["../src/ColumnPyramidChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,sBAAsB,GAC9B,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,uBAAuB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,kBAAkB;;cAGJ,MAAM,uBAAuB,EAAE;;;;;;;;;;;;;;;;cAI9B,MAAM,sBAAsB;;;;;;;;;;;cAJ7B,MAAM,uBAAuB,EAAE;;;;;;;;;;;;;;;;cAI9B,MAAM,sBAAsB;;;;;;;;;;;;;4EA2MtD,CAAC"}

package/dist/ColumnPyramidChart.js

@@ -0,0 +1,162 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList, formatTick, niceTicks, scaleLinear } from "./chartScale.js";
+const MARGIN = { top: 24, right: 16, bottom: 32, left: 44 };
+export const ColumnPyramidChart = defineComponent({
+    name: "ColumnPyramidChart",
+    props: {
+        data: { type: Array, default: () => [] },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 280 },
+        label: { type: String, required: true },
+        tone: { type: String, default: "category1" },
+        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 ?? 280;
+            const label = props.label;
+            const data = props.data ?? [];
+            const defaultTone = props.tone ?? "category1";
+            // Valid data: finite, strictly-positive value (a triangle sitting on the X
+            // axis is only meaningful for a value > 0).
+            const validData = data.filter((d) => Number.isFinite(d.value) && d.value > 0);
+            const values = validData.map((d) => d.value);
+            const minRaw = 0;
+            const maxRaw = Math.max(0, ...values);
+            const ticks = niceTicks(minRaw, maxRaw, 5);
+            const domainMin = ticks[0];
+            const domainMax = ticks[ticks.length - 1];
+            const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            let columns = [];
+            if (validData.length !== 0) {
+                const band = plotWidth / validData.length;
+                const baseWidth = band * 0.7;
+                const zeroY = MARGIN.top + scaleLinear(0, domainMin, domainMax, plotHeight, 0);
+                columns = validData.map((d, i) => {
+                    const apexY = MARGIN.top + scaleLinear(d.value, domainMin, domainMax, plotHeight, 0);
+                    const cx = MARGIN.left + band * (i + 0.5);
+                    const leftX = cx - baseWidth / 2;
+                    const rightX = cx + baseWidth / 2;
+                    // Triangle: wide base on the X axis, apex centred at the value height.
+                    const points = `${leftX},${zeroY} ${rightX},${zeroY} ${cx},${apexY}`;
+                    return {
+                        datum: d,
+                        tone: (d.tone ?? defaultTone),
+                        points,
+                        cx,
+                        cy: apexY,
+                        labelX: cx,
+                        labelY: height - MARGIN.bottom + 16,
+                    };
+                });
+            }
+            const dataValueItems = validData.map((d) => `${d.category}: ${d.value}`);
+            const valueAxisTicks = ticks.map((tick) => ({
+                value: tick,
+                x1: MARGIN.left,
+                x2: MARGIN.left + plotWidth,
+                y: MARGIN.top + scaleLinear(tick, domainMin, domainMax, plotHeight, 0),
+            }));
+            const svgChildren = [];
+            // gridlines + value axis ticks
+            for (const tick of valueAxisTicks) {
+                svgChildren.push(h("line", {
+                    key: `g${tick.value}`,
+                    class: "st-columnPyramidChart__grid",
+                    x1: tick.x1,
+                    x2: tick.x2,
+                    y1: tick.y,
+                    y2: tick.y,
+                }), h("text", {
+                    key: `t${tick.value}`,
+                    class: "st-columnPyramidChart__tickLabel",
+                    x: MARGIN.left - 6,
+                    y: tick.y,
+                    "text-anchor": "end",
+                    "dominant-baseline": "middle",
+                }, formatTick(tick.value)));
+            }
+            // axes
+            svgChildren.push(h("line", {
+                class: "st-columnPyramidChart__axis",
+                x1: MARGIN.left,
+                x2: MARGIN.left,
+                y1: MARGIN.top,
+                y2: height - MARGIN.bottom,
+            }), h("line", {
+                class: "st-columnPyramidChart__axis",
+                x1: MARGIN.left,
+                x2: width - MARGIN.right,
+                y1: height - MARGIN.bottom,
+                y2: height - MARGIN.bottom,
+            }));
+            // category labels
+            for (const col of columns) {
+                svgChildren.push(h("text", {
+                    key: `cat-${col.datum.category}`,
+                    class: "st-columnPyramidChart__categoryLabel",
+                    x: col.labelX,
+                    y: col.labelY,
+                    "text-anchor": "middle",
+                }, col.datum.category));
+            }
+            // pyramid columns (decorative, inside aria-hidden SVG)
+            for (let i = 0; i < columns.length; i++) {
+                const col = columns[i];
+                svgChildren.push(h("polygon", {
+                    key: `col-${col.datum.category}`,
+                    class: `st-columnPyramidChart__column st-columnPyramidChart__column--${col.tone}`,
+                    points: col.points,
+                    "data-chart-index": i,
+                }));
+            }
+            const hovered = hoveredIndex.value !== null ? columns[hoveredIndex.value] : undefined;
+            return h("div", { ...attrs, class: classNames("st-columnPyramidChart", props.class) }, [
+                h("div", {
+                    class: "st-columnPyramidChart__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),
+                ]),
+                chartDataList(label, dataValueItems),
+                hovered
+                    ? h("div", {
+                        class: "st-columnPyramidChart__tooltip",
+                        role: "presentation",
+                        style: `left: ${(hovered.cx / width) * 100}%; top: ${(hovered.cy / height) * 100}%`,
+                    }, [
+                        h("span", { class: "st-columnPyramidChart__tooltipLabel" }, hovered.datum.category),
+                        h("span", { class: "st-columnPyramidChart__tooltipValue" }, String(hovered.datum.value)),
+                    ])
+                    : null,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=ColumnPyramidChart.js.map

package/dist/ColumnPyramidChart.js.map

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

package/dist/ColumnRangeChart.d.ts

@@ -0,0 +1,91 @@
+export type ColumnRangeChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type ColumnRangeChartDatum = {
+    category: string;
+    low: number;
+    high: number;
+    tone?: ColumnRangeChartTone;
+};
+export type ColumnRangeChartProps = {
+    data: ColumnRangeChartDatum[];
+    width?: number;
+    height?: number;
+    orientation?: "vertical" | "horizontal";
+    label: string;
+    /**
+     * Fixed value-axis domain `[min, max]`. When provided (and finite), the value
+     * scale uses it instead of the data-derived min/max — letting several
+     * ColumnRangeCharts in a grid share one scale. When absent or invalid, the
+     * scale falls back to the auto data range (unchanged).
+     */
+    domain?: [number, number];
+    class?: string;
+};
+export declare const ColumnRangeChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => ColumnRangeChartDatum[];
+        default: () => never[];
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    orientation: {
+        type: () => "vertical" | "horizontal";
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    domain: {
+        type: () => [number, number];
+        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: () => ColumnRangeChartDatum[];
+        default: () => never[];
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    orientation: {
+        type: () => "vertical" | "horizontal";
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    domain: {
+        type: () => [number, number];
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    data: ColumnRangeChartDatum[];
+    height: number;
+    width: number;
+    orientation: "horizontal" | "vertical";
+    domain: [number, number];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=ColumnRangeChart.d.ts.map

package/dist/ColumnRangeChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnRangeChart.d.ts","sourceRoot":"","sources":["../src/ColumnRangeChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAC5B,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAUF,eAAO,MAAM,gBAAgB;;cAGF,MAAM,qBAAqB,EAAE;;;;;;;;;;;;cAGrB,MAAM,UAAU,GAAG,YAAY;;;;;;;;cAE1B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;;;cALnC,MAAM,qBAAqB,EAAE;;;;;;;;;;;;cAGrB,MAAM,UAAU,GAAG,YAAY;;;;;;;;cAE1B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;;;;;;4EAmT5D,CAAC"}

package/dist/ColumnRangeChart.js

@@ -0,0 +1,259 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList, formatTick, niceTicks } from "./chartScale.js";
+const MARGIN = { top: 12, right: 16, bottom: 32, left: 44 };
+// 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 ColumnRangeChart = defineComponent({
+    name: "ColumnRangeChart",
+    props: {
+        data: { type: Array, default: () => [] },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 240 },
+        orientation: { type: String, default: "vertical" },
+        label: { type: String, required: true },
+        domain: { type: Array, default: undefined },
+        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 orientation = props.orientation ?? "vertical";
+            const label = props.label;
+            const data = props.data ?? [];
+            // Valid data: finite low + high.
+            const validData = data.filter((d) => normalize(d) !== null);
+            // A domain is honoured only when finite and ordered (min < max).
+            const domain = props.domain;
+            const validDomain = domain && Number.isFinite(domain[0]) && Number.isFinite(domain[1]) && domain[0] < domain[1]
+                ? [domain[0], domain[1]]
+                : null;
+            const lows = validData.map((d) => Math.min(d.low, d.high));
+            const highs = validData.map((d) => Math.max(d.low, d.high));
+            const minRaw = validDomain ? validDomain[0] : Math.min(...lows, ...highs);
+            const maxRaw = validDomain ? validDomain[1] : Math.max(...lows, ...highs);
+            const ticks = niceTicks(minRaw, maxRaw, 5);
+            const domainMin = ticks[0];
+            const domainMax = ticks[ticks.length - 1];
+            const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            // Fraction [0,1] of a value along the value axis.
+            const valueFraction = (v) => {
+                if (domainMax === domainMin)
+                    return 0;
+                const f = (v - domainMin) / (domainMax - domainMin);
+                return Math.min(1, Math.max(0, f));
+            };
+            let bars = [];
+            if (validData.length !== 0) {
+                if (orientation === "vertical") {
+                    const band = plotWidth / validData.length;
+                    const barWidth = band * 0.62;
+                    const yOf = (v) => plotHeight * (1 - valueFraction(v));
+                    bars = validData.map((d, i) => {
+                        const range = normalize(d);
+                        const yLow = yOf(range.lo);
+                        const yHigh = yOf(range.hi);
+                        const y = Math.min(yLow, yHigh);
+                        const hh = Math.abs(yLow - yHigh);
+                        const x = MARGIN.left + band * i + (band - barWidth) / 2;
+                        return {
+                            x,
+                            y: MARGIN.top + y,
+                            width: barWidth,
+                            height: Math.max(hh, 0.5),
+                            cx: MARGIN.left + band * (i + 0.5),
+                            cy: MARGIN.top + (yLow + yHigh) / 2,
+                            datum: d,
+                            range,
+                            tone: (d.tone ?? "category1"),
+                        };
+                    });
+                }
+                else {
+                    const band = plotHeight / validData.length;
+                    const barHeight = band * 0.62;
+                    const xOf = (v) => plotWidth * valueFraction(v);
+                    bars = validData.map((d, i) => {
+                        const range = normalize(d);
+                        const xLow = xOf(range.lo);
+                        const xHigh = xOf(range.hi);
+                        const x = Math.min(xLow, xHigh);
+                        const w = Math.abs(xHigh - xLow);
+                        const y = MARGIN.top + band * i + (band - barHeight) / 2;
+                        return {
+                            x: MARGIN.left + x,
+                            y,
+                            width: Math.max(w, 0.5),
+                            height: barHeight,
+                            cx: MARGIN.left + (xLow + xHigh) / 2,
+                            cy: MARGIN.top + band * (i + 0.5),
+                            datum: d,
+                            range,
+                            tone: (d.tone ?? "category1"),
+                        };
+                    });
+                }
+            }
+            const dataValueItems = bars.map((bar) => `${bar.datum.category}: ${bar.range.lo} – ${bar.range.hi}`);
+            const valueAxisTicks = ticks.map((tick) => {
+                if (orientation === "vertical") {
+                    return {
+                        value: tick,
+                        x1: MARGIN.left,
+                        x2: MARGIN.left + plotWidth,
+                        y: MARGIN.top + plotHeight * (1 - valueFraction(tick)),
+                        x: undefined,
+                        y1: undefined,
+                        y2: undefined,
+                    };
+                }
+                return {
+                    value: tick,
+                    x: MARGIN.left + plotWidth * valueFraction(tick),
+                    y1: MARGIN.top,
+                    y2: MARGIN.top + plotHeight,
+                    x1: undefined,
+                    x2: undefined,
+                    y: undefined,
+                };
+            });
+            const svgChildren = [];
+            // gridlines + value axis ticks
+            for (const tick of valueAxisTicks) {
+                if (orientation === "vertical") {
+                    svgChildren.push(h("line", {
+                        key: `g${tick.value}`,
+                        class: "st-columnRangeChart__grid",
+                        x1: tick.x1,
+                        x2: tick.x2,
+                        y1: tick.y,
+                        y2: tick.y,
+                    }), h("text", {
+                        key: `t${tick.value}`,
+                        class: "st-columnRangeChart__tickLabel",
+                        x: MARGIN.left - 6,
+                        y: tick.y,
+                        "text-anchor": "end",
+                        "dominant-baseline": "middle",
+                    }, formatTick(tick.value)));
+                }
+                else {
+                    svgChildren.push(h("line", {
+                        key: `g${tick.value}`,
+                        class: "st-columnRangeChart__grid",
+                        x1: tick.x,
+                        x2: tick.x,
+                        y1: tick.y1,
+                        y2: tick.y2,
+                    }), h("text", {
+                        key: `t${tick.value}`,
+                        class: "st-columnRangeChart__tickLabel",
+                        x: tick.x,
+                        y: height - MARGIN.bottom + 16,
+                        "text-anchor": "middle",
+                    }, formatTick(tick.value)));
+                }
+            }
+            // axes
+            svgChildren.push(h("line", {
+                class: "st-columnRangeChart__axis",
+                x1: MARGIN.left,
+                x2: MARGIN.left,
+                y1: MARGIN.top,
+                y2: height - MARGIN.bottom,
+            }), h("line", {
+                class: "st-columnRangeChart__axis",
+                x1: MARGIN.left,
+                x2: width - MARGIN.right,
+                y1: height - MARGIN.bottom,
+                y2: height - MARGIN.bottom,
+            }));
+            // category labels
+            for (const bar of bars) {
+                if (orientation === "vertical") {
+                    svgChildren.push(h("text", {
+                        key: `cat-${bar.datum.category}`,
+                        class: "st-columnRangeChart__categoryLabel",
+                        x: bar.x + bar.width / 2,
+                        y: height - MARGIN.bottom + 16,
+                        "text-anchor": "middle",
+                    }, bar.datum.category));
+                }
+                else {
+                    svgChildren.push(h("text", {
+                        key: `cat-${bar.datum.category}`,
+                        class: "st-columnRangeChart__categoryLabel",
+                        x: MARGIN.left - 6,
+                        y: bar.y + bar.height / 2,
+                        "text-anchor": "end",
+                        "dominant-baseline": "middle",
+                    }, bar.datum.category));
+                }
+            }
+            // range bars (decorative, inside aria-hidden SVG)
+            for (let i = 0; i < bars.length; i++) {
+                const bar = bars[i];
+                svgChildren.push(h("rect", {
+                    key: `bar-${bar.datum.category}`,
+                    class: `st-columnRangeChart__bar st-columnRangeChart__bar--${bar.tone}`,
+                    x: bar.x,
+                    y: bar.y,
+                    width: bar.width,
+                    height: bar.height,
+                    rx: "2",
+                    "data-chart-index": i,
+                }));
+            }
+            const hovered = hoveredIndex.value !== null ? bars[hoveredIndex.value] : undefined;
+            return h("div", { ...attrs, class: classNames("st-columnRangeChart", props.class) }, [
+                h("div", {
+                    class: "st-columnRangeChart__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),
+                ]),
+                chartDataList(label, dataValueItems),
+                hovered
+                    ? h("div", {
+                        class: "st-columnRangeChart__tooltip",
+                        role: "presentation",
+                        style: `left: ${(hovered.cx / width) * 100}%; top: ${(hovered.cy / height) * 100}%`,
+                    }, [
+                        h("span", { class: "st-columnRangeChart__tooltipLabel" }, hovered.datum.category),
+                        h("span", { class: "st-columnRangeChart__tooltipValue" }, `${hovered.range.lo} – ${hovered.range.hi}`),
+                    ])
+                    : null,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=ColumnRangeChart.js.map

package/dist/ColumnRangeChart.js.map

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

package/dist/DataTable.d.ts

@@ -263,10 +263,10 @@ export declare const DataTable: import("vue").DefineComponent<import("vue").Extr
     size: DataTableSize;
     class: string;
     caption: VNodeChild;
+    selectedIds: string[];
     page: number;
     emptyLabel: string;
     selectable: DataTableSelectMode;
-    selectedIds: string[];
     onSelectionChange: (ids: string[]) => void;
     sortable: boolean;
     sortBy: DataTableSort | null;