@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/charts/axis-ticks.js

@@ -0,0 +1,59 @@
+import { Scale } from "@unovis/ts";
+//#region src/charts/axis-ticks.ts
+/**
+* 双数值轴的刻度对齐（组合图）：主轴按数据取“好看”的刻度，第二数值轴取同样多的格、每格也是好看的步长，
+* 两边的刻度落在同一组网格线上（同 ECharts 的 alignTicks）。第二轴上的值换算到主轴的坐标里画。
+*
+*   const axes = alignedTicks([0, 1280, 960], [0.12, 0.35]);
+*   axes.primary.ticks      // [0, 200, 400, …, 1400]
+*   axes.secondary.ticks    // [0, 0.05, 0.1, …, 0.35]
+*   axes.toPrimary(0.2)     // 第二轴的 0.2 在主轴坐标里的位置
+*/
+/** 不小于 raw 的“好看”步长：1、2、2.5、5 乘 10 的整数次幂 */
+function niceStep(raw) {
+	if (!(raw > 0)) return 1;
+	const power = 10 ** Math.floor(Math.log10(raw));
+	const fraction = raw / power;
+	return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10) * power;
+}
+/** 浮点误差：0.1 + 0.2 这类算出来的刻度取到 12 位有效数字 */
+var tidy = (value) => Number(value.toPrecision(12));
+/**
+* 两组值的对齐刻度：primary、secondary 是两条轴要包含的值（含 0 时从 0 起）。
+* 主轴约 count 格（d3 的 nice），第二轴取同样多的格
+*/
+function alignedTicks(primary, secondary, count = 5) {
+	const finite = (values) => values.filter(Number.isFinite);
+	const p = finite(primary);
+	const scale = Scale.scaleLinear().domain([Math.min(...p, 0), Math.max(...p, 0) || 1]).nice(count);
+	const ticks = scale.ticks(count).map(tidy);
+	const [p0, p1] = scale.domain();
+	const intervals = Math.max(ticks.length - 1, 1);
+	const s = finite(secondary);
+	const low = Math.min(...s, 0);
+	const high = Math.max(...s, 0) || 1;
+	let step = niceStep((high - low) / intervals);
+	let start = Math.floor(low / step) * step;
+	for (let guard = 0; start + intervals * step < high && guard < 10; guard += 1) {
+		step = niceStep(step * 1.01);
+		start = Math.floor(low / step) * step;
+	}
+	const secondaryTicks = Array.from({ length: intervals + 1 }, (_, i) => tidy(start + i * step));
+	const s0 = secondaryTicks[0];
+	const s1 = secondaryTicks.at(-1);
+	return {
+		primary: {
+			domain: [p0, p1],
+			ticks
+		},
+		secondary: {
+			domain: [s0, s1],
+			ticks: secondaryTicks
+		},
+		toPrimary: (value) => p0 + (value - s0) / (s1 - s0) * (p1 - p0)
+	};
+}
+//#endregion
+export { alignedTicks, niceStep };
+
+//# sourceMappingURL=axis-ticks.js.map

package/dist/charts/axis-ticks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-ticks.js","names":[],"sources":["../../src/charts/axis-ticks.ts"],"sourcesContent":["/**\n * 双数值轴的刻度对齐（组合图）：主轴按数据取“好看”的刻度，第二数值轴取同样多的格、每格也是好看的步长，\n * 两边的刻度落在同一组网格线上（同 ECharts 的 alignTicks）。第二轴上的值换算到主轴的坐标里画。\n *\n *   const axes = alignedTicks([0, 1280, 960], [0.12, 0.35]);\n *   axes.primary.ticks      // [0, 200, 400, …, 1400]\n *   axes.secondary.ticks    // [0, 0.05, 0.1, …, 0.35]\n *   axes.toPrimary(0.2)     // 第二轴的 0.2 在主轴坐标里的位置\n */\nimport { Scale } from '@unovis/ts';\n\n/** 一条数值轴：范围与刻度 */\nexport interface AxisTicks {\n  /** 范围 [最小, 最大]，两端都是刻度 */\n  domain: [number, number];\n  /** 刻度，从小到大 */\n  ticks: number[];\n}\n\n/** 对齐的两条数值轴 */\nexport interface AlignedAxes {\n  /** 主轴（左侧） */\n  primary: AxisTicks;\n  /** 第二数值轴（右侧）：刻度数与主轴相同 */\n  secondary: AxisTicks;\n  /** 第二轴的值换算到主轴的坐标 */\n  toPrimary: (value: number) => number;\n}\n\n/** 不小于 raw 的“好看”步长：1、2、2.5、5 乘 10 的整数次幂 */\nexport function niceStep(raw: number): number {\n  if (!(raw > 0)) return 1;\n  const power = 10 ** Math.floor(Math.log10(raw));\n  const fraction = raw / power;\n  const nice =\n    fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;\n  return nice * power;\n}\n\n/** 浮点误差：0.1 + 0.2 这类算出来的刻度取到 12 位有效数字 */\nconst tidy = (value: number) => Number(value.toPrecision(12));\n\n/**\n * 两组值的对齐刻度：primary、secondary 是两条轴要包含的值（含 0 时从 0 起）。\n * 主轴约 count 格（d3 的 nice），第二轴取同样多的格\n */\nexport function alignedTicks(\n  primary: readonly number[],\n  secondary: readonly number[],\n  count = 5,\n): AlignedAxes {\n  const finite = (values: readonly number[]) => values.filter(Number.isFinite);\n  const p = finite(primary);\n  const scale = Scale.scaleLinear()\n    .domain([Math.min(...p, 0), Math.max(...p, 0) || 1])\n    .nice(count);\n  const ticks = scale.ticks(count).map(tidy);\n  const [p0, p1] = scale.domain() as [number, number];\n  const intervals = Math.max(ticks.length - 1, 1);\n\n  const s = finite(secondary);\n  const low = Math.min(...s, 0);\n  const high = Math.max(...s, 0) || 1;\n  let step = niceStep((high - low) / intervals);\n  let start = Math.floor(low / step) * step;\n  // 起点向下取整后可能盖不住最大值：换下一档步长\n  for (let guard = 0; start + intervals * step < high && guard < 10; guard += 1) {\n    step = niceStep(step * 1.01);\n    start = Math.floor(low / step) * step;\n  }\n  const secondaryTicks = Array.from({ length: intervals + 1 }, (_, i) => tidy(start + i * step));\n  const s0 = secondaryTicks[0]!;\n  const s1 = secondaryTicks.at(-1)!;\n  return {\n    primary: { domain: [p0, p1], ticks },\n    secondary: { domain: [s0, s1], ticks: secondaryTicks },\n    toPrimary: (value) => p0 + ((value - s0) / (s1 - s0)) * (p1 - p0),\n  };\n}\n"],"mappings":";;;;;;;;;;;;AA8BA,SAAgB,SAAS,KAAqB;CAC5C,IAAI,EAAE,MAAM,IAAI,OAAO;CACvB,MAAM,QAAQ,MAAM,KAAK,MAAM,KAAK,MAAM,GAAG,CAAC;CAC9C,MAAM,WAAW,MAAM;CAGvB,QADE,YAAY,IAAI,IAAI,YAAY,IAAI,IAAI,YAAY,MAAM,MAAM,YAAY,IAAI,IAAI,MACxE;AAChB;;AAGA,IAAM,QAAQ,UAAkB,OAAO,MAAM,YAAY,EAAE,CAAC;;;;;AAM5D,SAAgB,aACd,SACA,WACA,QAAQ,GACK;CACb,MAAM,UAAU,WAA8B,OAAO,OAAO,OAAO,QAAQ;CAC3E,MAAM,IAAI,OAAO,OAAO;CACxB,MAAM,QAAQ,MAAM,YAAY,CAAC,CAC9B,OAAO,CAAC,KAAK,IAAI,GAAG,GAAG,CAAC,GAAG,KAAK,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CACnD,KAAK,KAAK;CACb,MAAM,QAAQ,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,IAAI;CACzC,MAAM,CAAC,IAAI,MAAM,MAAM,OAAO;CAC9B,MAAM,YAAY,KAAK,IAAI,MAAM,SAAS,GAAG,CAAC;CAE9C,MAAM,IAAI,OAAO,SAAS;CAC1B,MAAM,MAAM,KAAK,IAAI,GAAG,GAAG,CAAC;CAC5B,MAAM,OAAO,KAAK,IAAI,GAAG,GAAG,CAAC,KAAK;CAClC,IAAI,OAAO,UAAU,OAAO,OAAO,SAAS;CAC5C,IAAI,QAAQ,KAAK,MAAM,MAAM,IAAI,IAAI;CAErC,KAAK,IAAI,QAAQ,GAAG,QAAQ,YAAY,OAAO,QAAQ,QAAQ,IAAI,SAAS,GAAG;EAC7E,OAAO,SAAS,OAAO,IAAI;EAC3B,QAAQ,KAAK,MAAM,MAAM,IAAI,IAAI;CACnC;CACA,MAAM,iBAAiB,MAAM,KAAK,EAAE,QAAQ,YAAY,EAAE,IAAI,GAAG,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC;CAC7F,MAAM,KAAK,eAAe;CAC1B,MAAM,KAAK,eAAe,GAAG,EAAE;CAC/B,OAAO;EACL,SAAS;GAAE,QAAQ,CAAC,IAAI,EAAE;GAAG;EAAM;EACnC,WAAW;GAAE,QAAQ,CAAC,IAAI,EAAE;GAAG,OAAO;EAAe;EACrD,YAAY,UAAU,MAAO,QAAQ,OAAO,KAAK,OAAQ,KAAK;CAChE;AACF"}

package/dist/charts/export.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 图表的导出：绘图区的 SVG 存成 PNG 图片，读屏的数据表存成 CSV。ChartFrame 的导出菜单用它，也可以自己调。
+ *
+ *   await exportChartImage(svg, '月度销售');          // 下载“月度销售.png”
+ *   exportChartData(table, format, '月度销售');       // 下载“月度销售.csv”
+ *
+ * 图片：复制一份 SVG，把每个元素算出来的样式（颜色、线宽、字体，主题的 CSS 变量已经解析）写到它自己身上，
+ * 画进两倍大小的 canvas，底色取图表外层的背景色。叠在 SVG 上面的 HTML（提示框）不在图里。
+ */
+import type { useFormat } from '../config/lang/format';
+import type { ChartTable } from './frame';
+/** SVG → 带内联样式的 SVG 文字（宽高写成像素） */
+export declare function serializeChartSvg(svg: SVGSVGElement): string;
+/** 绘图区的 SVG 存成 PNG（两倍分辨率）；background 是底色，默认取 SVG 外层元素的背景色 */
+export declare function exportChartImage(svg: SVGSVGElement, name: string, background?: string): Promise<void>;
+/** 图表的数据表存成 CSV（表头一行，每行第一格是类目），开头带 BOM */
+export declare function exportChartData(table: ChartTable, format: ReturnType<typeof useFormat>, name: string): void;

package/dist/charts/export.js

@@ -0,0 +1,65 @@
+import { tableToCsv } from "../table/csv.js";
+import { downloadFile } from "../utils/dom/download.js";
+import { backgroundOf, rasterizeSvg } from "../utils/dom/rasterize.js";
+//#region src/charts/export.ts
+/** 写回到复制品上的样式：画图要用到的这些 */
+var INLINED = [
+	"fill",
+	"fill-opacity",
+	"stroke",
+	"stroke-width",
+	"stroke-opacity",
+	"stroke-dasharray",
+	"stroke-linecap",
+	"stroke-linejoin",
+	"opacity",
+	"visibility",
+	"display",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"text-anchor",
+	"dominant-baseline",
+	"paint-order"
+];
+/** SVG → 带内联样式的 SVG 文字（宽高写成像素） */
+function serializeChartSvg(svg) {
+	const clone = svg.cloneNode(true);
+	const sources = [svg, ...svg.querySelectorAll("*")];
+	const targets = [clone, ...clone.querySelectorAll("*")];
+	sources.forEach((source, index) => {
+		const target = targets[index];
+		if (!target?.style) return;
+		const style = getComputedStyle(source);
+		for (const property of INLINED) target.style.setProperty(property, style.getPropertyValue(property));
+	});
+	const { width, height } = svg.getBoundingClientRect();
+	clone.setAttribute("width", String(width));
+	clone.setAttribute("height", String(height));
+	clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+	return new XMLSerializer().serializeToString(clone);
+}
+/** 绘图区的 SVG 存成 PNG（两倍分辨率）；background 是底色，默认取 SVG 外层元素的背景色 */
+async function exportChartImage(svg, name, background) {
+	const { width, height } = svg.getBoundingClientRect();
+	const blob = await rasterizeSvg(serializeChartSvg(svg), {
+		width,
+		height
+	}, { background: background ?? backgroundOf(svg) });
+	downloadFile(`${name}.png`, blob, "image/png");
+}
+/** 图表的数据表存成 CSV（表头一行，每行第一格是类目），开头带 BOM */
+function exportChartData(table, format, name) {
+	const rows = table.rows.map((row) => [row.header, ...row.cells]);
+	const columns = table.columns.map((header, index) => ({
+		key: String(index),
+		header,
+		type: "text",
+		value: (row) => row[index] ?? ""
+	}));
+	downloadFile(`${name}.csv`, tableToCsv(rows, columns, format), "text/csv;charset=utf-8");
+}
+//#endregion
+export { exportChartData, exportChartImage, serializeChartSvg };
+
+//# sourceMappingURL=export.js.map

package/dist/charts/export.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"export.js","names":[],"sources":["../../src/charts/export.ts"],"sourcesContent":["/**\n * 图表的导出：绘图区的 SVG 存成 PNG 图片，读屏的数据表存成 CSV。ChartFrame 的导出菜单用它，也可以自己调。\n *\n *   await exportChartImage(svg, '月度销售');          // 下载“月度销售.png”\n *   exportChartData(table, format, '月度销售');       // 下载“月度销售.csv”\n *\n * 图片：复制一份 SVG，把每个元素算出来的样式（颜色、线宽、字体，主题的 CSS 变量已经解析）写到它自己身上，\n * 画进两倍大小的 canvas，底色取图表外层的背景色。叠在 SVG 上面的 HTML（提示框）不在图里。\n */\nimport type { useFormat } from '../config/lang/format';\nimport { downloadFile } from '../utils/dom/download';\nimport { backgroundOf, rasterizeSvg } from '../utils/dom/rasterize';\nimport { tableToCsv } from '../table/csv';\nimport type { ChartTable } from './frame';\n\n/** 写回到复制品上的样式：画图要用到的这些 */\nconst INLINED = [\n  'fill',\n  'fill-opacity',\n  'stroke',\n  'stroke-width',\n  'stroke-opacity',\n  'stroke-dasharray',\n  'stroke-linecap',\n  'stroke-linejoin',\n  'opacity',\n  'visibility',\n  'display',\n  'font-family',\n  'font-size',\n  'font-weight',\n  'text-anchor',\n  'dominant-baseline',\n  'paint-order',\n] as const;\n\n/** SVG → 带内联样式的 SVG 文字（宽高写成像素） */\nexport function serializeChartSvg(svg: SVGSVGElement): string {\n  const clone = svg.cloneNode(true) as SVGSVGElement;\n  const sources = [svg, ...svg.querySelectorAll('*')];\n  const targets = [clone, ...clone.querySelectorAll('*')];\n  sources.forEach((source, index) => {\n    const target = targets[index] as SVGElement | undefined;\n    if (!target?.style) return;\n    const style = getComputedStyle(source);\n    for (const property of INLINED)\n      target.style.setProperty(property, style.getPropertyValue(property));\n  });\n  const { width, height } = svg.getBoundingClientRect();\n  clone.setAttribute('width', String(width));\n  clone.setAttribute('height', String(height));\n  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n  return new XMLSerializer().serializeToString(clone);\n}\n\n/** 绘图区的 SVG 存成 PNG（两倍分辨率）；background 是底色，默认取 SVG 外层元素的背景色 */\nexport async function exportChartImage(\n  svg: SVGSVGElement,\n  name: string,\n  background?: string,\n): Promise<void> {\n  const { width, height } = svg.getBoundingClientRect();\n  const blob = await rasterizeSvg(\n    serializeChartSvg(svg),\n    { width, height },\n    {\n      background: background ?? backgroundOf(svg),\n    },\n  );\n  downloadFile(`${name}.png`, blob, 'image/png');\n}\n\n/** 图表的数据表存成 CSV（表头一行，每行第一格是类目），开头带 BOM */\nexport function exportChartData(\n  table: ChartTable,\n  format: ReturnType<typeof useFormat>,\n  name: string,\n): void {\n  const rows = table.rows.map((row) => [row.header, ...row.cells]);\n  const columns = table.columns.map((header, index) => ({\n    key: String(index),\n    header,\n    type: 'text' as const,\n    value: (row: string[]) => row[index] ?? '',\n  }));\n  downloadFile(`${name}.csv`, tableToCsv(rows, columns, format), 'text/csv;charset=utf-8');\n}\n"],"mappings":";;;;;AAgBA,IAAM,UAAU;CACd;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAgB,kBAAkB,KAA4B;CAC5D,MAAM,QAAQ,IAAI,UAAU,IAAI;CAChC,MAAM,UAAU,CAAC,KAAK,GAAG,IAAI,iBAAiB,GAAG,CAAC;CAClD,MAAM,UAAU,CAAC,OAAO,GAAG,MAAM,iBAAiB,GAAG,CAAC;CACtD,QAAQ,SAAS,QAAQ,UAAU;EACjC,MAAM,SAAS,QAAQ;EACvB,IAAI,CAAC,QAAQ,OAAO;EACpB,MAAM,QAAQ,iBAAiB,MAAM;EACrC,KAAK,MAAM,YAAY,SACrB,OAAO,MAAM,YAAY,UAAU,MAAM,iBAAiB,QAAQ,CAAC;CACvE,CAAC;CACD,MAAM,EAAE,OAAO,WAAW,IAAI,sBAAsB;CACpD,MAAM,aAAa,SAAS,OAAO,KAAK,CAAC;CACzC,MAAM,aAAa,UAAU,OAAO,MAAM,CAAC;CAC3C,MAAM,aAAa,SAAS,4BAA4B;CACxD,OAAO,IAAI,cAAc,CAAC,CAAC,kBAAkB,KAAK;AACpD;;AAGA,eAAsB,iBACpB,KACA,MACA,YACe;CACf,MAAM,EAAE,OAAO,WAAW,IAAI,sBAAsB;CACpD,MAAM,OAAO,MAAM,aACjB,kBAAkB,GAAG,GACrB;EAAE;EAAO;CAAO,GAChB,EACE,YAAY,cAAc,aAAa,GAAG,EAC5C,CACF;CACA,aAAa,GAAG,KAAK,OAAO,MAAM,WAAW;AAC/C;;AAGA,SAAgB,gBACd,OACA,QACA,MACM;CACN,MAAM,OAAO,MAAM,KAAK,KAAK,QAAQ,CAAC,IAAI,QAAQ,GAAG,IAAI,KAAK,CAAC;CAC/D,MAAM,UAAU,MAAM,QAAQ,KAAK,QAAQ,WAAW;EACpD,KAAK,OAAO,KAAK;EACjB;EACA,MAAM;EACN,QAAQ,QAAkB,IAAI,UAAU;CAC1C,EAAE;CACF,aAAa,GAAG,KAAK,OAAO,WAAW,MAAM,SAAS,MAAM,GAAG,wBAAwB;AACzF"}

package/dist/charts/flow.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 流向图（桑基图、弦图）共用的数据：节点与节点之间的流向。节点的颜色按顺序取图表色板，
+ * 交给 Unovis 前复制一份（它会往节点上写布局用的字段），值不是正数的流向去掉（d3-sankey 要求为正）。
+ */
+import { type NumericValue } from '../utils/data/numeric';
+import { type ChartColor } from './series';
+/** 一个节点 */
+export interface FlowNode {
+    /** 节点的 id：流向里用它指节点 */
+    id: string;
+    /** 显示的名字；不写时用 id */
+    label?: string;
+    /** 颜色；不写时按顺序取图表色板 */
+    color?: ChartColor;
+}
+/** 一条流向：从 source 到 target 的量 */
+export interface FlowLink {
+    /** 起点节点的 id */
+    source: string;
+    /** 终点节点的 id */
+    target: string;
+    /** 流量：number、bigint 或 Decimal，要大于 0 */
+    value: NumericValue;
+}
+/** 节点加上实际的颜色与名字 */
+export interface ResolvedFlowNode extends FlowNode {
+    /** 显示的名字：没写 label 时是 id */
+    label: string;
+    /** 实际的颜色：没写 color 时按顺序取的图表色板 */
+    color: string;
+}
+/** 节点的颜色与名字定下来；按 id 查 */
+export declare function resolveFlowNodes(nodes: readonly FlowNode[]): Map<string, ResolvedFlowNode>;
+/** 交给 Unovis 的数据：节点与流向都复制一份；值不是正数、指向不存在的节点的流向去掉 */
+export declare function flowData(nodes: ReadonlyMap<string, ResolvedFlowNode>, links: readonly FlowLink[]): {
+    nodes: {
+        /** 节点的 id：流向里用它指节点 */
+        id: string;
+        /** 显示的名字：没写 label 时是 id */
+        label: string;
+        /** 实际的颜色：没写 color 时按顺序取的图表色板 */
+        color: string;
+    }[];
+    links: {
+        /** 起点节点的 id */
+        source: string;
+        /** 终点节点的 id */
+        target: string;
+        /** 流量：number、bigint 或 Decimal，要大于 0 */
+        value: NumericValue;
+        amount: number;
+    }[];
+};

package/dist/charts/flow.js

@@ -0,0 +1,29 @@
+import { toNumber } from "../utils/data/numeric.js";
+import { resolveColor } from "./series.js";
+//#region src/charts/flow.ts
+/**
+* 流向图（桑基图、弦图）共用的数据：节点与节点之间的流向。节点的颜色按顺序取图表色板，
+* 交给 Unovis 前复制一份（它会往节点上写布局用的字段），值不是正数的流向去掉（d3-sankey 要求为正）。
+*/
+/** 节点的颜色与名字定下来；按 id 查 */
+function resolveFlowNodes(nodes) {
+	return new Map(nodes.map((node, index) => [node.id, {
+		...node,
+		label: node.label ?? node.id,
+		color: resolveColor(node.color, index)
+	}]));
+}
+/** 交给 Unovis 的数据：节点与流向都复制一份；值不是正数、指向不存在的节点的流向去掉 */
+function flowData(nodes, links) {
+	return {
+		nodes: [...nodes.values()].map((node) => ({ ...node })),
+		links: links.filter((link) => nodes.has(link.source) && nodes.has(link.target) && toNumber(link.value) > 0).map((link) => ({
+			...link,
+			amount: toNumber(link.value)
+		}))
+	};
+}
+//#endregion
+export { flowData, resolveFlowNodes };
+
+//# sourceMappingURL=flow.js.map

package/dist/charts/flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow.js","names":[],"sources":["../../src/charts/flow.ts"],"sourcesContent":["/**\n * 流向图（桑基图、弦图）共用的数据：节点与节点之间的流向。节点的颜色按顺序取图表色板，\n * 交给 Unovis 前复制一份（它会往节点上写布局用的字段），值不是正数的流向去掉（d3-sankey 要求为正）。\n */\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport { resolveColor, type ChartColor } from './series';\n\n/** 一个节点 */\nexport interface FlowNode {\n  /** 节点的 id：流向里用它指节点 */\n  id: string;\n  /** 显示的名字；不写时用 id */\n  label?: string;\n  /** 颜色；不写时按顺序取图表色板 */\n  color?: ChartColor;\n}\n\n/** 一条流向：从 source 到 target 的量 */\nexport interface FlowLink {\n  /** 起点节点的 id */\n  source: string;\n  /** 终点节点的 id */\n  target: string;\n  /** 流量：number、bigint 或 Decimal，要大于 0 */\n  value: NumericValue;\n}\n\n/** 节点加上实际的颜色与名字 */\nexport interface ResolvedFlowNode extends FlowNode {\n  /** 显示的名字：没写 label 时是 id */\n  label: string;\n  /** 实际的颜色：没写 color 时按顺序取的图表色板 */\n  color: string;\n}\n\n/** 节点的颜色与名字定下来；按 id 查 */\nexport function resolveFlowNodes(nodes: readonly FlowNode[]): Map<string, ResolvedFlowNode> {\n  return new Map(\n    nodes.map((node, index) => [\n      node.id,\n      { ...node, label: node.label ?? node.id, color: resolveColor(node.color, index) },\n    ]),\n  );\n}\n\n/** 交给 Unovis 的数据：节点与流向都复制一份；值不是正数、指向不存在的节点的流向去掉 */\nexport function flowData(nodes: ReadonlyMap<string, ResolvedFlowNode>, links: readonly FlowLink[]) {\n  return {\n    nodes: [...nodes.values()].map((node) => ({ ...node })),\n    links: links\n      .filter(\n        (link) => nodes.has(link.source) && nodes.has(link.target) && toNumber(link.value) > 0,\n      )\n      .map((link) => ({ ...link, amount: toNumber(link.value) })),\n  };\n}\n"],"mappings":";;;;;;;;AAoCA,SAAgB,iBAAiB,OAA2D;CAC1F,OAAO,IAAI,IACT,MAAM,KAAK,MAAM,UAAU,CACzB,KAAK,IACL;EAAE,GAAG;EAAM,OAAO,KAAK,SAAS,KAAK;EAAI,OAAO,aAAa,KAAK,OAAO,KAAK;CAAE,CAClF,CAAC,CACH;AACF;;AAGA,SAAgB,SAAS,OAA8C,OAA4B;CACjG,OAAO;EACL,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,CAAC,CAAC,KAAK,UAAU,EAAE,GAAG,KAAK,EAAE;EACtD,OAAO,MACJ,QACE,SAAS,MAAM,IAAI,KAAK,MAAM,KAAK,MAAM,IAAI,KAAK,MAAM,KAAK,SAAS,KAAK,KAAK,IAAI,CACvF,CAAC,CACA,KAAK,UAAU;GAAE,GAAG;GAAM,QAAQ,SAAS,KAAK,KAAK;EAAE,EAAE;CAC9D;AACF"}

package/dist/charts/frame.d.ts

@@ -0,0 +1,147 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonBaseProps } from '../base/ButtonBase';
+import { type NumericFormat } from '../config/lang/format';
+import type { NumericValue } from '../utils/data/numeric';
+import { type PartProps } from '../utils/props';
+/** 图例里的一项 */
+export interface ChartLegendItem {
+    /** 系列（或扇区）的 key */
+    key: string;
+    /** 显示的名字 */
+    label: string;
+    /** CSS 颜色 */
+    color: string;
+}
+/** 给读屏的数据表：列名与每一行（行标题加各列的文字） */
+export interface ChartTable {
+    /** 列名：第一列是行标题的列 */
+    columns: readonly string[];
+    /** 每一行：行标题加其余各列的文字 */
+    rows: readonly {
+        header: string;
+        cells: readonly string[];
+    }[];
+}
+/** 各种图表共有的选项与部件属性 */
+export interface ChartFrameParts {
+    /** 右上角的导出菜单：绘图区存成 PNG 图片、数据表存成 CSV */
+    exportable?: boolean;
+    /** 导出的文件名（不含扩展名）；不写时用图表的名称（aria-label） */
+    exportName?: string;
+    /** 图表上方一行（单位与图例）的部件属性 */
+    propsHeader?: PartProps<'div'>;
+    /** 单位的部件属性 */
+    propsUnit?: PartProps<'span'>;
+    /** 图例的部件属性 */
+    propsLegend?: PartProps<'div', 'role'>;
+    /** 图例每一项（按钮）的部件属性 */
+    propsLegendItem?: Omit<Partial<ButtonBaseProps>, 'aria-pressed' | 'onClick'>;
+    /** 绘图区（Unovis 画在这里）的部件属性 */
+    propsPlot?: PartProps<'div', 'aria-hidden'>;
+    /** 给读屏的数据表的部件属性 */
+    propsTable?: PartProps<'table'>;
+}
+/** 图表共用的样式：root（--vis-* 主题变量）、header、unit、legend、swatch、plot、tooltip… */
+export declare const chartStyles: Readonly<{
+    readonly root: css.CompiledStyles;
+    readonly header: css.CompiledStyles;
+    readonly unit: css.CompiledStyles;
+    readonly legend: css.CompiledStyles;
+    readonly legendItem: css.CompiledStyles;
+    readonly legendItemHidden: css.CompiledStyles;
+    readonly swatch: css.CompiledStyles;
+    readonly swatchColor: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly swatchHidden: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly plot: css.CompiledStyles;
+    readonly plotClickable: css.CompiledStyles;
+    readonly plotHeight: (height: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly center: css.CompiledStyles;
+    readonly tooltip: css.CompiledStyles;
+    readonly tooltipTitle: css.CompiledStyles;
+    readonly tooltipRow: css.CompiledStyles;
+    readonly tooltipLabel: css.CompiledStyles;
+    readonly tooltipValue: css.CompiledStyles;
+}>;
+/** 提示框的一行 */
+export interface ChartTooltipItem {
+    /** 系列或数值的名字 */
+    label: string;
+    /** 色块的 CSS 颜色；transparent 时不画色块 */
+    color: string;
+    /** 格式化好的数值 */
+    value: string;
+}
+/** 提示框的内容：标题（类目、扇区名）+ 每个系列一行；Unovis 定位，Vue 渲染 */
+export declare function chartTooltip(title: string, items: readonly ChartTooltipItem[]): import("@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime").JSX.Element;
+/**
+ * 图表里数值的文字（提示框、读屏数据表、扇区标签）：按 valueFormat 格式化、带上单位；
+ * 没有值时是语言包的 emptyValue。setup 里调用，返回的函数在渲染里用
+ */
+export declare function useChartValueText(read: () => {
+    valueFormat?: NumericFormat;
+    unit?: string;
+}): (value: NumericValue | undefined) => string;
+/**
+ * 绘图区进入过视口：之前不画，进来之后一直算看见（滚出去不拆掉）。一页很多图表时先画看得见的，
+ * 其余的滚到附近再画（地图、网络图绘制很重）。在 setup 里调用，绘制的 effect 里读返回的函数。
+ * 挂上时就在视口附近的立即算看见（不等观察器的第一次回调；没有布局的测试环境里框都在原点，也算看见）；
+ * 打印前全部画上；没有 IntersectionObserver 的环境当作看见了。
+ */
+export declare function usePlotSeen(plot: () => HTMLElement | null | undefined): () => boolean;
+/** 主题的 lg 时长（毫秒），减少动态效果时为 0；读不到（元素不在主题范围内）时不要动画 */
+export declare function chartDuration(element: Element): number;
+/**
+ * Unovis 每个容器都插一个 id 固定为 saturate 的滤镜（悬停高亮用），一页多张图时 id 重复；
+ * 改成每张图自己的 id，并让引用它的 CSS 变量指过去
+ */
+export declare function uniqueHighlightFilter(element: HTMLElement, id: string): void;
+/**
+ * Unovis 实例表：组件、坐标轴、十字线只建一次，之后 setConfig + update（保留实例才有过渡动画）。
+ * 容器 destroy 时会连带销毁这些实例：重建容器前 reset，下次取用时重新创建
+ */
+export declare function createChartInstances(): {
+    /** 取一个实例：第一次调用时创建 */
+    get: <C>(key: string, create: () => C) => C;
+    /** 容器销毁了：清空，之后重新创建 */
+    reset(): void;
+};
+/** ChartFrame 的属性：未声明的属性落到外层 div（role="figure"）上 */
+export interface ChartFrameProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
+    /** 单位：显示在左上方 */
+    unit?: string;
+    /** 第二数值轴的单位：显示在右上方（组合图） */
+    unitEnd?: string;
+    /** 绘图区的高度 */
+    height: number | string;
+    /** 图例的各项；空数组时不显示图例 */
+    legend: readonly ChartLegendItem[];
+    /** 图例里隐藏着的项 */
+    hiddenKeys: readonly string[];
+    /** 点了图例的一项 */
+    onLegendToggle: (key: string) => void;
+    /** 加载中：绘图区显示 skeleton，外层带 aria-busy */
+    loading: boolean;
+    /** 加载中显示的骨架 */
+    skeleton: VNodeChild;
+    /** 没有数据：绘图区显示空状态，没有数据表 */
+    isEmpty: boolean;
+    /** 空状态的内容，默认是“暂无数据” */
+    empty?: VNodeChild;
+    /** 给读屏的数据表 */
+    table: ChartTable;
+    /** 取得绘图区元素（Unovis 画在这里）；加载、空状态之后重新出现时是新的元素 */
+    plotRef?: (element: HTMLElement | null) => void;
+    /** 绘图区里直接渲染的内容（不用 Unovis 的图，如漏斗图）；同样对读屏隐藏 */
+    plot?: VNodeChild;
+    /** 绘图区下面的内容（缩放的滑块、地图的色带） */
+    footer?: VNodeChild;
+    /** 上方一行右端的操作（地图的缩放按钮），在导出菜单前面 */
+    actions?: VNodeChild;
+    /** 点了绘图区（下钻）：写了它时指针是手形 */
+    onPlotClick?: () => void;
+    /** 图里的项能点（手形指针），点击由图自己处理（环形图的扇区、网络图的节点） */
+    clickable?: boolean;
+}
+/** 图表的外层结构 */
+export declare const ChartFrame: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ChartFrameProps>;