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

package/dist/charts/XYChart.js

@@ -1,43 +1,35 @@
+import { svgNumber } from "../utils/data/number.js";
 import { toNumber } from "../utils/data/numeric.js";
-import { colors } from "../config/theme/tokens.js";
 import { useLang } from "../config/context.js";
 import { Button } from "../base/Button.js";
 import { useFormat } from "../config/lang/format.js";
 import { Skeleton } from "../feedback/Skeleton.js";
-import { useDetachedRender } from "../overlay/detached.js";
 import { Slider } from "../input/Slider.js";
+import { ChartTooltipBox, chartAxis, chartSvgStyles, pointerIn, usePlotArea } from "./plot.js";
+import { stackValues } from "./stack.js";
+import { linearScale, linearTicks, niceDomain } from "./scale.js";
 import { alignedTicks } from "./axis-ticks.js";
-import { ChartFrame, chartDuration, chartTooltip, createChartInstances, uniqueHighlightFilter, useChartValueText, usePlotSeen } from "./frame.js";
+import { ChartFrame, chartTooltip, useChartValueText } from "./frame.js";
 import { resolveColor, resolveSeries, seriesNumber, seriesValue } from "./series.js";
-import { computed, createVNode, shallowRef, useId } from "vue";
-import { _component, bindable, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { estimateTextWidth, truncateText } from "./text-size.js";
+import { computed, createVNode, shallowRef } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
-import { Axis, AxisType, Crosshair, Plotband, PlotbandLabelPosition, Plotline, PlotlineLabelPosition, PlotlineLineStylePresets, Position, Scatter, Tooltip, XYContainer } from "@unovis/ts";
 //#region src/charts/XYChart.tsx
-/**
-* 直角坐标图表（柱状图、折线图、面积图）的公共部分：坐标轴、十字线与提示框、数值范围；外层结构（图例、单位、
-* 空与加载状态、给读屏的数据表）交给 ChartFrame。
-* 绘图交给 Unovis 的 XYContainer：组件实例只建一次，数据与配置变化时 update，卸载时 destroy；
-* 绘图区换了元素（加载、空状态之后重新出现）时容器连同全部实例一起重建。
-* 各种图只决定画什么（kind.components），坐标轴、十字线、提示框、配色都在这里统一。
-* 目标线（targets）用 Unovis 的 Plotline。点了下钻（onItemClick）：有图形可点的图（柱子）按图形的点击事件
-* （kind.itemSelector），折线、面积图按十字线所在的那一行，散点图按悬停的点。
-*
-* 标注（annotations）：类目上的事件画成竖线（Plotline），圈出某个系列的值画成空心圈带文字（Scatter）；
-* 区间（bands）画成浅色的带（Plotband）。百分比堆叠（kind.percent）按每个类目里各系列的占比画。
-* 第二数值轴（kind.secondary，组合图）：刻度与主轴对齐（alignedTicks），第二轴的系列换算到主轴的坐标里画，
-* 右侧的刻度文字是不裁剪的 Plotline 标签。
-*/
 /** 目标线（参考线）：数值轴上的一条虚线 */
 /** 标注：类目上发生的事（竖线），或圈出某个系列在这个类目上的值 */
 /** 区间：类目轴上的一段（试运行期、促销期），或数值轴上的一段（目标区间） */
 /** 第二数值轴（右侧）：哪些系列画在它上面，它的格式与单位 */
 /** 加载中的骨架 */
 /** 直角坐标图表共有的属性；未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
-/** 交给各种图的绘制上下文 */
-/** 一种图：画哪些组件，以及与坐标轴、十字线有关的差别 */
-/** 第二数值轴的刻度文字占的宽度（px） */
-var SECONDARY_AXIS_WIDTH = 48;
+/** 交给各种图的绘制上下文：坐标都是 SVG 里的 px */
+/** 一种图：画什么，以及与坐标轴、十字线有关的差别 */
+/** 刻度文字的字号（px）：主题的 xs */
+var TICK_FONT = 12;
+/** 刻度文字与绘图区的距离 */
+var TICK_GAP = 8;
+/** 散点图找最近的点时，离指针多远以内算悬停在点上（px） */
+var POINT_REACH = 24;
 /** 骨架柱的高度（百分比）：高低错落，看起来像一组数据 */
 var SKELETON_BARS = [
 	55,
@@ -48,9 +40,9 @@ var SKELETON_BARS = [
 	50,
 	65
 ];
-/** XYChart 的样式：hideCrosshairLine 与加载中的骨架（外层结构的样式见 chartStyles） */
+/** XYChart 的样式：缩放的滑块、加载中的骨架、标注（外层结构的样式见 chartStyles） */
 var xyChartStyles = css.create({
-	hideCrosshairLine: { "--vis-crosshair-line-stroke-opacity": "0" },
+	svg: { touchAction: "pan-y" },
 	skeleton: {
 		display: "block",
 		width: "100%",
@@ -84,7 +76,29 @@ var xyChartStyles = css.create({
 		borderRadius: "_sm"
 	},
 	skeletonBarSize: (percent) => ({ height: percent }),
-	skeletonBarSizeHorizontal: (percent) => ({ width: percent })
+	skeletonBarSizeHorizontal: (percent) => ({ width: percent }),
+	targetLine: {
+		strokeWidth: 1.5,
+		strokeDasharray: "6 4",
+		pointerEvents: "none"
+	},
+	eventLine: {
+		strokeWidth: 1,
+		strokeDasharray: "3 3",
+		pointerEvents: "none"
+	},
+	mark: {
+		fill: "none",
+		strokeWidth: 2,
+		pointerEvents: "none"
+	},
+	crosshairDot: {
+		stroke: "_surface",
+		strokeWidth: 2,
+		pointerEvents: "none"
+	},
+	bandFill: (color) => ({ fill: `color-mix(in srgb, ${color} 12%, transparent)` }),
+	textFill: (color) => ({ fill: color })
 });
 /** 加载中绘图区的骨架：柱状图是一排高低不一的柱（横向时是条），其余是一整块 */
 function chartSkeleton({ skeleton = "block", horizontal = false }) {
@@ -94,6 +108,9 @@ function chartSkeleton({ skeleton = "block", horizontal = false }) {
 		"sx": [xyChartStyles.skeletonBar, horizontal ? xyChartStyles.skeletonBarSizeHorizontal(`${percent}%`) : xyChartStyles.skeletonBarSize(`${percent}%`)]
 	}, null))]);
 }
+/** 数值轴上约几格：每格不少于 45px（横着的轴 90px），2–6 格 */
+var tickCount = (length, horizontal) => Math.max(2, Math.min(6, Math.round(length / (horizontal ? 90 : 45))));
+/** 指针悬停的状态：行的位置、提示框的位置 */
 /** 直角坐标图表的公共实现（组件库内部用，见 BarChart、LineChart、AreaChart） */
 var XYChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
@@ -118,13 +135,13 @@ var XYChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const zoom = readonlyProp(_props, "zoom", false);
 	const zoomRange = bindable(_props, "_zoomRange", () => null, _ctx.emit);
 	const kind = readonlyProp(_props, "kind");
-	const sx = readonlyProp(_props, "sx");
 	const rest = restProps(_props, _ctx, true);
 	const lang = useLang();
 	const format = useFormat();
-	const id = useId();
+	const area = usePlotArea();
 	const resolved = computed(() => resolveSeries(series.value));
 	const visible = computed(() => resolved.value.filter((item) => !hiddenSeries.value.includes(item.key)));
+	let hover = shallowRef(null);
 	const categoryText = (row) => row === void 0 ? "" : indexFormat.value ? indexFormat.value(row[index.value], row) : String(row[index.value] ?? "");
 	const valueText = useChartValueText(() => ({
 		valueFormat: valueFormat.value,
@@ -173,21 +190,9 @@ var XYChart = /*#__PURE__*/ _component((_props, _ctx) => {
 			$stable: true
 		})]);
 	};
-	const instances = createChartInstances();
-	let tooltipElement;
-	const renderDetached = useDetachedRender();
-	let hovered = null;
-	const hover = (row) => {
-		hovered = row === void 0 ? null : {
-			row,
-			index: data.value.indexOf(row)
-		};
-	};
-	/** 十字线的提示框：内容用 Vue 渲染进同一个元素，交给 Unovis 定位 */
-	function renderTooltip(row) {
-		tooltipElement ??= document.createElement("div");
-		if (kind.value.pointTooltip) hover(row);
-		renderDetached(chartTooltip(categoryText(row), kind.value.tooltipItems?.(row) ?? [...kind.value.continuousX ? [{
+	/** 提示框的内容：类目（或点的名字）与各系列的值 */
+	function tooltipContent(row) {
+		return chartTooltip(categoryText(row), kind.value.tooltipItems?.(row) ?? [...kind.value.continuousX ? [{
 			label: kind.value.continuousX.label,
 			color: "transparent",
 			value: xText(row)
@@ -199,248 +204,466 @@ var XYChart = /*#__PURE__*/ _component((_props, _ctx) => {
 				color: item.color,
 				value: kind.value.percent && value !== void 0 && total > 0 ? `${seriesText(item.key, value)}（${percentText(toNumber(value) / total)}）` : seriesText(item.key, value)
 			};
-		})]), tooltipElement);
-		return tooltipElement;
+		})]);
 	}
-	let plot = shallowRef(null);
-	const seen = usePlotSeen(() => plot.value);
-	let container;
-	let containerElement;
-	effect(() => () => {
-		container?.destroy();
+	/** 缩放：只画选中的一段（散点图的横轴是连续的数值，不按类目缩放） */
+	const range = () => zoom.value && !kind.value.continuousX ? zoomRange.value : null;
+	const shownRows = computed(() => {
+		const selected = range();
+		return selected ? data.value.slice(selected[0], selected[1] + 1) : data.value;
 	});
-	effect(() => {
-		const range = zoom.value && !kind.value.continuousX ? zoomRange.value : null;
-		const rows = range ? data.value.slice(range[0], range[1] + 1) : [...data.value];
+	/** 画图要的一切：比例尺、刻度、边距；随数据、属性、绘图区大小变 */
+	const layout = computed(() => {
+		const rows = shownRows.value;
+		const width = area.width;
+		const plotHeight = area.height;
+		const horizontal = kind.value.horizontal ?? false;
 		const shown = visible.value;
-		const element = plot.value;
-		if (!element || loading.value || rows.length === 0 || !seen()) return;
-		if (container && containerElement !== element) {
-			container.destroy();
-			container = void 0;
-			instances.reset();
-		}
 		const primarySeries = shown.filter((item) => !onSecondary(item.key));
 		const secondarySeries = shown.filter((item) => onSecondary(item.key));
 		const totals = rows.map((row) => primarySeries.map((item) => seriesNumber(row, item.key) ?? 0));
 		const values = [
-			...kind.value.domainValues ? kind.value.domainValues(rows, primarySeries) : kind.value.stacked ? totals.flatMap((row) => [row.reduce((sum, value) => sum + Math.max(value, 0), 0), row.reduce((sum, value) => sum + Math.min(value, 0), 0)]) : totals.flat(),
+			...kind.value.domainValues ? kind.value.domainValues(rows, primarySeries) : kind.value.stacked ? totals.flatMap((row) => [row.reduce((sum, value) => sum + Math.max(value, 0), 0), row.reduce((sum, value) => sum + Math.min(value, 0), 0)]) : rows.flatMap((row) => primarySeries.flatMap((item) => seriesNumber(row, item.key) ?? [])),
 			...(targets.value ?? []).map((target) => toNumber(target.value)),
 			...(bands.value ?? []).filter((band) => band.axis === "value").flatMap((band) => [Number(band.from), Number(band.to)])
-		];
+		].filter(Number.isFinite);
 		const aligned = secondarySeries.length > 0 ? alignedTicks([...values, ...[valueDomain.value?.[0], valueDomain.value?.[1]].filter((end) => end !== void 0)], rows.flatMap((row) => secondarySeries.map((item) => seriesNumber(row, item.key) ?? 0))) : void 0;
-		const domain = kind.value.percent ? [0, 1] : aligned ? aligned.primary.domain : [valueDomain.value?.[0] ?? (kind.value.zeroBaseline === false ? void 0 : Math.min(0, ...values)), valueDomain.value?.[1]];
-		const x = kind.value.continuousX ? (row) => kind.value.continuousX.value(row) ?? NaN : (_row, position) => position;
-		const y = (item) => {
-			if (kind.value.percent) return (row) => {
-				const value = seriesNumber(row, item.key);
+		const valueLength = horizontal ? width : plotHeight;
+		let domain;
+		let ticks;
+		if (kind.value.percent) {
+			domain = [0, 1];
+			ticks = linearTicks(0, 1, tickCount(valueLength, horizontal));
+		} else if (aligned) {
+			domain = aligned.primary.domain;
+			ticks = aligned.primary.ticks;
+		} else {
+			const fromZero = kind.value.zeroBaseline !== false;
+			const low = values.length ? Math.min(...values, ...fromZero ? [0] : []) : 0;
+			const high = values.length ? Math.max(...values, ...fromZero ? [0] : []) : 1;
+			const [autoLow, autoHigh] = low === high ? [low - 1, high + 1] : [low, high];
+			const nice = niceDomain([valueDomain.value?.[0] ?? autoLow, valueDomain.value?.[1] ?? autoHigh], tickCount(valueLength, horizontal));
+			domain = [valueDomain.value?.[0] ?? nice[0], valueDomain.value?.[1] ?? nice[1]];
+			ticks = linearTicks(domain[0], domain[1], tickCount(valueLength, horizontal));
+		}
+		const valueLabel = (tick) => kind.value.percent ? format.number(tick, {
+			style: "percent",
+			maximumFractionDigits: 0
+		}) : format.number(tick, valueFormat.value);
+		const valueLabels = ticks.map(valueLabel);
+		const secondaryLabels = aligned ? aligned.secondary.ticks.map((tick) => format.number(tick, kind.value.secondary?.format)) : [];
+		const continuous = kind.value.continuousX;
+		const xValues = continuous ? rows.map((row) => continuous.value(row)).filter((x) => x !== void 0) : [];
+		const xDomain = niceDomain(xValues.length ? [Math.min(...xValues), Math.max(...xValues)] : [0, 1], tickCount(width, true));
+		const xTicks = continuous ? linearTicks(xDomain[0], xDomain[1], tickCount(width, true)) : [];
+		const widest = (labels) => Math.max(0, ...labels.map((label) => estimateTextWidth(label, TICK_FONT)));
+		const categoryLabels = rows.map((row) => categoryText(row));
+		const padding = {
+			left: 0,
+			right: 0,
+			top: 0,
+			bottom: 0,
+			...kind.value.padding
+		};
+		const bottomLabels = horizontal ? valueLabels : continuous ? xTicks.map(continuous.format) : categoryLabels;
+		const margin = horizontal ? {
+			left: Math.min(widest(categoryLabels), width * .3) + TICK_GAP,
+			right: Math.max(8, widest(valueLabels.slice(-1)) / 2),
+			top: 4,
+			bottom: 22
+		} : {
+			left: widest(valueLabels) + TICK_GAP,
+			right: aligned ? widest(secondaryLabels) + TICK_GAP : 8,
+			top: 8,
+			bottom: 22 + (continuous?.title ? 20 : 0)
+		};
+		if (!horizontal && bottomLabels.length && !kind.value.band) {
+			margin.left = Math.max(margin.left, widest(bottomLabels.slice(0, 1)) / 2 - padding.left);
+			margin.right = Math.max(margin.right, widest(bottomLabels.slice(-1)) / 2 - padding.right);
+		}
+		const plot = {
+			left: margin.left,
+			top: margin.top,
+			width: Math.max(0, width - margin.left - margin.right),
+			height: Math.max(0, plotHeight - margin.top - margin.bottom)
+		};
+		const [cStart, cEnd] = horizontal ? [plot.top + padding.top, plot.top + plot.height - padding.bottom] : [plot.left + padding.left, plot.left + plot.width - padding.right];
+		const count = rows.length;
+		const step = kind.value.band ? (cEnd - cStart) / Math.max(count, 1) : count > 1 ? (cEnd - cStart) / (count - 1) : cEnd - cStart;
+		const xScale = linearScale(xDomain, [cStart, cEnd]);
+		const category = continuous ? (row) => xScale(continuous.value(row) ?? NaN) : (_row, position) => kind.value.band ? cStart + step * (position + .5) : count > 1 ? cStart + step * position : (cStart + cEnd) / 2;
+		const valueScale = horizontal ? linearScale(domain, [plot.left + padding.left, plot.left + plot.width - padding.right]) : linearScale(domain, [plot.top + plot.height - padding.bottom, plot.top + padding.top]);
+		const valueOf = (item, row) => {
+			const value = seriesNumber(row, item.key);
+			if (value === void 0) return void 0;
+			if (kind.value.percent) {
 				const total = rowTotal(row);
-				return value === void 0 || total === 0 ? void 0 : value / total;
-			};
-			if (aligned && onSecondary(item.key)) return (row) => {
-				const value = seriesNumber(row, item.key);
-				return value === void 0 ? void 0 : aligned.toPrimary(value);
-			};
-			return (row) => seriesNumber(row, item.key);
+				return total === 0 ? void 0 : value / total;
+			}
+			return aligned && onSecondary(item.key) ? aligned.toPrimary(value) : value;
 		};
-		/** 类目在类目轴上的位置：散点图是横轴的数值，其余是第几行；找不到时 undefined */
-		const positionOf = (at) => {
-			if (kind.value.continuousX) return Number(at);
-			const found = rows.findIndex((row) => row[index.value] === at);
-			return found < 0 ? void 0 : found;
+		const stacked = kind.value.stacked ? shown.filter(kind.value.stackSeries ?? (() => true)) : [];
+		const segments = stackValues(stacked.map((item) => rows.map((row) => valueOf(item, row))));
+		const stacks = new Map(stacked.map((item, s) => [item.key, segments[s]]));
+		const every = continuous ? 1 : Math.max(1, Math.ceil((horizontal ? 16 : widest(categoryLabels) + 12) / Math.max(step, 1)));
+		const categoryTicks = continuous ? xTicks.map((tick) => ({
+			position: xScale(tick),
+			label: continuous.format(tick)
+		})) : rows.map((row, position) => ({
+			position: category(row, position),
+			label: position % every === 0 ? horizontal ? truncateText(categoryLabels[position], width * .3, TICK_FONT) : categoryLabels[position] : ""
+		}));
+		const valueTicks = ticks.map((tick, position) => ({
+			position: valueScale(tick),
+			label: valueLabels[position]
+		}));
+		const secondaryTicks = aligned ? aligned.primary.ticks.map((tick, position) => ({
+			position: valueScale(tick),
+			label: secondaryLabels[position]
+		})) : [];
+		return {
+			rows,
+			shown,
+			horizontal,
+			plot,
+			step,
+			domain,
+			category,
+			valueScale,
+			valueOf,
+			stacks,
+			categoryTicks,
+			valueTicks,
+			secondaryTicks
 		};
-		const categoryAxisName = kind.value.horizontal ? AxisType.Y : AxisType.X;
-		const valueAxisName = kind.value.horizontal ? AxisType.X : AxisType.Y;
-		const lines = (targets.value ?? []).map((target, position) => {
-			const line = instances.get(`target-${position}`, () => new Plotline({}));
-			const value = toNumber(target.value);
-			const label = valueText(target.value);
-			line.setConfig({
-				axis: kind.value.horizontal ? "x" : "y",
-				value,
-				color: resolveColor(target.color ?? "danger", 0),
-				lineWidth: 1.5,
-				lineStyle: PlotlineLineStylePresets.Dash,
-				labelText: target.label ? `${target.label} ${label}` : label,
-				labelPosition: kind.value.horizontal ? PlotlineLabelPosition.TopRight : PlotlineLabelPosition.TopLeft,
-				labelOffsetX: 4,
-				labelOffsetY: 10
+	});
+	/** 一个类目在类目轴上的位置（标注、区间用）：散点图是横轴的数值，其余是第几行；找不到时 undefined */
+	function positionOf(at) {
+		const { rows, category } = layout.value;
+		if (kind.value.continuousX) {
+			const row = rows.find((item) => kind.value.continuousX.value(item) === Number(at));
+			return row ? category(row, 0) : void 0;
+		}
+		const found = rows.findIndex((row) => row[index.value] === at);
+		return found < 0 ? void 0 : category(rows[found], found);
+	}
+	/** 指针移动：找出悬停的行（散点图是最近的点） */
+	function onPointermove(event) {
+		const svg = event.currentTarget;
+		const { x, y } = pointerIn(event, svg);
+		const { rows, plot, horizontal, category, valueScale, valueOf, shown, step } = layout.value;
+		if (!(x >= plot.left - 4 && x <= plot.left + plot.width + 4 && y >= plot.top - 4 && y <= plot.top + plot.height + 4) || rows.length === 0) {
+			hover.value = null;
+			return;
+		}
+		if (kind.value.pointTooltip) {
+			let best = null;
+			let distance = POINT_REACH;
+			rows.forEach((row, position) => {
+				for (const item of shown) {
+					const value = valueOf(item, row);
+					if (value === void 0) continue;
+					const [px, py] = [category(row, position), valueScale(value)];
+					const d = Math.hypot(px - x, py - y);
+					if (d < distance) {
+						distance = d;
+						best = {
+							index: position,
+							x: px,
+							y: py
+						};
+					}
+				}
 			});
-			return line;
+			hover.value = best;
+			return;
+		}
+		const along = horizontal ? y : x;
+		let nearest = 0;
+		rows.forEach((row, position) => {
+			if (Math.abs(category(row, position) - along) < Math.abs(category(rows[nearest], nearest) - along)) nearest = position;
 		});
-		const bandComponents = (bands.value ?? []).flatMap((band, position) => {
+		const center = category(rows[nearest], nearest);
+		if (Math.abs(center - along) > Math.max(step, 8)) {
+			hover.value = null;
+			return;
+		}
+		hover.value = horizontal ? {
+			index: nearest,
+			x,
+			y: center
+		} : {
+			index: nearest,
+			x: center,
+			y
+		};
+	}
+	/** 点击下钻：点在柱上按那根柱（data-index），其余按悬停的行 */
+	function onClick(event) {
+		if (!onItemClick.value) return;
+		const target = event.target?.closest?.("[data-index]");
+		const position = target ? Number(target.getAttribute("data-index")) : hover.value?.index;
+		if (position === void 0 || Number.isNaN(position)) return;
+		const offset = range()?.[0] ?? 0;
+		const row = layout.value.rows[position];
+		if (row !== void 0) onItemClick.value(row, offset + position);
+	}
+	/** 区间：浅色的带，文字在左下角（类目轴）或左上角（数值轴） */
+	function renderBands() {
+		const { plot, horizontal, step, valueScale } = layout.value;
+		return (bands.value ?? []).map((band, position) => {
 			const onIndex = band.axis !== "value";
-			const from = onIndex ? positionOf(band.from) : Number(band.from);
-			const to = onIndex ? positionOf(band.to) : Number(band.to);
-			if (from === void 0 || to === void 0) return [];
-			const half = onIndex && !kind.value.continuousX ? .5 : 0;
-			const plotband = instances.get(`band-${position}`, () => new Plotband({}));
-			plotband.setConfig({
-				axis: onIndex ? categoryAxisName : valueAxisName,
-				from: Math.min(from, to) - half,
-				to: Math.max(from, to) + half,
-				color: `color-mix(in srgb, ${resolveColor(band.color ?? "neutral", 0)} 12%, transparent)`,
-				labelText: band.label,
-				labelPosition: onIndex ? PlotbandLabelPosition.BottomLeftInside : PlotbandLabelPosition.TopLeftInside,
-				labelColor: colors.textMuted,
-				labelOffsetX: 6,
-				labelOffsetY: 6
-			});
-			return [plotband];
+			const color = resolveColor(band.color ?? "neutral", 0);
+			let from;
+			let to;
+			if (onIndex) {
+				const a = positionOf(band.from);
+				const b = positionOf(band.to);
+				if (a === void 0 || b === void 0) return null;
+				const half = kind.value.continuousX ? 0 : step / 2;
+				from = Math.min(a, b) - half;
+				to = Math.max(a, b) + half;
+			} else {
+				from = Math.min(valueScale(Number(band.from)), valueScale(Number(band.to)));
+				to = Math.max(valueScale(Number(band.from)), valueScale(Number(band.to)));
+			}
+			const alongCategory = onIndex !== horizontal;
+			const clampedFrom = Math.max(from, alongCategory ? plot.left : plot.top);
+			const clampedTo = Math.min(to, alongCategory ? plot.left + plot.width : plot.top + plot.height);
+			const rect = alongCategory ? {
+				x: clampedFrom,
+				y: plot.top,
+				width: clampedTo - clampedFrom,
+				height: plot.height
+			} : {
+				x: plot.left,
+				y: clampedFrom,
+				width: plot.width,
+				height: clampedTo - clampedFrom
+			};
+			if (rect.width <= 0 || rect.height <= 0) return null;
+			return createVNode("g", {
+				"key": `band-${position}`,
+				"data-part": "band"
+			}, [createVNode("rect", mergeJsxProps(rect, css.attrs(xyChartStyles.bandFill(color), chartSvgStyles.noPointer)), null), band.label && createVNode("text", mergeJsxProps({
+				"x": rect.x + 6,
+				"y": onIndex && !horizontal ? rect.y + rect.height - 6 : rect.y + 6,
+				"dominant-baseline": onIndex && !horizontal ? "auto" : "hanging"
+			}, css.attrs(chartSvgStyles.labelMuted, chartSvgStyles.noPointer)), [band.label])]);
+		});
+	}
+	/** 目标线与事件竖线 */
+	function renderLines() {
+		const { plot, horizontal, valueScale } = layout.value;
+		const right = plot.left + plot.width;
+		const bottom = plot.top + plot.height;
+		const targetLines = (targets.value ?? []).map((target, position) => {
+			const color = resolveColor(target.color ?? "danger", 0);
+			const at = svgNumber(valueScale(toNumber(target.value)));
+			const label = target.label ? `${target.label} ${valueText(target.value)}` : valueText(target.value);
+			return createVNode("g", {
+				"key": `target-${position}`,
+				"data-part": "target"
+			}, [horizontal ? createVNode("line", mergeJsxProps({
+				"x1": at,
+				"x2": at,
+				"y1": plot.top,
+				"y2": bottom
+			}, css.attrs(xyChartStyles.targetLine, chartSvgStyles.stroke(color))), null) : createVNode("line", mergeJsxProps({
+				"x1": plot.left,
+				"x2": right,
+				"y1": at,
+				"y2": at
+			}, css.attrs(xyChartStyles.targetLine, chartSvgStyles.stroke(color))), null), createVNode("text", mergeJsxProps({
+				"x": horizontal ? at + 4 : plot.left + 4,
+				"y": horizontal ? plot.top + 4 : at - 5,
+				"dominant-baseline": horizontal ? "hanging" : "auto"
+			}, css.attrs(chartSvgStyles.labelMuted, chartSvgStyles.halo, xyChartStyles.textFill(color), chartSvgStyles.noPointer)), [label])]);
 		});
-		const eventLines = (annotations.value ?? []).filter((item) => item.series === void 0).flatMap((item, position) => {
+		const events = (annotations.value ?? []).filter((item) => item.series === void 0).map((item, position) => {
 			const at = positionOf(item.at);
-			if (at === void 0) return [];
-			const line = instances.get(`event-${position}`, () => new Plotline({}));
-			line.setConfig({
-				axis: categoryAxisName,
-				value: at,
-				color: resolveColor(item.color ?? "neutral", 0),
-				lineWidth: 1,
-				lineStyle: PlotlineLineStylePresets.ShortDash,
-				labelText: item.label,
-				labelPosition: kind.value.horizontal ? PlotlineLabelPosition.BottomRight : PlotlineLabelPosition.TopRight,
-				labelOffsetX: 4,
-				labelOffsetY: 4
-			});
-			return [line];
+			if (at === void 0) return null;
+			const color = resolveColor(item.color ?? "neutral", 0);
+			const p = svgNumber(at);
+			return createVNode("g", {
+				"key": `event-${position}`,
+				"data-part": "event"
+			}, [horizontal ? createVNode("line", mergeJsxProps({
+				"x1": plot.left,
+				"x2": right,
+				"y1": p,
+				"y2": p
+			}, css.attrs(xyChartStyles.eventLine, chartSvgStyles.stroke(color))), null) : createVNode("line", mergeJsxProps({
+				"x1": p,
+				"x2": p,
+				"y1": plot.top,
+				"y2": bottom
+			}, css.attrs(xyChartStyles.eventLine, chartSvgStyles.stroke(color))), null), createVNode("text", mergeJsxProps({
+				"x": horizontal ? right - 4 : p + 4,
+				"y": horizontal ? p - 4 : plot.top + 4,
+				"text-anchor": horizontal ? "end" : "start",
+				"dominant-baseline": horizontal ? "auto" : "hanging"
+			}, css.attrs(chartSvgStyles.labelMuted, chartSvgStyles.halo, chartSvgStyles.noPointer)), [item.label])]);
 		});
-		const marked = (annotations.value ?? []).filter((item) => item.series !== void 0 && !kind.value.horizontal);
-		const markOf = (row) => {
-			const at = kind.value.continuousX ? kind.value.continuousX.value(row) : rows.indexOf(row);
-			return marked.find((item) => positionOf(item.at) === at && shown.some((series) => series.key === item.series));
-		};
-		/** 圈的位置：系列的值；堆叠时是它在这一摞里的顶端 */
-		const markY = (row) => {
-			const mark = markOf(row);
-			if (!mark) return void 0;
-			const series = shown.find((item) => item.key === mark.series);
-			if (!kind.value.stacked || kind.value.percent) return y(series)(row);
-			return shown.slice(0, shown.indexOf(series) + 1).reduce((sum, item) => sum + Math.max(y(item)(row) ?? 0, 0), 0);
-		};
-		const markColor = (row) => {
-			const mark = markOf(row);
-			const series = shown.find((item) => item.key === mark?.series);
-			return mark?.color ? resolveColor(mark.color, 0) : series?.color ?? colors.textMuted;
-		};
-		const marks = instances.get("marks", () => new Scatter({
-			x,
-			y: () => void 0
-		}));
-		marks.setConfig({
-			x,
-			y: markY,
-			size: 16,
-			color: "transparent",
-			strokeColor: markColor,
-			strokeWidth: 2,
-			label: (row) => markOf(row)?.label ?? "",
-			labelPosition: Position.Top,
-			labelColor: colors.text
+		return [...targetLines, ...events];
+	}
+	/** 一个系列在一行上的值的坐标：堆叠时是它在这一摞里的外端 */
+	function valuePosition(item, row, position) {
+		const segment = layout.value.stacks.get(item.key)?.[position];
+		if (segment) return segment.value === void 0 ? void 0 : segment.value < 0 ? segment.low : segment.high;
+		return layout.value.valueOf(item, row);
+	}
+	/** 标注圈出的值：空心圈，文字在上方 */
+	function renderMarks() {
+		if (layout.value.horizontal) return null;
+		return (annotations.value ?? []).filter((item) => item.series !== void 0).map((item, position) => {
+			const series = layout.value.shown.find((entry) => entry.key === item.series);
+			const rowIndex = kind.value.continuousX ? layout.value.rows.findIndex((row) => kind.value.continuousX.value(row) === Number(item.at)) : layout.value.rows.findIndex((row) => row[index.value] === item.at);
+			const row = layout.value.rows[rowIndex];
+			if (!series || row === void 0) return null;
+			const value = valuePosition(series, row, rowIndex);
+			if (value === void 0) return null;
+			const [x, y] = [svgNumber(layout.value.category(row, rowIndex)), svgNumber(layout.value.valueScale(value))];
+			const color = item.color ? resolveColor(item.color, 0) : series.color;
+			const half = estimateTextWidth(item.label, TICK_FONT) / 2;
+			const { left, width } = layout.value.plot;
+			const anchor = x + half > left + width ? "end" : x - half < left ? "start" : "middle";
+			const textX = anchor === "end" ? x + 8 : anchor === "start" ? x - 8 : x;
+			return createVNode("g", {
+				"key": `mark-${position}`,
+				"data-part": "mark"
+			}, [createVNode("circle", mergeJsxProps({
+				"cx": x,
+				"cy": y,
+				"r": 8
+			}, css.attrs(xyChartStyles.mark, chartSvgStyles.stroke(color))), null), createVNode("text", mergeJsxProps({
+				"x": textX,
+				"y": y - 14,
+				"text-anchor": anchor
+			}, css.attrs(chartSvgStyles.label, chartSvgStyles.halo, chartSvgStyles.noPointer)), [item.label])]);
 		});
-		const secondaryLabels = aligned ? aligned.secondary.ticks.map((tick, position) => {
-			const label = instances.get(`secondary-${position}`, () => {
-				const line = new Plotline({});
-				line.clippable = false;
-				return line;
-			});
-			label.setConfig({
-				axis: "y",
-				value: aligned.primary.ticks[position],
-				color: "transparent",
-				lineWidth: 0,
-				labelText: format.number(tick, kind.value.secondary?.format),
-				labelPosition: PlotlineLabelPosition.Right,
-				labelOffsetX: -44,
-				labelColor: colors.textMuted
-			});
-			return label;
-		}) : [];
-		const components = [
-			...bandComponents,
-			...kind.value.components({
-				series: shown,
-				x,
-				y,
-				instance: instances.get,
-				events: kind.value.itemSelector && onItemClick.value ? { [kind.value.itemSelector]: { click: (row, _event, index) => {
-					const position = data.value.indexOf(row);
-					const at = position >= 0 ? position : index;
-					onItemClick.value(data.value[at] ?? row, at);
-				} } } : {}
+	}
+	/** 十字线：悬停的类目一条竖线，线上给各系列画圆点；柱状图铺一层浅底 */
+	function renderCrosshair(front) {
+		const current = hover.value;
+		if (!current || kind.value.pointTooltip) return null;
+		const { rows, plot, horizontal, step, category, valueScale } = layout.value;
+		const row = rows[current.index];
+		if (row === void 0) return null;
+		const center = category(row, current.index);
+		if (!front) {
+			if (kind.value.crosshairDots && !kind.value.band) return null;
+			const half = Math.max(step / 2, 1);
+			return horizontal ? createVNode("rect", mergeJsxProps({
+				"x": plot.left,
+				"y": center - half,
+				"width": plot.width,
+				"height": half * 2
+			}, css.attrs(chartSvgStyles.hoverBand)), null) : createVNode("rect", mergeJsxProps({
+				"x": center - half,
+				"y": plot.top,
+				"width": half * 2,
+				"height": plot.height
+			}, css.attrs(chartSvgStyles.hoverBand)), null);
+		}
+		if (!kind.value.crosshairDots) return null;
+		const dotted = kind.value.crosshairSeries ? layout.value.shown.filter(kind.value.crosshairSeries) : layout.value.shown;
+		const p = Math.round(center) + .5;
+		return createVNode("g", { "data-part": "crosshair" }, [!kind.value.band && createVNode("line", mergeJsxProps({
+			"x1": p,
+			"x2": p,
+			"y1": plot.top,
+			"y2": plot.top + plot.height
+		}, css.attrs(chartSvgStyles.crosshair)), null), dotted.map((item) => {
+			const value = valuePosition(item, row, current.index);
+			if (value === void 0) return null;
+			return createVNode("circle", mergeJsxProps({
+				"key": item.key,
+				"cx": svgNumber(center),
+				"cy": svgNumber(valueScale(value)),
+				"r": 4.5
+			}, css.attrs(xyChartStyles.crosshairDot, chartSvgStyles.fill(item.color))), null);
+		})]);
+	}
+	/** 绘图区的 SVG */
+	function renderPlot() {
+		const { rows, shown, horizontal, plot, step, domain, category, valueScale, valueOf, stacks } = layout.value;
+		const context = {
+			series: shown,
+			rows,
+			horizontal,
+			plot,
+			step,
+			domain,
+			category,
+			value: valueScale,
+			valueOf,
+			stacks,
+			point: (c, v) => horizontal ? [v, c] : [c, v],
+			hovered: hover.value?.index ?? null
+		};
+		const zero = valueScale(0);
+		const showZero = domain[0] < 0 && domain[1] > 0;
+		return createVNode("svg", mergeJsxProps({
+			"width": area.width,
+			"height": area.height
+		}, css.attrs(chartSvgStyles.svg, xyChartStyles.svg), {
+			"onPointermove": onPointermove,
+			"onPointerleave": _cache[3] || (_cache[3] = () => hover.value = null),
+			"onClick": onClick
+		}), [
+			renderBands(),
+			chartAxis({
+				side: horizontal ? "bottom" : "left",
+				ticks: layout.value.valueTicks,
+				plot,
+				grid: grid.value
 			}),
-			...lines,
-			...eventLines,
-			...marked.length > 0 ? [marks] : [],
-			...secondaryLabels
-		];
-		const xAxis = instances.get("xAxis", () => new Axis({ type: "x" }));
-		const yAxis = instances.get("yAxis", () => new Axis({ type: "y" }));
-		const crosshair = instances.get("crosshair", () => new Crosshair());
-		const tooltipBox = instances.get("tooltip", () => new Tooltip());
-		const [categoryAxis, valueAxis] = kind.value.horizontal ? [yAxis, xAxis] : [xAxis, yAxis];
-		const continuous = kind.value.continuousX;
-		categoryAxis.setConfig({
-			type: kind.value.horizontal ? "y" : "x",
-			tickValues: continuous ? void 0 : rows.map((_row, position) => position),
-			numTicks: continuous ? 6 : void 0,
-			tickFormat: continuous ? (tick) => continuous.format(Number(tick)) : (tick) => categoryText(rows[Number(tick)]),
-			gridLine: continuous ? grid.value : false,
-			tickLine: false,
-			domainLine: false,
-			tickTextHideOverlapping: true,
-			tickPadding: 8,
-			label: continuous?.title,
-			labelMargin: 8
-		});
-		valueAxis.setConfig({
-			type: kind.value.horizontal ? "x" : "y",
-			numTicks: 5,
-			tickValues: aligned?.primary.ticks,
-			tickFormat: (tick) => kind.value.percent ? format.number(Number(tick), {
-				style: "percent",
-				maximumFractionDigits: 0
-			}) : format.number(Number(tick), valueFormat.value),
-			gridLine: grid.value,
-			tickLine: false,
-			domainLine: false,
-			tickPadding: 8
-		});
-		const dotted = kind.value.crosshairSeries ? shown.filter(kind.value.crosshairSeries) : shown;
-		crosshair.setConfig({
-			x,
-			...kind.value.stacked ? { yStacked: dotted.map(y) } : { y: dotted.map(y) },
-			template: (row) => renderTooltip(row),
-			color: (_row, position) => dotted[position]?.color ?? "transparent",
-			getCircles: kind.value.crosshairDots ? void 0 : () => [],
-			hideWhenFarFromPointer: false,
-			onCrosshairMove: (_x, row) => hover(row)
-		});
-		tooltipBox.setConfig({ triggers: kind.value.pointTooltip ? { [kind.value.pointTooltip]: (row) => renderTooltip(row) } : {} });
-		const config = {
-			components,
-			xAxis,
-			yAxis,
-			crosshair: (tooltip.value || onItemClick.value && !kind.value.itemSelector) && !kind.value.pointTooltip ? crosshair : void 0,
-			tooltip: tooltip.value ? tooltipBox : void 0,
-			[kind.value.horizontal ? "xDomain" : "yDomain"]: domain,
-			padding: aligned ? {
-				...kind.value.padding,
-				right: Math.max(kind.value.padding?.right ?? 0, SECONDARY_AXIS_WIDTH)
-			} : kind.value.padding ?? {},
-			ariaLabel: null,
-			duration: chartDuration(element),
-			onRenderComplete: haloPlotlineLabels
+			chartAxis({
+				side: horizontal ? "left" : "bottom",
+				ticks: layout.value.categoryTicks,
+				plot,
+				grid: kind.value.continuousX ? grid.value : false
+			}),
+			layout.value.secondaryTicks.length > 0 && chartAxis({
+				side: "right",
+				ticks: layout.value.secondaryTicks,
+				plot
+			}),
+			kind.value.continuousX?.title && createVNode("text", mergeJsxProps({
+				"x": plot.left + plot.width / 2,
+				"y": area.height - 2,
+				"text-anchor": "middle"
+			}, css.attrs(chartSvgStyles.axisTitle)), [kind.value.continuousX.title]),
+			showZero && (horizontal ? createVNode("line", mergeJsxProps({
+				"x1": Math.round(zero) + .5,
+				"x2": Math.round(zero) + .5,
+				"y1": plot.top,
+				"y2": plot.top + plot.height
+			}, css.attrs(chartSvgStyles.baseline)), null) : createVNode("line", mergeJsxProps({
+				"x1": plot.left,
+				"x2": plot.left + plot.width,
+				"y1": Math.round(zero) + .5,
+				"y2": Math.round(zero) + .5
+			}, css.attrs(chartSvgStyles.baseline)), null)),
+			renderCrosshair(false),
+			kind.value.render(context),
+			renderLines(),
+			renderMarks(),
+			renderCrosshair(true)
+		]);
+	}
+	const tip = () => {
+		const current = hover.value;
+		if (!tooltip.value || !current) return null;
+		const row = layout.value.rows[current.index];
+		return row === void 0 ? null : {
+			x: current.x,
+			y: current.y,
+			content: tooltipContent(row)
 		};
-		if (container) container.update(config, void 0, rows);
-		else {
-			container = new XYContainer(element, config, rows);
-			containerElement = element;
-			uniqueHighlightFilter(element, `${id}-highlight`);
-		}
-	});
+	};
 	return () => createVNode(ChartFrame, mergeJsxProps(rest, {
-		"sx": [css.select(() => !kind.value.crosshairDots && xyChartStyles.hideCrosshairLine, true), sx.value],
 		"unit": kind.value.percent ? void 0 : unit.value,
 		"unitEnd": kind.value.secondary?.unit,
 		"height": height.value,
@@ -452,9 +675,6 @@ var XYChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		"isEmpty": data.value.length === 0,
 		"empty": empty.value,
 		"clickable": onItemClick.value != null,
-		"onPlotClick": onItemClick.value && !kind.value.itemSelector ? () => {
-			if (hovered) onItemClick.value(hovered.row, hovered.index);
-		} : void 0,
 		"table": kind.value.table?.(data.value) ?? {
 			columns: [
 				lang.chartCategory,
@@ -472,7 +692,12 @@ var XYChart = /*#__PURE__*/ _component((_props, _ctx) => {
 				})]
 			}))
 		},
-		"plotRef": _cache[3] || (_cache[3] = (element) => plot.value = element),
+		"plotRef": area.ref,
+		"plot": area.ready && shownRows.value.length > 0 ? [renderPlot(), createVNode(ChartTooltipBox, {
+			"key": "tooltip",
+			"tip": tip(),
+			"width": area.width
+		}, null)] : null,
 		"footer": zoom.value && !kind.value.continuousX && data.value.length > 2 ? zoomBar() : void 0
 	}), null);
 }, {
@@ -500,22 +725,9 @@ var XYChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		"zoom",
 		"_zoomRange",
 		"onUpdate:_zoomRange",
-		"kind",
-		"sx"
+		"kind"
 	]
 });
-/**
-* 目标线、事件竖线的文字描一圈表面色的边（同地图上地点的名字）：压在柱子、折线上也看得清。
-* Unovis 的 Plotline 文字没有描边的配置项，渲染完成后补在元素上；导出图片时按计算样式一并带走
-*/
-function haloPlotlineLabels(svg) {
-	for (const label of svg.querySelectorAll("text[class*=\"plotline-label\"]")) {
-		label.style.setProperty("paint-order", "stroke");
-		label.style.setProperty("stroke", colors.surface);
-		label.style.setProperty("stroke-width", "3px");
-		label.style.setProperty("stroke-linejoin", "round");
-	}
-}
 //#endregion
 export { XYChart, xyChartStyles };