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

package/dist/charts/AreaChart.d.ts

@@ -1,4 +1,4 @@
-import { type LineCurves } from './LineChart';
+import type { LineCurves } from './shape';
 import { type XYChartProps } from './XYChart';
 /** 未声明的属性落到外层 div（role="figure"）上 */
 export interface AreaChartProps<T extends object> extends XYChartProps<T> {

package/dist/charts/AreaChart.js

@@ -1,19 +1,8 @@
+import { chartAreas } from "./marks.js";
 import { XYChart } from "./XYChart.js";
-import { CURVES } from "./LineChart.js";
 import { computed, createVNode } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import { Area } from "@unovis/ts";
 //#region src/charts/AreaChart.tsx
-/**
-* 面积图：每个系列一片面积，上沿描一条线；默认各系列重叠、半透明（看得出谁高谁低），stacked 时依次叠起（看总量与构成），
-* stacked="percent" 时按占比叠满 100%（只看构成的变化）。
-*
-*   <AreaChart data={months} index="month" series={[{ key: 'visits', label: '访问量' }]} />
-*   <AreaChart stacked data={months} index="month" series={channels} unit="万次" />
-*   <AreaChart stacked="percent" data={months} index="month" series={channels} />
-*
-* 坐标轴、十字线（带圆点）与提示框、图例、单位、加载与空状态、给读屏的数据表同 LineChart（见 XYChart）。
-*/
 /** 未声明的属性落到外层 div（role="figure"）上 */
 /** 面积图 */
 var AreaChart = /*#__PURE__*/ _component((_props, _ctx) => {
@@ -32,42 +21,11 @@ var AreaChart = /*#__PURE__*/ _component((_props, _ctx) => {
 			right: 12,
 			top: 8
 		},
-		components: ({ series, x, y, instance }) => {
-			const common = {
-				x,
-				curveType: CURVES[curve.value],
-				line: true,
-				lineWidth: 2
-			};
-			if (stacked.value) {
-				const area = instance("stacked", () => new Area({
-					x,
-					y: []
-				}));
-				area.setConfig({
-					...common,
-					y: series.map(y),
-					color: (_rows, position) => series[position]?.color,
-					lineColor: (_rows, position) => series[position]?.color,
-					opacity: opacity.value ?? .8
-				});
-				return [area];
-			}
-			return series.map((item) => {
-				const area = instance(`area:${item.key}`, () => new Area({
-					x,
-					y: () => 0
-				}));
-				area.setConfig({
-					...common,
-					y: y(item),
-					color: item.color,
-					lineColor: item.color,
-					opacity: opacity.value ?? .25
-				});
-				return area;
-			});
-		}
+		render: (context) => chartAreas(context, context.series, {
+			curve: curve.value,
+			stacked: stacked.value !== false,
+			opacity: opacity.value ?? (stacked.value ? .8 : .25)
+		})
 	}));
 	return () => createVNode(XYChart, mergeJsxProps(rest, {
 		"_hiddenSeries": hiddenSeries.value,

package/dist/charts/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/AreaChart.tsx"],"sourcesContent":["/**\n * 面积图：每个系列一片面积，上沿描一条线；默认各系列重叠、半透明（看得出谁高谁低），stacked 时依次叠起（看总量与构成），\n * stacked=\"percent\" 时按占比叠满 100%（只看构成的变化）。\n *\n *   <AreaChart data={months} index=\"month\" series={[{ key: 'visits', label: '访问量' }]} />\n *   <AreaChart stacked data={months} index=\"month\" series={channels} unit=\"万次\" />\n *   <AreaChart stacked=\"percent\" data={months} index=\"month\" series={channels} />\n *\n * 坐标轴、十字线（带圆点）与提示框、图例、单位、加载与空状态、给读屏的数据表同 LineChart（见 XYChart）。\n */\nimport { Area } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { CURVES, type LineCurves } from './LineChart';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上 */\nexport interface AreaChartProps<T extends object> extends XYChartProps<T> {\n  /** 堆叠：true 各系列依次叠起，'percent' 按占比叠满 100%（数值轴是百分比）；默认重叠、半透明 */\n  stacked?: boolean | 'percent';\n  /**\n   * 曲线的形状\n   * @default 'monotone'\n   */\n  curve?: keyof LineCurves;\n  /**\n   * 面积的不透明度（0–1）；默认重叠时 0.25、堆叠时 0.8\n   */\n  opacity?: number;\n}\n\n/** 面积图 */\nexport const AreaChart = _component(\n  <T extends object>({\n    stacked = false,\n    curve = 'monotone',\n    opacity,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: AreaChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      crosshairDots: true,\n      stacked: stacked !== false,\n      percent: stacked === 'percent',\n      padding: { left: 12, right: 12, top: 8 },\n      components: ({ series, x, y, instance }) => {\n        const common = {\n          x,\n          curveType: CURVES[curve],\n          line: true,\n          lineWidth: 2,\n        };\n        if (stacked) {\n          const area = instance('stacked', () => new Area<T>({ x, y: [] }));\n          area.setConfig({\n            ...common,\n            y: series.map(y),\n            color: (_rows: T[], position: number) => series[position]?.color,\n            lineColor: (_rows: T[], position: number) => series[position]?.color,\n            opacity: opacity ?? 0.8,\n          });\n          return [area];\n        }\n        // 重叠：每个系列一个 Area（Unovis 的多个 y 总是堆叠的）\n        return series.map((item) => {\n          const area = instance(`area:${item.key}`, () => new Area<T>({ x, y: () => 0 }));\n          area.setConfig({\n            ...common,\n            y: y(item),\n            color: item.color,\n            lineColor: item.color,\n            opacity: opacity ?? 0.25,\n          });\n          return area;\n        });\n      },\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,IAAa,YAAY,0BACvB,QAAA,SAMyB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WALb,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACP,UAAU;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,eAAAC,SAAA,QAAA,uBAEgC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,eAAe;EACf,SAAS,QAAA,UAAY;EACrB,SAAS,QAAA,UAAY;EACrB,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;EAAE;EACvC,aAAa,EAAE,QAAQ,GAAG,GAAG,eAAe;GAC1C,MAAM,SAAS;IACb;IACA,WAAW,OAAM,MAAA;IACjB,MAAM;IACN,WAAW;GACb;GACA,IAAA,QAAA,OAAa;IACX,MAAM,OAAO,SAAS,iBAAiB,IAAI,KAAQ;KAAE;KAAG,GAAG,CAAA;IAAG,CAAC,CAAC;IAChE,KAAK,UAAU;KACb,GAAG;KACH,GAAG,OAAO,IAAI,CAAC;KACf,QAAQ,OAAY,aAAqB,OAAO,SAAS,EAAE;KAC3D,YAAY,OAAY,aAAqB,OAAO,SAAS,EAAE;KAC/D,SAAS,QAAA,SAAW;IACtB,CAAC;IACD,OAAO,CAAC,IAAI;GACd;GAEA,OAAO,OAAO,KAAK,SAAS;IAC1B,MAAM,OAAO,SAAS,QAAQ,KAAK,aAAa,IAAI,KAAQ;KAAE;KAAG,SAAS;IAAE,CAAC,CAAC;IAC9E,KAAK,UAAU;KACb,GAAG;KACH,GAAG,EAAE,IAAI;KACT,OAAO,KAAK;KACZ,WAAW,KAAK;KAChB,SAAS,QAAA,SAAW;IACtB,CAAC;IACD,OAAO;GACT,CAAC;EACH;CACF,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;CAAA;AAAA,CACH"}
+{"version":3,"file":"AreaChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/AreaChart.tsx"],"sourcesContent":["/**\n * 面积图：每个系列一片面积，上沿描一条线；默认各系列重叠、半透明（看得出谁高谁低），stacked 时依次叠起（看总量与构成），\n * stacked=\"percent\" 时按占比叠满 100%（只看构成的变化）。\n *\n *   <AreaChart data={months} index=\"month\" series={[{ key: 'visits', label: '访问量' }]} />\n *   <AreaChart stacked data={months} index=\"month\" series={channels} unit=\"万次\" />\n *   <AreaChart stacked=\"percent\" data={months} index=\"month\" series={channels} />\n *\n * 坐标轴、十字线（带圆点）与提示框、图例、单位、加载与空状态、给读屏的数据表同 LineChart（见 XYChart）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { chartAreas } from './marks';\nimport type { LineCurves } from './shape';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上 */\nexport interface AreaChartProps<T extends object> extends XYChartProps<T> {\n  /** 堆叠：true 各系列依次叠起，'percent' 按占比叠满 100%（数值轴是百分比）；默认重叠、半透明 */\n  stacked?: boolean | 'percent';\n  /**\n   * 曲线的形状\n   * @default 'monotone'\n   */\n  curve?: keyof LineCurves;\n  /**\n   * 面积的不透明度（0–1）；默认重叠时 0.25、堆叠时 0.8\n   */\n  opacity?: number;\n}\n\n/** 面积图 */\nexport const AreaChart = _component(\n  <T extends object>({\n    stacked = false,\n    curve = 'monotone',\n    opacity,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: AreaChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      crosshairDots: true,\n      stacked: stacked !== false,\n      percent: stacked === 'percent',\n      padding: { left: 12, right: 12, top: 8 },\n      render: (context) =>\n        chartAreas(context, context.series, {\n          curve,\n          stacked: stacked !== false,\n          opacity: opacity ?? (stacked ? 0.8 : 0.25),\n        }),\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;AA+BA,IAAa,YAAY,0BACvB,QAAA,SAMyB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WALb,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACP,UAAU;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,eAAAC,SAAA,QAAA,uBAEgC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,eAAe;EACf,SAAS,QAAA,UAAY;EACrB,SAAS,QAAA,UAAY;EACrB,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;EAAE;EACvC,SAAS,YACP,WAAW,SAAS,QAAQ,QAAQ;GAClC,OAAK,MAAA;GACL,SAAS,QAAA,UAAY;GACrB,SAAS,QAAA,UAAY,QAAA,QAAU,KAAM;EACvC,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;CAAA;AAAA,CACH"}

package/dist/charts/BarChart.js

@@ -1,21 +1,8 @@
+import { chartBars } from "./marks.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 { GroupedBar, StackedBar } from "@unovis/ts";
 //#region src/charts/BarChart.tsx
-/**
-* 柱状图：每个类目一组柱子，系列并排（分组）或叠成一根（堆叠），可以横向；stacked="percent" 时每根叠满 100%（看构成）。
-*
-*   <BarChart
-*     aria-label="各项目销售额"
-*     data={projects}
-*     index="name"
-*     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}
-*     unit="万元"
-*   />
-*
-* 颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart；悬停一个类目时提示框列出这一组的全部系列。
-*/
 /** 柱子的方向 */
 /** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
 /** 柱状图：分组或堆叠，竖向或横向 */
@@ -27,45 +14,15 @@ var BarChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const hiddenSeries = bindable(_props, "_hiddenSeries", () => [], _ctx.emit);
 	const rest = restProps(_props, _ctx, true);
 	const kind = computed(() => ({
+		band: true,
 		horizontal: orientation.value === "horizontal",
 		skeleton: "bars",
 		stacked: stacked.value !== false,
 		percent: stacked.value === "percent",
-		itemSelector: stacked.value ? StackedBar.selectors.bar : GroupedBar.selectors.bar,
-		components: ({ series, x, y, instance, events }) => {
-			const common = {
-				x,
-				y: series.map(y),
-				color: (_row, position) => series[position]?.color,
-				roundedCorners: radius.value,
-				orientation: orientation.value,
-				events
-			};
-			if (stacked.value) {
-				const bars = instance("stacked", () => new StackedBar({
-					x,
-					y: []
-				}));
-				bars.setConfig({
-					...common,
-					barPadding: .4,
-					barMaxWidth: 48
-				});
-				return [bars];
-			}
-			const bars = instance("grouped", () => new GroupedBar({
-				x,
-				y: []
-			}));
-			bars.setConfig({
-				...common,
-				groupPadding: .3,
-				barPadding: .1,
-				groupMaxWidth: 96,
-				barMinHeight: 0
-			});
-			return [bars];
-		}
+		render: (context) => chartBars(context, context.series, {
+			stacked: stacked.value !== false,
+			radius: radius.value
+		})
 	}));
 	return () => createVNode(XYChart, mergeJsxProps(rest, {
 		"_hiddenSeries": hiddenSeries.value,

package/dist/charts/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/BarChart.tsx"],"sourcesContent":["/**\n * 柱状图：每个类目一组柱子，系列并排（分组）或叠成一根（堆叠），可以横向；stacked=\"percent\" 时每根叠满 100%（看构成）。\n *\n *   <BarChart\n *     aria-label=\"各项目销售额\"\n *     data={projects}\n *     index=\"name\"\n *     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}\n *     unit=\"万元\"\n *   />\n *\n * 颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart；悬停一个类目时提示框列出这一组的全部系列。\n */\nimport { GroupedBar, StackedBar } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 柱子的方向 */\nexport interface BarChartOrientations {\n  /** 竖向的柱子（默认） */\n  vertical: unknown;\n  /** 横向的条：类目名较长、类目较多时 */\n  horizontal: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface BarChartProps<T extends object> extends XYChartProps<T> {\n  /** 堆叠：true 同一类目的系列叠成一根柱子，'percent' 按占比叠满 100%（数值轴是百分比）；默认并排 */\n  stacked?: boolean | 'percent';\n  /** 方向，默认 vertical */\n  orientation?: keyof BarChartOrientations;\n  /** 柱子末端的圆角（px），默认 4 */\n  radius?: number;\n}\n\n/** 柱状图：分组或堆叠，竖向或横向 */\nexport const BarChart = _component(\n  <T extends object>({\n    stacked = false,\n    orientation = 'vertical',\n    radius = 4,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: BarChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      horizontal: orientation === 'horizontal',\n      skeleton: 'bars',\n      stacked: stacked !== false,\n      percent: stacked === 'percent',\n      itemSelector: stacked ? StackedBar.selectors.bar : GroupedBar.selectors.bar,\n      components: ({ series, x, y, instance, events }) => {\n        const common = {\n          x,\n          y: series.map(y),\n          color: (_row: T, position: number) => series[position]?.color,\n          roundedCorners: radius,\n          orientation,\n          events,\n        };\n        if (stacked) {\n          const bars = instance('stacked', () => new StackedBar<T>({ x, y: [] }));\n          bars.setConfig({ ...common, barPadding: 0.4, barMaxWidth: 48 });\n          return [bars];\n        }\n        const bars = instance('grouped', () => new GroupedBar<T>({ x, y: [] }));\n        // 空值不画柱子（Unovis 默认给 2px 的最小高度，空值也会画出一条线）\n        bars.setConfig({\n          ...common,\n          groupPadding: 0.3,\n          barPadding: 0.1,\n          groupMaxWidth: 96,\n          barMinHeight: 0,\n        });\n        return [bars];\n      },\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,WAAW,0BACtB,QAAA,SAMwB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WALZ,KAAK;CAAA,MAAA,cAAAA,aAAA,QAAA,eACD,UAAU;CAAA,MAAA,SAAAA,aAAA,QAAA,UACf,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBACwC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,YAAY,YAAA,UAAgB;EAC5B,UAAU;EACV,SAAS,QAAA,UAAY;EACrB,SAAS,QAAA,UAAY;EACrB,cAAc,QAAA,QAAU,WAAW,UAAU,MAAM,WAAW,UAAU;EACxE,aAAa,EAAE,QAAQ,GAAG,GAAG,UAAU,aAAa;GAClD,MAAM,SAAS;IACb;IACA,GAAG,OAAO,IAAI,CAAC;IACf,QAAQ,MAAS,aAAqB,OAAO,SAAS,EAAE;IACxD,gBAAc,OAAA;IACd,aAAW,YAAA;IACX;GACF;GACA,IAAA,QAAA,OAAa;IACX,MAAM,OAAO,SAAS,iBAAiB,IAAI,WAAc;KAAE;KAAG,GAAG,CAAA;IAAG,CAAC,CAAC;IACtE,KAAK,UAAU;KAAE,GAAG;KAAQ,YAAY;KAAK,aAAa;IAAG,CAAC;IAC9D,OAAO,CAAC,IAAI;GACd;GACA,MAAM,OAAO,SAAS,iBAAiB,IAAI,WAAc;IAAE;IAAG,GAAG,CAAA;GAAG,CAAC,CAAC;GAEtE,KAAK,UAAU;IACb,GAAG;IACH,cAAc;IACd,YAAY;IACZ,eAAe;IACf,cAAc;GAChB,CAAC;GACD,OAAO,CAAC,IAAI;EACd;CACF,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;CAAA;AAAA,CACH"}
+{"version":3,"file":"BarChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/BarChart.tsx"],"sourcesContent":["/**\n * 柱状图：每个类目一组柱子，系列并排（分组）或叠成一根（堆叠），可以横向；stacked=\"percent\" 时每根叠满 100%（看构成）。\n *\n *   <BarChart\n *     aria-label=\"各项目销售额\"\n *     data={projects}\n *     index=\"name\"\n *     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}\n *     unit=\"万元\"\n *   />\n *\n * 颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart；悬停一个类目时这一格铺一层浅底，提示框列出这一组的全部系列。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { chartBars } from './marks';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 柱子的方向 */\nexport interface BarChartOrientations {\n  /** 竖向的柱子（默认） */\n  vertical: unknown;\n  /** 横向的条：类目名较长、类目较多时 */\n  horizontal: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface BarChartProps<T extends object> extends XYChartProps<T> {\n  /** 堆叠：true 同一类目的系列叠成一根柱子，'percent' 按占比叠满 100%（数值轴是百分比）；默认并排 */\n  stacked?: boolean | 'percent';\n  /** 方向，默认 vertical */\n  orientation?: keyof BarChartOrientations;\n  /** 柱子末端的圆角（px），默认 4 */\n  radius?: number;\n}\n\n/** 柱状图：分组或堆叠，竖向或横向 */\nexport const BarChart = _component(\n  <T extends object>({\n    stacked = false,\n    orientation = 'vertical',\n    radius = 4,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: BarChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      band: true,\n      horizontal: orientation === 'horizontal',\n      skeleton: 'bars',\n      stacked: stacked !== false,\n      percent: stacked === 'percent',\n      render: (context) =>\n        chartBars(context, context.series, { stacked: stacked !== false, radius }),\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;AAoCA,IAAa,WAAW,0BACtB,QAAA,SAMwB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WALZ,KAAK;CAAA,MAAA,cAAAA,aAAA,QAAA,eACD,UAAU;CAAA,MAAA,SAAAA,aAAA,QAAA,UACf,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBACwC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,MAAM;EACN,YAAY,YAAA,UAAgB;EAC5B,UAAU;EACV,SAAS,QAAA,UAAY;EACrB,SAAS,QAAA,UAAY;EACrB,SAAS,YACP,UAAU,SAAS,QAAQ,QAAQ;GAAE,SAAS,QAAA,UAAY;GAAO,QAAM,OAAA;EAAC,CAAC;CAC7E,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;CAAA;AAAA,CACH"}

package/dist/charts/ChordChart.d.ts

@@ -39,9 +39,14 @@ export interface ChordChartProps extends PartProps<'div', 'role' | 'aria-busy'>,
     /** 没有数据时显示的内容，默认是“暂无数据” */
     empty?: VNodeChild;
 }
-/** ChordChart 的样式：root（--vis-chord-diagram-* 主题变量）、skeleton */
+/** ChordChart 的样式：弧、弦、名字、骨架 */
 export declare const chordChartStyles: Readonly<{
-    root: css.CompiledStyles;
+    label: css.CompiledStyles;
+    link: css.CompiledStyles;
+    linkActive: css.CompiledStyles;
+    linkFaded: css.CompiledStyles;
+    node: css.CompiledStyles;
+    nodeFaded: css.CompiledStyles;
     skeleton: css.CompiledStyles;
 }>;
 /** 弦图 */

package/dist/charts/ChordChart.js

@@ -1,45 +1,49 @@
-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 { arcPath, polarPoint, ribbonPath } from "./shape.js";
 import { ChartFrame, chartTooltip, useChartValueText } from "./frame.js";
+import { estimateTextWidth } from "./text-size.js";
 import { flowData, resolveFlowNodes } from "./flow.js";
-import { useSingleChart } from "./single.js";
+import { chordLayout } from "./layout/chord.js";
 import { computed, createVNode, shallowRef } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
-import { ChordDiagram, ChordLabelAlignment } from "@unovis/ts";
 //#region src/charts/ChordChart.tsx
-/**
-* 弦图：节点排成一圈，两两之间的流量画成弦，看几方之间相互往来的多少（部门协作、地区间人口流动、贸易往来）。
-*
-*   <ChordChart aria-label="部门协作" nodes={departments} links={collaborations} />
-*
-* 数据同 SankeyChart（节点 { id, label?, color? }，流向 { source, target, value }）；弦取起点节点的颜色。
-* 悬停一段弧出这个节点的总量，悬停一根弦出“起点 → 终点”的流量；点图例隐藏一个节点，连同它的弦。
-* 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。
-*/
 /** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
-/** ChordChart 的样式：root（--vis-chord-diagram-* 主题变量）、skeleton */
+/** ChordChart 的样式：弧、弦、名字、骨架 */
 var chordChartStyles = css.create({
-	root: {
-		"--vis-chord-diagram-link-opacity": "0.45",
-		"--vis-chord-diagram-link-stroke-color": colors.surface,
-		"--vis-chord-diagram-link-stroke-opacity": "0.6",
-		"--vis-chord-diagram-link-highlighted-opacity": "0.85",
-		"--vis-chord-diagram-link-dimmed-opacity": "0.12",
-		"--vis-chord-diagram-node-dimmed-opacity": "0.3",
-		"--vis-chord-diagram-label-text-font-size": fontSizes.xs
-	},
 	skeleton: {
 		display: "block",
 		height: "100%",
 		aspectRatio: "1",
 		marginInline: "auto",
 		borderRadius: "50%"
+	},
+	node: { transition: `opacity ${t.durations.sm} ${t.easings.standard}` },
+	link: {
+		fillOpacity: .45,
+		stroke: "_surface",
+		strokeOpacity: .6,
+		strokeWidth: .5,
+		transition: `fill-opacity ${t.durations.sm} ${t.easings.standard}`
+	},
+	linkActive: { fillOpacity: .85 },
+	linkFaded: { fillOpacity: .12 },
+	nodeFaded: { opacity: .3 },
+	label: {
+		fill: "_textMuted",
+		fontSize: "_xs"
 	}
 });
-/** 交给 Unovis 的节点、流向 */
+/** 弧的粗细、弧与弦之间的空、弧之间的空隙（弧度） */
+var ARC_WIDTH = 14;
+var ARC_GAP = 3;
+var PAD_ANGLE = .04;
+/** 悬停的是弧还是弦 */
 /** 弦图 */
 var ChordChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
@@ -53,7 +57,6 @@ var ChordChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const loading = readonlyProp(_props, "loading", false);
 	const hiddenNodes = bindable(_props, "_hiddenNodes", () => [], _ctx.emit);
 	const empty = readonlyProp(_props, "empty");
-	const sx = readonlyProp(_props, "sx");
 	const rest = restProps(_props, _ctx, true);
 	const lang = useLang();
 	const format = useFormat();
@@ -64,46 +67,130 @@ var ChordChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		unit: unit.value
 	}));
 	const labelOf = (id) => resolved.value.get(id)?.label ?? id;
+	const area = usePlotArea();
+	let hovered = shallowRef(null);
 	function toggle(id) {
 		hiddenNodes.value = hiddenNodes.value.includes(id) ? hiddenNodes.value.filter((item) => item !== id) : [...hiddenNodes.value, id];
 	}
-	let plot = shallowRef(null);
-	const chart = useSingleChart(() => ({
-		element: plot.value,
-		ready: !loading.value && nodes.value.length > 0,
-		tooltip: tooltip.value,
-		build: (instance) => {
-			const chord = instance("chord", () => new ChordDiagram({ linkValue: (link) => link.amount }));
-			chord.setConfig({
-				linkValue: (link) => link.amount,
-				nodeColor: (node) => node.color,
-				linkColor: (link) => link.source.color,
-				nodeLabel: (node) => legend.value ? "" : node.label,
-				padAngle: .04,
-				nodeWidth: 14,
-				nodeLabelAlignment: ChordLabelAlignment.Perpendicular,
-				nodeLabelColor: () => colors.textMuted
-			});
+	const layout = computed(() => {
+		const data = flowData(visible.value, links.value);
+		const order = new Map(data.nodes.map((node, position) => [node.id, position]));
+		const { groups, chords } = chordLayout(data.nodes.length, data.links.map((link) => ({
+			source: order.get(link.source),
+			target: order.get(link.target),
+			value: link.amount
+		})), PAD_ANGLE);
+		return {
+			nodes: data.nodes,
+			flows: data.links,
+			groups,
+			chords
+		};
+	});
+	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 chordState = (index) => {
+		const current = hovered.value;
+		if (!current) return void 0;
+		if (current.kind === "link") return current.index === index;
+		const flow = layout.value.flows[index];
+		const id = layout.value.nodes[current.index]?.id;
+		return flow.source === id || flow.target === id;
+	};
+	function renderPlot() {
+		const { width, height: plotHeight } = area;
+		const labelRoom = legend.value ? 4 : Math.max(0, ...layout.value.nodes.map((node) => estimateTextWidth(node.label))) + 12;
+		const outer = Math.max(0, Math.min(width / 2 - labelRoom, plotHeight / 2 - (legend.value ? 4 : 20)));
+		const inner = Math.max(0, outer - ARC_WIDTH);
+		const current = hovered.value;
+		return createVNode("svg", mergeJsxProps({
+			"width": width,
+			"height": plotHeight
+		}, css.attrs(chartSvgStyles.svg), {
+			"onPointermove": onPointermove,
+			"onPointerleave": _cache[0] || (_cache[0] = () => hovered.value = null)
+		}), [createVNode("g", mergeJsxProps({ "transform": `translate(${svgNumber(width / 2)},${svgNumber(plotHeight / 2)})` }, css.attrs(chartSvgStyles.fadeIn)), [createVNode("g", { "data-part": "links" }, [layout.value.chords.map((chord) => {
+			const state = chordState(chord.index);
+			const source = visible.value.get(layout.value.flows[chord.index].source);
+			return createVNode("path", mergeJsxProps({
+				"key": chord.index,
+				"data-part": "link",
+				"data-link": chord.index,
+				"d": ribbonPath(Math.max(0, inner - ARC_GAP), chord.source, chord.target)
+			}, css.attrs(chordChartStyles.link, chartSvgStyles.fill(source.color), state === true && chordChartStyles.linkActive, state === false && chordChartStyles.linkFaded)), null);
+		})]), layout.value.groups.map((group, index) => {
+			const node = layout.value.nodes[index];
+			const middle = (group.start + group.end) / 2;
+			const [x, y] = polarPoint(outer + 8, middle);
+			const faded = current?.kind === "node" && current.index !== index;
+			return createVNode("g", { "key": node.id }, [createVNode("path", mergeJsxProps({
+				"data-part": "node",
+				"data-node": index,
+				"d": arcPath({
+					inner,
+					outer,
+					start: group.start,
+					end: group.end,
+					corner: 2
+				})
+			}, css.attrs(chordChartStyles.node, chartSvgStyles.fill(node.color), faded && chordChartStyles.nodeFaded)), null), !legend.value && createVNode("text", mergeJsxProps({
+				"x": svgNumber(x),
+				"y": svgNumber(y),
+				"text-anchor": Math.abs(x) < outer * .2 ? "middle" : x > 0 ? "start" : "end",
+				"dominant-baseline": "central"
+			}, css.attrs(chordChartStyles.label, chartSvgStyles.noPointer)), [node.label])]);
+		})])]);
+	}
+	const tip = () => {
+		const current = hovered.value;
+		if (!tooltip.value || !current) return null;
+		if (current.kind === "node") {
+			const node = layout.value.nodes[current.index];
+			const group = layout.value.groups[current.index];
+			if (!node || !group) return null;
 			return {
-				component: chord,
-				data: flowData(visible.value, links.value),
-				triggers: {
-					[ChordDiagram.selectors.node]: (node) => chart.tooltip(chartTooltip(node.data.label, [{
-						label: lang.chartTotal,
-						color: node.data.color,
-						value: valueText(node._state.value)
-					}])),
-					[ChordDiagram.selectors.link]: (ribbon) => chart.tooltip(chartTooltip(lang.chartFlowLabel(ribbon.data.source.label, ribbon.data.target.label), [{
-						label: lang.chartValue,
-						color: ribbon.data.source.color,
-						value: valueText(ribbon.data.value)
-					}]))
-				}
+				x: current.x,
+				y: current.y,
+				content: chartTooltip(node.label, [{
+					label: lang.chartTotal,
+					color: node.color,
+					value: valueText(group.value)
+				}])
 			};
 		}
-	}));
+		const flow = layout.value.flows[current.index];
+		if (!flow) return null;
+		const source = resolved.value.get(flow.source);
+		return {
+			x: current.x,
+			y: current.y,
+			content: chartTooltip(lang.chartFlowLabel(source.label, labelOf(flow.target)), [{
+				label: lang.chartValue,
+				color: source.color,
+				value: valueText(flow.value)
+			}])
+		};
+	};
 	return () => createVNode(ChartFrame, mergeJsxProps(rest, {
-		"sx": [chordChartStyles.root, sx.value],
 		"unit": unit.value,
 		"height": height.value,
 		"legend": legend.value ? [...resolved.value.values()].map((node) => ({
@@ -124,7 +211,12 @@ var ChordChart = /*#__PURE__*/ _component((_props, _ctx) => {
 				cells: [format.number(link.value, valueFormat.value)]
 			}))
 		},
-		"plotRef": _cache[0] || (_cache[0] = (element) => plot.value = element)
+		"plotRef": area.ref,
+		"plot": area.ready ? [renderPlot(), createVNode(ChartTooltipBox, {
+			"key": "tooltip",
+			"tip": tip(),
+			"width": area.width
+		}, null)] : null
 	}), null);
 }, {
 	name: "ChordChart",
@@ -139,8 +231,7 @@ var ChordChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		"loading",
 		"_hiddenNodes",
 		"onUpdate:_hiddenNodes",
-		"empty",
-		"sx"
+		"empty"
 	]
 });
 //#endregion

package/dist/charts/ChordChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChordChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/ChordChart.tsx"],"sourcesContent":["/**\n * 弦图：节点排成一圈，两两之间的流量画成弦，看几方之间相互往来的多少（部门协作、地区间人口流动、贸易往来）。\n *\n *   <ChordChart aria-label=\"部门协作\" nodes={departments} links={collaborations} />\n *\n * 数据同 SankeyChart（节点 { id, label?, color? }，流向 { source, target, value }）；弦取起点节点的颜色。\n * 悬停一段弧出这个节点的总量，悬停一根弦出“起点 → 终点”的流量；点图例隐藏一个节点，连同它的弦。\n * 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。\n */\nimport { ChordDiagram, ChordLabelAlignment } 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 { NumericValue } from '../utils/data/numeric';\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/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface ChordChartProps 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 true\n   */\n  legend?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示一个圆形的骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 隐藏的节点（存 id）：点图例时写回，父级可以写 _hiddenNodes={ids} */\n  _hiddenNodes?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n}\n\n/** ChordChart 的样式：root（--vis-chord-diagram-* 主题变量）、skeleton */\nexport const chordChartStyles = css.create({\n  root: {\n    '--vis-chord-diagram-link-opacity': '0.45',\n    '--vis-chord-diagram-link-stroke-color': colors.surface,\n    '--vis-chord-diagram-link-stroke-opacity': '0.6',\n    '--vis-chord-diagram-link-highlighted-opacity': '0.85',\n    '--vis-chord-diagram-link-dimmed-opacity': '0.12',\n    '--vis-chord-diagram-node-dimmed-opacity': '0.3',\n    '--vis-chord-diagram-label-text-font-size': fontSizes.xs,\n  },\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n});\n\n/** 交给 Unovis 的节点、流向 */\ntype Data = ReturnType<typeof flowData>;\ntype Node = Data['nodes'][number];\ntype Link = Data['links'][number];\n\n/** 弦图 */\nexport const ChordChart = _component(\n  ({\n    nodes,\n    links,\n    valueFormat,\n    unit,\n    height = 320,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    _hiddenNodes: hiddenNodes = _bindable<string[]>([]),\n    empty,\n    sx,\n    ...rest\n  }: ChordChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const resolved = _derived(resolveFlowNodes(nodes));\n    const visible = _derived(new Map([...resolved].filter(([id]) => !hiddenNodes.includes(id))));\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const labelOf = (id: string) => resolved.get(id)?.label ?? id;\n\n    function toggle(id: string) {\n      hiddenNodes = hiddenNodes.includes(id)\n        ? hiddenNodes.filter((item) => item !== id)\n        : [...hiddenNodes, id];\n    }\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 chord = instance(\n          'chord',\n          () => new ChordDiagram<Node, Link>({ linkValue: (link) => link.amount }),\n        );\n        chord.setConfig({\n          linkValue: (link) => link.amount,\n          nodeColor: (node) => (node as Node).color,\n          linkColor: (link) => (link.source as Node).color,\n          // 有图例时不在弧旁写名字：径向排的中文在上下两侧是竖着的，不好读\n          nodeLabel: (node) => (legend ? '' : (node as Node).label),\n          padAngle: 0.04,\n          nodeWidth: 14,\n          nodeLabelAlignment: ChordLabelAlignment.Perpendicular,\n          nodeLabelColor: () => colors.textMuted,\n        });\n        return {\n          component: chord,\n          data: flowData(visible, links),\n          triggers: {\n            [ChordDiagram.selectors.node]: (node: { data: Node; _state: { value?: number } }) =>\n              chart.tooltip(\n                chartTooltip(node.data.label, [\n                  {\n                    label: lang.chartTotal,\n                    color: node.data.color,\n                    value: valueText(node._state.value),\n                  },\n                ]),\n              ),\n            [ChordDiagram.selectors.link]: (ribbon: {\n              data: { source: Node; target: Node; value: NumericValue };\n            }) =>\n              chart.tooltip(\n                chartTooltip(\n                  lang.chartFlowLabel(ribbon.data.source.label, ribbon.data.target.label),\n                  [\n                    {\n                      label: lang.chartValue,\n                      color: ribbon.data.source.color,\n                      value: valueText(ribbon.data.value),\n                    },\n                  ],\n                ),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        sx={[chordChartStyles.root, sx]}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? [...resolved.values()].map((node) => ({\n                key: node.id,\n                label: node.label,\n                color: node.color,\n              }))\n            : []\n        }\n        hiddenKeys={hiddenNodes}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={chordChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        table={{\n          columns: [lang.chartFlow, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: links\n            .filter((link) => visible.has(link.source) && visible.has(link.target))\n            .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":"ChordChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/ChordChart.tsx"],"sourcesContent":["/**\n * 弦图：节点排成一圈，两两之间的流量画成弦，看几方之间相互往来的多少（部门协作、地区间人口流动、贸易往来）。\n *\n *   <ChordChart aria-label=\"部门协作\" nodes={departments} links={collaborations} />\n *\n * 数据同 SankeyChart（节点 { id, label?, color? }，流向 { source, target, value }）；弦取起点节点的颜色。\n * 悬停一段弧出这个节点的总量并突出它的弦，悬停一根弦出“起点 → 终点”的流量；点图例隐藏一个节点，连同它的弦。\n * 布局见 chordLayout：弧长是流入加流出，弦的两端都按流量定宽。\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 { svgNumber } from '../utils/data/number';\nimport type { PartProps } from '../utils/props';\nimport { flowData, resolveFlowNodes, type FlowLink, type FlowNode } from './flow';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { chordLayout } from './layout/chord';\nimport { ChartTooltipBox, chartSvgStyles, pointerIn, usePlotArea, type ChartTip } from './plot';\nimport { arcPath, polarPoint, ribbonPath } from './shape';\nimport { estimateTextWidth } from './text-size';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface ChordChartProps 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 true\n   */\n  legend?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示一个圆形的骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 隐藏的节点（存 id）：点图例时写回，父级可以写 _hiddenNodes={ids} */\n  _hiddenNodes?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n}\n\n/** ChordChart 的样式：弧、弦、名字、骨架 */\nexport const chordChartStyles = css.create({\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n  node: { transition: `opacity ${t.durations.sm} ${t.easings.standard}` },\n  link: {\n    fillOpacity: 0.45,\n    stroke: '_surface',\n    strokeOpacity: 0.6,\n    strokeWidth: 0.5,\n    transition: `fill-opacity ${t.durations.sm} ${t.easings.standard}`,\n  },\n  linkActive: { fillOpacity: 0.85 },\n  linkFaded: { fillOpacity: 0.12 },\n  nodeFaded: { opacity: 0.3 },\n  label: { fill: '_textMuted', fontSize: '_xs' },\n});\n\n/** 弧的粗细、弧与弦之间的空、弧之间的空隙（弧度） */\nconst ARC_WIDTH = 14;\nconst ARC_GAP = 3;\nconst PAD_ANGLE = 0.04;\n\n/** 悬停的是弧还是弦 */\ninterface ChordHover {\n  kind: 'node' | 'link';\n  index: number;\n  x: number;\n  y: number;\n}\n\n/** 弦图 */\nexport const ChordChart = _component(\n  ({\n    nodes,\n    links,\n    valueFormat,\n    unit,\n    height = 320,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    _hiddenNodes: hiddenNodes = _bindable<string[]>([]),\n    empty,\n    ...rest\n  }: ChordChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const resolved = _derived(resolveFlowNodes(nodes));\n    const visible = _derived(new Map([...resolved].filter(([id]) => !hiddenNodes.includes(id))));\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<ChordHover | null>(null);\n\n    function toggle(id: string) {\n      hiddenNodes = hiddenNodes.includes(id)\n        ? hiddenNodes.filter((item) => item !== id)\n        : [...hiddenNodes, id];\n    }\n\n    const layout = _derived.by(() => {\n      const data = flowData(visible, links);\n      const order = new Map(data.nodes.map((node, position) => [node.id, position]));\n      const { groups, chords } = chordLayout(\n        data.nodes.length,\n        data.links.map((link) => ({\n          source: order.get(link.source)!,\n          target: order.get(link.target)!,\n          value: link.amount,\n        })),\n        PAD_ANGLE,\n      );\n      return { nodes: data.nodes, flows: data.links, groups, chords };\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 chordState = (index: number) => {\n      const current = hovered;\n      if (!current) return undefined;\n      if (current.kind === 'link') return current.index === index;\n      const flow = layout.flows[index]!;\n      const id = layout.nodes[current.index]?.id;\n      return flow.source === id || flow.target === id;\n    };\n\n    function renderPlot() {\n      const { width, height: plotHeight } = area;\n      // 没有图例时名字写在弧外：留出最长的名字\n      const labelRoom = legend\n        ? 4\n        : Math.max(0, ...layout.nodes.map((node) => estimateTextWidth(node.label))) + 12;\n      const outer = Math.max(\n        0,\n        Math.min(width / 2 - labelRoom, plotHeight / 2 - (legend ? 4 : 20)),\n      );\n      const inner = Math.max(0, outer - ARC_WIDTH);\n      const current = hovered;\n      return (\n        <svg\n          width={width}\n          height={plotHeight}\n          {...css.attrs(chartSvgStyles.svg)}\n          onPointermove={onPointermove}\n          onPointerleave={() => (hovered = null)}\n        >\n          <g\n            transform={`translate(${svgNumber(width / 2)},${svgNumber(plotHeight / 2)})`}\n            {...css.attrs(chartSvgStyles.fadeIn)}\n          >\n            <g data-part=\"links\">\n              {layout.chords.map((chord) => {\n                const state = chordState(chord.index);\n                const source = visible.get(layout.flows[chord.index]!.source)!;\n                return (\n                  <path\n                    key={chord.index}\n                    data-part=\"link\"\n                    data-link={chord.index}\n                    d={ribbonPath(Math.max(0, inner - ARC_GAP), chord.source, chord.target)}\n                    {...css.attrs(\n                      chordChartStyles.link,\n                      chartSvgStyles.fill(source.color),\n                      state === true && chordChartStyles.linkActive,\n                      state === false && chordChartStyles.linkFaded,\n                    )}\n                  />\n                );\n              })}\n            </g>\n            {layout.groups.map((group, index) => {\n              const node = layout.nodes[index]!;\n              const middle = (group.start + group.end) / 2;\n              const [x, y] = polarPoint(outer + 8, middle);\n              const faded = current?.kind === 'node' && current.index !== index;\n              return (\n                <g key={node.id}>\n                  <path\n                    data-part=\"node\"\n                    data-node={index}\n                    d={arcPath({ inner, outer, start: group.start, end: group.end, corner: 2 })}\n                    {...css.attrs(\n                      chordChartStyles.node,\n                      chartSvgStyles.fill(node.color),\n                      faded && chordChartStyles.nodeFaded,\n                    )}\n                  />\n                  {!legend && (\n                    <text\n                      x={svgNumber(x)}\n                      y={svgNumber(y)}\n                      // 名字横着写：右半圈左对齐、左半圈右对齐，上下两端居中\n                      text-anchor={Math.abs(x) < outer * 0.2 ? 'middle' : x > 0 ? 'start' : 'end'}\n                      dominant-baseline=\"central\"\n                      {...css.attrs(chordChartStyles.label, chartSvgStyles.noPointer)}\n                    >\n                      {node.label}\n                    </text>\n                  )}\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 group = layout.groups[current.index];\n        if (!node || !group) return null;\n        return {\n          x: current.x,\n          y: current.y,\n          content: chartTooltip(node.label, [\n            { label: lang.chartTotal, color: node.color, value: valueText(group.value) },\n          ]),\n        };\n      }\n      const flow = layout.flows[current.index];\n      if (!flow) return null;\n      const source = resolved.get(flow.source)!;\n      return {\n        x: current.x,\n        y: current.y,\n        content: chartTooltip(lang.chartFlowLabel(source.label, labelOf(flow.target)), [\n          { label: lang.chartValue, color: source.color, value: valueText(flow.value) },\n        ]),\n      };\n    };\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? [...resolved.values()].map((node) => ({\n                key: node.id,\n                label: node.label,\n                color: node.color,\n              }))\n            : []\n        }\n        hiddenKeys={hiddenNodes}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={chordChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        table={{\n          columns: [lang.chartFlow, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: links\n            .filter((link) => visible.has(link.source) && visible.has(link.target))\n            .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/ComboChart.d.ts

@@ -1,6 +1,7 @@
 import type { NumericFormat } from '../config/lang/format';
-import { type LineCurves, type LineDots } from './LineChart';
+import type { LineDots } from './LineChart';
 import type { ChartSeries } from './series';
+import type { LineCurves } from './shape';
 import { type XYChartProps } from './XYChart';
 /** 组合图的一个系列 */
 export interface ComboSeries<T> extends ChartSeries<T> {