@wil-works/evoke-charts 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { $ as INTERACTION, A as squarifyTreemap, B as calendarHitTest, C as chordHitTest, D as computeSunburstGeometry, E as boxplotHitTest, F as matrixFieldExtent, G as getPadding, H as getHeatmapCategories, I as scatterGroupColors, J as resolveTickExtendedRange, K as getTheme, L as scatterPointPositions, M as computeFacetGrids, N as computeMatrixCells, O as sunburstValue, P as computePieMaxRadius, Q as DEFAULT_I18N_ZH, R as getLegendBounds, S as arcHitTest, T as vennHitTest, U as xToCategoryIndex, V as funnelStepColor, W as createAnimation, X as CHART_PALETTES, Y as updateAnimation, Z as resolveChartPalette, _ as getSliderGeometry, b as zoomToSlice, et as applyWheelZoom, f as chartOptionsSchema, g as getDataZoomConfig, h as createSvgRecorder, j as buildPieSlices, k as computeBins, m as renderChart, n as buildChartPrompt, nt as resolveCursor, p as validateOptions, q as isMissingValue, s as generateChartSpec, t as lintChartSpec, tt as pickTooltipRows, u as parseDataTable, v as windowToX, w as sankeyHitTest, x as ganttHitTest, y as xToPercent, z as getToolboxBounds } from "./ai-BmXDig6M.js";
+import { $ as resolveChartPalette, A as squarifyTreemap, B as getToolboxBounds, C as chordHitTest, D as computeSunburstGeometry, E as boxplotHitTest, F as doughnutInnerRadius, G as createAnimation, H as funnelStepColor, I as matrixFieldExtent, J as isMissingValue, K as getPadding, L as scatterGroupColors, M as computeFacetGrids, N as computeMatrixCells, O as sunburstValue, P as computePieMaxRadius, Q as CHART_PALETTES, R as scatterPointPositions, S as arcHitTest, T as vennHitTest, U as getHeatmapCategories, V as calendarHitTest, W as xToCategoryIndex, X as updateAnimation, Y as resolveTickExtendedRange, Z as waterfallSteps, _ as getSliderGeometry, at as INTERACTION, b as zoomToSlice, ct as resolveCursor, et as DEFAULT_I18N_ZH, f as chartOptionsSchema, g as getDataZoomConfig, h as createSvgRecorder, it as minOf, j as buildPieSlices, k as computeBins, m as renderChart, n as buildChartPrompt, ot as applyWheelZoom, p as validateOptions, q as getTheme, rt as maxOf, s as generateChartSpec, st as pickTooltipRows, t as lintChartSpec, u as parseDataTable, v as windowToX, w as sankeyHitTest, x as ganttHitTest, y as xToPercent, z as getLegendBounds } from "./ai-B5Fk3lBQ.js";
 import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, h, inject, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, watch, withCtx } from "vue";
 //#region src/connect.js
 var connectGroups = /* @__PURE__ */ new Map();
@@ -30,7 +30,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/chart.vue
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["tabindex", "aria-label"];
 var _hoisted_2 = {
 	key: 1,
 	class: "ev-chart__overlay"
@@ -121,7 +121,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			switch (opt.type) {
 				case "pie":
 				case "doughnut":
-				case "rose": return !opt.pieData || opt.pieData.length === 0;
+				case "rose": return !opt.pieData || opt.pieData.length === 0 || opt.pieData.every((d) => !(d.value > 0));
 				case "scatter": return !opt.scatterData || opt.scatterData.length === 0;
 				case "funnel": return !opt.funnelData || opt.funnelData.length === 0;
 				case "gauge": return !opt.gauge;
@@ -140,7 +140,12 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				case "sankey":
 				case "chord":
 				case "arc": return !(opt.sankeyData || opt.chordData || opt.arcData)?.nodes?.length;
-				case "venn": return !opt.vennData || opt.vennData.length === 0;
+				case "venn":
+					if (!opt.vennData || opt.vennData.length === 0) return true;
+					{
+						const circles = opt.vennData.filter((d) => !d.sets || d.sets.length === 1);
+						return circles.length === 0 || circles.length > 3;
+					}
 				case "gantt": return !opt.ganttData || opt.ganttData.length === 0;
 				case "scatter-matrix": return !opt.matrixFields?.length || !opt.matrixData?.length;
 				default: return !opt.labels?.length || !opt.series?.length;
@@ -236,11 +241,20 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					data: s.data.slice(startIdx, endIdx)
 				}));
 				if (base.candleData) sliced.candleData = base.candleData.slice(startIdx, endIdx);
+				if (base.volumeData) sliced.volumeData = base.volumeData.slice(startIdx, endIdx);
 				sliced.__sliceStart = startIdx;
+			} else if (base.candleData) {
+				const cn = base.candleData.length;
+				if (cn > 0) {
+					const { startIdx, endIdx } = zoomToSlice(range, cn);
+					sliced.candleData = base.candleData.slice(startIdx, endIdx);
+					if (base.volumeData) sliced.volumeData = base.volumeData.slice(startIdx, endIdx);
+					sliced.__sliceStart = startIdx;
+				}
 			} else if (base.scatterData && base.scatterData.length > 0) {
 				const xs = base.scatterData.map((d) => d.x);
-				const xMin = Math.min(...xs);
-				const span = Math.max(...xs) - xMin || 1;
+				const xMin = minOf(xs);
+				const span = maxOf(xs) - xMin || 1;
 				const lo = xMin + range.start / 100 * span;
 				const hi = xMin + range.end / 100 * span;
 				const filtered = base.scatterData.filter((d) => d.x >= lo && d.x <= hi);
@@ -334,11 +348,11 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const el = tooltipRef.value;
 			const tw = el?.offsetWidth || 120;
 			const th = el?.offsetHeight || 40;
-			const gap = 12;
+			const gap = INTERACTION.tooltip.cursorGap;
 			const margin = 2;
 			let legendBottom = margin;
 			const legend = props.options.legend || {};
-			if (legend.show !== false && (legend.position || "bottom") === "top") legendBottom = getPadding(props.options, containerRect.width).top;
+			if (legend.show !== false && (legend.position || "bottom") === "top") legendBottom = paddingFor(props.options, containerRect.width).top;
 			const spaceRight = containerRect.width - relX - gap;
 			const spaceLeft = relX - gap;
 			let left;
@@ -408,7 +422,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				lastHeight = height;
 				canvas.width = width * dpr.value;
 				canvas.height = height * dpr.value;
-				const overlayPadding = getPadding(effectiveOptions.value, width);
+				const overlayPadding = paddingFor(effectiveOptions.value, width);
 				overlayInfo.value = {
 					plotArea: {
 						x: overlayPadding.left,
@@ -458,7 +472,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				hoveredToolbox: hoveredToolbox.value
 			};
 		}
-		let focusAnimProgress = 1;
+		let focusAnimProgress = emphasisSeriesName.value ? 1 : 0;
 		let focusAnimFrameId = null;
 		function animateFocusProgress() {
 			if (focusAnimFrameId !== null) {
@@ -491,7 +505,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		}
 		function snapshotSeriesData(opt) {
 			const map = /* @__PURE__ */ new Map();
-			(opt.series || []).forEach((s) => map.set(s.name, s.data.map((v) => isMissingValue(v) ? 0 : v)));
+			(opt.series || []).forEach((s) => map.set(s.name, (s.data || []).map((v) => isMissingValue(v) ? 0 : v)));
 			return map;
 		}
 		function sameStructure(a, b) {
@@ -505,7 +519,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const series = (next.series || []).map((s) => {
 				const old = prev.get(s.name);
 				if (!old) return s;
-				const data = s.data.map((v, i) => {
+				const data = (s.data || []).map((v, i) => {
 					if (isMissingValue(v)) return v;
 					const from = old[i + offset] ?? 0;
 					return from + (v - from) * t;
@@ -521,7 +535,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			};
 		}
 		function dataSignature(opt) {
-			const total = (opt.series || []).reduce((sum, s) => sum + s.data.reduce((acc, v) => acc + (isMissingValue(v) ? 0 : v), 0), 0);
+			const total = (opt.series || []).reduce((sum, s) => sum + (s.data || []).reduce((acc, v) => acc + (isMissingValue(v) ? 0 : v), 0), 0);
 			return `${(opt.series || []).length}\u7CFB\u5217/${(opt.labels || []).length}\u7C7B\u76EE/\u03A3${Math.round(total)}`;
 		}
 		function stopTweenAnimation() {
@@ -539,7 +553,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			if (!(nextOptions.series || []).some((s) => {
 				const old = prevSnapshot.get(s.name);
 				if (!old) return false;
-				return s.data.some((v, i) => (isMissingValue(v) ? 0 : v) !== (old[i] ?? 0));
+				return (s.data || []).some((v, i) => (isMissingValue(v) ? 0 : v) !== (old[i] ?? 0));
 			})) return false;
 			stopAnimation();
 			stopHoverAnimation();
@@ -604,15 +618,47 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				cancelAnimationFrame(hoverAnimFrameId);
 				hoverAnimFrameId = null;
 			}
+			if (hoverRedrawFrameId !== null) {
+				cancelAnimationFrame(hoverRedrawFrameId);
+				hoverRedrawFrameId = null;
+			}
 			hoverAnimDone = null;
 		}
+		let hoverRedrawFrameId = null;
+		function scheduleHoverRedraw() {
+			if (hoverRedrawFrameId !== null) return;
+			hoverRedrawFrameId = requestAnimationFrame(() => {
+				hoverRedrawFrameId = null;
+				redraw();
+			});
+		}
 		function usesHoverAnimation() {
 			const t = props.options.type;
 			return t === "pie" || t === "doughnut" || t === "rose" || t === "sunburst" || t === "treemap" || t === "radar";
 		}
 		function animatesHoverEnter() {
 			const t = props.options.type;
-			return t === "pie" || t === "doughnut" || t === "rose" || t === "radar" || t === "venn" || t === "sankey" || t === "chord" || t === "arc";
+			return [
+				"pie",
+				"doughnut",
+				"rose",
+				"radar",
+				"venn",
+				"sankey",
+				"chord",
+				"arc",
+				"bar",
+				"stacked-bar",
+				"horizontal-bar",
+				"waterfall",
+				"mixed",
+				"boxplot",
+				"candle",
+				"heatmap",
+				"calendar-heatmap",
+				"funnel",
+				"gantt"
+			].includes(t);
 		}
 		function clearHover() {
 			if (hoverIndex === -1) return false;
@@ -695,15 +741,14 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const theme = getTheme(isDark, props.options.theme, props.options.palette);
 			const width = rect.width;
 			const height = rect.height;
-			const padding = getPadding(effectiveOptions.value, width);
+			const padding = paddingFor(effectiveOptions.value, width);
 			const plotArea = {
 				x: padding.left,
 				y: padding.top,
 				width: width - padding.left - padding.right,
 				height: height - padding.top - padding.bottom
 			};
-			const ctx2d = canvas.getContext("2d");
-			const bounds = getLegendBounds(ctx2d, effectiveOptions.value, plotArea, width, height, theme, hiddenSeries.value);
+			const bounds = legendBoundsFor(canvas.getContext("2d"), effectiveOptions.value, plotArea, width, height, theme, hiddenSeries.value, isDark);
 			for (const bound of bounds) if (canvasX >= bound.x && canvasX <= bound.x + bound.width && canvasY >= bound.y && canvasY <= bound.y + bound.height) return bound.name;
 			return null;
 		}
@@ -748,7 +793,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const options = effectiveOptions.value;
 			const width = rect.width;
 			const height = rect.height;
-			const padding = getPadding(options, width);
+			const padding = paddingFor(options, width);
 			const plotArea = {
 				x: padding.left,
 				y: padding.top,
@@ -770,12 +815,12 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				const dx = canvasX - centerX;
 				const dy = canvasY - centerY;
 				const distance = Math.sqrt(dx * dx + dy * dy);
-				const innerRadius = options.type === "doughnut" ? Math.max(0, Math.min(baseRadius - 5, baseRadius * (options.innerRadius || .6))) : 0;
+				const innerRadius = options.type === "doughnut" ? doughnutInnerRadius(baseRadius, options) : 0;
 				let angle = Math.atan2(dy, dx) + Math.PI / 2;
 				if (angle < 0) angle += Math.PI * 2;
 				const total = slices.reduce((sum, d) => sum + d.value, 0);
 				let currentAngle = 0;
-				const maxVal = Math.max(...slices.map((d) => d.value));
+				const maxVal = maxOf(slices.map((d) => d.value));
 				for (let i = 0; i < slices.length; i++) {
 					const sliceAngle = slices[i].value / total * Math.PI * 2;
 					if (angle >= currentAngle && angle < currentAngle + sliceAngle) {
@@ -831,14 +876,10 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				const i = Math.floor((canvasX - plotArea.x) / categoryWidth);
 				if (i < 0 || i >= labels2.length) return null;
 				const wf = options.waterfall || {};
-				const totalIdx = new Set(wf.totalIndices || []);
-				const v = deltas[i] || 0;
-				let cumulative = 0;
-				for (let k = 0; k <= i; k++) {
-					const vk = deltas[k] || 0;
-					cumulative = totalIdx.has(k) ? vk : cumulative + vk;
-				}
-				const isTotal = totalIdx.has(i);
+				const step = waterfallSteps(deltas, wf.totalIndices)[i];
+				const v = step.value;
+				const cumulative = step.to;
+				const isTotal = step.isTotal;
 				const color = isTotal ? wf.totalColor || theme.colors[0] : v >= 0 ? wf.increaseColor || "#dc2626" : wf.decreaseColor || "#16a34a";
 				return {
 					index: i,
@@ -862,18 +903,25 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					...showOutliers ? b.outliers || [] : []
 				]);
 				const axisCfg = options.boxHorizontal ? options.xAxis || {} : options.yAxis || {};
-				const ext = resolveTickExtendedRange(axisCfg.min ?? Math.min(...allValues), axisCfg.max ?? Math.max(...allValues), axisCfg.ticks || 5);
+				const ext = resolveTickExtendedRange(axisCfg.min ?? minOf(allValues), axisCfg.max ?? maxOf(allValues), axisCfg.ticks || 5);
 				return boxplotHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value, {
 					min: ext.min,
 					max: ext.max
 				});
 			}
 			if (options.type === "calendar-heatmap") return calendarHitTest(canvasX, canvasY, plotArea, options, theme);
-			if (options.type === "sankey") return sankeyHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value);
+			if (options.type === "sankey") return sankeyHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value, sankeyLayoutFor(plotArea, options, theme, hiddenSeries.value, isDark));
 			if (options.type === "venn") return vennHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value);
 			if (options.type === "chord") return chordHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value);
-			if (options.type === "arc") return arcHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value);
-			if (options.type === "gantt") return ganttHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value);
+			if (options.type === "arc") {
+				if (options.arcCircular === true) return chordHitTest(canvasX, canvasY, plotArea, {
+					...options,
+					chordData: options.arcData,
+					chordMode: "curve"
+				}, theme, hiddenSeries.value);
+				return arcHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value);
+			}
+			if (options.type === "gantt") return ganttHitTest(canvasX, canvasY, plotArea, options, theme, hiddenSeries.value, ganttLayoutFor(plotArea, options, theme, hiddenSeries.value, isDark));
 			if (options.type === "scatter-matrix") {
 				const fields = options.matrixFields || [];
 				const records = options.matrixData || [];
@@ -1014,12 +1062,12 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					}
 					return null;
 				}
-				const yValues = scatterData.map((d) => d.y);
+				const yValues = scatterData.map((d) => d.y).filter((v) => typeof v === "number" && Number.isFinite(v));
 				const axisConfig = options.yAxis || {};
-				const rawMin = axisConfig.min ?? Math.min(...yValues);
-				const rawMax = axisConfig.max ?? Math.max(...yValues);
+				const rawMin = axisConfig.min ?? (yValues.length ? minOf(yValues) : 0);
+				const rawMax = axisConfig.max ?? (yValues.length ? maxOf(yValues) : 1);
 				const yExt = resolveTickExtendedRange(rawMin, rawMax, axisConfig.ticks || 5);
-				const positions = scatterPointPositions(scatterData, {
+				const positions = scatterPositionsFor(scatterData, {
 					min: yExt.min,
 					max: yExt.max
 				}, plotArea, options);
@@ -1206,7 +1254,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					const angle = i * angleStep - Math.PI / 2;
 					const ind = indicators[i];
 					const span = ind.max - (ind.min || 0);
-					const maxR = span > 0 ? Math.max(...series.map((s) => radius * (Math.max(0, (s.data[i] || 0) - (ind.min || 0)) / span))) : 0;
+					const maxR = span > 0 ? maxOf(series.map((s) => radius * (Math.max(0, (s.data[i] || 0) - (ind.min || 0)) / span))) : 0;
 					const px = centerX + Math.cos(angle) * maxR;
 					const py = centerY + Math.sin(angle) * maxR;
 					const dist = Math.sqrt((canvasX - px) ** 2 + (canvasY - py) ** 2);
@@ -1297,7 +1345,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const canvas = canvasRef.value;
 			if (!canvas) return null;
 			const rect = canvas.getBoundingClientRect();
-			const padding = getPadding(effectiveOptions.value, rect.width);
+			const padding = paddingFor(effectiveOptions.value, rect.width);
 			const plotArea = {
 				x: padding.left,
 				y: padding.top,
@@ -1361,7 +1409,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					const rect = canvas.getBoundingClientRect();
 					const x = e.clientX - rect.left;
 					const y = e.clientY - rect.top;
-					const padding = getPadding(effectiveOptions.value, rect.width);
+					const padding = paddingFor(effectiveOptions.value, rect.width);
 					if (x >= padding.left && x <= padding.left + (rect.width - padding.left - padding.right) && y >= padding.top && y <= padding.top + (rect.height - padding.top - padding.bottom)) {
 						touchPanning = true;
 						touchPanStartX = x;
@@ -1384,7 +1432,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const x = e.clientX - rect.left;
 			const y = e.clientY - rect.top;
 			if (props.options.brush?.enabled === true) {
-				const padding = getPadding(effectiveOptions.value, rect.width);
+				const padding = paddingFor(effectiveOptions.value, rect.width);
 				const plotArea = {
 					x: padding.left,
 					y: padding.top,
@@ -1479,7 +1527,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					const labels = options.labels || [];
 					if (canvas && labels.length > 0) {
 						const rect = canvas.getBoundingClientRect();
-						const padding = getPadding(options, rect.width);
+						const padding = paddingFor(options, rect.width);
 						const plotArea = {
 							x: padding.left,
 							y: padding.top,
@@ -1522,7 +1570,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const rect = canvas.getBoundingClientRect();
 			const x = e.clientX - rect.left;
 			const y = e.clientY - rect.top;
-			const padding = getPadding(effectiveOptions.value, rect.width);
+			const padding = paddingFor(effectiveOptions.value, rect.width);
 			const plotArea = {
 				x: padding.left,
 				y: padding.top,
@@ -1614,8 +1662,8 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					} else if (usesHoverAnimation()) {
 						stopHoverAnimation();
 						hoverAnimProgress = 1;
-						redraw();
-					} else redraw();
+						scheduleHoverRedraw();
+					} else scheduleHoverRedraw();
 					if (prevIndex === -1) {
 						const emitParams = Array.isArray(result.params) ? result.params[0] : result.params;
 						emit("hover", {
@@ -1675,6 +1723,9 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			}
 			return Number.isInteger(value) ? value.toString() : parseFloat(value.toFixed(4)).toString();
 		}
+		function escapeHtml(value) {
+			return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+		}
 		function applyTooltipContent(params) {
 			const formatter = props.options.tooltip?.formatter;
 			if (formatter) {
@@ -1685,23 +1736,23 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				const title = params[0]?.name || "";
 				const rows = pickTooltipRows(params).map((p) => `
       <div class="ev-chart__tooltip-item">
-        <span class="ev-chart__tooltip-dot" style="background: ${p.color}"></span>
-        <span class="ev-chart__tooltip-name">${p.seriesName}</span>
-        <span class="ev-chart__tooltip-value">${formatTooltipValue(p.value)}</span>
+        <span class="ev-chart__tooltip-dot" style="background: ${escapeHtml(p.color)}"></span>
+        <span class="ev-chart__tooltip-name">${escapeHtml(p.seriesName)}</span>
+        <span class="ev-chart__tooltip-value">${escapeHtml(formatTooltipValue(p.value))}</span>
       </div>
     `).join("");
 				tooltipContent.value = `
-      <div class="ev-chart__tooltip-title">${title}</div>
+      <div class="ev-chart__tooltip-title">${escapeHtml(title)}</div>
       ${rows}
     `;
 			} else {
 				const p = params;
 				tooltipContent.value = `
-      <div class="ev-chart__tooltip-title">${p.name}</div>
+      <div class="ev-chart__tooltip-title">${escapeHtml(p.name)}</div>
       <div class="ev-chart__tooltip-item">
-        <span class="ev-chart__tooltip-dot" style="background: ${p.color}"></span>
-        <span class="ev-chart__tooltip-name">${p.seriesName}</span>
-        <span class="ev-chart__tooltip-value">${formatTooltipValue(p.value)}</span>
+        <span class="ev-chart__tooltip-dot" style="background: ${escapeHtml(p.color)}"></span>
+        <span class="ev-chart__tooltip-name">${escapeHtml(p.seriesName)}</span>
+        <span class="ev-chart__tooltip-value">${escapeHtml(formatTooltipValue(p.value))}</span>
       </div>
     `;
 			}
@@ -1718,7 +1769,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			else if (checkToolboxHit(e.clientX, e.clientY)) zone = "toolbox";
 			else if (checkLegendHit(e.clientX, e.clientY)) zone = "legend";
 			else {
-				const padding = getPadding(effectiveOptions.value, rect.width);
+				const padding = paddingFor(effectiveOptions.value, rect.width);
 				if (x >= padding.left && x <= rect.width - padding.right && y >= padding.top && y <= rect.height - padding.bottom) zone = "plot";
 				else {
 					const slider = getSliderGeo();
@@ -1759,6 +1810,67 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				ariaLiveText.value = "";
 			}
 		}
+		const KEYNAV_TYPES = /* @__PURE__ */ new Set([
+			"line",
+			"area",
+			"bar",
+			"stacked-bar",
+			"waterfall",
+			"mixed",
+			"horizontal-bar"
+		]);
+		let keyboardClientX = -1;
+		let keyboardClientY = -1;
+		function handleChartKeydown(e) {
+			const options = props.options;
+			if (!KEYNAV_TYPES.has(options.type)) return;
+			const count = (options.labels || []).length;
+			if (count === 0) return;
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				if (hoverIndex < 0 || keyboardClientX < 0) return;
+				const result = getHoveredData(keyboardClientX, keyboardClientY);
+				if (result) {
+					const params = Array.isArray(result.params) ? result.params[0] : result.params;
+					emit("click", params);
+				}
+				return;
+			}
+			const horizontal = options.type === "horizontal-bar";
+			let i = hoverIndex;
+			if (e.key === "Home") i = 0;
+			else if (e.key === "End") i = count - 1;
+			else if (horizontal && e.key === "ArrowUp") i = hoverIndex < 0 ? 0 : Math.min(count - 1, hoverIndex + 1);
+			else if (horizontal && e.key === "ArrowDown") i = hoverIndex < 0 ? 0 : Math.max(0, hoverIndex - 1);
+			else if (!horizontal && e.key === "ArrowRight") i = hoverIndex < 0 ? 0 : Math.min(count - 1, hoverIndex + 1);
+			else if (!horizontal && e.key === "ArrowLeft") i = hoverIndex < 0 ? 0 : Math.max(0, hoverIndex - 1);
+			else return;
+			e.preventDefault();
+			if (i === hoverIndex) return;
+			const canvas = canvasRef.value;
+			if (!canvas) return;
+			const rect = canvas.getBoundingClientRect();
+			const padding = paddingFor(effectiveOptions.value, rect.width);
+			const plotWidth = rect.width - padding.left - padding.right;
+			const plotHeight = rect.height - padding.top - padding.bottom;
+			const clientX = horizontal ? rect.left + padding.left + plotWidth / 2 : rect.left + padding.left + (i + .5) * (plotWidth / count);
+			const clientY = horizontal ? rect.top + padding.top + plotHeight - (i + .5) * (plotHeight / count) : rect.top + padding.top + plotHeight / 2;
+			keyboardClientX = clientX;
+			keyboardClientY = clientY;
+			mouseX = clientX - rect.left;
+			mouseY = clientY - rect.top;
+			handlePointerMove({
+				clientX,
+				clientY,
+				pointerType: "mouse"
+			});
+		}
+		function handleFocusOut() {
+			if (clearTransientState()) {
+				emit("unhover");
+				ariaLiveText.value = "";
+			}
+		}
 		let resizeObserver = null;
 		function setupResizeObserver() {
 			if (!props.responsive) return;
@@ -1806,7 +1918,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				labels: [...opt.labels || []],
 				series: (opt.series || []).map((s) => ({
 					...s,
-					data: [...s.data]
+					data: [...s.data || []]
 				}))
 			};
 		}
@@ -1835,9 +1947,17 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		watch(() => props.options, (next) => {
 			cachedDataExtent = null;
 			cachedPlotArea = null;
+			cachedPadding = null;
+			scatterHitCache = null;
+			legendBoundsCache = null;
+			ganttLayoutCache = null;
+			sankeyLayoutCache = null;
 			internalError.value = null;
 			runDevValidation();
-			focusSeries.value = emphasisSeriesName.value;
+			if (focusSeries.value !== emphasisSeriesName.value) {
+				focusSeries.value = emphasisSeriesName.value;
+				animateFocusProgress();
+			}
 			syncScenes();
 			const zoom = getDataZoomConfig(props.options);
 			const zoomKey = zoom ? JSON.stringify({
@@ -1891,6 +2011,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		};
 		let unregisterConnector = null;
 		onMounted(() => {
+			focusSeries.value = emphasisSeriesName.value;
 			render(true);
 			syncScenes();
 			setupResizeObserver();
@@ -1924,11 +2045,98 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		let cachedDataExtent = null;
 		let cachedPlotArea = null;
+		let cachedPadding = null;
+		function paddingFor(options, width) {
+			if (cachedPadding && cachedPadding.options === options && cachedPadding.width === width) return cachedPadding.value;
+			const value = getPadding(options, width);
+			cachedPadding = {
+				options,
+				width,
+				value
+			};
+			return value;
+		}
+		let scatterHitCache = null;
+		function scatterPositionsFor(scatterData, yRange, plotArea, options) {
+			const c = scatterHitCache;
+			if (c && c.scatterData === scatterData && c.options === options && c.yMin === yRange.min && c.yMax === yRange.max && c.px === plotArea.x && c.py === plotArea.y && c.pw === plotArea.width && c.ph === plotArea.height) return c.positions;
+			const positions = scatterPointPositions(scatterData, yRange, plotArea, options);
+			scatterHitCache = {
+				scatterData,
+				options,
+				yMin: yRange.min,
+				yMax: yRange.max,
+				px: plotArea.x,
+				py: plotArea.y,
+				pw: plotArea.width,
+				ph: plotArea.height,
+				positions
+			};
+			return positions;
+		}
+		let legendBoundsCache = null;
+		function legendBoundsFor(ctx2d, options, plotArea, width, height, theme, hiddenSeries, isDark) {
+			const c = legendBoundsCache;
+			if (c && c.options === options && c.width === width && c.height === height && c.dark === isDark && c.hidden === hiddenSeries && c.px === plotArea.x && c.py === plotArea.y && c.pw === plotArea.width && c.ph === plotArea.height) return c.bounds;
+			const bounds = getLegendBounds(ctx2d, options, plotArea, width, height, theme, hiddenSeries);
+			legendBoundsCache = {
+				options,
+				width,
+				height,
+				dark: isDark,
+				hidden: hiddenSeries,
+				px: plotArea.x,
+				py: plotArea.y,
+				pw: plotArea.width,
+				ph: plotArea.height,
+				bounds
+			};
+			return bounds;
+		}
+		let ganttLayoutCache = null;
+		function ganttLayoutFor(plotArea, options, theme, hiddenSeries, isDark) {
+			const c = ganttLayoutCache;
+			if (c && c.options === options && c.dark === isDark && c.hidden === hiddenSeries && c.px === plotArea.x && c.py === plotArea.y && c.pw === plotArea.width && c.ph === plotArea.height) return c.layout;
+			const layout = computeGanttLayout(plotArea, options, theme, hiddenSeries);
+			ganttLayoutCache = {
+				options,
+				dark: isDark,
+				hidden: hiddenSeries,
+				px: plotArea.x,
+				py: plotArea.y,
+				pw: plotArea.width,
+				ph: plotArea.height,
+				layout
+			};
+			return layout;
+		}
+		let sankeyLayoutCache = null;
+		function sankeyLayoutFor(plotArea, options, theme, hiddenSeries, isDark) {
+			const c = sankeyLayoutCache;
+			if (c && c.options === options && c.dark === isDark && c.hidden === hiddenSeries && c.px === plotArea.x && c.py === plotArea.y && c.pw === plotArea.width && c.ph === plotArea.height) return c.layout;
+			const layout = computeSankeyLayout(plotArea, options, theme, hiddenSeries);
+			sankeyLayoutCache = {
+				options,
+				dark: isDark,
+				hidden: hiddenSeries,
+				px: plotArea.x,
+				py: plotArea.y,
+				pw: plotArea.width,
+				ph: plotArea.height,
+				layout
+			};
+			return layout;
+		}
 		__expose({
 			refresh: () => render(true),
 			update(newOptions) {
 				Object.assign(props.options, newOptions);
 				cachedDataExtent = null;
+				cachedPadding = null;
+				scatterHitCache = null;
+				legendBoundsCache = null;
+				ganttLayoutCache = null;
+				sankeyLayoutCache = null;
 				specVersion.value++;
 				debouncedRender(true);
 			},
@@ -1938,9 +2146,18 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			destroy() {
 				cleanupResizeObserver();
 				cleanupDarkModeObserver();
+				window.removeEventListener("pointerup", onWindowPointerUp);
+				window.removeEventListener("keydown", handleEscapeKey);
+				containerRef.value?.removeEventListener("wheel", handleWheel);
+				if (unregisterConnector) {
+					unregisterConnector();
+					unregisterConnector = null;
+				}
 				stopAnimation();
 				stopHoverAnimation();
+				stopTweenAnimation();
 				stopSceneTimer();
+				stopFocusAnimation();
 				if (tooltipRafId !== null) {
 					cancelAnimationFrame(tooltipRafId);
 					tooltipRafId = null;
@@ -2016,7 +2233,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				};
 				const width = canvas.width / dpr.value;
 				const height = canvas.height / dpr.value;
-				const padding = getPadding(effectiveOptions.value, width);
+				const padding = paddingFor(effectiveOptions.value, width);
 				cachedPlotArea = {
 					x: padding.left,
 					y: padding.top,
@@ -2150,7 +2367,10 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				class: "ev-chart",
 				style: normalizeStyle([containerStyle.value, { cursor: cursorStyle.value }]),
 				role: "img",
-				"aria-label": props.options.ariaLabel || ariaLabelText.value
+				tabindex: isEmpty.value || internalError.value ? -1 : 0,
+				"aria-label": props.options.ariaLabel || ariaLabelText.value,
+				onKeydown: handleChartKeydown,
+				onFocusout: handleFocusOut
 			}, [
 				!isEmpty.value && !internalError.value ? (openBlock(), createElementBlock("canvas", {
 					key: 0,
@@ -2229,10 +2449,10 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					_: 1
 				}),
 				createElementVNode("div", _hoisted_11, toDisplayString(ariaLiveText.value), 1)
-			], 12, _hoisted_1);
+			], 44, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-df8a90cc"]]);
+}), [["__scopeId", "data-v-62da63e1"]]);
 //#endregion
 //#region src/useChart.js
 var USE_CHART_KEY = /* @__PURE__ */ Symbol("ev-chart-context");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wil-works/evoke-charts",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Evoke Charts — 零依赖 Canvas 自绘图表库（Vue3），Evoke 生态独立图表包",
   "type": "module",
   "main": "./dist/index.mjs",