@sentropic/design-system-vue 0.13.0 → 0.14.0

package/dist/BoxPlotChart.d.ts

@@ -0,0 +1,68 @@
+export type BoxPlotChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type BoxPlotChartDatum = {
+    label: string;
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+    outliers?: number[];
+    tone?: BoxPlotChartTone;
+};
+export type BoxPlotChartProps = {
+    data: BoxPlotChartDatum[];
+    width?: number;
+    height?: number;
+    label: string;
+    class?: string;
+};
+export declare const BoxPlotChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => BoxPlotChartDatum[];
+        required: true;
+    };
+    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: () => BoxPlotChartDatum[];
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    width: number;
+    height: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=BoxPlotChart.d.ts.map

package/dist/BoxPlotChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxPlotChart.d.ts","sourceRoot":"","sources":["../src/BoxPlotChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyBF,eAAO,MAAM,YAAY;;cAGE,MAAM,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;cAAzB,MAAM,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;4EA4OlD,CAAC"}

package/dist/BoxPlotChart.js

@@ -0,0 +1,226 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList } from "./chartScale.js";
+const MARGIN = { top: 16, right: 20, bottom: 38, left: 48 };
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+function formatNumber(value) {
+    if (!Number.isFinite(value))
+        return "0";
+    if (Number.isInteger(value))
+        return String(value);
+    return value.toFixed(2).replace(/\.?0+$/, "");
+}
+function scaleLinear(v, d0, d1, r0, r1) {
+    if (d1 === d0)
+        return r0;
+    return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+}
+export const BoxPlotChart = defineComponent({
+    name: "BoxPlotChart",
+    props: {
+        data: { type: Array, required: true },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 260 },
+        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 data = props.data ?? [];
+            const width = props.width ?? 480;
+            const height = props.height ?? 260;
+            const label = props.label;
+            const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            // Compute domain from all values (NaN filtered)
+            const allValues = data
+                .flatMap((d) => [d.min, d.q1, d.median, d.q3, d.max, ...(d.outliers ?? [])])
+                .filter(Number.isFinite);
+            const domainMin = allValues.length > 0
+                ? (() => {
+                    const min = Math.min(...allValues);
+                    const max = Math.max(...allValues);
+                    const pad = (max - min) * 0.08 || Math.max(Math.abs(max), 1) * 0.1;
+                    return min - pad;
+                })()
+                : 0;
+            const domainMax = allValues.length > 0
+                ? (() => {
+                    const min = Math.min(...allValues);
+                    const max = Math.max(...allValues);
+                    const pad = (max - min) * 0.08 || Math.max(Math.abs(max), 1) * 0.1;
+                    return max + pad;
+                })()
+                : 1;
+            const band = data.length > 0 ? plotWidth / data.length : plotWidth;
+            const boxWidth = Math.min(54, Math.max(18, band * 0.44));
+            const plots = data.map((datum, index) => {
+                const cx = MARGIN.left + band * (index + 0.5);
+                const y = (value) => MARGIN.top + scaleLinear(value, domainMin, domainMax, plotHeight, 0);
+                const q1Y = y(datum.q1);
+                const q3Y = y(datum.q3);
+                const minY = y(datum.min);
+                const maxY = y(datum.max);
+                return {
+                    datum,
+                    tone: datum.tone ?? TONES[index % TONES.length],
+                    cx,
+                    boxX: cx - boxWidth / 2,
+                    boxY: Math.min(q1Y, q3Y),
+                    boxWidth,
+                    boxHeight: Math.max(Math.abs(q1Y - q3Y), 1),
+                    medianY: y(datum.median),
+                    minY,
+                    maxY,
+                    capWidth: boxWidth * 0.72,
+                    outliers: (datum.outliers ?? []).filter(Number.isFinite).map((v) => ({ value: v, y: y(v) })),
+                };
+            });
+            const svgChildren = [];
+            // Axes
+            svgChildren.push(h("line", {
+                class: "st-boxPlotChart__axis",
+                x1: MARGIN.left,
+                x2: MARGIN.left,
+                y1: MARGIN.top,
+                y2: height - MARGIN.bottom,
+            }), h("line", {
+                class: "st-boxPlotChart__axis",
+                x1: MARGIN.left,
+                x2: width - MARGIN.right,
+                y1: height - MARGIN.bottom,
+                y2: height - MARGIN.bottom,
+            }));
+            plots.forEach((plot, i) => {
+                const isDim = hoveredIndex.value !== null && hoveredIndex.value !== i;
+                svgChildren.push(
+                // Whisker line
+                h("line", {
+                    key: `w${plot.datum.label}`,
+                    class: "st-boxPlotChart__whisker",
+                    x1: plot.cx,
+                    x2: plot.cx,
+                    y1: plot.minY,
+                    y2: plot.maxY,
+                    "data-chart-index": i,
+                }), 
+                // Min cap
+                h("line", {
+                    key: `wmin${plot.datum.label}`,
+                    class: "st-boxPlotChart__whiskerCap",
+                    x1: plot.cx - plot.capWidth / 2,
+                    x2: plot.cx + plot.capWidth / 2,
+                    y1: plot.minY,
+                    y2: plot.minY,
+                    "data-chart-index": i,
+                }), 
+                // Max cap
+                h("line", {
+                    key: `wmax${plot.datum.label}`,
+                    class: "st-boxPlotChart__whiskerCap",
+                    x1: plot.cx - plot.capWidth / 2,
+                    x2: plot.cx + plot.capWidth / 2,
+                    y1: plot.maxY,
+                    y2: plot.maxY,
+                    "data-chart-index": i,
+                }), 
+                // IQR box
+                h("rect", {
+                    key: `b${plot.datum.label}`,
+                    class: classNames("st-boxPlotChart__box", `st-boxPlotChart__box--${plot.tone}`, isDim ? "st-boxPlotChart__box--dim" : undefined),
+                    x: plot.boxX,
+                    y: plot.boxY,
+                    width: plot.boxWidth,
+                    height: plot.boxHeight,
+                    "data-chart-index": i,
+                }), 
+                // Median line
+                h("line", {
+                    key: `m${plot.datum.label}`,
+                    class: "st-boxPlotChart__median",
+                    x1: plot.boxX,
+                    x2: plot.boxX + plot.boxWidth,
+                    y1: plot.medianY,
+                    y2: plot.medianY,
+                    "data-chart-index": i,
+                }), 
+                // Category label
+                h("text", {
+                    key: `l${plot.datum.label}`,
+                    class: "st-boxPlotChart__label",
+                    x: plot.cx,
+                    y: height - MARGIN.bottom + 16,
+                    "text-anchor": "middle",
+                }, plot.datum.label));
+                plot.outliers.forEach((outlier, oi) => {
+                    svgChildren.push(h("circle", {
+                        key: `o${plot.datum.label}-${oi}`,
+                        class: "st-boxPlotChart__outlier",
+                        cx: plot.cx,
+                        cy: outlier.y,
+                        r: "3",
+                        "data-chart-index": i,
+                    }));
+                });
+            });
+            const dataValueItems = data.map((datum) => {
+                const summary = `${datum.label}: min ${formatNumber(datum.min)}, q1 ${formatNumber(datum.q1)}, median ${formatNumber(datum.median)}, q3 ${formatNumber(datum.q3)}, max ${formatNumber(datum.max)}`;
+                const outliers = datum.outliers?.length ? `, outliers ${datum.outliers.map(formatNumber).join(", ")}` : "";
+                return `${summary}${outliers}`;
+            });
+            const hovered = hoveredIndex.value !== null ? plots[hoveredIndex.value] : undefined;
+            return h("div", { ...attrs, class: classNames("st-boxPlotChart", props.class) }, [
+                h("div", {
+                    class: "st-boxPlotChart__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-boxPlotChart__tooltip",
+                        role: "presentation",
+                        style: `left: ${(hovered.cx / width) * 100}%; top: ${(hovered.medianY / height) * 100}%`,
+                    }, [
+                        h("span", { class: "st-boxPlotChart__tooltipLabel" }, hovered.datum.label),
+                        h("span", { class: "st-boxPlotChart__tooltipValue" }, `Median ${formatNumber(hovered.datum.median)}`),
+                    ])
+                    : null,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=BoxPlotChart.js.map

package/dist/BoxPlotChart.js.map

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

package/dist/HeatmapChart.d.ts

@@ -0,0 +1,74 @@
+export type HeatmapChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type HeatmapChartDatum = {
+    x: string;
+    y: string;
+    value: number;
+    tone?: HeatmapChartTone;
+};
+export type HeatmapChartProps = {
+    data: HeatmapChartDatum[];
+    width?: number;
+    height?: number;
+    legend?: boolean;
+    label: string;
+    class?: string;
+};
+export declare const HeatmapChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => HeatmapChartDatum[];
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    legend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    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: () => HeatmapChartDatum[];
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    legend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    legend: boolean;
+    width: number;
+    height: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=HeatmapChart.d.ts.map

package/dist/HeatmapChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapChart.d.ts","sourceRoot":"","sources":["../src/HeatmapChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgCF,eAAO,MAAM,YAAY;;cAGE,MAAM,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAzB,MAAM,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA6LlD,CAAC"}

package/dist/HeatmapChart.js

@@ -0,0 +1,168 @@
+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: 64 };
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+function uniqueInOrder(values) {
+    const seen = new Set();
+    const out = [];
+    for (const v of values) {
+        if (!seen.has(v)) {
+            seen.add(v);
+            out.push(v);
+        }
+    }
+    return out;
+}
+function toneForValue(value, min, max) {
+    if (!Number.isFinite(value) || max <= min)
+        return "category1";
+    const index = Math.max(0, Math.min(TONES.length - 1, Math.floor(((value - min) / (max - min)) * TONES.length)));
+    return TONES[index];
+}
+export const HeatmapChart = defineComponent({
+    name: "HeatmapChart",
+    props: {
+        data: { type: Array, required: true },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 300 },
+        legend: { type: Boolean, default: false },
+        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 data = props.data ?? [];
+            const width = props.width ?? 480;
+            const height = props.height ?? 300;
+            const legend = props.legend ?? false;
+            const label = props.label;
+            const xLabels = uniqueInOrder(data.map((d) => d.x));
+            const yLabels = uniqueInOrder(data.map((d) => d.y));
+            const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            const cellWidth = xLabels.length > 0 ? plotWidth / xLabels.length : plotWidth;
+            const cellHeight = yLabels.length > 0 ? plotHeight / yLabels.length : plotHeight;
+            const values = data.map((d) => d.value).filter(Number.isFinite);
+            const min = values.length > 0 ? Math.min(...values) : 0;
+            const max = values.length > 0 ? Math.max(...values) : 1;
+            const cells = data.map((d, i) => {
+                const xIndex = Math.max(0, xLabels.indexOf(d.x));
+                const yIndex = Math.max(0, yLabels.indexOf(d.y));
+                return {
+                    datum: d,
+                    tone: d.tone ?? toneForValue(d.value, min, max),
+                    x: MARGIN.left + xIndex * cellWidth,
+                    y: MARGIN.top + yIndex * cellHeight,
+                    cellWidth,
+                    cellHeight,
+                    cx: MARGIN.left + xIndex * cellWidth + cellWidth / 2,
+                    cy: MARGIN.top + yIndex * cellHeight + cellHeight / 2,
+                    index: i,
+                };
+            });
+            const svgChildren = [];
+            yLabels.forEach((yLabel, row) => {
+                svgChildren.push(h("text", {
+                    key: `y${yLabel}`,
+                    class: "st-heatmapChart__axisLabel st-heatmapChart__axisLabel--y",
+                    x: MARGIN.left - 8,
+                    y: MARGIN.top + (row + 0.5) * (plotHeight / Math.max(yLabels.length, 1)),
+                    "text-anchor": "end",
+                    "dominant-baseline": "middle",
+                }, yLabel));
+            });
+            xLabels.forEach((xLabel, column) => {
+                svgChildren.push(h("text", {
+                    key: `x${xLabel}`,
+                    class: "st-heatmapChart__axisLabel st-heatmapChart__axisLabel--x",
+                    x: MARGIN.left + (column + 0.5) * (plotWidth / Math.max(xLabels.length, 1)),
+                    y: height - MARGIN.bottom + 20,
+                    "text-anchor": "middle",
+                }, xLabel));
+            });
+            svgChildren.push(h("rect", {
+                class: "st-heatmapChart__plot",
+                x: MARGIN.left,
+                y: MARGIN.top,
+                width: plotWidth,
+                height: plotHeight,
+            }));
+            cells.forEach((cell, i) => {
+                const isDim = hoveredIndex.value !== null && hoveredIndex.value !== i;
+                svgChildren.push(h("rect", {
+                    key: `${cell.datum.y}-${cell.datum.x}-${i}`,
+                    class: classNames("st-heatmapChart__cell", `st-heatmapChart__cell--${cell.tone}`, isDim ? "st-heatmapChart__cell--dim" : undefined),
+                    x: cell.x,
+                    y: cell.y,
+                    width: Math.max(cell.cellWidth - 2, 1),
+                    height: Math.max(cell.cellHeight - 2, 1),
+                    rx: "2",
+                    "data-chart-index": i,
+                }));
+            });
+            const dataValueItems = data.map((d) => `${d.y}, ${d.x}: ${d.value}`);
+            const hovered = hoveredIndex.value !== null ? cells[hoveredIndex.value] : undefined;
+            const children = [
+                h("div", {
+                    class: "st-heatmapChart__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),
+            ];
+            if (hovered) {
+                children.push(h("div", {
+                    class: "st-heatmapChart__tooltip",
+                    role: "presentation",
+                    style: `left: ${(hovered.cx / width) * 100}%; top: ${(hovered.cy / height) * 100}%`,
+                }, [
+                    h("span", { class: "st-heatmapChart__tooltipLabel" }, `${hovered.datum.y}, ${hovered.datum.x}`),
+                    h("span", { class: "st-heatmapChart__tooltipValue" }, String(hovered.datum.value)),
+                ]));
+            }
+            if (legend) {
+                children.push(h("div", { class: "st-heatmapChart__legend", "aria-hidden": "true" }, [
+                    h("span", { class: "st-heatmapChart__legendText" }, "Low"),
+                    h("span", { class: "st-heatmapChart__legendRamp" }, TONES.map((tone) => h("span", { key: tone, class: `st-heatmapChart__legendSwatch st-heatmapChart__legendSwatch--${tone}` }))),
+                    h("span", { class: "st-heatmapChart__legendText" }, "High"),
+                ]));
+            }
+            return h("div", { ...attrs, class: classNames("st-heatmapChart", props.class) }, children);
+        };
+    },
+});
+//# sourceMappingURL=HeatmapChart.js.map

package/dist/HeatmapChart.js.map

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

package/dist/HistogramChart.d.ts

@@ -0,0 +1,74 @@
+export type HistogramChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type HistogramChartBin = {
+    label: string;
+    value: number;
+    tone?: HistogramChartTone;
+};
+export type HistogramChartDatum = number | HistogramChartBin;
+export type HistogramChartProps = {
+    data: HistogramChartDatum[];
+    bins?: number;
+    width?: number;
+    height?: number;
+    label: string;
+    class?: string;
+};
+export declare const HistogramChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => HistogramChartDatum[];
+        required: true;
+    };
+    bins: {
+        type: NumberConstructor;
+        default: number;
+    };
+    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: () => HistogramChartDatum[];
+        required: true;
+    };
+    bins: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    width: number;
+    height: number;
+    bins: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=HistogramChart.d.ts.map

package/dist/HistogramChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistogramChart.d.ts","sourceRoot":"","sources":["../src/HistogramChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAC1B,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,iBAAiB,CAAC;AAE7D,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsDF,eAAO,MAAM,cAAc;;cAGA,MAAM,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA3B,MAAM,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA8IpD,CAAC"}