@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -0,0 +1,53 @@
+import type { Tone } from "../components/types";
+/** A chart palette slot (`chart-1` … `chart-8`), a status tone, or `pending` (violet). */
+export type ChartColor = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | Tone | "pending";
+/** One series (line, area, bar) or one donut segment. */
+export interface ChartCategory {
+    /** Label in the legend, tooltip and data table. */
+    name: string;
+    /** Colour slot. Defaults to `chart-1`, `chart-2`… in the order the categories are listed. */
+    color?: ChartColor;
+}
+export type ChartDatum = Record<string, any>;
+/** A key of each row, or a function that reads the value from a row. */
+export type ChartAccessor<T = unknown> = string | ((d: ChartDatum, i: number) => T);
+/** Where the legend sits. */
+export type ChartLegendPosition = "top" | "bottom" | "none";
+/** The shape between points: straight, smooth (monotone, never overshoots) or stepped. */
+export type ChartCurve = "linear" | "monotone" | "step";
+/** What the tooltip shows for one series at the hovered point. */
+export interface ChartTooltipItem {
+    key: string;
+    name: string;
+    /** A CSS colour, e.g. `var(--color-chart-1)`. */
+    color: string;
+    value: number | null;
+    /** `value` run through `yFormatter`. */
+    formatted: string;
+}
+export interface ChartLegendItem {
+    key: string;
+    name: string;
+    color: string;
+    /** Shown after the name, e.g. a donut segment's value. */
+    value?: string;
+}
+export interface ChartTable {
+    columns: string[];
+    rows: string[][];
+}
+/** CSS colour for a category; colour follows the category's position in the full list, so hiding one never repaints the rest. */
+export declare function chartColor(color: ChartColor | undefined, position: number): string;
+export declare function readValue<T = unknown>(d: ChartDatum, i: number, accessor: ChartAccessor<T>): T;
+export declare function readNumber(d: ChartDatum, key: string): number | null;
+/** The default value formatter: 1.2K, 3.4M. */
+export declare function formatCompact(value: number): string;
+/** How the x values are placed: on a time scale, a number scale, or evenly as categories. */
+export type XKind = "time" | "number" | "category";
+export declare function detectXKind(values: unknown[]): XKind;
+export declare function toTimestamp(v: unknown): number;
+/** Default labels for time values, like d3's multi-scale format: `14:00` within a day, `Oct 10` at midnight, `Oct` (or `Oct 2026`) at a month start on a long span. */
+export declare function timeFormatters(values: number[]): {
+    tick: (t: number) => string;
+    title: (t: number) => string;
+};

package/dist/lib/charts/shared.js

@@ -0,0 +1,96 @@
+//#region src/lib/charts/shared.ts
+var e = {
+	"chart-1": "var(--color-chart-1)",
+	"chart-2": "var(--color-chart-2)",
+	"chart-3": "var(--color-chart-3)",
+	"chart-4": "var(--color-chart-4)",
+	"chart-5": "var(--color-chart-5)",
+	"chart-6": "var(--color-chart-6)",
+	"chart-7": "var(--color-chart-7)",
+	"chart-8": "var(--color-chart-8)",
+	primary: "var(--color-primary)",
+	info: "var(--color-info)",
+	success: "var(--color-success)",
+	warning: "var(--color-warning)",
+	danger: "var(--color-danger)",
+	pending: "var(--color-pending)"
+}, t = [
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5",
+	"chart-6",
+	"chart-7",
+	"chart-8"
+];
+function n(n, r) {
+	return e[n ?? t[r % t.length]];
+}
+function r(e, t, n) {
+	return typeof n == "function" ? n(e, t) : e[n];
+}
+function i(e, t) {
+	let n = e[t];
+	if (n == null || n === "") return null;
+	let r = Number(n);
+	return Number.isFinite(r) ? r : null;
+}
+var a = new Intl.NumberFormat(void 0, {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+function o(e) {
+	return a.format(e);
+}
+var s = /^\d{4}-\d{2}-\d{2}/, c = 1e11;
+function l(e) {
+	return e.length ? e.every((e) => e instanceof Date || typeof e == "string" && s.test(e)) ? "time" : e.every((e) => typeof e == "number" && Number.isFinite(e)) ? e.every((e) => e >= c) ? "time" : "number" : "category" : "category";
+}
+var u = /^(\d{4})-(\d{2})-(\d{2})$/;
+function d(e) {
+	if (e instanceof Date) return e.getTime();
+	if (typeof e == "number") return e;
+	let t = u.exec(String(e));
+	return t ? new Date(+t[1], t[2] - 1, +t[3]).getTime() : Date.parse(String(e));
+}
+var f = 864e5;
+function p(e) {
+	let t = new Date(e);
+	return t.getHours() === 0 && t.getMinutes() === 0;
+}
+function m(e) {
+	return p(e) && new Date(e).getDate() === 1;
+}
+function h(e) {
+	let t = e.length ? Math.max(...e) - Math.min(...e) : 0, n = e.length > 0 && e.every(m), r = e.length > 0 && e.every(p), i = new Intl.DateTimeFormat(void 0, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	}), a = new Intl.DateTimeFormat(void 0, {
+		month: "short",
+		day: "numeric"
+	}), o = new Intl.DateTimeFormat(void 0, { month: "short" }), s = new Intl.DateTimeFormat(void 0, {
+		month: "short",
+		year: "numeric"
+	}), c = new Intl.DateTimeFormat(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	}), l = new Intl.DateTimeFormat(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	}), u = new Intl.DateTimeFormat(void 0, {
+		month: "long",
+		year: "numeric"
+	});
+	return {
+		tick: (e) => p(e) ? t > 60 * f && m(e) ? (t > 365 * f ? s : o).format(e) : a.format(e) : i.format(e),
+		title: (e) => n ? u.format(e) : r ? l.format(e) : c.format(e)
+	};
+}
+//#endregion
+export { n as chartColor, l as detectXKind, o as formatCompact, i as readNumber, r as readValue, h as timeFormatters, d as toTimestamp };

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

@@ -0,0 +1,69 @@
+import type { ChartAccessor, ChartCategory, ChartDatum, ChartLegendItem, ChartLegendPosition, ChartTable, ChartTooltipItem } from "./shared";
+export interface XYChartProps {
+    /** Rows to plot, one per x value, e.g. `{ time: "2026-10-10T14:00:00Z", cpu: 42, memory: 61 }`. */
+    data: ChartDatum[];
+    /** The x value of each row: a key or a function. `Date`s, ISO date strings and millisecond timestamps go on a time axis, other numbers on a number axis, and strings are spaced evenly. */
+    index: ChartAccessor;
+    /** The series to draw, keyed by the row field that holds each value: `{ cpu: { name: "CPU", color: "chart-1" } }`. Colours default to `chart-1`, `chart-2`… in this order. */
+    categories: Record<string, ChartCategory>;
+    /** Plot height in px. The width fills the container. */
+    height?: number;
+    /** Formats x values on the axis, in the tooltip title and in the data table. Receives a `Date` on a time axis. Defaults to times (`14:00`), days (`Oct 10`) or months (`Oct`) by the span of the data. */
+    xFormatter?: (value: Date | number | string) => string;
+    /** Formats values on the axis, in the tooltip and in the data table. Defaults to compact numbers: `1.2K`, `3.4M`. */
+    yFormatter?: (value: number) => string;
+    /** Title under the x axis, e.g. "Time (UTC)". Also heads the first column of the screen-reader table. */
+    xLabel?: string;
+    /** Title beside the y axis, e.g. "CPU (%)". */
+    yLabel?: string;
+    /** Legend above or below the plot, or `none`. Hidden anyway for a single series; clicking an entry hides or shows that series. */
+    legend?: ChartLegendPosition;
+    /** Shows a tooltip with every series' value on hover. Customise it with the `tooltip` slot. */
+    tooltip?: boolean;
+    /** Draws grid lines across the plot at each value tick. */
+    gridLines?: boolean;
+    /** Fixes the value axis range, e.g. `[0, 100]` for percentages. Leave an end `undefined` to fit the data. Defaults to starting at 0 and rounding the top up. */
+    yDomain?: [number | undefined, number | undefined];
+    /** Shows a skeleton of the same height while data loads. */
+    loading?: boolean;
+    /** Short heading shown in place of the plot when `data` is empty, e.g. "No metrics for demo-redis yet". */
+    emptyText?: string;
+    /** Accessible name, e.g. "CPU and memory of demo-postgres". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the chart shows. Defaults to the series names and the x range. */
+    description?: string;
+    /** Adds zoom and pan along the x axis: drag the slider under the plot, or scroll and pinch over it. For long time series. */
+    zoom?: boolean;
+    /** `canvas` (default) stays fast with tens of thousands of points; `svg` is crisper when printed and lighter for a few dozen. */
+    renderer?: "canvas" | "svg";
+    /** Animates the first draw and updates. Off by itself above 2,000 rows and when the viewer asks for reduced motion. */
+    animation?: boolean;
+}
+export type XYChartDefaults = Required<Pick<XYChartProps, "height" | "legend" | "tooltip" | "gridLines" | "loading" | "emptyText" | "zoom" | "renderer" | "animation">>;
+/** Rows above this draw without animation and without point markers, and line series are sampled (LTTB). */
+export declare const LARGE_DATA = 2000;
+/** `positions` places x by index (bars); otherwise time and number x values keep their real spacing. */
+export declare function useXYChart(props: XYChartProps, options: {
+    stacked: () => boolean;
+    positions?: boolean;
+    horizontal?: () => boolean;
+}): {
+    hidden: import("vue").Ref<string[], string[]>;
+    width: import("vue").Ref<number, number>;
+    keys: import("vue").ComputedRef<string[]>;
+    visibleKeys: import("vue").ComputedRef<string[]>;
+    colorOf: import("vue").ComputedRef<Record<string, string>>;
+    legendItems: import("vue").ComputedRef<ChartLegendItem[]>;
+    xKind: import("vue").ComputedRef<import("./shared").XKind>;
+    rawX: import("vue").ComputedRef<unknown[]>;
+    xNumbers: import("vue").ComputedRef<number[]>;
+    byPosition: import("vue").ComputedRef<boolean>;
+    yTicks: import("vue").ComputedRef<number>;
+    xTickFormat: (tick: number | Date) => string;
+    formatY: (v: number | null) => string;
+    rowLabel: (i: number) => string;
+    tooltipItems: (d: ChartDatum) => ChartTooltipItem[];
+    tooltipTotal: (d: ChartDatum) => string;
+    table: import("vue").ComputedRef<ChartTable>;
+    ariaLabel: import("vue").ComputedRef<string>;
+};

package/dist/lib/charts/xy.js

@@ -0,0 +1,73 @@
+import { chartColor as e, detectXKind as t, formatCompact as n, readNumber as r, readValue as i, timeFormatters as a, toTimestamp as o } from "./shared.js";
+import { computed as s, ref as c } from "vue";
+//#region src/lib/charts/xy.ts
+var l = 2e3, u = 56;
+function d(l, d) {
+	let f = c([]), p = c(0), m = s(() => Object.keys(l.categories)), h = s(() => m.value.filter((e) => !f.value.includes(e))), g = s(() => Object.fromEntries(m.value.map((t, n) => [t, e(l.categories[t]?.color, n)]))), _ = (e) => l.categories[e]?.name ?? e, v = s(() => m.value.map((e) => ({
+		key: e,
+		name: _(e),
+		color: g.value[e]
+	}))), y = s(() => l.data.map((e, t) => i(e, t, l.index))), b = s(() => t(y.value)), x = s(() => y.value.map((e, t) => b.value === "time" ? o(e) : b.value === "number" ? e : t)), S = s(() => a(b.value === "time" ? x.value : [])), C = s(() => d.positions || b.value === "category");
+	function w(e, t) {
+		let r = b.value === "time" ? /* @__PURE__ */ new Date(+e) : e;
+		return l.xFormatter ? l.xFormatter(r) : b.value === "time" ? (t ? S.value.title : S.value.tick)(+e) : b.value === "number" ? n(+e) : String(r ?? "");
+	}
+	function T(e) {
+		return w(b.value === "category" ? y.value[e] : x.value[e], !0);
+	}
+	function E(e) {
+		return e === null ? "–" : l.yFormatter ? l.yFormatter(e) : n(e);
+	}
+	let D = s(() => Math.max(2, Math.floor((l.height ?? 280) / u)));
+	function O(e) {
+		if (C.value) {
+			let t = Math.round(+e);
+			return b.value === "category" ? w(y.value[t], !1) : w(x.value[t], !1);
+		}
+		return w(+e, !1);
+	}
+	function k(e) {
+		return h.value.map((t) => {
+			let n = r(e, t);
+			return {
+				key: t,
+				name: _(t),
+				color: g.value[t],
+				value: n,
+				formatted: E(n)
+			};
+		});
+	}
+	function A(e) {
+		return E(h.value.reduce((t, n) => t + (r(e, n) ?? 0), 0));
+	}
+	let j = s(() => ({
+		columns: [l.xLabel || (b.value === "time" ? "Time" : "Name"), ...m.value.map(_)],
+		rows: l.data.map((e, t) => [T(t), ...m.value.map((t) => E(r(e, t)))])
+	})), M = s(() => {
+		let e = m.value.map(_).join(", "), t = l.data.length, n = t ? ` from ${T(0)} to ${T(t - 1)}` : "";
+		return `${m.value.length === 1 ? "Series" : `${m.value.length} series`}: ${e}. ${t} points${n}.`;
+	});
+	return {
+		hidden: f,
+		width: p,
+		keys: m,
+		visibleKeys: h,
+		colorOf: g,
+		legendItems: v,
+		xKind: b,
+		rawX: y,
+		xNumbers: x,
+		byPosition: C,
+		yTicks: D,
+		xTickFormat: O,
+		formatY: E,
+		rowLabel: T,
+		tooltipItems: k,
+		tooltipTotal: A,
+		table: j,
+		ariaLabel: s(() => [l.title, l.description || M.value].filter(Boolean).join(". "))
+	};
+}
+//#endregion
+export { l as LARGE_DATA, d as useXYChart };