@ac-design/design-system 2.6.0 → 2.7.0

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

@@ -131,7 +131,7 @@ var C = ["data-testid"], w = ["aria-pressed", "onClick"], T = { class: "truncate
 				"aria-label": u.summary
 			}, [y(e.$slots, "default")], 8, O)) : y(e.$slots, "default", {}, void 0, void 0, 1), y(e.$slots, "controls")], 14, D)),
 			u.title || u.description ? (g(), s("figcaption", k, b([u.title, u.description].filter(Boolean).join(". ")), 1)) : o("", !0),
-			!u.loading && !u.empty ? (g(), s("table", A, [
+			!u.loading && !u.empty ? (g(), s("div", A, [c("table", null, [
 				c("caption", null, b(u.title ? `${u.title}: data` : "Chart data"), 1),
 				c("thead", null, [c("tr", null, [(g(!0), s(r, null, v(u.table.columns, (e, t) => (g(), s("th", {
 					key: t,
@@ -139,7 +139,7 @@ var C = ["data-testid"], w = ["aria-pressed", "onClick"], T = { class: "truncate
 					class: "text-left"
 				}, b(e), 1))), 128))])]),
 				c("tbody", null, [(g(!0), s(r, null, v(u.table.rows, (e, t) => (g(), s("tr", { key: t }, [c("th", j, b(e[0]), 1), (g(!0), s(r, null, v(e.slice(1), (e, t) => (g(), s("td", { key: t }, b(e), 1))), 128))]))), 128))])
-			])) : o("", !0),
+			])])) : o("", !0),
 			(g(), a(i, { to: "body" }, [u.tooltip && u.tip && !u.loading && !u.empty ? (g(), s("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",

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

@@ -1,4 +1,4 @@
-import type { Component } from "vue";
+export { nodeImage } from "./nodeSymbol";
 /** Node diameter in px at 100% zoom. */
 export declare const NODE_SIZE = 40;
 /** Gap between a node and its label. */
@@ -11,6 +11,7 @@ export declare const GROUP_TITLE = 20;
 export interface LayoutNode {
     id: string;
     label: string;
+    /** The second line under the name: the kind, or the node's `sublabel`. */
     kind: string;
     group?: string;
     badge: boolean;
@@ -22,6 +23,8 @@ export interface LayoutLink {
 }
 export interface GroupBox {
     name: string;
+    /** How many groups it sits inside: 0 for a top-level box. Inner boxes draw over outer ones. */
+    depth: number;
     /** Top-left corner and size, in layout px. */
     x: number;
     y: number;
@@ -51,8 +54,11 @@ export declare function labelDetail(scale: number): LabelDetail;
 export declare function truncate(text: string, max: number): string;
 export declare function nodeName(label: string): string;
 export declare function nodeKind(kind: string): string;
-/** Layered layout: ranks follow the links, and nodes of a group are kept together as a dagre cluster. */
-export declare function layoutGraph(nodes: LayoutNode[], links: LayoutLink[], direction: "LR" | "TB"): GraphLayout;
+/**
+ * Layered layout: ranks follow the links, and nodes of a group are kept together as a dagre cluster.
+ * `parents` maps a group to the group it sits inside, so boxes can nest (a subnet inside its VPC).
+ */
+export declare function layoutGraph(nodes: LayoutNode[], links: LayoutLink[], direction: "LR" | "TB", parents?: Map<string, string>): GraphLayout;
 /**
  * How far the drawing reaches past the node centres' box, in screen px at `scale`.
  * Nodes and group boxes scale; labels don't, so the answer isn't linear in `scale`.
@@ -63,15 +69,3 @@ export declare function overhang(layout: GraphLayout, scale: number, detail: Lab
     right: number;
     bottom: number;
 };
-export interface NodeImageOptions {
-    icon: Component | string;
-    /** Resolved colours (ECharts and SVG images can't read CSS variables). */
-    iconColor: string;
-    fill: string;
-    ring: string;
-    ringWidth: number;
-    shape: "circle" | "square";
-    font: string;
-}
-/** One node as an `image://` symbol: fill, ring and icon in a 40×40 view box, rasterised large enough to stay sharp at 150% on a 2× screen. */
-export declare function nodeImage(o: NodeImageOptions): string;

package/dist/lib/charts/graph.js

@@ -1,41 +1,57 @@
-import { h as e, render as t } from "vue";
-import n from "@dagrejs/dagre";
-var r = 20, i = 22, a = 24, o = 18, s = "\0group:", c = [
+import { nodeImage as e } from "./nodeSymbol.js";
+import t from "@dagrejs/dagre";
+var n = 22, r = 24, i = 18, a = "\0group:", o = [
 	"full",
 	"name",
 	"badge"
 ];
-function l(e) {
+function s(e) {
 	return e >= .6 ? "full" : e >= .4 ? "name" : "badge";
 }
-var u = {
+var c = {
 	full: 36,
 	name: 22,
 	badge: 22
 };
-function d(e, t) {
+function l(e, t) {
 	return e.length > t ? `${e.slice(0, t - 1)}…` : e;
 }
-function f(e) {
-	return d(e, i);
+function u(e) {
+	return l(e, n);
 }
-function p(e) {
-	return d(e, a);
+function d(e) {
+	return l(e, r);
 }
-function m(e) {
-	let t = e.badge ? o : 0, n = f(e.label).length * 6.8 + t, r = p(e.kind).length * 6.2;
+function f(e) {
+	let t = e.badge ? i : 0, n = u(e.label).length * 6.8 + t, r = d(e.kind).length * 6.2;
 	return {
 		full: Math.max(n, r) + 8,
 		name: n + 8,
 		badge: t
 	};
 }
-function h(e, t, r) {
-	let i = new n.graphlib.Graph({
+function p(e, t, n) {
+	let r = a + t;
+	if (e.hasNode(r)) return r;
+	e.setNode(r, {
+		width: 0,
+		height: 0
+	});
+	let i = n.get(t);
+	if (i === void 0 || i === t) return r;
+	let o = p(e, i, n);
+	return m(e, r, o) || e.setParent(r, o), r;
+}
+function m(e, t, n) {
+	for (let r = n; r !== void 0; r = e.parent(r) || void 0) if (r === t) return !0;
+	return !1;
+}
+function h(e, n, r, i = /* @__PURE__ */ new Map()) {
+	let a = new t.graphlib.Graph({
 		compound: !0,
 		multigraph: !0
 	});
-	i.setGraph(r === "TB" ? {
+	a.setGraph(r === "TB" ? {
 		rankdir: "TB",
 		nodesep: 28,
 		ranksep: 44,
@@ -45,76 +61,88 @@ function h(e, t, r) {
 		nodesep: 20,
 		ranksep: 72,
 		edgesep: 52
-	}), i.setDefaultEdgeLabel(() => ({}));
-	let a = /* @__PURE__ */ new Map();
+	}), a.setDefaultEdgeLabel(() => ({}));
+	let o = /* @__PURE__ */ new Map();
 	for (let t of e) {
-		let e = m(t);
-		a.set(t.id, {
+		let e = f(t);
+		o.set(t.id, {
 			full: e.full / 2,
 			name: e.name / 2,
 			badge: e.badge / 2
 		});
 		let n = Math.max(40, e.full);
-		if (i.setNode(t.id, {
+		a.setNode(t.id, {
 			width: n,
 			height: 76
-		}), t.group) {
-			let e = s + t.group;
-			i.hasNode(e) || i.setNode(e, {
-				width: 0,
-				height: 0
-			}), i.setParent(t.id, e);
-		}
+		}), t.group && a.setParent(t.id, p(a, t.group, i));
 	}
-	t.forEach((e, t) => {
+	n.forEach((e, t) => {
 		let n = e.label ? {
 			width: e.label.length * 6.4 + 16,
 			height: 18,
 			labelpos: "c"
 		} : {};
-		i.setEdge(e.source, e.target, n, String(t));
-	}), n.layout(i);
-	let o = /* @__PURE__ */ new Map(), c = {
+		a.setEdge(e.source, e.target, n, String(t));
+	}), t.layout(a);
+	let s = /* @__PURE__ */ new Map(), c = {
 		minX: Infinity,
 		minY: Infinity,
 		maxX: -Infinity,
 		maxY: -Infinity
 	};
 	for (let t of e) {
-		let e = i.node(t.id), n = e.x ?? 0, r = (e.y ?? 0) - 38 + 20;
-		o.set(t.id, [n, r]), _(c, n, r, n, r);
-	}
-	let l = [];
-	for (let e of i.nodes()) {
-		if (!e.startsWith(s)) continue;
-		let t = i.node(e), n = (t.x ?? 0) - t.width / 2 - 10, r = (t.y ?? 0) - t.height / 2 - 10 - 20, a = {
-			name: e.slice(7),
-			x: n,
-			y: r,
-			width: t.width + 20,
-			height: t.height + 20 + 20
-		};
-		l.push(a);
+		let e = a.node(t.id), n = e.x ?? 0, r = (e.y ?? 0) - 38 + 20;
+		s.set(t.id, [n, r]), v(c, n, r, n, r);
 	}
+	let l = g(a);
 	return e.length || Object.assign(c, {
 		minX: 0,
 		minY: 0,
 		maxX: 0,
 		maxY: 0
 	}), {
-		positions: o,
+		positions: s,
 		groups: l,
 		centers: c,
-		labelHalf: a
+		labelHalf: o
 	};
 }
-function g(e, t, n) {
+function g(e) {
+	let t = (t) => {
+		let n = 0;
+		for (let r = e.parent(t); r; r = e.parent(r)) n++;
+		return n;
+	}, n = e.nodes().filter((e) => e.startsWith(a)), r = /* @__PURE__ */ new Map();
+	for (let i of n.sort((e, n) => t(n) - t(e))) {
+		let n = e.node(i), a = {
+			minX: (n.x ?? 0) - n.width / 2,
+			minY: (n.y ?? 0) - n.height / 2,
+			maxX: (n.x ?? 0) + n.width / 2,
+			maxY: (n.y ?? 0) + n.height / 2
+		};
+		for (let t of e.children(i) ?? []) {
+			let e = r.get(t);
+			e && v(a, e.x, e.y, e.x + e.width, e.y + e.height);
+		}
+		let o = a.minX - 10, s = a.minY - 10 - 20;
+		r.set(i, {
+			name: i.slice(7),
+			depth: t(i),
+			x: o,
+			y: s,
+			width: a.maxX - a.minX + 20,
+			height: a.maxY - a.minY + 20 + 20
+		});
+	}
+	return [...r.values()].sort((e, t) => e.depth - t.depth);
+}
+function _(e, t, n) {
 	let { centers: r } = e, i = {
 		left: 0,
 		top: 0,
 		right: 0,
 		bottom: 0
-	}, a = u[n];
+	}, a = c[n];
 	for (let [o, [s, c]] of e.positions) {
 		let l = e.labelHalf.get(o)?.[n] ?? 0, u = Math.max(20 * t, l);
 		i.left = Math.max(i.left, u - (s - r.minX) * t), i.right = Math.max(i.right, u - (r.maxX - s) * t), i.top = Math.max(i.top, 20 * t - (c - r.minY) * t);
@@ -124,32 +152,8 @@ function g(e, t, n) {
 	for (let n of e.groups) i.left = Math.max(i.left, (r.minX - n.x) * t), i.right = Math.max(i.right, (n.x + n.width - r.maxX) * t), i.top = Math.max(i.top, (r.minY - n.y) * t), i.bottom = Math.max(i.bottom, (n.y + n.height - r.maxY) * t);
 	return i;
 }
-function _(e, t, n, r, i) {
+function v(e, t, n, r, i) {
 	e.minX = Math.min(e.minX, t), e.minY = Math.min(e.minY, n), e.maxX = Math.max(e.maxX, r), e.maxY = Math.max(e.maxY, i);
 }
-var v = /* @__PURE__ */ new WeakMap();
-function y(n) {
-	let i = v.get(n);
-	if (i !== void 0) return i;
-	if (i = "", typeof document < "u") {
-		let a = document.createElement("div");
-		t(e(n, {
-			size: r,
-			width: r,
-			height: r
-		}), a);
-		let o = a.querySelector("svg");
-		o && (o.removeAttribute("class"), o.setAttribute("x", "10"), o.setAttribute("y", "10"), o.setAttribute("width", String(r)), o.setAttribute("height", String(r)), i = new XMLSerializer().serializeToString(o)), t(null, a);
-	}
-	return v.set(n, i), i;
-}
-function b(e) {
-	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-var x = 160;
-function S(e) {
-	let t = e.ringWidth / 2, n = 40 - e.ringWidth, r = `<svg xmlns="http://www.w3.org/2000/svg" width="${x}" height="${x}" viewBox="0 0 40 40">${e.shape === "square" ? `<rect x="${t}" y="${t}" width="${n}" height="${n}" rx="10" fill="${e.fill}" stroke="${e.ring}" stroke-width="${e.ringWidth}"/>` : `<circle cx="20" cy="20" r="${n / 2}" fill="${e.fill}" stroke="${e.ring}" stroke-width="${e.ringWidth}"/>`}${typeof e.icon == "string" ? `<text x="20" y="20" text-anchor="middle" dominant-baseline="central" font-size="11" font-weight="600" font-family="${b(e.font)}" fill="${e.iconColor}">${b(e.icon.slice(0, 3))}</text>` : `<g color="${e.iconColor}">${y(e.icon)}</g>`}</svg>`;
-	return `image://data:image/svg+xml;charset=utf-8,${encodeURIComponent(r)}`;
-}
 //#endregion
-export { c as LABEL_DETAILS, l as labelDetail, h as layoutGraph, S as nodeImage, p as nodeKind, f as nodeName, g as overhang, d as truncate };
+export { o as LABEL_DETAILS, s as labelDetail, h as layoutGraph, e as nodeImage, d as nodeKind, u as nodeName, _ as overhang, l as truncate };

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

@@ -4,8 +4,10 @@ export { default as AcBarChart } from "../components/AcBarChart.vue";
 export { default as AcDonutChart } from "../components/AcDonutChart.vue";
 export { default as AcGraphChart } from "../components/AcGraphChart.vue";
 export { default as AcMapChart } from "../components/AcMapChart.vue";
+export { default as AcTreeChart } from "../components/AcTreeChart.vue";
 export type { ChartAccessor, ChartCategory, ChartColor, ChartCurve, ChartDatum, ChartLegendPosition, ChartTooltipItem, } from "./shared";
 export type { ChartTooltipSlotProps } from "./ChartFrame.vue";
 export type { XYChartProps } from "./xy";
-export type { MapChartTooltipSlotProps, MapGeoJson, MapPoint, MapPointStatus } from "../components/AcMapChart.vue";
-export type { GraphLink, GraphNode, GraphStatus, GraphTooltipSlotProps } from "../components/AcGraphChart.vue";
+export type { MapArea, MapChartAreaTooltipSlotProps, MapChartTooltipSlotProps, MapFocusTarget, MapGeoJson, MapPoint, MapPointStatus, } from "../components/AcMapChart.vue";
+export type { GraphGroup, GraphHighlight, GraphLink, GraphLinkStyle, GraphNode, GraphStatus, GraphTooltipSlotProps } from "../components/AcGraphChart.vue";
+export type { TreeChartNode, TreeChartStatus, TreeChartTooltipSlotProps } from "../components/AcTreeChart.vue";

package/dist/lib/charts/index.js

@@ -4,4 +4,5 @@ import n from "../components/AcBarChart.js";
 import r from "../components/AcDonutChart.js";
 import i from "../components/AcGraphChart.js";
 import a from "../components/AcMapChart.js";
-export { t as AcAreaChart, n as AcBarChart, r as AcDonutChart, i as AcGraphChart, e as AcLineChart, a as AcMapChart };
+import o from "../components/AcTreeChart.js";
+export { t as AcAreaChart, n as AcBarChart, r as AcDonutChart, i as AcGraphChart, e as AcLineChart, a as AcMapChart, o as AcTreeChart };

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

@@ -0,0 +1,15 @@
+import type { Component } from "vue";
+export interface NodeImageOptions {
+    icon: Component | string;
+    /** Resolved colours (ECharts and SVG images can't read CSS variables). */
+    iconColor: string;
+    fill: string;
+    ring: string;
+    ringWidth: number;
+    shape: "circle" | "square";
+    font: string;
+    /** Size of a text icon in view-box units. */
+    fontSize?: number;
+}
+/** One node as an `image://` symbol: fill, ring and icon in a 40×40 view box. */
+export declare function nodeImage(o: NodeImageOptions): string;

package/dist/lib/charts/nodeSymbol.js

@@ -0,0 +1,27 @@
+import { h as e, render as t } from "vue";
+//#region src/lib/charts/nodeSymbol.ts
+var n = 40, r = 20, i = 160, a = /* @__PURE__ */ new WeakMap();
+function o(n) {
+	let i = a.get(n);
+	if (i !== void 0) return i;
+	if (i = "", typeof document < "u") {
+		let a = document.createElement("div");
+		t(e(n, {
+			size: r,
+			width: r,
+			height: r
+		}), a);
+		let o = a.querySelector("svg");
+		o && (o.removeAttribute("class"), o.setAttribute("x", "10"), o.setAttribute("y", "10"), o.setAttribute("width", String(r)), o.setAttribute("height", String(r)), i = new XMLSerializer().serializeToString(o)), t(null, a);
+	}
+	return a.set(n, i), i;
+}
+function s(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function c(e) {
+	let t = e.ringWidth / 2, r = n - e.ringWidth, a = `<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}" viewBox="0 0 ${n} ${n}">${e.shape === "square" ? `<rect x="${t}" y="${t}" width="${r}" height="${r}" rx="10" fill="${e.fill}" stroke="${e.ring}" stroke-width="${e.ringWidth}"/>` : `<circle cx="${n / 2}" cy="${n / 2}" r="${r / 2}" fill="${e.fill}" stroke="${e.ring}" stroke-width="${e.ringWidth}"/>`}${typeof e.icon == "string" ? `<text x="${n / 2}" y="${n / 2}" text-anchor="middle" dominant-baseline="central" font-size="${e.fontSize ?? 11}" font-weight="600" font-family="${s(e.font)}" fill="${e.iconColor}">${s(e.icon.slice(0, 3))}</text>` : `<g color="${e.iconColor}">${o(e.icon)}</g>`}</svg>`;
+	return `image://data:image/svg+xml;charset=utf-8,${encodeURIComponent(a)}`;
+}
+//#endregion
+export { c as nodeImage };

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

@@ -0,0 +1,15 @@
+/** A node of the tree as the layout sees it: only its open children. */
+export interface BreadthNode {
+    children: BreadthNode[];
+}
+/**
+ * How many rows (LR) or columns (TB) ECharts' tree layout spreads the open nodes over: siblings sit one unit apart,
+ * cousins two. Mirrors ECharts' own Reingold–Tilford pass, so a box this many units tall gives every row the same pitch.
+ */
+export declare function treeBreadth(root: BreadthNode): number;
+/** Width of `text` in px, set in a CSS font such as `500 12px Roboto`. */
+export declare function textWidth(text: string, font: string): number;
+/** `text` cut with an ellipsis to fit `max` px; at least `minChars` characters stay. */
+export declare function fitText(text: string, max: number, font: string, minChars?: number): string;
+/** Symbol diameter of a node with an icon, in px. */
+export declare const ICON_NODE = 28;

package/dist/lib/charts/tree.js

@@ -0,0 +1,89 @@
+//#region src/lib/charts/tree.ts
+function e(e, t) {
+	return e.parent === t.parent ? 1 : 2;
+}
+function t(e) {
+	return e.children.length ? e.children[e.children.length - 1] : e.thread;
+}
+function n(e) {
+	return e.children.length ? e.children[0] : e.thread;
+}
+function r(e, t, n) {
+	let r = n / (t.i - e.i);
+	t.change -= r, t.shift += n, t.modifier += n, t.prelim += n, e.change += r;
+}
+function i(e) {
+	let t = 0, n = 0;
+	for (let r = e.children.length - 1; r >= 0; r--) {
+		let i = e.children[r];
+		i.prelim += t, i.modifier += t, n += i.change, t += i.shift + n;
+	}
+}
+function a(i, a, o) {
+	if (!a) return o;
+	let s = i, c = i, l = a, u = i.parent.children[0], d = s.modifier, f = c.modifier, p = l.modifier, m = u.modifier;
+	for (;;) {
+		let a = t(l), h = n(s);
+		if (l = a, s = h, !a || !h) break;
+		c = t(c), u = n(u), c.ancestor = i;
+		let g = a.prelim + p - h.prelim - d + e(a, h);
+		g > 0 && (r(a.ancestor.parent === i.parent ? a.ancestor : o, i, g), d += g, f += g), p += a.modifier, d += h.modifier, f += c.modifier, m += u.modifier;
+	}
+	return l && !t(c) && (c.thread = l, c.modifier += p - f), s && !n(u) && (u.thread = s, u.modifier += d - m, o = i), o;
+}
+function o(t) {
+	let n = (e, t, r) => {
+		let i = {
+			node: e,
+			parent: t,
+			children: [],
+			i: r,
+			prelim: 0,
+			modifier: 0,
+			change: 0,
+			shift: 0,
+			thread: null,
+			defaultAncestor: null,
+			x: 0
+		};
+		return i.ancestor = i, i.children = e.children.map((e, t) => n(e, i, t)), i;
+	}, r = n({ children: [t] }, null, 0), o = r.children[0], s = [], c = [o];
+	for (; c.length;) {
+		let e = c.pop();
+		s.push(e), c.push(...e.children);
+	}
+	for (let t = s.length - 1; t >= 0; t--) {
+		let n = s[t], r = n.parent.children, o = n.i ? r[n.i - 1] : null;
+		if (n.children.length) {
+			i(n);
+			let t = (n.children[0].prelim + n.children[n.children.length - 1].prelim) / 2;
+			o ? (n.prelim = o.prelim + e(n, o), n.modifier = n.prelim - t) : n.prelim = t;
+		} else o && (n.prelim = o.prelim + e(n, o));
+		n.parent.defaultAncestor = a(n, o, n.parent.defaultAncestor ?? r[0]);
+	}
+	r.modifier = -o.prelim;
+	let l = o, u = o, d = [o];
+	for (; d.length;) {
+		let e = d.pop();
+		e.x = e.prelim + e.parent.modifier, e.modifier += e.parent.modifier, e.x < l.x && (l = e), e.x > u.x && (u = e);
+		for (let t = e.children.length - 1; t >= 0; t--) d.push(e.children[t]);
+	}
+	let f = l === u ? 1 : e(l, u) / 2;
+	return u.x - l.x + 2 * f;
+}
+var s, c = /* @__PURE__ */ new Map();
+function l(e, t) {
+	let n = `${t}\u0000${e}`, r = c.get(n);
+	return r === void 0 ? (s === void 0 && (s = typeof document > "u" ? null : document.createElement("canvas").getContext("2d")), s ? (s.font = t, r = s.measureText(e).width) : r = e.length * 6.6, c.size > 5e3 && c.clear(), c.set(n, r), r) : r;
+}
+function u(e, t, n, r = 4) {
+	if (l(e, n) <= t) return e;
+	let i = Math.min(r, e.length), a = e.length;
+	for (; i < a;) {
+		let r = i + a + 1 >> 1;
+		l(`${e.slice(0, r)}…`, n) <= t ? i = r : a = r - 1;
+	}
+	return `${e.slice(0, i).trimEnd()}…`;
+}
+//#endregion
+export { u as fitText, l as textWidth, o as treeBreadth };