@sentropic/design-system-vue 0.3.0 → 0.4.0

package/dist/ScatterPlot.js

@@ -1,39 +1,127 @@
-import { defineComponent, h } from "vue";
+import { defineComponent, h, ref } from "vue";
 import { classNames } from "./classNames.js";
-const DATA_TONES = [
-    "category1", "category2", "category3", "category4",
-    "category5", "category6", "category7", "category8",
+import { chartDataList, formatTick, niceTicks, scaleLinear } from "./chartScale.js";
+const MARGIN = { top: 14, right: 18, bottom: 36, left: 48 };
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
 ];
-function clamp(value, min, max) {
-    return Math.min(max, Math.max(min, value));
-}
 export const ScatterPlot = defineComponent({
     name: "ScatterPlot",
     props: {
         data: { type: Array, required: true },
-        label: { type: String, default: "Scatter chart" },
-        width: { type: Number, default: undefined },
-        height: { type: Number, default: undefined },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 280 },
+        xLabel: { type: String, default: undefined },
+        yLabel: { type: String, default: undefined },
+        radius: { type: Number, default: 5 },
+        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 label = props.label ?? "Scatter chart";
-            return h("figure", {
-                ...attrs,
-                class: classNames("st-scatterPlot", props.class),
-                "aria-label": label,
-            }, [
-                h("span", { class: "st-visually-hidden" }, label),
-                h("svg", { viewBox: "0 0 320 160", "aria-hidden": "true" }, [
-                    ...props.data.map((datum, index) => h("circle", {
-                        key: index,
-                        class: classNames("st-scatterPlot__point", `st-scatterPlot__point--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`),
-                        cx: clamp(datum.x * 24 + 24, 12, 308),
-                        cy: clamp(148 - datum.y * 24, 12, 148),
-                        r: "5",
-                    }, [h("title", {}, datum.label ?? `${datum.x}, ${datum.y}`)])),
+            const width = props.width ?? 480;
+            const height = props.height ?? 280;
+            const radius = props.radius ?? 5;
+            const label = props.label;
+            const data = props.data;
+            const xs = data.map((d) => d.x);
+            const ys = data.map((d) => d.y);
+            const xTicks = niceTicks(Math.min(...xs), Math.max(...xs));
+            const yTicks = niceTicks(Math.min(...ys), Math.max(...ys));
+            const plotW = Math.max(width - MARGIN.left - MARGIN.right, 1);
+            const plotH = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            const xMin = xTicks[0];
+            const xMax = xTicks[xTicks.length - 1];
+            const yMin = yTicks[0];
+            const yMax = yTicks[yTicks.length - 1];
+            const points = data.map((d, i) => ({
+                cx: MARGIN.left + scaleLinear(d.x, xMin, xMax, 0, plotW),
+                cy: MARGIN.top + scaleLinear(d.y, yMin, yMax, plotH, 0),
+                datum: d,
+                tone: (d.tone ?? TONES[i % TONES.length]),
+            }));
+            const dataValueItems = data.map((d) => (d.label ? `${d.label}: x ${d.x}, y ${d.y}` : `x ${d.x}, y ${d.y}`));
+            const svgChildren = [];
+            for (const t of yTicks) {
+                const y = MARGIN.top + scaleLinear(t, yMin, yMax, plotH, 0);
+                svgChildren.push(h("line", { key: `gy${t}`, class: "st-scatterPlot__grid", x1: MARGIN.left, x2: width - MARGIN.right, y1: y, y2: y }), h("text", { key: `ty${t}`, class: "st-scatterPlot__tick", x: MARGIN.left - 6, y, "text-anchor": "end", "dominant-baseline": "middle" }, formatTick(t)));
+            }
+            for (const t of xTicks) {
+                const x = MARGIN.left + scaleLinear(t, xMin, xMax, 0, plotW);
+                svgChildren.push(h("text", { key: `tx${t}`, class: "st-scatterPlot__tick", x, y: height - MARGIN.bottom + 16, "text-anchor": "middle" }, formatTick(t)));
+            }
+            svgChildren.push(h("line", { class: "st-scatterPlot__axis", x1: MARGIN.left, x2: MARGIN.left, y1: MARGIN.top, y2: height - MARGIN.bottom }), h("line", { class: "st-scatterPlot__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }));
+            if (props.xLabel) {
+                svgChildren.push(h("text", { class: "st-scatterPlot__axisLabel", x: MARGIN.left + plotW / 2, y: height - 4, "text-anchor": "middle" }, props.xLabel));
+            }
+            if (props.yLabel) {
+                svgChildren.push(h("text", {
+                    class: "st-scatterPlot__axisLabel",
+                    x: 12,
+                    y: MARGIN.top + plotH / 2,
+                    "text-anchor": "middle",
+                    transform: `rotate(-90 12 ${MARGIN.top + plotH / 2})`,
+                }, props.yLabel));
+            }
+            points.forEach((p, i) => {
+                svgChildren.push(h("circle", {
+                    key: `p${i}`,
+                    class: classNames("st-scatterPlot__point", `st-scatterPlot__point--${p.tone}`),
+                    cx: p.cx,
+                    cy: p.cy,
+                    r: radius,
+                    "data-chart-index": i,
+                }));
+            });
+            const hovered = hoveredIndex.value !== null ? points[hoveredIndex.value] : undefined;
+            return h("div", { ...attrs, class: classNames("st-scatterPlot", props.class) }, [
+                h("div", {
+                    class: "st-scatterPlot__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-scatterPlot__tooltip",
+                        role: "presentation",
+                        style: `left: ${(hovered.cx / width) * 100}%; top: ${(hovered.cy / height) * 100}%`,
+                    }, [
+                        hovered.datum.label ? h("span", { class: "st-scatterPlot__tooltipLabel" }, hovered.datum.label) : null,
+                        h("span", { class: "st-scatterPlot__tooltipValue" }, `x ${hovered.datum.x} · y ${hovered.datum.y}`),
+                    ])
+                    : null,
             ]);
         };
     },

package/dist/ScatterPlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterPlot.js","sourceRoot":"","sources":["../src/ScatterPlot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAa7C,MAAM,UAAU,GAAG;IACjB,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;IAClD,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;CACnD,CAAC;AAEF,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IACpD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAAiC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACjE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE;QACjD,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC5C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,eAAe,CAAC;YAC7C,OAAO,CAAC,CACN,QAAQ,EACR;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC;gBAChD,YAAY,EAAE,KAAK;aACpB,EACD;gBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,KAAK,CAAC;gBACjD,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE;oBAC1D,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACjC,CAAC,CACC,QAAQ,EACR;wBACE,GAAG,EAAE,KAAK;wBACV,KAAK,EAAE,UAAU,CACf,uBAAuB,EACvB,0BAA0B,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,EAAE,CAChF;wBACD,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;wBACrC,EAAE,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;wBACtC,CAAC,EAAE,GAAG;qBACP,EACD,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1D,CACF;iBACF,CAAC;aACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"ScatterPlot.js","sourceRoot":"","sources":["../src/ScatterPlot.ts"],"names":[],"mappings":"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"}

package/dist/Search.d.ts

@@ -3,6 +3,8 @@ export type SearchProps = {
     label?: unknown;
     size?: SearchSize;
     modelValue?: string;
+    /** Svelte/React-canonical alias for `modelValue`. */
+    value?: string;
     placeholder?: string;
     disabled?: boolean;
     id?: string;
@@ -21,6 +23,10 @@ export declare const Search: import("vue").DefineComponent<import("vue").Extract
         type: StringConstructor;
         default: undefined;
     };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
     placeholder: {
         type: StringConstructor;
         default: undefined;
@@ -52,6 +58,10 @@ export declare const Search: import("vue").DefineComponent<import("vue").Extract
         type: StringConstructor;
         default: undefined;
     };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
     placeholder: {
         type: StringConstructor;
         default: undefined;
@@ -79,6 +89,7 @@ export declare const Search: import("vue").DefineComponent<import("vue").Extract
     id: string;
     disabled: boolean;
     size: SearchSize;
+    value: string;
     placeholder: string;
     modelValue: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/Search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../src/Search.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,eAAO,MAAM,MAAM;;cAG+B,MAAM,OAAO;;;;cACnC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;cADM,MAAM,OAAO;;;;cACnC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA2D1C,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../src/Search.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,eAAO,MAAM,MAAM;;cAG+B,MAAM,OAAO;;;;cACnC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cADM,MAAM,OAAO;;;;cACnC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA4D1C,CAAC"}

package/dist/Search.js

@@ -10,6 +10,7 @@ export const Search = defineComponent({
         label: { type: [String, Object], default: undefined },
         size: { type: String, default: "md" },
         modelValue: { type: String, default: undefined },
+        value: { type: String, default: undefined },
         placeholder: { type: String, default: undefined },
         disabled: { type: Boolean, default: false },
         id: { type: String, default: undefined },
@@ -36,7 +37,7 @@ export const Search = defineComponent({
                     id: inputId,
                     class: "st-search__control st-search__input",
                     type: "search",
-                    value: props.modelValue,
+                    value: props.modelValue ?? props.value,
                     placeholder: props.placeholder,
                     disabled: props.disabled,
                     onInput: (event) => {

package/dist/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sourceRoot":"","sources":["../src/Search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAc7C,IAAI,QAAQ,GAAG,CAAC,CAAC;AACjB,SAAS,MAAM;IACb,OAAO,aAAa,EAAE,QAAQ,EAAE,CAAC;AACnC,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA6B,EAAE,OAAO,EAAE,SAAS,EAAE;QACjF,IAAI,EAAE,EAAE,IAAI,EAAE,MAA0B,EAAE,OAAO,EAAE,IAAI,EAAE;QACzD,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAChD,WAAW,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QACjD,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QACxC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;IACxD,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;QAE7B,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,IAAI,MAAM,CAAC,KAAK,CAAC;YAEzC,OAAO,CAAC,CACN,KAAK,EACL;gBACE,KAAK,EAAE,UAAU,CACf,WAAW,EACX,cAAc,KAAK,CAAC,IAAI,EAAE,EAC1B,KAAK,CAAC,KAAK,CACZ;aACF,EACD;gBACE,KAAK,CAAC,KAAK;oBACT,CAAC,CAAC,CAAC,CACC,OAAO,EACP,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,OAAO,EAAE,EAC1C,KAAK,CAAC,KAAe,CACtB;oBACH,CAAC,CAAC,IAAI;gBACR,CAAC,CAAC,MAAM,EAAE;oBACR,KAAK,EAAE,iBAAiB;oBACxB,aAAa,EAAE,MAAM;oBACrB,SAAS,EAAE,GAAG;iBACf,CAAC;gBACF,CAAC,CAAC,OAAO,EAAE;oBACT,GAAG,KAAK;oBACR,EAAE,EAAE,OAAO;oBACX,KAAK,EAAE,qCAAqC;oBAC5C,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,KAAK,CAAC,UAAU;oBACvB,WAAW,EAAE,KAAK,CAAC,WAAW;oBAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBACxB,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE;wBACxB,IAAI,CACF,mBAAmB,EAClB,KAAK,CAAC,MAA2B,CAAC,KAAK,CACzC,CAAC;wBACF,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;oBACvB,CAAC;oBACD,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;wBACzB,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;oBACxB,CAAC;iBACF,CAAC;aACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../src/Search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,IAAI,QAAQ,GAAG,CAAC,CAAC;AACjB,SAAS,MAAM;IACb,OAAO,aAAa,EAAE,QAAQ,EAAE,CAAC;AACnC,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA6B,EAAE,OAAO,EAAE,SAAS,EAAE;QACjF,IAAI,EAAE,EAAE,IAAI,EAAE,MAA0B,EAAE,OAAO,EAAE,IAAI,EAAE;QACzD,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAChD,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,WAAW,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QACjD,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QACxC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;IACxD,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;QAE7B,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,IAAI,MAAM,CAAC,KAAK,CAAC;YAEzC,OAAO,CAAC,CACN,KAAK,EACL;gBACE,KAAK,EAAE,UAAU,CACf,WAAW,EACX,cAAc,KAAK,CAAC,IAAI,EAAE,EAC1B,KAAK,CAAC,KAAK,CACZ;aACF,EACD;gBACE,KAAK,CAAC,KAAK;oBACT,CAAC,CAAC,CAAC,CACC,OAAO,EACP,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,OAAO,EAAE,EAC1C,KAAK,CAAC,KAAe,CACtB;oBACH,CAAC,CAAC,IAAI;gBACR,CAAC,CAAC,MAAM,EAAE;oBACR,KAAK,EAAE,iBAAiB;oBACxB,aAAa,EAAE,MAAM;oBACrB,SAAS,EAAE,GAAG;iBACf,CAAC;gBACF,CAAC,CAAC,OAAO,EAAE;oBACT,GAAG,KAAK;oBACR,EAAE,EAAE,OAAO;oBACX,KAAK,EAAE,qCAAqC;oBAC5C,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK;oBACtC,WAAW,EAAE,KAAK,CAAC,WAAW;oBAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBACxB,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE;wBACxB,IAAI,CACF,mBAAmB,EAClB,KAAK,CAAC,MAA2B,CAAC,KAAK,CACzC,CAAC;wBACF,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;oBACvB,CAAC;oBACD,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;wBACzB,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;oBACxB,CAAC;iBACF,CAAC;aACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/Slider.d.ts

@@ -83,11 +83,11 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
 }>, {
     class: string;
     label: string;
+    min: number;
+    max: number;
     size: SliderSize;
     value: number;
     modelValue: number;
-    min: number;
-    max: number;
     defaultValue: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Slider.d.ts.map

package/dist/Sparkline.d.ts

@@ -1,8 +1,12 @@
 export type SparklineTone = "neutral" | "success" | "warning" | "error";
 export type SparklineProps = {
     data: number[];
-    label?: string;
+    width?: number;
+    height?: number;
     tone?: SparklineTone;
+    strokeWidth?: number;
+    area?: boolean;
+    label?: string;
     class?: string;
 };
 export declare const Sparkline: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -10,14 +14,30 @@ export declare const Sparkline: import("vue").DefineComponent<import("vue").Extr
         type: () => number[];
         required: true;
     };
-    label: {
-        type: StringConstructor;
-        default: string;
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
     };
     tone: {
         type: () => SparklineTone;
         default: string;
     };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    area: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -29,21 +49,41 @@ export declare const Sparkline: import("vue").DefineComponent<import("vue").Extr
         type: () => number[];
         required: true;
     };
-    label: {
-        type: StringConstructor;
-        default: string;
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
     };
     tone: {
         type: () => SparklineTone;
         default: string;
     };
+    strokeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    area: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
     };
 }>> & Readonly<{}>, {
     class: string;
+    area: boolean;
     label: string;
     tone: SparklineTone;
+    width: number;
+    height: number;
+    strokeWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Sparkline.d.ts.map

package/dist/Sparkline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../src/Sparkline.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAExE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF,eAAO,MAAM,SAAS;;cAGK,MAAM,MAAM,EAAE;;;;;;;;cAEb,MAAM,aAAa;;;;;;;;;;;cAFpB,MAAM,MAAM,EAAE;;;;;;;;cAEb,MAAM,aAAa;;;;;;;;;;;4EA2B7C,CAAC"}
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../src/Sparkline.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAExE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,SAAS;;cAGK,MAAM,MAAM,EAAE;;;;;;;;;;;;cAGb,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;cAHpB,MAAM,MAAM,EAAE;;;;;;;;;;;;cAGb,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgF7C,CAAC"}

package/dist/Sparkline.js

@@ -1,40 +1,76 @@
 import { defineComponent, h } from "vue";
 import { classNames } from "./classNames.js";
-function pointsFrom(values, width, height) {
-    const max = Math.max(...values, 1);
-    return values
-        .map((value, index) => {
-        const x = values.length === 1 ? width / 2 : (index / (values.length - 1)) * width;
-        const y = height - (value / max) * height;
-        return `${x},${y}`;
-    })
-        .join(" ");
-}
+const PADDING = 2;
 export const Sparkline = defineComponent({
     name: "Sparkline",
     props: {
         data: { type: Array, required: true },
-        label: { type: String, default: "Sparkline" },
+        width: { type: Number, default: 120 },
+        height: { type: Number, default: 28 },
         tone: { type: String, default: "neutral" },
+        strokeWidth: { type: Number, default: 1.5 },
+        area: { type: Boolean, default: false },
+        label: { type: String, default: undefined },
         class: { type: String, default: undefined },
     },
     setup(props, { attrs }) {
         return () => {
-            const label = props.label ?? "Sparkline";
+            const width = props.width ?? 120;
+            const height = props.height ?? 28;
             const tone = props.tone ?? "neutral";
-            return h("figure", {
+            const strokeWidth = props.strokeWidth ?? 1.5;
+            const area = props.area ?? false;
+            const label = props.label;
+            const data = props.data;
+            let line = "";
+            let areaPath = "";
+            if (data && data.length !== 0) {
+                const min = Math.min(...data);
+                const max = Math.max(...data);
+                const span = max - min || 1;
+                const innerWidth = Math.max(width - PADDING * 2, 1);
+                const innerHeight = Math.max(height - PADDING * 2, 1);
+                const step = data.length > 1 ? innerWidth / (data.length - 1) : 0;
+                const pts = data.map((value, index) => {
+                    const x = PADDING + step * index;
+                    const normalised = (value - min) / span;
+                    const y = PADDING + (1 - normalised) * innerHeight;
+                    return { x, y };
+                });
+                line = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ");
+                const baseline = height - PADDING;
+                const first = pts[0];
+                const last = pts[pts.length - 1];
+                areaPath = `${line} L${last.x.toFixed(2)},${baseline.toFixed(2)} L${first.x.toFixed(2)},${baseline.toFixed(2)} Z`;
+            }
+            const svgChildren = [];
+            if (area && areaPath) {
+                svgChildren.push(h("path", { d: areaPath, class: "st-sparkline__area" }));
+            }
+            if (line) {
+                svgChildren.push(h("path", {
+                    d: line,
+                    class: "st-sparkline__line",
+                    fill: "none",
+                    "stroke-width": strokeWidth,
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                }));
+            }
+            return h("span", {
                 ...attrs,
                 class: classNames("st-sparkline", `st-sparkline--${tone}`, props.class),
+                role: "img",
                 "aria-label": label,
             }, [
-                h("span", { class: "st-visually-hidden" }, label),
-                h("svg", { viewBox: "0 0 120 40", "aria-hidden": "true" }, [
-                    h("polyline", {
-                        class: "st-sparkline__line",
-                        points: pointsFrom(props.data, 120, 40),
-                        fill: "none",
-                    }),
-                ]),
+                h("svg", {
+                    width,
+                    height,
+                    viewBox: `0 0 ${width} ${height}`,
+                    preserveAspectRatio: "none",
+                    "aria-hidden": label ? "true" : undefined,
+                    focusable: "false",
+                }, svgChildren),
             ]);
         };
     },

package/dist/Sparkline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../src/Sparkline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAW7C,SAAS,UAAU,CAAC,MAAgB,EAAE,KAAa,EAAE,MAAc;IACjE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;IACnC,OAAO,MAAM;SACV,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACpB,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;QAClF,MAAM,CAAC,GAAG,MAAM,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC;QAC1C,OAAO,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;IACrB,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAAuB,EAAE,QAAQ,EAAE,IAAI,EAAE;QACvD,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE;QAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,MAA6B,EAAE,OAAO,EAAE,SAAS,EAAE;QACjE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,WAAW,CAAC;YACzC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,SAAS,CAAC;YACrC,OAAO,CAAC,CACN,QAAQ,EACR;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CAAC,cAAc,EAAE,iBAAiB,IAAI,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC;gBACvE,YAAY,EAAE,KAAK;aACpB,EACD;gBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,KAAK,CAAC;gBACjD,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE;oBACzD,CAAC,CAAC,UAAU,EAAE;wBACZ,KAAK,EAAE,oBAAoB;wBAC3B,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC;wBACvC,IAAI,EAAE,MAAM;qBACb,CAAC;iBACH,CAAC;aACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../src/Sparkline.ts"],"names":[],"mappings":"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"}

package/dist/StackedBarChart.d.ts

@@ -1,18 +1,19 @@
+export type StackedBarTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
 export type StackedBarSegment = {
     label: string;
     value: number;
-    tone?: string;
+    tone?: StackedBarTone;
 };
 export type StackedBarDatum = {
     label: string;
     segments: StackedBarSegment[];
 };
-export type StackedBarTone = string;
 export type StackedBarChartProps = {
     data: StackedBarDatum[];
-    label?: string;
     width?: number;
     height?: number;
+    label: string;
+    showLegend?: boolean;
     class?: string;
 };
 export declare const StackedBarChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -20,17 +21,21 @@ export declare const StackedBarChart: import("vue").DefineComponent<import("vue"
         type: () => StackedBarDatum[];
         required: true;
     };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
     width: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
     };
     height: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    showLegend: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     class: {
         type: StringConstructor;
@@ -43,17 +48,21 @@ export declare const StackedBarChart: import("vue").DefineComponent<import("vue"
         type: () => StackedBarDatum[];
         required: true;
     };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
     width: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
     };
     height: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    showLegend: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     class: {
         type: StringConstructor;
@@ -61,8 +70,8 @@ export declare const StackedBarChart: import("vue").DefineComponent<import("vue"
     };
 }>> & Readonly<{}>, {
     class: string;
-    label: string;
     width: number;
     height: number;
+    showLegend: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=StackedBarChart.d.ts.map

package/dist/StackedBarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBarChart.d.ts","sourceRoot":"","sources":["../src/StackedBarChart.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAChF,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,iBAAiB,EAAE,CAAA;CAAE,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,eAAO,MAAM,eAAe;;cAGD,MAAM,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;cAAvB,MAAM,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;4EAuDhD,CAAC"}
+{"version":3,"file":"StackedBarChart.d.ts","sourceRoot":"","sources":["../src/StackedBarChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GACtB,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,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4BF,eAAO,MAAM,eAAe;;cAGD,MAAM,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAvB,MAAM,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAoLhD,CAAC"}