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

package/dist/charts/ComboChart.js

@@ -0,0 +1,157 @@
+import { colors } from "../config/theme/tokens.js";
+import { seriesNumber } from "./series.js";
+import { XYChart } from "./XYChart.js";
+import { CURVES } from "./LineChart.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, 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 = [];
+	const series = readonlyProp(_props, "series");
+	const secondaryFormat = readonlyProp(_props, "secondaryFormat");
+	const secondaryUnit = readonlyProp(_props, "secondaryUnit");
+	const stacked = readonlyProp(_props, "stacked", false);
+	const curve = readonlyProp(_props, "curve", "linear");
+	const dots = readonlyProp(_props, "dots", "filled");
+	const radius = readonlyProp(_props, "radius", 4);
+	const hiddenSeries = bindable(_props, "_hiddenSeries", () => [], _ctx.emit);
+	const rest = restProps(_props, _ctx, true);
+	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(() => ({
+		skeleton: "bars",
+		stacked: stacked.value,
+		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,
+			unit: secondaryUnit.value
+		} : void 0,
+		domainValues: (rows, shown) => rows.flatMap((row) => {
+			const bars = shown.filter((item) => !isLine(item.key));
+			const lines = shown.filter((item) => isLine(item.key));
+			const values = (list) => list.map((item) => seriesNumber(row, item.key) ?? 0);
+			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;
+		}
+	}));
+	return () => createVNode(XYChart, mergeProps(rest, {
+		"series": series.value,
+		"_hiddenSeries": hiddenSeries.value,
+		"onUpdate:_hiddenSeries": _cache[0] || (_cache[0] = ($event) => hiddenSeries.value = $event),
+		"kind": kind.value
+	}), null);
+}, {
+	name: "ComboChart",
+	props: [
+		"series",
+		"secondaryFormat",
+		"secondaryUnit",
+		"stacked",
+		"curve",
+		"dots",
+		"radius",
+		"_hiddenSeries",
+		"onUpdate:_hiddenSeries"
+	]
+});
+//#endregion
+export { ComboChart };
+
+//# sourceMappingURL=ComboChart.js.map

package/dist/charts/ComboChart.js.map

@@ -0,0 +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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"}

package/dist/charts/DonutChart.d.ts

@@ -0,0 +1,65 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type NumericFormat } from '../config/lang/format';
+import type { PartProps } from '../utils/props';
+import { type ChartFrameParts } from './frame';
+import { type ChartColor, type NumericKey } from './series';
+/** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
+export interface DonutChartProps<T extends object> extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
+    /** 数据：每一行一个扇区 */
+    data: readonly T[];
+    /** 名称字段：图例、提示框、数据表里显示，也是隐藏一项时记的 key */
+    index: keyof T & string;
+    /** 数值字段 */
+    value: NumericKey<T>;
+    /** 每一项的颜色；不写时按顺序取图表色板 */
+    itemColor?: (row: T, index: number) => ChartColor | undefined;
+    /** 数值的格式（可缩放，如以万元为单位）：中间的合计、提示框、数据表共用 */
+    valueFormat?: NumericFormat;
+    /** 单位：显示在左上方，数值后面带上 */
+    unit?: string;
+    /**
+     * 绘图区的高度；数字按 px
+     * @default 240
+     */
+    height?: number | string;
+    /**
+     * 环的粗细（px）；0 是饼图
+     * @default 28
+     */
+    arcWidth?: number;
+    /** 中间的大字；默认是显示中各项的合计，false 时不写 */
+    centerLabel?: string | false;
+    /** 中间大字下面的小字；默认是“合计” */
+    centerSubLabel?: string;
+    /**
+     * 图例
+     * @default true
+     */
+    legend?: boolean;
+    /**
+     * 悬停时的提示框
+     * @default true
+     */
+    tooltip?: boolean;
+    /**
+     * 加载中：绘图区显示一个圆形的骨架，带 aria-busy
+     * @default false
+     */
+    loading?: boolean;
+    /** 隐藏的项（存名称）：点图例时写回，父级可以写 _hiddenItems={names} */
+    _hiddenItems?: string[];
+    /** 没有数据时显示的内容，默认是“暂无数据” */
+    empty?: VNodeChild;
+    /**
+     * 点了一个扇区（下钻）：参数是这一行与它在 data 里的位置；写了它时指针是手形。
+     * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮
+     */
+    onItemClick?: (row: T, index: number) => void;
+}
+/** DonutChart 的样式：skeleton */
+export declare const donutChartStyles: Readonly<{
+    skeleton: css.CompiledStyles;
+}>;
+/** 环形图 */
+export declare const DonutChart: <T extends object>(props: DonutChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/charts/DonutChart.js

@@ -0,0 +1,162 @@
+import { toNumber } from "../utils/data/numeric.js";
+import { useLang } from "../config/context.js";
+import { useFormat } from "../config/lang/format.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { ChartFrame, chartTooltip, useChartValueText } from "./frame.js";
+import { resolveColor, seriesValue } from "./series.js";
+import { useSingleChart } from "./single.js";
+import { computed, createVNode, mergeProps, shallowRef } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as 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%"
+} });
+/** 扇区的数据：一行加上它的名字与颜色 */
+/** 环形图 */
+var DonutChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const data = readonlyProp(_props, "data");
+	const index = readonlyProp(_props, "index");
+	const value = readonlyProp(_props, "value");
+	const itemColor = readonlyProp(_props, "itemColor");
+	const valueFormat = readonlyProp(_props, "valueFormat");
+	const unit = readonlyProp(_props, "unit");
+	const height = readonlyProp(_props, "height", 240);
+	const arcWidth = readonlyProp(_props, "arcWidth", 28);
+	const centerLabel = readonlyProp(_props, "centerLabel");
+	const centerSubLabel = readonlyProp(_props, "centerSubLabel");
+	const legend = readonlyProp(_props, "legend", true);
+	const tooltip = readonlyProp(_props, "tooltip", true);
+	const loading = readonlyProp(_props, "loading", false);
+	const onItemClick = readonlyProp(_props, "onItemClick");
+	const hiddenItems = bindable(_props, "_hiddenItems", () => [], _ctx.emit);
+	const empty = readonlyProp(_props, "empty");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const slices = computed(() => {
+		return data.value.map((row, position) => ({
+			row,
+			name: String(row[index.value] ?? ""),
+			color: resolveColor(itemColor.value?.(row, position), position),
+			value: seriesValue(row, value.value)
+		}));
+	});
+	const visible = computed(() => slices.value.filter((slice) => !hiddenItems.value.includes(slice.name)));
+	const total = computed(() => visible.value.reduce((sum, slice) => sum + (slice.value === void 0 ? 0 : toNumber(slice.value)), 0));
+	const valueText = useChartValueText(() => ({
+		valueFormat: valueFormat.value,
+		unit: unit.value
+	}));
+	const shareText = (amount) => amount === void 0 || total.value === 0 ? lang.emptyValue : format.number(toNumber(amount) / total.value, {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	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)) } }
+			});
+			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)
+				}])) }
+			};
+		}
+	}));
+	return () => createVNode(ChartFrame, mergeProps(rest, {
+		"unit": unit.value,
+		"height": height.value,
+		"legend": legend.value ? slices.value.map((slice) => ({
+			key: slice.name,
+			label: slice.name,
+			color: slice.color
+		})) : [],
+		"hiddenKeys": hiddenItems.value,
+		"onLegendToggle": toggle,
+		"loading": loading.value,
+		"skeleton": createVNode(Skeleton, { "sx": donutChartStyles.skeleton }, null),
+		"clickable": onItemClick.value != null,
+		"isEmpty": data.value.length === 0,
+		"empty": empty.value,
+		"table": {
+			columns: [
+				lang.chartCategory,
+				unit.value ? `${lang.chartValue}（${unit.value}）` : lang.chartValue,
+				lang.chartShare
+			],
+			rows: visible.value.map((slice) => ({
+				header: slice.name,
+				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)
+	}), null);
+}, {
+	name: "DonutChart",
+	props: [
+		"data",
+		"index",
+		"value",
+		"itemColor",
+		"valueFormat",
+		"unit",
+		"height",
+		"arcWidth",
+		"centerLabel",
+		"centerSubLabel",
+		"legend",
+		"tooltip",
+		"loading",
+		"onItemClick",
+		"_hiddenItems",
+		"onUpdate:_hiddenItems",
+		"empty"
+	]
+});
+//#endregion
+export { DonutChart, donutChartStyles };
+
+//# sourceMappingURL=DonutChart.js.map

package/dist/charts/DonutChart.js.map

@@ -0,0 +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 * as 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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"}

package/dist/charts/FunnelChart.d.ts

@@ -0,0 +1,69 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+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';
+import { type ChartFrameParts } from './frame';
+import { type ChartColor } from './series';
+/** 漏斗的一个环节 */
+export interface FunnelStage {
+    /** 名称 */
+    label: string;
+    /** 数值：number、bigint 或 Decimal */
+    value: NumericValue;
+    /** 颜色；不写时用图表的 color */
+    color?: ChartColor;
+}
+/** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
+export interface FunnelChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
+    /** 各环节：从上到下 */
+    stages: readonly FunnelStage[];
+    /** 数值的格式（可缩放）：横条旁的数值与数据表共用 */
+    valueFormat?: NumericFormat;
+    /** 单位：显示在左上方，数值后面带上 */
+    unit?: string;
+    /**
+     * 横条的颜色
+     * @default 'chart1'
+     */
+    color?: ChartColor;
+    /**
+     * 环节之间写转化率，末尾写总转化
+     * @default true
+     */
+    rates?: boolean;
+    /**
+     * 加载中：显示几条骨架，带 aria-busy
+     * @default false
+     */
+    loading?: boolean;
+    /** 没有数据时显示的内容，默认是“暂无数据” */
+    empty?: VNodeChild;
+    /**
+     * 点了一个环节（下钻）：参数是这个环节与它的位置；写了它时指针是手形。
+     * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮
+     */
+    onItemClick?: (stage: FunnelStage, index: number) => void;
+}
+/** FunnelChart 的样式：list、row、label、track、bar、value、rate… */
+export declare const funnelChartStyles: Readonly<{
+    bar: css.CompiledStyles;
+    label: css.CompiledStyles;
+    list: css.CompiledStyles;
+    overall: css.CompiledStyles;
+    rate: css.CompiledStyles;
+    rateText: css.CompiledStyles;
+    row: css.CompiledStyles;
+    rowClickable: css.CompiledStyles;
+    skeleton: css.CompiledStyles;
+    skeletonBar: css.CompiledStyles;
+    track: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** FunnelChart 的样式：barSize、skeletonWidth */
+export declare const funnelChartDynamicStyles: Readonly<{
+    readonly barSize: (width: string, color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly skeletonWidth: (width: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 漏斗图 */
+export declare const FunnelChart: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FunnelChartProps>;