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

package/dist/charts/ComboChart.js

@@ -1,34 +1,11 @@
-import { colors } from "../config/theme/tokens.js";
+import { chartBars, chartDots, chartLines } from "./marks.js";
 import { seriesNumber } from "./series.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 { GroupedBar, Line, Scatter, StackedBar } from "@unovis/ts";
 //#region src/charts/ComboChart.tsx
-/**
-* 组合图：同一组类目上既有柱又有线（金额与比率、数量与单价），单位不同的系列画在右侧的第二数值轴上。
-*
-*   <ComboChart
-*     aria-label="月度销售与完成率"
-*     data={months}
-*     index="month"
-*     series={[
-*       { key: 'planned', label: '计划销售' },
-*       { key: 'actual', label: '实际销售' },
-*       { key: 'rate', label: '完成率', type: 'line', axis: 'secondary' },
-*     ]}
-*     unit="万元"
-*     secondaryFormat={{ style: 'percent' }}
-*   />
-*
-* 柱子并排（stacked 时叠起），线可以带数据点。第二数值轴的刻度与主轴对齐（同一组网格线），
-* 它的单位写在右上方，提示框、数据表里按各自的格式与单位显示。其余（图例、目标线、标注、区间、下钻）同 XYChart。
-*/
 /** 组合图的一个系列 */
 /** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
-/** 数据点的直径（px） */
-var DOT_SIZE = 8;
 /** 组合图：柱 + 线，可以有第二数值轴 */
 var ComboChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
@@ -44,11 +21,12 @@ var ComboChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const isLine = (key) => series.value.find((item) => item.key === key)?.type === "line";
 	const secondaryKeys = computed(() => series.value.filter((item) => item.axis === "secondary").map((item) => item.key));
 	const kind = computed(() => ({
+		band: true,
 		skeleton: "bars",
 		stacked: stacked.value,
+		stackSeries: (item) => !isLine(item.key),
 		crosshairDots: true,
 		crosshairSeries: (item) => isLine(item.key),
-		itemSelector: stacked.value ? StackedBar.selectors.bar : GroupedBar.selectors.bar,
 		secondary: secondaryKeys.value.length > 0 ? {
 			keys: secondaryKeys.value,
 			format: secondaryFormat.value,
@@ -61,74 +39,20 @@ var ComboChart = /*#__PURE__*/ _component((_props, _ctx) => {
 			const barValues = values(bars);
 			return [...stacked.value ? [barValues.reduce((sum, value) => sum + Math.max(value, 0), 0), barValues.reduce((sum, value) => sum + Math.min(value, 0), 0)] : barValues, ...values(lines)];
 		}),
-		components: ({ series: shown, x, y, instance, events }) => {
-			const bars = shown.filter((item) => !isLine(item.key));
-			const lines = shown.filter((item) => isLine(item.key));
-			const components = [];
-			if (bars.length > 0) {
-				const common = {
-					x,
-					y: bars.map(y),
-					color: (_row, position) => bars[position]?.color,
-					roundedCorners: radius.value,
-					events
-				};
-				if (stacked.value) {
-					const stack = instance("stacked", () => new StackedBar({
-						x,
-						y: []
-					}));
-					stack.setConfig({
-						...common,
-						barPadding: .4,
-						barMaxWidth: 48
-					});
-					components.push(stack);
-				} else {
-					const group = instance("grouped", () => new GroupedBar({
-						x,
-						y: []
-					}));
-					group.setConfig({
-						...common,
-						groupPadding: .3,
-						barPadding: .1,
-						groupMaxWidth: 96,
-						barMinHeight: 0
-					});
-					components.push(group);
-				}
-			}
-			if (lines.length > 0) {
-				const line = instance("line", () => new Line({
-					x,
-					y: []
-				}));
-				line.setConfig({
-					x,
-					y: lines.map(y),
-					color: (_rows, position) => lines[position]?.color,
-					curveType: CURVES[curve.value],
-					lineWidth: 2
-				});
-				components.push(line);
-				if (dots.value !== "none") for (const item of lines) {
-					const points = instance(`dots:${item.key}`, () => new Scatter({
-						x,
-						y: () => 0
-					}));
-					points.setConfig({
-						x,
-						y: y(item),
-						size: DOT_SIZE,
-						color: dots.value === "hollow" ? colors.surface : item.color,
-						strokeColor: item.color,
-						strokeWidth: dots.value === "hollow" ? 2 : 0
-					});
-					components.push(points);
-				}
-			}
-			return components;
+		render: (context) => {
+			const bars = context.series.filter((item) => !isLine(item.key));
+			const lines = context.series.filter((item) => isLine(item.key));
+			return [
+				chartBars(context, bars, {
+					stacked: stacked.value,
+					radius: radius.value
+				}),
+				chartLines(context, lines, {
+					curve: curve.value,
+					width: 2
+				}),
+				dots.value !== "none" && chartDots(context, lines, dots.value)
+			];
 		}
 	}));
 	return () => createVNode(XYChart, mergeJsxProps(rest, {

package/dist/charts/ComboChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/ComboChart.tsx"],"sourcesContent":["/**\n * 组合图：同一组类目上既有柱又有线（金额与比率、数量与单价），单位不同的系列画在右侧的第二数值轴上。\n *\n *   <ComboChart\n *     aria-label=\"月度销售与完成率\"\n *     data={months}\n *     index=\"month\"\n *     series={[\n *       { key: 'planned', label: '计划销售' },\n *       { key: 'actual', label: '实际销售' },\n *       { key: 'rate', label: '完成率', type: 'line', axis: 'secondary' },\n *     ]}\n *     unit=\"万元\"\n *     secondaryFormat={{ style: 'percent' }}\n *   />\n *\n * 柱子并排（stacked 时叠起），线可以带数据点。第二数值轴的刻度与主轴对齐（同一组网格线），\n * 它的单位写在右上方，提示框、数据表里按各自的格式与单位显示。其余（图例、目标线、标注、区间、下钻）同 XYChart。\n */\nimport { GroupedBar, Line, Scatter, StackedBar, type XYComponentCore } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { NumericFormat } from '../config/lang/format';\nimport { colors } from '../config/theme/tokens';\nimport { CURVES, type LineCurves, type LineDots } from './LineChart';\nimport type { ChartSeries } from './series';\nimport { seriesNumber } from './series';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 组合图的一个系列 */\nexport interface ComboSeries<T> extends ChartSeries<T> {\n  /** 画法：bar 柱（默认）、line 线 */\n  type?: 'bar' | 'line';\n  /** 数值轴：primary 左侧的主轴（默认），secondary 右侧的第二数值轴（单位不同的量） */\n  axis?: 'primary' | 'secondary';\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface ComboChartProps<T extends object> extends Omit<XYChartProps<T>, 'series'> {\n  /** 系列：柱或线，画在主轴或第二数值轴上 */\n  series: readonly ComboSeries<T>[];\n  /** 第二数值轴的格式（比率写 `{ style: 'percent' }`） */\n  secondaryFormat?: NumericFormat;\n  /** 第二数值轴的单位：显示在右上方 */\n  secondaryUnit?: string;\n  /** 柱子堆叠：同一类目的柱叠成一根；默认并排 */\n  stacked?: boolean;\n  /** 线的形状，默认 linear */\n  curve?: keyof LineCurves;\n  /** 线上的数据点，默认 filled */\n  dots?: keyof LineDots;\n  /** 柱子末端的圆角（px），默认 4 */\n  radius?: number;\n}\n\n/** 数据点的直径（px） */\nconst DOT_SIZE = 8;\n\n/** 组合图：柱 + 线，可以有第二数值轴 */\nexport const ComboChart = _component(\n  <T extends object>({\n    series,\n    secondaryFormat,\n    secondaryUnit,\n    stacked = false,\n    curve = 'linear',\n    dots = 'filled',\n    radius = 4,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: ComboChartProps<T>) => {\n    const isLine = (key: string) => series.find((item) => item.key === key)?.type === 'line';\n    const secondaryKeys = _derived(\n      series.filter((item) => item.axis === 'secondary').map((item) => item.key as string),\n    );\n\n    const kind = _derived<XYChartKind<T>>({\n      skeleton: 'bars',\n      stacked,\n      crosshairDots: true,\n      // 十字线只在线上画圆点，柱子不画\n      crosshairSeries: (item) => isLine(item.key),\n      itemSelector: stacked ? StackedBar.selectors.bar : GroupedBar.selectors.bar,\n      secondary:\n        secondaryKeys.length > 0\n          ? { keys: secondaryKeys, format: secondaryFormat, unit: secondaryUnit }\n          : undefined,\n      // 主轴的范围：堆叠的柱按正负各自的总和，线按各自的值\n      domainValues: (rows, shown) =>\n        rows.flatMap((row) => {\n          const bars = shown.filter((item) => !isLine(item.key));\n          const lines = shown.filter((item) => isLine(item.key));\n          const values = (list: typeof shown) =>\n            list.map((item) => seriesNumber(row, item.key) ?? 0);\n          const barValues = values(bars);\n          return [\n            ...(stacked\n              ? [\n                  barValues.reduce((sum, value) => sum + Math.max(value, 0), 0),\n                  barValues.reduce((sum, value) => sum + Math.min(value, 0), 0),\n                ]\n              : barValues),\n            ...values(lines),\n          ];\n        }),\n      components: ({ series: shown, x, y, instance, events }) => {\n        const bars = shown.filter((item) => !isLine(item.key));\n        const lines = shown.filter((item) => isLine(item.key));\n        const components: XYComponentCore<T>[] = [];\n        if (bars.length > 0) {\n          const common = {\n            x,\n            y: bars.map(y),\n            color: (_row: T, position: number) => bars[position]?.color,\n            roundedCorners: radius,\n            events,\n          };\n          if (stacked) {\n            const stack = instance('stacked', () => new StackedBar<T>({ x, y: [] }));\n            stack.setConfig({ ...common, barPadding: 0.4, barMaxWidth: 48 });\n            components.push(stack);\n          } else {\n            const group = instance('grouped', () => new GroupedBar<T>({ x, y: [] }));\n            group.setConfig({\n              ...common,\n              groupPadding: 0.3,\n              barPadding: 0.1,\n              groupMaxWidth: 96,\n              barMinHeight: 0,\n            });\n            components.push(group);\n          }\n        }\n        if (lines.length > 0) {\n          const line = instance('line', () => new Line<T>({ x, y: [] }));\n          line.setConfig({\n            x,\n            y: lines.map(y),\n            color: (_rows: T[], position: number) => lines[position]?.color,\n            curveType: CURVES[curve],\n            lineWidth: 2,\n          });\n          components.push(line);\n          if (dots !== 'none')\n            for (const item of lines) {\n              const points = instance(`dots:${item.key}`, () => new Scatter<T>({ x, y: () => 0 }));\n              points.setConfig({\n                x,\n                y: y(item),\n                size: DOT_SIZE,\n                color: dots === 'hollow' ? colors.surface : item.color,\n                strokeColor: item.color,\n                strokeWidth: dots === 'hollow' ? 2 : 0,\n              });\n              components.push(points);\n            }\n        }\n        return components;\n      },\n    });\n    return () => <XYChart {...rest} series={series} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ComboChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/ComboChart.tsx"],"sourcesContent":["/**\n * 组合图：同一组类目上既有柱又有线（金额与比率、数量与单价），单位不同的系列画在右侧的第二数值轴上。\n *\n *   <ComboChart\n *     aria-label=\"月度销售与完成率\"\n *     data={months}\n *     index=\"month\"\n *     series={[\n *       { key: 'planned', label: '计划销售' },\n *       { key: 'actual', label: '实际销售' },\n *       { key: 'rate', label: '完成率', type: 'line', axis: 'secondary' },\n *     ]}\n *     unit=\"万元\"\n *     secondaryFormat={{ style: 'percent' }}\n *   />\n *\n * 柱子并排（stacked 时叠起），线可以带数据点。第二数值轴的刻度与主轴对齐（同一组网格线），\n * 它的单位写在右上方，提示框、数据表里按各自的格式与单位显示。其余（图例、目标线、标注、区间、下钻）同 XYChart。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { NumericFormat } from '../config/lang/format';\nimport type { LineDots } from './LineChart';\nimport { chartBars, chartDots, chartLines } from './marks';\nimport type { ChartSeries } from './series';\nimport { seriesNumber } from './series';\nimport type { LineCurves } from './shape';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 组合图的一个系列 */\nexport interface ComboSeries<T> extends ChartSeries<T> {\n  /** 画法：bar 柱（默认）、line 线 */\n  type?: 'bar' | 'line';\n  /** 数值轴：primary 左侧的主轴（默认），secondary 右侧的第二数值轴（单位不同的量） */\n  axis?: 'primary' | 'secondary';\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface ComboChartProps<T extends object> extends Omit<XYChartProps<T>, 'series'> {\n  /** 系列：柱或线，画在主轴或第二数值轴上 */\n  series: readonly ComboSeries<T>[];\n  /** 第二数值轴的格式（比率写 `{ style: 'percent' }`） */\n  secondaryFormat?: NumericFormat;\n  /** 第二数值轴的单位：显示在右上方 */\n  secondaryUnit?: string;\n  /** 柱子堆叠：同一类目的柱叠成一根；默认并排 */\n  stacked?: boolean;\n  /** 线的形状，默认 linear */\n  curve?: keyof LineCurves;\n  /** 线上的数据点，默认 filled */\n  dots?: keyof LineDots;\n  /** 柱子末端的圆角（px），默认 4 */\n  radius?: number;\n}\n\n/** 组合图：柱 + 线，可以有第二数值轴 */\nexport const ComboChart = _component(\n  <T extends object>({\n    series,\n    secondaryFormat,\n    secondaryUnit,\n    stacked = false,\n    curve = 'linear',\n    dots = 'filled',\n    radius = 4,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: ComboChartProps<T>) => {\n    const isLine = (key: string) => series.find((item) => item.key === key)?.type === 'line';\n    const secondaryKeys = _derived(\n      series.filter((item) => item.axis === 'secondary').map((item) => item.key as string),\n    );\n\n    const kind = _derived<XYChartKind<T>>({\n      band: true,\n      skeleton: 'bars',\n      stacked,\n      // 只有柱叠起，线按各自的值\n      stackSeries: (item) => !isLine(item.key),\n      crosshairDots: true,\n      // 十字线只在线上画圆点，柱子不画\n      crosshairSeries: (item) => isLine(item.key),\n      secondary:\n        secondaryKeys.length > 0\n          ? { keys: secondaryKeys, format: secondaryFormat, unit: secondaryUnit }\n          : undefined,\n      // 主轴的范围：堆叠的柱按正负各自的总和，线按各自的值\n      domainValues: (rows, shown) =>\n        rows.flatMap((row) => {\n          const bars = shown.filter((item) => !isLine(item.key));\n          const lines = shown.filter((item) => isLine(item.key));\n          const values = (list: typeof shown) =>\n            list.map((item) => seriesNumber(row, item.key) ?? 0);\n          const barValues = values(bars);\n          return [\n            ...(stacked\n              ? [\n                  barValues.reduce((sum, value) => sum + Math.max(value, 0), 0),\n                  barValues.reduce((sum, value) => sum + Math.min(value, 0), 0),\n                ]\n              : barValues),\n            ...values(lines),\n          ];\n        }),\n      render: (context) => {\n        const bars = context.series.filter((item) => !isLine(item.key));\n        const lines = context.series.filter((item) => isLine(item.key));\n        return [\n          chartBars(context, bars, { stacked, radius }),\n          chartLines(context, lines, { curve, width: 2 }),\n          dots !== 'none' && chartDots(context, lines, dots),\n        ];\n      },\n    });\n    return () => <XYChart {...rest} series={series} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;AAuDA,IAAa,aAAa,0BACxB,QAAA,SAU0B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,kBAAAA,aAAA,QAAA,iBAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WANd,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACP,QAAQ;CAAA,MAAA,OAAAA,aAAA,QAAA,QACT,QAAQ;CAAA,MAAA,SAAAA,aAAA,QAAA,UACN,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBACwC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,UAAU,QAAgB,OAAA,MAAO,MAAM,SAAS,KAAK,QAAQ,GAAG,CAAC,EAAE,SAAS;CAClF,MAAM,gBAAaC,eACjB,OAAA,MAAO,QAAQ,SAAS,KAAK,SAAS,WAAW,CAAC,CAAC,KAAK,SAAS,KAAK,GAAa,CAAC;CAGtF,MAAM,OAAIA,gBAA4B;EACpC,MAAM;EACN,UAAU;EACV,SAAO,QAAA;EAEP,cAAc,SAAS,CAAC,OAAO,KAAK,GAAG;EACvC,eAAe;EAEf,kBAAkB,SAAS,OAAO,KAAK,GAAG;EAC1C,WACE,cAAA,MAAc,SAAS,IACnB;GAAE,MAAI,cAAA;GAAiB,QAAM,gBAAA;GAAmB,MAAI,cAAA;EAAgB,IACpE,KAAA;EAEN,eAAe,MAAM,UACnB,KAAK,SAAS,QAAQ;GACpB,MAAM,OAAO,MAAM,QAAQ,SAAS,CAAC,OAAO,KAAK,GAAG,CAAC;GACrD,MAAM,QAAQ,MAAM,QAAQ,SAAS,OAAO,KAAK,GAAG,CAAC;GACrD,MAAM,UAAU,SACd,KAAK,KAAK,SAAS,aAAa,KAAK,KAAK,GAAG,KAAK,CAAC;GACrD,MAAM,YAAY,OAAO,IAAI;GAC7B,OAAO,CACL,GAAI,QAAA,QACA,CACE,UAAU,QAAQ,KAAK,UAAU,MAAM,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,GAC5D,UAAU,QAAQ,KAAK,UAAU,MAAM,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC,IAE/D,WACJ,GAAG,OAAO,KAAK,CAAC;EAEpB,CAAC;EACH,SAAS,YAAY;GACnB,MAAM,OAAO,QAAQ,OAAO,QAAQ,SAAS,CAAC,OAAO,KAAK,GAAG,CAAC;GAC9D,MAAM,QAAQ,QAAQ,OAAO,QAAQ,SAAS,OAAO,KAAK,GAAG,CAAC;GAC9D,OAAO;IACL,UAAU,SAAS,MAAM;KAAE,SAAO,QAAA;KAAE,QAAM,OAAA;IAAC,CAAC;IAC5C,WAAW,SAAS,OAAO;KAAE,OAAK,MAAA;KAAE,OAAO;IAAE,CAAC;IAC9C,KAAA,UAAS,UAAU,UAAU,SAAS,OAAK,KAAA,KAAM;GAAC;EAEtD;CACF,EAAC;CACD,aAAOC,YAAA,SAAAC,cAAmB,MAAI;EAAA,UAAA,OAAA;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;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/charts/DonutChart.d.ts

@@ -57,8 +57,13 @@ export interface DonutChartProps<T extends object> extends PartProps<'div', 'rol
      */
     onItemClick?: (row: T, index: number) => void;
 }
-/** DonutChart 的样式：skeleton */
+/** DonutChart 的样式：skeleton、扇区、中间的文字 */
 export declare const donutChartStyles: Readonly<{
+    background: css.CompiledStyles;
+    centerLabel: css.CompiledStyles;
+    centerValue: css.CompiledStyles;
+    ring: css.CompiledStyles;
+    segment: css.CompiledStyles;
     skeleton: css.CompiledStyles;
 }>;
 /** 环形图 */

package/dist/charts/DonutChart.js

@@ -1,33 +1,55 @@
+import { svgNumber } from "../utils/data/number.js";
 import { toNumber } from "../utils/data/numeric.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 } from "./shape.js";
 import { ChartFrame, chartTooltip, useChartValueText } from "./frame.js";
 import { resolveColor, seriesValue } from "./series.js";
-import { useSingleChart } from "./single.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 { Donut } from "@unovis/ts";
 //#region src/charts/DonutChart.tsx
-/**
-* 环形图（arcWidth 为 0 时是饼图）：每一行一个扇区，中间写合计；悬停扇区出提示框（数值与占比），点图例隐藏一项。
-*
-*   <DonutChart aria-label="访问来源" data={channels} index="name" value="visits" />
-*   <DonutChart data={budget} index="dept" value="amount" unit="万元" valueFormat={{ maximumFractionDigits: 0 }} />
-*
-* 颜色默认按顺序取图表色板（itemColor 可以按行给）；值可以是 number、bigint、Decimal，提示框与数据表按原值显示。
-* 图例、单位、加载与空状态、给读屏的数据表（类目、数值、占比）同其他图表（见 ChartFrame）。
-*/
 /** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
-/** DonutChart 的样式：skeleton */
-var donutChartStyles = css.create({ skeleton: {
-	display: "block",
-	height: "100%",
-	aspectRatio: "1",
-	marginInline: "auto",
-	borderRadius: "50%"
-} });
+/** DonutChart 的样式：skeleton、扇区、中间的文字 */
+var donutChartStyles = css.create({
+	ring: {
+		transformBox: "fill-box",
+		transformOrigin: "center",
+		opacity: {
+			default: 1,
+			"@starting-style": 0
+		},
+		scale: {
+			default: "1",
+			"@starting-style": "0.9"
+		},
+		transition: `opacity ${t.durations.lg} ${t.easings.standard}, scale ${t.durations.lg} ${t.easings.standard}`
+	},
+	background: { fill: "_fill" },
+	segment: {
+		stroke: "_surface",
+		strokeWidth: 1
+	},
+	centerValue: {
+		fill: "_text",
+		fontSize: "_xl",
+		fontWeight: "_semibold"
+	},
+	centerLabel: {
+		fill: "_textMuted",
+		fontSize: "_xs"
+	},
+	skeleton: {
+		display: "block",
+		height: "100%",
+		aspectRatio: "1",
+		marginInline: "auto",
+		borderRadius: "50%"
+	}
+});
 /** 扇区的数据：一行加上它的名字与颜色 */
 /** 环形图 */
 var DonutChart = /*#__PURE__*/ _component((_props, _ctx) => {
@@ -72,40 +94,96 @@ var DonutChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	function toggle(name) {
 		hiddenItems.value = hiddenItems.value.includes(name) ? hiddenItems.value.filter((item) => item !== name) : [...hiddenItems.value, name];
 	}
-	let plot = shallowRef(null);
-	const chart = useSingleChart(() => ({
-		element: plot.value,
-		ready: !loading.value && data.value.length > 0,
-		tooltip: tooltip.value,
-		build: (instance) => {
-			const donut = instance("donut", () => new Donut({ value: () => 0 }));
-			donut.setConfig({
-				value: (slice) => slice.value === void 0 ? 0 : toNumber(slice.value),
-				id: (slice) => slice.name,
-				color: (slice) => slice.color,
-				arcWidth: arcWidth.value,
-				padAngle: arcWidth.value > 0 ? .01 : 0,
-				cornerRadius: arcWidth.value > 0 ? 3 : 0,
-				centralLabel: centerLabel.value === false ? void 0 : centerLabel.value ?? format.number(total.value, valueFormat.value),
-				centralSubLabel: centerLabel.value === false ? void 0 : centerSubLabel.value ?? lang.chartTotal,
-				showBackground: true,
-				events: { [Donut.selectors.segment]: { click: (arc) => onItemClick.value?.(arc.data.row, data.value.indexOf(arc.data.row)) } }
-			});
+	const area = usePlotArea();
+	let hovered = shallowRef(null);
+	/** 扇区的位置：从 12 点钟方向顺时针，按数值分角度；扇区之间留一点缝 */
+	const arcs = computed(() => {
+		const pad = arcWidth.value > 0 && visible.value.length > 1 ? .012 : 0;
+		let angle = 0;
+		return visible.value.map((slice) => {
+			const amount = slice.value === void 0 ? 0 : Math.max(toNumber(slice.value), 0);
+			const sweep = total.value > 0 ? amount / total.value * Math.PI * 2 : 0;
+			const start = angle;
+			angle += sweep;
 			return {
-				component: donut,
-				data: [...visible.value],
-				triggers: { [Donut.selectors.segment]: (arc) => chart.tooltip(chartTooltip(arc.data.name, [{
-					label: lang.chartValue,
-					color: arc.data.color,
-					value: valueText(arc.data.value)
-				}, {
-					label: lang.chartShare,
-					color: "transparent",
-					value: shareText(arc.data.value)
-				}])) }
+				slice,
+				start: start + pad / 2,
+				end: Math.max(start + pad / 2, angle - pad / 2)
 			};
+		});
+	});
+	function onPointermove(event) {
+		const target = event.target.closest?.("[data-index]");
+		if (!target) {
+			hovered.value = null;
+			return;
 		}
-	}));
+		const { x, y } = pointerIn(event, event.currentTarget);
+		hovered.value = {
+			index: Number(target.getAttribute("data-index")),
+			x,
+			y
+		};
+	}
+	function onClick(event) {
+		const target = event.target.closest?.("[data-index]");
+		const slice = target && arcs.value[Number(target.getAttribute("data-index"))]?.slice;
+		if (slice) onItemClick.value?.(slice.row, data.value.indexOf(slice.row));
+	}
+	function renderPlot() {
+		const { width, height } = area;
+		const outer = Math.max(0, Math.min(width, height) / 2 - 8);
+		const inner = arcWidth.value > 0 ? Math.max(0, outer - arcWidth.value) : 0;
+		const center = centerLabel.value === false || inner < 24 ? void 0 : centerLabel.value ?? format.number(total.value, valueFormat.value);
+		return createVNode("svg", mergeJsxProps({
+			"width": width,
+			"height": height
+		}, css.attrs(chartSvgStyles.svg), {
+			"onPointermove": onPointermove,
+			"onPointerleave": _cache[0] || (_cache[0] = () => hovered.value = null),
+			"onClick": onClick
+		}), [createVNode("g", { "transform": `translate(${svgNumber(width / 2)},${svgNumber(height / 2)})` }, [createVNode("g", css.attrs(donutChartStyles.ring), [inner > 0 && createVNode("path", mergeJsxProps({ "d": arcPath({
+			inner,
+			outer,
+			start: 0,
+			end: Math.PI * 2
+		}) }, css.attrs(donutChartStyles.background)), null), arcs.value.map((arc, index) => createVNode("path", mergeJsxProps({
+			"key": arc.slice.name,
+			"data-part": "segment",
+			"data-index": index,
+			"d": arcPath({
+				inner,
+				outer: hovered.value?.index === index ? outer + 6 : outer,
+				start: arc.start,
+				end: arc.end,
+				corner: arcWidth.value > 0 ? 3 : 0
+			})
+		}, css.attrs(donutChartStyles.segment, chartSvgStyles.fill(arc.slice.color), chartSvgStyles.dimmable, hovered.value !== null && hovered.value.index !== index && chartSvgStyles.dimmed)), null))]), center !== void 0 && createVNode("g", mergeJsxProps({ "data-part": "center-label" }, css.attrs(chartSvgStyles.noPointer)), [createVNode("text", mergeJsxProps({
+			"y": -2,
+			"text-anchor": "middle"
+		}, css.attrs(donutChartStyles.centerValue)), [center]), createVNode("text", mergeJsxProps({
+			"y": 18,
+			"text-anchor": "middle"
+		}, css.attrs(donutChartStyles.centerLabel)), [centerSubLabel.value ?? lang.chartTotal])])])]);
+	}
+	const tip = () => {
+		const current = hovered.value;
+		const slice = current && arcs.value[current.index]?.slice;
+		if (!tooltip.value || !current || !slice) return null;
+		return {
+			x: current.x,
+			y: current.y,
+			content: chartTooltip(slice.name, [{
+				label: lang.chartValue,
+				color: slice.color,
+				value: valueText(slice.value)
+			}, {
+				label: lang.chartShare,
+				color: "transparent",
+				value: shareText(slice.value)
+			}])
+		};
+	};
 	return () => createVNode(ChartFrame, mergeJsxProps(rest, {
 		"unit": unit.value,
 		"height": height.value,
@@ -132,7 +210,12 @@ var DonutChart = /*#__PURE__*/ _component((_props, _ctx) => {
 				cells: [slice.value === void 0 ? lang.emptyValue : format.number(slice.value, valueFormat.value), shareText(slice.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: "DonutChart",

package/dist/charts/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/DonutChart.tsx"],"sourcesContent":["/**\n * 环形图（arcWidth 为 0 时是饼图）：每一行一个扇区，中间写合计；悬停扇区出提示框（数值与占比），点图例隐藏一项。\n *\n *   <DonutChart aria-label=\"访问来源\" data={channels} index=\"name\" value=\"visits\" />\n *   <DonutChart data={budget} index=\"dept\" value=\"amount\" unit=\"万元\" valueFormat={{ maximumFractionDigits: 0 }} />\n *\n * 颜色默认按顺序取图表色板（itemColor 可以按行给）；值可以是 number、bigint、Decimal，提示框与数据表按原值显示。\n * 图例、单位、加载与空状态、给读屏的数据表（类目、数值、占比）同其他图表（见 ChartFrame）。\n */\nimport { Donut } 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 { Skeleton } from '../feedback/Skeleton';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { useSingleChart, type SingleChart } from './single';\nimport { resolveColor, seriesValue, type ChartColor, type NumericKey } from './series';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface DonutChartProps<T extends object>\n  extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 数据：每一行一个扇区 */\n  data: readonly T[];\n  /** 名称字段：图例、提示框、数据表里显示，也是隐藏一项时记的 key */\n  index: keyof T & string;\n  /** 数值字段 */\n  value: NumericKey<T>;\n  /** 每一项的颜色；不写时按顺序取图表色板 */\n  itemColor?: (row: T, index: number) => ChartColor | undefined;\n  /** 数值的格式（可缩放，如以万元为单位）：中间的合计、提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 240\n   */\n  height?: number | string;\n  /**\n   * 环的粗细（px）；0 是饼图\n   * @default 28\n   */\n  arcWidth?: number;\n  /** 中间的大字；默认是显示中各项的合计，false 时不写 */\n  centerLabel?: string | false;\n  /** 中间大字下面的小字；默认是“合计” */\n  centerSubLabel?: 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  /** 隐藏的项（存名称）：点图例时写回，父级可以写 _hiddenItems={names} */\n  _hiddenItems?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个扇区（下钻）：参数是这一行与它在 data 里的位置；写了它时指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (row: T, index: number) => void;\n}\n\n/** DonutChart 的样式：skeleton */\nexport const donutChartStyles = css.create({\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n});\n\n/** 扇区的数据：一行加上它的名字与颜色 */\ninterface Slice<T> {\n  row: T;\n  name: string;\n  color: string;\n  value: NumericValue | undefined;\n}\n\n/** 环形图 */\nexport const DonutChart = _component(\n  <T extends object>({\n    data,\n    index,\n    value,\n    itemColor,\n    valueFormat,\n    unit,\n    height = 240,\n    arcWidth = 28,\n    centerLabel,\n    centerSubLabel,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    onItemClick,\n    _hiddenItems: hiddenItems = _bindable<string[]>([]),\n    empty,\n    ...rest\n  }: DonutChartProps<T>) => {\n    const lang = useLang();\n    const format = useFormat();\n\n    // 颜色按原来的顺序定：隐藏一项时其余扇区不换色\n    const slices = _derived.by((): Slice<T>[] => {\n      return data.map((row, position) => ({\n        row,\n        name: String(row[index] ?? ''),\n        color: resolveColor(itemColor?.(row, position), position),\n        value: seriesValue(row, value),\n      }));\n    });\n    const visible = _derived(slices.filter((slice) => !hiddenItems.includes(slice.name)));\n    const total = _derived(\n      visible.reduce(\n        (sum, slice) => sum + (slice.value === undefined ? 0 : toNumber(slice.value)),\n        0,\n      ),\n    );\n\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const shareText = (amount: NumericValue | undefined) =>\n      amount === undefined || total === 0\n        ? lang.emptyValue\n        : format.number(toNumber(amount) / total, { style: 'percent', maximumFractionDigits: 1 });\n\n    function toggle(name: string) {\n      hiddenItems = hiddenItems.includes(name)\n        ? hiddenItems.filter((item) => item !== name)\n        : [...hiddenItems, name];\n    }\n\n    let plot = _state.raw<HTMLElement | null>(null);\n    const chart: SingleChart = useSingleChart<Slice<T>[]>(() => ({\n      element: plot,\n      ready: !loading && data.length > 0,\n      tooltip,\n      build: (instance) => {\n        const donut = instance('donut', () => new Donut<Slice<T>>({ value: () => 0 }));\n        donut.setConfig({\n          value: (slice) => (slice.value === undefined ? 0 : toNumber(slice.value)),\n          id: (slice) => slice.name,\n          color: (slice) => slice.color,\n          arcWidth,\n          padAngle: arcWidth > 0 ? 0.01 : 0,\n          cornerRadius: arcWidth > 0 ? 3 : 0,\n          centralLabel:\n            centerLabel === false ? undefined : (centerLabel ?? format.number(total, valueFormat)),\n          centralSubLabel: centerLabel === false ? undefined : (centerSubLabel ?? lang.chartTotal),\n          showBackground: true,\n          events: {\n            [Donut.selectors.segment]: {\n              click: (arc: { data: Slice<T> }) =>\n                onItemClick?.(arc.data.row, data.indexOf(arc.data.row)),\n            },\n          },\n        });\n        return {\n          component: donut,\n          data: [...visible],\n          triggers: {\n            [Donut.selectors.segment]: (arc: { data: Slice<T> }) =>\n              chart.tooltip(\n                chartTooltip(arc.data.name, [\n                  {\n                    label: lang.chartValue,\n                    color: arc.data.color,\n                    value: valueText(arc.data.value),\n                  },\n                  {\n                    label: lang.chartShare,\n                    color: 'transparent',\n                    value: shareText(arc.data.value),\n                  },\n                ]),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? slices.map((slice) => ({ key: slice.name, label: slice.name, color: slice.color }))\n            : []\n        }\n        hiddenKeys={hiddenItems}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={donutChartStyles.skeleton} />}\n        clickable={onItemClick != null}\n        isEmpty={data.length === 0}\n        empty={empty}\n        table={{\n          columns: [\n            lang.chartCategory,\n            unit ? `${lang.chartValue}（${unit}）` : lang.chartValue,\n            lang.chartShare,\n          ],\n          rows: visible.map((slice) => ({\n            header: slice.name,\n            cells: [\n              slice.value === undefined ? lang.emptyValue : format.number(slice.value, valueFormat),\n              shareText(slice.value),\n            ],\n          })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"DonutChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/DonutChart.tsx"],"sourcesContent":["/**\n * 环形图（arcWidth 为 0 时是饼图）：每一行一个扇区，中间写合计；悬停扇区出提示框（数值与占比），点图例隐藏一项。\n *\n *   <DonutChart aria-label=\"访问来源\" data={channels} index=\"name\" value=\"visits\" />\n *   <DonutChart data={budget} index=\"dept\" value=\"amount\" unit=\"万元\" valueFormat={{ maximumFractionDigits: 0 }} />\n *\n * 颜色默认按顺序取图表色板（itemColor 可以按行给）；值可以是 number、bigint、Decimal，提示框与数据表按原值显示。\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 { Skeleton } from '../feedback/Skeleton';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\nimport { svgNumber } from '../utils/data/number';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { ChartTooltipBox, chartSvgStyles, pointerIn, usePlotArea, type ChartTip } from './plot';\nimport { arcPath } from './shape';\nimport { resolveColor, seriesValue, type ChartColor, type NumericKey } from './series';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface DonutChartProps<T extends object>\n  extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 数据：每一行一个扇区 */\n  data: readonly T[];\n  /** 名称字段：图例、提示框、数据表里显示，也是隐藏一项时记的 key */\n  index: keyof T & string;\n  /** 数值字段 */\n  value: NumericKey<T>;\n  /** 每一项的颜色；不写时按顺序取图表色板 */\n  itemColor?: (row: T, index: number) => ChartColor | undefined;\n  /** 数值的格式（可缩放，如以万元为单位）：中间的合计、提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 240\n   */\n  height?: number | string;\n  /**\n   * 环的粗细（px）；0 是饼图\n   * @default 28\n   */\n  arcWidth?: number;\n  /** 中间的大字；默认是显示中各项的合计，false 时不写 */\n  centerLabel?: string | false;\n  /** 中间大字下面的小字；默认是“合计” */\n  centerSubLabel?: 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  /** 隐藏的项（存名称）：点图例时写回，父级可以写 _hiddenItems={names} */\n  _hiddenItems?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个扇区（下钻）：参数是这一行与它在 data 里的位置；写了它时指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (row: T, index: number) => void;\n}\n\n/** DonutChart 的样式：skeleton、扇区、中间的文字 */\nexport const donutChartStyles = css.create({\n  // 进场：整个环从略小淡入放大\n  ring: {\n    transformBox: 'fill-box',\n    transformOrigin: 'center',\n    opacity: { default: 1, '@starting-style': 0 },\n    scale: { default: '1', '@starting-style': '0.9' },\n    transition: `opacity ${t.durations.lg} ${t.easings.standard}, scale ${t.durations.lg} ${t.easings.standard}`,\n  },\n  background: { fill: '_fill' },\n  segment: { stroke: '_surface', strokeWidth: 1 },\n  centerValue: { fill: '_text', fontSize: '_xl', fontWeight: '_semibold' },\n  centerLabel: { fill: '_textMuted', fontSize: '_xs' },\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n});\n\n/** 扇区的数据：一行加上它的名字与颜色 */\ninterface Slice<T> {\n  row: T;\n  name: string;\n  color: string;\n  value: NumericValue | undefined;\n}\n\n/** 环形图 */\nexport const DonutChart = _component(\n  <T extends object>({\n    data,\n    index,\n    value,\n    itemColor,\n    valueFormat,\n    unit,\n    height = 240,\n    arcWidth = 28,\n    centerLabel,\n    centerSubLabel,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    onItemClick,\n    _hiddenItems: hiddenItems = _bindable<string[]>([]),\n    empty,\n    ...rest\n  }: DonutChartProps<T>) => {\n    const lang = useLang();\n    const format = useFormat();\n\n    // 颜色按原来的顺序定：隐藏一项时其余扇区不换色\n    const slices = _derived.by((): Slice<T>[] => {\n      return data.map((row, position) => ({\n        row,\n        name: String(row[index] ?? ''),\n        color: resolveColor(itemColor?.(row, position), position),\n        value: seriesValue(row, value),\n      }));\n    });\n    const visible = _derived(slices.filter((slice) => !hiddenItems.includes(slice.name)));\n    const total = _derived(\n      visible.reduce(\n        (sum, slice) => sum + (slice.value === undefined ? 0 : toNumber(slice.value)),\n        0,\n      ),\n    );\n\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const shareText = (amount: NumericValue | undefined) =>\n      amount === undefined || total === 0\n        ? lang.emptyValue\n        : format.number(toNumber(amount) / total, { style: 'percent', maximumFractionDigits: 1 });\n\n    function toggle(name: string) {\n      hiddenItems = hiddenItems.includes(name)\n        ? hiddenItems.filter((item) => item !== name)\n        : [...hiddenItems, name];\n    }\n\n    const area = usePlotArea();\n    let hovered = _state.raw<{ index: number; x: number; y: number } | null>(null);\n\n    /** 扇区的位置：从 12 点钟方向顺时针，按数值分角度；扇区之间留一点缝 */\n    const arcs = _derived.by(() => {\n      const pad = arcWidth > 0 && visible.length > 1 ? 0.012 : 0;\n      let angle = 0;\n      return visible.map((slice) => {\n        const amount = slice.value === undefined ? 0 : Math.max(toNumber(slice.value), 0);\n        const sweep = total > 0 ? (amount / total) * Math.PI * 2 : 0;\n        const start = angle;\n        angle += sweep;\n        return { slice, start: start + pad / 2, end: Math.max(start + pad / 2, angle - pad / 2) };\n      });\n    });\n\n    function onPointermove(event: PointerEvent) {\n      const target = (event.target as Element).closest?.('[data-index]');\n      if (!target) {\n        hovered = null;\n        return;\n      }\n      const { x, y } = pointerIn(event, event.currentTarget as Element);\n      hovered = { index: Number(target.getAttribute('data-index')), x, y };\n    }\n\n    function onClick(event: MouseEvent) {\n      const target = (event.target as Element).closest?.('[data-index]');\n      const slice = target && arcs[Number(target.getAttribute('data-index'))]?.slice;\n      if (slice) onItemClick?.(slice.row, data.indexOf(slice.row));\n    }\n\n    function renderPlot() {\n      const { width, height } = area;\n      // 留出悬停时扇区往外长的 6px\n      const outer = Math.max(0, Math.min(width, height) / 2 - 8);\n      const inner = arcWidth > 0 ? Math.max(0, outer - arcWidth) : 0;\n      const center =\n        centerLabel === false || inner < 24\n          ? undefined\n          : (centerLabel ?? format.number(total, valueFormat));\n      return (\n        <svg\n          width={width}\n          height={height}\n          {...css.attrs(chartSvgStyles.svg)}\n          onPointermove={onPointermove}\n          onPointerleave={() => (hovered = null)}\n          onClick={onClick}\n        >\n          <g transform={`translate(${svgNumber(width / 2)},${svgNumber(height / 2)})`}>\n            <g {...css.attrs(donutChartStyles.ring)}>\n              {inner > 0 && (\n                <path\n                  d={arcPath({ inner, outer, start: 0, end: Math.PI * 2 })}\n                  {...css.attrs(donutChartStyles.background)}\n                />\n              )}\n              {arcs.map((arc, index) => (\n                <path\n                  key={arc.slice.name}\n                  data-part=\"segment\"\n                  data-index={index}\n                  d={arcPath({\n                    inner,\n                    outer: hovered?.index === index ? outer + 6 : outer,\n                    start: arc.start,\n                    end: arc.end,\n                    corner: arcWidth > 0 ? 3 : 0,\n                  })}\n                  {...css.attrs(\n                    donutChartStyles.segment,\n                    chartSvgStyles.fill(arc.slice.color),\n                    chartSvgStyles.dimmable,\n                    hovered !== null && hovered.index !== index && chartSvgStyles.dimmed,\n                  )}\n                />\n              ))}\n            </g>\n            {center !== undefined && (\n              <g data-part=\"center-label\" {...css.attrs(chartSvgStyles.noPointer)}>\n                <text y={-2} text-anchor=\"middle\" {...css.attrs(donutChartStyles.centerValue)}>\n                  {center}\n                </text>\n                <text y={18} text-anchor=\"middle\" {...css.attrs(donutChartStyles.centerLabel)}>\n                  {centerSubLabel ?? lang.chartTotal}\n                </text>\n              </g>\n            )}\n          </g>\n        </svg>\n      );\n    }\n\n    const tip = (): ChartTip | null => {\n      const current = hovered;\n      const slice = current && arcs[current.index]?.slice;\n      if (!tooltip || !current || !slice) return null;\n      return {\n        x: current.x,\n        y: current.y,\n        content: chartTooltip(slice.name, [\n          { label: lang.chartValue, color: slice.color, value: valueText(slice.value) },\n          { label: lang.chartShare, color: 'transparent', value: shareText(slice.value) },\n        ]),\n      };\n    };\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? slices.map((slice) => ({ key: slice.name, label: slice.name, color: slice.color }))\n            : []\n        }\n        hiddenKeys={hiddenItems}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={donutChartStyles.skeleton} />}\n        clickable={onItemClick != null}\n        isEmpty={data.length === 0}\n        empty={empty}\n        table={{\n          columns: [\n            lang.chartCategory,\n            unit ? `${lang.chartValue}（${unit}）` : lang.chartValue,\n            lang.chartShare,\n          ],\n          rows: visible.map((slice) => ({\n            header: slice.name,\n            cells: [\n              slice.value === undefined ? lang.emptyValue : format.number(slice.value, valueFormat),\n              shareText(slice.value),\n            ],\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/FunnelChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"FunnelChart.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps","_createTextVNode"],"sources":["../../src/charts/FunnelChart.tsx"],"sourcesContent":["/**\n * 漏斗图：一串前后相接的环节，看每一步留下多少、在哪一步流失最多（访问 → 注册 → 下单、线索转化）。\n *\n *   <FunnelChart aria-label=\"渠道转化\" stages={[{ label: '提交建议', value: 120 }, { label: '立项', value: 46 }]} unit=\"项\" />\n *\n * 每个环节一条居中的横条，长短按数值（最大的环节占满）；环节之间写比上一环节的转化率，末尾写总转化。\n * 横条默认同一个颜色（chart1），环节可以单独给 color。Unovis 没有漏斗图：这里用主题 tokens 直接画，\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 { Skeleton } from '../feedback/Skeleton';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { ChartFrame, type ChartFrameParts } from './frame';\nimport { resolveColor, type ChartColor } from './series';\nimport { t } from '../config/theme/tokens';\n\n/** 漏斗的一个环节 */\nexport interface FunnelStage {\n  /** 名称 */\n  label: string;\n  /** 数值：number、bigint 或 Decimal */\n  value: NumericValue;\n  /** 颜色；不写时用图表的 color */\n  color?: ChartColor;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface FunnelChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 各环节：从上到下 */\n  stages: readonly FunnelStage[];\n  /** 数值的格式（可缩放）：横条旁的数值与数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 横条的颜色\n   * @default 'chart1'\n   */\n  color?: ChartColor;\n  /**\n   * 环节之间写转化率，末尾写总转化\n   * @default true\n   */\n  rates?: boolean;\n  /**\n   * 加载中：显示几条骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个环节（下钻）：参数是这个环节与它的位置；写了它时指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (stage: FunnelStage, index: number) => void;\n}\n\n/** FunnelChart 的样式：list、row、label、track、bar、value、rate… */\nexport const funnelChartStyles = css.create({\n  // 名称 | 居中的横条 | 数值：三列由整个列表定宽，各行用 subgrid 对齐\n  list: {\n    display: 'grid',\n    gridTemplateColumns: 'max-content minmax(0, 1fr) max-content',\n    columnGap: '_md',\n  },\n  row: {\n    display: 'grid',\n    gridColumn: '1 / -1',\n    gridTemplateColumns: 'subgrid',\n    alignItems: 'center',\n    paddingBlock: '2px',\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n  },\n  rowClickable: { backgroundColor: { default: 'transparent', ':hover': '_fill' } },\n  label: { color: '_text', textAlign: 'end', whiteSpace: 'nowrap' },\n  track: { display: 'flex', justifyContent: 'center' },\n  bar: {\n    height: '1.75rem',\n    minWidth: '2px',\n    borderRadius: '_sm',\n    transition: `width ${t.durations.md} ${t.easings.standard}`,\n  },\n  value: { fontVariantNumeric: 'tabular-nums', fontWeight: '_medium', whiteSpace: 'nowrap' },\n  // 环节之间：转化率写在中间那一列，小号的次要文字\n  rate: {\n    display: 'grid',\n    gridColumn: '1 / -1',\n    gridTemplateColumns: 'subgrid',\n    paddingInline: '_xs',\n    color: '_textMuted',\n    fontSize: '_xs',\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: '_tight',\n  },\n  rateText: { gridColumn: '2', textAlign: 'center' },\n  overall: { gridColumn: '2 / 4', textAlign: 'center', paddingBlockStart: '_xs' },\n  skeleton: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '_sm' },\n  skeletonBar: { height: '1.75rem', borderRadius: '_sm' },\n});\n\n// 横条的宽度与颜色随数据变：单独一个 create（见 COMPONENTS.md §4）\n/** FunnelChart 的样式：barSize、skeletonWidth */\nexport const funnelChartDynamicStyles = css.create({\n  barSize: (width: string, color: string) => ({ width, backgroundColor: color }),\n  skeletonWidth: (width: string) => ({ width }),\n});\n\n/** 骨架横条的宽度：从宽到窄 */\nconst SKELETON_WIDTHS = ['90%', '68%', '46%', '28%'];\n\n/** 漏斗图 */\nexport const FunnelChart = _component(\n  ({\n    stages,\n    valueFormat,\n    unit,\n    color = 'chart1',\n    rates = true,\n    loading = false,\n    empty,\n    onItemClick,\n    ...rest\n  }: FunnelChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const numbers = _derived(stages.map((stage) => Math.max(toNumber(stage.value), 0)));\n    const max = _derived(Math.max(0, ...numbers));\n    const percent = (value: number) =>\n      format.number(value, { style: 'percent', maximumFractionDigits: 1 });\n    /** 第 index 个环节比 base 个环节的转化率；base 为 0 时没有 */\n    const rate = (index: number, base: number) =>\n      numbers[base] ? percent(numbers[index]! / numbers[base]!) : lang.emptyValue;\n    const valueText = (stage: FunnelStage) =>\n      format.number(stage.value, unit ? { ...valueFormat, suffix: unit } : valueFormat);\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height=\"auto\"\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={\n          <div aria-hidden=\"true\" {...css.attrs(funnelChartStyles.skeleton)}>\n            {SKELETON_WIDTHS.map((width) => (\n              <Skeleton\n                key={width}\n                sx={[funnelChartStyles.skeletonBar, funnelChartDynamicStyles.skeletonWidth(width)]}\n              />\n            ))}\n          </div>\n        }\n        isEmpty={stages.length === 0}\n        empty={empty}\n        table={{\n          columns: [\n            lang.chartStage,\n            unit ? `${lang.chartValue}（${unit}）` : lang.chartValue,\n            lang.chartStepRate,\n            lang.chartOverallRate,\n          ],\n          rows: stages.map((stage, index) => ({\n            header: stage.label,\n            cells: [\n              format.number(stage.value, valueFormat),\n              index === 0 ? lang.emptyValue : rate(index, index - 1),\n              index === 0 ? lang.emptyValue : rate(index, 0),\n            ],\n          })),\n        }}\n        plot={\n          <div {...css.attrs(funnelChartStyles.list)}>\n            {stages.map((stage, index) => [\n              index > 0 && rates && (\n                <div key={`rate-${index}`} {...css.attrs(funnelChartStyles.rate)}>\n                  <span {...css.attrs(funnelChartStyles.rateText)}>↓ {rate(index, index - 1)}</span>\n                </div>\n              ),\n              <div\n                key={`stage-${index}`}\n                {...css.attrs(funnelChartStyles.row, onItemClick && funnelChartStyles.rowClickable)}\n                onClick={onItemClick && (() => onItemClick(stage, index))}\n              >\n                <span {...css.attrs(funnelChartStyles.label)}>{stage.label}</span>\n                <span {...css.attrs(funnelChartStyles.track)}>\n                  <span\n                    {...css.attrs(\n                      funnelChartStyles.bar,\n                      funnelChartDynamicStyles.barSize(\n                        max ? `${(numbers[index]! / max) * 100}%` : '0%',\n                        resolveColor(stage.color ?? color, index),\n                      ),\n                    )}\n                  />\n                </span>\n                <span {...css.attrs(funnelChartStyles.value)}>{valueText(stage)}</span>\n              </div>,\n            ])}\n            {rates && stages.length > 1 && (\n              <div {...css.attrs(funnelChartStyles.rate)}>\n                <span {...css.attrs(funnelChartStyles.overall)}>\n                  {lang.chartOverallRate} {rate(stages.length - 1, 0)}\n                </span>\n              </div>\n            )}\n          </div>\n        }\n        clickable={onItemClick != null}\n      />\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"FunnelChart.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps","_createTextVNode"],"sources":["../../src/charts/FunnelChart.tsx"],"sourcesContent":["/**\n * 漏斗图：一串前后相接的环节，看每一步留下多少、在哪一步流失最多（访问 → 注册 → 下单、线索转化）。\n *\n *   <FunnelChart aria-label=\"渠道转化\" stages={[{ label: '提交建议', value: 120 }, { label: '立项', value: 46 }]} unit=\"项\" />\n *\n * 每个环节一条居中的横条，长短按数值（最大的环节占满）；环节之间写比上一环节的转化率，末尾写总转化。\n * 横条默认同一个颜色（chart1），环节可以单独给 color。横条是 HTML（不是 SVG），长短、颜色直接用主题 tokens；\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 { Skeleton } from '../feedback/Skeleton';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { ChartFrame, type ChartFrameParts } from './frame';\nimport { resolveColor, type ChartColor } from './series';\nimport { t } from '../config/theme/tokens';\n\n/** 漏斗的一个环节 */\nexport interface FunnelStage {\n  /** 名称 */\n  label: string;\n  /** 数值：number、bigint 或 Decimal */\n  value: NumericValue;\n  /** 颜色；不写时用图表的 color */\n  color?: ChartColor;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface FunnelChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 各环节：从上到下 */\n  stages: readonly FunnelStage[];\n  /** 数值的格式（可缩放）：横条旁的数值与数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 横条的颜色\n   * @default 'chart1'\n   */\n  color?: ChartColor;\n  /**\n   * 环节之间写转化率，末尾写总转化\n   * @default true\n   */\n  rates?: boolean;\n  /**\n   * 加载中：显示几条骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个环节（下钻）：参数是这个环节与它的位置；写了它时指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (stage: FunnelStage, index: number) => void;\n}\n\n/** FunnelChart 的样式：list、row、label、track、bar、value、rate… */\nexport const funnelChartStyles = css.create({\n  // 名称 | 居中的横条 | 数值：三列由整个列表定宽，各行用 subgrid 对齐\n  list: {\n    display: 'grid',\n    gridTemplateColumns: 'max-content minmax(0, 1fr) max-content',\n    columnGap: '_md',\n  },\n  row: {\n    display: 'grid',\n    gridColumn: '1 / -1',\n    gridTemplateColumns: 'subgrid',\n    alignItems: 'center',\n    paddingBlock: '2px',\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n  },\n  rowClickable: { backgroundColor: { default: 'transparent', ':hover': '_fill' } },\n  label: { color: '_text', textAlign: 'end', whiteSpace: 'nowrap' },\n  track: { display: 'flex', justifyContent: 'center' },\n  bar: {\n    height: '1.75rem',\n    minWidth: '2px',\n    borderRadius: '_sm',\n    transition: `width ${t.durations.md} ${t.easings.standard}`,\n  },\n  value: { fontVariantNumeric: 'tabular-nums', fontWeight: '_medium', whiteSpace: 'nowrap' },\n  // 环节之间：转化率写在中间那一列，小号的次要文字\n  rate: {\n    display: 'grid',\n    gridColumn: '1 / -1',\n    gridTemplateColumns: 'subgrid',\n    paddingInline: '_xs',\n    color: '_textMuted',\n    fontSize: '_xs',\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: '_tight',\n  },\n  rateText: { gridColumn: '2', textAlign: 'center' },\n  overall: { gridColumn: '2 / 4', textAlign: 'center', paddingBlockStart: '_xs' },\n  skeleton: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '_sm' },\n  skeletonBar: { height: '1.75rem', borderRadius: '_sm' },\n});\n\n// 横条的宽度与颜色随数据变：单独一个 create（见 COMPONENTS.md §4）\n/** FunnelChart 的样式：barSize、skeletonWidth */\nexport const funnelChartDynamicStyles = css.create({\n  barSize: (width: string, color: string) => ({ width, backgroundColor: color }),\n  skeletonWidth: (width: string) => ({ width }),\n});\n\n/** 骨架横条的宽度：从宽到窄 */\nconst SKELETON_WIDTHS = ['90%', '68%', '46%', '28%'];\n\n/** 漏斗图 */\nexport const FunnelChart = _component(\n  ({\n    stages,\n    valueFormat,\n    unit,\n    color = 'chart1',\n    rates = true,\n    loading = false,\n    empty,\n    onItemClick,\n    ...rest\n  }: FunnelChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const numbers = _derived(stages.map((stage) => Math.max(toNumber(stage.value), 0)));\n    const max = _derived(Math.max(0, ...numbers));\n    const percent = (value: number) =>\n      format.number(value, { style: 'percent', maximumFractionDigits: 1 });\n    /** 第 index 个环节比 base 个环节的转化率；base 为 0 时没有 */\n    const rate = (index: number, base: number) =>\n      numbers[base] ? percent(numbers[index]! / numbers[base]!) : lang.emptyValue;\n    const valueText = (stage: FunnelStage) =>\n      format.number(stage.value, unit ? { ...valueFormat, suffix: unit } : valueFormat);\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height=\"auto\"\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={\n          <div aria-hidden=\"true\" {...css.attrs(funnelChartStyles.skeleton)}>\n            {SKELETON_WIDTHS.map((width) => (\n              <Skeleton\n                key={width}\n                sx={[funnelChartStyles.skeletonBar, funnelChartDynamicStyles.skeletonWidth(width)]}\n              />\n            ))}\n          </div>\n        }\n        isEmpty={stages.length === 0}\n        empty={empty}\n        table={{\n          columns: [\n            lang.chartStage,\n            unit ? `${lang.chartValue}（${unit}）` : lang.chartValue,\n            lang.chartStepRate,\n            lang.chartOverallRate,\n          ],\n          rows: stages.map((stage, index) => ({\n            header: stage.label,\n            cells: [\n              format.number(stage.value, valueFormat),\n              index === 0 ? lang.emptyValue : rate(index, index - 1),\n              index === 0 ? lang.emptyValue : rate(index, 0),\n            ],\n          })),\n        }}\n        plot={\n          <div {...css.attrs(funnelChartStyles.list)}>\n            {stages.map((stage, index) => [\n              index > 0 && rates && (\n                <div key={`rate-${index}`} {...css.attrs(funnelChartStyles.rate)}>\n                  <span {...css.attrs(funnelChartStyles.rateText)}>↓ {rate(index, index - 1)}</span>\n                </div>\n              ),\n              <div\n                key={`stage-${index}`}\n                {...css.attrs(funnelChartStyles.row, onItemClick && funnelChartStyles.rowClickable)}\n                onClick={onItemClick && (() => onItemClick(stage, index))}\n              >\n                <span {...css.attrs(funnelChartStyles.label)}>{stage.label}</span>\n                <span {...css.attrs(funnelChartStyles.track)}>\n                  <span\n                    {...css.attrs(\n                      funnelChartStyles.bar,\n                      funnelChartDynamicStyles.barSize(\n                        max ? `${(numbers[index]! / max) * 100}%` : '0%',\n                        resolveColor(stage.color ?? color, index),\n                      ),\n                    )}\n                  />\n                </span>\n                <span {...css.attrs(funnelChartStyles.value)}>{valueText(stage)}</span>\n              </div>,\n            ])}\n            {rates && stages.length > 1 && (\n              <div {...css.attrs(funnelChartStyles.rate)}>\n                <span {...css.attrs(funnelChartStyles.overall)}>\n                  {lang.chartOverallRate} {rate(stages.length - 1, 0)}\n                </span>\n              </div>\n            )}\n          </div>\n        }\n        clickable={onItemClick != null}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/charts/GraphChart.d.ts

@@ -1,5 +1,5 @@
 import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
-import type { VNodeChild } from 'vue';
+import { type VNodeChild } from 'vue';
 import { type NumericFormat } from '../config/lang/format';
 import { type NumericValue } from '../utils/data/numeric';
 import type { PartProps } from '../utils/props';
@@ -21,15 +21,13 @@ export interface GraphChartLayouts {
     /** 力导向（默认）：相连的靠近、不相连的推开，适合看关系疏密 */
     force: unknown;
     /** 分层：沿 direction 一层层排开，适合有先后、上下游的关系 */
-    dagre: unknown;
+    layered: unknown;
     /** 排成一圈 */
     circular: unknown;
     /** 同心圆：连得多的在中间 */
     concentric: unknown;
     /** 按 group 分列，组内按连接排 */
     parallel: unknown;
-    /** 分层，分组框更规整（elkjs，约 1.6 MB，用到时才加载） */
-    elk: unknown;
 }
 /** 一个节点 */
 export interface GraphChartNode {
@@ -78,7 +76,7 @@ export interface GraphChartProps extends PartProps<'div', 'role' | 'aria-busy'>,
     nodes: readonly GraphChartNode[];
     /** 连线 */
     links: readonly GraphChartLink[];
-    /** 分组：同组的节点框在一起（dagre、elk、parallel 布局），颜色相同 */
+    /** 分组：同组的节点框在一起（layered、parallel 布局），颜色相同 */
     groups?: readonly GraphChartGroup[];
     /**
      * 布局
@@ -86,11 +84,11 @@ export interface GraphChartProps extends PartProps<'div', 'role' | 'aria-busy'>,
      */
     layout?: keyof GraphChartLayouts;
     /**
-     * 分层布局（dagre、elk）的方向：LR 从左到右，TB 从上到下
+     * 分层、分列布局的方向：LR 从左到右，TB 从上到下
      * @default 'LR'
      */
     direction?: 'LR' | 'TB';
-    /** 连线带箭头；默认分层布局（dagre、elk）带，其余不带 */
+    /** 连线带箭头；默认分层布局带，其余不带 */
     arrows?: boolean;
     /** 连线数值的格式：提示框、数据表共用 */
     valueFormat?: NumericFormat;
@@ -102,7 +100,7 @@ export interface GraphChartProps extends PartProps<'div', 'role' | 'aria-busy'>,
      */
     height?: number | string;
     /**
-     * 能缩放、拖动画布
+     * 能拖动画布、按住 Ctrl 滚轮缩放
      * @default true
      */
     zoom?: boolean;
@@ -126,10 +124,24 @@ export interface GraphChartProps extends PartProps<'div', 'role' | 'aria-busy'>,
      */
     onItemClick?: (node: GraphChartNode, index: number) => void;
 }
-/** GraphChart 的样式：root（--vis-graph-* 主题变量）、skeleton */
+/** GraphChart 的样式 */
 export declare const graphChartStyles: Readonly<{
-    root: css.CompiledStyles;
+    background: css.CompiledStyles;
+    clickable: css.CompiledStyles;
+    link: css.CompiledStyles;
+    linkDashed: css.CompiledStyles;
+    linkLabel: css.CompiledStyles;
+    linkLabelBox: css.CompiledStyles;
+    node: css.CompiledStyles;
+    nodeLabel: css.CompiledStyles;
+    nodeSelected: css.CompiledStyles;
+    nodeShape: css.CompiledStyles;
+    nodeSublabel: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    panelLabel: css.CompiledStyles;
     skeleton: css.CompiledStyles;
+    viewport: css.CompiledStyles;
+    wheelHint: css.CompiledStyles;
 }>;
 /** 网络图 */
 export declare const GraphChart: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<GraphChartProps>;