@zerodep-dev/vue-tsx-pro-ui 0.3.2 → 0.4.0

package/dist/charts/layout/treemap.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 矩形树图的布局：扁平的明细按几个字段逐级分组成树，再按“squarified”算法切块，块的面积与数值成比例、尽量接近正方形
+ * （Bruls、Huizing、van Wijk 的 squarify，写法同 d3-hierarchy 的 treemapSquarify，ISC）。
+ *
+ *   const root = groupTree(rows, [(row) => row.region, (row) => row.supplier], (row) => row.amount);
+ *   treemapLayout(root, { width: 600, height: 300, padding: 3 });
+ *   root.children[0].x0、y0、x1、y1；叶子的 data 是那一行明细
+ */
+/** 树上的一个节点：分组或一条明细（叶子）；布局后带上矩形 */
+export interface TreemapNode<D> {
+    /** 分组的值（区域名），叶子是最内层分组的值 */
+    key: string;
+    /** 数值：叶子是明细的值，分组是子节点之和 */
+    value: number;
+    /** 层级：根是 0 */
+    depth: number;
+    /** 叶子对应的明细 */
+    data?: D;
+    /** 父节点（根没有） */
+    parent?: TreemapNode<D>;
+    /** 子节点，按数值从大到小（叶子没有） */
+    children?: TreemapNode<D>[];
+    /** 左 */
+    x0: number;
+    /** 上 */
+    y0: number;
+    /** 右 */
+    x1: number;
+    /** 下 */
+    y1: number;
+}
+/** treemapLayout 的选项 */
+export interface TreemapLayoutOptions {
+    /** 宽 */
+    width: number;
+    /** 高 */
+    height: number;
+    /** 块与块之间、分组四周留的空，默认 0 */
+    padding?: number;
+    /** 分组顶边多留的空（写分组名），默认同 padding */
+    paddingTop?: number;
+}
+/** 明细按 keys 逐级分组成树：同一组的明细挂在同一个分组下，数值不是正数的明细不要 */
+export declare function groupTree<D>(rows: readonly D[], keys: readonly ((row: D) => string)[], value: (row: D) => number): TreemapNode<D>;
+/** 给树上每个节点算出矩形（就地写入）：分组四周与块之间留 padding，分组顶边留 paddingTop */
+export declare function treemapLayout<D>(root: TreemapNode<D>, { width, height, padding, paddingTop }: TreemapLayoutOptions): void;

package/dist/charts/layout/treemap.js

@@ -0,0 +1,152 @@
+//#region src/charts/layout/treemap.ts
+var blank = {
+	x0: 0,
+	y0: 0,
+	x1: 0,
+	y1: 0
+};
+/** 明细按 keys 逐级分组成树：同一组的明细挂在同一个分组下，数值不是正数的明细不要 */
+function groupTree(rows, keys, value) {
+	const root = {
+		key: "",
+		value: 0,
+		depth: 0,
+		children: [],
+		...blank
+	};
+	for (const row of rows) {
+		const amount = value(row);
+		if (!(amount > 0)) continue;
+		let node = root;
+		keys.forEach((key, level) => {
+			const name = key(row);
+			const leaf = level === keys.length - 1;
+			let child = leaf ? void 0 : node.children.find((item) => item.key === name);
+			if (!child) {
+				child = {
+					key: name,
+					value: 0,
+					depth: level + 1,
+					parent: node,
+					...blank
+				};
+				if (leaf) child.data = row;
+				else child.children = [];
+				node.children.push(child);
+			}
+			child.value += leaf ? amount : 0;
+			node = child;
+		});
+	}
+	const sum = (node) => {
+		if (!node.children) return node.value;
+		node.value = node.children.reduce((total, child) => total + sum(child), 0);
+		node.children.sort((a, b) => b.value - a.value);
+		return node.value;
+	};
+	sum(root);
+	return root;
+}
+/** 黄金比：squarify 追求的长宽比 */
+var PHI = (1 + Math.sqrt(5)) / 2;
+/** 一行（或一列）子节点沿横向依次排开 */
+function dice(nodes, total, x0, y0, x1, y1) {
+	const k = total ? (x1 - x0) / total : 0;
+	let x = x0;
+	for (const node of nodes) Object.assign(node, {
+		x0: x,
+		y0,
+		x1: x += node.value * k,
+		y1
+	});
+}
+/** 沿纵向依次排开 */
+function slice(nodes, total, x0, y0, x1, y1) {
+	const k = total ? (y1 - y0) / total : 0;
+	let y = y0;
+	for (const node of nodes) Object.assign(node, {
+		x0,
+		y0: y,
+		x1,
+		y1: y += node.value * k
+	});
+}
+/** squarify：一行行地放，一行里不断加节点，直到再加会让最长的长宽比变差 */
+function squarify(parent, x0, y0, x1, y1) {
+	const nodes = parent.children ?? [];
+	let value = parent.value;
+	let i0 = 0;
+	while (i0 < nodes.length) {
+		const dx = x1 - x0;
+		const dy = y1 - y0;
+		let i1 = i0;
+		let sumValue = 0;
+		do
+			sumValue = nodes[i1++].value;
+		while (!sumValue && i1 < nodes.length);
+		let minValue = sumValue;
+		let maxValue = sumValue;
+		const alpha = Math.max(dy / dx, dx / dy) / (value * PHI);
+		let beta = sumValue * sumValue * alpha;
+		let minRatio = Math.max(maxValue / beta, beta / minValue);
+		for (; i1 < nodes.length; i1 += 1) {
+			const nodeValue = nodes[i1].value;
+			sumValue += nodeValue;
+			minValue = Math.min(minValue, nodeValue);
+			maxValue = Math.max(maxValue, nodeValue);
+			beta = sumValue * sumValue * alpha;
+			const ratio = Math.max(maxValue / beta, beta / minValue);
+			if (ratio > minRatio) {
+				sumValue -= nodeValue;
+				break;
+			}
+			minRatio = ratio;
+		}
+		const row = nodes.slice(i0, i1);
+		if (dx < dy) {
+			const y = dy && value ? y0 + dy * sumValue / value : y1;
+			dice(row, sumValue, x0, y0, x1, y);
+			y0 = y;
+		} else {
+			const x = dx && value ? x0 + dx * sumValue / value : x1;
+			slice(row, sumValue, x0, y0, x, y1);
+			x0 = x;
+		}
+		value -= sumValue;
+		i0 = i1;
+	}
+}
+/** 给树上每个节点算出矩形（就地写入）：分组四周与块之间留 padding，分组顶边留 paddingTop */
+function treemapLayout(root, { width, height, padding = 0, paddingTop = padding }) {
+	Object.assign(root, {
+		x0: 0,
+		y0: 0,
+		x1: width,
+		y1: height
+	});
+	const half = padding / 2;
+	const position = (node) => {
+		if (!node.children?.length) return;
+		const top = node === root ? 0 : paddingTop;
+		const inset = node === root ? 0 : padding;
+		let x0 = node.x0 + inset - half;
+		let y0 = node.y0 + top - half;
+		let x1 = node.x1 - inset + half;
+		let y1 = node.y1 - inset + half;
+		if (x1 < x0) x0 = x1 = (x0 + x1) / 2;
+		if (y1 < y0) y0 = y1 = (y0 + y1) / 2;
+		squarify(node, x0, y0, x1, y1);
+		for (const child of node.children) {
+			child.x0 += half;
+			child.y0 += half;
+			child.x1 = Math.max(child.x0, child.x1 - half);
+			child.y1 = Math.max(child.y0, child.y1 - half);
+			position(child);
+		}
+	};
+	position(root);
+}
+//#endregion
+export { groupTree, treemapLayout };
+
+//# sourceMappingURL=treemap.js.map

package/dist/charts/layout/treemap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treemap.js","names":[],"sources":["../../../src/charts/layout/treemap.ts"],"sourcesContent":["/**\n * 矩形树图的布局：扁平的明细按几个字段逐级分组成树，再按“squarified”算法切块，块的面积与数值成比例、尽量接近正方形\n * （Bruls、Huizing、van Wijk 的 squarify，写法同 d3-hierarchy 的 treemapSquarify，ISC）。\n *\n *   const root = groupTree(rows, [(row) => row.region, (row) => row.supplier], (row) => row.amount);\n *   treemapLayout(root, { width: 600, height: 300, padding: 3 });\n *   root.children[0].x0、y0、x1、y1；叶子的 data 是那一行明细\n */\n\n/** 树上的一个节点：分组或一条明细（叶子）；布局后带上矩形 */\nexport interface TreemapNode<D> {\n  /** 分组的值（区域名），叶子是最内层分组的值 */\n  key: string;\n  /** 数值：叶子是明细的值，分组是子节点之和 */\n  value: number;\n  /** 层级：根是 0 */\n  depth: number;\n  /** 叶子对应的明细 */\n  data?: D;\n  /** 父节点（根没有） */\n  parent?: TreemapNode<D>;\n  /** 子节点，按数值从大到小（叶子没有） */\n  children?: TreemapNode<D>[];\n  /** 左 */\n  x0: number;\n  /** 上 */\n  y0: number;\n  /** 右 */\n  x1: number;\n  /** 下 */\n  y1: number;\n}\n\n/** treemapLayout 的选项 */\nexport interface TreemapLayoutOptions {\n  /** 宽 */\n  width: number;\n  /** 高 */\n  height: number;\n  /** 块与块之间、分组四周留的空，默认 0 */\n  padding?: number;\n  /** 分组顶边多留的空（写分组名），默认同 padding */\n  paddingTop?: number;\n}\n\nconst blank = { x0: 0, y0: 0, x1: 0, y1: 0 };\n\n/** 明细按 keys 逐级分组成树：同一组的明细挂在同一个分组下，数值不是正数的明细不要 */\nexport function groupTree<D>(\n  rows: readonly D[],\n  keys: readonly ((row: D) => string)[],\n  value: (row: D) => number,\n): TreemapNode<D> {\n  const root: TreemapNode<D> = { key: '', value: 0, depth: 0, children: [], ...blank };\n  for (const row of rows) {\n    const amount = value(row);\n    if (!(amount > 0)) continue;\n    let node = root;\n    keys.forEach((key, level) => {\n      const name = key(row);\n      const leaf = level === keys.length - 1;\n      let child = leaf ? undefined : node.children!.find((item) => item.key === name);\n      if (!child) {\n        child = { key: name, value: 0, depth: level + 1, parent: node, ...blank };\n        if (leaf) child.data = row;\n        else child.children = [];\n        node.children!.push(child);\n      }\n      child.value += leaf ? amount : 0;\n      node = child;\n    });\n  }\n  const sum = (node: TreemapNode<D>): number => {\n    if (!node.children) return node.value;\n    node.value = node.children.reduce((total, child) => total + sum(child), 0);\n    node.children.sort((a, b) => b.value - a.value);\n    return node.value;\n  };\n  sum(root);\n  return root;\n}\n\n/** 黄金比：squarify 追求的长宽比 */\nconst PHI = (1 + Math.sqrt(5)) / 2;\n\n/** 一行（或一列）子节点沿横向依次排开 */\nfunction dice<D>(\n  nodes: readonly TreemapNode<D>[],\n  total: number,\n  x0: number,\n  y0: number,\n  x1: number,\n  y1: number,\n) {\n  const k = total ? (x1 - x0) / total : 0;\n  let x = x0;\n  for (const node of nodes) Object.assign(node, { x0: x, y0, x1: (x += node.value * k), y1 });\n}\n\n/** 沿纵向依次排开 */\nfunction slice<D>(\n  nodes: readonly TreemapNode<D>[],\n  total: number,\n  x0: number,\n  y0: number,\n  x1: number,\n  y1: number,\n) {\n  const k = total ? (y1 - y0) / total : 0;\n  let y = y0;\n  for (const node of nodes) Object.assign(node, { x0, y0: y, x1, y1: (y += node.value * k) });\n}\n\n/** squarify：一行行地放，一行里不断加节点，直到再加会让最长的长宽比变差 */\nfunction squarify<D>(parent: TreemapNode<D>, x0: number, y0: number, x1: number, y1: number) {\n  const nodes = parent.children ?? [];\n  let value = parent.value;\n  let i0 = 0;\n  while (i0 < nodes.length) {\n    const dx = x1 - x0;\n    const dy = y1 - y0;\n    let i1 = i0;\n    let sumValue = 0;\n    // 跳过数值为 0 的节点\n    do sumValue = nodes[i1++]!.value;\n    while (!sumValue && i1 < nodes.length);\n    let minValue = sumValue;\n    let maxValue = sumValue;\n    const alpha = Math.max(dy / dx, dx / dy) / (value * PHI);\n    let beta = sumValue * sumValue * alpha;\n    let minRatio = Math.max(maxValue / beta, beta / minValue);\n    for (; i1 < nodes.length; i1 += 1) {\n      const nodeValue = nodes[i1]!.value;\n      sumValue += nodeValue;\n      minValue = Math.min(minValue, nodeValue);\n      maxValue = Math.max(maxValue, nodeValue);\n      beta = sumValue * sumValue * alpha;\n      const ratio = Math.max(maxValue / beta, beta / minValue);\n      if (ratio > minRatio) {\n        sumValue -= nodeValue;\n        break;\n      }\n      minRatio = ratio;\n    }\n    const row = nodes.slice(i0, i1);\n    // 宽比高小：这一行横着排在顶上；否则竖着排在左边\n    if (dx < dy) {\n      const y = dy && value ? y0 + (dy * sumValue) / value : y1;\n      dice(row, sumValue, x0, y0, x1, y);\n      y0 = y;\n    } else {\n      const x = dx && value ? x0 + (dx * sumValue) / value : x1;\n      slice(row, sumValue, x0, y0, x, y1);\n      x0 = x;\n    }\n    value -= sumValue;\n    i0 = i1;\n  }\n}\n\n/** 给树上每个节点算出矩形（就地写入）：分组四周与块之间留 padding，分组顶边留 paddingTop */\nexport function treemapLayout<D>(\n  root: TreemapNode<D>,\n  { width, height, padding = 0, paddingTop = padding }: TreemapLayoutOptions,\n): void {\n  Object.assign(root, { x0: 0, y0: 0, x1: width, y1: height });\n  const half = padding / 2;\n  const position = (node: TreemapNode<D>) => {\n    if (!node.children?.length) return;\n    // 子节点先在外扩半个间距的区域里切块，各自再缩回半个间距：相邻两块之间正好一个 padding（同 d3 的 paddingInner）\n    const top = node === root ? 0 : paddingTop;\n    const inset = node === root ? 0 : padding;\n    let x0 = node.x0 + inset - half;\n    let y0 = node.y0 + top - half;\n    let x1 = node.x1 - inset + half;\n    let y1 = node.y1 - inset + half;\n    if (x1 < x0) x0 = x1 = (x0 + x1) / 2;\n    if (y1 < y0) y0 = y1 = (y0 + y1) / 2;\n    squarify(node, x0, y0, x1, y1);\n    for (const child of node.children) {\n      child.x0 += half;\n      child.y0 += half;\n      child.x1 = Math.max(child.x0, child.x1 - half);\n      child.y1 = Math.max(child.y0, child.y1 - half);\n      position(child);\n    }\n  };\n  position(root);\n}\n"],"mappings":"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"}

package/dist/charts/marks.d.ts

@@ -0,0 +1,79 @@
+/**
+ * 直角坐标图表的图形：柱（分组、堆叠）、线、面积、数据点。柱状图、折线图、面积图、组合图、瀑布图按需组合，
+ * 坐标都从 XYChartContext 换算（横向时类目在纵轴）。
+ *
+ *   render: (context) => [chartAreas(context, series, { curve: 'monotone' }), chartDots(context, series, 'hollow')]
+ *
+ * 进场：柱从基线长出来、线从左往右描出、面积与点淡入，时长取主题的 lg（“减少动态效果”时为 0）；
+ * 用 @starting-style，只在图形第一次出现时播放，数据更新时原地变。
+ */
+import { css, type SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import type { ResolvedSeries } from './series';
+import { type LineCurves } from './shape';
+import type { XYChartContext } from './XYChart';
+/** 图形的样式 */
+export declare const chartMarkStyles: Readonly<{
+    readonly bar: css.CompiledStyles;
+    readonly growUp: css.CompiledStyles;
+    readonly growDown: css.CompiledStyles;
+    readonly growRight: css.CompiledStyles;
+    readonly growLeft: css.CompiledStyles;
+    readonly line: css.CompiledStyles;
+    readonly area: css.CompiledStyles;
+    readonly dot: css.CompiledStyles;
+    readonly hollowDot: css.CompiledStyles;
+    readonly filledDot: css.CompiledStyles;
+    readonly lineWidth: (width: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly fillOpacity: (opacity: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 柱的选项 */
+export interface ChartBarOptions {
+    /** 堆叠 */
+    stacked?: boolean;
+    /** 柱末端的圆角（px） */
+    radius: number;
+    /** 一组柱占一格的比例，默认分组 0.7、堆叠 0.6 */
+    fill?: number;
+    /** 一组柱最宽多少（px），默认分组 96、堆叠 48 */
+    maxWidth?: number;
+}
+/** 一根柱：类目方向上从 start 起宽 width，数值方向上从 low 到 high */
+export declare function chartBar<T extends object>(context: XYChartContext<T>, { start, width, low, high, radius, round, down, }: {
+    start: number;
+    width: number;
+    low: number;
+    high: number;
+    radius: number;
+    /** 末端是圆角 */
+    round: boolean;
+    /** 朝下（横向时朝左）长：末端在 low 那一头；不写时按正负（负值朝下） */
+    down?: boolean;
+}): {
+    d: string;
+    grow: SxStyles;
+};
+/** 分组（并排）或堆叠的柱：每根柱带 data-index（第几行），点击下钻按它找行 */
+export declare function chartBars<T extends object>(context: XYChartContext<T>, series: readonly ResolvedSeries<T>[], { stacked, radius, fill, maxWidth }: ChartBarOptions): VNodeChild;
+/** 线的选项 */
+export interface ChartLineOptions {
+    /** 曲线 */
+    curve: keyof LineCurves;
+    /** 线宽（px） */
+    width: number;
+}
+/** 每个系列一条线（空值处断开） */
+export declare function chartLines<T extends object>(context: XYChartContext<T>, series: readonly ResolvedSeries<T>[], { curve, width }: ChartLineOptions): VNodeChild;
+/** 面积的选项 */
+export interface ChartAreaOptions {
+    /** 曲线 */
+    curve: keyof LineCurves;
+    /** 堆叠：用 context.stacks 里的上下沿 */
+    stacked: boolean;
+    /** 面积的不透明度 */
+    opacity: number;
+}
+/** 每个系列一片面积，上沿描一条线；重叠时下沿是 0（或数值轴的下端），堆叠时是下面那一层 */
+export declare function chartAreas<T extends object>(context: XYChartContext<T>, series: readonly ResolvedSeries<T>[], { curve, stacked, opacity }: ChartAreaOptions): VNodeChild;
+/** 数据点：filled 实心（描一圈表面色），hollow 空心（表面色填充、系列色描边）；空值不画 */
+export declare function chartDots<T extends object>(context: XYChartContext<T>, series: readonly ResolvedSeries<T>[], variant: 'filled' | 'hollow'): VNodeChild;

package/dist/charts/marks.js

@@ -0,0 +1,231 @@
+import { t } from "../config/theme/tokens.js";
+import { chartSvgStyles } from "./plot.js";
+import { areaPath, barPath, linePath } from "./shape.js";
+import { stackValues } from "./stack.js";
+import { createVNode } from "vue";
+import { mergeJsxProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/charts/marks.tsx
+/**
+* 直角坐标图表的图形：柱（分组、堆叠）、线、面积、数据点。柱状图、折线图、面积图、组合图、瀑布图按需组合，
+* 坐标都从 XYChartContext 换算（横向时类目在纵轴）。
+*
+*   render: (context) => [chartAreas(context, series, { curve: 'monotone' }), chartDots(context, series, 'hollow')]
+*
+* 进场：柱从基线长出来、线从左往右描出、面积与点淡入，时长取主题的 lg（“减少动态效果”时为 0）；
+* 用 @starting-style，只在图形第一次出现时播放，数据更新时原地变。
+*/
+var enter = `${t.durations.lg} ${t.easings.standard}`;
+/** 图形的样式 */
+var chartMarkStyles = css.create({
+	bar: {
+		transformBox: "fill-box",
+		transition: `scale ${enter}, opacity ${t.durations.sm} ${t.easings.standard}`
+	},
+	growUp: {
+		transformOrigin: "bottom",
+		scale: {
+			default: "1",
+			"@starting-style": "1 0"
+		}
+	},
+	growDown: {
+		transformOrigin: "top",
+		scale: {
+			default: "1",
+			"@starting-style": "1 0"
+		}
+	},
+	growRight: {
+		transformOrigin: "left",
+		scale: {
+			default: "1",
+			"@starting-style": "0 1"
+		}
+	},
+	growLeft: {
+		transformOrigin: "right",
+		scale: {
+			default: "1",
+			"@starting-style": "0 1"
+		}
+	},
+	line: {
+		fill: "none",
+		strokeLinejoin: "round",
+		strokeLinecap: "round",
+		strokeDasharray: "1",
+		strokeDashoffset: {
+			default: 0,
+			"@starting-style": 1
+		},
+		transition: `stroke-dashoffset ${t.durations.xl} ${t.easings.standard}`,
+		pointerEvents: "none"
+	},
+	area: {
+		stroke: "none",
+		pointerEvents: "none",
+		opacity: {
+			default: 1,
+			"@starting-style": 0
+		},
+		transition: `opacity ${enter}`
+	},
+	dot: {
+		transformBox: "fill-box",
+		transformOrigin: "center",
+		scale: {
+			default: "1",
+			"@starting-style": "0"
+		},
+		transition: `scale ${enter}`,
+		pointerEvents: "none"
+	},
+	hollowDot: {
+		fill: "_surface",
+		strokeWidth: 2
+	},
+	filledDot: {
+		stroke: "_surface",
+		strokeWidth: 1.5
+	},
+	lineWidth: (width) => ({ strokeWidth: width }),
+	fillOpacity: (opacity) => ({ fillOpacity: opacity })
+});
+/** 一行上一个系列的点：[类目坐标, 数值坐标]；空值处断开成几段 */
+function segments(context, value) {
+	const result = [];
+	let current = [];
+	context.rows.forEach((row, index) => {
+		const v = value(row, index);
+		if (v === void 0) {
+			if (current.length) result.push(current);
+			current = [];
+			return;
+		}
+		current.push([
+			context.category(row, index),
+			context.value(v),
+			index
+		]);
+	});
+	if (current.length) result.push(current);
+	return result;
+}
+/** 柱的选项 */
+/** 柱末端朝哪边：正值朝上（横向朝右），负值反过来 */
+function endOf(horizontal, negative) {
+	if (horizontal) return negative ? "left" : "right";
+	return negative ? "bottom" : "top";
+}
+/** 一根柱：类目方向上从 start 起宽 width，数值方向上从 low 到 high */
+function chartBar(context, { start, width, low, high, radius, round, down }) {
+	const negative = down ?? (high <= 0 && low < 0);
+	const [a, b] = [context.value(low), context.value(high)];
+	const end = round ? endOf(context.horizontal, negative) : "none";
+	return {
+		d: context.horizontal ? barPath(Math.min(a, b), start, Math.abs(b - a), width, radius, end) : barPath(start, Math.min(a, b), width, Math.abs(b - a), radius, end),
+		grow: context.horizontal ? negative ? chartMarkStyles.growLeft : chartMarkStyles.growRight : negative ? chartMarkStyles.growDown : chartMarkStyles.growUp
+	};
+}
+/** 分组（并排）或堆叠的柱：每根柱带 data-index（第几行），点击下钻按它找行 */
+function chartBars(context, series, { stacked = false, radius, fill, maxWidth }) {
+	if (!series.length) return null;
+	const groupWidth = Math.min(context.step * (fill ?? (stacked ? .6 : .7)), maxWidth ?? (stacked ? 48 : 96));
+	const values = series.map((item) => context.rows.map((row) => context.valueOf(item, row)));
+	const stacks = stacked ? stackValues(values) : [];
+	const outermost = (index, negative) => {
+		for (let s = series.length - 1; s >= 0; s -= 1) {
+			const value = values[s][index];
+			if (value !== void 0 && value !== 0 && value < 0 === negative) return s;
+		}
+		return -1;
+	};
+	const barWidth = stacked ? groupWidth : groupWidth / (series.length + (series.length - 1) * .1);
+	return createVNode("g", { "data-part": "bars" }, [context.rows.flatMap((row, index) => {
+		const groupStart = context.category(row, index) - groupWidth / 2;
+		return series.map((item, s) => {
+			const value = values[s][index];
+			if (value === void 0 || value === 0) return null;
+			const segment = stacked ? stacks[s][index] : {
+				low: Math.min(0, value),
+				high: Math.max(0, value)
+			};
+			const { d, grow } = chartBar(context, {
+				start: stacked ? groupStart : groupStart + s * barWidth * 1.1,
+				width: barWidth,
+				low: segment.low,
+				high: segment.high,
+				radius,
+				round: !stacked || outermost(index, value < 0) === s
+			});
+			return createVNode("path", mergeJsxProps({
+				"key": `${item.key}:${index}`,
+				"data-part": "bar",
+				"data-index": index,
+				"d": d
+			}, css.attrs(chartMarkStyles.bar, grow, chartSvgStyles.fill(item.color))), null);
+		});
+	})]);
+}
+/** 线的选项 */
+/** 每个系列一条线（空值处断开） */
+function chartLines(context, series, { curve, width }) {
+	return createVNode("g", { "data-part": "lines" }, [series.map((item) => {
+		const d = segments(context, (row) => context.valueOf(item, row)).map((part) => linePath(part.map((p) => context.point(p[0], p[1])), curve)).join("");
+		return d ? createVNode("path", mergeJsxProps({
+			"key": item.key,
+			"data-part": "line",
+			"d": d,
+			"pathLength": 1
+		}, css.attrs(chartMarkStyles.line, chartSvgStyles.stroke(item.color), chartMarkStyles.lineWidth(width))), null) : null;
+	})]);
+}
+/** 面积的选项 */
+/** 每个系列一片面积，上沿描一条线；重叠时下沿是 0（或数值轴的下端），堆叠时是下面那一层 */
+function chartAreas(context, series, { curve, stacked, opacity }) {
+	const [d0, d1] = context.domain;
+	const floor = Math.min(Math.max(0, d0), d1);
+	return createVNode("g", { "data-part": "areas" }, [series.map((item) => {
+		const stack = context.stacks.get(item.key);
+		const parts = stacked && stack ? [context.rows.map((_, index) => [
+			stack[index].low,
+			stack[index].high,
+			index
+		])] : segments(context, (row) => context.valueOf(item, row)).map((part) => part.map(([, , index]) => [
+			floor,
+			context.valueOf(item, context.rows[index]),
+			index
+		]));
+		const toPoints = (part, edge) => part.map(([low, high, index]) => context.point(context.category(context.rows[index], index), context.value(edge ? high : low)));
+		const area = parts.map((part) => areaPath(toPoints(part, 1), toPoints(part, 0), curve)).join("");
+		const top = parts.map((part) => linePath(toPoints(part, 1), curve)).join("");
+		return createVNode("g", { "key": item.key }, [createVNode("path", mergeJsxProps({
+			"data-part": "area",
+			"d": area
+		}, css.attrs(chartMarkStyles.area, chartSvgStyles.fill(item.color), chartMarkStyles.fillOpacity(opacity))), null), createVNode("path", mergeJsxProps({
+			"data-part": "line",
+			"d": top,
+			"pathLength": 1
+		}, css.attrs(chartMarkStyles.line, chartSvgStyles.stroke(item.color), chartMarkStyles.lineWidth(2))), null)]);
+	})]);
+}
+/** 数据点：filled 实心（描一圈表面色），hollow 空心（表面色填充、系列色描边）；空值不画 */
+function chartDots(context, series, variant) {
+	return createVNode("g", { "data-part": "dots" }, [series.flatMap((item) => context.rows.map((row, index) => {
+		const value = context.valueOf(item, row);
+		if (value === void 0) return null;
+		const [x, y] = context.point(context.category(row, index), context.value(value));
+		return createVNode("circle", mergeJsxProps({
+			"key": `${item.key}:${index}`,
+			"data-part": "dot",
+			"cx": x,
+			"cy": y,
+			"r": variant === "hollow" ? 3.5 : 4
+		}, css.attrs(chartMarkStyles.dot, variant === "hollow" ? [chartMarkStyles.hollowDot, chartSvgStyles.stroke(item.color)] : [chartMarkStyles.filledDot, chartSvgStyles.fill(item.color)])), null);
+	}))]);
+}
+//#endregion
+export { chartAreas, chartBar, chartBars, chartDots, chartLines, chartMarkStyles };
+
+//# sourceMappingURL=marks.js.map

package/dist/charts/marks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marks.js","names":["_createVNode","_mergeProps"],"sources":["../../src/charts/marks.tsx"],"sourcesContent":["/**\n * 直角坐标图表的图形：柱（分组、堆叠）、线、面积、数据点。柱状图、折线图、面积图、组合图、瀑布图按需组合，\n * 坐标都从 XYChartContext 换算（横向时类目在纵轴）。\n *\n *   render: (context) => [chartAreas(context, series, { curve: 'monotone' }), chartDots(context, series, 'hollow')]\n *\n * 进场：柱从基线长出来、线从左往右描出、面积与点淡入，时长取主题的 lg（“减少动态效果”时为 0）；\n * 用 @starting-style，只在图形第一次出现时播放，数据更新时原地变。\n */\nimport { css, type SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { t } from '../config/theme/tokens';\nimport { chartSvgStyles } from './plot';\nimport type { ResolvedSeries } from './series';\nimport {\n  areaPath,\n  barPath,\n  linePath,\n  type BarEnd,\n  type ChartPoint,\n  type LineCurves,\n} from './shape';\nimport { stackValues, type StackSegment } from './stack';\nimport type { XYChartContext } from './XYChart';\n\nconst enter = `${t.durations.lg} ${t.easings.standard}`;\n\n/** 图形的样式 */\nexport const chartMarkStyles = css.create({\n  // 柱：从基线那一端长出来\n  bar: {\n    transformBox: 'fill-box',\n    transition: `scale ${enter}, opacity ${t.durations.sm} ${t.easings.standard}`,\n  },\n  growUp: { transformOrigin: 'bottom', scale: { default: '1', '@starting-style': '1 0' } },\n  growDown: { transformOrigin: 'top', scale: { default: '1', '@starting-style': '1 0' } },\n  growRight: { transformOrigin: 'left', scale: { default: '1', '@starting-style': '0 1' } },\n  growLeft: { transformOrigin: 'right', scale: { default: '1', '@starting-style': '0 1' } },\n  // 线：pathLength 归一成 1，虚线的偏移从 1 到 0，看起来是从头描到尾\n  line: {\n    fill: 'none',\n    strokeLinejoin: 'round',\n    strokeLinecap: 'round',\n    strokeDasharray: '1',\n    strokeDashoffset: { default: 0, '@starting-style': 1 },\n    transition: `stroke-dashoffset ${t.durations.xl} ${t.easings.standard}`,\n    pointerEvents: 'none',\n  },\n  area: {\n    stroke: 'none',\n    pointerEvents: 'none',\n    opacity: { default: 1, '@starting-style': 0 },\n    transition: `opacity ${enter}`,\n  },\n  dot: {\n    transformBox: 'fill-box',\n    transformOrigin: 'center',\n    scale: { default: '1', '@starting-style': '0' },\n    transition: `scale ${enter}`,\n    pointerEvents: 'none',\n  },\n  hollowDot: { fill: '_surface', strokeWidth: 2 },\n  filledDot: { stroke: '_surface', strokeWidth: 1.5 },\n  lineWidth: (width: number) => ({ strokeWidth: width }),\n  fillOpacity: (opacity: number) => ({ fillOpacity: opacity }),\n});\n\n/** 一行上一个系列的点：[类目坐标, 数值坐标]；空值处断开成几段 */\nfunction segments<T extends object>(\n  context: XYChartContext<T>,\n  value: (row: T, index: number) => number | undefined,\n): [number, number, number][][] {\n  const result: [number, number, number][][] = [];\n  let current: [number, number, number][] = [];\n  context.rows.forEach((row, index) => {\n    const v = value(row, index);\n    if (v === undefined) {\n      if (current.length) result.push(current);\n      current = [];\n      return;\n    }\n    current.push([context.category(row, index), context.value(v), index]);\n  });\n  if (current.length) result.push(current);\n  return result;\n}\n\n/** 柱的选项 */\nexport interface ChartBarOptions {\n  /** 堆叠 */\n  stacked?: boolean;\n  /** 柱末端的圆角（px） */\n  radius: number;\n  /** 一组柱占一格的比例，默认分组 0.7、堆叠 0.6 */\n  fill?: number;\n  /** 一组柱最宽多少（px），默认分组 96、堆叠 48 */\n  maxWidth?: number;\n}\n\n/** 柱末端朝哪边：正值朝上（横向朝右），负值反过来 */\nfunction endOf(horizontal: boolean, negative: boolean): BarEnd {\n  if (horizontal) return negative ? 'left' : 'right';\n  return negative ? 'bottom' : 'top';\n}\n\n/** 一根柱：类目方向上从 start 起宽 width，数值方向上从 low 到 high */\nexport function chartBar<T extends object>(\n  context: XYChartContext<T>,\n  {\n    start,\n    width,\n    low,\n    high,\n    radius,\n    round,\n    down,\n  }: {\n    start: number;\n    width: number;\n    low: number;\n    high: number;\n    radius: number;\n    /** 末端是圆角 */\n    round: boolean;\n    /** 朝下（横向时朝左）长：末端在 low 那一头；不写时按正负（负值朝下） */\n    down?: boolean;\n  },\n): { d: string; grow: SxStyles } {\n  const negative = down ?? (high <= 0 && low < 0);\n  const [a, b] = [context.value(low), context.value(high)];\n  const end = round ? endOf(context.horizontal, negative) : 'none';\n  const d = context.horizontal\n    ? barPath(Math.min(a, b), start, Math.abs(b - a), width, radius, end)\n    : barPath(start, Math.min(a, b), width, Math.abs(b - a), radius, end);\n  const grow = context.horizontal\n    ? negative\n      ? chartMarkStyles.growLeft\n      : chartMarkStyles.growRight\n    : negative\n      ? chartMarkStyles.growDown\n      : chartMarkStyles.growUp;\n  return { d, grow };\n}\n\n/** 分组（并排）或堆叠的柱：每根柱带 data-index（第几行），点击下钻按它找行 */\nexport function chartBars<T extends object>(\n  context: XYChartContext<T>,\n  series: readonly ResolvedSeries<T>[],\n  { stacked = false, radius, fill, maxWidth }: ChartBarOptions,\n): VNodeChild {\n  if (!series.length) return null;\n  const groupWidth = Math.min(\n    context.step * (fill ?? (stacked ? 0.6 : 0.7)),\n    maxWidth ?? (stacked ? 48 : 96),\n  );\n  const values = series.map((item) => context.rows.map((row) => context.valueOf(item, row)));\n  const stacks: StackSegment[][] = stacked ? stackValues(values) : [];\n  // 堆叠时只给每一摞最外面的一段圆角（正负各一）\n  const outermost = (index: number, negative: boolean) => {\n    for (let s = series.length - 1; s >= 0; s -= 1) {\n      const value = values[s]![index];\n      if (value !== undefined && value !== 0 && value < 0 === negative) return s;\n    }\n    return -1;\n  };\n  const barWidth = stacked ? groupWidth : groupWidth / (series.length + (series.length - 1) * 0.1);\n  return (\n    <g data-part=\"bars\">\n      {context.rows.flatMap((row, index) => {\n        const groupStart = context.category(row, index) - groupWidth / 2;\n        return series.map((item, s) => {\n          const value = values[s]![index];\n          if (value === undefined || value === 0) return null;\n          const segment = stacked\n            ? stacks[s]![index]!\n            : { low: Math.min(0, value), high: Math.max(0, value) };\n          const { d, grow } = chartBar(context, {\n            start: stacked ? groupStart : groupStart + s * barWidth * 1.1,\n            width: barWidth,\n            low: segment.low,\n            high: segment.high,\n            radius,\n            round: !stacked || outermost(index, value < 0) === s,\n          });\n          return (\n            <path\n              key={`${item.key}:${index}`}\n              data-part=\"bar\"\n              data-index={index}\n              d={d}\n              {...css.attrs(chartMarkStyles.bar, grow, chartSvgStyles.fill(item.color))}\n            />\n          );\n        });\n      })}\n    </g>\n  );\n}\n\n/** 线的选项 */\nexport interface ChartLineOptions {\n  /** 曲线 */\n  curve: keyof LineCurves;\n  /** 线宽（px） */\n  width: number;\n}\n\n/** 每个系列一条线（空值处断开） */\nexport function chartLines<T extends object>(\n  context: XYChartContext<T>,\n  series: readonly ResolvedSeries<T>[],\n  { curve, width }: ChartLineOptions,\n): VNodeChild {\n  return (\n    <g data-part=\"lines\">\n      {series.map((item) => {\n        const parts = segments(context, (row) => context.valueOf(item, row));\n        const d = parts\n          .map((part) =>\n            linePath(\n              part.map((p) => context.point(p[0], p[1])),\n              curve,\n            ),\n          )\n          .join('');\n        return d ? (\n          <path\n            key={item.key}\n            data-part=\"line\"\n            d={d}\n            pathLength={1}\n            {...css.attrs(\n              chartMarkStyles.line,\n              chartSvgStyles.stroke(item.color),\n              chartMarkStyles.lineWidth(width),\n            )}\n          />\n        ) : null;\n      })}\n    </g>\n  );\n}\n\n/** 面积的选项 */\nexport interface ChartAreaOptions {\n  /** 曲线 */\n  curve: keyof LineCurves;\n  /** 堆叠：用 context.stacks 里的上下沿 */\n  stacked: boolean;\n  /** 面积的不透明度 */\n  opacity: number;\n}\n\n/** 每个系列一片面积，上沿描一条线；重叠时下沿是 0（或数值轴的下端），堆叠时是下面那一层 */\nexport function chartAreas<T extends object>(\n  context: XYChartContext<T>,\n  series: readonly ResolvedSeries<T>[],\n  { curve, stacked, opacity }: ChartAreaOptions,\n): VNodeChild {\n  const [d0, d1] = context.domain;\n  const floor = Math.min(Math.max(0, d0), d1);\n  return (\n    <g data-part=\"areas\">\n      {series.map((item) => {\n        const stack = context.stacks.get(item.key);\n        // 堆叠时空值是 0 厚度（面积连续）；重叠时空值处断开\n        const parts =\n          stacked && stack\n            ? [\n                context.rows.map(\n                  (_, index) => [stack[index]!.low, stack[index]!.high, index] as const,\n                ),\n              ]\n            : segments(context, (row) => context.valueOf(item, row)).map((part) =>\n                part.map(\n                  ([, , index]) =>\n                    [floor, context.valueOf(item, context.rows[index]!)!, index] as const,\n                ),\n              );\n        const toPoints = (part: readonly (readonly [number, number, number])[], edge: 0 | 1) =>\n          part.map(([low, high, index]): ChartPoint =>\n            context.point(\n              context.category(context.rows[index]!, index),\n              context.value(edge ? high : low),\n            ),\n          );\n        const area = parts\n          .map((part) => areaPath(toPoints(part, 1), toPoints(part, 0), curve))\n          .join('');\n        const top = parts.map((part) => linePath(toPoints(part, 1), curve)).join('');\n        return (\n          <g key={item.key}>\n            <path\n              data-part=\"area\"\n              d={area}\n              {...css.attrs(\n                chartMarkStyles.area,\n                chartSvgStyles.fill(item.color),\n                chartMarkStyles.fillOpacity(opacity),\n              )}\n            />\n            <path\n              data-part=\"line\"\n              d={top}\n              pathLength={1}\n              {...css.attrs(\n                chartMarkStyles.line,\n                chartSvgStyles.stroke(item.color),\n                chartMarkStyles.lineWidth(2),\n              )}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n}\n\n/** 数据点：filled 实心（描一圈表面色），hollow 空心（表面色填充、系列色描边）；空值不画 */\nexport function chartDots<T extends object>(\n  context: XYChartContext<T>,\n  series: readonly ResolvedSeries<T>[],\n  variant: 'filled' | 'hollow',\n): VNodeChild {\n  return (\n    <g data-part=\"dots\">\n      {series.flatMap((item) =>\n        context.rows.map((row, index) => {\n          const value = context.valueOf(item, row);\n          if (value === undefined) return null;\n          const [x, y] = context.point(context.category(row, index), context.value(value));\n          return (\n            <circle\n              key={`${item.key}:${index}`}\n              data-part=\"dot\"\n              cx={x}\n              cy={y}\n              r={variant === 'hollow' ? 3.5 : 4}\n              {...css.attrs(\n                chartMarkStyles.dot,\n                variant === 'hollow'\n                  ? [chartMarkStyles.hollowDot, chartSvgStyles.stroke(item.color)]\n                  : [chartMarkStyles.filledDot, chartSvgStyles.fill(item.color)],\n              )}\n            />\n          );\n        }),\n      )}\n    </g>\n  );\n}\n"],"mappings":"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"}