@ac-design/design-system 2.0.0 → 2.1.0

package/dist/lib/charts/ChartFrame.vue.d.ts

@@ -42,6 +42,8 @@ type __VLS_Props = {
 type __VLS_Slots = {
     default?: () => unknown;
     tooltip?: (props: ChartTooltipSlotProps) => unknown;
+    /** Buttons over the plot, e.g. zoom. Kept outside the role="img" element so they stay reachable. */
+    controls?: () => unknown;
 };
 type __VLS_ModelProps = {
     "hidden": string[];

package/dist/lib/charts/ChartFrame.vue_vue_type_script_setup_true_lang.js

@@ -5,22 +5,22 @@ import { Fragment as n, Teleport as r, createBlock as i, createCommentVNode as a
 var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate" }, T = {
 	key: 0,
 	class: "ml-auto pl-3 font-medium text-heading tabular-nums"
-}, E = ["aria-label"], D = {
+}, E = ["role", "aria-label"], D = ["aria-label"], O = {
 	key: 4,
 	class: "sr-only"
-}, O = {
+}, k = {
 	key: 5,
 	class: "sr-only"
-}, k = {
+}, A = {
 	scope: "row",
 	class: "text-left"
-}, A = {
+}, j = {
 	key: 0,
 	class: "mb-1.5 font-medium text-heading"
-}, j = { class: "m-0 flex list-none flex-col gap-1 p-0" }, M = { class: "min-w-0 flex-1 truncate text-muted" }, N = { class: "pl-4 font-medium text-heading tabular-nums" }, P = {
+}, M = { class: "m-0 flex list-none flex-col gap-1 p-0" }, N = { class: "min-w-0 flex-1 truncate text-muted" }, P = { class: "pl-4 font-medium text-heading tabular-nums" }, F = {
 	key: 1,
 	class: "mt-1.5 flex justify-between gap-4 border-t border-border pt-1.5"
-}, F = { class: "font-medium text-heading tabular-nums" }, I = 14, L = 300, R = 200, z = /*@__PURE__*/ l({
+}, I = { class: "font-medium text-heading tabular-nums" }, L = 14, R = 300, z = 200, B = /*@__PURE__*/ l({
 	__name: "ChartFrame",
 	props: /*@__PURE__*/ u({
 		testid: {},
@@ -49,26 +49,26 @@ var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate
 	}),
 	emits: ["update:hidden", "update:width"],
 	setup(l) {
-		let u = l, z = b(l, "hidden"), B = b(l, "width"), V = g(), H;
-		function U(e) {
-			let t = z.value.includes(e);
-			!t && u.legendItems.length - z.value.length <= 1 || (z.value = t ? z.value.filter((t) => t !== e) : [...z.value, e]);
-		}
+		let u = l, B = b(l, "hidden"), V = b(l, "width"), H = g(), U;
 		function W(e) {
-			let t = e.clientX > window.innerWidth - L, n = e.clientY > window.innerHeight - R;
+			let t = B.value.includes(e);
+			!t && u.legendItems.length - B.value.length <= 1 || (B.value = t ? B.value.filter((t) => t !== e) : [...B.value, e]);
+		}
+		function G(e) {
+			let t = e.clientX > window.innerWidth - R, n = e.clientY > window.innerHeight - z;
 			return {
-				left: t ? void 0 : `${e.clientX + I}px`,
-				right: t ? `${window.innerWidth - e.clientX + I}px` : void 0,
-				top: n ? void 0 : `${e.clientY + I}px`,
-				bottom: n ? `${window.innerHeight - e.clientY + I}px` : void 0
+				left: t ? void 0 : `${e.clientX + L}px`,
+				right: t ? `${window.innerWidth - e.clientX + L}px` : void 0,
+				top: n ? void 0 : `${e.clientY + L}px`,
+				bottom: n ? `${window.innerHeight - e.clientY + L}px` : void 0
 			};
 		}
-		function G() {
-			H?.disconnect(), V.value && typeof ResizeObserver < "u" && (H = new ResizeObserver(([e]) => {
-				e && (B.value = Math.round(e.contentRect.width));
-			}), H.observe(V.value));
+		function K() {
+			U?.disconnect(), H.value && typeof ResizeObserver < "u" && (U = new ResizeObserver(([e]) => {
+				e && (V.value = Math.round(e.contentRect.width));
+			}), U.observe(H.value));
 		}
-		return x(V, G), m(G), p(() => H?.disconnect()), (u, p) => (h(), o("figure", {
+		return x(H, K), m(K), p(() => U?.disconnect()), (u, p) => (h(), o("figure", {
 			class: d(["m-0 flex w-full min-w-0 gap-3", l.legend === "right" ? "flex-wrap items-center justify-center gap-x-10" : "flex-col"]),
 			"data-ac-ds": "",
 			"data-ac-chart": "",
@@ -87,12 +87,12 @@ var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate
 				class: "flex"
 			}, [s("button", {
 				type: "button",
-				class: d(["inline-flex min-w-0 cursor-pointer items-center gap-2 rounded-6 text-xs transition-colors duration-200 hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface motion-reduce:transition-none", [z.value.includes(e.key) ? "text-muted/60 line-through" : "text-muted", l.legend === "right" && "w-full"]]),
-				"aria-pressed": !z.value.includes(e.key),
-				onClick: (t) => U(e.key)
+				class: d(["inline-flex min-w-0 cursor-pointer items-center gap-2 rounded-6 text-xs transition-colors duration-200 hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface motion-reduce:transition-none", [B.value.includes(e.key) ? "text-muted/60 line-through" : "text-muted", l.legend === "right" && "w-full"]]),
+				"aria-pressed": !B.value.includes(e.key),
+				onClick: (t) => W(e.key)
 			}, [
 				s("span", {
-					class: d(["size-2.5 shrink-0 rounded-full transition-opacity duration-200 motion-reduce:transition-none", z.value.includes(e.key) && "opacity-30"]),
+					class: d(["size-2.5 shrink-0 rounded-full transition-opacity duration-200 motion-reduce:transition-none", B.value.includes(e.key) && "opacity-30"]),
 					style: f({ backgroundColor: e.color }),
 					"aria-hidden": "true"
 				}, null, 6),
@@ -115,29 +115,34 @@ var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate
 			}, null, 8, ["icon", "title"])], 4)) : (h(), o("div", {
 				key: 3,
 				ref_key: "plot",
-				ref: V,
+				ref: H,
 				class: d(["relative min-w-0", l.legend === "right" ? "max-w-full shrink-0" : "w-full"]),
 				style: f(l.legend === "right" ? {
 					height: `${l.height}px`,
 					width: `${l.height}px`
 				} : { height: `${l.height}px` }),
+				role: u.$slots.controls ? void 0 : "img",
+				"aria-label": u.$slots.controls ? void 0 : l.summary
+			}, [u.$slots.controls ? (h(), o("div", {
+				key: 0,
+				class: "size-full",
 				role: "img",
 				"aria-label": l.summary
-			}, [v(u.$slots, "default")], 14, E)),
-			l.title || l.description ? (h(), o("figcaption", D, y([l.title, l.description].filter(Boolean).join(". ")), 1)) : a("", !0),
-			!l.loading && !l.empty ? (h(), o("table", O, [
+			}, [v(u.$slots, "default")], 8, D)) : v(u.$slots, "default", {}, void 0, void 0, 1), v(u.$slots, "controls")], 14, E)),
+			l.title || l.description ? (h(), o("figcaption", O, y([l.title, l.description].filter(Boolean).join(". ")), 1)) : a("", !0),
+			!l.loading && !l.empty ? (h(), o("table", k, [
 				s("caption", null, y(l.title ? `${l.title}: data` : "Chart data"), 1),
 				s("thead", null, [s("tr", null, [(h(!0), o(n, null, _(l.table.columns, (e, t) => (h(), o("th", {
 					key: t,
 					scope: "col",
 					class: "text-left"
 				}, y(e), 1))), 128))])]),
-				s("tbody", null, [(h(!0), o(n, null, _(l.table.rows, (e, t) => (h(), o("tr", { key: t }, [s("th", k, y(e[0]), 1), (h(!0), o(n, null, _(e.slice(1), (e, t) => (h(), o("td", { key: t }, y(e), 1))), 128))]))), 128))])
+				s("tbody", null, [(h(!0), o(n, null, _(l.table.rows, (e, t) => (h(), o("tr", { key: t }, [s("th", A, y(e[0]), 1), (h(!0), o(n, null, _(e.slice(1), (e, t) => (h(), o("td", { key: t }, y(e), 1))), 128))]))), 128))])
 			])) : a("", !0),
 			(h(), i(r, { to: "body" }, [l.tooltip && l.tip && !l.loading && !l.empty ? (h(), o("div", {
 				key: 0,
 				class: "pointer-events-none fixed z-[100] w-max max-w-[280px] min-w-[160px] rounded-10 border border-border bg-surface px-3 py-2.5 text-xs text-body shadow-lg",
-				style: f(W(l.tip)),
+				style: f(G(l.tip)),
 				"aria-hidden": "true",
 				"data-ac-ds": "",
 				"data-testid": "ac-chart-tooltip"
@@ -147,8 +152,8 @@ var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate
 				title: l.tip.title,
 				items: l.tip.items
 			}, () => [
-				l.tip.title ? (h(), o("p", A, y(l.tip.title), 1)) : a("", !0),
-				s("ul", j, [(h(!0), o(n, null, _(l.tip.items, (e) => (h(), o("li", {
+				l.tip.title ? (h(), o("p", j, y(l.tip.title), 1)) : a("", !0),
+				s("ul", M, [(h(!0), o(n, null, _(l.tip.items, (e) => (h(), o("li", {
 					key: e.key,
 					class: "flex items-center gap-2"
 				}, [
@@ -156,13 +161,13 @@ var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate
 						class: "size-2 shrink-0 rounded-full",
 						style: f({ backgroundColor: e.color })
 					}, null, 4),
-					s("span", M, y(e.name), 1),
-					s("span", N, y(e.formatted), 1)
+					s("span", N, y(e.name), 1),
+					s("span", P, y(e.formatted), 1)
 				]))), 128))]),
-				l.tip.total ? (h(), o("p", P, [p[0] ||= s("span", { class: "text-muted" }, "Total", -1), s("span", F, y(l.tip.total), 1)])) : a("", !0)
+				l.tip.total ? (h(), o("p", F, [p[0] ||= s("span", { class: "text-muted" }, "Total", -1), s("span", I, y(l.tip.total), 1)])) : a("", !0)
 			])], 4)) : a("", !0)]))
 		], 10, S));
 	}
 });
 //#endregion
-export { z as default };
+export { B as default };

package/dist/lib/charts/cartesian.d.ts

@@ -0,0 +1,324 @@
+import type { ECharts } from "echarts/core";
+import type { ChartTheme } from "./echarts";
+import type { useXYChart, XYChartProps } from "./xy";
+type XYState = ReturnType<typeof useXYChart>;
+interface CartesianOptions {
+    /** Bars sit between ticks; lines run edge to edge. */
+    boundaryGap: boolean;
+    /** Values on x and categories on y (horizontal bars). */
+    horizontal?: boolean;
+    /** `line` guide for lines and areas, `shadow` band for bars. */
+    pointer: "line" | "shadow";
+}
+/** Loads the zoom slider and wheel zoom only for charts that turn `zoom` on. */
+export declare function prepareZoom(props: Pick<XYChartProps, "zoom">): Promise<unknown> | undefined;
+export declare function animationFor(props: Pick<XYChartProps, "animation" | "data">, t: ChartTheme): boolean;
+export declare function cartesianOption(t: ChartTheme, props: XYChartProps, s: XYState, o: CartesianOptions): {
+    dataZoom?: ({
+        filterMode: string;
+        zoomOnMouseWheel: string;
+        moveOnMouseWheel: boolean;
+        moveOnMouseMove: boolean;
+        yAxisIndex: number;
+        xAxisIndex?: undefined;
+        type: string;
+    } | {
+        filterMode: string;
+        zoomOnMouseWheel: string;
+        moveOnMouseWheel: boolean;
+        moveOnMouseMove: boolean;
+        xAxisIndex: number;
+        yAxisIndex?: undefined;
+        type: string;
+    } | {
+        filterMode: string;
+        height: number;
+        bottom: number;
+        left: number;
+        right: number;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        fillerColor: string;
+        dataBackground: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            areaStyle: {
+                color: string;
+            };
+        };
+        selectedDataBackground: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            areaStyle: {
+                color: string;
+            };
+        };
+        handleStyle: {
+            color: string;
+            borderColor: string;
+        };
+        moveHandleStyle: {
+            color: string;
+        };
+        emphasis: {
+            handleStyle: {
+                borderColor: string;
+            };
+            moveHandleStyle: {
+                color: string;
+            };
+        };
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+        labelFormatter: (v: number) => string;
+        brushSelect: boolean;
+        yAxisIndex: number;
+        xAxisIndex?: undefined;
+        type: string;
+    } | {
+        filterMode: string;
+        height: number;
+        bottom: number;
+        left: number;
+        right: number;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        fillerColor: string;
+        dataBackground: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            areaStyle: {
+                color: string;
+            };
+        };
+        selectedDataBackground: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            areaStyle: {
+                color: string;
+            };
+        };
+        handleStyle: {
+            color: string;
+            borderColor: string;
+        };
+        moveHandleStyle: {
+            color: string;
+        };
+        emphasis: {
+            handleStyle: {
+                borderColor: string;
+            };
+            moveHandleStyle: {
+                color: string;
+            };
+        };
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+        labelFormatter: (v: number) => string;
+        brushSelect: boolean;
+        xAxisIndex: number;
+        yAxisIndex?: undefined;
+        type: string;
+    })[] | undefined;
+    animation: boolean;
+    animationDuration: number;
+    textStyle: {
+        fontFamily: string;
+        color: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        outerBoundsMode: string;
+        outerBoundsContain: string;
+    };
+    xAxis: {
+        type: string;
+        data: string[] | undefined;
+        boundaryGap: boolean;
+        min: string | undefined;
+        max: string | undefined;
+        axisLabel: {
+            formatter: ((v: number) => string) | undefined;
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+        };
+        axisPointer: {
+            show: boolean;
+            type: "line" | "shadow";
+            snap: boolean;
+            triggerTooltip: boolean;
+            lineStyle: {
+                color: string;
+                type: "dashed";
+            };
+            shadowStyle: {
+                color: string;
+            };
+            label: {
+                show: boolean;
+            };
+            z: number;
+        };
+        name: string | undefined;
+        nameLocation: "middle";
+        nameGap: number;
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+        };
+        nameTextStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    } | {
+        type: string;
+        min: number | undefined;
+        max: number | undefined;
+        splitNumber: number;
+        axisLine: {
+            show: boolean;
+        };
+        axisLabel: {
+            formatter: (v: number) => string;
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+                type: "dashed";
+            };
+        };
+        name: string | undefined;
+        nameLocation: "middle";
+        nameGap: number;
+        axisTick: {
+            show: boolean;
+        };
+        nameTextStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    };
+    yAxis: {
+        type: string;
+        min: number | undefined;
+        max: number | undefined;
+        splitNumber: number;
+        axisLine: {
+            show: boolean;
+        };
+        axisLabel: {
+            formatter: (v: number) => string;
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+                type: "dashed";
+            };
+        };
+        name: string | undefined;
+        nameLocation: "middle";
+        nameGap: number;
+        axisTick: {
+            show: boolean;
+        };
+        nameTextStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    } | {
+        inverse: boolean;
+        type: string;
+        data: string[] | undefined;
+        boundaryGap: boolean;
+        min: string | undefined;
+        max: string | undefined;
+        axisLabel: {
+            formatter: ((v: number) => string) | undefined;
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            hideOverlap: boolean;
+        };
+        splitLine: {
+            show: boolean;
+        };
+        axisPointer: {
+            show: boolean;
+            type: "line" | "shadow";
+            snap: boolean;
+            triggerTooltip: boolean;
+            lineStyle: {
+                color: string;
+                type: "dashed";
+            };
+            shadowStyle: {
+                color: string;
+            };
+            label: {
+                show: boolean;
+            };
+            z: number;
+        };
+        name: string | undefined;
+        nameLocation: "middle";
+        nameGap: number;
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+        };
+        nameTextStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    };
+};
+/** The row under the pointer: the category index, or the nearest x value on a time or number axis. */
+export declare function locateRow(chart: ECharts, point: [number, number], s: XYState, horizontal?: boolean): number | null;
+export {};

package/dist/lib/charts/cartesian.js

@@ -0,0 +1,137 @@
+import { axisStyle as e, loadOnce as t, nearestIndex as n } from "./echarts.js";
+import "./xy.js";
+//#region src/lib/charts/cartesian.ts
+function r(e) {
+	return e.zoom ? t("dataZoom", () => import("echarts/lib/component/dataZoom")) : void 0;
+}
+function i(e, t) {
+	return e.animation !== !1 && !t.reducedMotion && e.data.length <= 2e3;
+}
+function a(t, n, r, a) {
+	let o = e(t), s = r.byPosition.value, c = r.xKind.value, l = {
+		...o,
+		type: s ? "category" : c === "time" ? "time" : "value",
+		data: s ? n.data.map((e, t) => r.xTickFormat(t)) : void 0,
+		boundaryGap: s ? a.boundaryGap : !1,
+		min: s ? void 0 : "dataMin",
+		max: s ? void 0 : "dataMax",
+		axisLabel: {
+			...o.axisLabel,
+			formatter: s ? void 0 : (e) => r.xTickFormat(e)
+		},
+		splitLine: { show: !1 },
+		axisPointer: {
+			show: n.tooltip !== !1,
+			type: a.pointer,
+			snap: !0,
+			triggerTooltip: !1,
+			lineStyle: {
+				color: t.borderDark,
+				type: "dashed"
+			},
+			shadowStyle: { color: t.alpha(t.sunken, .6) },
+			label: { show: !1 },
+			z: 1
+		},
+		name: n.xLabel || void 0,
+		nameLocation: "middle",
+		nameGap: a.horizontal ? 36 : 28
+	}, [u, d] = n.yDomain ?? [void 0, void 0], f = n.data.some((e) => r.visibleKeys.value.some((t) => Number(e[t]) < 0)), p = u ?? (f ? void 0 : 0), m = d, h = {
+		...o,
+		type: "value",
+		min: p,
+		max: m,
+		splitNumber: r.yTicks.value,
+		axisLine: { show: !1 },
+		axisLabel: {
+			...o.axisLabel,
+			formatter: (e) => r.formatY(e)
+		},
+		splitLine: {
+			...o.splitLine,
+			show: n.gridLines !== !1
+		},
+		name: n.yLabel || void 0,
+		nameLocation: "middle",
+		nameGap: a.horizontal ? 28 : 44
+	}, g = a.horizontal ? { yAxisIndex: 0 } : { xAxisIndex: 0 };
+	return {
+		animation: i(n, t),
+		animationDuration: 300,
+		textStyle: {
+			fontFamily: t.font,
+			color: t.body
+		},
+		grid: {
+			left: n.yLabel && !a.horizontal ? 24 : 4,
+			right: 12,
+			top: 10,
+			bottom: (n.zoom ? 40 : 4) + (n.xLabel ? 22 : 0),
+			outerBoundsMode: "same",
+			outerBoundsContain: "all"
+		},
+		xAxis: a.horizontal ? h : l,
+		yAxis: a.horizontal ? {
+			...l,
+			inverse: !0
+		} : h,
+		...n.zoom && { dataZoom: [{
+			type: "inside",
+			...g,
+			filterMode: "none",
+			zoomOnMouseWheel: "ctrl",
+			moveOnMouseWheel: !1,
+			moveOnMouseMove: !0
+		}, {
+			type: "slider",
+			...g,
+			filterMode: "none",
+			height: 20,
+			bottom: n.xLabel ? 26 : 6,
+			left: 48,
+			right: 48,
+			borderColor: t.border,
+			borderRadius: 6,
+			backgroundColor: t.alpha(t.sunken, .5),
+			fillerColor: t.alpha(t.primary, .12),
+			dataBackground: {
+				lineStyle: {
+					color: t.borderDark,
+					width: 1
+				},
+				areaStyle: { color: t.alpha(t.borderDark, .25) }
+			},
+			selectedDataBackground: {
+				lineStyle: {
+					color: t.primary,
+					width: 1
+				},
+				areaStyle: { color: t.alpha(t.primary, .15) }
+			},
+			handleStyle: {
+				color: t.surface,
+				borderColor: t.borderDark
+			},
+			moveHandleStyle: { color: t.borderDark },
+			emphasis: {
+				handleStyle: { borderColor: t.primary },
+				moveHandleStyle: { color: t.primary }
+			},
+			textStyle: {
+				color: t.muted,
+				fontSize: 11,
+				fontFamily: t.font
+			},
+			labelFormatter: (e) => r.xTickFormat(e),
+			brushSelect: !1
+		}] }
+	};
+}
+function o(e, t, r, i = !1) {
+	let a = e.convertFromPixel({ gridIndex: 0 }, t)?.[+!!i];
+	if (a === void 0 || !Number.isFinite(a)) return null;
+	let o = r.xNumbers.value.length;
+	return o ? r.byPosition.value ? Math.min(o - 1, Math.max(0, Math.round(a))) : n(r.xNumbers.value, a) : null;
+}
+//#endregion
+export { i as animationFor, a as cartesianOption, o as locateRow, r as prepareZoom };