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

package/dist/charts/SankeyChart.js

@@ -1,52 +1,52 @@
-import { colors, fontSizes } from "../config/theme/tokens.js";
+import { svgNumber } from "../utils/data/number.js";
+import { t } from "../config/theme/tokens.js";
 import { useLang } from "../config/context.js";
 import { useFormat } from "../config/lang/format.js";
 import { Skeleton } from "../feedback/Skeleton.js";
+import { ChartTooltipBox, chartSvgStyles, pointerIn, usePlotArea } from "./plot.js";
+import { horizontalLinkPath } from "./shape.js";
 import { ChartFrame, chartTooltip, useChartValueText } from "./frame.js";
 import { flowData, resolveFlowNodes } from "./flow.js";
-import { useSingleChart } from "./single.js";
+import { sankeyLayout } from "./layout/sankey.js";
 import { computed, createVNode, shallowRef } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
-import { FitMode, Sankey, SankeyNodeAlign } from "@unovis/ts";
 //#region src/charts/SankeyChart.tsx
-/**
-* 桑基图：节点之间的流量画成粗细不同的带子，看量从哪来、到哪去、在哪流失（转化漏斗、预算分配、能源流向）。
-*
-*   <SankeyChart aria-label="注册转化" nodes={steps} links={flows} unit="人" />
-*
-* 节点是 { id, label?, color? }，流向是 { source, target, value }（value 可以是 Decimal、bigint，要大于 0；不能成环）。
-* 带子取起点节点的颜色；悬停带子出“起点 → 终点”的流量，悬停节点出它的总量。节点旁写名字与总量。
-* 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。
-*/
 /** 节点怎样排：justify 两端对齐（默认），left、right 靠向一侧，center 居中 */
 /** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
-/** SankeyChart 的样式：root（--vis-sankey-* 主题变量）、skeleton */
+/** SankeyChart 的样式：节点、带子、名字、骨架 */
 var sankeyChartStyles = css.create({
-	root: {
-		"--vis-sankey-node-label-color": colors.text,
-		"--vis-sankey-node-label-font-size": fontSizes.xs,
-		"--vis-sankey-node-label-font-weight": "500",
-		"--vis-sankey-node-label-background-fill-color": colors.surface,
-		"--vis-sankey-node-label-background-stroke-color": colors.borderMuted,
-		"--vis-sankey-node-sublabel-font-size": fontSizes.xs,
-		"--vis-sankey-link-opacity": "0.35",
-		"--vis-sankey-link-hover-opacity": "0.6"
-	},
 	skeleton: {
 		display: "block",
 		width: "100%",
 		height: "100%"
+	},
+	node: {
+		stroke: "_surface",
+		strokeWidth: 1
+	},
+	link: {
+		fill: "none",
+		strokeOpacity: .35,
+		transition: `stroke-opacity ${t.durations.sm} ${t.easings.standard}`
+	},
+	linkActive: { strokeOpacity: .6 },
+	linkFaded: { strokeOpacity: .12 },
+	name: {
+		fill: "_text",
+		fontSize: "_xs",
+		fontWeight: "_medium"
+	},
+	value: {
+		fill: "_textMuted",
+		fontSize: "_xs"
 	}
 });
-var ALIGNS = {
-	justify: SankeyNodeAlign.Justify,
-	left: SankeyNodeAlign.Left,
-	right: SankeyNodeAlign.Right,
-	center: SankeyNodeAlign.Center
-};
-/** 交给 Unovis 的节点、流向 */
-/** Unovis 布局后：流向的起点、终点换成了节点对象，节点带上了总量 value */
+/** 节点的宽、同一列里节点的间距、上下留的空（px） */
+var NODE_WIDTH = 12;
+var NODE_PADDING = 16;
+var MARGIN = 8;
+/** 悬停的是节点还是带子 */
 /** 桑基图 */
 var SankeyChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
@@ -59,7 +59,6 @@ var SankeyChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const tooltip = readonlyProp(_props, "tooltip", true);
 	const loading = readonlyProp(_props, "loading", false);
 	const empty = readonlyProp(_props, "empty");
-	const sx = readonlyProp(_props, "sx");
 	const rest = restProps(_props, _ctx, true);
 	const lang = useLang();
 	const format = useFormat();
@@ -69,53 +68,138 @@ var SankeyChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		unit: unit.value
 	}));
 	const labelOf = (id) => resolved.value.get(id)?.label ?? id;
-	let plot = shallowRef(null);
-	const chart = useSingleChart(() => ({
-		element: plot.value,
-		ready: !loading.value && nodes.value.length > 0,
-		tooltip: tooltip.value,
-		build: (instance) => {
-			const sankey = instance("sankey", () => new Sankey({ linkValue: (link) => link.amount }));
-			sankey.setConfig({
-				linkValue: (link) => link.amount,
-				nodeColor: (node) => node.color,
-				linkColor: (link) => link.source.color,
-				nodeAlign: ALIGNS[align.value],
-				label: (node) => node.label,
-				subLabel: (node) => node.value === void 0 ? "" : valueText(node.value),
-				nodePadding: 16,
-				nodeWidth: 12,
-				labelMaxWidth: 120,
-				labelMaxWidthTakeAvailableSpace: true,
-				labelFit: FitMode.Wrap,
-				labelBackground: true,
-				enableZoom: false
-			});
+	const area = usePlotArea();
+	let hovered = shallowRef(null);
+	const layout = computed(() => {
+		const data = flowData(resolved.value, links.value);
+		return {
+			...sankeyLayout(data.nodes.map((node) => node.id), data.links.map((link) => ({
+				source: link.source,
+				target: link.target,
+				value: link.amount
+			})), {
+				width: area.width,
+				height: Math.max(0, area.height - 16),
+				nodeWidth: NODE_WIDTH,
+				nodePadding: NODE_PADDING,
+				align: align.value
+			}),
+			flows: data.links
+		};
+	});
+	function onPointermove(event) {
+		const target = event.target.closest?.("[data-node],[data-link]");
+		if (!target) {
+			hovered.value = null;
+			return;
+		}
+		const { x, y } = pointerIn(event, event.currentTarget);
+		const node = target.getAttribute("data-node");
+		hovered.value = node === null ? {
+			kind: "link",
+			index: Number(target.getAttribute("data-link")),
+			x,
+			y
+		} : {
+			kind: "node",
+			index: Number(node),
+			x,
+			y
+		};
+	}
+	/** 带子与悬停的节点相连（悬停带子时只有它自己）：true 突出、false 变淡、undefined 没有悬停 */
+	const linkState = (index) => {
+		const current = hovered.value;
+		if (!current) return void 0;
+		if (current.kind === "link") return current.index === index;
+		const link = layout.value.links[index];
+		const node = layout.value.nodes[current.index];
+		return link.source === node || link.target === node;
+	};
+	function renderPlot() {
+		const { width } = area;
+		return createVNode("svg", mergeJsxProps({
+			"width": width,
+			"height": area.height
+		}, css.attrs(chartSvgStyles.svg), {
+			"onPointermove": onPointermove,
+			"onPointerleave": _cache[0] || (_cache[0] = () => hovered.value = null)
+		}), [createVNode("g", mergeJsxProps({ "transform": `translate(0,${MARGIN})` }, css.attrs(chartSvgStyles.fadeIn)), [createVNode("g", { "data-part": "links" }, [layout.value.links.map((link, index) => {
+			const state = linkState(index);
+			return createVNode("path", mergeJsxProps({
+				"key": index,
+				"data-part": "link",
+				"data-link": index,
+				"d": horizontalLinkPath(link.source.x1, link.y0, link.target.x0, link.y1),
+				"stroke-width": svgNumber(Math.max(1, link.width))
+			}, css.attrs(sankeyChartStyles.link, chartSvgStyles.stroke(resolved.value.get(link.source.id).color), state === true && sankeyChartStyles.linkActive, state === false && sankeyChartStyles.linkFaded)), null);
+		})]), layout.value.nodes.map((node, index) => {
+			const info = resolved.value.get(node.id);
+			const right = node.x0 < width / 2;
+			const middle = (node.y0 + node.y1) / 2;
+			const x = right ? node.x1 + 6 : node.x0 - 6;
+			const anchor = right ? "start" : "end";
+			return createVNode("g", { "key": node.id }, [
+				createVNode("rect", mergeJsxProps({
+					"data-part": "node",
+					"data-node": index,
+					"x": svgNumber(node.x0),
+					"y": svgNumber(node.y0),
+					"width": NODE_WIDTH,
+					"height": svgNumber(Math.max(1, node.y1 - node.y0)),
+					"rx": 2
+				}, css.attrs(sankeyChartStyles.node, chartSvgStyles.fill(info.color))), null),
+				createVNode("text", mergeJsxProps({
+					"x": x,
+					"y": svgNumber(middle - 7),
+					"text-anchor": anchor,
+					"dominant-baseline": "central"
+				}, css.attrs(sankeyChartStyles.name, chartSvgStyles.halo, chartSvgStyles.noPointer)), [info.label]),
+				createVNode("text", mergeJsxProps({
+					"x": x,
+					"y": svgNumber(middle + 8),
+					"text-anchor": anchor,
+					"dominant-baseline": "central"
+				}, css.attrs(sankeyChartStyles.value, chartSvgStyles.halo, chartSvgStyles.noPointer)), [valueText(node.value)])
+			]);
+		})])]);
+	}
+	const tip = () => {
+		const current = hovered.value;
+		if (!tooltip.value || !current) return null;
+		if (current.kind === "node") {
+			const node = layout.value.nodes[current.index];
+			const info = node && resolved.value.get(node.id);
+			if (!node || !info) return null;
 			return {
-				component: sankey,
-				data: flowData(resolved.value, links.value),
-				triggers: {
-					[Sankey.selectors.link]: (link) => chart.tooltip(chartTooltip(lang.chartFlowLabel(link.source.label, link.target.label), [{
-						label: lang.chartValue,
-						color: link.source.color,
-						value: valueText(link.value)
-					}])),
-					[Sankey.selectors.node]: (node) => chart.tooltip(chartTooltip(node.label, [{
-						label: lang.chartTotal,
-						color: node.color,
-						value: valueText(node.value)
-					}]))
-				}
+				x: current.x,
+				y: current.y,
+				content: chartTooltip(info.label, [{
+					label: lang.chartTotal,
+					color: info.color,
+					value: valueText(node.value)
+				}])
 			};
 		}
-	}));
+		const link = layout.value.links[current.index];
+		if (!link) return null;
+		const source = resolved.value.get(link.source.id);
+		return {
+			x: current.x,
+			y: current.y,
+			content: chartTooltip(lang.chartFlowLabel(source.label, labelOf(link.target.id)), [{
+				label: lang.chartValue,
+				color: source.color,
+				value: valueText(layout.value.flows[link.index].value)
+			}])
+		};
+	};
 	return () => createVNode(ChartFrame, mergeJsxProps(rest, {
-		"sx": [sankeyChartStyles.root, sx.value],
 		"unit": unit.value,
 		"height": height.value,
-		"legend": _cache[0] || (_cache[0] = []),
-		"hiddenKeys": _cache[1] || (_cache[1] = []),
-		"onLegendToggle": _cache[2] || (_cache[2] = () => {}),
+		"legend": _cache[1] || (_cache[1] = []),
+		"hiddenKeys": _cache[2] || (_cache[2] = []),
+		"onLegendToggle": _cache[3] || (_cache[3] = () => {}),
 		"loading": loading.value,
 		"skeleton": createVNode(Skeleton, { "sx": sankeyChartStyles.skeleton }, null),
 		"isEmpty": nodes.value.length === 0,
@@ -127,7 +211,12 @@ var SankeyChart = /*#__PURE__*/ _component((_props, _ctx) => {
 				cells: [format.number(link.value, valueFormat.value)]
 			}))
 		},
-		"plotRef": _cache[3] || (_cache[3] = (element) => plot.value = element)
+		"plotRef": area.ref,
+		"plot": area.ready ? [renderPlot(), createVNode(ChartTooltipBox, {
+			"key": "tooltip",
+			"tip": tip(),
+			"width": area.width
+		}, null)] : null
 	}), null);
 }, {
 	name: "SankeyChart",
@@ -140,8 +229,7 @@ var SankeyChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		"align",
 		"tooltip",
 		"loading",
-		"empty",
-		"sx"
+		"empty"
 	]
 });
 //#endregion

package/dist/charts/SankeyChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/SankeyChart.tsx"],"sourcesContent":["/**\n * 桑基图：节点之间的流量画成粗细不同的带子，看量从哪来、到哪去、在哪流失（转化漏斗、预算分配、能源流向）。\n *\n *   <SankeyChart aria-label=\"注册转化\" nodes={steps} links={flows} unit=\"人\" />\n *\n * 节点是 { id, label?, color? }，流向是 { source, target, value }（value 可以是 Decimal、bigint，要大于 0；不能成环）。\n * 带子取起点节点的颜色；悬停带子出“起点 → 终点”的流量，悬停节点出它的总量。节点旁写名字与总量。\n * 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。\n */\nimport { FitMode, Sankey, SankeyNodeAlign } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { colors, fontSizes } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport type { PartProps } from '../utils/props';\nimport { flowData, resolveFlowNodes, type FlowLink, type FlowNode } from './flow';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { useSingleChart, type SingleChart } from './single';\n\n/** 节点怎样排：justify 两端对齐（默认），left、right 靠向一侧，center 居中 */\nexport interface SankeyAligns {\n  /** 两端对齐（默认）：按离起点的远近分列，没有流出的节点都排到最右一列 */\n  justify: unknown;\n  /** 靠左：每个节点排在离起点最近的一列 */\n  left: unknown;\n  /** 靠右：每个节点排在离终点最近的一列 */\n  right: unknown;\n  /** 居中：同靠左，但没有流入的节点往右挪，贴着它流向的节点 */\n  center: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface SankeyChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly FlowNode[];\n  /** 流向 */\n  links: readonly FlowLink[];\n  /** 数值的格式（可缩放，如以万元为单位）：节点旁的总量、提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 320\n   */\n  height?: number | string;\n  /**\n   * 节点的排法\n   * @default 'justify'\n   */\n  align?: keyof SankeyAligns;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n}\n\n/** SankeyChart 的样式：root（--vis-sankey-* 主题变量）、skeleton */\nexport const sankeyChartStyles = css.create({\n  root: {\n    '--vis-sankey-node-label-color': colors.text,\n    '--vis-sankey-node-label-font-size': fontSizes.xs,\n    '--vis-sankey-node-label-font-weight': '500',\n    '--vis-sankey-node-label-background-fill-color': colors.surface,\n    '--vis-sankey-node-label-background-stroke-color': colors.borderMuted,\n    '--vis-sankey-node-sublabel-font-size': fontSizes.xs,\n    '--vis-sankey-link-opacity': '0.35',\n    '--vis-sankey-link-hover-opacity': '0.6',\n  },\n  skeleton: { display: 'block', width: '100%', height: '100%' },\n});\n\nconst ALIGNS: Record<keyof SankeyAligns, SankeyNodeAlign> = {\n  justify: SankeyNodeAlign.Justify,\n  left: SankeyNodeAlign.Left,\n  right: SankeyNodeAlign.Right,\n  center: SankeyNodeAlign.Center,\n};\n\n/** 交给 Unovis 的节点、流向 */\ntype Data = ReturnType<typeof flowData>;\ntype Node = Data['nodes'][number];\ntype Link = Data['links'][number];\n/** Unovis 布局后：流向的起点、终点换成了节点对象，节点带上了总量 value */\ntype LaidOutNode = Node & { value?: number };\ntype LaidOutLink = Omit<Link, 'source' | 'target'> & { source: LaidOutNode; target: LaidOutNode };\n\n/** 桑基图 */\nexport const SankeyChart = _component(\n  ({\n    nodes,\n    links,\n    valueFormat,\n    unit,\n    height = 320,\n    align = 'justify',\n    tooltip = true,\n    loading = false,\n    empty,\n    sx,\n    ...rest\n  }: SankeyChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const resolved = _derived(resolveFlowNodes(nodes));\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const labelOf = (id: string) => resolved.get(id)?.label ?? id;\n\n    let plot = _state.raw<HTMLElement | null>(null);\n    const chart: SingleChart = useSingleChart<{ nodes: Node[]; links?: Link[] }>(() => ({\n      element: plot,\n      ready: !loading && nodes.length > 0,\n      tooltip,\n      build: (instance) => {\n        const sankey = instance(\n          'sankey',\n          () => new Sankey<Node, Link>({ linkValue: (link) => link.amount }),\n        );\n        sankey.setConfig({\n          linkValue: (link) => link.amount,\n          nodeColor: (node) => node.color,\n          linkColor: (link) => link.source.color,\n          nodeAlign: ALIGNS[align],\n          label: (node) => node.label,\n          subLabel: (node) => (node.value === undefined ? '' : valueText(node.value)),\n          nodePadding: 16,\n          nodeWidth: 12,\n          labelMaxWidth: 120,\n          labelMaxWidthTakeAvailableSpace: true,\n          labelFit: FitMode.Wrap,\n          labelBackground: true,\n          enableZoom: false,\n        });\n        return {\n          component: sankey,\n          data: flowData(resolved, links),\n          triggers: {\n            [Sankey.selectors.link]: (link: LaidOutLink) =>\n              chart.tooltip(\n                chartTooltip(lang.chartFlowLabel(link.source.label, link.target.label), [\n                  {\n                    label: lang.chartValue,\n                    color: link.source.color,\n                    value: valueText(link.value),\n                  },\n                ]),\n              ),\n            [Sankey.selectors.node]: (node: LaidOutNode) =>\n              chart.tooltip(\n                chartTooltip(node.label, [\n                  { label: lang.chartTotal, color: node.color, value: valueText(node.value) },\n                ]),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        sx={[sankeyChartStyles.root, sx]}\n        unit={unit}\n        height={height}\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={<Skeleton sx={sankeyChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        table={{\n          columns: [lang.chartFlow, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: links.map((link) => ({\n            header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n            cells: [format.number(link.value, valueFormat)],\n          })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"SankeyChart.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/SankeyChart.tsx"],"sourcesContent":["/**\n * 桑基图：节点之间的流量画成粗细不同的带子，看量从哪来、到哪去、在哪流失（转化漏斗、预算分配、能源流向）。\n *\n *   <SankeyChart aria-label=\"注册转化\" nodes={steps} links={flows} unit=\"人\" />\n *\n * 节点是 { id, label?, color? }，流向是 { source, target, value }（value 可以是 Decimal、bigint，要大于 0；不能成环）。\n * 带子取起点节点的颜色；悬停带子出“起点 → 终点”的流量，悬停节点出它的总量并突出与它相连的带子。\n * 节点旁写名字与总量（左半边的写在右侧，右半边的写在左侧）。布局见 sankeyLayout。\n * 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { t } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport type { PartProps } from '../utils/props';\nimport { flowData, resolveFlowNodes, type FlowLink, type FlowNode } from './flow';\nimport { svgNumber } from '../utils/data/number';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { sankeyLayout } from './layout/sankey';\nimport { ChartTooltipBox, chartSvgStyles, pointerIn, usePlotArea, type ChartTip } from './plot';\nimport { horizontalLinkPath } from './shape';\n\n/** 节点怎样排：justify 两端对齐（默认），left、right 靠向一侧，center 居中 */\nexport interface SankeyAligns {\n  /** 两端对齐（默认）：按离起点的远近分列，没有流出的节点都排到最右一列 */\n  justify: unknown;\n  /** 靠左：每个节点排在离起点最近的一列 */\n  left: unknown;\n  /** 靠右：每个节点排在离终点最近的一列 */\n  right: unknown;\n  /** 居中：同靠左，但没有流入的节点往右挪，贴着它流向的节点 */\n  center: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface SankeyChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly FlowNode[];\n  /** 流向 */\n  links: readonly FlowLink[];\n  /** 数值的格式（可缩放，如以万元为单位）：节点旁的总量、提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 320\n   */\n  height?: number | string;\n  /**\n   * 节点的排法\n   * @default 'justify'\n   */\n  align?: keyof SankeyAligns;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n}\n\n/** SankeyChart 的样式：节点、带子、名字、骨架 */\nexport const sankeyChartStyles = css.create({\n  skeleton: { display: 'block', width: '100%', height: '100%' },\n  node: { stroke: '_surface', strokeWidth: 1 },\n  link: {\n    fill: 'none',\n    strokeOpacity: 0.35,\n    transition: `stroke-opacity ${t.durations.sm} ${t.easings.standard}`,\n  },\n  linkActive: { strokeOpacity: 0.6 },\n  linkFaded: { strokeOpacity: 0.12 },\n  name: { fill: '_text', fontSize: '_xs', fontWeight: '_medium' },\n  value: { fill: '_textMuted', fontSize: '_xs' },\n});\n\n/** 节点的宽、同一列里节点的间距、上下留的空（px） */\nconst NODE_WIDTH = 12;\nconst NODE_PADDING = 16;\nconst MARGIN = 8;\n\n/** 悬停的是节点还是带子 */\ninterface SankeyHover {\n  kind: 'node' | 'link';\n  index: number;\n  x: number;\n  y: number;\n}\n\n/** 桑基图 */\nexport const SankeyChart = _component(\n  ({\n    nodes,\n    links,\n    valueFormat,\n    unit,\n    height = 320,\n    align = 'justify',\n    tooltip = true,\n    loading = false,\n    empty,\n    ...rest\n  }: SankeyChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const resolved = _derived(resolveFlowNodes(nodes));\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const labelOf = (id: string) => resolved.get(id)?.label ?? id;\n    const area = usePlotArea();\n    let hovered = _state.raw<SankeyHover | null>(null);\n\n    const layout = _derived.by(() => {\n      const data = flowData(resolved, links);\n      const laid = sankeyLayout(\n        data.nodes.map((node) => node.id),\n        data.links.map((link) => ({\n          source: link.source,\n          target: link.target,\n          value: link.amount,\n        })),\n        {\n          width: area.width,\n          height: Math.max(0, area.height - MARGIN * 2),\n          nodeWidth: NODE_WIDTH,\n          nodePadding: NODE_PADDING,\n          align,\n        },\n      );\n      return { ...laid, flows: data.links };\n    });\n\n    function onPointermove(event: PointerEvent) {\n      const target = (event.target as Element).closest?.('[data-node],[data-link]');\n      if (!target) {\n        hovered = null;\n        return;\n      }\n      const { x, y } = pointerIn(event, event.currentTarget as Element);\n      const node = target.getAttribute('data-node');\n      hovered =\n        node === null\n          ? { kind: 'link', index: Number(target.getAttribute('data-link')), x, y }\n          : { kind: 'node', index: Number(node), x, y };\n    }\n\n    /** 带子与悬停的节点相连（悬停带子时只有它自己）：true 突出、false 变淡、undefined 没有悬停 */\n    const linkState = (index: number) => {\n      const current = hovered;\n      if (!current) return undefined;\n      if (current.kind === 'link') return current.index === index;\n      const link = layout.links[index]!;\n      const node = layout.nodes[current.index]!;\n      return link.source === node || link.target === node;\n    };\n\n    function renderPlot() {\n      const { width } = area;\n      return (\n        <svg\n          width={width}\n          height={area.height}\n          {...css.attrs(chartSvgStyles.svg)}\n          onPointermove={onPointermove}\n          onPointerleave={() => (hovered = null)}\n        >\n          <g transform={`translate(0,${MARGIN})`} {...css.attrs(chartSvgStyles.fadeIn)}>\n            <g data-part=\"links\">\n              {layout.links.map((link, index) => {\n                const state = linkState(index);\n                return (\n                  <path\n                    key={index}\n                    data-part=\"link\"\n                    data-link={index}\n                    d={horizontalLinkPath(link.source.x1, link.y0, link.target.x0, link.y1)}\n                    stroke-width={svgNumber(Math.max(1, link.width))}\n                    {...css.attrs(\n                      sankeyChartStyles.link,\n                      chartSvgStyles.stroke(resolved.get(link.source.id)!.color),\n                      state === true && sankeyChartStyles.linkActive,\n                      state === false && sankeyChartStyles.linkFaded,\n                    )}\n                  />\n                );\n              })}\n            </g>\n            {layout.nodes.map((node, index) => {\n              const info = resolved.get(node.id)!;\n              // 左半边的节点名字写在右侧，右半边的写在左侧：都朝着图的中间\n              const right = node.x0 < width / 2;\n              const middle = (node.y0 + node.y1) / 2;\n              const x = right ? node.x1 + 6 : node.x0 - 6;\n              const anchor = right ? 'start' : 'end';\n              return (\n                <g key={node.id}>\n                  <rect\n                    data-part=\"node\"\n                    data-node={index}\n                    x={svgNumber(node.x0)}\n                    y={svgNumber(node.y0)}\n                    width={NODE_WIDTH}\n                    height={svgNumber(Math.max(1, node.y1 - node.y0))}\n                    rx={2}\n                    {...css.attrs(sankeyChartStyles.node, chartSvgStyles.fill(info.color))}\n                  />\n                  <text\n                    x={x}\n                    y={svgNumber(middle - 7)}\n                    text-anchor={anchor}\n                    dominant-baseline=\"central\"\n                    {...css.attrs(\n                      sankeyChartStyles.name,\n                      chartSvgStyles.halo,\n                      chartSvgStyles.noPointer,\n                    )}\n                  >\n                    {info.label}\n                  </text>\n                  <text\n                    x={x}\n                    y={svgNumber(middle + 8)}\n                    text-anchor={anchor}\n                    dominant-baseline=\"central\"\n                    {...css.attrs(\n                      sankeyChartStyles.value,\n                      chartSvgStyles.halo,\n                      chartSvgStyles.noPointer,\n                    )}\n                  >\n                    {valueText(node.value)}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      );\n    }\n\n    const tip = (): ChartTip | null => {\n      const current = hovered;\n      if (!tooltip || !current) return null;\n      if (current.kind === 'node') {\n        const node = layout.nodes[current.index];\n        const info = node && resolved.get(node.id);\n        if (!node || !info) return null;\n        return {\n          x: current.x,\n          y: current.y,\n          content: chartTooltip(info.label, [\n            { label: lang.chartTotal, color: info.color, value: valueText(node.value) },\n          ]),\n        };\n      }\n      const link = layout.links[current.index];\n      if (!link) return null;\n      const source = resolved.get(link.source.id)!;\n      return {\n        x: current.x,\n        y: current.y,\n        content: chartTooltip(lang.chartFlowLabel(source.label, labelOf(link.target.id)), [\n          {\n            label: lang.chartValue,\n            color: source.color,\n            value: valueText(layout.flows[link.index]!.value),\n          },\n        ]),\n      };\n    };\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height={height}\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={<Skeleton sx={sankeyChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        table={{\n          columns: [lang.chartFlow, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: links.map((link) => ({\n            header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n            cells: [format.number(link.value, valueFormat)],\n          })),\n        }}\n        plotRef={area.ref}\n        plot={\n          area.ready\n            ? [renderPlot(), <ChartTooltipBox key=\"tooltip\" tip={tip()} width={area.width} />]\n            : null\n        }\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/charts/ScatterChart.d.ts

@@ -1,3 +1,4 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type NumericKey } from './series';
 import { type XYChartProps } from './XYChart';
 /** 未声明的属性落到外层 div（role="figure"）上 */
@@ -9,10 +10,15 @@ export interface ScatterChartProps<T extends object> extends XYChartProps<T> {
     /** 横轴数值的格式（Intl.NumberFormatOptions） */
     xFormat?: Intl.NumberFormatOptions;
     /**
-     * 点的直径（px），或者一个数值字段（气泡图：按它在 6–32px 之间缩放）
+     * 点的直径（px），或者一个数值字段（气泡图：面积按它在 6–32px 的直径之间缩放）
      * @default 9
      */
     size?: number | NumericKey<T>;
 }
+/** ScatterChart 的样式 */
+export declare const scatterChartStyles: Readonly<{
+    active: css.CompiledStyles;
+    point: css.CompiledStyles;
+}>;
 /** 散点图 */
 export declare const ScatterChart: <T extends object>(props: ScatterChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/charts/ScatterChart.js

@@ -1,23 +1,30 @@
-import { colors } from "../config/theme/tokens.js";
+import { svgNumber } from "../utils/data/number.js";
+import { t } from "../config/theme/tokens.js";
 import { useFormat } from "../config/lang/format.js";
+import { chartSvgStyles } from "./plot.js";
+import { chartMarkStyles } from "./marks.js";
 import { seriesNumber } from "./series.js";
 import { XYChart } from "./XYChart.js";
 import { computed, createVNode } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import { Scatter } from "@unovis/ts";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/charts/ScatterChart.tsx
-/**
-* 散点图：横轴、纵轴都是数值，每一行在每个系列上画一个点；size 给成字段时点的大小随它变（气泡图）。
-* 悬停一个点，提示框列出这一行的名称、横轴的值与各系列的值。
-*
-*   <ScatterChart data={cities} index="name" x="gdp" xLabel="人均 GDP" series={[{ key: 'life', label: '预期寿命' }]} />
-*   <ScatterChart data={products} index="name" x="price" series={[{ key: 'rating', label: '评分' }]} size="sales" />
-*
-* 纵轴不强制从 0 起（按数据取）；图例、单位、加载与空状态、给读屏的数据表同其他图表（见 XYChart）。
-*/
 /** 未声明的属性落到外层 div（role="figure"）上 */
-/** 气泡图的大小范围（px） */
+/** 气泡图的直径范围（px） */
 var BUBBLE_RANGE = [6, 32];
+/** ScatterChart 的样式 */
+var scatterChartStyles = css.create({
+	point: {
+		stroke: "_surface",
+		strokeWidth: 1,
+		fillOpacity: .85,
+		transition: `stroke-width ${t.durations.sm} ${t.easings.standard}`
+	},
+	active: {
+		strokeWidth: 2.5,
+		fillOpacity: 1
+	}
+});
 /** 散点图 */
 var ScatterChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
@@ -28,9 +35,17 @@ var ScatterChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const hiddenSeries = bindable(_props, "_hiddenSeries", () => [], _ctx.emit);
 	const rest = restProps(_props, _ctx, true);
 	const format = useFormat();
+	/** 点的半径：固定直径，或按字段的值让面积成比例 */
+	const radiusOf = (row, sizes) => {
+		if (typeof size.value === "number") return size.value / 2;
+		const value = seriesNumber(row, size.value) ?? 0;
+		const [low, high] = [Math.min(...sizes), Math.max(...sizes)];
+		const ratio = high === low ? 1 : Math.sqrt((value - low) / (high - low));
+		return (BUBBLE_RANGE[0] + ratio * (BUBBLE_RANGE[1] - BUBBLE_RANGE[0])) / 2;
+	};
 	const kind = computed(() => ({
 		zeroBaseline: false,
-		pointTooltip: Scatter.selectors.point,
+		pointTooltip: true,
 		padding: {
 			left: 18,
 			right: 18,
@@ -43,22 +58,22 @@ var ScatterChart = /*#__PURE__*/ _component((_props, _ctx) => {
 			label: xLabel.value ?? xKey.value,
 			title: xLabel.value
 		},
-		components: ({ series, x, y, instance }) => series.map((item) => {
-			const points = instance(`points:${item.key}`, () => new Scatter({
-				x,
-				y: () => 0
-			}));
-			points.setConfig({
-				x,
-				y: y(item),
-				color: item.color,
-				size: typeof size.value === "number" ? size.value : (row) => seriesNumber(row, size.value) ?? 0,
-				sizeRange: typeof size.value === "number" ? void 0 : BUBBLE_RANGE,
-				strokeColor: colors.surface,
-				strokeWidth: 1
-			});
-			return points;
-		})
+		render: (context) => {
+			const sizes = typeof size.value === "number" ? [] : context.rows.map((row) => seriesNumber(row, size.value) ?? 0);
+			return createVNode("g", { "data-part": "points" }, [context.series.flatMap((item) => context.rows.map((row, index) => {
+				const value = context.valueOf(item, row);
+				const cx = context.category(row, index);
+				if (value === void 0 || Number.isNaN(cx)) return null;
+				return createVNode("circle", mergeJsxProps({
+					"key": `${item.key}:${index}`,
+					"data-part": "point",
+					"data-index": index,
+					"cx": svgNumber(cx),
+					"cy": svgNumber(context.value(value)),
+					"r": radiusOf(row, sizes)
+				}, css.attrs(chartMarkStyles.dot, scatterChartStyles.point, chartSvgStyles.fill(item.color), context.hovered === index && scatterChartStyles.active)), null);
+			}))]);
+		}
 	}));
 	return () => createVNode(XYChart, mergeJsxProps(rest, {
 		"_hiddenSeries": hiddenSeries.value,
@@ -77,6 +92,6 @@ var ScatterChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	]
 });
 //#endregion
-export { ScatterChart };
+export { ScatterChart, scatterChartStyles };
 
 //# sourceMappingURL=ScatterChart.js.map

package/dist/charts/ScatterChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/ScatterChart.tsx"],"sourcesContent":["/**\n * 散点图：横轴、纵轴都是数值，每一行在每个系列上画一个点；size 给成字段时点的大小随它变（气泡图）。\n * 悬停一个点，提示框列出这一行的名称、横轴的值与各系列的值。\n *\n *   <ScatterChart data={cities} index=\"name\" x=\"gdp\" xLabel=\"人均 GDP\" series={[{ key: 'life', label: '预期寿命' }]} />\n *   <ScatterChart data={products} index=\"name\" x=\"price\" series={[{ key: 'rating', label: '评分' }]} size=\"sales\" />\n *\n * 纵轴不强制从 0 起（按数据取）；图例、单位、加载与空状态、给读屏的数据表同其他图表（见 XYChart）。\n */\nimport { Scatter } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { colors } from '../config/theme/tokens';\nimport { useFormat } from '../config/lang/format';\nimport { seriesNumber, type NumericKey } from './series';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上 */\nexport interface ScatterChartProps<T extends object> extends XYChartProps<T> {\n  /** 横轴的数值字段 */\n  x: NumericKey<T>;\n  /** 横轴的名字：显示在横轴下方，提示框与数据表里也用；不写时轴下不显示，提示框与数据表用字段名 */\n  xLabel?: string;\n  /** 横轴数值的格式（Intl.NumberFormatOptions） */\n  xFormat?: Intl.NumberFormatOptions;\n  /**\n   * 点的直径（px），或者一个数值字段（气泡图：按它在 6–32px 之间缩放）\n   * @default 9\n   */\n  size?: number | NumericKey<T>;\n}\n\n/** 气泡图的大小范围（px） */\nconst BUBBLE_RANGE: [number, number] = [6, 32];\n\n/** 散点图 */\nexport const ScatterChart = _component(\n  <T extends object>({\n    x: xKey,\n    xLabel,\n    xFormat,\n    size = 9,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: ScatterChartProps<T>) => {\n    const format = useFormat();\n    const kind = _derived<XYChartKind<T>>({\n      zeroBaseline: false,\n      pointTooltip: Scatter.selectors.point,\n      // 留出半个最大气泡的边：贴边的点不被裁掉\n      padding: { left: 18, right: 18, top: 18, bottom: 8 },\n      continuousX: {\n        value: (row) => seriesNumber(row, xKey),\n        format: (value) => format.number(value, xFormat),\n        label: xLabel ?? xKey,\n        title: xLabel,\n      },\n      components: ({ series, x, y, instance }) =>\n        series.map((item) => {\n          const points = instance(`points:${item.key}`, () => new Scatter<T>({ x, y: () => 0 }));\n          points.setConfig({\n            x,\n            y: y(item),\n            color: item.color,\n            size: typeof size === 'number' ? size : (row: T) => seriesNumber(row, size) ?? 0,\n            sizeRange: typeof size === 'number' ? undefined : BUBBLE_RANGE,\n            // 气泡互相重叠时用表面色描一圈边分开\n            strokeColor: colors.surface,\n            strokeWidth: 1,\n          });\n          return points;\n        }),\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,IAAM,eAAiC,CAAC,GAAG,EAAE;;AAG7C,IAAa,eAAe,0BAC1B,QAAA,SAO4B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,GAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAHnB,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBAC0C,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,UAAU;CACzB,MAAM,OAAIC,gBAA4B;EACpC,cAAc;EACd,cAAc,QAAQ,UAAU;EAEhC,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;GAAI,QAAQ;EAAE;EACnD,aAAa;GACX,QAAQ,QAAQ,aAAa,KAAG,KAAA,KAAM;GACtC,SAAS,UAAU,OAAO,OAAO,OAAK,QAAA,KAAS;GAC/C,OAAO,OAAA,SAAA,KAAA;GACP,OAAK,OAAA;EACP;EACA,aAAa,EAAE,QAAQ,GAAG,GAAG,eAC3B,OAAO,KAAK,SAAS;GACnB,MAAM,SAAS,SAAS,UAAU,KAAK,aAAa,IAAI,QAAW;IAAE;IAAG,SAAS;GAAE,CAAC,CAAC;GACrF,OAAO,UAAU;IACf;IACA,GAAG,EAAE,IAAI;IACT,OAAO,KAAK;IACZ,MAAM,OAAA,KAAA,UAAgB,WAAQ,KAAA,SAAW,QAAW,aAAa,KAAG,KAAA,KAAM,KAAK;IAC/E,WAAW,OAAA,KAAA,UAAgB,WAAW,KAAA,IAAY;IAElD,aAAa,OAAO;IACpB,aAAa;GACf,CAAC;GACD,OAAO;EACT,CAAC;CACL,EAAC;CACD,aAAOC,YAAA,SAAAC,cAAmB,MAAI;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,QAAA,KAAA;CAAA,CAAA,GAAA,IAAA;AAChC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ScatterChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/ScatterChart.tsx"],"sourcesContent":["/**\n * 散点图：横轴、纵轴都是数值，每一行在每个系列上画一个点；size 给成字段时点的大小随它变（气泡图）。\n * 悬停离指针最近的点，提示框列出这一行的名称、横轴的值与各系列的值。\n *\n *   <ScatterChart data={cities} index=\"name\" x=\"gdp\" xLabel=\"人均 GDP\" series={[{ key: 'life', label: '预期寿命' }]} />\n *   <ScatterChart data={products} index=\"name\" x=\"price\" series={[{ key: 'rating', label: '评分' }]} size=\"sales\" />\n *\n * 纵轴不强制从 0 起（按数据取）；图例、单位、加载与空状态、给读屏的数据表同其他图表（见 XYChart）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../config/theme/tokens';\nimport { useFormat } from '../config/lang/format';\nimport { svgNumber } from '../utils/data/number';\nimport { chartMarkStyles } from './marks';\nimport { chartSvgStyles } from './plot';\nimport { seriesNumber, type NumericKey } from './series';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上 */\nexport interface ScatterChartProps<T extends object> extends XYChartProps<T> {\n  /** 横轴的数值字段 */\n  x: NumericKey<T>;\n  /** 横轴的名字：显示在横轴下方，提示框与数据表里也用；不写时轴下不显示，提示框与数据表用字段名 */\n  xLabel?: string;\n  /** 横轴数值的格式（Intl.NumberFormatOptions） */\n  xFormat?: Intl.NumberFormatOptions;\n  /**\n   * 点的直径（px），或者一个数值字段（气泡图：面积按它在 6–32px 的直径之间缩放）\n   * @default 9\n   */\n  size?: number | NumericKey<T>;\n}\n\n/** 气泡图的直径范围（px） */\nconst BUBBLE_RANGE: [number, number] = [6, 32];\n\n/** ScatterChart 的样式 */\nexport const scatterChartStyles = css.create({\n  // 气泡互相重叠时用表面色描一圈边分开；悬停的点描粗一点\n  point: {\n    stroke: '_surface',\n    strokeWidth: 1,\n    fillOpacity: 0.85,\n    transition: `stroke-width ${t.durations.sm} ${t.easings.standard}`,\n  },\n  active: { strokeWidth: 2.5, fillOpacity: 1 },\n});\n\n/** 散点图 */\nexport const ScatterChart = _component(\n  <T extends object>({\n    x: xKey,\n    xLabel,\n    xFormat,\n    size = 9,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: ScatterChartProps<T>) => {\n    const format = useFormat();\n    /** 点的半径：固定直径，或按字段的值让面积成比例 */\n    const radiusOf = (row: T, sizes: readonly number[]) => {\n      if (typeof size === 'number') return size / 2;\n      const value = seriesNumber(row, size) ?? 0;\n      const [low, high] = [Math.min(...sizes), Math.max(...sizes)];\n      const ratio = high === low ? 1 : Math.sqrt((value - low) / (high - low));\n      return (BUBBLE_RANGE[0] + ratio * (BUBBLE_RANGE[1] - BUBBLE_RANGE[0])) / 2;\n    };\n    const kind = _derived<XYChartKind<T>>({\n      zeroBaseline: false,\n      pointTooltip: true,\n      // 留出半个最大气泡的边：贴边的点不被裁掉\n      padding: { left: 18, right: 18, top: 18, bottom: 8 },\n      continuousX: {\n        value: (row) => seriesNumber(row, xKey),\n        format: (value) => format.number(value, xFormat),\n        label: xLabel ?? xKey,\n        title: xLabel,\n      },\n      render: (context) => {\n        const sizes =\n          typeof size === 'number' ? [] : context.rows.map((row) => seriesNumber(row, size) ?? 0);\n        return (\n          <g data-part=\"points\">\n            {context.series.flatMap((item) =>\n              context.rows.map((row, index) => {\n                const value = context.valueOf(item, row);\n                const cx = context.category(row, index);\n                if (value === undefined || Number.isNaN(cx)) return null;\n                return (\n                  <circle\n                    key={`${item.key}:${index}`}\n                    data-part=\"point\"\n                    data-index={index}\n                    cx={svgNumber(cx)}\n                    cy={svgNumber(context.value(value))}\n                    r={radiusOf(row, sizes)}\n                    {...css.attrs(\n                      chartMarkStyles.dot,\n                      scatterChartStyles.point,\n                      chartSvgStyles.fill(item.color),\n                      context.hovered === index && scatterChartStyles.active,\n                    )}\n                  />\n                );\n              }),\n            )}\n          </g>\n        );\n      },\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAmCA,IAAM,eAAiC,CAAC,GAAG,EAAE;;AAG7C,IAAa,qBAAqB,IAAI,OAAO;CAE3C,OAAO;EACL,QAAQ;EACR,aAAa;EACb,aAAa;EACb,YAAY,gBAAgB,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CAC1D;CACA,QAAQ;EAAE,aAAa;EAAK,aAAa;CAAE;AAC7C,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAO4B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,GAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAHnB,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBAC0C,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,UAAU;;CAEzB,MAAM,YAAY,KAAQ,UAA6B;EACrD,IAAI,OAAA,KAAA,UAAgB,UAAU,OAAO,KAAA,QAAO;EAC5C,MAAM,QAAQ,aAAa,KAAG,KAAA,KAAM,KAAK;EACzC,MAAM,CAAC,KAAK,QAAQ,CAAC,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;EAC3D,MAAM,QAAQ,SAAS,MAAM,IAAI,KAAK,MAAM,QAAQ,QAAQ,OAAO,IAAI;EACvE,QAAQ,aAAa,KAAK,SAAS,aAAa,KAAK,aAAa,OAAO;CAC3E;CACA,MAAM,OAAIC,gBAA4B;EACpC,cAAc;EACd,cAAc;EAEd,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;GAAI,QAAQ;EAAE;EACnD,aAAa;GACX,QAAQ,QAAQ,aAAa,KAAG,KAAA,KAAM;GACtC,SAAS,UAAU,OAAO,OAAO,OAAK,QAAA,KAAS;GAC/C,OAAO,OAAA,SAAA,KAAA;GACP,OAAK,OAAA;EACP;EACA,SAAS,YAAY;GACnB,MAAM,QACJ,OAAA,KAAA,UAAgB,WAAW,CAAA,IAAK,QAAQ,KAAK,KAAK,QAAQ,aAAa,KAAG,KAAA,KAAM,KAAK,CAAC;GACxF,OAAAC,YAAA,KAAA,EAAA,aAAA,SAAA,GAAA,CAEK,QAAQ,OAAO,SAAS,SACvB,QAAQ,KAAK,KAAK,KAAK,UAAU;IAC/B,MAAM,QAAQ,QAAQ,QAAQ,MAAM,GAAG;IACvC,MAAM,KAAK,QAAQ,SAAS,KAAK,KAAK;IACtC,IAAI,UAAU,KAAA,KAAa,OAAO,MAAM,EAAE,GAAG,OAAO;IACpD,OAAAA,YAAA,UAAAC,cAAA;KAAA,OAES,GAAG,KAAK,IAAG,GAAI;KAAO,aAAA;KAAA,cAEf;KAAK,MACb,UAAU,EAAE;KAAC,MACb,UAAU,QAAQ,MAAM,KAAK,CAAC;KAAC,KAChC,SAAS,KAAK,KAAK;IAAC,GACnB,IAAI,MACN,gBAAgB,KAChB,mBAAmB,OACnB,eAAe,KAAK,KAAK,KAAK,GAC9B,QAAQ,YAAY,SAAS,mBAAmB,MAClD,CAAC,GAAA,IAAA;GAGP,CAAC,CACH,CAAC,CAAA;EAGP;CACF,EAAC;CACD,aAAOD,YAAA,SAAAC,cAAmB,MAAI;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,QAAA,KAAA;CAAA,CAAA,GAAA,IAAA;AAChC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/charts/TimelineChart.d.ts

@@ -1,4 +1,5 @@
-import { type VNodeChild } from 'vue';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
 import type { PartProps } from '../utils/props';
 import { type ChartFrameParts } from './frame';
 import { type ChartColor } from './series';
@@ -67,5 +68,11 @@ export interface TimelineChartProps extends PartProps<'div', 'role' | 'aria-busy
     /** 悬停时的提示框，默认 true */
     tooltip?: boolean;
 }
+/** TimelineChart 的样式：隔行的底色、时间条 */
+export declare const timelineChartStyles: Readonly<{
+    segment: css.CompiledStyles;
+    segmentActive: css.CompiledStyles;
+    stripe: css.CompiledStyles;
+}>;
 /** 时间条图 */
 export declare const TimelineChart: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TimelineChartProps>;