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

package/dist/charts/frame.js

@@ -0,0 +1,358 @@
+import { borderWidths, colors, durations, fontSizes, fontWeights, fonts, radii, shadows, space, t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { themeTransition } from "../utils/motion/animation.js";
+import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { IconButton } from "../base/IconButton.js";
+import { useIntersectionObserver } from "../utils/dom/intersection.js";
+import { useEventListener } from "../utils/dom/event-listener.js";
+import { useFormat } from "../config/lang/format.js";
+import { Empty } from "../feedback/Empty.js";
+import { Menu as Menu$1, MenuItem } from "../overlay/Menu.js";
+import { exportChartData, exportChartImage } from "./export.js";
+import { createVNode, mergeProps, shallowRef, watch } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Download, FileSpreadsheet, ImageDown } from "@lucide/icons";
+//#region src/charts/frame.tsx
+/** 图例里的一项 */
+/** 给读屏的数据表：列名与每一行（行标题加各列的文字） */
+/** 各种图表共有的选项与部件属性 */
+/** 图表共用的样式：root（--vis-* 主题变量）、header、unit、legend、swatch、plot、tooltip… */
+var chartStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		width: "100%",
+		minWidth: 0,
+		fontSize: "_sm",
+		"--vis-font-family": fonts.sans,
+		"--vis-axis-tick-label-font-size": fontSizes.xs,
+		"--vis-axis-tick-label-color": colors.textMuted,
+		"--vis-axis-label-color": colors.textMuted,
+		"--vis-axis-label-font-size": fontSizes.xs,
+		"--vis-axis-label-weight": fontWeights.normal,
+		"--vis-axis-grid-color": colors.borderMuted,
+		"--vis-axis-domain-color": colors.border,
+		"--vis-axis-tick-color": colors.border,
+		"--vis-crosshair-line-stroke-color": colors.borderStrong,
+		"--vis-crosshair-circle-stroke-color": colors.surface,
+		"--vis-tooltip-background-color": colors.surfaceRaised,
+		"--vis-tooltip-border-color": colors.borderMuted,
+		"--vis-tooltip-text-color": colors.text,
+		"--vis-tooltip-border-radius": radii.md,
+		"--vis-tooltip-box-shadow": shadows.md,
+		"--vis-tooltip-padding": `${space.sm} ${space.md}`,
+		"--vis-tooltip-backdrop-filter": "none",
+		"--vis-tooltip-transition-duration": durations.sm,
+		"--vis-grouped-bar-hover-stroke-width": "0",
+		"--vis-donut-background-color": colors.fill,
+		"--vis-donut-segment-stroke-width": borderWidths.md,
+		"--vis-donut-central-label-text-color": colors.text,
+		"--vis-donut-central-label-font-size": fontSizes.xl,
+		"--vis-donut-central-sub-label-text-color": colors.textMuted,
+		"--vis-donut-central-sub-label-font-size": fontSizes.xs,
+		"--vis-plotline-label-font-size": fontSizes.xs,
+		"--vis-plotline-label-color": colors.textMuted
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "_md",
+		minHeight: "1.5em"
+	},
+	unit: {
+		color: "_textMuted",
+		fontSize: "_xs"
+	},
+	legend: {
+		display: "flex",
+		flexWrap: "wrap",
+		justifyContent: "flex-end",
+		gap: `${t.space.xs} ${t.space.md}`,
+		marginInlineStart: "auto"
+	},
+	legendItem: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs",
+		color: {
+			default: "_textMuted",
+			":hover": "_text"
+		},
+		fontSize: "_xs",
+		borderRadius: "_sm"
+	},
+	legendItemHidden: { textDecorationLine: "line-through" },
+	swatch: {
+		width: "0.625em",
+		height: "0.625em",
+		borderRadius: "_sm",
+		flexShrink: 0
+	},
+	swatchColor: (color) => ({ backgroundColor: color }),
+	swatchHidden: (color) => ({
+		backgroundColor: "transparent",
+		boxShadow: `inset 0 0 0 ${borderWidths.md} ${color}`
+	}),
+	plot: {
+		position: "relative",
+		minWidth: 0,
+		contain: "inline-size"
+	},
+	plotClickable: { cursor: "pointer" },
+	plotHeight: (height) => ({ height }),
+	center: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "100%"
+	},
+	tooltip: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_xs",
+		fontSize: "_xs"
+	},
+	tooltipTitle: { fontWeight: "_semibold" },
+	tooltipRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm"
+	},
+	tooltipLabel: {
+		color: "_textMuted",
+		flexGrow: 1
+	},
+	tooltipValue: {
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: "_medium",
+		marginInlineStart: "_lg"
+	}
+});
+/** 提示框的一行 */
+/** 提示框的内容：标题（类目、扇区名）+ 每个系列一行；Unovis 定位，Vue 渲染 */
+function chartTooltip(title, items) {
+	return createVNode("div", css.attrs(chartStyles.tooltip), [title && createVNode("div", css.attrs(chartStyles.tooltipTitle), [title]), items.map((item) => createVNode("div", mergeProps({ "key": item.label }, css.attrs(chartStyles.tooltipRow)), [
+		createVNode("span", css.attrs(chartStyles.swatch, chartStyles.swatchColor(item.color)), null),
+		createVNode("span", css.attrs(chartStyles.tooltipLabel), [item.label]),
+		createVNode("span", css.attrs(chartStyles.tooltipValue), [item.value])
+	]))]);
+}
+/**
+* 图表里数值的文字（提示框、读屏数据表、扇区标签）：按 valueFormat 格式化、带上单位；
+* 没有值时是语言包的 emptyValue。setup 里调用，返回的函数在渲染里用
+*/
+function useChartValueText(read) {
+	const lang = useLang();
+	const format = useFormat();
+	return (value) => {
+		if (value === void 0) return lang.emptyValue;
+		const { valueFormat, unit } = read();
+		return format.number(value, unit ? {
+			...valueFormat,
+			suffix: unit
+		} : valueFormat);
+	};
+}
+/** 绘图区离视口多近就算看见了（px）：滚到之前先画好，进来时已经是画好的 */
+var SEEN_MARGIN = 200;
+/**
+* 绘图区进入过视口：之前不画，进来之后一直算看见（滚出去不拆掉）。一页很多图表时先画看得见的，
+* 其余的滚到附近再画（地图、网络图绘制很重）。在 setup 里调用，绘制的 effect 里读返回的函数。
+* 挂上时就在视口附近的立即算看见（不等观察器的第一次回调；没有布局的测试环境里框都在原点，也算看见）；
+* 打印前全部画上；没有 IntersectionObserver 的环境当作看见了。
+*/
+function usePlotSeen(plot) {
+	const seen = shallowRef(typeof IntersectionObserver === "undefined");
+	const near = (element) => {
+		const box = element.getBoundingClientRect();
+		return box.top < window.innerHeight + SEEN_MARGIN && box.bottom > -200 && box.left < window.innerWidth + SEEN_MARGIN && box.right > -200;
+	};
+	watch(plot, (element) => {
+		if (element && !seen.value && near(element)) seen.value = true;
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	useIntersectionObserver(() => seen.value ? null : plot(), (entries) => {
+		if (entries.some((entry) => entry.isIntersecting)) seen.value = true;
+	}, () => ({ rootMargin: `${SEEN_MARGIN}px` }));
+	useEventListener(() => window, "beforeprint", () => seen.value = true);
+	return () => seen.value;
+}
+/** 主题的 lg 时长（毫秒），减少动态效果时为 0；读不到（元素不在主题范围内）时不要动画 */
+function chartDuration(element) {
+	try {
+		return themeTransition(element, { duration: "lg" }).duration ?? 0;
+	} catch {
+		return 0;
+	}
+}
+/**
+* Unovis 每个容器都插一个 id 固定为 saturate 的滤镜（悬停高亮用），一页多张图时 id 重复；
+* 改成每张图自己的 id，并让引用它的 CSS 变量指过去
+*/
+function uniqueHighlightFilter(element, id) {
+	const filter = element.querySelector("filter#saturate");
+	if (!filter) return;
+	filter.id = id;
+	element.querySelector("svg")?.style.setProperty("--highlight-filter-id", `url(#${id})`);
+}
+/**
+* Unovis 实例表：组件、坐标轴、十字线只建一次，之后 setConfig + update（保留实例才有过渡动画）。
+* 容器 destroy 时会连带销毁这些实例：重建容器前 reset，下次取用时重新创建
+*/
+function createChartInstances() {
+	let instances = /* @__PURE__ */ new Map();
+	return {
+		/** 取一个实例：第一次调用时创建 */
+		get: (key, create) => {
+			if (!instances.has(key)) instances.set(key, create());
+			return instances.get(key);
+		},
+		/** 容器销毁了：清空，之后重新创建 */
+		reset() {
+			instances = /* @__PURE__ */ new Map();
+		}
+	};
+}
+/** ChartFrame 的属性：未声明的属性落到外层 div（role="figure"）上 */
+/** 图表的外层结构 */
+var ChartFrame = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const unit = readonlyProp(_props, "unit");
+	const unitEnd = readonlyProp(_props, "unitEnd");
+	const height = readonlyProp(_props, "height");
+	const legend = readonlyProp(_props, "legend");
+	const hiddenKeys = readonlyProp(_props, "hiddenKeys");
+	const onLegendToggle = readonlyProp(_props, "onLegendToggle");
+	const loading = readonlyProp(_props, "loading");
+	const skeleton = readonlyProp(_props, "skeleton");
+	const isEmpty = readonlyProp(_props, "isEmpty");
+	const empty = readonlyProp(_props, "empty");
+	const table = readonlyProp(_props, "table");
+	const plotRef = readonlyProp(_props, "plotRef");
+	const footer = readonlyProp(_props, "footer");
+	const actions = readonlyProp(_props, "actions");
+	const plot = readonlyProp(_props, "plot");
+	const onPlotClick = readonlyProp(_props, "onPlotClick");
+	const clickable = readonlyProp(_props, "clickable", false);
+	const propsHeader = readonlyProp(_props, "propsHeader");
+	const propsUnit = readonlyProp(_props, "propsUnit");
+	const propsLegend = readonlyProp(_props, "propsLegend");
+	const propsLegendItem = readonlyProp(_props, "propsLegendItem");
+	const propsPlot = readonlyProp(_props, "propsPlot");
+	const propsTable = readonlyProp(_props, "propsTable");
+	const exportable = readonlyProp(_props, "exportable", false);
+	const exportName = readonlyProp(_props, "exportName");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	let plotElement = null;
+	const fileName = () => exportName.value ?? rest["aria-label"] ?? lang.chartExportName;
+	/** 导出菜单：图片要绘图区里有 SVG（漏斗图这类直接用 HTML 画的没有） */
+	const exportMenu = () => createVNode(Menu$1, { "trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergeProps(props, {
+		"icon": Download,
+		"variant": "ghost",
+		"tone": "neutral",
+		"size": "sm",
+		"aria-label": lang.chartExport
+	}), null)) }, { default: () => [createVNode(MenuItem, {
+		"icon": ImageDown,
+		"onAction": _cache[1] || (_cache[1] = () => {
+			const svg = plotElement?.querySelector("svg");
+			if (svg) exportChartImage(svg, fileName());
+		})
+	}, {
+		default: () => [lang.chartExportImage],
+		$stable: true
+	}), createVNode(MenuItem, {
+		"icon": FileSpreadsheet,
+		"onAction": _cache[2] || (_cache[2] = () => exportChartData(table.value, format, fileName()))
+	}, {
+		default: () => [lang.chartExportData],
+		$stable: true
+	})] });
+	return () => {
+		const plotHeight = typeof height.value === "number" ? `${height.value}px` : height.value;
+		const body = loading.value ? skeleton.value : isEmpty.value ? createVNode("div", css.attrs(chartStyles.center), [empty.value ?? createVNode(Empty, {
+			"size": "sm",
+			"title": lang.chartEmpty
+		}, null)]) : null;
+		return createVNode("div", mergeAttrs({ sx: chartStyles.root }, rest, {
+			role: "figure",
+			"aria-busy": loading.value || void 0
+		}), [
+			(unit.value || unitEnd.value || legend.value.length > 0 || exportable.value || actions.value) && createVNode("div", mergeAttrs({ sx: chartStyles.header }, propsHeader.value), [
+				unit.value && createVNode("span", mergeAttrs({ sx: chartStyles.unit }, propsUnit.value), [unit.value]),
+				legend.value.length > 0 && createVNode("div", mergeAttrs({ sx: chartStyles.legend }, propsLegend.value, { role: "group" }), [legend.value.map((item) => {
+					const off = hiddenKeys.value.includes(item.key);
+					return createVNode(ButtonBase, mergeProps({ "key": item.key }, mergePartProps({
+						sx: [chartStyles.legendItem, off && chartStyles.legendItemHidden],
+						ripple: false
+					}, propsLegendItem.value, {
+						"aria-pressed": !off,
+						onClick: () => onLegendToggle.value(item.key)
+					})), { default: () => [createVNode("span", css.attrs(chartStyles.swatch, off ? css.bind(chartStyles.swatchHidden, () => [item.color]) : css.bind(chartStyles.swatchColor, () => [item.color])), null), item.label] });
+				})]),
+				unitEnd.value && createVNode("span", mergeAttrs({ sx: chartStyles.unit }, propsUnit.value), [unitEnd.value]),
+				!isEmpty.value && !loading.value && actions.value,
+				exportable.value && !isEmpty.value && !loading.value && exportMenu()
+			]),
+			body ? createVNode("div", mergeProps({ "key": "state" }, css.attrs(chartStyles.plot, css.bind(chartStyles.plotHeight, () => [plotHeight]))), [body]) : createVNode("div", mergeProps({ "key": "plot" }, mergeAttrs({ sx: [
+				chartStyles.plot,
+				css.bind(chartStyles.plotHeight, () => [plotHeight]),
+				(clickable.value || onPlotClick.value) && chartStyles.plotClickable
+			] }, propsPlot.value, {
+				"aria-hidden": true,
+				ref: (element) => {
+					plotElement = element instanceof HTMLElement ? element : null;
+					plotRef.value?.(plotElement);
+				},
+				onClick: onPlotClick.value
+			})), [plot.value]),
+			!body && footer.value,
+			!isEmpty.value && createVNode("table", mergeAttrs({ sx: visuallyHiddenStyles.hidden }, propsTable.value), [createVNode("thead", null, [createVNode("tr", null, [table.value.columns.map((column) => createVNode("th", {
+				"key": column,
+				"scope": "col"
+			}, [column]))])]), createVNode("tbody", null, [table.value.rows.map((row, position) => createVNode("tr", { "key": position }, [createVNode("th", { "scope": "row" }, [row.header]), row.cells.map((cell, column) => createVNode("td", { "key": column }, [cell]))]))])])
+		]);
+	};
+}, {
+	name: "ChartFrame",
+	props: [
+		"unit",
+		"unitEnd",
+		"height",
+		"legend",
+		"hiddenKeys",
+		"onLegendToggle",
+		"loading",
+		"skeleton",
+		"isEmpty",
+		"empty",
+		"table",
+		"plotRef",
+		"footer",
+		"actions",
+		"plot",
+		"onPlotClick",
+		"clickable",
+		"propsHeader",
+		"propsUnit",
+		"propsLegend",
+		"propsLegendItem",
+		"propsPlot",
+		"propsTable",
+		"exportable",
+		"exportName"
+	]
+});
+//#endregion
+export { ChartFrame, chartDuration, chartStyles, chartTooltip, createChartInstances, uniqueHighlightFilter, useChartValueText, usePlotSeen };
+
+//# sourceMappingURL=frame.js.map

package/dist/charts/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.js","names":["_createVNode","_mergeProps","_vtp_readonlyProp","_vtp_restProps","Menu"],"sources":["../../src/charts/frame.tsx"],"sourcesContent":["/**\n * 各种图表共用的外层结构（XYChart、DonutChart、SankeyChart、ChordChart、FunnelChart、GraphChart）：外层 figure、单位与图例、绘图区（加载中的骨架、空状态、Unovis 画布）、\n * 给读屏的数据表；还有提示框的内容、Unovis 实例表与主题变量。\n *\n *   <ChartFrame unit=\"万元\" legend={items} hiddenKeys={hidden} onLegendToggle={toggle} loading={loading}\n *     isEmpty={rows.length === 0} skeleton={…} table={{ columns, rows }} plotRef={(el) => (plot = el)} />\n *\n * 外观全走主题：Unovis 的样式由 --vis-* 变量控制，这里把它们指到 tokens 上；系列颜色是 CSS 变量，\n * 切换主题、改品牌色都不用重画。绘图区对读屏隐藏，数据由同样内容的表格读出。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowRef, watch, type VNodeChild } from 'vue';\nimport { Download, FileSpreadsheet, ImageDown } from '@lucide/icons';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { IconButton } from '../base/IconButton';\nimport { Menu, MenuItem } from '../overlay/Menu';\nimport { exportChartData, exportChartImage } from './export';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport {\n  borderWidths,\n  colors,\n  durations,\n  fonts,\n  fontSizes,\n  fontWeights,\n  radii,\n  shadows,\n  space,\n  t,\n} from '../config/theme/tokens';\nimport { Empty } from '../feedback/Empty';\nimport type { NumericValue } from '../utils/data/numeric';\nimport { themeTransition } from '../utils/motion/animation';\nimport { useEventListener } from '../utils/dom/event-listener';\nimport { useIntersectionObserver } from '../utils/dom/intersection';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\n\n/** 图例里的一项 */\nexport interface ChartLegendItem {\n  /** 系列（或扇区）的 key */\n  key: string;\n  /** 显示的名字 */\n  label: string;\n  /** CSS 颜色 */\n  color: string;\n}\n\n/** 给读屏的数据表：列名与每一行（行标题加各列的文字） */\nexport interface ChartTable {\n  /** 列名：第一列是行标题的列 */\n  columns: readonly string[];\n  /** 每一行：行标题加其余各列的文字 */\n  rows: readonly { header: string; cells: readonly string[] }[];\n}\n\n/** 各种图表共有的选项与部件属性 */\nexport interface ChartFrameParts {\n  /** 右上角的导出菜单：绘图区存成 PNG 图片、数据表存成 CSV */\n  exportable?: boolean;\n  /** 导出的文件名（不含扩展名）；不写时用图表的名称（aria-label） */\n  exportName?: string;\n  /** 图表上方一行（单位与图例）的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 单位的部件属性 */\n  propsUnit?: PartProps<'span'>;\n  /** 图例的部件属性 */\n  propsLegend?: PartProps<'div', 'role'>;\n  /** 图例每一项（按钮）的部件属性 */\n  propsLegendItem?: Omit<Partial<ButtonBaseProps>, 'aria-pressed' | 'onClick'>;\n  /** 绘图区（Unovis 画在这里）的部件属性 */\n  propsPlot?: PartProps<'div', 'aria-hidden'>;\n  /** 给读屏的数据表的部件属性 */\n  propsTable?: PartProps<'table'>;\n}\n\n/** 图表共用的样式：root（--vis-* 主题变量）、header、unit、legend、swatch、plot、tooltip… */\nexport const chartStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    // 在居中、弹性布局的容器里也占满一行：绘图区按容器宽度自适应\n    width: '100%',\n    minWidth: 0,\n    fontSize: '_sm',\n    // Unovis 的外观变量：坐标轴、网格、十字线、提示框、标签都指到主题 tokens\n    '--vis-font-family': fonts.sans,\n    '--vis-axis-tick-label-font-size': fontSizes.xs,\n    '--vis-axis-tick-label-color': colors.textMuted,\n    '--vis-axis-label-color': colors.textMuted,\n    '--vis-axis-label-font-size': fontSizes.xs,\n    '--vis-axis-label-weight': fontWeights.normal,\n    '--vis-axis-grid-color': colors.borderMuted,\n    '--vis-axis-domain-color': colors.border,\n    '--vis-axis-tick-color': colors.border,\n    '--vis-crosshair-line-stroke-color': colors.borderStrong,\n    '--vis-crosshair-circle-stroke-color': colors.surface,\n    '--vis-tooltip-background-color': colors.surfaceRaised,\n    '--vis-tooltip-border-color': colors.borderMuted,\n    '--vis-tooltip-text-color': colors.text,\n    '--vis-tooltip-border-radius': radii.md,\n    '--vis-tooltip-box-shadow': shadows.md,\n    '--vis-tooltip-padding': `${space.sm} ${space.md}`,\n    '--vis-tooltip-backdrop-filter': 'none',\n    '--vis-tooltip-transition-duration': durations.sm,\n    '--vis-grouped-bar-hover-stroke-width': '0',\n    // 环形图：底色、扇区之间的缝、中间的标签\n    '--vis-donut-background-color': colors.fill,\n    '--vis-donut-segment-stroke-width': borderWidths.md,\n    '--vis-donut-central-label-text-color': colors.text,\n    '--vis-donut-central-label-font-size': fontSizes.xl,\n    '--vis-donut-central-sub-label-text-color': colors.textMuted,\n    '--vis-donut-central-sub-label-font-size': fontSizes.xs,\n    // 目标线：虚线，标签是小号的次要文字（颜色由各条线自己给）\n    '--vis-plotline-label-font-size': fontSizes.xs,\n    '--vis-plotline-label-color': colors.textMuted,\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_md',\n    minHeight: '1.5em',\n  },\n  unit: { color: '_textMuted', fontSize: '_xs' },\n  legend: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end',\n    gap: `${t.space.xs} ${t.space.md}`,\n    marginInlineStart: 'auto',\n  },\n  // 图例项：ButtonBase 给出焦点环与按下的反馈，这里只定文字\n  legendItem: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontSize: '_xs',\n    borderRadius: '_sm',\n  },\n  // 隐藏的系列：划线、色块变空心；不降低不透明度，文字仍要满足对比度\n  legendItemHidden: { textDecorationLine: 'line-through' },\n  swatch: {\n    width: '0.625em',\n    height: '0.625em',\n    borderRadius: '_sm',\n    flexShrink: 0,\n  },\n  swatchColor: (color: string) => ({ backgroundColor: color }),\n  swatchHidden: (color: string) => ({\n    backgroundColor: 'transparent',\n    boxShadow: `inset 0 0 0 ${borderWidths.md} ${color}`,\n  }),\n  // contain: inline-size：画好的 SVG 写死了宽度，不能让它反过来撑住按内容定宽的外层（表格式的滚动区、\n  // 起始对齐的弹性布局）；不然容器变窄时图表还是原来那么宽，Unovis 量不到变化也就不重画\n  plot: { position: 'relative', minWidth: 0, contain: 'inline-size' },\n  // 点了能下钻：手形指针\n  plotClickable: { cursor: 'pointer' },\n  plotHeight: (height: string) => ({ height }),\n  center: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' },\n  tooltip: { display: 'flex', flexDirection: 'column', gap: '_xs', fontSize: '_xs' },\n  tooltipTitle: { fontWeight: '_semibold' },\n  tooltipRow: { display: 'flex', alignItems: 'center', gap: '_sm' },\n  tooltipLabel: { color: '_textMuted', flexGrow: 1 },\n  tooltipValue: {\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: '_medium',\n    marginInlineStart: '_lg',\n  },\n});\n\n/** 提示框的一行 */\nexport interface ChartTooltipItem {\n  /** 系列或数值的名字 */\n  label: string;\n  /** 色块的 CSS 颜色；transparent 时不画色块 */\n  color: string;\n  /** 格式化好的数值 */\n  value: string;\n}\n\n/** 提示框的内容：标题（类目、扇区名）+ 每个系列一行；Unovis 定位，Vue 渲染 */\nexport function chartTooltip(title: string, items: readonly ChartTooltipItem[]) {\n  return (\n    <div {...css.attrs(chartStyles.tooltip)}>\n      {title && <div {...css.attrs(chartStyles.tooltipTitle)}>{title}</div>}\n      {items.map((item) => (\n        <div key={item.label} {...css.attrs(chartStyles.tooltipRow)}>\n          <span {...css.attrs(chartStyles.swatch, chartStyles.swatchColor(item.color))} />\n          <span {...css.attrs(chartStyles.tooltipLabel)}>{item.label}</span>\n          <span {...css.attrs(chartStyles.tooltipValue)}>{item.value}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/**\n * 图表里数值的文字（提示框、读屏数据表、扇区标签）：按 valueFormat 格式化、带上单位；\n * 没有值时是语言包的 emptyValue。setup 里调用，返回的函数在渲染里用\n */\nexport function useChartValueText(read: () => { valueFormat?: NumericFormat; unit?: string }) {\n  const lang = useLang();\n  const format = useFormat();\n  return (value: NumericValue | undefined) => {\n    if (value === undefined) return lang.emptyValue;\n    const { valueFormat, unit } = read();\n    return format.number(value, unit ? { ...valueFormat, suffix: unit } : valueFormat);\n  };\n}\n\n/** 绘图区离视口多近就算看见了（px）：滚到之前先画好，进来时已经是画好的 */\nconst SEEN_MARGIN = 200;\n\n/**\n * 绘图区进入过视口：之前不画，进来之后一直算看见（滚出去不拆掉）。一页很多图表时先画看得见的，\n * 其余的滚到附近再画（地图、网络图绘制很重）。在 setup 里调用，绘制的 effect 里读返回的函数。\n * 挂上时就在视口附近的立即算看见（不等观察器的第一次回调；没有布局的测试环境里框都在原点，也算看见）；\n * 打印前全部画上；没有 IntersectionObserver 的环境当作看见了。\n */\nexport function usePlotSeen(plot: () => HTMLElement | null | undefined): () => boolean {\n  const seen = shallowRef(typeof IntersectionObserver === 'undefined');\n  const near = (element: Element) => {\n    const box = element.getBoundingClientRect();\n    return (\n      box.top < window.innerHeight + SEEN_MARGIN &&\n      box.bottom > -SEEN_MARGIN &&\n      box.left < window.innerWidth + SEEN_MARGIN &&\n      box.right > -SEEN_MARGIN\n    );\n  };\n  watch(\n    plot,\n    (element) => {\n      if (element && !seen.value && near(element)) seen.value = true;\n    },\n    { immediate: true, flush: 'post' },\n  );\n  useIntersectionObserver(\n    () => (seen.value ? null : plot()),\n    (entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) seen.value = true;\n    },\n    () => ({ rootMargin: `${SEEN_MARGIN}px` }),\n  );\n  useEventListener(\n    () => window,\n    'beforeprint',\n    () => (seen.value = true),\n  );\n  return () => seen.value;\n}\n\n/** 主题的 lg 时长（毫秒），减少动态效果时为 0；读不到（元素不在主题范围内）时不要动画 */\nexport function chartDuration(element: Element): number {\n  try {\n    return themeTransition(element, { duration: 'lg' }).duration ?? 0;\n  } catch {\n    return 0;\n  }\n}\n\n/**\n * Unovis 每个容器都插一个 id 固定为 saturate 的滤镜（悬停高亮用），一页多张图时 id 重复；\n * 改成每张图自己的 id，并让引用它的 CSS 变量指过去\n */\nexport function uniqueHighlightFilter(element: HTMLElement, id: string): void {\n  const filter = element.querySelector<SVGFilterElement>('filter#saturate');\n  if (!filter) return;\n  filter.id = id;\n  element.querySelector('svg')?.style.setProperty('--highlight-filter-id', `url(#${id})`);\n}\n\n/**\n * Unovis 实例表：组件、坐标轴、十字线只建一次，之后 setConfig + update（保留实例才有过渡动画）。\n * 容器 destroy 时会连带销毁这些实例：重建容器前 reset，下次取用时重新创建\n */\nexport function createChartInstances() {\n  let instances = new Map<string, unknown>();\n  return {\n    /** 取一个实例：第一次调用时创建 */\n    get: <C,>(key: string, create: () => C): C => {\n      if (!instances.has(key)) instances.set(key, create());\n      return instances.get(key) as C;\n    },\n    /** 容器销毁了：清空，之后重新创建 */\n    reset() {\n      instances = new Map();\n    },\n  };\n}\n\n/** ChartFrame 的属性：未声明的属性落到外层 div（role=\"figure\"）上 */\nexport interface ChartFrameProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 单位：显示在左上方 */\n  unit?: string;\n  /** 第二数值轴的单位：显示在右上方（组合图） */\n  unitEnd?: string;\n  /** 绘图区的高度 */\n  height: number | string;\n  /** 图例的各项；空数组时不显示图例 */\n  legend: readonly ChartLegendItem[];\n  /** 图例里隐藏着的项 */\n  hiddenKeys: readonly string[];\n  /** 点了图例的一项 */\n  onLegendToggle: (key: string) => void;\n  /** 加载中：绘图区显示 skeleton，外层带 aria-busy */\n  loading: boolean;\n  /** 加载中显示的骨架 */\n  skeleton: VNodeChild;\n  /** 没有数据：绘图区显示空状态，没有数据表 */\n  isEmpty: boolean;\n  /** 空状态的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /** 给读屏的数据表 */\n  table: ChartTable;\n  /** 取得绘图区元素（Unovis 画在这里）；加载、空状态之后重新出现时是新的元素 */\n  plotRef?: (element: HTMLElement | null) => void;\n  /** 绘图区里直接渲染的内容（不用 Unovis 的图，如漏斗图）；同样对读屏隐藏 */\n  plot?: VNodeChild;\n  /** 绘图区下面的内容（缩放的滑块、地图的色带） */\n  footer?: VNodeChild;\n  /** 上方一行右端的操作（地图的缩放按钮），在导出菜单前面 */\n  actions?: VNodeChild;\n  /** 点了绘图区（下钻）：写了它时指针是手形 */\n  onPlotClick?: () => void;\n  /** 图里的项能点（手形指针），点击由图自己处理（环形图的扇区、网络图的节点） */\n  clickable?: boolean;\n}\n\n/** 图表的外层结构 */\nexport const ChartFrame = _component(\n  ({\n    unit,\n    unitEnd,\n    height,\n    legend,\n    hiddenKeys,\n    onLegendToggle,\n    loading,\n    skeleton,\n    isEmpty,\n    empty,\n    table,\n    plotRef,\n    footer,\n    actions,\n    plot,\n    onPlotClick,\n    clickable = false,\n    propsHeader,\n    propsUnit,\n    propsLegend,\n    propsLegendItem,\n    propsPlot,\n    propsTable,\n    exportable = false,\n    exportName,\n    ...rest\n  }: ChartFrameProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    let plotElement: HTMLElement | null = null;\n    const fileName = () => exportName ?? rest['aria-label'] ?? lang.chartExportName;\n    /** 导出菜单：图片要绘图区里有 SVG（漏斗图这类直接用 HTML 画的没有） */\n    const exportMenu = () => (\n      <Menu\n        trigger={(props) => (\n          <IconButton\n            {...props}\n            icon={Download}\n            variant=\"ghost\"\n            tone=\"neutral\"\n            size=\"sm\"\n            aria-label={lang.chartExport}\n          />\n        )}\n      >\n        <MenuItem\n          icon={ImageDown}\n          onAction={() => {\n            const svg = plotElement?.querySelector('svg');\n            if (svg) void exportChartImage(svg, fileName());\n          }}\n        >\n          {lang.chartExportImage}\n        </MenuItem>\n        <MenuItem\n          icon={FileSpreadsheet}\n          onAction={() => exportChartData(table, format, fileName())}\n        >\n          {lang.chartExportData}\n        </MenuItem>\n      </Menu>\n    );\n    return () => {\n      const plotHeight = typeof height === 'number' ? `${height}px` : height;\n      const body = loading ? (\n        skeleton\n      ) : isEmpty ? (\n        <div {...css.attrs(chartStyles.center)}>\n          {empty ?? <Empty size=\"sm\" title={lang.chartEmpty} />}\n        </div>\n      ) : null;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: chartStyles.root }, rest, {\n            role: 'figure',\n            'aria-busy': loading || undefined,\n          })}\n        >\n          {(unit || unitEnd || legend.length > 0 || exportable || actions) && (\n            <div {...mergeAttrs<'div'>({ sx: chartStyles.header }, propsHeader)}>\n              {unit && (\n                <span {...mergeAttrs<'span'>({ sx: chartStyles.unit }, propsUnit)}>{unit}</span>\n              )}\n              {legend.length > 0 && (\n                <div\n                  {...mergeAttrs<'div'>({ sx: chartStyles.legend }, propsLegend, { role: 'group' })}\n                >\n                  {legend.map((item) => {\n                    const off = hiddenKeys.includes(item.key);\n                    return (\n                      <ButtonBase\n                        key={item.key}\n                        {...mergePartProps<ButtonBaseProps>(\n                          {\n                            sx: [chartStyles.legendItem, off && chartStyles.legendItemHidden],\n                            ripple: false,\n                          },\n                          propsLegendItem,\n                          { 'aria-pressed': !off, onClick: () => onLegendToggle(item.key) },\n                        )}\n                      >\n                        <span\n                          {...css.attrs(\n                            chartStyles.swatch,\n                            off\n                              ? chartStyles.swatchHidden(item.color)\n                              : chartStyles.swatchColor(item.color),\n                          )}\n                        />\n                        {item.label}\n                      </ButtonBase>\n                    );\n                  })}\n                </div>\n              )}\n              {unitEnd && (\n                <span {...mergeAttrs<'span'>({ sx: chartStyles.unit }, propsUnit)}>{unitEnd}</span>\n              )}\n              {!isEmpty && !loading && actions}\n              {exportable && !isEmpty && !loading && exportMenu()}\n            </div>\n          )}\n          {/* key 不同：两种状态不复用同一个 div，否则 Unovis 画进去的 svg 会留在骨架、空状态里 */}\n          {body ? (\n            <div key=\"state\" {...css.attrs(chartStyles.plot, chartStyles.plotHeight(plotHeight))}>\n              {body}\n            </div>\n          ) : (\n            <div\n              key=\"plot\"\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    chartStyles.plot,\n                    chartStyles.plotHeight(plotHeight),\n                    (clickable || onPlotClick) && chartStyles.plotClickable,\n                  ],\n                },\n                propsPlot,\n                {\n                  'aria-hidden': true,\n                  ref: (element: unknown) => {\n                    plotElement = element instanceof HTMLElement ? element : null;\n                    plotRef?.(plotElement);\n                  },\n                  onClick: onPlotClick,\n                },\n              )}\n            >\n              {plot}\n            </div>\n          )}\n          {!body && footer}\n          {!isEmpty && (\n            <table {...mergeAttrs<'table'>({ sx: visuallyHiddenStyles.hidden }, propsTable)}>\n              <thead>\n                <tr>\n                  {table.columns.map((column) => (\n                    <th key={column} scope=\"col\">\n                      {column}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody>\n                {table.rows.map((row, position) => (\n                  <tr key={position}>\n                    <th scope=\"row\">{row.header}</th>\n                    {row.cells.map((cell, column) => (\n                      <td key={column}>{cell}</td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/charts/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 图表（子路径 `@zerodep-dev/vue-tsx-pro-ui/charts`；@unovis/ts 是可选的 peer 依赖，用到图表才安装）：
+ *
+ *   import { BarChart, LineChart } from '@zerodep-dev/vue-tsx-pro-ui/charts';
+ *
+ * 主入口不导入图表，没用到图表的应用不会打包 Unovis。
+ */
+export { AreaChart, type AreaChartProps } from './AreaChart';
+export { BarChart, type BarChartOrientations, type BarChartProps } from './BarChart';
+export { ChordChart, chordChartStyles, type ChordChartProps } from './ChordChart';
+export { ComboChart, type ComboChartProps, type ComboSeries } from './ComboChart';
+export { DonutChart, donutChartStyles, type DonutChartProps } from './DonutChart';
+export { FunnelChart, funnelChartDynamicStyles, funnelChartStyles, type FunnelChartProps, type FunnelStage, } from './FunnelChart';
+export { GraphChart, graphChartStyles, type GraphChartGroup, type GraphChartLayouts, type GraphChartLink, type GraphChartNode, type GraphChartProps, type GraphChartShapes, } from './GraphChart';
+export { CURVES, LineChart, type LineChartProps, type LineCurves, type LineDots, } from './LineChart';
+export { MapChart, mapChartStyles, simplifyTopology, topologyBounds, type MapArea, type MapChartProps, type MapGeoProjection, type MapLink, type MapPoint, type MapProjections, } from './MapChart';
+export { RadarChart, radarChartStyles, type RadarChartProps } from './RadarChart';
+export { SankeyChart, sankeyChartStyles, type SankeyAligns, type SankeyChartProps, } from './SankeyChart';
+export { ScatterChart, type ScatterChartProps } from './ScatterChart';
+export { TimelineChart, type TimelineChartItem, type TimelineChartMarker, type TimelineChartProps, type TimelineChartSeries, type TimelineTime, } from './TimelineChart';
+export { TreemapChart, treemapChartStyles, type TreemapChartProps } from './TreemapChart';
+export { WaterfallChart, waterfallRows, type WaterfallChartProps, type WaterfallRow, type WaterfallStep, } from './WaterfallChart';
+export { XYChart, xyChartStyles, type ChartAnnotation, type ChartBand, type ChartSecondaryAxis, type ChartSkeletons, type ChartTarget, type XYChartContext, type XYChartKind, type XYChartProps, } from './XYChart';
+export { alignedTicks, niceStep, type AlignedAxes, type AxisTicks } from './axis-ticks';
+export { exportChartData, exportChartImage, serializeChartSvg } from './export';
+export { flowData, resolveFlowNodes, type FlowLink, type FlowNode, type ResolvedFlowNode, } from './flow';
+export { chartDuration, ChartFrame, chartStyles, chartTooltip, createChartInstances, uniqueHighlightFilter, useChartValueText, usePlotSeen, type ChartFrameParts, type ChartFrameProps, type ChartLegendItem, type ChartTable, type ChartTooltipItem, } from './frame';
+export { placeLabels, rectsOverlap, type LabelAnchor, type LabelLayoutOptions, type LabelPlacement, type LabelRect, } from './label-layout';
+export { resolveColor, resolveSeries, seriesNumber, seriesValue, type ChartColor, type ChartPaletteColor, type ChartSeries, type ChartToneColor, type NumericKey, type ResolvedSeries, } from './series';
+export { useSingleChart, type SingleChart, type SingleChartBuild, type SingleChartState, } from './single';

package/dist/charts/index.js

@@ -0,0 +1,24 @@
+import { alignedTicks, niceStep } from "./axis-ticks.js";
+import { exportChartData, exportChartImage, serializeChartSvg } from "./export.js";
+import { ChartFrame, chartDuration, chartStyles, chartTooltip, createChartInstances, uniqueHighlightFilter, useChartValueText, usePlotSeen } from "./frame.js";
+import { resolveColor, resolveSeries, seriesNumber, seriesValue } from "./series.js";
+import { XYChart, xyChartStyles } from "./XYChart.js";
+import { CURVES, LineChart } from "./LineChart.js";
+import { AreaChart } from "./AreaChart.js";
+import { BarChart } from "./BarChart.js";
+import { flowData, resolveFlowNodes } from "./flow.js";
+import { useSingleChart } from "./single.js";
+import { ChordChart, chordChartStyles } from "./ChordChart.js";
+import { ComboChart } from "./ComboChart.js";
+import { DonutChart, donutChartStyles } from "./DonutChart.js";
+import { FunnelChart, funnelChartDynamicStyles, funnelChartStyles } from "./FunnelChart.js";
+import { GraphChart, graphChartStyles } from "./GraphChart.js";
+import { placeLabels, rectsOverlap } from "./label-layout.js";
+import { MapChart, mapChartStyles, simplifyTopology, topologyBounds } from "./MapChart.js";
+import { RadarChart, radarChartStyles } from "./RadarChart.js";
+import { SankeyChart, sankeyChartStyles } from "./SankeyChart.js";
+import { ScatterChart } from "./ScatterChart.js";
+import { TimelineChart } from "./TimelineChart.js";
+import { TreemapChart, treemapChartStyles } from "./TreemapChart.js";
+import { WaterfallChart, waterfallRows } from "./WaterfallChart.js";
+export { AreaChart, BarChart, CURVES, ChartFrame, ChordChart, ComboChart, DonutChart, FunnelChart, GraphChart, LineChart, MapChart, RadarChart, SankeyChart, ScatterChart, TimelineChart, TreemapChart, WaterfallChart, XYChart, alignedTicks, chartDuration, chartStyles, chartTooltip, chordChartStyles, createChartInstances, donutChartStyles, exportChartData, exportChartImage, flowData, funnelChartDynamicStyles, funnelChartStyles, graphChartStyles, mapChartStyles, niceStep, placeLabels, radarChartStyles, rectsOverlap, resolveColor, resolveFlowNodes, resolveSeries, sankeyChartStyles, serializeChartSvg, seriesNumber, seriesValue, simplifyTopology, topologyBounds, treemapChartStyles, uniqueHighlightFilter, useChartValueText, usePlotSeen, useSingleChart, waterfallRows, xyChartStyles };

package/dist/charts/label-layout.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 点标注的避让：给每个锚点（地图上的地点）找一个不压住别的标签、标记的位置。
+ * 参照制图学的点标注（Imhof 的方位优先级）与 ECharts labelLayout 的 moveOverlap、Mapbox 的 variable anchor：
+ * 按优先级贪心放置，先试紧挨着标记的 8 个方位，都放不下时一圈圈往外退（默认两圈）、画引线连回标记，仍放不下就不显示。
+ * 坐标都是屏幕像素。
+ *
+ *   const placements = placeLabels(anchors, { bounds: { x: 0, y: 0, width, height }, soft: areaLabelBoxes });
+ *   placements[i]   // null 时不显示；否则 box 是标签的矩形，leader 时画引线
+ */
+/** 矩形：左上角与宽高 */
+export interface LabelRect {
+    /** 左 */
+    x: number;
+    /** 上 */
+    y: number;
+    /** 宽 */
+    width: number;
+    /** 高 */
+    height: number;
+}
+/** 要标注的点 */
+export interface LabelAnchor {
+    /** 中心横坐标 */
+    x: number;
+    /** 中心纵坐标 */
+    y: number;
+    /** 标记的半径：标签放在它外面 */
+    radius: number;
+    /** 标签的宽 */
+    width: number;
+    /** 标签的高 */
+    height: number;
+    /** 优先级：大的先放（地图按数值），默认 0；相同时按原来的顺序 */
+    priority?: number;
+}
+/** 一个标签放在哪 */
+export interface LabelPlacement {
+    /** 标签的矩形 */
+    box: LabelRect;
+    /** 退到了外一圈：画一条引线连回标记 */
+    leader: boolean;
+}
+/** placeLabels 的选项 */
+export interface LabelLayoutOptions {
+    /** 标签要落在这个范围里（绘图区）；不给时不限 */
+    bounds?: LabelRect;
+    /** 尽量不压住的矩形（地图上的区域名）：都避不开时可以压住 */
+    soft?: readonly LabelRect[];
+    /** 标签与标记的间距，默认 3 */
+    gap?: number;
+    /** 往外退时每圈远多少，默认 16 */
+    ring?: number;
+    /** 往外退几圈，默认 2 */
+    rings?: number;
+}
+/** 两个矩形相交（边贴边不算） */
+export declare function rectsOverlap(a: LabelRect, b: LabelRect): boolean;
+/** 给每个锚点找位置（见文件开头）；返回与 anchors 一一对应 */
+export declare function placeLabels(anchors: readonly LabelAnchor[], { bounds, soft, gap, ring, rings }?: LabelLayoutOptions): (LabelPlacement | null)[];

package/dist/charts/label-layout.js

@@ -0,0 +1,64 @@
+//#region src/charts/label-layout.ts
+var directions = [
+	[0, 1],
+	[0, -1],
+	[1, 0],
+	[-1, 0],
+	[1, 1],
+	[1, -1],
+	[-1, 1],
+	[-1, -1]
+];
+/** 两个矩形相交（边贴边不算） */
+function rectsOverlap(a, b) {
+	return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+}
+var inside = (box, bounds) => box.x >= bounds.x && box.y >= bounds.y && box.x + box.width <= bounds.x + bounds.width && box.y + box.height <= bounds.y + bounds.height;
+/** 锚点在某个方位、某个距离上的标签矩形：标签靠向标记的那条边（或那个角）离标记 distance */
+function boxAt(anchor, [dx, dy], distance) {
+	const step = dx && dy ? distance * Math.SQRT1_2 : distance;
+	return {
+		x: anchor.x + dx * step - (dx === 1 ? 0 : dx === -1 ? anchor.width : anchor.width / 2),
+		y: anchor.y + dy * step - (dy === 1 ? 0 : dy === -1 ? anchor.height : anchor.height / 2),
+		width: anchor.width,
+		height: anchor.height
+	};
+}
+/** 给每个锚点找位置（见文件开头）；返回与 anchors 一一对应 */
+function placeLabels(anchors, { bounds, soft = [], gap = 3, ring = 16, rings = 2 } = {}) {
+	const markers = anchors.map((anchor) => ({
+		x: anchor.x - anchor.radius,
+		y: anchor.y - anchor.radius,
+		width: anchor.radius * 2,
+		height: anchor.radius * 2
+	}));
+	const placed = [];
+	const result = anchors.map(() => null);
+	const order = anchors.map((anchor, index) => ({
+		index,
+		priority: anchor.priority ?? 0
+	})).sort((a, b) => b.priority - a.priority || a.index - b.index);
+	const free = (box) => (!bounds || inside(box, bounds)) && !markers.some((marker) => rectsOverlap(box, marker)) && !placed.some((other) => rectsOverlap(box, other));
+	for (const { index } of order) {
+		const anchor = anchors[index];
+		for (let level = 0; level <= rings; level++) {
+			const distance = anchor.radius + gap + ring * level;
+			const leader = level > 0;
+			const candidates = directions.map((direction) => boxAt(anchor, direction, distance));
+			const box = candidates.find((item) => free(item) && !soft.some((rect) => rectsOverlap(item, rect))) ?? candidates.find(free);
+			if (box) {
+				placed.push(box);
+				result[index] = {
+					box,
+					leader
+				};
+				break;
+			}
+		}
+	}
+	return result;
+}
+//#endregion
+export { placeLabels, rectsOverlap };
+
+//# sourceMappingURL=label-layout.js.map

package/dist/charts/label-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-layout.js","names":[],"sources":["../../src/charts/label-layout.ts"],"sourcesContent":["/**\n * 点标注的避让：给每个锚点（地图上的地点）找一个不压住别的标签、标记的位置。\n * 参照制图学的点标注（Imhof 的方位优先级）与 ECharts labelLayout 的 moveOverlap、Mapbox 的 variable anchor：\n * 按优先级贪心放置，先试紧挨着标记的 8 个方位，都放不下时一圈圈往外退（默认两圈）、画引线连回标记，仍放不下就不显示。\n * 坐标都是屏幕像素。\n *\n *   const placements = placeLabels(anchors, { bounds: { x: 0, y: 0, width, height }, soft: areaLabelBoxes });\n *   placements[i]   // null 时不显示；否则 box 是标签的矩形，leader 时画引线\n */\n\n/** 矩形：左上角与宽高 */\nexport interface LabelRect {\n  /** 左 */\n  x: number;\n  /** 上 */\n  y: number;\n  /** 宽 */\n  width: number;\n  /** 高 */\n  height: number;\n}\n\n/** 要标注的点 */\nexport interface LabelAnchor {\n  /** 中心横坐标 */\n  x: number;\n  /** 中心纵坐标 */\n  y: number;\n  /** 标记的半径：标签放在它外面 */\n  radius: number;\n  /** 标签的宽 */\n  width: number;\n  /** 标签的高 */\n  height: number;\n  /** 优先级：大的先放（地图按数值），默认 0；相同时按原来的顺序 */\n  priority?: number;\n}\n\n/** 一个标签放在哪 */\nexport interface LabelPlacement {\n  /** 标签的矩形 */\n  box: LabelRect;\n  /** 退到了外一圈：画一条引线连回标记 */\n  leader: boolean;\n}\n\n/** placeLabels 的选项 */\nexport interface LabelLayoutOptions {\n  /** 标签要落在这个范围里（绘图区）；不给时不限 */\n  bounds?: LabelRect;\n  /** 尽量不压住的矩形（地图上的区域名）：都避不开时可以压住 */\n  soft?: readonly LabelRect[];\n  /** 标签与标记的间距，默认 3 */\n  gap?: number;\n  /** 往外退时每圈远多少，默认 16 */\n  ring?: number;\n  /** 往外退几圈，默认 2 */\n  rings?: number;\n}\n\n// 方位的优先级：下（与 Unovis 的默认一致）、上、右、左，然后四个斜角\nconst directions: readonly (readonly [number, number])[] = [\n  [0, 1],\n  [0, -1],\n  [1, 0],\n  [-1, 0],\n  [1, 1],\n  [1, -1],\n  [-1, 1],\n  [-1, -1],\n];\n\n/** 两个矩形相交（边贴边不算） */\nexport function rectsOverlap(a: LabelRect, b: LabelRect): boolean {\n  return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;\n}\n\nconst inside = (box: LabelRect, bounds: LabelRect) =>\n  box.x >= bounds.x &&\n  box.y >= bounds.y &&\n  box.x + box.width <= bounds.x + bounds.width &&\n  box.y + box.height <= bounds.y + bounds.height;\n\n/** 锚点在某个方位、某个距离上的标签矩形：标签靠向标记的那条边（或那个角）离标记 distance */\nfunction boxAt(anchor: LabelAnchor, [dx, dy]: readonly [number, number], distance: number) {\n  // 斜角按 45° 摆，两个方向各走 distance / √2\n  const step = dx && dy ? distance * Math.SQRT1_2 : distance;\n  const x = anchor.x + dx * step - (dx === 1 ? 0 : dx === -1 ? anchor.width : anchor.width / 2);\n  const y = anchor.y + dy * step - (dy === 1 ? 0 : dy === -1 ? anchor.height : anchor.height / 2);\n  return { x, y, width: anchor.width, height: anchor.height };\n}\n\n/** 给每个锚点找位置（见文件开头）；返回与 anchors 一一对应 */\nexport function placeLabels(\n  anchors: readonly LabelAnchor[],\n  { bounds, soft = [], gap = 3, ring = 16, rings = 2 }: LabelLayoutOptions = {},\n): (LabelPlacement | null)[] {\n  const markers = anchors.map((anchor) => ({\n    x: anchor.x - anchor.radius,\n    y: anchor.y - anchor.radius,\n    width: anchor.radius * 2,\n    height: anchor.radius * 2,\n  }));\n  const placed: LabelRect[] = [];\n  const result: (LabelPlacement | null)[] = anchors.map(() => null);\n  const order = anchors\n    .map((anchor, index) => ({ index, priority: anchor.priority ?? 0 }))\n    .sort((a, b) => b.priority - a.priority || a.index - b.index);\n\n  const free = (box: LabelRect) =>\n    (!bounds || inside(box, bounds)) &&\n    !markers.some((marker) => rectsOverlap(box, marker)) &&\n    !placed.some((other) => rectsOverlap(box, other));\n\n  for (const { index } of order) {\n    const anchor = anchors[index]!;\n    // 紧挨着一圈，再一圈圈往外；每圈先找不压区域名的，再退而求其次\n    for (let level = 0; level <= rings; level++) {\n      const distance = anchor.radius + gap + ring * level;\n      const leader = level > 0;\n      const candidates = directions.map((direction) => boxAt(anchor, direction, distance));\n      const box =\n        candidates.find((item) => free(item) && !soft.some((rect) => rectsOverlap(item, rect))) ??\n        candidates.find(free);\n      if (box) {\n        placed.push(box);\n        result[index] = { box, leader };\n        break;\n      }\n    }\n  }\n  return result;\n}\n"],"mappings":";AA6DA,IAAM,aAAqD;CACzD,CAAC,GAAG,CAAC;CACL,CAAC,GAAG,EAAE;CACN,CAAC,GAAG,CAAC;CACL,CAAC,IAAI,CAAC;CACN,CAAC,GAAG,CAAC;CACL,CAAC,GAAG,EAAE;CACN,CAAC,IAAI,CAAC;CACN,CAAC,IAAI,EAAE;AACT;;AAGA,SAAgB,aAAa,GAAc,GAAuB;CAChE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE;AAC7F;AAEA,IAAM,UAAU,KAAgB,WAC9B,IAAI,KAAK,OAAO,KAChB,IAAI,KAAK,OAAO,KAChB,IAAI,IAAI,IAAI,SAAS,OAAO,IAAI,OAAO,SACvC,IAAI,IAAI,IAAI,UAAU,OAAO,IAAI,OAAO;;AAG1C,SAAS,MAAM,QAAqB,CAAC,IAAI,KAAgC,UAAkB;CAEzF,MAAM,OAAO,MAAM,KAAK,WAAW,KAAK,UAAU;CAGlD,OAAO;EAAE,GAFC,OAAO,IAAI,KAAK,QAAQ,OAAO,IAAI,IAAI,OAAO,KAAK,OAAO,QAAQ,OAAO,QAAQ;EAE/E,GADF,OAAO,IAAI,KAAK,QAAQ,OAAO,IAAI,IAAI,OAAO,KAAK,OAAO,SAAS,OAAO,SAAS;EAC9E,OAAO,OAAO;EAAO,QAAQ,OAAO;CAAO;AAC5D;;AAGA,SAAgB,YACd,SACA,EAAE,QAAQ,OAAO,CAAC,GAAG,MAAM,GAAG,OAAO,IAAI,QAAQ,MAA0B,CAAC,GACjD;CAC3B,MAAM,UAAU,QAAQ,KAAK,YAAY;EACvC,GAAG,OAAO,IAAI,OAAO;EACrB,GAAG,OAAO,IAAI,OAAO;EACrB,OAAO,OAAO,SAAS;EACvB,QAAQ,OAAO,SAAS;CAC1B,EAAE;CACF,MAAM,SAAsB,CAAC;CAC7B,MAAM,SAAoC,QAAQ,UAAU,IAAI;CAChE,MAAM,QAAQ,QACX,KAAK,QAAQ,WAAW;EAAE;EAAO,UAAU,OAAO,YAAY;CAAE,EAAE,CAAC,CACnE,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK;CAE9D,MAAM,QAAQ,SACX,CAAC,UAAU,OAAO,KAAK,MAAM,MAC9B,CAAC,QAAQ,MAAM,WAAW,aAAa,KAAK,MAAM,CAAC,KACnD,CAAC,OAAO,MAAM,UAAU,aAAa,KAAK,KAAK,CAAC;CAElD,KAAK,MAAM,EAAE,WAAW,OAAO;EAC7B,MAAM,SAAS,QAAQ;EAEvB,KAAK,IAAI,QAAQ,GAAG,SAAS,OAAO,SAAS;GAC3C,MAAM,WAAW,OAAO,SAAS,MAAM,OAAO;GAC9C,MAAM,SAAS,QAAQ;GACvB,MAAM,aAAa,WAAW,KAAK,cAAc,MAAM,QAAQ,WAAW,QAAQ,CAAC;GACnF,MAAM,MACJ,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,CAAC,KAAK,MAAM,SAAS,aAAa,MAAM,IAAI,CAAC,CAAC,KACtF,WAAW,KAAK,IAAI;GACtB,IAAI,KAAK;IACP,OAAO,KAAK,GAAG;IACf,OAAO,SAAS;KAAE;KAAK;IAAO;IAC9B;GACF;EACF;CACF;CACA,OAAO;AACT"}