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

package/dist/charts/shape.d.ts

@@ -0,0 +1,46 @@
+/** 一个点 [x, y] */
+export type ChartPoint = readonly [number, number];
+/** 线的形状 */
+export interface LineCurves {
+    /** 折线：相邻的点直线相连（默认） */
+    linear: unknown;
+    /** 平滑曲线：不会越过数据点（单调插值），趋势更柔和 */
+    monotone: unknown;
+    /** 阶梯：值保持到下一个点才跳变，适合离散的状态、价格档位 */
+    step: unknown;
+}
+/**
+ * 一串点连成的路径；start 是开头的命令（M 新起一段，L 接着上一段画：面积的下沿）。
+ * 少于三个点时平滑曲线退化成直线
+ */
+export declare function linePath(points: readonly ChartPoint[], curve?: keyof LineCurves, start?: 'M' | 'L'): string;
+/** 面积：上沿 top 从左到右，下沿 bottom（与 top 一一对应）从右到左，同一种曲线，闭合 */
+export declare function areaPath(top: readonly ChartPoint[], bottom: readonly ChartPoint[], curve?: keyof LineCurves): string;
+/** 柱子的哪一端是圆角：柱顶朝哪个方向 */
+export type BarEnd = 'top' | 'bottom' | 'left' | 'right' | 'none';
+/** 柱子：矩形（左上角 x、y，宽高），end 那一端的两个角是半径 radius 的圆角（不超过宽或高的一半） */
+export declare function barPath(x: number, y: number, width: number, height: number, radius: number, end: BarEnd): string;
+/** 环形的一段：角度从 12 点钟方向顺时针（弧度），圆心在原点 */
+export interface ArcShape {
+    /** 内半径；0 是饼图的扇形 */
+    inner: number;
+    /** 外半径 */
+    outer: number;
+    /** 起始角 */
+    start: number;
+    /** 结束角 */
+    end: number;
+    /** 四个角的圆角半径，默认 0 */
+    corner?: number;
+}
+/** 半径 r、角度 angle（12 点钟方向顺时针）处的点 */
+export declare function polarPoint(r: number, angle: number): [number, number];
+/**
+ * 环形一段的路径：两条径向的边、内外两段弧；corner 时四个角各是一段与边、弧都相切的小圆弧
+ * （边是径向的，与圆正交，切点可以直接算出）。整圈时画成两段弧（没有边）
+ */
+export declare function arcPath({ inner, outer, start, end, corner }: ArcShape): string;
+/** 弦图的一根弦：两端是圆上的两段弧（半径 radius，角度同 arcPath），中间经圆心的二次曲线相连（同 d3 的 ribbon） */
+export declare function ribbonPath(radius: number, source: readonly [number, number], target: readonly [number, number]): string;
+/** 横向的流向带（桑基图的连线）：从 (x0, y0) 到 (x1, y1) 的 S 形三次曲线，控制点在两端的中间 */
+export declare function horizontalLinkPath(x0: number, y0: number, x1: number, y1: number): string;

package/dist/charts/shape.js

@@ -0,0 +1,131 @@
+import { svgNumber } from "../utils/data/number.js";
+//#region src/charts/shape.ts
+/**
+* 图形的 SVG 路径：折线与面积（直线、单调平滑、阶梯）、一端圆角的柱子、环形的扇区、弦图的弦、桑基图的带子。
+* 曲线的算法同 d3-shape（curveMonotoneX 是 Steffen 的单调三次插值，不会越过数据点），写成只产出路径字符串的精简版。
+* 坐标保留三位小数（svgNumber）：服务端与浏览器算出的路径一致。
+*
+*   linePath([[0, 10], [40, 30], [80, 20]], 'monotone')   // 'M0,10C13.333,…'
+*   areaPath(top, bottom, 'linear')                       // 上沿从左到右、下沿从右到左，闭合
+*   arcPath({ inner: 60, outer: 88, start: 0, end: Math.PI / 2, corner: 3 })
+*/
+/** 两个数字写成“x,y” */
+var pair = (x, y) => `${svgNumber(x)},${svgNumber(y)}`;
+var sign = (value) => value < 0 ? -1 : 1;
+/** 中间一点的切线斜率：两侧的斜率异号时为 0（极值点不越过），否则取不超过两侧的调和值（同 d3 的 slope3） */
+function interiorSlope(a, b, c) {
+	const h0 = b[0] - a[0];
+	const h1 = c[0] - b[0];
+	const s0 = (b[1] - a[1]) / (h0 || (h1 < 0 ? -0 : 0));
+	const s1 = (c[1] - b[1]) / (h1 || (h0 < 0 ? -0 : 0));
+	const p = (s0 * h1 + s1 * h0) / (h0 + h1);
+	return (sign(s0) + sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), .5 * Math.abs(p)) || 0;
+}
+/** 端点的切线斜率：由相邻一段的斜率与相邻点的切线推出（同 d3 的 slope2） */
+function endSlope(a, b, tangent) {
+	const h = b[0] - a[0];
+	return h ? (3 * (b[1] - a[1]) / h - tangent) / 2 : tangent;
+}
+/** 单调三次插值：各点的切线，再按 Hermite 写成三次贝塞尔 */
+function monotoneCommands(points) {
+	const n = points.length;
+	const tangents = points.map((point, i) => i > 0 && i < n - 1 ? interiorSlope(points[i - 1], point, points[i + 1]) : 0);
+	tangents[0] = endSlope(points[0], points[1], tangents[1]);
+	tangents[n - 1] = endSlope(points[n - 2], points[n - 1], tangents[n - 2]);
+	let path = "";
+	for (let i = 1; i < n; i += 1) {
+		const [x0, y0] = points[i - 1];
+		const [x1, y1] = points[i];
+		const dx = (x1 - x0) / 3;
+		path += `C${pair(x0 + dx, y0 + dx * tangents[i - 1])},${pair(x1 - dx, y1 - dx * tangents[i])},${pair(x1, y1)}`;
+	}
+	return path;
+}
+/**
+* 一串点连成的路径；start 是开头的命令（M 新起一段，L 接着上一段画：面积的下沿）。
+* 少于三个点时平滑曲线退化成直线
+*/
+function linePath(points, curve = "linear", start = "M") {
+	if (points.length === 0) return "";
+	const [first, ...rest] = points;
+	let path = `${start}${pair(first[0], first[1])}`;
+	if (curve === "monotone" && points.length > 2) return path + monotoneCommands(points);
+	let previous = first;
+	for (const point of rest) {
+		if (curve === "step") path += `L${pair(point[0], previous[1])}`;
+		path += `L${pair(point[0], point[1])}`;
+		previous = point;
+	}
+	return path;
+}
+/** 面积：上沿 top 从左到右，下沿 bottom（与 top 一一对应）从右到左，同一种曲线，闭合 */
+function areaPath(top, bottom, curve = "linear") {
+	if (top.length === 0) return "";
+	const back = curve === "step" ? bottom.flatMap((point, i) => i === 0 ? [point] : [[point[0], bottom[i - 1][1]], point]) : bottom;
+	return `${linePath(top, curve)}${linePath([...back].reverse(), curve === "step" ? "linear" : curve, "L")}Z`;
+}
+/** 柱子：矩形（左上角 x、y，宽高），end 那一端的两个角是半径 radius 的圆角（不超过宽或高的一半） */
+function barPath(x, y, width, height, radius, end) {
+	const w = Math.max(width, 0);
+	const h = Math.max(height, 0);
+	const vertical = end === "top" || end === "bottom";
+	const r = end === "none" ? 0 : Math.max(0, Math.min(radius, vertical ? w / 2 : h / 2, vertical ? h : w));
+	const [x1, y1] = [x + w, y + h];
+	const corner = (cx, cy) => `A${pair(r, r)},0,0,1,${pair(cx, cy)}`;
+	if (!r) return `M${pair(x, y)}H${svgNumber(x1)}V${svgNumber(y1)}H${svgNumber(x)}Z`;
+	if (end === "top") return `M${pair(x, y1)}V${svgNumber(y + r)}${corner(x + r, y)}H${svgNumber(x1 - r)}${corner(x1, y + r)}V${svgNumber(y1)}Z`;
+	if (end === "bottom") return `M${pair(x1, y)}V${svgNumber(y1 - r)}${corner(x1 - r, y1)}H${svgNumber(x + r)}${corner(x, y1 - r)}V${svgNumber(y)}Z`;
+	if (end === "right") return `M${pair(x, y)}H${svgNumber(x1 - r)}${corner(x1, y + r)}V${svgNumber(y1 - r)}${corner(x1 - r, y1)}H${svgNumber(x)}Z`;
+	return `M${pair(x1, y1)}H${svgNumber(x + r)}${corner(x, y1 - r)}V${svgNumber(y + r)}${corner(x + r, y)}H${svgNumber(x1)}Z`;
+}
+/** 半径 r、角度 angle（12 点钟方向顺时针）处的点 */
+function polarPoint(r, angle) {
+	return [r * Math.sin(angle), -r * Math.cos(angle)];
+}
+/**
+* 环形一段的路径：两条径向的边、内外两段弧；corner 时四个角各是一段与边、弧都相切的小圆弧
+* （边是径向的，与圆正交，切点可以直接算出）。整圈时画成两段弧（没有边）
+*/
+function arcPath({ inner, outer, start, end, corner = 0 }) {
+	const sweep = end - start;
+	if (!(sweep > 0) || !(outer > 0)) return "";
+	const at = (r, angle) => pair(...polarPoint(r, angle));
+	const arc = (r, to, clockwise, span) => `A${pair(r, r)},0,${span > Math.PI ? 1 : 0},${clockwise ? 1 : 0},${at(r, to)}`;
+	if (sweep >= Math.PI * 2 - 1e-9) {
+		const outerRing = `M${at(outer, 0)}${arc(outer, Math.PI, true, Math.PI)}${arc(outer, 0, true, Math.PI)}Z`;
+		if (inner <= 0) return outerRing;
+		return `${outerRing}M${at(inner, 0)}${arc(inner, Math.PI, false, Math.PI)}${arc(inner, 0, false, Math.PI)}Z`;
+	}
+	const r = Math.max(0, Math.min(corner, (outer - inner) / 2, (inner > 0 ? inner : outer) * sweep / 2.2));
+	if (r < .5) {
+		const outerPart = `M${at(outer, start)}${arc(outer, end, true, sweep)}`;
+		if (inner <= 0) return `${outerPart}L0,0Z`;
+		return `${outerPart}L${at(inner, end)}${arc(inner, start, false, sweep)}Z`;
+	}
+	const outerShift = Math.asin(r / (outer - r));
+	const outerEdge = Math.sqrt((outer - r) ** 2 - r * r);
+	const fillet = (to) => `A${pair(r, r)},0,0,1,${to}`;
+	let path = `M${at(outerEdge, start)}${fillet(at(outer, start + outerShift))}${arc(outer, end - outerShift, true, sweep - outerShift * 2)}${fillet(at(outerEdge, end))}`;
+	if (inner <= 0) return `${path}L0,0Z`;
+	const innerShift = Math.asin(r / (inner + r));
+	const innerEdge = Math.sqrt((inner + r) ** 2 - r * r);
+	path += `L${at(innerEdge, end)}${fillet(at(inner, end - innerShift))}${arc(inner, start + innerShift, false, sweep - innerShift * 2)}${fillet(at(innerEdge, start))}Z`;
+	return path;
+}
+/** 弦图的一根弦：两端是圆上的两段弧（半径 radius，角度同 arcPath），中间经圆心的二次曲线相连（同 d3 的 ribbon） */
+function ribbonPath(radius, source, target) {
+	const at = (angle) => pair(...polarPoint(radius, angle));
+	const arc = ([from, to]) => `A${pair(radius, radius)},0,${to - from > Math.PI ? 1 : 0},1,${at(to)}`;
+	let path = `M${at(source[0])}${arc(source)}`;
+	if (source[0] !== target[0] || source[1] !== target[1]) path += `Q0,0,${at(target[0])}${arc(target)}`;
+	return `${path}Q0,0,${at(source[0])}Z`;
+}
+/** 横向的流向带（桑基图的连线）：从 (x0, y0) 到 (x1, y1) 的 S 形三次曲线，控制点在两端的中间 */
+function horizontalLinkPath(x0, y0, x1, y1) {
+	const middle = (x0 + x1) / 2;
+	return `M${pair(x0, y0)}C${pair(middle, y0)},${pair(middle, y1)},${pair(x1, y1)}`;
+}
+//#endregion
+export { arcPath, areaPath, barPath, horizontalLinkPath, linePath, polarPoint, ribbonPath };
+
+//# sourceMappingURL=shape.js.map

package/dist/charts/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","names":[],"sources":["../../src/charts/shape.ts"],"sourcesContent":["/**\n * 图形的 SVG 路径：折线与面积（直线、单调平滑、阶梯）、一端圆角的柱子、环形的扇区、弦图的弦、桑基图的带子。\n * 曲线的算法同 d3-shape（curveMonotoneX 是 Steffen 的单调三次插值，不会越过数据点），写成只产出路径字符串的精简版。\n * 坐标保留三位小数（svgNumber）：服务端与浏览器算出的路径一致。\n *\n *   linePath([[0, 10], [40, 30], [80, 20]], 'monotone')   // 'M0,10C13.333,…'\n *   areaPath(top, bottom, 'linear')                       // 上沿从左到右、下沿从右到左，闭合\n *   arcPath({ inner: 60, outer: 88, start: 0, end: Math.PI / 2, corner: 3 })\n */\nimport { svgNumber } from '../utils/data/number';\n\n/** 一个点 [x, y] */\nexport type ChartPoint = readonly [number, number];\n\n/** 线的形状 */\nexport interface LineCurves {\n  /** 折线：相邻的点直线相连（默认） */\n  linear: unknown;\n  /** 平滑曲线：不会越过数据点（单调插值），趋势更柔和 */\n  monotone: unknown;\n  /** 阶梯：值保持到下一个点才跳变，适合离散的状态、价格档位 */\n  step: unknown;\n}\n\n/** 两个数字写成“x,y” */\nconst pair = (x: number, y: number) => `${svgNumber(x)},${svgNumber(y)}`;\n\nconst sign = (value: number) => (value < 0 ? -1 : 1);\n\n/** 中间一点的切线斜率：两侧的斜率异号时为 0（极值点不越过），否则取不超过两侧的调和值（同 d3 的 slope3） */\nfunction interiorSlope(a: ChartPoint, b: ChartPoint, c: ChartPoint): number {\n  const h0 = b[0] - a[0];\n  const h1 = c[0] - b[0];\n  // 横坐标相同时除以带符号的 0：得到同向的无穷大，下面取 min 时自然被别的值替代\n  const s0 = (b[1] - a[1]) / (h0 || (h1 < 0 ? -0 : 0));\n  const s1 = (c[1] - b[1]) / (h1 || (h0 < 0 ? -0 : 0));\n  const p = (s0 * h1 + s1 * h0) / (h0 + h1);\n  return (sign(s0) + sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0;\n}\n\n/** 端点的切线斜率：由相邻一段的斜率与相邻点的切线推出（同 d3 的 slope2） */\nfunction endSlope(a: ChartPoint, b: ChartPoint, tangent: number): number {\n  const h = b[0] - a[0];\n  return h ? ((3 * (b[1] - a[1])) / h - tangent) / 2 : tangent;\n}\n\n/** 单调三次插值：各点的切线，再按 Hermite 写成三次贝塞尔 */\nfunction monotoneCommands(points: readonly ChartPoint[]): string {\n  const n = points.length;\n  const tangents = points.map((point, i) =>\n    i > 0 && i < n - 1 ? interiorSlope(points[i - 1]!, point, points[i + 1]!) : 0,\n  );\n  tangents[0] = endSlope(points[0]!, points[1]!, tangents[1]!);\n  tangents[n - 1] = endSlope(points[n - 2]!, points[n - 1]!, tangents[n - 2]!);\n  let path = '';\n  for (let i = 1; i < n; i += 1) {\n    const [x0, y0] = points[i - 1]!;\n    const [x1, y1] = points[i]!;\n    const dx = (x1 - x0) / 3;\n    path += `C${pair(x0 + dx, y0 + dx * tangents[i - 1]!)},${pair(x1 - dx, y1 - dx * tangents[i]!)},${pair(x1, y1)}`;\n  }\n  return path;\n}\n\n/**\n * 一串点连成的路径；start 是开头的命令（M 新起一段，L 接着上一段画：面积的下沿）。\n * 少于三个点时平滑曲线退化成直线\n */\nexport function linePath(\n  points: readonly ChartPoint[],\n  curve: keyof LineCurves = 'linear',\n  start: 'M' | 'L' = 'M',\n): string {\n  if (points.length === 0) return '';\n  const [first, ...rest] = points;\n  let path = `${start}${pair(first![0], first![1])}`;\n  if (curve === 'monotone' && points.length > 2) return path + monotoneCommands(points);\n  let previous = first!;\n  for (const point of rest) {\n    // 阶梯：横着走到下一个点的横坐标，再竖着跳到它的值\n    if (curve === 'step') path += `L${pair(point[0], previous[1])}`;\n    path += `L${pair(point[0], point[1])}`;\n    previous = point;\n  }\n  return path;\n}\n\n/** 面积：上沿 top 从左到右，下沿 bottom（与 top 一一对应）从右到左，同一种曲线，闭合 */\nexport function areaPath(\n  top: readonly ChartPoint[],\n  bottom: readonly ChartPoint[],\n  curve: keyof LineCurves = 'linear',\n): string {\n  if (top.length === 0) return '';\n  // 阶梯的下沿倒着画时要先竖后横，才与上沿的拐角对齐：倒着画的阶梯把每一步的值挪到前一个点\n  const back =\n    curve === 'step'\n      ? bottom.flatMap((point, i) =>\n          i === 0 ? [point] : [[point[0], bottom[i - 1]![1]] as const, point],\n        )\n      : bottom;\n  return `${linePath(top, curve)}${linePath([...back].reverse(), curve === 'step' ? 'linear' : curve, 'L')}Z`;\n}\n\n/** 柱子的哪一端是圆角：柱顶朝哪个方向 */\nexport type BarEnd = 'top' | 'bottom' | 'left' | 'right' | 'none';\n\n/** 柱子：矩形（左上角 x、y，宽高），end 那一端的两个角是半径 radius 的圆角（不超过宽或高的一半） */\nexport function barPath(\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  radius: number,\n  end: BarEnd,\n): string {\n  const w = Math.max(width, 0);\n  const h = Math.max(height, 0);\n  const vertical = end === 'top' || end === 'bottom';\n  const r =\n    end === 'none' ? 0 : Math.max(0, Math.min(radius, vertical ? w / 2 : h / 2, vertical ? h : w));\n  const [x1, y1] = [x + w, y + h];\n  const corner = (cx: number, cy: number) => `A${pair(r, r)},0,0,1,${pair(cx, cy)}`;\n  if (!r) return `M${pair(x, y)}H${svgNumber(x1)}V${svgNumber(y1)}H${svgNumber(x)}Z`;\n  if (end === 'top')\n    return `M${pair(x, y1)}V${svgNumber(y + r)}${corner(x + r, y)}H${svgNumber(x1 - r)}${corner(x1, y + r)}V${svgNumber(y1)}Z`;\n  if (end === 'bottom')\n    return `M${pair(x1, y)}V${svgNumber(y1 - r)}${corner(x1 - r, y1)}H${svgNumber(x + r)}${corner(x, y1 - r)}V${svgNumber(y)}Z`;\n  if (end === 'right')\n    return `M${pair(x, y)}H${svgNumber(x1 - r)}${corner(x1, y + r)}V${svgNumber(y1 - r)}${corner(x1 - r, y1)}H${svgNumber(x)}Z`;\n  return `M${pair(x1, y1)}H${svgNumber(x + r)}${corner(x, y1 - r)}V${svgNumber(y + r)}${corner(x + r, y)}H${svgNumber(x1)}Z`;\n}\n\n/** 环形的一段：角度从 12 点钟方向顺时针（弧度），圆心在原点 */\nexport interface ArcShape {\n  /** 内半径；0 是饼图的扇形 */\n  inner: number;\n  /** 外半径 */\n  outer: number;\n  /** 起始角 */\n  start: number;\n  /** 结束角 */\n  end: number;\n  /** 四个角的圆角半径，默认 0 */\n  corner?: number;\n}\n\n/** 半径 r、角度 angle（12 点钟方向顺时针）处的点 */\nexport function polarPoint(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), -r * Math.cos(angle)];\n}\n\n/**\n * 环形一段的路径：两条径向的边、内外两段弧；corner 时四个角各是一段与边、弧都相切的小圆弧\n * （边是径向的，与圆正交，切点可以直接算出）。整圈时画成两段弧（没有边）\n */\nexport function arcPath({ inner, outer, start, end, corner = 0 }: ArcShape): string {\n  const sweep = end - start;\n  if (!(sweep > 0) || !(outer > 0)) return '';\n  const at = (r: number, angle: number) => pair(...polarPoint(r, angle));\n  const arc = (r: number, to: number, clockwise: boolean, span: number) =>\n    `A${pair(r, r)},0,${span > Math.PI ? 1 : 0},${clockwise ? 1 : 0},${at(r, to)}`;\n  if (sweep >= Math.PI * 2 - 1e-9) {\n    const outerRing = `M${at(outer, 0)}${arc(outer, Math.PI, true, Math.PI)}${arc(outer, 0, true, Math.PI)}Z`;\n    if (inner <= 0) return outerRing;\n    return `${outerRing}M${at(inner, 0)}${arc(inner, Math.PI, false, Math.PI)}${arc(inner, 0, false, Math.PI)}Z`;\n  }\n  // 圆角不超过环宽的一半，也不超过这一段在内（饼图是外）弧上长度的一半\n  const r = Math.max(\n    0,\n    Math.min(corner, (outer - inner) / 2, ((inner > 0 ? inner : outer) * sweep) / 2.2),\n  );\n  if (r < 0.5) {\n    const outerPart = `M${at(outer, start)}${arc(outer, end, true, sweep)}`;\n    if (inner <= 0) return `${outerPart}L0,0Z`;\n    return `${outerPart}L${at(inner, end)}${arc(inner, start, false, sweep)}Z`;\n  }\n  // 外角：小圆心在半径 outer - r 上，切边的点离圆心 √((outer-r)² - r²)，切弧的点偏开 asin(r / (outer - r))\n  const outerShift = Math.asin(r / (outer - r));\n  const outerEdge = Math.sqrt((outer - r) ** 2 - r * r);\n  const fillet = (to: string) => `A${pair(r, r)},0,0,1,${to}`;\n  let path =\n    `M${at(outerEdge, start)}${fillet(at(outer, start + outerShift))}` +\n    `${arc(outer, end - outerShift, true, sweep - outerShift * 2)}${fillet(at(outerEdge, end))}`;\n  if (inner <= 0) return `${path}L0,0Z`;\n  // 内角：小圆心在半径 inner + r 上\n  const innerShift = Math.asin(r / (inner + r));\n  const innerEdge = Math.sqrt((inner + r) ** 2 - r * r);\n  path +=\n    `L${at(innerEdge, end)}${fillet(at(inner, end - innerShift))}` +\n    `${arc(inner, start + innerShift, false, sweep - innerShift * 2)}${fillet(at(innerEdge, start))}Z`;\n  return path;\n}\n\n/** 弦图的一根弦：两端是圆上的两段弧（半径 radius，角度同 arcPath），中间经圆心的二次曲线相连（同 d3 的 ribbon） */\nexport function ribbonPath(\n  radius: number,\n  source: readonly [number, number],\n  target: readonly [number, number],\n): string {\n  const at = (angle: number) => pair(...polarPoint(radius, angle));\n  const arc = ([from, to]: readonly [number, number]) =>\n    `A${pair(radius, radius)},0,${to - from > Math.PI ? 1 : 0},1,${at(to)}`;\n  let path = `M${at(source[0])}${arc(source)}`;\n  if (source[0] !== target[0] || source[1] !== target[1])\n    path += `Q0,0,${at(target[0])}${arc(target)}`;\n  return `${path}Q0,0,${at(source[0])}Z`;\n}\n\n/** 横向的流向带（桑基图的连线）：从 (x0, y0) 到 (x1, y1) 的 S 形三次曲线，控制点在两端的中间 */\nexport function horizontalLinkPath(x0: number, y0: number, x1: number, y1: number): string {\n  const middle = (x0 + x1) / 2;\n  return `M${pair(x0, y0)}C${pair(middle, y0)},${pair(middle, y1)},${pair(x1, y1)}`;\n}\n"],"mappings":"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"}

package/dist/charts/stack.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 堆叠：各系列在同一类目上依次叠起，正值从 0 往上叠、负值从 0 往下叠（同 d3 的 stackOffsetDiverging）。
+ * 柱状图、面积图、组合图的堆叠与十字线圆点、标注圈的位置共用。
+ *
+ *   stackValues([[3, 5], [2, -1]])   // 系列 0：[[0,3], [0,5]]；系列 1：[[3,5], [-1,0]]
+ */
+/** 一个系列在一行上叠出的一段 */
+export interface StackSegment {
+    /** 下沿（负值是靠近 0 的一端以外的那端） */
+    low: number;
+    /** 上沿 */
+    high: number;
+    /** 原值；空值是 undefined，这时 low、high 都在当前的正向累计处（高度为 0，面积连续） */
+    value: number | undefined;
+}
+/** values[系列][行] → 每个系列在每一行的一段 */
+export declare function stackValues(values: readonly (readonly (number | undefined)[])[]): StackSegment[][];

package/dist/charts/stack.js

@@ -0,0 +1,35 @@
+//#region src/charts/stack.ts
+/** values[系列][行] → 每个系列在每一行的一段 */
+function stackValues(values) {
+	const rows = Math.max(0, ...values.map((list) => list.length));
+	const positive = Array.from({ length: rows }, () => 0);
+	const negative = Array.from({ length: rows }, () => 0);
+	return values.map((list) => Array.from({ length: rows }, (_, row) => {
+		const value = list[row];
+		if (value === void 0 || !Number.isFinite(value)) return {
+			low: positive[row],
+			high: positive[row],
+			value: void 0
+		};
+		if (value >= 0) {
+			const low = positive[row];
+			positive[row] = low + value;
+			return {
+				low,
+				high: low + value,
+				value
+			};
+		}
+		const high = negative[row];
+		negative[row] = high + value;
+		return {
+			low: high + value,
+			high,
+			value
+		};
+	}));
+}
+//#endregion
+export { stackValues };
+
+//# sourceMappingURL=stack.js.map

package/dist/charts/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","names":[],"sources":["../../src/charts/stack.ts"],"sourcesContent":["/**\n * 堆叠：各系列在同一类目上依次叠起，正值从 0 往上叠、负值从 0 往下叠（同 d3 的 stackOffsetDiverging）。\n * 柱状图、面积图、组合图的堆叠与十字线圆点、标注圈的位置共用。\n *\n *   stackValues([[3, 5], [2, -1]])   // 系列 0：[[0,3], [0,5]]；系列 1：[[3,5], [-1,0]]\n */\n\n/** 一个系列在一行上叠出的一段 */\nexport interface StackSegment {\n  /** 下沿（负值是靠近 0 的一端以外的那端） */\n  low: number;\n  /** 上沿 */\n  high: number;\n  /** 原值；空值是 undefined，这时 low、high 都在当前的正向累计处（高度为 0，面积连续） */\n  value: number | undefined;\n}\n\n/** values[系列][行] → 每个系列在每一行的一段 */\nexport function stackValues(\n  values: readonly (readonly (number | undefined)[])[],\n): StackSegment[][] {\n  const rows = Math.max(0, ...values.map((list) => list.length));\n  const positive = Array.from({ length: rows }, () => 0);\n  const negative = Array.from({ length: rows }, () => 0);\n  return values.map((list) =>\n    Array.from({ length: rows }, (_, row) => {\n      const value = list[row];\n      if (value === undefined || !Number.isFinite(value))\n        return { low: positive[row]!, high: positive[row]!, value: undefined };\n      if (value >= 0) {\n        const low = positive[row]!;\n        positive[row] = low + value;\n        return { low, high: low + value, value };\n      }\n      const high = negative[row]!;\n      negative[row] = high + value;\n      return { low: high + value, high, value };\n    }),\n  );\n}\n"],"mappings":";;AAkBA,SAAgB,YACd,QACkB;CAClB,MAAM,OAAO,KAAK,IAAI,GAAG,GAAG,OAAO,KAAK,SAAS,KAAK,MAAM,CAAC;CAC7D,MAAM,WAAW,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CACrD,MAAM,WAAW,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CACrD,OAAO,OAAO,KAAK,SACjB,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,QAAQ;EACvC,MAAM,QAAQ,KAAK;EACnB,IAAI,UAAU,KAAA,KAAa,CAAC,OAAO,SAAS,KAAK,GAC/C,OAAO;GAAE,KAAK,SAAS;GAAO,MAAM,SAAS;GAAO,OAAO,KAAA;EAAU;EACvE,IAAI,SAAS,GAAG;GACd,MAAM,MAAM,SAAS;GACrB,SAAS,OAAO,MAAM;GACtB,OAAO;IAAE;IAAK,MAAM,MAAM;IAAO;GAAM;EACzC;EACA,MAAM,OAAO,SAAS;EACtB,SAAS,OAAO,OAAO;EACvB,OAAO;GAAE,KAAK,OAAO;GAAO;GAAM;EAAM;CAC1C,CAAC,CACH;AACF"}

package/dist/charts/text-size.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 图表里文字的宽度估算：留坐标轴的边距、决定类目刻度隔几个写一个、地点名字的避让都要在画之前知道文字多宽。
+ * 不去量 DOM（服务端渲染、还没挂上时也要算）：中日韩文字、全角符号按一个字号宽，其余按 0.6 个字号宽，
+ * 宁宽勿窄（宽了只是多留一点空，窄了会叠在一起）。
+ *
+ *   estimateTextWidth('华东区 2026', 12)    // 3 × 12 + 5 × 7.2 = 72
+ *   truncateText('很长很长的类目名', 60, 12)   // '很长很长…'
+ */
+/** 估算文字的宽度（px）；fontSize 是字号（px），默认 12（主题的 xs） */
+export declare function estimateTextWidth(text: string, fontSize?: number): number;
+/** 文字超过 maxWidth 时截短并加省略号；放得下时原样返回 */
+export declare function truncateText(text: string, maxWidth: number, fontSize?: number): string;

package/dist/charts/text-size.js

@@ -0,0 +1,32 @@
+//#region src/charts/text-size.ts
+/**
+* 图表里文字的宽度估算：留坐标轴的边距、决定类目刻度隔几个写一个、地点名字的避让都要在画之前知道文字多宽。
+* 不去量 DOM（服务端渲染、还没挂上时也要算）：中日韩文字、全角符号按一个字号宽，其余按 0.6 个字号宽，
+* 宁宽勿窄（宽了只是多留一点空，窄了会叠在一起）。
+*
+*   estimateTextWidth('华东区 2026', 12)    // 3 × 12 + 5 × 7.2 = 72
+*   truncateText('很长很长的类目名', 60, 12)   // '很长很长…'
+*/
+/** 按一个字号宽算的字：中日韩文字、全角标点、假名、谚文 */
+var WIDE = /[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/u;
+/** 估算文字的宽度（px）；fontSize 是字号（px），默认 12（主题的 xs） */
+function estimateTextWidth(text, fontSize = 12) {
+	let width = 0;
+	for (const char of text) width += WIDE.test(char) ? fontSize : fontSize * .6;
+	return width;
+}
+/** 文字超过 maxWidth 时截短并加省略号；放得下时原样返回 */
+function truncateText(text, maxWidth, fontSize = 12) {
+	if (estimateTextWidth(text, fontSize) <= maxWidth) return text;
+	const room = maxWidth - fontSize;
+	let result = "";
+	for (const char of text) {
+		if (estimateTextWidth(result + char, fontSize) > room) break;
+		result += char;
+	}
+	return `${result}…`;
+}
+//#endregion
+export { estimateTextWidth, truncateText };
+
+//# sourceMappingURL=text-size.js.map

package/dist/charts/text-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-size.js","names":[],"sources":["../../src/charts/text-size.ts"],"sourcesContent":["/**\n * 图表里文字的宽度估算：留坐标轴的边距、决定类目刻度隔几个写一个、地点名字的避让都要在画之前知道文字多宽。\n * 不去量 DOM（服务端渲染、还没挂上时也要算）：中日韩文字、全角符号按一个字号宽，其余按 0.6 个字号宽，\n * 宁宽勿窄（宽了只是多留一点空，窄了会叠在一起）。\n *\n *   estimateTextWidth('华东区 2026', 12)    // 3 × 12 + 5 × 7.2 = 72\n *   truncateText('很长很长的类目名', 60, 12)   // '很长很长…'\n */\n\n/** 按一个字号宽算的字：中日韩文字、全角标点、假名、谚文 */\nconst WIDE = /[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/u;\n\n/** 估算文字的宽度（px）；fontSize 是字号（px），默认 12（主题的 xs） */\nexport function estimateTextWidth(text: string, fontSize = 12): number {\n  let width = 0;\n  for (const char of text) width += WIDE.test(char) ? fontSize : fontSize * 0.6;\n  return width;\n}\n\n/** 文字超过 maxWidth 时截短并加省略号；放得下时原样返回 */\nexport function truncateText(text: string, maxWidth: number, fontSize = 12): string {\n  if (estimateTextWidth(text, fontSize) <= maxWidth) return text;\n  const room = maxWidth - fontSize;\n  let result = '';\n  for (const char of text) {\n    if (estimateTextWidth(result + char, fontSize) > room) break;\n    result += char;\n  }\n  return `${result}…`;\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,OAAO;;AAGb,SAAgB,kBAAkB,MAAc,WAAW,IAAY;CACrE,IAAI,QAAQ;CACZ,KAAK,MAAM,QAAQ,MAAM,SAAS,KAAK,KAAK,IAAI,IAAI,WAAW,WAAW;CAC1E,OAAO;AACT;;AAGA,SAAgB,aAAa,MAAc,UAAkB,WAAW,IAAY;CAClF,IAAI,kBAAkB,MAAM,QAAQ,KAAK,UAAU,OAAO;CAC1D,MAAM,OAAO,WAAW;CACxB,IAAI,SAAS;CACb,KAAK,MAAM,QAAQ,MAAM;EACvB,IAAI,kBAAkB,SAAS,MAAM,QAAQ,IAAI,MAAM;EACvD,UAAU;CACZ;CACA,OAAO,GAAG,OAAO;AACnB"}