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

package/dist/charts/SankeyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyChart.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/SankeyChart.tsx"],"sourcesContent":["/**\n * 桑基图：节点之间的流量画成粗细不同的带子，看量从哪来、到哪去、在哪流失（转化漏斗、预算分配、能源流向）。\n *\n *   <SankeyChart aria-label=\"注册转化\" nodes={steps} links={flows} unit=\"人\" />\n *\n * 节点是 { id, label?, color? }，流向是 { source, target, value }（value 可以是 Decimal、bigint，要大于 0；不能成环）。\n * 带子取起点节点的颜色；悬停带子出“起点 → 终点”的流量，悬停节点出它的总量。节点旁写名字与总量。\n * 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。\n */\nimport { FitMode, Sankey, SankeyNodeAlign } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * 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 { colors, fontSizes } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport type { PartProps } from '../utils/props';\nimport { flowData, resolveFlowNodes, type FlowLink, type FlowNode } from './flow';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { useSingleChart, type SingleChart } from './single';\n\n/** 节点怎样排：justify 两端对齐（默认），left、right 靠向一侧，center 居中 */\nexport interface SankeyAligns {\n  /** 两端对齐（默认）：按离起点的远近分列，没有流出的节点都排到最右一列 */\n  justify: unknown;\n  /** 靠左：每个节点排在离起点最近的一列 */\n  left: unknown;\n  /** 靠右：每个节点排在离终点最近的一列 */\n  right: unknown;\n  /** 居中：同靠左，但没有流入的节点往右挪，贴着它流向的节点 */\n  center: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface SankeyChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly FlowNode[];\n  /** 流向 */\n  links: readonly FlowLink[];\n  /** 数值的格式（可缩放，如以万元为单位）：节点旁的总量、提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 320\n   */\n  height?: number | string;\n  /**\n   * 节点的排法\n   * @default 'justify'\n   */\n  align?: keyof SankeyAligns;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n}\n\n/** SankeyChart 的样式：root（--vis-sankey-* 主题变量）、skeleton */\nexport const sankeyChartStyles = css.create({\n  root: {\n    '--vis-sankey-node-label-color': colors.text,\n    '--vis-sankey-node-label-font-size': fontSizes.xs,\n    '--vis-sankey-node-label-font-weight': '500',\n    '--vis-sankey-node-label-background-fill-color': colors.surface,\n    '--vis-sankey-node-label-background-stroke-color': colors.borderMuted,\n    '--vis-sankey-node-sublabel-font-size': fontSizes.xs,\n    '--vis-sankey-link-opacity': '0.35',\n    '--vis-sankey-link-hover-opacity': '0.6',\n  },\n  skeleton: { display: 'block', width: '100%', height: '100%' },\n});\n\nconst ALIGNS: Record<keyof SankeyAligns, SankeyNodeAlign> = {\n  justify: SankeyNodeAlign.Justify,\n  left: SankeyNodeAlign.Left,\n  right: SankeyNodeAlign.Right,\n  center: SankeyNodeAlign.Center,\n};\n\n/** 交给 Unovis 的节点、流向 */\ntype Data = ReturnType<typeof flowData>;\ntype Node = Data['nodes'][number];\ntype Link = Data['links'][number];\n/** Unovis 布局后：流向的起点、终点换成了节点对象，节点带上了总量 value */\ntype LaidOutNode = Node & { value?: number };\ntype LaidOutLink = Omit<Link, 'source' | 'target'> & { source: LaidOutNode; target: LaidOutNode };\n\n/** 桑基图 */\nexport const SankeyChart = _component(\n  ({\n    nodes,\n    links,\n    valueFormat,\n    unit,\n    height = 320,\n    align = 'justify',\n    tooltip = true,\n    loading = false,\n    empty,\n    sx,\n    ...rest\n  }: SankeyChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const resolved = _derived(resolveFlowNodes(nodes));\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const labelOf = (id: string) => resolved.get(id)?.label ?? id;\n\n    let plot = _state.raw<HTMLElement | null>(null);\n    const chart: SingleChart = useSingleChart<{ nodes: Node[]; links?: Link[] }>(() => ({\n      element: plot,\n      ready: !loading && nodes.length > 0,\n      tooltip,\n      build: (instance) => {\n        const sankey = instance(\n          'sankey',\n          () => new Sankey<Node, Link>({ linkValue: (link) => link.amount }),\n        );\n        sankey.setConfig({\n          linkValue: (link) => link.amount,\n          nodeColor: (node) => node.color,\n          linkColor: (link) => link.source.color,\n          nodeAlign: ALIGNS[align],\n          label: (node) => node.label,\n          subLabel: (node) => (node.value === undefined ? '' : valueText(node.value)),\n          nodePadding: 16,\n          nodeWidth: 12,\n          labelMaxWidth: 120,\n          labelMaxWidthTakeAvailableSpace: true,\n          labelFit: FitMode.Wrap,\n          labelBackground: true,\n          enableZoom: false,\n        });\n        return {\n          component: sankey,\n          data: flowData(resolved, links),\n          triggers: {\n            [Sankey.selectors.link]: (link: LaidOutLink) =>\n              chart.tooltip(\n                chartTooltip(lang.chartFlowLabel(link.source.label, link.target.label), [\n                  {\n                    label: lang.chartValue,\n                    color: link.source.color,\n                    value: valueText(link.value),\n                  },\n                ]),\n              ),\n            [Sankey.selectors.node]: (node: LaidOutNode) =>\n              chart.tooltip(\n                chartTooltip(node.label, [\n                  { label: lang.chartTotal, color: node.color, value: valueText(node.value) },\n                ]),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        sx={[sankeyChartStyles.root, sx]}\n        unit={unit}\n        height={height}\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={<Skeleton sx={sankeyChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        table={{\n          columns: [lang.chartFlow, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: links.map((link) => ({\n            header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n            cells: [format.number(link.value, valueFormat)],\n          })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/charts/ScatterChart.d.ts

@@ -0,0 +1,18 @@
+import { type NumericKey } from './series';
+import { type XYChartProps } from './XYChart';
+/** 未声明的属性落到外层 div（role="figure"）上 */
+export interface ScatterChartProps<T extends object> extends XYChartProps<T> {
+    /** 横轴的数值字段 */
+    x: NumericKey<T>;
+    /** 横轴的名字：显示在横轴下方，提示框与数据表里也用；不写时轴下不显示，提示框与数据表用字段名 */
+    xLabel?: string;
+    /** 横轴数值的格式（Intl.NumberFormatOptions） */
+    xFormat?: Intl.NumberFormatOptions;
+    /**
+     * 点的直径（px），或者一个数值字段（气泡图：按它在 6–32px 之间缩放）
+     * @default 9
+     */
+    size?: number | NumericKey<T>;
+}
+/** 散点图 */
+export declare const ScatterChart: <T extends object>(props: ScatterChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/charts/ScatterChart.js

@@ -0,0 +1,82 @@
+import { colors } from "../config/theme/tokens.js";
+import { useFormat } from "../config/lang/format.js";
+import { seriesNumber } from "./series.js";
+import { XYChart } from "./XYChart.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Scatter } from "@unovis/ts";
+//#region src/charts/ScatterChart.tsx
+/**
+* 散点图：横轴、纵轴都是数值，每一行在每个系列上画一个点；size 给成字段时点的大小随它变（气泡图）。
+* 悬停一个点，提示框列出这一行的名称、横轴的值与各系列的值。
+*
+*   <ScatterChart data={cities} index="name" x="gdp" xLabel="人均 GDP" series={[{ key: 'life', label: '预期寿命' }]} />
+*   <ScatterChart data={products} index="name" x="price" series={[{ key: 'rating', label: '评分' }]} size="sales" />
+*
+* 纵轴不强制从 0 起（按数据取）；图例、单位、加载与空状态、给读屏的数据表同其他图表（见 XYChart）。
+*/
+/** 未声明的属性落到外层 div（role="figure"）上 */
+/** 气泡图的大小范围（px） */
+var BUBBLE_RANGE = [6, 32];
+/** 散点图 */
+var ScatterChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const xKey = readonlyProp(_props, "x");
+	const xLabel = readonlyProp(_props, "xLabel");
+	const xFormat = readonlyProp(_props, "xFormat");
+	const size = readonlyProp(_props, "size", 9);
+	const hiddenSeries = bindable(_props, "_hiddenSeries", () => [], _ctx.emit);
+	const rest = restProps(_props, _ctx, true);
+	const format = useFormat();
+	const kind = computed(() => ({
+		zeroBaseline: false,
+		pointTooltip: Scatter.selectors.point,
+		padding: {
+			left: 18,
+			right: 18,
+			top: 18,
+			bottom: 8
+		},
+		continuousX: {
+			value: (row) => seriesNumber(row, xKey.value),
+			format: (value) => format.number(value, xFormat.value),
+			label: xLabel.value ?? xKey.value,
+			title: xLabel.value
+		},
+		components: ({ series, x, y, instance }) => series.map((item) => {
+			const points = instance(`points:${item.key}`, () => new Scatter({
+				x,
+				y: () => 0
+			}));
+			points.setConfig({
+				x,
+				y: y(item),
+				color: item.color,
+				size: typeof size.value === "number" ? size.value : (row) => seriesNumber(row, size.value) ?? 0,
+				sizeRange: typeof size.value === "number" ? void 0 : BUBBLE_RANGE,
+				strokeColor: colors.surface,
+				strokeWidth: 1
+			});
+			return points;
+		})
+	}));
+	return () => createVNode(XYChart, mergeProps(rest, {
+		"_hiddenSeries": hiddenSeries.value,
+		"onUpdate:_hiddenSeries": _cache[0] || (_cache[0] = ($event) => hiddenSeries.value = $event),
+		"kind": kind.value
+	}), null);
+}, {
+	name: "ScatterChart",
+	props: [
+		"x",
+		"xLabel",
+		"xFormat",
+		"size",
+		"_hiddenSeries",
+		"onUpdate:_hiddenSeries"
+	]
+});
+//#endregion
+export { ScatterChart };
+
+//# sourceMappingURL=ScatterChart.js.map

package/dist/charts/ScatterChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/ScatterChart.tsx"],"sourcesContent":["/**\n * 散点图：横轴、纵轴都是数值，每一行在每个系列上画一个点；size 给成字段时点的大小随它变（气泡图）。\n * 悬停一个点，提示框列出这一行的名称、横轴的值与各系列的值。\n *\n *   <ScatterChart data={cities} index=\"name\" x=\"gdp\" xLabel=\"人均 GDP\" series={[{ key: 'life', label: '预期寿命' }]} />\n *   <ScatterChart data={products} index=\"name\" x=\"price\" series={[{ key: 'rating', label: '评分' }]} size=\"sales\" />\n *\n * 纵轴不强制从 0 起（按数据取）；图例、单位、加载与空状态、给读屏的数据表同其他图表（见 XYChart）。\n */\nimport { Scatter } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { colors } from '../config/theme/tokens';\nimport { useFormat } from '../config/lang/format';\nimport { seriesNumber, type NumericKey } from './series';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上 */\nexport interface ScatterChartProps<T extends object> extends XYChartProps<T> {\n  /** 横轴的数值字段 */\n  x: NumericKey<T>;\n  /** 横轴的名字：显示在横轴下方，提示框与数据表里也用；不写时轴下不显示，提示框与数据表用字段名 */\n  xLabel?: string;\n  /** 横轴数值的格式（Intl.NumberFormatOptions） */\n  xFormat?: Intl.NumberFormatOptions;\n  /**\n   * 点的直径（px），或者一个数值字段（气泡图：按它在 6–32px 之间缩放）\n   * @default 9\n   */\n  size?: number | NumericKey<T>;\n}\n\n/** 气泡图的大小范围（px） */\nconst BUBBLE_RANGE: [number, number] = [6, 32];\n\n/** 散点图 */\nexport const ScatterChart = _component(\n  <T extends object>({\n    x: xKey,\n    xLabel,\n    xFormat,\n    size = 9,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: ScatterChartProps<T>) => {\n    const format = useFormat();\n    const kind = _derived<XYChartKind<T>>({\n      zeroBaseline: false,\n      pointTooltip: Scatter.selectors.point,\n      // 留出半个最大气泡的边：贴边的点不被裁掉\n      padding: { left: 18, right: 18, top: 18, bottom: 8 },\n      continuousX: {\n        value: (row) => seriesNumber(row, xKey),\n        format: (value) => format.number(value, xFormat),\n        label: xLabel ?? xKey,\n        title: xLabel,\n      },\n      components: ({ series, x, y, instance }) =>\n        series.map((item) => {\n          const points = instance(`points:${item.key}`, () => new Scatter<T>({ x, y: () => 0 }));\n          points.setConfig({\n            x,\n            y: y(item),\n            color: item.color,\n            size: typeof size === 'number' ? size : (row: T) => seriesNumber(row, size) ?? 0,\n            sizeRange: typeof size === 'number' ? undefined : BUBBLE_RANGE,\n            // 气泡互相重叠时用表面色描一圈边分开\n            strokeColor: colors.surface,\n            strokeWidth: 1,\n          });\n          return points;\n        }),\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,IAAM,eAAiC,CAAC,GAAG,EAAE;;AAG7C,IAAa,eAAe,0BAC1B,QAAA,SAO4B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,GAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAHnB,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBAC0C,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,UAAU;CACzB,MAAM,OAAIC,gBAA4B;EACpC,cAAc;EACd,cAAc,QAAQ,UAAU;EAEhC,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;GAAI,QAAQ;EAAE;EACnD,aAAa;GACX,QAAQ,QAAQ,aAAa,KAAG,KAAA,KAAM;GACtC,SAAS,UAAU,OAAO,OAAO,OAAK,QAAA,KAAS;GAC/C,OAAO,OAAA,SAAA,KAAA;GACP,OAAK,OAAA;EACP;EACA,aAAa,EAAE,QAAQ,GAAG,GAAG,eAC3B,OAAO,KAAK,SAAS;GACnB,MAAM,SAAS,SAAS,UAAU,KAAK,aAAa,IAAI,QAAW;IAAE;IAAG,SAAS;GAAE,CAAC,CAAC;GACrF,OAAO,UAAU;IACf;IACA,GAAG,EAAE,IAAI;IACT,OAAO,KAAK;IACZ,MAAM,OAAA,KAAA,UAAgB,WAAQ,KAAA,SAAW,QAAW,aAAa,KAAG,KAAA,KAAM,KAAK;IAC/E,WAAW,OAAA,KAAA,UAAgB,WAAW,KAAA,IAAY;IAElD,aAAa,OAAO;IACpB,aAAa;GACf,CAAC;GACD,OAAO;EACT,CAAC;CACL,EAAC;CACD,aAAOC,YAAA,SAAAC,WAAmB,MAAI;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,QAAA,KAAA;CAAA,CAAA,GAAA,IAAA;AAChC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/charts/TimelineChart.d.ts

@@ -0,0 +1,71 @@
+import { type VNodeChild } from 'vue';
+import type { PartProps } from '../utils/props';
+import { type ChartFrameParts } from './frame';
+import { type ChartColor } from './series';
+/** 一个时间点：Date、时间戳（毫秒）或 ISO 字符串（日期或日期时间） */
+export type TimelineTime = Date | number | string;
+/** 一段时间条 */
+export interface TimelineChartItem {
+    /** 所在的行（任务、项目、设备） */
+    row: string;
+    /** 开始 */
+    start: TimelineTime;
+    /** 结束；只有日期时含这一天 */
+    end: TimelineTime;
+    /** 名称：提示框的标题；不写时是行名 */
+    label?: string;
+    /** 系列的 key（计划、实际）：决定颜色、粗细与图例 */
+    series?: string;
+    /** 颜色：覆盖系列的颜色（拖期的一段标红） */
+    color?: ChartColor;
+}
+/** 时间条的系列 */
+export interface TimelineChartSeries {
+    /** 标识：项的 series 指向它 */
+    key: string;
+    /** 名称：图例、提示框 */
+    label: string;
+    /** 颜色；不写时按顺序取色板 */
+    color?: ChartColor;
+    /** bar 实心的条（默认）；track 宽而浅的轨道，画在下面（计划） */
+    variant?: 'bar' | 'track';
+}
+/** 时间轴上的一条竖线：里程碑、截止日 */
+export interface TimelineChartMarker {
+    /** 时间 */
+    at: TimelineTime;
+    /** 文字 */
+    label: string;
+    /** 颜色，默认次要色 */
+    color?: ChartColor;
+}
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+export interface TimelineChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
+    /** 各段时间条 */
+    items: readonly TimelineChartItem[];
+    /** 系列：颜色、图例与画法；不写时所有条同一个颜色 */
+    series?: readonly TimelineChartSeries[];
+    /** 行的顺序；不写时按第一次出现 */
+    rows?: readonly string[];
+    /** 标出今天（true）或指定的“今天” */
+    today?: boolean | TimelineTime;
+    /** 里程碑、截止日：竖线带文字 */
+    markers?: readonly TimelineChartMarker[];
+    /**
+     * 每行的高度（px）
+     * @default 32
+     */
+    rowHeight?: number;
+    /** 刻度上日期的写法；不写时按刻度的间隔选（几个月一格写“4月”，几天一格写“10/24”，几小时一格写“14:00”） */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** 加载中：绘图区显示骨架 */
+    loading?: boolean;
+    /** 隐藏的系列：点图例时写回，父级可以写 _hiddenSeries={keys} */
+    _hiddenSeries?: string[];
+    /** 没有数据时显示的内容 */
+    empty?: VNodeChild;
+    /** 悬停时的提示框，默认 true */
+    tooltip?: boolean;
+}
+/** 时间条图 */
+export declare const TimelineChart: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TimelineChartProps>;

package/dist/charts/TimelineChart.js

@@ -0,0 +1,267 @@
+import { useLang } from "../config/context.js";
+import { parseIsoDate, parseIsoDateTime } from "../utils/data/date.js";
+import { useFormat } from "../config/lang/format.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { ChartFrame, chartDuration, chartTooltip, createChartInstances, uniqueHighlightFilter, usePlotSeen } from "./frame.js";
+import { resolveColor } from "./series.js";
+import { xyChartStyles } from "./XYChart.js";
+import { computed, createVNode, mergeProps, render, shallowRef, useId } from "vue";
+import { _component, bindable, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { getLocalTimeZone } from "@internationalized/date";
+import { Axis, Plotline, PlotlineLabelPosition, PlotlineLineStylePresets, Scale, Timeline, Tooltip, XYContainer } from "@unovis/ts";
+//#region src/charts/TimelineChart.tsx
+/**
+* 时间条图（甘特图式）：每行一个任务（项目、设备、人），横轴是时间，每项一段时间条；
+* 计划画成宽而浅的轨道、实际画在上面，一眼看出提前还是拖期。可以标出“今天”与里程碑。
+*
+*   <TimelineChart
+*     aria-label="项目进度"
+*     items={[
+*       { row: '官网改版', series: 'plan', start: '2026-03-01', end: '2026-06-30' },
+*       { row: '官网改版', series: 'actual', start: '2026-03-10', end: '2026-07-20' },
+*     ]}
+*     series={[{ key: 'plan', label: '计划', variant: 'track' }, { key: 'actual', label: '实际' }]}
+*     today
+*   />
+*
+* 时间可以是 Date、时间戳或 ISO 字符串；只有日期（'2026-06-30'）的结束含这一天。行按 rows 的顺序，没给时按第一次出现。
+* 悬停一段显示名称、起止与天数；读屏的数据表列出每一项。绘图交给 Unovis 的 Timeline（XYContainer、时间轴）。
+*/
+/** 一个时间点：Date、时间戳（毫秒）或 ISO 字符串（日期或日期时间） */
+/** 一段时间条 */
+/** 时间条的系列 */
+/** 时间轴上的一条竖线：里程碑、截止日 */
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+/** 画图用的一段：时间换成毫秒 */
+var DAY = 864e5;
+var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+/** 轨道（计划）的颜色：系列色调浅 */
+var trackColor = (color) => `color-mix(in srgb, ${color} 30%, transparent)`;
+/** 按刻度的间隔选日期的写法：几个月一格写月，几天一格写月日，不到一天写时分 */
+function autoFormat(ticks) {
+	const step = ticks.length > 1 ? ticks[1].getTime() - ticks[0].getTime() : DAY;
+	if (step >= 28 * DAY) return { month: "short" };
+	if (step >= DAY) return {
+		month: "numeric",
+		day: "numeric"
+	};
+	return {
+		hour: "2-digit",
+		minute: "2-digit"
+	};
+}
+/** 时间点换成毫秒：ISO 字符串按语言的时区；只有日期的结束取到这一天的末尾 */
+function toTime(value, timeZone, end = false) {
+	if (typeof value === "number") return value;
+	if (value instanceof Date) return value.getTime();
+	const date = ISO_DATE.test(value) ? parseIsoDate(value) : null;
+	if (date) return date.toDate(timeZone).getTime() + (end ? DAY : 0);
+	const dateTime = parseIsoDateTime(value);
+	if (dateTime) return dateTime.toDate(timeZone).getTime();
+	return Date.parse(value);
+}
+/** 时间条图 */
+var TimelineChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const items = readonlyProp(_props, "items");
+	const series = readonlyProp(_props, "series", () => []);
+	const rows = readonlyProp(_props, "rows");
+	const today = readonlyProp(_props, "today");
+	const markers = readonlyProp(_props, "markers");
+	const rowHeight = readonlyProp(_props, "rowHeight", 32);
+	const dateFormat = readonlyProp(_props, "dateFormat");
+	const loading = readonlyProp(_props, "loading", false);
+	const hiddenSeries = bindable(_props, "_hiddenSeries", () => [], _ctx.emit);
+	const empty = readonlyProp(_props, "empty");
+	const tooltip = readonlyProp(_props, "tooltip", true);
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const id = useId();
+	const zone = () => lang.timeZone ?? getLocalTimeZone();
+	const colorOf = (key) => {
+		const position = series.value.findIndex((item) => item.key === key);
+		return resolveColor(series.value[position]?.color, Math.max(position, 0));
+	};
+	const rowOrder = computed(() => rows.value ?? [...new Set(items.value.map((item) => item.row))]);
+	const visible = computed(() => items.value.filter((item) => item.series === void 0 || !hiddenSeries.value.includes(item.series)));
+	const dateText = (time) => format.date(new Date(time), { dateStyle: "medium" });
+	const daysText = (segment) => lang.chartDays(Math.round((segment.end - segment.start) / DAY));
+	function toggle(key) {
+		hiddenSeries.value = hiddenSeries.value.includes(key) ? hiddenSeries.value.filter((item) => item !== key) : [...hiddenSeries.value, key];
+	}
+	/** 画图的各段：轨道先画（在下面），同一行里按开始时间 */
+	const segments = () => visible.value.map((item) => {
+		const track = series.value.find((entry) => entry.key === item.series)?.variant === "track";
+		return {
+			item,
+			start: toTime(item.start, zone()),
+			end: toTime(item.end, zone(), true),
+			color: item.color ? resolveColor(item.color, 0) : colorOf(item.series),
+			width: track ? rowHeight.value * .62 : rowHeight.value * .32,
+			track
+		};
+	}).sort((a, b) => rowOrder.value.indexOf(a.item.row) - rowOrder.value.indexOf(b.item.row) || Number(b.track) - Number(a.track) || a.start - b.start);
+	/** 竖线：今天与里程碑 */
+	const allMarkers = () => [...today.value !== void 0 && today.value !== false ? [{
+		at: today.value === true ? Date.now() : today.value,
+		label: lang.chartToday,
+		color: "danger"
+	}] : [], ...markers.value ?? []];
+	const instances = createChartInstances();
+	let tooltipElement;
+	let plot = shallowRef(null);
+	const seen = usePlotSeen(() => plot.value);
+	let container;
+	let containerElement;
+	effect(() => () => {
+		container?.destroy();
+		if (tooltipElement) render(null, tooltipElement);
+	});
+	effect(() => {
+		const data = segments();
+		const element = plot.value;
+		if (!element || loading.value || items.value.length === 0 || !seen()) return;
+		if (container && containerElement !== element) {
+			container.destroy();
+			container = void 0;
+			instances.reset();
+		}
+		const times = [...data.flatMap((segment) => [segment.start, segment.end]), ...allMarkers().map((marker) => toTime(marker.at, zone()))];
+		const ticks = Scale.scaleTime().domain([Math.min(...times), Math.max(...times)]).ticks(6);
+		const timeline = instances.get("timeline", () => new Timeline({ x: () => 0 }));
+		timeline.setConfig({
+			x: (segment) => segment.start,
+			lineDuration: (segment) => segment.end - segment.start,
+			lineRow: (segment) => segment.item.row,
+			lineWidth: (segment) => segment.width,
+			color: (segment) => segment.track ? trackColor(segment.color) : segment.color,
+			lineCap: true,
+			rowHeight: rowHeight.value,
+			showRowLabels: true,
+			rowMaxLabelWidth: 160,
+			alternatingRowColors: true
+		});
+		const lines = allMarkers().map((marker, position) => {
+			const line = instances.get(`marker-${position}`, () => new Plotline({}));
+			line.setConfig({
+				axis: "x",
+				value: toTime(marker.at, zone()),
+				color: resolveColor(marker.color ?? "neutral", 0),
+				lineWidth: 1,
+				lineStyle: PlotlineLineStylePresets.ShortDash,
+				labelText: marker.label,
+				labelPosition: PlotlineLabelPosition.TopRight,
+				labelOffsetX: 4,
+				labelOffsetY: 2
+			});
+			return line;
+		});
+		const xAxis = instances.get("xAxis", () => new Axis({ type: "x" }));
+		xAxis.setConfig({
+			type: "x",
+			tickValues: ticks.map((tick) => tick.getTime()),
+			tickFormat: (tick) => format.date(new Date(Number(tick)), dateFormat.value ?? autoFormat(ticks)),
+			gridLine: true,
+			tickLine: false,
+			domainLine: false,
+			tickPadding: 8
+		});
+		const tooltipBox = instances.get("tooltip", () => new Tooltip());
+		tooltipBox.setConfig({ triggers: { [Timeline.selectors.line]: (segment) => {
+			tooltipElement ??= document.createElement("div");
+			const name = series.value.find((entry) => entry.key === segment.item.series)?.label;
+			render(chartTooltip(segment.item.label ?? segment.item.row, [
+				...name ? [{
+					label: name,
+					color: segment.color,
+					value: daysText(segment)
+				}] : [],
+				{
+					label: lang.chartStart,
+					color: "transparent",
+					value: dateText(segment.start)
+				},
+				{
+					label: lang.chartEnd,
+					color: "transparent",
+					value: dateText(segment.end - 1)
+				}
+			]), tooltipElement);
+			return tooltipElement;
+		} } });
+		const config = {
+			components: [timeline, ...lines],
+			xAxis,
+			tooltip: tooltip.value ? tooltipBox : void 0,
+			ariaLabel: null,
+			duration: chartDuration(element)
+		};
+		if (container) container.update(config, void 0, data);
+		else {
+			container = new XYContainer(element, config, data);
+			containerElement = element;
+			uniqueHighlightFilter(element, `${id}-highlight`);
+		}
+	});
+	return () => {
+		const shown = segments();
+		return createVNode(ChartFrame, mergeProps(rest, {
+			"sx": [xyChartStyles.hideCrosshairLine, rest.sx],
+			"height": rowOrder.value.length * rowHeight.value + 36,
+			"legend": series.value.map((item, position) => {
+				const color = resolveColor(item.color, position);
+				return {
+					key: item.key,
+					label: item.label,
+					color: item.variant === "track" ? trackColor(color) : color
+				};
+			}),
+			"hiddenKeys": hiddenSeries.value,
+			"onLegendToggle": toggle,
+			"loading": loading.value,
+			"skeleton": createVNode(Skeleton, { "sx": xyChartStyles.skeleton }, null),
+			"isEmpty": items.value.length === 0,
+			"empty": empty.value,
+			"table": {
+				columns: [
+					lang.chartCategory,
+					lang.chartSeries,
+					lang.chartStart,
+					lang.chartEnd,
+					lang.chartDuration
+				],
+				rows: shown.map((segment) => ({
+					header: segment.item.label ?? segment.item.row,
+					cells: [
+						series.value.find((entry) => entry.key === segment.item.series)?.label ?? lang.emptyValue,
+						dateText(segment.start),
+						dateText(segment.end - 1),
+						daysText(segment)
+					]
+				}))
+			},
+			"plotRef": _cache[0] || (_cache[0] = (element) => plot.value = element)
+		}), null);
+	};
+}, {
+	name: "TimelineChart",
+	props: [
+		"items",
+		"series",
+		"rows",
+		"today",
+		"markers",
+		"rowHeight",
+		"dateFormat",
+		"loading",
+		"_hiddenSeries",
+		"onUpdate:_hiddenSeries",
+		"empty",
+		"tooltip"
+	]
+});
+//#endregion
+export { TimelineChart };
+
+//# sourceMappingURL=TimelineChart.js.map

package/dist/charts/TimelineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/TimelineChart.tsx"],"sourcesContent":["/**\n * 时间条图（甘特图式）：每行一个任务（项目、设备、人），横轴是时间，每项一段时间条；\n * 计划画成宽而浅的轨道、实际画在上面，一眼看出提前还是拖期。可以标出“今天”与里程碑。\n *\n *   <TimelineChart\n *     aria-label=\"项目进度\"\n *     items={[\n *       { row: '官网改版', series: 'plan', start: '2026-03-01', end: '2026-06-30' },\n *       { row: '官网改版', series: 'actual', start: '2026-03-10', end: '2026-07-20' },\n *     ]}\n *     series={[{ key: 'plan', label: '计划', variant: 'track' }, { key: 'actual', label: '实际' }]}\n *     today\n *   />\n *\n * 时间可以是 Date、时间戳或 ISO 字符串；只有日期（'2026-06-30'）的结束含这一天。行按 rows 的顺序，没给时按第一次出现。\n * 悬停一段显示名称、起止与天数；读屏的数据表列出每一项。绘图交给 Unovis 的 Timeline（XYContainer、时间轴）。\n */\nimport {\n  Axis,\n  Scale,\n  Plotline,\n  PlotlineLabelPosition,\n  PlotlineLineStylePresets,\n  Timeline,\n  Tooltip,\n  XYContainer,\n} from '@unovis/ts';\nimport { getLocalTimeZone } from '@internationalized/date';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { render, useId, type VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { parseIsoDate, parseIsoDateTime } from '../utils/data/date';\nimport type { PartProps } from '../utils/props';\nimport {\n  ChartFrame,\n  chartDuration,\n  chartTooltip,\n  createChartInstances,\n  uniqueHighlightFilter,\n  usePlotSeen,\n  type ChartFrameParts,\n} from './frame';\nimport { resolveColor, type ChartColor } from './series';\nimport { xyChartStyles } from './XYChart';\n\n/** 一个时间点：Date、时间戳（毫秒）或 ISO 字符串（日期或日期时间） */\nexport type TimelineTime = Date | number | string;\n\n/** 一段时间条 */\nexport interface TimelineChartItem {\n  /** 所在的行（任务、项目、设备） */\n  row: string;\n  /** 开始 */\n  start: TimelineTime;\n  /** 结束；只有日期时含这一天 */\n  end: TimelineTime;\n  /** 名称：提示框的标题；不写时是行名 */\n  label?: string;\n  /** 系列的 key（计划、实际）：决定颜色、粗细与图例 */\n  series?: string;\n  /** 颜色：覆盖系列的颜色（拖期的一段标红） */\n  color?: ChartColor;\n}\n\n/** 时间条的系列 */\nexport interface TimelineChartSeries {\n  /** 标识：项的 series 指向它 */\n  key: string;\n  /** 名称：图例、提示框 */\n  label: string;\n  /** 颜色；不写时按顺序取色板 */\n  color?: ChartColor;\n  /** bar 实心的条（默认）；track 宽而浅的轨道，画在下面（计划） */\n  variant?: 'bar' | 'track';\n}\n\n/** 时间轴上的一条竖线：里程碑、截止日 */\nexport interface TimelineChartMarker {\n  /** 时间 */\n  at: TimelineTime;\n  /** 文字 */\n  label: string;\n  /** 颜色，默认次要色 */\n  color?: ChartColor;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface TimelineChartProps\n  extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 各段时间条 */\n  items: readonly TimelineChartItem[];\n  /** 系列：颜色、图例与画法；不写时所有条同一个颜色 */\n  series?: readonly TimelineChartSeries[];\n  /** 行的顺序；不写时按第一次出现 */\n  rows?: readonly string[];\n  /** 标出今天（true）或指定的“今天” */\n  today?: boolean | TimelineTime;\n  /** 里程碑、截止日：竖线带文字 */\n  markers?: readonly TimelineChartMarker[];\n  /**\n   * 每行的高度（px）\n   * @default 32\n   */\n  rowHeight?: number;\n  /** 刻度上日期的写法；不写时按刻度的间隔选（几个月一格写“4月”，几天一格写“10/24”，几小时一格写“14:00”） */\n  dateFormat?: Intl.DateTimeFormatOptions;\n  /** 加载中：绘图区显示骨架 */\n  loading?: boolean;\n  /** 隐藏的系列：点图例时写回，父级可以写 _hiddenSeries={keys} */\n  _hiddenSeries?: string[];\n  /** 没有数据时显示的内容 */\n  empty?: VNodeChild;\n  /** 悬停时的提示框，默认 true */\n  tooltip?: boolean;\n}\n\n/** 画图用的一段：时间换成毫秒 */\ninterface Segment {\n  item: TimelineChartItem;\n  start: number;\n  end: number;\n  color: string;\n  width: number;\n  track: boolean;\n}\n\nconst DAY = 86_400_000;\nconst ISO_DATE = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n/** 轨道（计划）的颜色：系列色调浅 */\nconst trackColor = (color: string) => `color-mix(in srgb, ${color} 30%, transparent)`;\n\n/** 按刻度的间隔选日期的写法：几个月一格写月，几天一格写月日，不到一天写时分 */\nfunction autoFormat(ticks: readonly Date[]): Intl.DateTimeFormatOptions {\n  const step = ticks.length > 1 ? ticks[1]!.getTime() - ticks[0]!.getTime() : DAY;\n  if (step >= 28 * DAY) return { month: 'short' };\n  if (step >= DAY) return { month: 'numeric', day: 'numeric' };\n  return { hour: '2-digit', minute: '2-digit' };\n}\n\n/** 时间点换成毫秒：ISO 字符串按语言的时区；只有日期的结束取到这一天的末尾 */\nfunction toTime(value: TimelineTime, timeZone: string, end = false): number {\n  if (typeof value === 'number') return value;\n  if (value instanceof Date) return value.getTime();\n  // 只有日期：结束取到这一天的末尾（parseIsoDateTime 也接受只有日期的写法，要先认出来）\n  const date = ISO_DATE.test(value) ? parseIsoDate(value) : null;\n  if (date) return date.toDate(timeZone).getTime() + (end ? DAY : 0);\n  const dateTime = parseIsoDateTime(value);\n  if (dateTime) return dateTime.toDate(timeZone).getTime();\n  return Date.parse(value);\n}\n\n/** 时间条图 */\nexport const TimelineChart = _component(\n  ({\n    items,\n    series = [],\n    rows,\n    today,\n    markers,\n    rowHeight = 32,\n    dateFormat,\n    loading = false,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    empty,\n    tooltip = true,\n    ...rest\n  }: TimelineChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const id = useId();\n    const zone = () => lang.timeZone ?? getLocalTimeZone();\n    const colorOf = (key: string | undefined) => {\n      const position = series.findIndex((item) => item.key === key);\n      return resolveColor(series[position]?.color, Math.max(position, 0));\n    };\n    const rowOrder = _derived(rows ?? [...new Set(items.map((item) => item.row))]);\n    const visible = _derived(\n      items.filter((item) => item.series === undefined || !hiddenSeries.includes(item.series)),\n    );\n    const dateText = (time: number) => format.date(new Date(time), { dateStyle: 'medium' });\n    const daysText = (segment: Segment) =>\n      lang.chartDays(Math.round((segment.end - segment.start) / DAY));\n\n    function toggle(key: string) {\n      hiddenSeries = hiddenSeries.includes(key)\n        ? hiddenSeries.filter((item) => item !== key)\n        : [...hiddenSeries, key];\n    }\n\n    /** 画图的各段：轨道先画（在下面），同一行里按开始时间 */\n    const segments = (): Segment[] =>\n      visible\n        .map((item): Segment => {\n          const track = series.find((entry) => entry.key === item.series)?.variant === 'track';\n          return {\n            item,\n            start: toTime(item.start, zone()),\n            end: toTime(item.end, zone(), true),\n            color: item.color ? resolveColor(item.color, 0) : colorOf(item.series),\n            width: track ? rowHeight * 0.62 : rowHeight * 0.32,\n            track,\n          };\n        })\n        .sort(\n          (a, b) =>\n            rowOrder.indexOf(a.item.row) - rowOrder.indexOf(b.item.row) ||\n            Number(b.track) - Number(a.track) ||\n            a.start - b.start,\n        );\n\n    /** 竖线：今天与里程碑 */\n    const allMarkers = (): TimelineChartMarker[] => [\n      ...(today !== undefined && today !== false\n        ? [{ at: today === true ? Date.now() : today, label: lang.chartToday, color: 'danger' }]\n        : []),\n      ...(markers ?? []),\n    ];\n\n    const instances = createChartInstances();\n    let tooltipElement: HTMLElement | undefined;\n    let plot = _state.raw<HTMLElement | null>(null);\n    const seen = usePlotSeen(() => plot);\n    let container: XYContainer<Segment> | undefined;\n    let containerElement: HTMLElement | undefined;\n    _effect(() => () => {\n      container?.destroy();\n      if (tooltipElement) render(null, tooltipElement);\n    });\n    _effect(() => {\n      const data = segments();\n      const element = plot;\n      if (!element || loading || items.length === 0 || !seen()) return;\n      if (container && containerElement !== element) {\n        container.destroy();\n        container = undefined;\n        instances.reset();\n      }\n      const times = [\n        ...data.flatMap((segment) => [segment.start, segment.end]),\n        ...allMarkers().map((marker) => toTime(marker.at, zone())),\n      ];\n      const ticks = Scale.scaleTime()\n        .domain([Math.min(...times), Math.max(...times)])\n        .ticks(6);\n      const timeline = instances.get('timeline', () => new Timeline<Segment>({ x: () => 0 }));\n      timeline.setConfig({\n        x: (segment) => segment.start,\n        lineDuration: (segment) => segment.end - segment.start,\n        lineRow: (segment) => segment.item.row,\n        lineWidth: (segment) => segment.width,\n        color: (segment) => (segment.track ? trackColor(segment.color) : segment.color),\n        lineCap: true,\n        rowHeight,\n        showRowLabels: true,\n        rowMaxLabelWidth: 160,\n        alternatingRowColors: true,\n      });\n      const lines = allMarkers().map((marker, position) => {\n        const line = instances.get(`marker-${position}`, () => new Plotline<Segment>({}));\n        line.setConfig({\n          axis: 'x',\n          value: toTime(marker.at, zone()),\n          color: resolveColor(marker.color ?? 'neutral', 0),\n          lineWidth: 1,\n          lineStyle: PlotlineLineStylePresets.ShortDash,\n          labelText: marker.label,\n          labelPosition: PlotlineLabelPosition.TopRight,\n          labelOffsetX: 4,\n          labelOffsetY: 2,\n        });\n        return line;\n      });\n      const xAxis = instances.get('xAxis', () => new Axis<Segment>({ type: 'x' }));\n      xAxis.setConfig({\n        type: 'x',\n        // 整齐的时间刻度：月初、周、日、整点（d3 的时间刻度）\n        tickValues: ticks.map((tick) => tick.getTime()),\n        tickFormat: (tick) => format.date(new Date(Number(tick)), dateFormat ?? autoFormat(ticks)),\n        gridLine: true,\n        tickLine: false,\n        domainLine: false,\n        tickPadding: 8,\n      });\n      const tooltipBox = instances.get('tooltip', () => new Tooltip());\n      tooltipBox.setConfig({\n        triggers: {\n          [Timeline.selectors.line]: (segment: Segment) => {\n            tooltipElement ??= document.createElement('div');\n            const name = series.find((entry) => entry.key === segment.item.series)?.label;\n            render(\n              chartTooltip(segment.item.label ?? segment.item.row, [\n                ...(name ? [{ label: name, color: segment.color, value: daysText(segment) }] : []),\n                { label: lang.chartStart, color: 'transparent', value: dateText(segment.start) },\n                { label: lang.chartEnd, color: 'transparent', value: dateText(segment.end - 1) },\n              ]),\n              tooltipElement,\n            );\n            return tooltipElement;\n          },\n        },\n      });\n      const config = {\n        components: [timeline, ...lines],\n        xAxis,\n        tooltip: tooltip ? tooltipBox : undefined,\n        ariaLabel: null,\n        duration: chartDuration(element),\n      };\n      if (container) container.update(config, undefined, data);\n      else {\n        container = new XYContainer<Segment>(element, config, data);\n        containerElement = element;\n        uniqueHighlightFilter(element, `${id}-highlight`);\n      }\n    });\n\n    return () => {\n      const shown = segments();\n      return (\n        <ChartFrame\n          {...rest}\n          sx={[xyChartStyles.hideCrosshairLine, rest.sx]}\n          // 行数 × 行高，加上时间轴\n          height={rowOrder.length * rowHeight + 36}\n          legend={series.map((item, position) => {\n            const color = resolveColor(item.color, position);\n            return {\n              key: item.key,\n              label: item.label,\n              color: item.variant === 'track' ? trackColor(color) : color,\n            };\n          })}\n          hiddenKeys={hiddenSeries}\n          onLegendToggle={toggle}\n          loading={loading}\n          skeleton={<Skeleton sx={xyChartStyles.skeleton} />}\n          isEmpty={items.length === 0}\n          empty={empty}\n          table={{\n            columns: [\n              lang.chartCategory,\n              lang.chartSeries,\n              lang.chartStart,\n              lang.chartEnd,\n              lang.chartDuration,\n            ],\n            rows: shown.map((segment) => ({\n              header: segment.item.label ?? segment.item.row,\n              cells: [\n                series.find((entry) => entry.key === segment.item.series)?.label ?? lang.emptyValue,\n                dateText(segment.start),\n                dateText(segment.end - 1),\n                daysText(segment),\n              ],\n            })),\n          }}\n          plotRef={(element) => (plot = element)}\n        />\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/charts/TreemapChart.d.ts

@@ -0,0 +1,40 @@
+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 NumericKey } from './series';
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+export interface TreemapChartProps<T extends object> extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
+    /** 明细 */
+    data: readonly T[];
+    /** 分组的字段，从外到内（区域、供应商） */
+    groups: readonly (keyof T & string)[];
+    /** 面积的数值字段 */
+    value: NumericKey<T>;
+    /** 数值的格式 */
+    valueFormat?: NumericFormat;
+    /** 单位：显示在左上方，提示框与数据表的数值后面带上 */
+    unit?: string;
+    /**
+     * 绘图区的高度；数字按 px
+     * @default 300
+     */
+    height?: number | string;
+    /** 外层分组也写名字（块够大时） */
+    groupLabels?: boolean;
+    /** 隐藏的顶层分组：点图例时写回，父级可以写 _hiddenGroups={keys} */
+    _hiddenGroups?: string[];
+    /** 加载中：绘图区显示骨架 */
+    loading?: boolean;
+    /** 没有数据时显示的内容 */
+    empty?: VNodeChild;
+    /** 悬停时的提示框，默认 true */
+    tooltip?: boolean;
+}
+/** TreemapChart 的样式 */
+export declare const treemapChartStyles: Readonly<{
+    skeleton: css.CompiledStyles;
+}>;
+/** 矩形树图 */
+export declare const TreemapChart: <T extends object>(props: TreemapChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;