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

package/dist/charts/TimelineChart.js

@@ -1,15 +1,18 @@
+import { svgNumber } from "../utils/data/number.js";
 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 { useDetachedRender } from "../overlay/detached.js";
-import { ChartFrame, chartDuration, chartTooltip, createChartInstances, uniqueHighlightFilter, usePlotSeen } from "./frame.js";
+import { ChartTooltipBox, chartAxis, chartSvgStyles, pointerIn, usePlotArea } from "./plot.js";
+import { linearScale, timeTicks } from "./scale.js";
+import { ChartFrame, chartTooltip } from "./frame.js";
 import { resolveColor } from "./series.js";
+import { estimateTextWidth, truncateText } from "./text-size.js";
 import { xyChartStyles } from "./XYChart.js";
-import { computed, createVNode, shallowRef, useId } from "vue";
-import { _component, bindable, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+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 { getLocalTimeZone } from "@internationalized/date";
-import { Axis, Plotline, PlotlineLabelPosition, PlotlineLineStylePresets, Scale, Timeline, Tooltip, XYContainer } from "@unovis/ts";
 //#region src/charts/TimelineChart.tsx
 /**
 * 时间条图（甘特图式）：每行一个任务（项目、设备、人），横轴是时间，每项一段时间条；
@@ -26,7 +29,8 @@ import { Axis, Plotline, PlotlineLabelPosition, PlotlineLineStylePresets, Scale,
 *   />
 *
 * 时间可以是 Date、时间戳或 ISO 字符串；只有日期（'2026-06-30'）的结束含这一天。行按 rows 的顺序，没给时按第一次出现。
-* 悬停一段显示名称、起止与天数；读屏的数据表列出每一项。绘图交给 Unovis 的 Timeline（XYContainer、时间轴）。
+* 左侧是行名，底下是整齐的时间刻度（月初、周、日、整点，见 timeTicks）；悬停一段显示名称、起止与天数；
+* 读屏的数据表列出每一项。
 */
 /** 一个时间点：Date、时间戳（毫秒）或 ISO 字符串（日期或日期时间） */
 /** 一段时间条 */
@@ -36,6 +40,20 @@ import { Axis, Plotline, PlotlineLabelPosition, PlotlineLineStylePresets, Scale,
 /** 画图用的一段：时间换成毫秒 */
 var DAY = 864e5;
 var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+/** 行名最宽多少（px），更长的截短 */
+var LABEL_WIDTH = 160;
+/** TimelineChart 的样式：隔行的底色、时间条 */
+var timelineChartStyles = css.create({
+	stripe: { fill: "_surfaceMuted" },
+	segment: {
+		stroke: "_surface",
+		strokeWidth: 0
+	},
+	segmentActive: {
+		strokeWidth: 1.5,
+		stroke: "_text"
+	}
+});
 /** 轨道（计划）的颜色：系列色调浅 */
 var trackColor = (color) => `color-mix(in srgb, ${color} 30%, transparent)`;
 /** 按刻度的间隔选日期的写法：几个月一格写月，几天一格写月日，不到一天写时分 */
@@ -78,7 +96,6 @@ var TimelineChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	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);
@@ -109,70 +126,115 @@ var TimelineChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		label: lang.chartToday,
 		color: "danger"
 	}] : [], ...markers.value ?? []];
-	const instances = createChartInstances();
-	let tooltipElement;
-	const renderDetached = useDetachedRender();
-	let plot = shallowRef(null);
-	const seen = usePlotSeen(() => plot.value);
-	let container;
-	let containerElement;
-	effect(() => () => {
-		container?.destroy();
-	});
-	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 area = usePlotArea();
+	let hovered = shallowRef(null);
+	function onPointermove(event) {
+		const target = event.target.closest?.("[data-segment]");
+		if (!target) {
+			hovered.value = null;
+			return;
 		}
-		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;
-			renderDetached(chartTooltip(segment.item.label ?? segment.item.row, [
+		const { x, y } = pointerIn(event, event.currentTarget);
+		hovered.value = {
+			index: Number(target.getAttribute("data-segment")),
+			x,
+			y
+		};
+	}
+	function renderPlot(shown) {
+		const { width } = area;
+		const rowsHeight = rowOrder.value.length * rowHeight.value;
+		const labelWidth = Math.min(LABEL_WIDTH, Math.max(0, ...rowOrder.value.map((row) => estimateTextWidth(row))) + 16);
+		const marks = allMarkers().map((marker) => ({
+			...marker,
+			time: toTime(marker.at, zone())
+		}));
+		const times = [...shown.flatMap((segment) => [segment.start, segment.end]), ...marks.map((m) => m.time)];
+		const [low, high] = times.length ? [Math.min(...times), Math.max(...times)] : [0, DAY];
+		const [start, end] = low === high ? [low - DAY, high + DAY] : [low, high];
+		const scale = linearScale([start, end], [labelWidth + 8, Math.max(labelWidth + 9, width - 16)]);
+		const ticks = timeTicks(start, end, Math.max(2, Math.round((width - labelWidth) / 110)));
+		const tickFormat = dateFormat.value ?? autoFormat(ticks);
+		const plot = {
+			left: labelWidth + 8,
+			top: 0,
+			width: Math.max(0, width - labelWidth - 24),
+			height: rowsHeight
+		};
+		const rowOf = (row) => rowOrder.value.indexOf(row);
+		return createVNode("svg", mergeJsxProps({
+			"width": width,
+			"height": area.height
+		}, css.attrs(chartSvgStyles.svg), {
+			"onPointermove": onPointermove,
+			"onPointerleave": _cache[0] || (_cache[0] = () => hovered.value = null)
+		}), [
+			rowOrder.value.map((row, position) => position % 2 === 0 ? createVNode("rect", mergeJsxProps({
+				"key": `stripe:${row}`,
+				"x": 0,
+				"y": position * rowHeight.value,
+				"width": width,
+				"height": rowHeight.value
+			}, css.attrs(timelineChartStyles.stripe)), null) : null),
+			chartAxis({
+				side: "bottom",
+				ticks: ticks.map((tick) => ({
+					position: scale(tick.getTime()),
+					label: format.date(tick, tickFormat)
+				})),
+				plot,
+				grid: true
+			}),
+			rowOrder.value.map((row, position) => createVNode("text", mergeJsxProps({
+				"key": `label:${row}`,
+				"x": 0,
+				"y": svgNumber(position * rowHeight.value + rowHeight.value / 2),
+				"dominant-baseline": "central"
+			}, css.attrs(chartSvgStyles.label)), [truncateText(row, labelWidth - 12)])),
+			createVNode("g", css.attrs(chartSvgStyles.fadeIn), [shown.map((segment, index) => {
+				const row = rowOf(segment.item.row);
+				if (row < 0) return null;
+				const x = scale(segment.start);
+				const length = Math.max(segment.width, scale(segment.end) - x);
+				return createVNode("rect", mergeJsxProps({
+					"key": index,
+					"data-part": "segment",
+					"data-segment": index,
+					"x": svgNumber(x),
+					"y": svgNumber(row * rowHeight.value + (rowHeight.value - segment.width) / 2),
+					"width": svgNumber(length),
+					"height": svgNumber(segment.width),
+					"rx": svgNumber(segment.width / 2)
+				}, css.attrs(timelineChartStyles.segment, chartSvgStyles.fill(segment.track ? trackColor(segment.color) : segment.color), hovered.value?.index === index && timelineChartStyles.segmentActive)), null);
+			})]),
+			marks.map((marker, position) => {
+				const x = Math.round(scale(marker.time)) + .5;
+				const color = resolveColor(marker.color ?? "neutral", 0);
+				return createVNode("g", {
+					"key": `marker:${position}`,
+					"data-part": "marker"
+				}, [createVNode("line", mergeJsxProps({
+					"x1": x,
+					"x2": x,
+					"y1": 0,
+					"y2": rowsHeight
+				}, css.attrs(xyChartStyles.eventLine, chartSvgStyles.stroke(color))), null), createVNode("text", mergeJsxProps({
+					"x": x + 4,
+					"y": 4,
+					"dominant-baseline": "hanging"
+				}, css.attrs(chartSvgStyles.labelMuted, chartSvgStyles.halo, xyChartStyles.textFill(color), chartSvgStyles.noPointer)), [marker.label])]);
+			})
+		]);
+	}
+	const tip = (shown) => {
+		const current = hovered.value;
+		const segment = current && shown[current.index];
+		if (!tooltip.value || !current || !segment) return null;
+		const name = series.value.find((entry) => entry.key === segment.item.series)?.label;
+		return {
+			x: current.x,
+			y: current.y,
+			content: chartTooltip(segment.item.label ?? segment.item.row, [
 				...name ? [{
 					label: name,
 					color: segment.color,
@@ -188,27 +250,12 @@ var TimelineChart = /*#__PURE__*/ _component((_props, _ctx) => {
 					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, mergeJsxProps(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);
@@ -242,7 +289,12 @@ var TimelineChart = /*#__PURE__*/ _component((_props, _ctx) => {
 					]
 				}))
 			},
-			"plotRef": _cache[0] || (_cache[0] = (element) => plot.value = element)
+			"plotRef": area.ref,
+			"plot": area.ready ? [renderPlot(shown), createVNode(ChartTooltipBox, {
+				"key": "tooltip",
+				"tip": tip(shown),
+				"width": area.width
+			}, null)] : null
 		}), null);
 	};
 }, {
@@ -263,6 +315,6 @@ var TimelineChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	]
 });
 //#endregion
-export { TimelineChart };
+export { TimelineChart, timelineChartStyles };
 
 //# sourceMappingURL=TimelineChart.js.map

package/dist/charts/TimelineChart.js.map

@@ -1 +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 { useId, type VNodeChild } from 'vue';\nimport { useDetachedRender } from '../overlay/detached';\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    // 提示框的内容渲染进 Unovis 管的元素：带上调用处的主题与语言，组件卸载时一起卸载\n    const renderDetached = useDetachedRender();\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    });\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            renderDetached(\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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"}
+{"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 * 左侧是行名，底下是整齐的时间刻度（月初、周、日、整点，见 timeTicks）；悬停一段显示名称、起止与天数；\n * 读屏的数据表列出每一项。\n */\nimport { getLocalTimeZone } from '@internationalized/date';\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 } from '../config/lang/format';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { parseIsoDate, parseIsoDateTime } from '../utils/data/date';\nimport { svgNumber } from '../utils/data/number';\nimport type { PartProps } from '../utils/props';\nimport { ChartFrame, chartTooltip, type ChartFrameParts } from './frame';\nimport {\n  ChartTooltipBox,\n  chartAxis,\n  chartSvgStyles,\n  pointerIn,\n  usePlotArea,\n  type ChartTip,\n} from './plot';\nimport { linearScale, timeTicks } from './scale';\nimport { resolveColor, type ChartColor } from './series';\nimport { estimateTextWidth, truncateText } from './text-size';\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/** 行名最宽多少（px），更长的截短 */\nconst LABEL_WIDTH = 160;\n\n/** TimelineChart 的样式：隔行的底色、时间条 */\nexport const timelineChartStyles = css.create({\n  stripe: { fill: '_surfaceMuted' },\n  segment: { stroke: '_surface', strokeWidth: 0 },\n  segmentActive: { strokeWidth: 1.5, stroke: '_text' },\n});\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 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 area = usePlotArea();\n    let hovered = _state.raw<{ index: number; x: number; y: number } | null>(null);\n\n    function onPointermove(event: PointerEvent) {\n      const target = (event.target as Element).closest?.('[data-segment]');\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-segment')), x, y };\n    }\n\n    function renderPlot(shown: readonly Segment[]) {\n      const { width } = area;\n      const rowsHeight = rowOrder.length * rowHeight;\n      const labelWidth = Math.min(\n        LABEL_WIDTH,\n        Math.max(0, ...rowOrder.map((row) => estimateTextWidth(row))) + 16,\n      );\n      const marks = allMarkers().map((marker) => ({ ...marker, time: toTime(marker.at, zone()) }));\n      const times = [\n        ...shown.flatMap((segment) => [segment.start, segment.end]),\n        ...marks.map((m) => m.time),\n      ];\n      const [low, high] = times.length ? [Math.min(...times), Math.max(...times)] : [0, DAY];\n      const [start, end] = low === high ? [low - DAY, high + DAY] : [low, high];\n      const scale = linearScale(\n        [start, end],\n        [labelWidth + 8, Math.max(labelWidth + 9, width - 16)],\n      );\n      const ticks = timeTicks(start, end, Math.max(2, Math.round((width - labelWidth) / 110)));\n      const tickFormat = dateFormat ?? autoFormat(ticks);\n      const plot = {\n        left: labelWidth + 8,\n        top: 0,\n        width: Math.max(0, width - labelWidth - 24),\n        height: rowsHeight,\n      };\n      const rowOf = (row: string) => rowOrder.indexOf(row);\n      return (\n        <svg\n          width={width}\n          height={area.height}\n          {...css.attrs(chartSvgStyles.svg)}\n          onPointermove={onPointermove}\n          onPointerleave={() => (hovered = null)}\n        >\n          {rowOrder.map((row, position) =>\n            position % 2 === 0 ? (\n              <rect\n                key={`stripe:${row}`}\n                x={0}\n                y={position * rowHeight}\n                width={width}\n                height={rowHeight}\n                {...css.attrs(timelineChartStyles.stripe)}\n              />\n            ) : null,\n          )}\n          {chartAxis({\n            side: 'bottom',\n            ticks: ticks.map((tick) => ({\n              position: scale(tick.getTime()),\n              label: format.date(tick, tickFormat),\n            })),\n            plot,\n            grid: true,\n          })}\n          {rowOrder.map((row, position) => (\n            <text\n              key={`label:${row}`}\n              x={0}\n              y={svgNumber(position * rowHeight + rowHeight / 2)}\n              dominant-baseline=\"central\"\n              {...css.attrs(chartSvgStyles.label)}\n            >\n              {truncateText(row, labelWidth - 12)}\n            </text>\n          ))}\n          <g {...css.attrs(chartSvgStyles.fadeIn)}>\n            {shown.map((segment, index) => {\n              const row = rowOf(segment.item.row);\n              if (row < 0) return null;\n              const x = scale(segment.start);\n              const length = Math.max(segment.width, scale(segment.end) - x);\n              return (\n                <rect\n                  key={index}\n                  data-part=\"segment\"\n                  data-segment={index}\n                  x={svgNumber(x)}\n                  y={svgNumber(row * rowHeight + (rowHeight - segment.width) / 2)}\n                  width={svgNumber(length)}\n                  height={svgNumber(segment.width)}\n                  rx={svgNumber(segment.width / 2)}\n                  {...css.attrs(\n                    timelineChartStyles.segment,\n                    chartSvgStyles.fill(segment.track ? trackColor(segment.color) : segment.color),\n                    hovered?.index === index && timelineChartStyles.segmentActive,\n                  )}\n                />\n              );\n            })}\n          </g>\n          {marks.map((marker, position) => {\n            const x = Math.round(scale(marker.time)) + 0.5;\n            const color = resolveColor(marker.color ?? 'neutral', 0);\n            return (\n              <g key={`marker:${position}`} data-part=\"marker\">\n                <line\n                  x1={x}\n                  x2={x}\n                  y1={0}\n                  y2={rowsHeight}\n                  {...css.attrs(xyChartStyles.eventLine, chartSvgStyles.stroke(color))}\n                />\n                <text\n                  x={x + 4}\n                  y={4}\n                  dominant-baseline=\"hanging\"\n                  {...css.attrs(\n                    chartSvgStyles.labelMuted,\n                    chartSvgStyles.halo,\n                    xyChartStyles.textFill(color),\n                    chartSvgStyles.noPointer,\n                  )}\n                >\n                  {marker.label}\n                </text>\n              </g>\n            );\n          })}\n        </svg>\n      );\n    }\n\n    const tip = (shown: readonly Segment[]): ChartTip | null => {\n      const current = hovered;\n      const segment = current && shown[current.index];\n      if (!tooltip || !current || !segment) return null;\n      const name = series.find((entry) => entry.key === segment.item.series)?.label;\n      return {\n        x: current.x,\n        y: current.y,\n        content: 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      };\n    };\n\n    return () => {\n      const shown = segments();\n      return (\n        <ChartFrame\n          {...rest}\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={area.ref}\n          plot={\n            area.ready\n              ? [\n                  renderPlot(shown),\n                  <ChartTooltipBox key=\"tooltip\" tip={tip(shown)} width={area.width} />,\n                ]\n              : null\n          }\n        />\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/charts/TreemapChart.d.ts

@@ -34,7 +34,13 @@ export interface TreemapChartProps<T extends object> extends PartProps<'div', 'r
 }
 /** TreemapChart 的样式 */
 export declare const treemapChartStyles: Readonly<{
+    group: css.CompiledStyles;
+    groupName: css.CompiledStyles;
+    name: css.CompiledStyles;
     skeleton: css.CompiledStyles;
+    tile: css.CompiledStyles;
+    tileActive: css.CompiledStyles;
+    value: css.CompiledStyles;
 }>;
 /** 矩形树图 */
 export declare const TreemapChart: <T extends object>(props: TreemapChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;