@dou-ui/chart 0.0.0-stage → 0.1.0-alpha.1

package/dist/chart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,4245 @@
+import { crisp } from "./core/painter.js";
+import { CHART_PATTERNS, patternCss } from "./core/pattern.js";
+import { baseline, categoryScale, linearScale, logScale } from "./core/scale.js";
+import { chartKey } from "./context.js";
+import { barPlacement } from "./core/bar.js";
+import { allX, angleAt, nearestPoint, nearestX, neighborGap, rowAt, sortedOrder } from "./core/hit.js";
+import { extent, read, rowOf } from "./core/data.js";
+import { heatColor, heatRange, heatShare } from "./core/heatmap.js";
+import { nearestSpoke, spokeAngle } from "./core/radar.js";
+import { FUNNEL_BAR } from "./core/funnel.js";
+import { isTotal } from "./core/waterfall.js";
+import { warnOnce } from "./core/warn.js";
+import { boxes } from "./core/box.js";
+import { numberFormatFull, numberTickFormat, timeFormatFull, timePrecision } from "./core/format.js";
+import { createColorResolver, observeTheme } from "./core/colors.js";
+import { joinGroup, tellGroup } from "./core/sync.js";
+import { clampWindow, intervalToWindow, panWindow, snapCategories, unitsOf, valueToNumber, windowToInterval, within, zoomWindow } from "./core/window.js";
+import { arcBox, layoutChart, layoutFunnel, layoutPie, layoutRadar } from "./core/layout.js";
+import { buildModel, seriesName, smallestGap } from "./core/model.js";
+import { drawMarkers, placeMarkers } from "./core/marker.js";
+import { contrast, luminance, placeDataLabels, spread } from "./core/labels.js";
+import { FADED, drawPie, pieSlices, sliceOuter } from "./core/pie.js";
+import { SUNBURST_FADE, buildTree, drawSunburst, drawTreemap, hasHeader, layoutSunburst, layoutTreemap, ringTreemap, sunburstAt, sunburstBranch, treePath, treemapAt } from "./core/tree.js";
+import { SvgPainter, escapeXml, isSvg, num, paintAttribute } from "./core/svg.js";
+import { format, useChartMessages } from "./locale.js";
+import overlay_default from "./overlay.js";
+import pointer_default from "./pointer.js";
+import table_default from "./table.js";
+import static_default from "./static.js";
+import zoom_layer_default from "./zoom-layer.js";
+import { holdPointer, svgToPNG, useElementSize, useLocale, useNamespace, useReducedMotion } from "dou-ui";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, toRaw, unref, useId, useSlots, useTemplateRef, watch, watchEffect } from "vue";
+// src/chart.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"role",
+	"aria-roledescription",
+	"aria-label",
+	"aria-busy",
+	"tabindex"
+];
+var LABEL_ROOM = .12;
+/**
+* The model with room on each value axis for data labels past the bars'
+* ends and above the points, so the highest one isn't left out.
+*/
+var TREE_EDGE = 4;
+var SLICE_COLORS = 7;
+var LEGEND_SIDE_LEAST = 480;
+/** The text of a data label, or `null` for none. */
+var PIE_LABEL_SHARE = .26;
+/**
+* The smallest a pie gets to keep its labels outside: a share of its size
+* without them, or a radius in px that still reads. Smaller, they go inside.
+*/
+var PIE_LEAST = .6;
+var PIE_LEAST_RADIUS = 48;
+/** The pie's labels, and the lines out to those outside it. */
+var EDGE_ROOM = 4;
+var NEAR_LINE = 8;
+/**
+* The series under the pointer, brought forward while the tooltip shows
+* all of them: the line it is near, or the bar or area it is over. A
+* point picked on its own (a scatter's) brings its series forward too.
+* `null` with a single series, or none under the pointer.
+*/
+var HOLD = 400;
+var WHEEL_ZOOM = .01;
+var WHEEL_MOST = 40;
+var STEADY = 300;
+var MOTION_LIMIT = 2e3;
+var ENTER = 320;
+var UPDATE = 220;
+/** A move under way: from what was shown to the current data. */
+var TABLE_ROWS = 1e3;
+var BACKDROP = 4;
+/** A line of text whose 16px box starts at `top`, centered on its cap height as in the page. */
+var chart_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouChart",
+	__name: "chart",
+	props: {
+		data: { default: () => [] },
+		x: {},
+		height: { default: 320 },
+		ariaLabel: {},
+		legend: {
+			type: Boolean,
+			default: void 0
+		},
+		legendPlacement: {},
+		palette: {},
+		patterns: { type: Boolean },
+		horizontal: { type: Boolean },
+		table: { type: Boolean },
+		messages: {},
+		loading: { type: Boolean },
+		ssrWidth: { default: 640 }
+	},
+	emits: [
+		"select",
+		"hover",
+		"update:table"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const ns = useNamespace("chart");
+		const { locale } = useLocale();
+		const messages = useChartMessages(() => props.messages);
+		const rootRef = useTemplateRef("root");
+		const canvasRef = useTemplateRef("canvas");
+		const instance = getCurrentInstance();
+		/**
+		* Drawn on the server, or taking over a page drawn there: until the canvas
+		* has drawn, the chart is an SVG at `ssrWidth` (the server can't know the width).
+		*/
+		const fromServer = ref(typeof window === "undefined" || !!instance?.vnode.el);
+		const size = useElementSize(rootRef, fromServer.value ? { initial: {
+			width: props.ssrWidth,
+			height: typeof props.height === "number" ? props.height : 320
+		} } : {});
+		const seriesParts = shallowRef([]);
+		const axisParts = shallowRef([]);
+		const pieParts = shallowRef([]);
+		const tooltipParts = shallowRef([]);
+		const zoomParts = shallowRef([]);
+		const brushParts = shallowRef([]);
+		const rangeParts = shallowRef([]);
+		const markerParts = shallowRef([]);
+		const treeParts = shallowRef([]);
+		function inPageOrder(parts) {
+			return [...parts].sort((a, b) => {
+				const [x, y] = [a.el(), b.el()];
+				if (!x || !y) return 0;
+				return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+			});
+		}
+		function adder(parts) {
+			return (part) => {
+				parts.value = inPageOrder([...parts.value, part]);
+				return () => parts.value = parts.value.filter((p) => p !== part);
+			};
+		}
+		provide(chartKey, {
+			addSeries: adder(seriesParts),
+			addAxis: adder(axisParts),
+			addPie: adder(pieParts),
+			addTooltip: adder(tooltipParts),
+			addZoom: adder(zoomParts),
+			addBrush: adder(brushParts),
+			addRange: adder(rangeParts),
+			addMarker: adder(markerParts),
+			addTree: adder(treeParts),
+			data: () => props.data,
+			locale: () => locale.value.name,
+			messages: () => messages.value
+		});
+		const themeVersion = ref(0);
+		const resolveColor = createColorResolver(() => rootRef.value);
+		function readTheme() {
+			resolveColor.clear();
+			measured.clear();
+			themeVersion.value++;
+		}
+		let stopTheme;
+		/** A touch screen: the legend's rows go further apart, for a finger. */
+		const coarse = ref(false);
+		const coarseQuery = typeof window === "undefined" || !window.matchMedia ? void 0 : window.matchMedia("(pointer: coarse)");
+		const readCoarse = () => coarse.value = !!coarseQuery?.matches;
+		onMounted(() => {
+			readCoarse();
+			coarseQuery?.addEventListener?.("change", readCoarse);
+		});
+		onBeforeUnmount(() => coarseQuery?.removeEventListener?.("change", readCoarse));
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		onMounted(() => {
+			readTheme();
+			stopTheme = observeTheme(readTheme);
+			fonts?.addEventListener?.("loadingdone", readTheme);
+		});
+		onBeforeUnmount(() => {
+			stopTheme?.();
+			fonts?.removeEventListener?.("loadingdone", readTheme);
+		});
+		const colors = computed(() => {
+			themeVersion.value;
+			return {
+				surface: resolveColor("var(--dou-chart-surface)"),
+				grid: resolveColor("var(--dou-chart-grid)"),
+				baseline: resolveColor("var(--dou-chart-baseline)")
+			};
+		});
+		const measured = /* @__PURE__ */ new Map();
+		let measurer = null;
+		function measure(text) {
+			let width = measured.get(text);
+			if (width !== void 0) return width;
+			const root = rootRef.value;
+			if (root && typeof document !== "undefined") {
+				if (!measurer || measurer.parentNode !== root) {
+					measurer = document.createElement("span");
+					measurer.className = `${ns.e("tick")} ${ns.e("measure")}`;
+					measurer.setAttribute("aria-hidden", "true");
+					measurer.appendChild(document.createElement("span")).className = ns.e("text");
+					root.appendChild(measurer);
+				}
+				measurer.firstChild.textContent = text;
+				width = measurer.getBoundingClientRect().width;
+			}
+			if (!width) {
+				width = 0;
+				for (const char of text) width += char.charCodeAt(0) > 11904 ? 12 : 7;
+			}
+			measured.set(text, width);
+			return width;
+		}
+		const declaredAxes = computed(() => {
+			const declared = {};
+			for (const part of axisParts.value) declared[part.props.for] = part.props;
+			return declared;
+		});
+		const defaultAxis = computed(() => declaredAxes.value.y2 && !declaredAxes.value.y ? "y2" : "y");
+		const uses = (axis) => seriesParts.value.some((part) => (part.props.axis ?? defaultAxis.value) === axis);
+		/** Whether a value axis lists categories (a heatmap's rows): no grid lines across it by default. */
+		const listsCategories = (axis) => seriesParts.value.some((part) => part.kind.categoryY && (part.props.axis ?? defaultAxis.value) === axis);
+		/**
+		* The axes by what they measure, and where each is drawn: x at the bottom,
+		* y on the left and y2 on the right; with `horizontal`, x on the left,
+		* y at the bottom and y2 at the top.
+		*/
+		const axes = computed(() => {
+			const declared = declaredAxes.value;
+			const places = props.horizontal ? {
+				x: "left",
+				y: "bottom",
+				y2: "top"
+			} : {
+				x: "bottom",
+				y: "left",
+				y2: "right"
+			};
+			const config = (role, grid) => {
+				const { for: _, percent: share, ...given } = declared[role] ?? {};
+				const position = places[role];
+				const out = {
+					...given,
+					position,
+					grid: given.grid ?? grid,
+					hidden: given.hidden ?? false
+				};
+				if (share && role !== "x") {
+					out.format ??= percentTicks.value.format;
+					out.max ??= 1;
+				}
+				return out;
+			};
+			const y = declared.y || uses("y") || !uses("y2");
+			return {
+				x: config("x", false),
+				y: y ? config("y", !listsCategories("y")) : null,
+				y2: declared.y2 || uses("y2") ? config("y2", !y && !listsCategories("y2")) : null
+			};
+		});
+		const model = computed(() => {
+			const inputs = seriesParts.value.map((part, index) => ({
+				index,
+				kind: part.kind,
+				props: part.props,
+				hidden: part.hidden.value
+			}));
+			const type = axes.value.x.type;
+			return labelRoom(reachMarkers(buildModel(inputs, {
+				data: toRaw(props.data),
+				x: props.x,
+				xKind: type === "log" ? "linear" : type,
+				axis: defaultAxis.value,
+				percent: {
+					y: !!declaredAxes.value.y?.percent,
+					y2: !!declaredAxes.value.y2?.percent
+				},
+				sort: declaredAxes.value.x?.sort
+			})));
+		});
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			for (const axis of ["y", "y2"]) if (declaredAxes.value[axis]?.sort !== void 0) warnOnce(`sort-${axis}`, `<DouChartAxis for="${axis}">: \`sort\` orders a category x axis only, so it is left out here.`);
+		});
+		/** Percentages on the ticks of a `percent` axis: whole ones. */
+		const percentTicks = computed(() => new Intl.NumberFormat(locale.value.name, {
+			style: "percent",
+			maximumFractionDigits: 0
+		}));
+		/** Room past the data on each value axis for labels outside bars and above points: a part of its span. */
+		function labelRoom(m) {
+			const wanted = /* @__PURE__ */ new Set();
+			for (const s of m.series) {
+				const p = s.input.props;
+				if (!p.labels || !s.input.kind.labels || p.labelPosition === "end") continue;
+				if (s.input.kind.categoryY) continue;
+				if (p.labelPosition === "inside" || s.stackEnds && s.input.kind.band && !p.labelPosition) continue;
+				wanted.add(s.axis);
+			}
+			if (!wanted.size) return m;
+			const y = { ...m.y };
+			for (const axis of wanted) {
+				const known = y[axis];
+				if (!known) continue;
+				const zero = declaredAxes.value[axis]?.zero ?? m.zero[axis];
+				const lo = zero ? Math.min(known[0], 0) : known[0];
+				const hi = zero ? Math.max(known[1], 0) : known[1];
+				const span = hi - lo || Math.abs(hi) || 1;
+				y[axis] = [lo < 0 ? known[0] - span * LABEL_ROOM : known[0], hi > 0 ? known[1] + span * LABEL_ROOM : known[1]];
+			}
+			return {
+				...m,
+				y
+			};
+		}
+		/** The model with each value axis reaching the markers' values on it, so a target shows. */
+		function reachMarkers(m) {
+			let y = null;
+			for (const part of markerParts.value) {
+				const value = part.props.y;
+				if (value === void 0) continue;
+				const axis = part.props.axis ?? defaultAxis.value;
+				const known = (y ?? m.y)[axis];
+				if (!known) continue;
+				let [lo, hi] = known;
+				for (const v of Array.isArray(value) ? value : [value]) {
+					if (!Number.isFinite(v)) continue;
+					lo = Math.min(lo, v);
+					hi = Math.max(hi, v);
+				}
+				if (part.props.label && !Array.isArray(value) && !Array.isArray(part.props.x) && value >= hi) hi = value + (value - lo) * .1;
+				if (lo !== known[0] || hi !== known[1]) {
+					y ??= { ...m.y };
+					y[axis] = [lo, hi];
+				}
+			}
+			return y ? {
+				...m,
+				y
+			} : m;
+		}
+		const pie = computed(() => pieParts.value[0] ?? null);
+		const slices = computed(() => {
+			const part = pie.value;
+			if (!part) return [];
+			const label = part.props.label ?? props.x;
+			return pieSlices(toRaw(part.props.data ?? props.data), part.props.value, label, part.props.color, part.hidden.value, {
+				start: pieArc.value[0],
+				end: pieArc.value[1],
+				rose: !!part.props.rose
+			});
+		});
+		/** The part of the turn the pie takes, in radians clockwise from 12 o'clock. */
+		const pieArc = computed(() => {
+			const p = pie.value?.props;
+			const start = (p?.startAngle ?? 0) * Math.PI / 180;
+			const end = p?.endAngle === void 0 ? start + Math.PI * 2 : p.endAngle * Math.PI / 180;
+			if (!(end > start)) warnOnce("pie-angles", `<${pie.value?.gauge ? "DouChartGauge" : "DouChartPie"}>: \`end-angle\` must be past \`start-angle\` (clockwise); nothing is drawn.`);
+			return [start, Math.min(end, start + Math.PI * 2)];
+		});
+		/** The slices that take room: not turned off. */
+		const shownSlices = computed(() => slices.value.filter((slice) => !slice.hidden));
+		if (process.env.NODE_ENV !== "production") watch([
+			pieParts,
+			seriesParts,
+			treeParts
+		], ([pies, series, trees]) => {
+			const pieName = pies[0]?.gauge ? "DouChartGauge" : "DouChartPie";
+			if (pies.length > 1 || pies.length && (series.length || trees.length)) console.warn(`[@dou-ui/chart] a <${pieName}> is drawn alone: other series, pies and trees are left out.`);
+			else if (trees.length > 1 || trees.length && series.length) {
+				const name = trees[0].shape === "treemap" ? "DouChartTreemap" : "DouChartSunburst";
+				console.warn(`[@dou-ui/chart] a <${name}> is drawn alone: other series and trees are left out.`);
+			}
+		});
+		const tree = computed(() => !pie.value && treeParts.value[0] || null);
+		/** The tree read from the part's rows, its nodes parents first. */
+		const treeData = computed(() => {
+			const part = tree.value;
+			if (!part) return null;
+			const p = part.props;
+			const data = toRaw(p.data ?? props.data);
+			if (data && !Array.isArray(data)) warnOnce("tree-data", "a treemap or sunburst reads nested rows (an array); data by column is left out.");
+			return buildTree(Array.isArray(data) ? data : [], {
+				label: p.label ?? "name",
+				value: p.value ?? "value",
+				children: p.children ?? "children"
+			});
+		});
+		/** Room at the edges of a tree, in px. */
+		const treeLayout = computed(() => {
+			const width = size.width.value;
+			const height = size.height.value;
+			const part = tree.value;
+			const data = treeData.value;
+			if (!width || !height || !part || !data) return null;
+			themeVersion.value;
+			const plot = {
+				x: TREE_EDGE,
+				y: TREE_EDGE,
+				width: Math.max(0, width - 8),
+				height: Math.max(0, height - 8)
+			};
+			const cx = width / 2;
+			const cy = height / 2;
+			const radius = Math.max(0, Math.min(plot.width, plot.height) / 2);
+			const inner = radius * Math.min(.9, Math.max(0, part.props.innerRadius ?? .3));
+			if (part.shape === "treemap") layoutTreemap(data.root, plot);
+			else layoutSunburst(data.root, inner, radius);
+			return {
+				width,
+				height,
+				plot,
+				cx,
+				cy,
+				radius,
+				inner,
+				nodes: [...data.nodes],
+				legend: [],
+				legendBox: void 0
+			};
+		});
+		/**
+		* Each node's color: its own, else its parent's, the top level taking the
+		* palette's. A sunburst's rings pale outwards, towards the surface.
+		*/
+		const treeColors = computed(() => {
+			themeVersion.value;
+			const part = tree.value;
+			const data = treeData.value;
+			if (!part || !data) return [];
+			const palette = ownPalette.value;
+			const own = part.props.color;
+			const css = [];
+			for (const node of data.nodes) {
+				if (node.depth === 0) {
+					css.push("");
+					continue;
+				}
+				const raw = !own || !node.row ? void 0 : typeof own === "function" ? own(node.row, node.depth) : read(node.row, own, node.place);
+				const given = typeof raw === "string" && raw ? raw : void 0;
+				const base = given ? toneOrColor(given) : node.depth > 1 ? css[node.parent.index] : palette ? toneOrColor(palette[node.group % palette.length]) : `var(--dou-color-chart-${node.group % SLICE_COLORS + 2})`;
+				css.push(base);
+			}
+			return data.nodes.map((node, k) => {
+				if (node.depth === 0) return "";
+				const shade = part.shape === "sunburst" && node.depth > 1;
+				const pale = Math.max(40, 100 - (node.depth - 1) * 24);
+				return resolveColor(shade ? `color-mix(in oklab, ${css[k]} ${pale}%, var(--dou-chart-surface))` : css[k]);
+			});
+		});
+		/** The value as text, and its share of the whole. */
+		function treeValue(node) {
+			const root = treeData.value?.root;
+			return format(messages.value.share, {
+				value: numberFormatFull(locale.value.name)(node.value),
+				share: percent.value.format(root && root.value > 0 ? node.value / root.value : 0)
+			});
+		}
+		/** The tree's names in it, where they fit: a leaf's in its middle, a group's in its header. */
+		const treeLabels = computed(() => {
+			const l = treeLayout.value;
+			const part = tree.value;
+			const out = [];
+			if (!l || !part || !part.props.labels || empty.value) return out;
+			const colorsOf = treeColors.value;
+			const given = part.props.labels;
+			const whole = treeData.value?.root.value ?? 0;
+			for (const node of l.nodes) {
+				if (node.depth === 0) continue;
+				const text = typeof given === "function" ? given({
+					value: node.value,
+					share: whole > 0 ? node.value / whole : 0,
+					name: node.name,
+					row: node.row ?? {},
+					index: node.place,
+					depth: node.depth
+				}) : node.name;
+				if (text == null || text === "") continue;
+				const name = String(text);
+				const width = measure(name);
+				if (part.shape === "treemap") {
+					const w = node.x1 - node.x0;
+					const h = node.y1 - node.y0;
+					if (node.children.length) {
+						if (!hasHeader(node) || width > w - 12) continue;
+						out.push({
+							key: `node:${node.index}`,
+							series: -1,
+							text: name,
+							left: node.x0 + 6,
+							top: node.y0 + 2,
+							align: "start",
+							ink: "var(--dou-color-text-secondary)"
+						});
+					} else if (width <= w - 12 && h >= 24) out.push({
+						key: `node:${node.index}`,
+						series: -1,
+						text: name,
+						left: node.x0 + 6,
+						top: node.y0 + 6,
+						align: "start",
+						on: colorsOf[node.index],
+						ink: inkOn(colorsOf[node.index])
+					});
+					continue;
+				}
+				const r = (node.y0 + node.y1) / 2;
+				if ((node.x1 - node.x0) * r < width + 8 || node.y1 - node.y0 < 20) continue;
+				const middle = (node.x0 + node.x1) / 2;
+				out.push({
+					key: `node:${node.index}`,
+					series: -1,
+					text: name,
+					left: l.cx + Math.sin(middle) * r,
+					top: l.cy - Math.cos(middle) * r - 8,
+					align: "middle",
+					on: colorsOf[node.index],
+					ink: inkOn(colorsOf[node.index])
+				});
+			}
+			return out;
+		});
+		/** The node the tooltip shows, its path as the title. */
+		function treeTip(index, pointer) {
+			const l = treeLayout.value;
+			const node = treeData.value?.nodes[index];
+			if (!l || !node || node.depth === 0) return null;
+			const anchor = tree.value?.shape === "sunburst" ? [l.cx + Math.sin((node.x0 + node.x1) / 2) * ((node.y0 + node.y1) / 2), l.cy - Math.cos((node.x0 + node.x1) / 2) * ((node.y0 + node.y1) / 2)] : [(node.x0 + node.x1) / 2, (node.y0 + node.y1) / 2];
+			return {
+				x: node.name,
+				title: treePath(node).join(" / "),
+				items: [{
+					name: tree.value?.props.name ?? messages.value.tableValue,
+					text: treeValue(node),
+					value: node.value,
+					color: treeColors.value[node.index],
+					row: node.row ?? void 0
+				}],
+				anchor: pointer ?? anchor,
+				marks: []
+			};
+		}
+		/**
+		* The tree as drawn with nothing pointed at, kept while its layout and
+		* colors stay: pointing at a node then draws only that node's part over
+		* it (a treemap's ring, a sunburst's branch), however many nodes.
+		*/
+		let treeImage = null;
+		/** The kept image of the tree, drawn again when `key` changes; null without a canvas. */
+		function treeImageOf(key, dpr, render) {
+			const l = treeLayout.value;
+			if (treeImage && key.every((k, i) => k === treeImage.key[i])) return treeImage.canvas;
+			const canvas = treeImage?.canvas ?? document.createElement("canvas");
+			canvas.width = Math.round(l.width * dpr);
+			canvas.height = Math.round(l.height * dpr);
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return null;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx.clearRect(0, 0, l.width, l.height);
+			render(ctx);
+			treeImage = {
+				key,
+				canvas
+			};
+			return canvas;
+		}
+		/** Draws the tree, as it comes in: a treemap fades in, a sunburst sweeps round. */
+		function paintTree(painter, t, still = false, dpr = 1) {
+			const l = treeLayout.value;
+			const a = still ? null : active.value;
+			const focus = a?.type === "slice" ? a.slice : -1;
+			const shape = tree.value?.shape;
+			const surface = colors.value.surface;
+			const ring = resolveColor("var(--dou-color-text)");
+			const sunburst = {
+				cx: l.cx,
+				cy: l.cy,
+				surface
+			};
+			const direct = () => shape === "treemap" ? drawTreemap(painter, l.nodes, treeColors.value, {
+				surface,
+				ring,
+				t,
+				focus
+			}) : drawSunburst(painter, l.nodes, treeColors.value, {
+				...sunburst,
+				focus,
+				sweep: t
+			});
+			if (still || t < 1 || isSvg(painter) || typeof document === "undefined") return direct();
+			const image = treeImageOf([
+				shape,
+				l,
+				treeColors.value,
+				surface,
+				dpr
+			], dpr, (ctx) => shape === "treemap" ? drawTreemap(ctx, l.nodes, treeColors.value, {
+				surface,
+				ring,
+				t
+			}) : drawSunburst(ctx, l.nodes, treeColors.value, sunburst));
+			if (!image) return direct();
+			const node = l.nodes[focus];
+			if (shape === "treemap") {
+				painter.drawImage(image, 0, 0, l.width, l.height);
+				ringTreemap(painter, node, ring);
+				return;
+			}
+			if (!node) {
+				painter.drawImage(image, 0, 0, l.width, l.height);
+				return;
+			}
+			painter.save();
+			painter.globalAlpha *= SUNBURST_FADE;
+			painter.drawImage(image, 0, 0, l.width, l.height);
+			painter.restore();
+			drawSunburst(painter, sunburstBranch(node), treeColors.value, sunburst);
+		}
+		/** The chart is a funnel: its first funnel's stages, one under another. */
+		const funnel = computed(() => !pie.value && seriesParts.value.some((part) => part.kind.funnel));
+		/** The chart is a radar: its series are drawn round a center. */
+		const radar = computed(() => !pie.value && !funnel.value && seriesParts.value.some((part) => part.kind.polar));
+		if (process.env.NODE_ENV !== "production") watch(seriesParts, (list) => {
+			const polar = list.filter((part) => part.kind.polar).length;
+			if (polar && polar < list.length) console.warn("[@dou-ui/chart] a <DouChartRadar> is drawn round a center: series on axes are left out of it.");
+			if (list.some((part) => part.kind.funnel) && list.length > 1) console.warn("[@dou-ui/chart] a <DouChartFunnel> is drawn alone: other series are left out.");
+		});
+		/** No series has a value to show. */
+		const empty = computed(() => pie.value ? !shownSlices.value.length : tree.value ? !(treeData.value && treeData.value.root.value > 0) : !model.value.y.y && !model.value.y.y2);
+		let timestampWarned = false;
+		watch(model, (m) => {
+			if (process.env.NODE_ENV === "production" || timestampWarned) return;
+			if (m.xKind !== "linear" || axes.value.x.type || !m.x) return;
+			if (m.x[0] > 1e11 && m.x[1] < 0x9184e72a000) {
+				timestampWarned = true;
+				console.warn("[@dou-ui/chart] the x values look like times in ms. Add <DouChartAxis for=\"x\" type=\"time\" /> to show them as dates.");
+			}
+		});
+		const TONES = /* @__PURE__ */ new Set([
+			"neutral",
+			"primary",
+			"success",
+			"warning",
+			"danger"
+		]);
+		/** A color given as a CSS color or a tone name, as CSS. */
+		const toneOrColor = (color) => color === "neutral" ? "var(--dou-color-chart-1)" : TONES.has(color) ? `var(--dou-color-${color})` : color;
+		/** The chart's own palette (`palette`), when one is given. */
+		const ownPalette = computed(() => props.palette?.length ? props.palette : null);
+		/** The palette's color for the series at `index`: the chart's own, or the theme's eight. */
+		function paletteColor(index) {
+			const own = ownPalette.value;
+			return own ? toneOrColor(own[index % own.length]) : `var(--dou-color-chart-${index % 8 + 1})`;
+		}
+		/** A series' color: its own, its tone's, or the palette's by its place among all series. */
+		function seriesColor(p, index) {
+			const own = typeof p.color === "string" ? p.color : void 0;
+			return resolveColor(own ?? (p.tone ? `var(--dou-color-${p.tone})` : paletteColor(index)));
+		}
+		/** A color given as a CSS color or a tone name, as the canvas takes it. */
+		const itemColor = (color) => resolveColor(toneOrColor(color));
+		/**
+		* A waterfall's colors, unless it has its own: rises in the success tone,
+		* falls in the danger tone, totals in the series' color.
+		*/
+		function waterfallColors(s) {
+			if (typeof s.props.color === "string") return null;
+			const rise = itemColor("success");
+			const fall = itemColor("danger");
+			const out = [];
+			for (let i = 0; i < s.y.length; i++) out.push(isTotal(s, i) ? void 0 : s.y[i] < 0 ? fall : rise);
+			return out;
+		}
+		/** The colors of single bars or points, by row, when `color` is a function. */
+		function itemColors(s) {
+			const of = s.props.color;
+			if (typeof of !== "function") return s.kind.waterfall ? waterfallColors(s) : null;
+			const out = [];
+			const seen = /* @__PURE__ */ new Map();
+			for (let i = 0; i < s.y.length; i++) {
+				const color = of(rowOf(s.rows, i), i);
+				if (!color) {
+					out.push(void 0);
+					continue;
+				}
+				let css = seen.get(color);
+				if (css === void 0) seen.set(color, css = itemColor(color));
+				out.push(css);
+			}
+			return out;
+		}
+		const series = computed(() => {
+			themeVersion.value;
+			return model.value.series.map((s) => {
+				const { props: p, index } = s.input;
+				const shown = {
+					...s,
+					index,
+					kind: s.input.kind,
+					props: p,
+					color: seriesColor(p, index),
+					pattern: seriesPattern(p, s.input.kind, index)
+				};
+				shown.colors = itemColors(shown);
+				return shown;
+			});
+		});
+		/**
+		* The kinds whose fill can take a pattern: bars (a histogram's too) and
+		* areas. A waterfall's colors say which way each step goes, and a box
+		* plot's are light: they take none.
+		*/
+		const FILLED = /* @__PURE__ */ new Set(["bar", "area"]);
+		/** A series' pattern: its own, or with the chart's `patterns`, one by its place. */
+		function seriesPattern(p, kind, index) {
+			if (!FILLED.has(kind.type) || kind.waterfall) return null;
+			const own = p.pattern;
+			if (own) return own === "none" ? null : own;
+			return props.patterns ? CHART_PATTERNS[index % CHART_PATTERNS.length] : null;
+		}
+		/** A pattern as a legend swatch shows it, over the swatch's color. */
+		const swatchPattern = (pattern) => pattern ? patternCss(pattern, "color-mix(in oklab, var(--dou-chart-surface) 70%, transparent)") : void 0;
+		/** Each slice's pattern, by its place, with the chart's `patterns`. */
+		const slicePatterns = computed(() => props.patterns && !pie.value?.gauge ? slices.value.map((slice) => CHART_PATTERNS[slice.index % CHART_PATTERNS.length]) : void 0);
+		/** The colored part of the palette: slices leave the neutral first color for "other". */
+		const sliceColors = computed(() => {
+			themeVersion.value;
+			const palette = ownPalette.value;
+			return slices.value.map((slice) => {
+				const own = slice.color;
+				const css = own ? toneOrColor(own) : palette ? toneOrColor(palette[slice.index % palette.length]) : `var(--dou-color-chart-${slice.index % SLICE_COLORS + 2})`;
+				return resolveColor(css);
+			});
+		});
+		if (process.env.NODE_ENV !== "production") watch(slices, (list) => {
+			const count = ownPalette.value?.length ?? SLICE_COLORS;
+			if (list.length > count && pie.value && pie.value.props.color === void 0) console.warn(`[@dou-ui/chart] a pie of ${list.length} slices repeats colors after ${count}: merge the small ones into one slice, or give each a \`color\`.`);
+		});
+		/** The legend: one entry per series, or per slice of a pie, turned off or not. */
+		const legendEntries = computed(() => {
+			if (empty.value) return [];
+			themeVersion.value;
+			if (tree.value) return [];
+			if (pie.value) {
+				if (pie.value.gauge || !(props.legend ?? slices.value.length > 1)) return [];
+				const last = shownSlices.value.length === 1;
+				return slices.value.map((slice, k) => ({
+					text: slice.label,
+					color: sliceColors.value[k],
+					kind: "pie",
+					dashed: false,
+					off: slice.hidden,
+					locked: last && !slice.hidden,
+					scale: void 0,
+					pattern: swatchPattern(slicePatterns.value?.[slice.index])
+				}));
+			}
+			const scaled = seriesParts.value.some((part) => part.kind.categoryY);
+			if (!(props.legend ?? (seriesParts.value.length > 1 || scaled))) return [];
+			const last = seriesParts.value.filter((part) => !part.hidden.value).length === 1;
+			return seriesParts.value.map((part, index) => {
+				const color = seriesColor(part.props, index);
+				const entry = {
+					text: seriesName({
+						index,
+						props: part.props
+					}),
+					color,
+					kind: part.kind.type,
+					dashed: !!part.props.dashed,
+					off: part.hidden.value,
+					locked: last && !part.hidden.value,
+					/** A heatmap's scale: its colors, least to most. */
+					scale: void 0,
+					pattern: swatchPattern(seriesPattern(part.props, part.kind, index))
+				};
+				const s = part.kind.categoryY ? series.value.find((one) => one.index === index) : void 0;
+				const range = s && heatRange(s);
+				if (s && range) {
+					const text = heatText(s);
+					const surface = colors.value.surface;
+					entry.text = `${text(range[0])} – ${text(range[1])}`;
+					entry.scale = [
+						0,
+						.5,
+						1
+					].map((t) => heatColor(s.color, surface, t));
+				}
+				return entry;
+			});
+		});
+		/** The legend's names for the layout: a heatmap's scale takes a wider swatch. */
+		const legendNames = computed(() => legendEntries.value.map((entry) => entry.scale ? {
+			text: entry.text,
+			swatch: 40
+		} : entry.text));
+		/** Turns an entry's series (or slice) on or off; the last one shown stays on. */
+		function toggle(index) {
+			const pieChart = pie.value;
+			if (pieChart) {
+				const slice = slices.value[index];
+				if (!slice) return;
+				const hidden = pieChart.hidden.value;
+				if (slice.hidden) pieChart.hidden.value = hidden.filter((label) => label !== slice.label);
+				else if (shownSlices.value.length > 1) pieChart.hidden.value = [...hidden, slice.label];
+			} else {
+				const part = seriesParts.value[index];
+				if (!part) return;
+				if (part.hidden.value) part.hidden.value = false;
+				else if (seriesParts.value.filter((p) => !p.hidden.value).length > 1) part.hidden.value = true;
+			}
+			if (focused.value === index) focused.value = null;
+		}
+		/** The legend entry the pointer or focus is on: its series is brought forward. */
+		const focused = ref(null);
+		/**
+		* Shows only the entry's series (or slice), or all of them again when it
+		* already is the only one: its legend entry clicked with Alt, held down on
+		* a touch screen, or Alt+Enter.
+		*/
+		function isolate(index) {
+			const pieChart = pie.value;
+			if (pieChart) {
+				const slice = slices.value[index];
+				if (!slice) return;
+				const alone = shownSlices.value.length === 1 && !slice.hidden;
+				pieChart.hidden.value = alone ? [] : slices.value.filter((other) => other !== slice).map((other) => other.label);
+			} else {
+				const parts = seriesParts.value;
+				const part = parts[index];
+				if (!part) return;
+				const alone = !part.hidden.value && parts.every((p) => p === part || p.hidden.value);
+				for (const p of parts) p.hidden.value = alone ? false : p !== part;
+			}
+			focused.value = null;
+		}
+		const zoomPart = computed(() => !pie.value && zoomParts.value[0] || null);
+		const rangePart = computed(() => !pie.value && rangeParts.value[0] || null);
+		const brushPart = computed(() => {
+			const part = brushParts.value[0];
+			return !pie.value && part && !part.props.disabled ? part : null;
+		});
+		/** Whether the chart zooms with the wheel, fingers and keys. */
+		const zoomOn = computed(() => !!zoomPart.value && !zoomPart.value.props.disabled && !empty.value);
+		const zoomAxes = computed(() => {
+			const axis = zoomPart.value?.props.axis ?? "x";
+			return {
+				x: zoomOn.value && axis !== "y",
+				y: zoomOn.value && axis !== "x"
+			};
+		});
+		/** The models the stretch of x is kept in: the zoom's and the strip's. */
+		const xModels = computed(() => {
+			const list = [];
+			if (zoomPart.value && !zoomPart.value.props.disabled) list.push(zoomPart.value.x);
+			if (rangePart.value) list.push(rangePart.value.x);
+			return list;
+		});
+		const xWindow = shallowRef(null);
+		const yWindow = shallowRef(null);
+		/** What was last given to the models, to tell it from a value set by the page. */
+		let sentX = null;
+		let sentY = null;
+		watch(() => [xModels.value[0]?.value, model.value], ([value]) => {
+			const raw = value ? toRaw(value) : null;
+			if (raw === sentX && raw !== null) return;
+			const m = model.value;
+			xWindow.value = intervalToWindow(raw, m.xKind, m.categories);
+		}, { immediate: true });
+		watch(() => zoomAxes.value.y ? zoomPart.value?.y.value : null, (value) => {
+			const raw = value ? toRaw(value) : null;
+			if (raw === sentY && raw !== null) return;
+			yWindow.value = intervalToWindow(raw, "linear", []);
+		}, { immediate: true });
+		/** The y axis that zooming the values follows: `y`, or `y2` when it is alone. */
+		const primaryY = (l) => l.y.y ?? l.y.y2;
+		/** The least that can be shown: one category, a few of the closest x values, a thousandth of the values. */
+		const leastX = computed(() => {
+			const m = model.value;
+			if (m.xKind === "category") return 1;
+			let gap = Infinity;
+			for (const s of m.series) {
+				const g = smallestGap(s.x.values);
+				if (g < gap) gap = g;
+			}
+			const span = m.x ? m.x[1] - m.x[0] : 1;
+			return gap < Infinity ? gap * 4 : span / 1e3;
+		});
+		const sameInterval = (a, b) => a === b || !!a && !!b && a.every((v, i) => +v === +b[i] || v === b[i] && typeof v === "string");
+		/** Shows `window` of x (`null` for all of it); `settle` moves a drag over categories to whole ones. */
+		function showX(window, settle = false) {
+			const l = layout.value;
+			if (!l) return;
+			const m = model.value;
+			const category = m.xKind === "category";
+			let next = window && clampWindow(window, l.x.full, leastX.value);
+			if (next && settle && category) next = clampWindow(snapCategories(next), l.x.full, 1);
+			xWindow.value = next;
+			let interval = next ? windowToInterval(next, m.xKind, m.categories) : null;
+			if (interval && next && m.xKind === "linear") interval = rounded(next);
+			const last = sentX;
+			for (const kept of xModels.value) {
+				if (sameInterval(interval, kept.value) && sameInterval(interval, last)) continue;
+				sentX = interval;
+				kept.value = interval;
+			}
+		}
+		/** Shows `window` of the values (on `y`, or `y2` alone); `null` for all of them. */
+		function showY(window) {
+			const l = layout.value;
+			const axis = l && primaryY(l);
+			const part = zoomPart.value;
+			if (!axis || !part) return;
+			const units = unitsOf(axis.scale);
+			const span = units.to(axis.full[1]) - units.to(axis.full[0]);
+			const next = window && clampWindow(window, axis.full, span / 1e3, units);
+			yWindow.value = next;
+			const interval = next ? rounded(next) : null;
+			if (sameInterval(interval, part.y.value) && sameInterval(interval, sentY)) return;
+			sentY = interval;
+			part.y.value = interval;
+		}
+		/** A window of numbers as given back: a thousandth of its span is as fine as it gets, not 62.1344726775542. */
+		function rounded([a, b]) {
+			const span = Math.abs(b - a);
+			const digits = span > 0 ? Math.min(12, Math.max(0, Math.ceil(-Math.log10(span / 1e3)))) : 0;
+			return [Number(a.toFixed(digits)), Number(b.toFixed(digits))];
+		}
+		const zoomed = computed(() => !!xWindow.value || !!yWindow.value);
+		/** Where a point is along x, and along the values, in px. */
+		const alongX = ([px, py]) => props.horizontal ? py : px;
+		const alongY = ([px, py]) => props.horizontal ? px : py;
+		/** A scale like `like` over `window`. */
+		function scaleOver(window, like) {
+			if (like.kind === "log") return logScale(window, like.range);
+			return linearScale(window, like.range);
+		}
+		function scalesNow() {
+			const l = layout.value;
+			return l && {
+				x: l.x.scale,
+				y: primaryY(l)?.scale ?? null
+			};
+		}
+		/** Zooms by `factor` (below 1 is in) about `at`; from `from`, the scales as they were. */
+		function zoomBy(factor, at, from = scalesNow()) {
+			if (!from) return;
+			if (zoomAxes.value.x) showX(zoomWindow(from.x, alongX(at), factor));
+			if (zoomAxes.value.y && from.y) showY(zoomWindow(from.y, alongY(at), factor));
+		}
+		/** Moves what is shown with a drag of `by` px; from `from`, the scales as the drag started. */
+		function panBy(by, from = scalesNow()) {
+			if (!from) return;
+			if (zoomAxes.value.x && xWindow.value) showX(panWindow(from.x, -alongX(by)));
+			if (zoomAxes.value.y && yWindow.value && from.y) showY(panWindow(from.y, -alongY(by)));
+		}
+		function resetZoom(announce = false) {
+			if (!zoomed.value) return;
+			showX(null);
+			if (zoomPart.value) showY(null);
+			if (announce) zoomNote.value = messages.value.zoomReset;
+		}
+		/** Read out after zooming with the keys. */
+		const zoomNote = ref("");
+		/** Below this width, a legend down the right side goes under the chart: it would leave the plot too narrow. */
+		const legendPlacement = computed(() => {
+			const asked = props.legendPlacement ?? "bottom";
+			return asked === "right" && size.width.value && size.width.value < LEGEND_SIDE_LEAST ? "bottom" : asked;
+		});
+		const layout = computed(() => {
+			const width = size.width.value;
+			const height = size.height.value;
+			if (!width || !height || pie.value || tree.value || radar.value || funnel.value) return null;
+			themeVersion.value;
+			return layoutChart({
+				model: model.value,
+				axes: axes.value,
+				horizontal: props.horizontal,
+				width,
+				height,
+				locale: locale.value.name,
+				measure,
+				legend: legendNames.value,
+				coarse: coarse.value,
+				legendPlacement: legendPlacement.value,
+				zoom: {
+					x: xWindow.value,
+					y: zoomAxes.value.y ? yWindow.value : null
+				},
+				strip: !!rangePart.value && !empty.value,
+				trailing: endLabelRoom.value
+			});
+		});
+		const pieLayout = computed(() => {
+			const width = size.width.value;
+			const height = size.height.value;
+			if (!width || !height || !pie.value) return null;
+			themeVersion.value;
+			return layoutPie({
+				width,
+				height,
+				measure,
+				legend: legendNames.value,
+				coarse: coarse.value,
+				legendPlacement: legendPlacement.value,
+				sideLabels: pieLabelsOutside.value ? pieSideWidths.value : void 0,
+				arc: pieArc.value
+			});
+		});
+		const radarLayout = computed(() => {
+			const width = size.width.value;
+			const height = size.height.value;
+			if (!width || !height || !radar.value) return null;
+			themeVersion.value;
+			const m = model.value;
+			return layoutRadar({
+				model: m,
+				axes: axes.value,
+				width,
+				height,
+				locale: locale.value.name,
+				measure,
+				legend: legendNames.value,
+				coarse: coarse.value,
+				legendPlacement: legendPlacement.value,
+				spokes: m.categories.map((_, i) => xText(i))
+			});
+		});
+		/** The funnel drawn: the first one, if the chart is a funnel. */
+		const funnelSeries = computed(() => funnel.value ? series.value.find((s) => s.kind.funnel) ?? null : null);
+		/** Each stage's value (`NaN` without one), and its share of the stage before it and of the first. */
+		const funnelStages = computed(() => {
+			const s = funnelSeries.value;
+			const n = model.value.categories.length;
+			const values = Array.from({ length: n }, () => NaN);
+			if (s) for (let i = 0; i < s.y.length; i++) {
+				const x = s.x.values[i];
+				if (x === x && s.y[i] === s.y[i]) values[x] = s.y[i];
+			}
+			const first = values.find((v) => v === v);
+			return values.map((value, k) => {
+				const before = k > 0 ? values[k - 1] : NaN;
+				return {
+					value,
+					row: s ? rowAt(s.x.values, k) : -1,
+					step: k > 0 && before > 0 && value === value ? value / before : null,
+					total: first !== void 0 && first > 0 && value === value ? value / first : null
+				};
+			});
+		});
+		const funnelLayout = computed(() => {
+			const width = size.width.value;
+			const height = size.height.value;
+			const s = funnelSeries.value;
+			if (!width || !height || !s) return null;
+			themeVersion.value;
+			const stages = funnelStages.value;
+			return layoutFunnel({
+				width,
+				height,
+				measure,
+				legend: legendNames.value,
+				coarse: coarse.value,
+				legendPlacement: legendPlacement.value,
+				stages: model.value.categories.map((_, i) => xText(i)),
+				values: stages.map((stage) => stage.row < 0 ? "" : seriesText(s, stage.row)),
+				rates: stages.map((stage) => stage.step === null ? null : rate.value.format(stage.step)),
+				max: Math.max(0, ...stages.map((stage) => stage.value === stage.value ? stage.value : 0))
+			});
+		});
+		/** A marker's x as a number on the x scale: one, or the two ends of a band; `undefined` when it can't be read. */
+		function markerX(x) {
+			if (x === void 0 || x === null) return null;
+			const m = model.value;
+			if (Array.isArray(x)) {
+				const [a, b] = x;
+				if (m.xKind !== "category" && valueToNumber(a, m.xKind, m.categories) === valueToNumber(b, m.xKind, m.categories)) return markerX(a);
+				return intervalToWindow(x, m.xKind, m.categories) ?? void 0;
+			}
+			const at = valueToNumber(x, m.xKind, m.categories);
+			return at === at ? at : void 0;
+		}
+		const placedMarkers = computed(() => {
+			const l = layout.value;
+			if (!l || empty.value || !markerParts.value.length) return [];
+			const inputs = [];
+			for (const part of markerParts.value) {
+				const p = part.props;
+				const x = markerX(p.x);
+				if (x === void 0) continue;
+				inputs.push({
+					x,
+					y: p.y ?? null,
+					axis: p.axis ?? defaultAxis.value,
+					label: p.label,
+					tone: p.tone ?? "neutral",
+					solid: p.dashed === false
+				});
+			}
+			return placeMarkers(inputs, {
+				plot: l.plot,
+				x: l.x.scale,
+				y: (axis) => l.y[axis]?.scale ?? null,
+				horizontal: !!props.horizontal,
+				measure
+			});
+		});
+		/** The markers' labels, as text over the chart. */
+		const markerLabels = computed(() => placedMarkers.value.flatMap((marker, i) => marker.label ? [{
+			...marker.label,
+			key: `marker:${i}`,
+			tone: marker.tone,
+			backdrop: true
+		}] : []));
+		function labelText(s, row) {
+			const given = s.props.labels;
+			const value = s.y[row];
+			if (value !== value) return null;
+			const share = s.stackEnds && declaredAxes.value[s.axis]?.percent ? Math.abs(s.top[row] - s.base[row]) : void 0;
+			if (typeof given === "function") {
+				const text = given({
+					value,
+					share,
+					low: s.base && !s.stackEnds && !s.kind.waterfall ? s.base[row] : void 0,
+					name: s.name,
+					row: rowOf(s.rows, row),
+					index: row
+				});
+				return text == null || text === "" ? null : String(text);
+			}
+			if (s.kind.categoryY) return heatText(s)(value);
+			if (s.kind.waterfall && !isTotal(s, row)) return signed(valueText(s.axis), value);
+			if (share !== void 0) {
+				const own = declaredAxes.value[s.axis]?.format;
+				return own ? own(share) : percent.value.format(share);
+			}
+			return valueText(s.axis)(value);
+		}
+		/** Series with labels at the end of their line: the room they need past the plot, in px. */
+		const endLabelRoom = computed(() => {
+			if (pie.value || props.horizontal) return 0;
+			let widest = 0;
+			for (const part of seriesParts.value) {
+				const p = part.props;
+				if (!p.labels || p.labelPosition !== "end" || part.hidden.value) continue;
+				const s = series.value.find((x) => x.props === part.props);
+				if (!s) continue;
+				for (let i = s.y.length - 1; i >= 0; i--) {
+					const text = s.y[i] === s.y[i] ? labelText(s, i) : null;
+					if (text === null) continue;
+					widest = Math.max(widest, measure(text));
+					break;
+				}
+			}
+			return widest ? Math.ceil(widest) + 8 : 0;
+		});
+		/** The most of the chart's width a pie's labels outside may take, each side. */
+		const pieLabelParts = computed(() => {
+			const part = pie.value;
+			const given = part?.props.labels;
+			if (!part || !given) return [];
+			return slices.value.map((slice) => {
+				if (slice.hidden) return null;
+				const share = percent.value.format(slice.share);
+				if (typeof given !== "function") return {
+					name: slice.label,
+					share
+				};
+				const text = given({
+					value: slice.value,
+					share: slice.share,
+					name: slice.label,
+					row: rowOf(part.props.data ?? props.data, slice.index),
+					index: slice.index
+				});
+				return text == null || text === "" ? null : {
+					text: String(text),
+					name: slice.label,
+					share
+				};
+			});
+		});
+		const outsideText = (p) => p.text ?? `${p.name} ${p.share}`;
+		/** Which side of the pie a slice's label goes, outside it. */
+		const sideOf = (slice) => Math.sin((slice.start + slice.end) / 2) >= 0 ? "right" : "left";
+		/** The widest label outside the pie on each side, at most a share of the chart's width. */
+		const pieSideWidths = computed(() => {
+			const widths = {
+				left: 0,
+				right: 0
+			};
+			const cap = size.width.value * PIE_LABEL_SHARE;
+			slices.value.forEach((slice, k) => {
+				const p = pieLabelParts.value[k];
+				if (!p || !(slice.end > slice.start)) return;
+				const side = sideOf(slice);
+				widths[side] = Math.max(widths[side], Math.ceil(Math.min(cap, measure(outsideText(p)))));
+			});
+			return widths;
+		});
+		/**
+		* Whether the pie's labels go outside it: as asked (the default), unless
+		* the room they take would leave the pie too small; then inside, where
+		* slices fit them.
+		*/
+		const pieLabelsOutside = computed(() => {
+			const part = pie.value;
+			if (!part?.props.labels || (part.props.labelPosition ?? "outside") !== "outside") return false;
+			const width = size.width.value;
+			const height = size.height.value;
+			if (!width || !height) return true;
+			themeVersion.value;
+			const base = {
+				width,
+				height,
+				measure,
+				legend: legendNames.value,
+				coarse: coarse.value,
+				legendPlacement: legendPlacement.value,
+				arc: pieArc.value
+			};
+			const alone = layoutPie(base).radius;
+			return layoutPie({
+				...base,
+				sideLabels: pieSideWidths.value
+			}).radius >= Math.min(alone * PIE_LEAST, PIE_LEAST_RADIUS);
+		});
+		/** Each slice's label text, by its place in `slices`; `null` for none. */
+		const pieTexts = computed(() => {
+			const outside = pieLabelsOutside.value;
+			return pieLabelParts.value.map((p) => !p ? null : outside ? outsideText(p) : p.text ?? p.share);
+		});
+		/** A line from a slice out to its label, in px. */
+		const pieLabels = computed(() => {
+			const l = pieLayout.value;
+			const texts = pieTexts.value;
+			const out = {
+				labels: [],
+				leaders: []
+			};
+			if (!l || !texts.length || empty.value) return out;
+			themeVersion.value;
+			const { cx, cy, radius } = l;
+			const list = slices.value;
+			if (!pieLabelsOutside.value) {
+				const inner = radius * holeRatio.value;
+				list.forEach((slice, k) => {
+					const text = texts[k];
+					if (!text || !(slice.end > slice.start)) return;
+					const outer = sliceOuter(slice, inner, radius);
+					const at = inner > 0 ? (outer + inner) / 2 : outer * .62;
+					const thickness = outer - inner;
+					const width = measure(text);
+					if ((slice.end - slice.start) * at < width + 8 || thickness < 20) return;
+					const middle = (slice.start + slice.end) / 2;
+					out.labels.push({
+						key: `slice:${slice.index}`,
+						series: -1,
+						text,
+						left: cx + Math.sin(middle) * at,
+						top: cy - Math.cos(middle) * at - 8,
+						align: "middle",
+						on: sliceColors.value[k],
+						ink: inkOn(sliceColors.value[k])
+					});
+				});
+				return out;
+			}
+			const widths = pieSideWidths.value;
+			const room = {
+				top: EDGE_ROOM,
+				bottom: l.bottom + EDGE_ROOM
+			};
+			const sides = {
+				left: [],
+				right: []
+			};
+			list.forEach((slice, k) => {
+				if (!texts[k] || !(slice.end > slice.start)) return;
+				const middle = (slice.start + slice.end) / 2;
+				const side = sideOf(slice);
+				sides[side].push({
+					k,
+					y: cy - Math.cos(middle) * (radius + 10),
+					middle
+				});
+			});
+			const capacity = Math.max(1, Math.floor((room.bottom - room.top) / 16));
+			for (const side of ["left", "right"]) {
+				let items = sides[side];
+				if (items.length > capacity) {
+					const kept = [...items];
+					kept.sort((a, b) => list[b.k].share - list[a.k].share);
+					const keep = new Set(kept.slice(0, capacity));
+					items = items.filter((item) => keep.has(item));
+				}
+				const centers = spread(items.map((item) => item.y), 16, room.top, room.bottom);
+				const right = side === "right";
+				const widest = widths[side];
+				const column = right ? cx + radius + 24 : cx - radius - 24;
+				items.forEach((item, n) => {
+					const y = centers[n];
+					const sin = Math.sin(item.middle);
+					const cos = Math.cos(item.middle);
+					const end = column + (right ? -4 : 4);
+					const clear = Math.sqrt(Math.max(0, (radius + 8) ** 2 - (y - cy) ** 2));
+					const reach = Math.max(Math.abs(sin) * (radius + 10), clear);
+					const turn = right ? Math.min(cx + reach, end) : Math.max(cx - reach, end);
+					const hole = radius * holeRatio.value;
+					const edge = sliceOuter(list[item.k], hole, radius);
+					out.leaders.push([
+						[cx + sin * (edge + 2), cy - cos * (edge + 2)],
+						[turn, y],
+						[end, y]
+					]);
+					const text = texts[item.k];
+					const parts = pieLabelParts.value[item.k];
+					const long = measure(text) > widest + .5;
+					const fitted = long && parts.text === void 0 ? `${fitText(parts.name, widest - measure(` ${parts.share}`))} ${parts.share}` : text;
+					const cut = long && fitted === text;
+					out.labels.push({
+						key: `slice:${list[item.k].index}`,
+						series: -1,
+						text: fitted,
+						left: column,
+						top: y - 8,
+						align: right ? "start" : "end",
+						width: cut ? widest : void 0
+					});
+				});
+			}
+			return out;
+		});
+		/** Room kept clear at the chart's top and bottom edges, in px. */
+		const labelsShown = ref(false);
+		/** The data labels, placed: the ends of lines first, then the bars', then the points'. */
+		const dataLabels = computed(() => {
+			if (pie.value) return pieLabels.value.labels;
+			if (tree.value) return treeLabels.value;
+			const l = layout.value;
+			if (!l || empty.value) return [];
+			themeVersion.value;
+			const { plot } = l;
+			const bounds = {
+				x: plot.x - 4,
+				y: plot.y - 4,
+				width: plot.width + 8,
+				height: plot.height + 8
+			};
+			const ends = [];
+			const bars = [];
+			const points = [];
+			for (const s of series.value) {
+				const p = s.props;
+				if (!p.labels || !s.kind.labels) continue;
+				const view = viewOf(s);
+				if (!view) continue;
+				const lineWidth = p.lineWidth ?? 2;
+				const offset = s.kind.band ? 0 : Math.max(2.5, lineWidth + .5);
+				for (const anchor of s.kind.labels(s, view).slice(0, 1e3)) {
+					const text = labelText(s, anchor.index);
+					if (text === null) continue;
+					const input = {
+						key: `${s.index}:${anchor.index}`,
+						series: s.index,
+						text,
+						anchor,
+						offset
+					};
+					if (p.labelPosition === "end") ends.push({
+						input,
+						s
+					});
+					else if (s.kind.band) bars.push(input);
+					else points.push(input);
+				}
+			}
+			const taken = [];
+			const out = [];
+			if (ends.length) {
+				const centers = spread(ends.map((e) => e.input.anchor.at[1]), 16, plot.y - 4, plot.y + plot.height + 4);
+				ends.forEach(({ input, s }, k) => {
+					const left = input.anchor.at[0] + 4 + (input.offset ?? 0);
+					const top = centers[k] - 8;
+					taken.push([
+						left,
+						top,
+						left + measure(input.text),
+						top + 16
+					]);
+					out.push({
+						key: input.key,
+						series: s.index,
+						text: input.text,
+						left,
+						top,
+						align: "start",
+						ink: s.color
+					});
+				});
+			}
+			for (const label of placeDataLabels(bars, bounds, measure, taken)) out.push({
+				...label,
+				ink: label.on && inkOn(label.on)
+			});
+			out.push(...placeDataLabels(points, bounds, measure, taken));
+			return out;
+		});
+		/** Text that reads on a bar of `color`: the page's text color or its surface, whichever stands out more. */
+		function inkOn(color) {
+			const bar = luminance(resolveColor(color));
+			const text = luminance(resolveColor("var(--dou-color-text)"));
+			const surface = luminance(resolveColor("var(--dou-chart-surface)"));
+			if (bar === null || text === null || surface === null) return "var(--dou-color-text)";
+			return contrast(bar, text) >= contrast(bar, surface) ? "var(--dou-color-text)" : "var(--dou-chart-surface)";
+		}
+		const markerText = (tone) => tone === "neutral" ? "var(--dou-color-text-secondary)" : `var(--dou-color-${tone}-text)`;
+		const markerColors = computed(() => {
+			themeVersion.value;
+			const surface = colors.value.surface;
+			const of = (line, dot, fill) => ({
+				line: resolveColor(line),
+				dot: resolveColor(dot),
+				fill: resolveColor(fill),
+				surface
+			});
+			const tone = (name) => of(`var(--dou-color-${name})`, `var(--dou-color-${name})`, `color-mix(in oklab, var(--dou-color-${name}) 10%, transparent)`);
+			return {
+				neutral: of("var(--dou-chart-marker)", "var(--dou-color-text-secondary)", "color-mix(in oklab, var(--dou-color-text) 5%, transparent)"),
+				primary: tone("primary"),
+				success: tone("success"),
+				warning: tone("warning"),
+				danger: tone("danger")
+			};
+		});
+		const tooltipPart = computed(() => tooltipParts.value[0] ?? null);
+		/** Whether the chart follows the pointer and can be focused. */
+		const interactive = computed(() => !tooltipPart.value?.props.disabled && !empty.value && !props.table && !pie.value?.gauge);
+		const trigger = computed(() => tooltipPart.value?.props.trigger ?? (pie.value || tree.value || series.value.some((s) => s.kind.tooltip === "item") ? "item" : "axis"));
+		/** An x (with every series at it), one point of a series, or a slice. */
+		const active = shallowRef(null);
+		/** What is under `(px, py)`, in px from the chart's top left. */
+		function hitAt(px, py) {
+			const tl = treeLayout.value;
+			if (tl && treeData.value) {
+				const root = treeData.value.root;
+				let node;
+				if (tree.value?.shape === "treemap") node = treemapAt(root, px, py);
+				else {
+					const r = Math.hypot(px - tl.cx, py - tl.cy);
+					node = r < tl.inner || r > tl.radius ? null : sunburstAt(root, angleAt(tl.cx, tl.cy, px, py), r);
+				}
+				return node ? {
+					type: "slice",
+					slice: node.index
+				} : null;
+			}
+			const p = pieLayout.value;
+			if (p) {
+				const r = Math.hypot(px - p.cx, py - p.cy);
+				const inner = p.radius * holeRatio.value;
+				if (r > p.radius || r < inner) return null;
+				let angle = angleAt(p.cx, p.cy, px, py);
+				while (angle < pieArc.value[0]) angle += Math.PI * 2;
+				while (angle >= pieArc.value[0] + Math.PI * 2) angle -= Math.PI * 2;
+				const k = slices.value.findIndex((s) => !s.hidden && angle >= s.start && angle < s.end && r <= sliceOuter(s, inner, p.radius));
+				return k < 0 ? null : {
+					type: "slice",
+					slice: k
+				};
+			}
+			const f = funnelLayout.value;
+			if (f) {
+				const k = Math.floor((py - f.plot.y) / f.step);
+				if (k < 0 || k >= f.count || funnelStages.value[k].row < 0) return null;
+				return {
+					type: "axis",
+					x: k
+				};
+			}
+			const r = radarLayout.value;
+			if (r) {
+				if (!r.count || Math.hypot(px - r.cx, py - r.cy) > r.radius + 16) return null;
+				return {
+					type: "axis",
+					x: nearestSpoke(angleAt(r.cx, r.cy, px, py), r.count)
+				};
+			}
+			const l = layout.value;
+			if (!l) return null;
+			const { plot } = l;
+			const room = trigger.value === "item" ? 8 : 0;
+			if (px < plot.x - room || px > plot.x + plot.width + room) return null;
+			if (py < plot.y - room || py > plot.y + plot.height + room) return null;
+			if (trigger.value === "axis") {
+				const along = props.horizontal ? py : px;
+				const x = nearestX(series.value.map((s) => s.x.values), l.x.scale, along);
+				if (x === null) return null;
+				const at = l.x.scale.map(x);
+				const [r0, r1] = l.x.scale.range;
+				return at < Math.min(r0, r1) - .5 || at > Math.max(r0, r1) + .5 ? null : {
+					type: "axis",
+					x
+				};
+			}
+			for (let k = series.value.length - 1; k >= 0; k--) {
+				const s = series.value[k];
+				const view = viewOf(s);
+				if (!view) continue;
+				const hit = s.kind.hit ? s.kind.hit(s, view, px, py) : nearestOf(s, view, px, py);
+				if (!hit) continue;
+				const [left, top] = view.point(s.x.values[hit.index], s.top[hit.index]);
+				if (left < plot.x - 4 || left > plot.x + plot.width + 4) continue;
+				if (top < plot.y - 4 || top > plot.y + plot.height + 4) continue;
+				return {
+					type: "item",
+					series: s.index,
+					row: hit.index,
+					radius: hit.radius
+				};
+			}
+			return null;
+		}
+		/** How near a line the pointer comes before its series is brought forward, in px. */
+		const pointed = computed(() => {
+			const a = active.value;
+			if (!a?.pointer || pie.value || radar.value || funnel.value || series.value.length < 2) return null;
+			if (a.type === "item") return a.series;
+			if (a.type !== "axis") return null;
+			const along = alongX(a.pointer);
+			const value = alongY(a.pointer);
+			let near = null;
+			let over = null;
+			for (const s of series.value) {
+				const row = rowAt(s.x.values, a.x);
+				const view = row < 0 ? null : viewOf(s);
+				const top = view ? s.top[row] : NaN;
+				if (!view || top !== top) continue;
+				const end = alongY(view.point(a.x, top));
+				if (s.kind.band) {
+					const { offset, width } = barPlacement(view.band, s.slot);
+					const u = view.x.map(a.x) + offset;
+					const start = s.base ? view.y.map(s.base[row]) : baseline(view.y);
+					if (along >= u && along <= u + width && value >= Math.min(start, end) && value <= Math.max(start, end)) over = s.index;
+					continue;
+				}
+				const distance = Math.abs(value - end);
+				if (distance <= NEAR_LINE && (!near || distance < near.distance)) near = {
+					index: s.index,
+					distance
+				};
+				if (s.kind.zero && !s.kind.band) {
+					const start = s.base ? view.y.map(s.base[row]) : baseline(view.y);
+					if (value >= Math.min(start, end) && value <= Math.max(start, end)) over = s.index;
+				}
+			}
+			return near?.index ?? over;
+		});
+		/** The point of `s` nearest to `(px, py)`, within 12px. */
+		function nearestOf(s, view, px, py) {
+			const xs = s.x.values;
+			const hit = nearestPoint(Math.min(xs.length, s.top.length), (i) => xs[i] === xs[i] && s.top[i] === s.top[i] ? view.point(xs[i], s.top[i]) : null, px, py, () => 12);
+			return hit && {
+				index: hit.index,
+				radius: 4
+			};
+		}
+		const percent = computed(() => new Intl.NumberFormat(locale.value.name, {
+			style: "percent",
+			maximumFractionDigits: 1
+		}));
+		/** A funnel's rates: always one decimal, so a column of them lines up. */
+		const rate = computed(() => new Intl.NumberFormat(locale.value.name, {
+			style: "percent",
+			minimumFractionDigits: 1,
+			maximumFractionDigits: 1
+		}));
+		/** What is shown for the active x, point or slice. */
+		const tip = computed(() => {
+			if (!interactive.value) return null;
+			const t = tipOf(active.value);
+			return t && active.value?.touch ? {
+				...t,
+				above: true
+			} : t;
+		});
+		function tipOf(a) {
+			if (!a) return null;
+			if (a.type === "slice" && tree.value) return treeTip(a.slice, a.pointer);
+			if (a.type === "slice") {
+				const p = pieLayout.value;
+				const slice = slices.value[a.slice];
+				if (!p || !slice || slice.hidden) return null;
+				const middle = (slice.start + slice.end) / 2;
+				const inner = p.radius * holeRatio.value;
+				const outer = sliceOuter(slice, inner, p.radius);
+				const at = inner > 0 ? (inner + outer) / 2 : outer * .6;
+				const off = slices.value.length - shownSlices.value.length;
+				return {
+					x: slice.label,
+					note: off ? format(messages.value.hiddenSlices, { count: off }) : void 0,
+					items: [{
+						name: slice.label,
+						text: format(messages.value.share, {
+							value: numberFormatFull(locale.value.name)(slice.value),
+							share: percent.value.format(slice.share)
+						}),
+						value: slice.value,
+						color: sliceColors.value[a.slice],
+						row: rowOf(pie.value.props.data ?? props.data, slice.index)
+					}],
+					anchor: a.pointer ?? [p.cx + Math.sin(middle) * at, p.cy - Math.cos(middle) * at],
+					marks: []
+				};
+			}
+			if (a.type === "axis" && radarLayout.value) return radarTip(radarLayout.value, a);
+			if (a.type === "axis" && funnelLayout.value) return funnelTip(funnelLayout.value, a);
+			const l = layout.value;
+			if (!l) return null;
+			const { plot } = l;
+			const horizontal = !!props.horizontal;
+			if (a.type === "item") {
+				const s = series.value.find((x) => x.index === a.series);
+				const view = s && viewOf(s);
+				if (!s || !view) return null;
+				const x = s.x.values[a.row];
+				const y = s.y[a.row];
+				if (x !== x || y !== y) return null;
+				const [left, top] = view.point(x, s.top[a.row]);
+				if (s.kind.categoryY) return heatTip(s, view, a.row, x, left, top);
+				const items = [{
+					name: axes.value.x.title ?? "x",
+					text: xText(x),
+					value: m0x() ? x : void 0
+				}, {
+					name: axes.value[s.axis]?.title ?? (s.axis === "y2" ? "y2" : "y"),
+					text: seriesText(s, a.row),
+					value: y,
+					color: s.colors?.[a.row] ?? s.color
+				}];
+				const sizeOf = s.props.size;
+				if (sizeOf !== void 0) {
+					const value = Number(read(rowOf(s.rows, a.row), sizeOf, a.row));
+					const name = s.props.sizeName ?? (typeof sizeOf === "string" ? sizeOf : "");
+					if (value === value) items.push({
+						name,
+						text: numberFormatFull(locale.value.name)(value),
+						value
+					});
+				}
+				for (const item of items) item.row = rowOf(s.rows, a.row);
+				const label = s.props.label;
+				const own = label === void 0 ? null : read(rowOf(s.rows, a.row), label, a.row);
+				return {
+					x: rawX(x),
+					title: own == null || own === "" ? s.name : String(own),
+					items,
+					anchor: [left, top],
+					marks: [{
+						left,
+						top,
+						color: s.colors?.[a.row] ?? s.color,
+						radius: a.radius + 3,
+						ring: true
+					}]
+				};
+			}
+			const x = a.x;
+			const at = l.x.scale.map(x);
+			const items = [];
+			/** The series under the pointer, brought forward. */
+			const under = pointed.value;
+			/** The series of each item. */
+			const owners = [];
+			const marks = [];
+			let band = false;
+			/** A title of a series' own (a histogram's bin), in place of the x. */
+			let title;
+			for (const s of series.value) {
+				const row = rowAt(s.x.values, x);
+				const view = viewOf(s);
+				if (row < 0 || !view) continue;
+				const y = s.y[row];
+				if (y !== y) continue;
+				title ??= s.kind.xTitle?.(s, row, xText);
+				if (s.kind.box) {
+					const own = boxItems(s, row);
+					items.push(...own);
+					for (const _ of own) owners.push(s.index);
+					band = true;
+					continue;
+				}
+				items.push({
+					name: s.name,
+					text: seriesText(s, row),
+					value: y,
+					color: s.colors?.[row] ?? s.color,
+					row: rowOf(s.rows, row)
+				});
+				owners.push(s.index);
+				if (s.kind.band) band = true;
+				else {
+					const [left, top] = view.point(x, s.top[row]);
+					marks.push({
+						left,
+						top,
+						color: s.colors?.[row] ?? s.color,
+						radius: 4,
+						ring: false,
+						faded: under !== null && s.index !== under
+					});
+				}
+			}
+			if (!items.length) return null;
+			if (under !== null && items.length > 1) {
+				for (let k = 0; k < owners.length; k++) if (owners[k] === under) items[k].active = true;
+			}
+			const crosshair = tooltipPart.value?.props.crosshair ?? true;
+			const room = band ? viewOf(series.value[0])?.band ?? 0 : 1;
+			const across = (start, length) => horizontal ? {
+				x: plot.x,
+				y: start,
+				width: plot.width,
+				height: length
+			} : {
+				x: start,
+				y: plot.y,
+				width: length,
+				height: plot.height
+			};
+			const dpr = dprNow();
+			const line = crisp(at, dpr) - .5;
+			let anchor = a.pointer;
+			if (!anchor) {
+				if (horizontal) anchor = [marks.length ? Math.max(...marks.map((m) => m.left)) : plot.x + plot.width / 2, at];
+				else anchor = [at, marks.length ? Math.min(...marks.map((m) => m.top)) : plot.y + plot.height / 2];
+			}
+			const width = band ? room : 24;
+			return {
+				x: rawX(x),
+				title: title ?? xText(x),
+				items,
+				focused: items.some((item) => item.active),
+				anchor,
+				clear: a.touch ? across(at - width / 2, width) : void 0,
+				marks,
+				band: crosshair && band ? across(at - room / 2, room) : void 0,
+				line: crosshair && !band ? across(line, 1) : void 0
+			};
+		}
+		/** A funnel stage's tooltip: its value, and what it kept of the stage before and of the first; its row shaded. */
+		function funnelTip(f, a) {
+			const s = funnelSeries.value;
+			const stage = funnelStages.value[a.x];
+			if (!s || !stage || stage.row < 0) return null;
+			const m = messages.value;
+			const row = rowOf(s.rows, stage.row);
+			const items = [{
+				name: s.name,
+				text: seriesText(s, stage.row),
+				value: stage.value,
+				color: s.color,
+				row
+			}];
+			if (stage.step !== null) items.push({
+				name: m.stageRate,
+				text: rate.value.format(stage.step),
+				value: stage.step,
+				row
+			});
+			if (stage.total !== null && a.x > 0) items.push({
+				name: m.totalRate,
+				text: rate.value.format(stage.total),
+				value: stage.total,
+				row
+			});
+			const top = f.plot.y + f.step * a.x;
+			const texts = [
+				...f.names,
+				...f.values,
+				...f.rates
+			];
+			const from = Math.min(f.plot.x, ...texts.map((t) => t.left)) - 4;
+			const to = Math.max(f.plot.x + f.plot.width, ...texts.map((t) => t.left + t.width)) + 4;
+			const [right, middle] = funnelView(f, dprNow(), false).point(a.x, stage.value);
+			return {
+				x: rawX(a.x),
+				title: xText(a.x),
+				items,
+				anchor: a.pointer ?? [right, middle],
+				marks: [],
+				band: {
+					x: from,
+					y: top,
+					width: to - from,
+					height: f.step
+				}
+			};
+		}
+		/** A radar's tooltip: every series along one spoke, a dot on each, beside the outermost. */
+		function radarTip(r, a) {
+			const x = a.x;
+			const items = [];
+			const marks = [];
+			const view = radarView(r, dprNow(), false);
+			let far = null;
+			let farthest = -1;
+			for (const s of series.value) {
+				const row = rowAt(s.x.values, x);
+				if (row < 0) continue;
+				const y = s.y[row];
+				if (y !== y) continue;
+				items.push({
+					name: s.name,
+					text: seriesText(s, row),
+					value: y,
+					color: s.color,
+					row: rowOf(s.rows, row)
+				});
+				const [left, top] = view.point(x, s.top[row]);
+				marks.push({
+					left,
+					top,
+					color: s.color,
+					radius: 4,
+					ring: false
+				});
+				const out = Math.hypot(left - r.cx, top - r.cy);
+				if (out > farthest) {
+					farthest = out;
+					far = [left, top];
+				}
+			}
+			if (!items.length) return null;
+			return {
+				x: rawX(x),
+				title: xText(x),
+				items,
+				anchor: a.pointer ?? far ?? [r.cx, r.cy],
+				marks
+			};
+		}
+		/**
+		* A box plot's numbers in the tooltip, top to bottom as drawn, and how many
+		* values are past the whiskers. Beside other series, each says whose it is.
+		*/
+		function boxItems(s, row) {
+			const box = boxes(s)[row];
+			if (!box) return [];
+			const m = messages.value;
+			const text = valueText(s.axis);
+			const own = series.value.length > 1 ? `${s.name} ` : "";
+			const data = rowOf(s.rows, row);
+			const items = [
+				[m.boxHigh, box.high],
+				[m.boxQ3, box.q3],
+				[m.boxMedian, box.median],
+				[m.boxQ1, box.q1],
+				[m.boxLow, box.low]
+			].map(([name, value]) => ({
+				name: own + name,
+				text: text(value),
+				value,
+				row: data
+			}));
+			items[2].color = s.color;
+			if (box.outliers.length) items.push({
+				name: own + format(m.boxOutliers, { count: box.outliers.length }),
+				text: box.outliers.slice(0, 6).map(text).join(m.nameSeparator) + (box.outliers.length > 6 ? "…" : ""),
+				row: data
+			});
+			return items;
+		}
+		/** A heatmap cell's tooltip: where it is (its x and row) as the title, its value in its color, the cell ringed. */
+		function heatTip(s, view, row, x, left, top) {
+			const value = s.y[row];
+			const range = heatRange(s);
+			const color = range ? heatColor(s.color, colors.value.surface, heatShare(value, range)) : s.color;
+			const item = {
+				name: s.name,
+				text: heatText(s)(value),
+				value,
+				color
+			};
+			item.row = rowOf(s.rows, row);
+			const across = view.band;
+			const down = Math.abs(view.y.map(0) - view.y.map(1));
+			const [width, height] = view.horizontal ? [down, across] : [across, down];
+			const ring = 1;
+			return {
+				x: rawX(x),
+				title: `${yCategoryText(s.axis, s.top[row])}${messages.value.itemSeparator}${xText(x)}`,
+				items: [item],
+				anchor: [left + width / 2, top],
+				marks: [],
+				cell: {
+					x: left - width / 2 - ring,
+					y: top - height / 2 - ring,
+					width: width + 2 - 1,
+					height: height + 2 - 1
+				}
+			};
+		}
+		/** An x as given: the category, a `Date` on a time axis, or the number. */
+		function rawX(x) {
+			const kind = model.value.xKind;
+			return kind === "category" ? model.value.categories[x] : kind === "time" ? new Date(x) : x;
+		}
+		/** What `select` and `hover` give: what the tooltip shows there. */
+		const eventOf = (t) => ({
+			x: t.x,
+			title: t.title,
+			items: t.items
+		});
+		/** Tells the page what was picked: what the tooltip shows there. */
+		function select(t) {
+			emit("select", eventOf(t));
+		}
+		/**
+		* What `hover` tells: what the tooltip shows for this chart's own pointer,
+		* finger or keys. An x shown because another chart of the group points at it
+		* is not hovered here. Worked out only when someone listens; it follows the
+		* data too, so a hovered bar whose data is replaced or changed is told again.
+		*/
+		const hovering = computed(() => {
+			if (!instance?.vnode.props?.onHover) return null;
+			const a = active.value;
+			if (!a || a.synced || !interactive.value) return null;
+			const t = tipOf(a);
+			return t && eventOf(t);
+		});
+		/** The same value: a `Date` by its time. */
+		const sameValue = (a, b) => Object.is(a, b) || a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
+		/** Whether two `hover` events say the same: so a pointer moving over one bar tells it once. */
+		function sameHover(a, b) {
+			if (!a || !b) return a === b;
+			return sameValue(a.x, b.x) && a.title === b.title && a.items.length === b.items.length && a.items.every((item, i) => item.name === b.items[i].name && item.text === b.items[i].text && item.row === b.items[i].row && sameValue(item.value, b.items[i].value));
+		}
+		/** What the page was last told, so it hears each change once. */
+		let hoverTold = null;
+		watch(hovering, (next) => {
+			if (sameHover(next, hoverTold)) return;
+			hoverTold = next;
+			emit("hover", next);
+		});
+		onBeforeUnmount(() => {
+			if (hoverTold) emit("hover", null);
+		});
+		/** Whether anyone listens to `select`: then what can be picked shows a pointing hand. */
+		const selectable = () => !!instance?.vnode.props?.onSelect;
+		function onClick(event) {
+			if (event.target.closest?.("button")) return;
+			if (dragged) {
+				dragged = false;
+				return;
+			}
+			const at = local(event);
+			const kept = selection.value;
+			if (kept && inPlot(at) && !inRect(at, kept)) clearBrush();
+			const target = hitAt(...at);
+			const t = target && tipOf({
+				...target,
+				pointer: at
+			});
+			if (t) select(t);
+		}
+		watch(active, (a) => {
+			const root = rootRef.value;
+			if (root && selectable()) root.style.cursor = a?.pointer && !a.touch ? "pointer" : "";
+		});
+		/** Whether x is a number worth giving as `value` (not a category's index). */
+		const m0x = () => model.value.xKind !== "category";
+		function setActive(next, pointer, touch = false) {
+			const a = active.value;
+			if (!next) {
+				if (a) {
+					active.value = null;
+					if (!a.synced) tellX(null);
+				}
+				zoomNote.value = "";
+				return;
+			}
+			zoomNote.value = "";
+			active.value = {
+				...next,
+				pointer,
+				touch
+			};
+			if (next.type === "axis" && (a?.type !== "axis" || a.x !== next.x || a.synced)) tellX(next.x);
+		}
+		const group = computed(() => tooltipPart.value?.props.group);
+		/** The x of this chart as the group shares it: a category's name, else its number. */
+		function sharedX(x) {
+			return model.value.xKind === "category" ? model.value.categories[x] ?? null : x;
+		}
+		/** Tells the group this chart's x, or that it shows none. */
+		function tellX(x) {
+			const name = group.value;
+			if (name) tellGroup(name, x === null ? null : sharedX(x), follow);
+		}
+		/** Shows the x another chart of the group points at, if this chart has it. */
+		function follow(x) {
+			const a = active.value;
+			if (a && !a.synced) return;
+			const mine = x === null || !interactive.value || trigger.value !== "axis" ? null : localX(x);
+			if (mine === null) {
+				if (a) active.value = null;
+				return;
+			}
+			active.value = {
+				type: "axis",
+				x: mine,
+				pointer: null,
+				synced: true
+			};
+		}
+		/** The x of this chart that `x` from the group names: the same category, or the same number. */
+		function localX(x) {
+			const m = model.value;
+			if (m.xKind === "category") {
+				const k = typeof x === "string" ? m.categories.indexOf(x) : -1;
+				return k < 0 ? null : k;
+			}
+			if (typeof x !== "number") return null;
+			for (const s of series.value) if (rowAt(s.x.values, x) >= 0) return x;
+			return null;
+		}
+		watch(group, (name, _, onCleanup) => {
+			if (name) onCleanup(joinGroup(name, follow));
+		}, { immediate: true });
+		let pointerFrame = 0;
+		let lastPointer = null;
+		function local(event) {
+			const rect = rootRef.value.getBoundingClientRect();
+			return [event.clientX - rect.left, event.clientY - rect.top];
+		}
+		function onPointerMove(event) {
+			if (gesture(event)) return;
+			if (!interactive.value || event.pointerType === "touch") return;
+			lastPointer = local(event);
+			if (pointerFrame || typeof requestAnimationFrame === "undefined") {
+				if (!pointerFrame) followPointer();
+				return;
+			}
+			pointerFrame = requestAnimationFrame(() => {
+				pointerFrame = 0;
+				followPointer();
+			});
+		}
+		function followPointer() {
+			if (!lastPointer || drag?.moved) return;
+			const [x, y] = lastPointer;
+			setActive(hitAt(x, y), lastPointer);
+		}
+		function onPointerLeave(event) {
+			if (event.pointerType === "touch" || drag?.moved) return;
+			lastPointer = null;
+			if (active.value?.pointer) setActive(null, null);
+		}
+		/** A press on the plot that may turn into a pan or a selection. */
+		let drag = null;
+		/** Two fingers on the plot: they zoom about the point between them. */
+		let pinch = null;
+		const fingers = /* @__PURE__ */ new Map();
+		/** The selection being dragged, in px. */
+		const brushDraft = shallowRef(null);
+		/** A drag just ended: the click that follows it isn't one. */
+		let dragged = false;
+		/** How far a press moves before it is a drag, and how long a finger is held to select. */
+		const SLOP = {
+			mouse: 3,
+			touch: 8
+		};
+		function inPlot([px, py]) {
+			const plot = layout.value?.plot;
+			return !!plot && px >= plot.x && px <= plot.x + plot.width && py >= plot.y && py <= plot.y + plot.height;
+		}
+		let tapped = false;
+		function onPointerDown(event) {
+			const touch = event.pointerType === "touch";
+			tapped = touch && interactive.value;
+			if (event.button !== 0 || event.target.closest?.("button")) return;
+			const at = local(event);
+			const from = scalesNow();
+			if (!from || !inPlot(at) || !(zoomOn.value || brushPart.value)) return;
+			if (touch) {
+				fingers.set(event.pointerId, at);
+				if (fingers.size === 2 && zoomOn.value) {
+					startPinch(from);
+					return;
+				}
+				if (fingers.size > 1) return;
+			}
+			const brush = !!brushPart.value;
+			const { sideways, upDown } = panDirections();
+			const mode = touch ? sideways || upDown ? "pan" : null : brush && (event.shiftKey || !zoomOn.value) ? "brush" : zoomOn.value ? "pan" : null;
+			if (!mode && !(touch && brush)) return;
+			const hold = holdPointer(event, rootRef.value);
+			drag = {
+				id: event.pointerId,
+				touch,
+				start: at,
+				mode,
+				moved: false,
+				from,
+				hold,
+				timer: void 0
+			};
+			if (touch && brush) drag.timer = setTimeout(() => {
+				if (!drag || drag.moved) return;
+				drag.mode = "brush";
+				startDrag();
+				brushDraft.value = brushRect(drag.start, drag.start);
+			}, HOLD);
+		}
+		/** The press became a drag: it keeps the pointer, and the tooltip goes. */
+		function startDrag() {
+			if (!drag) return;
+			drag.moved = true;
+			tapped = false;
+			clearTimeout(drag.timer);
+			drag.hold.grab();
+			if (drag.mode === "pan" && rootRef.value) rootRef.value.style.cursor = "grabbing";
+			if (!drag.touch) try {
+				rootRef.value?.setPointerCapture(drag.id);
+			} catch {}
+			setActive(null, null);
+		}
+		function startPinch(from) {
+			endDrag(false);
+			tapped = false;
+			const [a, b] = [...fingers.values()];
+			pinch = {
+				distance: Math.max(1, Math.hypot(a[0] - b[0], a[1] - b[1])),
+				middle: [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2],
+				from
+			};
+			setActive(null, null);
+		}
+		/** Follows a drag or a pinch; `true` when the move was one. */
+		function gesture(event) {
+			if (pinch && fingers.has(event.pointerId)) {
+				fingers.set(event.pointerId, local(event));
+				if (fingers.size < 2) return true;
+				const [a, b] = [...fingers.values()];
+				const distance = Math.max(1, Math.hypot(a[0] - b[0], a[1] - b[1]));
+				const middle = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+				const p = pinch;
+				onceAFrame(() => {
+					const factor = p.distance / distance;
+					const x = zoomWindow(p.from.x, alongX(p.middle), factor);
+					const y = p.from.y && zoomWindow(p.from.y, alongY(p.middle), factor);
+					const by = [middle[0] - p.middle[0], middle[1] - p.middle[1]];
+					if (zoomAxes.value.x) showX(panWindow(scaleOver(x, p.from.x), -alongX(by)));
+					if (zoomAxes.value.y && y && p.from.y) showY(panWindow(scaleOver(y, p.from.y), -alongY(by)));
+				});
+				return true;
+			}
+			if (!drag || event.pointerId !== drag.id) return false;
+			const at = local(event);
+			const d = drag;
+			const by = [at[0] - d.start[0], at[1] - d.start[1]];
+			if (!d.moved) {
+				if (Math.hypot(...by) < SLOP[d.touch ? "touch" : "mouse"]) return true;
+				const { sideways, upDown } = panDirections();
+				const across = Math.abs(by[0]) >= Math.abs(by[1]);
+				if (!d.mode || d.touch && d.mode === "pan" && !(across ? sideways : upDown)) {
+					endDrag(false);
+					return false;
+				}
+				startDrag();
+			}
+			if (d.mode === "pan") onceAFrame(() => panBy(by, d.from));
+			else brushDraft.value = brushRect(d.start, at);
+			return true;
+		}
+		let gestureFrame = 0;
+		let gestureNext = null;
+		/** Runs `step` once a frame, the latest one, however fast the pointer moves. */
+		function onceAFrame(step) {
+			gestureNext = step;
+			if (gestureFrame) return;
+			if (typeof requestAnimationFrame === "undefined") {
+				gestureNext = null;
+				step();
+				return;
+			}
+			gestureFrame = requestAnimationFrame(() => {
+				gestureFrame = 0;
+				const next = gestureNext;
+				gestureNext = null;
+				next?.();
+			});
+		}
+		/** Ends the drag: `done` when it was let go (not cancelled), which settles a pan and selects. */
+		function endDrag(done, at) {
+			const d = drag;
+			if (!d) return;
+			drag = null;
+			clearTimeout(d.timer);
+			d.hold.release();
+			if (!d.moved) return;
+			if (d.mode === "pan" && rootRef.value) rootRef.value.style.cursor = "";
+			dragged = !d.touch;
+			if (gestureFrame) {
+				cancelAnimationFrame(gestureFrame);
+				gestureFrame = 0;
+				gestureNext?.();
+				gestureNext = null;
+			}
+			if (d.mode === "pan") showX(xWindow.value, true);
+			else if (d.mode === "brush") {
+				const rect = brushDraft.value;
+				brushDraft.value = null;
+				if (done && rect) brushTo(at ? brushRect(d.start, at) : rect);
+			}
+		}
+		function onPointerCancel(event) {
+			tapped = false;
+			fingers.delete(event.pointerId);
+			if (pinch && fingers.size < 2) endPinch();
+			if (drag?.id === event.pointerId) endDrag(false);
+		}
+		function endPinch() {
+			pinch = null;
+			if (gestureFrame) {
+				cancelAnimationFrame(gestureFrame);
+				gestureFrame = 0;
+				gestureNext?.();
+				gestureNext = null;
+			}
+			showX(xWindow.value, true);
+		}
+		function onPointerUp(event) {
+			fingers.delete(event.pointerId);
+			if (pinch) {
+				if (fingers.size < 2) endPinch();
+				return;
+			}
+			const wasDrag = drag?.id === event.pointerId && drag.moved;
+			if (drag?.id === event.pointerId) endDrag(true, local(event));
+			if (!tapped || wasDrag) return;
+			tapped = false;
+			const at = local(event);
+			setActive(hitAt(...at), at, true);
+		}
+		const brushAxes = computed(() => {
+			const axis = brushPart.value?.props.axis ?? "x";
+			return {
+				x: axis !== "y",
+				y: axis !== "x"
+			};
+		});
+		const clampTo = (v, from, length) => Math.min(Math.max(v, from), from + length);
+		/** The selection from `a` to `b` (in px), across the whole plot along an axis it doesn't select. */
+		function brushRect(a, b) {
+			const plot = layout.value?.plot;
+			if (!plot) return null;
+			const x0 = clampTo(Math.min(a[0], b[0]), plot.x, plot.width);
+			const x1 = clampTo(Math.max(a[0], b[0]), plot.x, plot.width);
+			const y0 = clampTo(Math.min(a[1], b[1]), plot.y, plot.height);
+			const y1 = clampTo(Math.max(a[1], b[1]), plot.y, plot.height);
+			const { x: bx, y: by } = brushAxes.value;
+			const horizontal = !!props.horizontal;
+			const across = horizontal ? by : bx;
+			const down = horizontal ? bx : by;
+			return {
+				x: across ? x0 : plot.x,
+				y: down ? y0 : plot.y,
+				width: across ? x1 - x0 : plot.width,
+				height: down ? y1 - y0 : plot.height
+			};
+		}
+		const inRect = ([px, py], r) => px >= r.x && px <= r.x + r.width && py >= r.y && py <= r.y + r.height;
+		/** The px a rect spans along x, and along the values. */
+		const spanX = (r) => props.horizontal ? [r.y, r.y + r.height] : [r.x, r.x + r.width];
+		const spanY = (r) => props.horizontal ? [r.x, r.x + r.width] : [r.y, r.y + r.height];
+		/** The values `scale` shows over the px `span`, from the smallest. */
+		function valuesOver(scale, [a, b]) {
+			const [u, v] = [scale.invert(a), scale.invert(b)];
+			return u <= v ? [u, v] : [v, u];
+		}
+		/** Keeps the selection of `rect` (in px) and tells the page; a selection too small to mean one lets it go. */
+		function brushTo(rect) {
+			const l = layout.value;
+			const part = brushPart.value;
+			brushAnchor = null;
+			if (!l || !part || !rect) return;
+			const { x: bx, y: by } = brushAxes.value;
+			const xs = spanX(rect);
+			const ys = spanY(rect);
+			if (bx && xs[1] - xs[0] < 4 || by && ys[1] - ys[0] < 4) {
+				clearBrush();
+				return;
+			}
+			const m = model.value;
+			let x = null;
+			if (bx) {
+				x = valuesOver(l.x.scale, xs);
+				if (m.xKind === "category") {
+					const from = Math.ceil(x[0]);
+					const to = Math.floor(x[1]);
+					if (from > to) {
+						clearBrush();
+						return;
+					}
+					x = [from - .5, to + .5];
+				}
+			}
+			const primary = primaryY(l);
+			const y = by && primary ? valuesOver(primary.scale, ys) : null;
+			const xInterval = x ? m.xKind === "linear" ? rounded(x) : windowToInterval(x, m.xKind, m.categories) : null;
+			const yInterval = y ? rounded(y) : null;
+			part.x.value = xInterval;
+			part.y.value = yInterval;
+			part.select({
+				...xInterval && { x: xInterval },
+				...yInterval && { y: yInterval },
+				...rowsIn(x, y)
+			});
+		}
+		/** Where a selection made with Shift and the arrow keys started, along x. */
+		let brushAnchor = null;
+		/** The x of an x or a point picked. */
+		function xOf(target) {
+			if (!target || target.type === "slice") return null;
+			if (target.type === "axis") return target.x;
+			return series.value.find((s) => s.index === target.series)?.x.values[target.row] ?? null;
+		}
+		/** Shift and an arrow: moves on `step` and selects from where it started to there. */
+		function brushWithKeys(step) {
+			const part = brushPart.value;
+			const from = xOf(active.value);
+			const next = moveAlong(step);
+			const to = xOf(next);
+			if (!part || !next || to === null) return;
+			bringIntoView(next);
+			setActive(next, null);
+			brushAnchor ??= from ?? to;
+			const m = model.value;
+			const lo = Math.min(brushAnchor, to);
+			const hi = Math.max(brushAnchor, to);
+			const window = m.xKind === "category" ? [lo - .5, hi + .5] : [lo, hi];
+			const x = windowToInterval(window, m.xKind, m.categories);
+			part.x.value = x;
+			part.y.value = null;
+			part.select({
+				x,
+				...rowsIn(window, null)
+			});
+		}
+		/** Lets the selection go, and tells the page: nothing is selected. */
+		function clearBrush() {
+			const part = brushPart.value;
+			brushAnchor = null;
+			if (!part || !part.x.value && !part.y.value) return;
+			part.x.value = null;
+			part.y.value = null;
+			part.select({
+				rows: [],
+				series: []
+			});
+		}
+		/** The rows with a point in the selection: x in `x`, and drawn within `y` of the values. */
+		function rowsIn(x, y) {
+			const l = layout.value;
+			const primary = primaryY(l);
+			const ys = y && primary ? [primary.scale.map(y[0]), primary.scale.map(y[1])] : null;
+			const lowY = ys ? Math.min(...ys) - .5 : 0;
+			const highY = ys ? Math.max(...ys) + .5 : 0;
+			const all = /* @__PURE__ */ new Set();
+			const bySeries = [];
+			for (const s of series.value) {
+				const view = viewOf(s);
+				if (!view) continue;
+				const rows = [];
+				for (const i of sortedOrder(s.x.values)) {
+					const value = s.x.values[i];
+					const top = s.top[i];
+					if (top !== top || x && !within(value, x)) continue;
+					if (ys) {
+						const at = alongY(view.point(value, top));
+						if (at < lowY || at > highY) continue;
+					}
+					rows.push(rowOf(s.rows, i));
+					all.add(rowOf(s.rows, i));
+				}
+				bySeries.push({
+					name: s.name,
+					rows
+				});
+			}
+			return {
+				rows: [...all],
+				series: bySeries
+			};
+		}
+		/** The selection to keep the rest faded around, while it is dragged or kept. */
+		const dimmed = computed(() => brushPart.value && brushPart.value.props.dim !== false ? brushDraft.value ?? selection.value : null);
+		/** The selection kept (`v-model:x` / `v-model:y` of the brush), in px over the plot. */
+		const selection = computed(() => {
+			const part = brushPart.value;
+			const l = layout.value;
+			if (!part || !l || !part.x.value && !part.y.value) return null;
+			const m = model.value;
+			const { plot } = l;
+			const x = intervalToWindow(part.x.value, m.xKind, m.categories);
+			const y = part.y.value ? intervalToWindow(part.y.value, "linear", []) : null;
+			const primary = primaryY(l);
+			const xs = x ? [l.x.scale.map(x[0]), l.x.scale.map(x[1])] : props.horizontal ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width];
+			const ys = y && primary ? [primary.scale.map(y[0]), primary.scale.map(y[1])] : props.horizontal ? [plot.x, plot.x + plot.width] : [plot.y + plot.height, plot.y];
+			const [a, b] = props.horizontal ? [ys, xs] : [xs, ys];
+			const left = Math.max(plot.x, Math.min(a[0], a[1]));
+			const right = Math.min(plot.x + plot.width, Math.max(a[0], a[1]));
+			const top = Math.max(plot.y, Math.min(b[0], b[1]));
+			const bottom = Math.min(plot.y + plot.height, Math.max(b[0], b[1]));
+			if (right <= left || bottom <= top) return null;
+			return {
+				x: left,
+				y: top,
+				width: right - left,
+				height: bottom - top
+			};
+		});
+		/** How much a wheel turn zooms, per px of its delta (pinches send small deltas, wheels large ones). */
+		function onWheel(event) {
+			if (!zoomOn.value) return;
+			const at = local(event);
+			if (!inPlot(at)) return;
+			const lines = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;
+			let dx = event.deltaX * lines;
+			let dy = event.deltaY * lines;
+			const pinching = event.ctrlKey || event.metaKey;
+			if (pinching || zoomPart.value?.props.wheel) {
+				if (!pinching && !zoomed.value && dy > 0) return;
+				event.preventDefault();
+				const d = Math.max(-40, Math.min(WHEEL_MOST, dy));
+				setActive(null, null);
+				onceAFrame(() => zoomBy(Math.exp(d * WHEEL_ZOOM), at));
+				settleSoon();
+				return;
+			}
+			if (event.shiftKey && !dx) [dx, dy] = [dy, 0];
+			if (!zoomed.value || !(Math.abs(dx) > Math.abs(dy))) return;
+			event.preventDefault();
+			setActive(null, null);
+			const by = props.horizontal ? [0, -dx] : [-dx, 0];
+			onceAFrame(() => panBy(by));
+			settleSoon();
+		}
+		let settleTimer;
+		/** Once the wheel stops, categories cut part way are shown whole. */
+		function settleSoon() {
+			clearTimeout(settleTimer);
+			settleTimer = setTimeout(() => showX(xWindow.value, true), 160);
+		}
+		onBeforeUnmount(() => clearTimeout(settleTimer));
+		function onDblclick(event) {
+			if (!zoomOn.value || !inPlot(local(event))) return;
+			event.preventDefault();
+			resetZoom();
+		}
+		function onOutsidePress(event) {
+			if (!active.value) return;
+			const root = rootRef.value;
+			if (root && !root.contains(event.target)) setActive(null, null);
+		}
+		onMounted(() => document.addEventListener("pointerdown", onOutsidePress, true));
+		onBeforeUnmount(() => {
+			document.removeEventListener("pointerdown", onOutsidePress, true);
+			if (pointerFrame) cancelAnimationFrame(pointerFrame);
+		});
+		function onKeydown(event) {
+			if (!interactive.value || event.target !== rootRef.value) return;
+			if (event.key === "Enter") {
+				if (tip.value) select(tip.value);
+				return;
+			}
+			if (event.key === "Escape") {
+				if (active.value) setActive(null, null);
+				else if (selection.value) clearBrush();
+				else return;
+				event.stopPropagation();
+				return;
+			}
+			if (zoomOn.value && zoomKey(event)) {
+				event.preventDefault();
+				return;
+			}
+			const horizontal = !!props.horizontal;
+			const switches = !pie.value && !tree.value && !funnel.value && !radar.value && trigger.value !== "axis" && (series.value.length > 1 || series.value.some((s) => s.kind.categoryY));
+			const along = !switches ? {
+				ArrowRight: 1,
+				ArrowDown: 1,
+				ArrowLeft: -1,
+				ArrowUp: -1
+			} : horizontal ? {
+				ArrowDown: 1,
+				ArrowUp: -1
+			} : {
+				ArrowRight: 1,
+				ArrowLeft: -1
+			};
+			const between = !switches ? {} : horizontal ? {
+				ArrowRight: 1,
+				ArrowLeft: -1
+			} : {
+				ArrowUp: 1,
+				ArrowDown: -1
+			};
+			const step = along[event.key] ?? (event.key === "Home" ? -Infinity : event.key === "End" ? Infinity : 0);
+			const turn = between[event.key] ?? 0;
+			if (event.shiftKey && brushPart.value && brushAxes.value.x && !pie.value && (step || turn)) {
+				event.preventDefault();
+				if (step) brushWithKeys(step);
+				return;
+			}
+			if (step || turn) brushAnchor = null;
+			const next = step ? moveAlong(step) : turn ? moveBetween(turn) : void 0;
+			if (next === void 0) return;
+			event.preventDefault();
+			if (next) bringIntoView(next);
+			if (next) setActive(next, null);
+		}
+		/** `+` and `-` zoom about what is picked (or the middle), `0` shows all; `true` when it was one. */
+		function zoomKey(event) {
+			const l = layout.value;
+			if (!l || event.ctrlKey || event.metaKey || event.altKey) return false;
+			const factor = event.key === "+" || event.key === "=" ? .5 : event.key === "-" ? 2 : 0;
+			if (event.key === "0") {
+				resetZoom(true);
+				return true;
+			}
+			if (!factor) return false;
+			const { plot } = l;
+			const t = tip.value;
+			const at = t ? [t.anchor[0], t.anchor[1]] : [plot.x + plot.width / 2, plot.y + plot.height / 2];
+			if (t?.x !== void 0 && active.value?.type === "axis") {
+				const x = l.x.scale.map(active.value.x);
+				if (props.horizontal) at[1] = x;
+				else at[0] = x;
+			}
+			zoomBy(factor, at);
+			showX(xWindow.value, true);
+			const now = layout.value;
+			if (!now) return true;
+			const [from, to] = now.x.scale.domain;
+			const m = model.value;
+			const ends = m.xKind === "category" ? windowToInterval([from, to], m.xKind, m.categories).map(String) : [xText(from), xText(to)];
+			zoomNote.value = zoomed.value ? format(messages.value.zoomed, {
+				from: ends[0],
+				to: ends[1]
+			}) : messages.value.zoomReset;
+			return true;
+		}
+		/** Zoomed in: moves what is shown so the x the keys moved to is in sight. */
+		function bringIntoView(target) {
+			if (!layout.value || !xWindow.value || target.type === "slice") return;
+			const x = target.type === "axis" ? target.x : series.value.find((s) => s.index === target.series)?.x.values[target.row];
+			if (x === void 0) return;
+			const [a, b] = xWindow.value;
+			const span = b - a;
+			const room = model.value.xKind === "category" ? .5 : span * .05;
+			if (x - room < a) showX([x - room, x - room + span], true);
+			else if (x + room > b) showX([x + room - span, x + room], true);
+		}
+		/**
+		* The place `step` on from `at` among `n`, kept to the ends; from nothing
+		* picked, the first (or the last, going back).
+		*/
+		function stepTo(at, step, n) {
+			if (at < 0 && Number.isFinite(step)) return step > 0 ? 0 : n - 1;
+			return Math.max(0, Math.min(n - 1, at + step));
+		}
+		/** The next x, point or slice `step` along (±Infinity for the ends). */
+		function moveAlong(step) {
+			const a = active.value;
+			if (tree.value) {
+				const count = (treeData.value?.nodes.length ?? 1) - 1;
+				if (count < 1) return null;
+				return {
+					type: "slice",
+					slice: stepTo(a?.type === "slice" ? a.slice - 1 : -1, step, count) + 1
+				};
+			}
+			if (pie.value) {
+				const shown = slices.value.flatMap((slice, k) => slice.hidden ? [] : [k]);
+				if (!shown.length) return null;
+				return {
+					type: "slice",
+					slice: shown[stepTo(a?.type === "slice" ? shown.indexOf(a.slice) : -1, step, shown.length)]
+				};
+			}
+			if (trigger.value === "axis") {
+				const xs = xValues.value;
+				if (!xs.length) return null;
+				const at = a?.type === "axis" ? xs.indexOf(a.x) : -1;
+				return {
+					type: "axis",
+					x: xs[radar.value && at >= 0 && Number.isFinite(step) ? (at + step + xs.length) % xs.length : stepTo(at, step, xs.length)]
+				};
+			}
+			const s = a?.type === "item" && series.value.find((x) => x.index === a.series) || series.value[0];
+			if (!s) return null;
+			const mine = a?.type === "item" && a.series === s.index;
+			const order = s.kind.categoryY && mine ? pointsOf(s, s.top[a.row]) : pointsOf(s);
+			if (!order.length) return null;
+			return itemOf(s, order[stepTo(mine ? order.indexOf(a.row) : -1, step, order.length)]);
+		}
+		/** The point of the next series `turn` away, nearest to the current x. */
+		function moveBetween(turn) {
+			const a = active.value;
+			if (pie.value || trigger.value === "axis") return void 0;
+			const from = a?.type === "item" ? series.value.find((x) => x.index === a.series) : void 0;
+			if (from?.kind.categoryY && a?.type === "item") return heatRow(from, a.row, turn);
+			const list = series.value.filter((s) => pointsOf(s).length);
+			if (!list.length) return null;
+			const at = a?.type === "item" ? list.findIndex((s) => s.index === a.series) : -1;
+			const s = list[at < 0 ? 0 : (at + turn + list.length) % list.length];
+			const order = pointsOf(s);
+			if (a?.type !== "item") return itemOf(s, order[0]);
+			const x = from ? from.x.values[a.row] : 0;
+			let best = order[0];
+			for (const row of order) if (Math.abs(s.x.values[row] - x) < Math.abs(s.x.values[best] - x)) best = row;
+			return itemOf(s, best);
+		}
+		/** The rows of `s` with a value, from the smallest x; for a heatmap, only those in its row `place`. */
+		function pointsOf(s, place) {
+			const order = sortedOrder(s.x.values);
+			const out = [];
+			for (const row of order) if (s.top[row] === s.top[row] && (place === void 0 || s.top[row] === place)) out.push(row);
+			return out;
+		}
+		/**
+		* The heatmap cell a row up or down from `row` (across, when horizontal),
+		* at the same x: `turn` 1 is up (right), as the keys go. Rows without a
+		* cell there are passed over; at the edge it stays.
+		*/
+		function heatRow(s, row, turn) {
+			const view = viewOf(s);
+			const x = s.x.values[row];
+			let step = turn;
+			if (view) {
+				const [l0, t0] = view.point(x, 0);
+				const [l1, t1] = view.point(x, 1);
+				if ((props.horizontal ? l1 - l0 : t0 - t1) < 0) step = -turn;
+			}
+			const n = model.value.yCategories[s.axis]?.length ?? 0;
+			for (let place = s.top[row] + step; place >= 0 && place < n; place += step) for (let i = 0; i < s.y.length; i++) if (s.top[i] === place && s.x.values[i] === x && s.y[i] === s.y[i]) return itemOf(s, i);
+			return itemOf(s, row);
+		}
+		function itemOf(s, row) {
+			const view = viewOf(s);
+			const x = s.x.values[row];
+			const at = view?.point(x, s.top[row]);
+			const hit = view && at && s.kind.hit ? s.kind.hit(s, view, at[0], at[1]) : null;
+			return {
+				type: "item",
+				series: s.index,
+				row,
+				radius: hit?.index === row ? hit.radius : 4
+			};
+		}
+		/** Every x with a value, from the smallest: where the keys stop. */
+		const xValues = computed(() => allX(series.value.map((s) => s.x.values)));
+		watch([series, slices], () => {
+			const a = active.value;
+			if (!a) return;
+			if (a.pointer) setActive(hitAt(...a.pointer), a.pointer, a.touch);
+			else if (!tip.value) setActive(null, null);
+		});
+		/** Read out as the keys move: the x (or series) and its values, or what zooming shows. */
+		const live = computed(() => {
+			if (zoomNote.value) return zoomNote.value;
+			const t = tip.value;
+			if (!t || active.value?.pointer || active.value?.synced) return "";
+			const items = t.items.map((item) => `${item.name} ${item.text}`).join(messages.value.itemSeparator);
+			const text = t.title ? `${t.title}${messages.value.itemSeparator}${items}` : items;
+			return t.note ? `${text}${messages.value.itemSeparator}${t.note}` : text;
+		});
+		const pointer = {
+			tip,
+			size: computed(() => {
+				const l = layout.value ?? pieLayout.value ?? treeLayout.value ?? radarLayout.value ?? funnelLayout.value;
+				return l && {
+					width: l.width,
+					height: l.height
+				};
+			}),
+			content: computed(() => tooltipPart.value?.content()),
+			live
+		};
+		let pending = 0;
+		function request() {
+			if (pending || typeof requestAnimationFrame === "undefined") return;
+			pending = requestAnimationFrame(() => {
+				pending = 0;
+				draw();
+			});
+		}
+		onBeforeUnmount(() => pending && cancelAnimationFrame(pending));
+		watch(() => [
+			layout.value,
+			pieLayout.value,
+			series.value,
+			sliceColors.value,
+			colors.value,
+			seriesParts.value.map((part) => ({ ...part.props })),
+			pie.value && { ...pie.value.props },
+			focused.value,
+			pointed.value,
+			pieLabels.value,
+			labelsShown.value,
+			pie.value && active.value,
+			radarLayout.value,
+			funnelLayout.value,
+			treeLayout.value,
+			treeColors.value,
+			tree.value && { ...tree.value.props },
+			tree.value && active.value,
+			radar.value && active.value,
+			dimmed.value
+		], request, { flush: "post" });
+		let steady = 0;
+		let idle = 0;
+		function cancelPrepare() {
+			if (steady) clearTimeout(steady);
+			if (idle) (typeof cancelIdleCallback === "function" ? cancelIdleCallback : clearTimeout)(idle);
+			steady = idle = 0;
+		}
+		watch(series, (list) => {
+			cancelPrepare();
+			if (!list.some((s) => s.kind.prepare)) return;
+			const work = () => {
+				idle = 0;
+				for (const s of list) if (s.kind.prepare) s.prepared = s.kind.prepare(s);
+			};
+			steady = setTimeout(() => {
+				steady = 0;
+				idle = typeof requestIdleCallback === "function" ? requestIdleCallback(work, { timeout: 1e3 }) : setTimeout(work);
+			}, STEADY);
+		}, { flush: "post" });
+		onBeforeUnmount(cancelPrepare);
+		const reduced = useReducedMotion();
+		/** Above this many points, changes show at once. */
+		const easeOut = (t) => 1 - (1 - t) ** 3;
+		let motion = null;
+		/** The model and slices last drawn, and how they were drawn, to move from. */
+		let drawnModel = null;
+		let drawnSlices = null;
+		let lastSeries = [];
+		let lastSlices = [];
+		function pointCount() {
+			if (pie.value) return slices.value.length;
+			let n = 0;
+			for (const s of model.value.series) n += s.y.length;
+			return n;
+		}
+		/** Whether the chart has been on screen: it comes in when first seen, not while scrolled away. */
+		let seen = typeof IntersectionObserver === "undefined";
+		/**
+		* Whether the chart is on screen, or near it. Off screen nothing is drawn
+		* (live data keeps coming), and it is drawn as it is when it comes back.
+		*/
+		let onScreen = true;
+		let missed = false;
+		let watcher;
+		onMounted(() => {
+			if (typeof IntersectionObserver === "undefined" || !rootRef.value) return;
+			watcher = new IntersectionObserver((entries) => {
+				const entry = entries[entries.length - 1];
+				if (!entry) return;
+				onScreen = entry.isIntersecting;
+				if (!onScreen) return;
+				if (!seen || missed) request();
+				seen = true;
+				missed = false;
+			}, { rootMargin: "200px 0px" });
+			watcher.observe(rootRef.value);
+		});
+		onBeforeUnmount(() => watcher?.disconnect());
+		/** Starts a move when the data changed since the last frame. */
+		function startMotion(now) {
+			if (!seen) return;
+			const m = model.value;
+			const changed = pie.value ? drawnSlices !== slices.value : drawnModel !== m;
+			const first = pie.value ? !drawnSlices : !drawnModel;
+			if (!changed || empty.value) return;
+			drawnModel = m;
+			drawnSlices = slices.value;
+			if (reduced.value || pointCount() > MOTION_LIMIT) {
+				motion = null;
+				return;
+			}
+			const from = /* @__PURE__ */ new Map();
+			const angles = /* @__PURE__ */ new Map();
+			if (!first) {
+				for (const s of lastSeries) from.set(s.index, {
+					top: s.top,
+					base: s.base,
+					ends: s.stackEnds
+				});
+				for (const slice of lastSlices) angles.set(slice.index, [slice.start, slice.end]);
+			}
+			if (first) labelsShown.value = false;
+			motion = {
+				start: now,
+				duration: first ? ENTER : UPDATE,
+				enter: first,
+				series: from,
+				slices: angles
+			};
+		}
+		function lerp(from, to, t) {
+			if (from.length !== to.length) return to;
+			const out = new Float64Array(to.length);
+			for (let i = 0; i < to.length; i++) {
+				const a = from[i];
+				const b = to[i];
+				out[i] = a === a ? a + (b - a) * t : b;
+			}
+			return out;
+		}
+		/** The series `t` of the way (0 to 1) from what was shown. */
+		function shownSeries(t) {
+			const list = series.value;
+			if (!motion || t >= 1) return list;
+			return list.map((s) => {
+				let from = motion.series.get(s.index);
+				if (!from && s.kind.zero) {
+					const zero = new Float64Array(s.top.length).fill(baselineValue(s));
+					const base = motion.enter ? s.base && zero : s.base;
+					const start = base ?? zero;
+					from = {
+						top: start,
+						base,
+						ends: s.stackEnds && {
+							up: start,
+							down: start
+						}
+					};
+				}
+				if (!from) return s;
+				return {
+					...s,
+					top: lerp(from.top, s.top, t),
+					base: s.base && from.base ? lerp(from.base, s.base, t) : s.base,
+					stackEnds: s.stackEnds && from.ends ? {
+						up: lerp(from.ends.up, s.stackEnds.up, t),
+						down: lerp(from.ends.down, s.stackEnds.down, t)
+					} : s.stackEnds
+				};
+			});
+		}
+		/** Where a series' bars grow from: 0, or the end of the axis nearest to it. */
+		function baselineValue(s) {
+			const axis = layout.value?.y[s.axis];
+			if (!axis) return 0;
+			const [lo, hi] = axis.scale.domain;
+			return Math.min(Math.max(0, lo), hi);
+		}
+		function shownSlicesAt(t) {
+			const list = slices.value;
+			if (!motion || motion.enter || t >= 1) return list;
+			return list.map((slice) => {
+				const from = motion.slices.get(slice.index);
+				if (!from) return slice;
+				return {
+					...slice,
+					start: from[0] + (slice.start - from[0]) * t,
+					end: from[1] + (slice.end - from[1]) * t
+				};
+			});
+		}
+		function draw() {
+			const canvas = canvasRef.value;
+			const l = layout.value ?? pieLayout.value ?? treeLayout.value ?? radarLayout.value ?? funnelLayout.value;
+			if (!canvas || !l) return;
+			if (!onScreen) {
+				missed = true;
+				return;
+			}
+			const now = typeof performance === "undefined" ? Date.now() : performance.now();
+			if (fromServer.value) {
+				drawnModel = model.value;
+				drawnSlices = slices.value;
+			}
+			startMotion(now);
+			const dpr = window.devicePixelRatio || 1;
+			const width = Math.round(l.width * dpr);
+			const height = Math.round(l.height * dpr);
+			if (canvas.width !== width) canvas.width = width;
+			if (canvas.height !== height) canvas.height = height;
+			canvas.style.width = `${l.width}px`;
+			canvas.style.height = `${l.height}px`;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx.clearRect(0, 0, l.width, l.height);
+			if (empty.value) return;
+			const done = motion ? Math.min(1, (now - motion.start) / motion.duration) : 1;
+			const t = easeOut(done);
+			const entering = motion?.enter ? t : 1;
+			if (pieLayout.value) paintPie(ctx, t, entering);
+			else if (treeLayout.value) paintTree(ctx, entering, false, dpr);
+			else if (radarLayout.value) paintRadar(ctx, dpr, t);
+			else if (funnelLayout.value) paintFunnel(ctx, dpr, t);
+			else paint(ctx, dpr, t, entering);
+			fromServer.value = false;
+			if (done >= 1) motion = null;
+			else request();
+			if (!motion?.enter) labelsShown.value = true;
+		}
+		/** Draws the pie; `still` leaves out what follows the pointer and the legend (an export). */
+		function paintPie(painter, t, sweep, still = false) {
+			const l = pieLayout.value;
+			const a = still ? null : active.value;
+			const legendFocus = still || focused.value === null ? void 0 : slices.value[focused.value];
+			const hovered = a?.type === "slice" ? slices.value[a.slice] : void 0;
+			const focus = legendFocus && !legendFocus.hidden ? legendFocus : hovered;
+			const shown = shownSlicesAt(t);
+			if (!still) lastSlices = shown;
+			drawPie(painter, shown, sliceColors.value, {
+				cx: l.cx,
+				cy: l.cy,
+				radius: l.radius,
+				inner: l.radius * holeRatio.value,
+				surface: colors.value.surface,
+				focus: focus?.index,
+				fade: legendFocus ? FADED : .56,
+				sweep,
+				from: pieArc.value[0],
+				patterns: slicePatterns.value
+			});
+			const leaders = pieLabels.value.leaders;
+			if (!leaders.length || !(still || labelsShown.value)) return;
+			painter.save();
+			painter.strokeStyle = colors.value.baseline;
+			painter.lineWidth = 1;
+			painter.lineJoin = "round";
+			painter.beginPath();
+			for (const line of leaders) line.forEach(([x, y], k) => k ? painter.lineTo(x, y) : painter.moveTo(x, y));
+			painter.stroke();
+			painter.restore();
+		}
+		/**
+		* Draws the radar: its rings and spokes, the spoke picked, then each
+		* series, those not brought forward faded. `still` leaves out what follows
+		* the pointer and the legend (an export).
+		*/
+		function paintRadar(painter, dpr, t, still = false) {
+			const r = radarLayout.value;
+			const { cx, cy, count } = r;
+			const corner = (k, out) => {
+				const angle = spokeAngle(k, count);
+				return [cx + Math.sin(angle) * out, cy - Math.cos(angle) * out];
+			};
+			painter.save();
+			painter.lineWidth = 1;
+			painter.strokeStyle = colors.value.grid;
+			painter.beginPath();
+			if (axes.value.y?.grid !== false) for (const tick of r.ticks) {
+				const out = r.scale.map(tick);
+				if (out < 1 || count < 3) continue;
+				for (let k = 0; k <= count; k++) {
+					const [x, y] = corner(k % count, out);
+					if (k) painter.lineTo(x, y);
+					else painter.moveTo(x, y);
+				}
+			}
+			for (let k = 0; k < count; k++) {
+				const [x, y] = corner(k, r.radius);
+				painter.moveTo(cx, cy);
+				painter.lineTo(x, y);
+			}
+			painter.stroke();
+			const a = still ? null : active.value;
+			if (a?.type === "axis" && count) {
+				const [x, y] = corner(a.x, r.radius);
+				painter.strokeStyle = colors.value.baseline;
+				painter.beginPath();
+				painter.moveTo(cx, cy);
+				painter.lineTo(x, y);
+				painter.stroke();
+			}
+			painter.restore();
+			ringValues(painter, r);
+			const shown = shownSeries(t);
+			if (!still) lastSeries = shown;
+			const focus = still ? -1 : focused.value ?? -1;
+			const fading = focus >= 0 && shown.some((s) => s.index === focus);
+			const vector = isSvg(painter);
+			const order = fading ? [...shown.filter((s) => s.index !== focus), ...shown.filter((s) => s.index === focus)] : shown;
+			for (const s of order) {
+				const view = radarView(r, dpr, vector);
+				painter.save();
+				if (fading && s.index !== focus) painter.globalAlpha = FADED;
+				s.kind.draw(painter, s, view);
+				painter.restore();
+			}
+		}
+		/** Draws the funnel, as it comes in: its bars grow from the middle. */
+		function paintFunnel(painter, dpr, t, still = false) {
+			const f = funnelLayout.value;
+			const s = funnelSeries.value;
+			if (!s) return;
+			const shown = shownSeries(t);
+			if (!still) lastSeries = shown;
+			const now = shown.find((one) => one.index === s.index) ?? s;
+			s.kind.draw(painter, now, funnelView(f, dpr, isSvg(painter)));
+		}
+		/**
+		* A radar's ring values, drawn over the grid and under the series: ringed
+		* with the surface so grid lines don't cut them, while the series' lines
+		* pass over them unbroken.
+		*/
+		function ringValues(painter, r) {
+			if (!r.values.length) return;
+			const ink = resolveColor("var(--dou-chart-label)");
+			const surface = colors.value.surface;
+			if (isSvg(painter)) {
+				painter.raw(r.values.map((tick) => svgText(tick.text, tick.left, tick.top, {
+					color: ink,
+					size: 12,
+					halo: surface
+				})).join(""));
+				return;
+			}
+			const ctx = painter;
+			if (typeof ctx.fillText !== "function") return;
+			const root = rootRef.value;
+			const family = root ? getComputedStyle(root).fontFamily : "sans-serif";
+			ctx.save();
+			ctx.font = `12px ${family}`;
+			ctx.textBaseline = "alphabetic";
+			ctx.lineJoin = "round";
+			ctx.lineWidth = 3;
+			ctx.strokeStyle = surface;
+			ctx.fillStyle = ink;
+			for (const tick of r.values) {
+				const y = tick.top + 8 + 12 * .35;
+				ctx.strokeText(tick.text, tick.left, y);
+				ctx.fillText(tick.text, tick.left, y);
+			}
+			ctx.restore();
+		}
+		const holeRatio = computed(() => Math.min(.95, Math.max(0, pie.value?.props.innerRadius ?? 0)));
+		/** Whether an axis is drawn across the chart (along the bottom or top), so its grid lines stand up. */
+		const across = (axis) => axis.position === "bottom" || axis.position === "top";
+		/** The scales and room a series draws with; `vector` for an SVG, which takes no images. */
+		function viewOf(s, dpr = dprNow(), vector = false) {
+			const r = radarLayout.value;
+			if (r) return radarView(r, dpr, vector);
+			const f = funnelLayout.value;
+			if (f) return funnelView(f, dpr, vector);
+			const l = layout.value;
+			if (!l) return null;
+			const y = l.y[s.axis];
+			if (!y) return null;
+			const horizontal = !!props.horizontal;
+			const { plot } = l;
+			const xScale = l.x.scale;
+			const ys = y.scale;
+			const step = model.value.xStep;
+			return {
+				x: xScale,
+				y: ys,
+				horizontal,
+				band: xScale.kind === "category" ? xScale.step : step > 0 ? step * Math.abs(xScale.k) : (horizontal ? plot.height : plot.width) / 8,
+				point: horizontal ? (x, value) => [ys.map(value), xScale.map(x)] : (x, value) => [xScale.map(x), ys.map(value)],
+				plot,
+				dpr,
+				vector,
+				colors: colors.value
+			};
+		}
+		/** What a radar's series draw with: a spoke and a value give a point round the center. */
+		function radarView(r, dpr, vector) {
+			const { cx, cy, radius, count, scale } = r;
+			const point = (x, value) => {
+				const angle = spokeAngle(x, count);
+				const out = Math.max(0, scale.map(value));
+				return [cx + Math.sin(angle) * out, cy - Math.cos(angle) * out];
+			};
+			return {
+				x: linearScale([0, count], [0, Math.PI * 2]),
+				y: scale,
+				horizontal: false,
+				band: 0,
+				point,
+				plot: {
+					x: cx - radius,
+					y: cy - radius,
+					width: radius * 2,
+					height: radius * 2
+				},
+				dpr,
+				vector,
+				colors: colors.value,
+				polar: {
+					cx,
+					cy,
+					radius,
+					count
+				}
+			};
+		}
+		/** What a funnel draws with: a stage and a value give the right end of its bar, at its middle. */
+		function funnelView(f, dpr, vector) {
+			const { plot, step, scale } = f;
+			const cx = plot.x + plot.width / 2;
+			return {
+				x: linearScale([0, f.count], [plot.y, plot.y + plot.height]),
+				y: scale,
+				horizontal: false,
+				band: step * FUNNEL_BAR,
+				point: (x, value) => [cx + scale.map(value), plot.y + step * x + step / 2],
+				plot,
+				dpr,
+				vector,
+				colors: colors.value
+			};
+		}
+		const dprNow = () => typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+		/** A canvas to draw faded series on, then onto the chart at once: a series sets its own alpha. */
+		let fadeLayer = null;
+		const markerColor = (tone) => markerColors.value[tone];
+		/**
+		* Draws the chart with axes. `still` draws it as it stands, without what
+		* follows the pointer, the legend or a selection: for an SVG.
+		*/
+		function paint(painter, dpr, t, entering, still = false) {
+			const l = layout.value;
+			const { plot } = l;
+			const c = colors.value;
+			const right = plot.x + plot.width;
+			const bottom = plot.y + plot.height;
+			const xLine = !axes.value.x.hidden && !series.value.some((s) => s.kind.categoryY);
+			const horizontal = !!props.horizontal;
+			painter.save();
+			painter.lineWidth = 1;
+			painter.strokeStyle = c.grid;
+			painter.beginPath();
+			for (const axis of [
+				l.x,
+				l.y.y,
+				l.y.y2
+			]) {
+				if (!axis?.grid) continue;
+				for (const tick of axis.ticks) {
+					const at = crisp(axis.scale.map(tick), dpr);
+					if (across(axis)) {
+						if (horizontal && xLine && at <= plot.x + .5) continue;
+						painter.moveTo(at, plot.y);
+						painter.lineTo(at, bottom);
+					} else {
+						if (!horizontal && xLine && at >= bottom - .5) continue;
+						painter.moveTo(plot.x, at);
+						painter.lineTo(right, at);
+					}
+				}
+			}
+			painter.stroke();
+			painter.restore();
+			const markers = placedMarkers.value;
+			drawMarkers(painter, markers, markerColor, dpr, true);
+			const xRoom = xWindow.value ? 0 : 4;
+			const yRoom = zoomAxes.value.y && yWindow.value ? 0 : 4;
+			const clip = (target, s) => {
+				target.beginPath();
+				const reveal = s.kind.zero ? 1 : entering;
+				const [ax, ay] = horizontal ? [yRoom, xRoom] : [xRoom, yRoom];
+				const width = plot.width + ax * 2;
+				const height = plot.height + ay * 2;
+				if (horizontal) target.rect(plot.x - ax, plot.y - ay, width, height * reveal);
+				else target.rect(plot.x - ax, plot.y - ay, width * reveal, height);
+				target.clip();
+			};
+			const shown = shownSeries(t);
+			if (!still) lastSeries = shown;
+			const focus = still ? -1 : focused.value ?? pointed.value ?? -1;
+			const fading = focus >= 0 && shown.some((s) => s.index === focus);
+			const vector = isSvg(painter);
+			/** Draws `s` faded, all at once; `false` where it can't be. */
+			const drawFaded = (s, view) => {
+				if (isSvg(painter)) {
+					painter.layer(FADED, () => {
+						painter.save();
+						clip(painter, s);
+						s.kind.draw(painter, s, view);
+						painter.restore();
+					});
+					return true;
+				}
+				const layer = fadeOn(painter, l.width, l.height, dpr);
+				if (!layer) return false;
+				layer.save();
+				clip(layer, s);
+				s.kind.draw(layer, s, view);
+				layer.restore();
+				painter.save();
+				painter.globalAlpha = FADED;
+				painter.drawImage(layer.canvas, 0, 0, l.width, l.height);
+				painter.restore();
+				return true;
+			};
+			const kept = still ? null : dimmed.value;
+			const keep = kept && {
+				x: kept.x <= plot.x ? kept.x - 4 : kept.x,
+				y: kept.y <= plot.y ? kept.y - 4 : kept.y,
+				right: kept.x + kept.width >= right ? right + 4 : kept.x + kept.width,
+				bottom: kept.y + kept.height >= bottom ? bottom + 4 : kept.y + kept.height
+			};
+			for (const s of shown) {
+				const view = viewOf(s, dpr, vector);
+				if (!view) continue;
+				if (fading && s.index !== focus && drawFaded(s, view)) continue;
+				if (keep && !drawFaded(s, view)) continue;
+				painter.save();
+				clip(painter, s);
+				if (keep) {
+					painter.beginPath();
+					painter.rect(keep.x, keep.y, keep.right - keep.x, keep.bottom - keep.y);
+					painter.clip();
+				}
+				s.kind.draw(painter, s, view);
+				painter.restore();
+			}
+			painter.save();
+			painter.lineWidth = 1;
+			painter.strokeStyle = c.baseline;
+			painter.beginPath();
+			if (xLine) {
+				if (horizontal) {
+					const x = crisp(plot.x, dpr);
+					painter.moveTo(x, plot.y);
+					painter.lineTo(x, bottom);
+				} else {
+					const y = crisp(bottom, dpr);
+					painter.moveTo(plot.x, y);
+					painter.lineTo(right, y);
+				}
+			}
+			const primary = l.y.y ?? l.y.y2;
+			const listed = model.value.yCategories[l.y.y ? "y" : "y2"];
+			if (primary && primary.scale.kind === "linear" && !listed) {
+				const [lo, hi] = primary.scale.domain;
+				if (lo < 0 && hi > 0) {
+					const at = crisp(primary.scale.map(0), dpr);
+					if (horizontal) {
+						painter.moveTo(at, plot.y);
+						painter.lineTo(at, bottom);
+					} else {
+						painter.moveTo(plot.x, at);
+						painter.lineTo(right, at);
+					}
+				}
+			}
+			painter.stroke();
+			painter.restore();
+			drawMarkers(painter, markers, markerColor, dpr, false);
+		}
+		/** A clear canvas the size of the chart to draw a faded series on; `null` where there is none. */
+		function fadeOn(main, width, height, dpr) {
+			if (typeof document === "undefined") return null;
+			fadeLayer ??= document.createElement("canvas");
+			if (fadeLayer.width !== main.canvas.width) fadeLayer.width = main.canvas.width;
+			if (fadeLayer.height !== main.canvas.height) fadeLayer.height = main.canvas.height;
+			const ctx = fadeLayer.getContext("2d");
+			if (!ctx) return null;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx.clearRect(0, 0, width, height);
+			return ctx;
+		}
+		/** A heatmap's values, as its `format` writes them. */
+		function heatText(s) {
+			return s.props.format ?? numberFormatFull(locale.value.name);
+		}
+		/** The category down the value axis at `place` (a heatmap's row), as the axis writes it. */
+		function yCategoryText(axis, place) {
+			const label = model.value.yCategories[axis]?.[place] ?? "";
+			const own = axes.value[axis]?.format;
+			return own ? own(label) : label;
+		}
+		/** A change as text, with `+` before a rise (a fall has its minus already). */
+		const signed = (text, value) => value > 0 ? `+${text(value)}` : text(value);
+		/** Values as their axis shows them. */
+		function valueText(axis) {
+			return axes.value[axis]?.format ?? numberFormatFull(locale.value.name);
+		}
+		/**
+		* A series' value at `row` as the tooltip writes it: a band's two ends, a
+		* share of a whole stack with its value, or the value as its axis shows it.
+		*/
+		function seriesText(s, row) {
+			const y = s.y[row];
+			if (s.kind.categoryY) return heatText(s)(y);
+			if (s.kind.box) {
+				const box = boxes(s)[row];
+				if (!box) return "";
+				const text = valueText(s.axis);
+				const m = messages.value;
+				const line = format(m.box, {
+					median: text(box.median),
+					q1: text(box.q1),
+					q3: text(box.q3),
+					low: text(box.low),
+					high: text(box.high)
+				});
+				if (!box.outliers.length) return line;
+				return `${line}${m.itemSeparator}${format(m.boxOutliers, { count: box.outliers.length })} ${box.outliers.map(text).join(m.nameSeparator)}`;
+			}
+			if (s.kind.waterfall) {
+				const text = valueText(s.axis);
+				if (isTotal(s, row)) return text(y);
+				return format(messages.value.waterfallStep, {
+					change: signed(text, y),
+					total: text(s.top[row])
+				});
+			}
+			if (s.base && !s.stackEnds) {
+				const text = valueText(s.axis);
+				return format(messages.value.band, {
+					from: text(s.base[row]),
+					to: text(y)
+				});
+			}
+			if (s.stackEnds && axes.value[s.axis] && declaredAxes.value[s.axis]?.percent) return format(messages.value.share, {
+				value: numberFormatFull(locale.value.name)(y),
+				share: percent.value.format(Math.abs(s.top[row] - s.base[row]))
+			});
+			return valueText(s.axis)(y);
+		}
+		/** An x as the axis shows it, in full. */
+		function xText(value) {
+			const m0 = model.value;
+			const name = locale.value.name;
+			const xFormat = axes.value.x.format;
+			if (m0.xKind === "category") {
+				const category = m0.categories[value] ?? "";
+				return xFormat ? xFormat(category) : category;
+			}
+			if (m0.xKind === "time") {
+				if (xFormat) return xFormat(new Date(value));
+				let gap = Number.POSITIVE_INFINITY;
+				for (const s of series.value) gap = Math.min(gap, neighborGap(s.x.values, value));
+				const { unit, digits } = timePrecision(value, gap);
+				return timeFormatFull(name, unit, digits)(value);
+			}
+			if (xFormat) return xFormat(value);
+			return m0.xIntegers && m0.x ? numberTickFormat(name, m0.x, { years: true })(value) : numberFormatFull(name)(value);
+		}
+		const label = computed(() => {
+			if (props.ariaLabel) return props.ariaLabel;
+			const m = messages.value;
+			const name = locale.value.name;
+			const m0 = model.value;
+			if (empty.value) return format(m.summary, {
+				chart: m.chart,
+				series: m.empty
+			});
+			const td = tree.value && treeData.value;
+			if (td) {
+				const value = numberFormatFull(name);
+				const list = td.root.children.map((node) => format(m.slice, {
+					label: node.name,
+					value: value(node.value),
+					share: percent.value.format(node.value / td.root.value)
+				})).join(m.listSeparator);
+				const title = tree.value.props.name;
+				return withKeys(format(m.summary, {
+					chart: m.chart,
+					series: title ? format(m.pie, {
+						name: title,
+						slices: list
+					}) : list
+				}));
+			}
+			const gauge = pie.value?.gauge?.();
+			if (gauge) {
+				const text = numberFormatFull(name);
+				return format(m.summary, {
+					chart: m.chart,
+					series: format(pie.value.props.name ? m.gauge : m.gaugeValue, {
+						name: pie.value.props.name ?? "",
+						value: gauge.text,
+						min: text(gauge.min),
+						max: text(gauge.max)
+					})
+				});
+			}
+			if (pie.value) {
+				const value = numberFormatFull(name);
+				const list = shownSlices.value.map((slice) => format(m.slice, {
+					label: slice.label,
+					value: value(slice.value),
+					share: percent.value.format(slice.share)
+				})).join(m.listSeparator);
+				const off = slices.value.length - shownSlices.value.length;
+				const shown = off ? `${list}${m.itemSeparator}${format(m.hiddenSlices, { count: off })}` : list;
+				const title = pie.value.props.name;
+				return withKeys(format(m.summary, {
+					chart: m.chart,
+					series: title ? format(m.pie, {
+						name: title,
+						slices: shown
+					}) : shown
+				}));
+			}
+			const fs = funnelSeries.value;
+			if (fs) {
+				const stages = funnelStages.value.flatMap((stage, k) => {
+					if (stage.row < 0) return [];
+					const value = seriesText(fs, stage.row);
+					return stage.step === null ? [`${xText(k)} ${value}`] : [format(m.slice, {
+						label: xText(k),
+						value,
+						share: `${m.stageRate} ${rate.value.format(stage.step)}`
+					})];
+				}).join(m.listSeparator);
+				return withKeys(format(m.summary, {
+					chart: m.chart,
+					series: format(m.pie, {
+						name: fs.name,
+						slices: stages
+					})
+				}));
+			}
+			const count = numberFormatFull(name);
+			const parts = m0.series.map((s) => {
+				if (s.input.kind.categoryY) return heatSummary(s);
+				let range = s.input.kind.box ? extent(s.top) : extent(s.y);
+				const low = s.base && !s.stackEnds ? extent(s.base) : null;
+				if (range && low) range = [Math.min(range[0], low[0]), Math.max(range[1], low[1])];
+				if (!range) return format(m.seriesEmpty, { name: s.name });
+				let points = 0;
+				for (let i = 0; i < s.y.length; i++) if (s.y[i] === s.y[i]) points++;
+				const text = s.stackEnds && declaredAxes.value[s.axis]?.percent ? numberFormatFull(name) : valueText(s.axis);
+				const message = s.input.kind.box ? m.boxSeries : s.input.kind.xTitle ? m.binsSeries : m.series;
+				return format(message, {
+					name: s.name,
+					count: count(points),
+					min: text(range[0]),
+					max: text(range[1])
+				});
+			});
+			let chart = m.chart;
+			const bins = m0.series.find((s) => s.input.kind.xTitle)?.rows;
+			if (bins?.length) chart = format(props.horizontal ? m.rangeDown : m.range, {
+				chart: m.chart,
+				from: xText(bins[0].x0),
+				to: xText(bins[bins.length - 1].x1)
+			});
+			else if (m0.x && !radar.value) chart = format(props.horizontal ? m.rangeDown : m.range, {
+				chart: m.chart,
+				from: xText(m0.x[0]),
+				to: xText(m0.x[1])
+			});
+			return withKeys(format(m.summary, {
+				chart,
+				series: parts.join(m.listSeparator)
+			}));
+		});
+		/** What is read out for a heatmap: its size, its range, and where its largest value is. */
+		function heatSummary(s) {
+			const m = messages.value;
+			const count = numberFormatFull(locale.value.name);
+			let top = -1;
+			for (let i = 0; i < s.y.length; i++) if (s.y[i] === s.y[i] && (top < 0 || s.y[i] > s.y[top])) top = i;
+			const range = extent(s.y);
+			if (!range || top < 0) return format(m.seriesEmpty, { name: s.name });
+			const text = heatText(s.input);
+			return format(m.heatmap, {
+				name: s.name,
+				columns: count(allX([s.x.values]).length),
+				rows: count(model.value.yCategories[s.axis]?.length ?? 0),
+				min: text(range[0]),
+				max: text(range[1]),
+				at: `${yCategoryText(s.axis, s.top[top])}${m.itemSeparator}${xText(s.x.values[top])}`
+			});
+		}
+		/** The most rows the table shows: more would take long to lay out, and to read. */
+		const tableCells = computed(() => {
+			if (!props.table || empty.value) return {
+				head: [],
+				rows: []
+			};
+			const m = messages.value;
+			const td = tree.value && treeData.value;
+			if (td) {
+				const value = numberFormatFull(locale.value.name);
+				return {
+					head: [
+						m.tableNode,
+						tree.value.props.name ?? m.tableValue,
+						m.tableShare
+					],
+					rows: td.nodes.filter((node) => node.depth > 0).map((node) => [
+						treePath(node).join(" / "),
+						value(node.value),
+						percent.value.format(node.value / td.root.value)
+					])
+				};
+			}
+			const gauge = pie.value?.gauge?.();
+			if (gauge) return {
+				head: [pie.value.props.name ?? m.tableValue],
+				rows: [[gauge.text]]
+			};
+			if (pie.value) {
+				const value = numberFormatFull(locale.value.name);
+				return {
+					head: [
+						typeof (pie.value.props.label ?? props.x) === "string" ? String(pie.value.props.label ?? props.x) : "",
+						pie.value.props.name ?? m.tableValue,
+						m.tableShare
+					],
+					rows: shownSlices.value.map((slice) => [
+						slice.label,
+						value(slice.value),
+						percent.value.format(slice.share)
+					])
+				};
+			}
+			const list = series.value;
+			const xHead = axes.value.x.title ?? (typeof props.x === "string" ? props.x : "");
+			const fs = funnelSeries.value;
+			if (fs) return {
+				head: [
+					xHead,
+					fs.name,
+					m.stageRate,
+					m.totalRate
+				],
+				rows: funnelStages.value.flatMap((stage, k) => stage.row < 0 ? [] : [[
+					xText(k),
+					seriesText(fs, stage.row),
+					stage.step === null ? "" : rate.value.format(stage.step),
+					stage.total === null ? "" : rate.value.format(stage.total)
+				]])
+			};
+			const heat = list.find((s) => s.kind.categoryY);
+			if (heat) {
+				const xs = allX([heat.x.values]);
+				const down = model.value.yCategories[heat.axis] ?? [];
+				const cells = down.map(() => xs.map(() => ""));
+				const text = heatText(heat);
+				for (let i = 0; i < heat.y.length; i++) {
+					const at = xs.indexOf(heat.x.values[i]);
+					const row = cells[heat.top[i]];
+					if (at >= 0 && row && heat.y[i] === heat.y[i]) row[at] = text(heat.y[i]);
+				}
+				return {
+					head: [axes.value[heat.axis]?.title ?? "", ...xs.map((x) => xText(x))],
+					rows: down.map((_, k) => [yCategoryText(heat.axis, k), ...cells[k]])
+				};
+			}
+			if (list.some((s) => s.kind.tooltip === "item")) {
+				const rows = [];
+				for (const s of list) for (let i = 0; i < s.y.length; i++) {
+					const x = s.x.values[i];
+					if (x !== x || s.y[i] !== s.y[i]) continue;
+					rows.push([
+						s.name,
+						xText(x),
+						seriesText(s, i)
+					]);
+				}
+				return {
+					head: [
+						m.tableSeries,
+						xHead,
+						axes.value.y?.title ?? m.tableValue
+					],
+					rows
+				};
+			}
+			const xs = allX(list.map((s) => s.x.values));
+			const binned = list.find((s) => s.kind.xTitle);
+			const xCell = (x) => {
+				const row = binned ? rowAt(binned.x.values, x) : -1;
+				return binned && row >= 0 ? binned.kind.xTitle(binned, row, xText) : xText(x);
+			};
+			const counted = binned?.props.value;
+			return {
+				head: [xHead || (typeof counted === "string" ? counted : ""), ...list.map((s) => withUnit(s.name, axes.value[s.axis]?.title))],
+				rows: xs.map((x) => [xCell(x), ...list.map((s) => {
+					const row = rowAt(s.x.values, x);
+					return row < 0 || s.y[row] !== s.y[row] ? "" : seriesText(s, row);
+				})])
+			};
+		});
+		/** `name` with the unit at the end of `title` (in brackets), if it hasn't one already. */
+		function withUnit(name, title) {
+			const unit = title && /\s*[(（][^()（）]+[)）]\s*$/.exec(title)?.[0].trim();
+			return unit && !name.endsWith(unit) ? `${name}${unit}` : name;
+		}
+		/** The table's caption: the chart's name, else what its series are. */
+		const tableCaption = computed(() => {
+			if (props.ariaLabel) return props.ariaLabel;
+			const m = messages.value;
+			const names = pie.value ? [pie.value.props.name].filter((name) => !!name) : series.value.map((s) => s.name);
+			return names.length ? format(m.tableOf, { names: names.join(m.nameSeparator) }) : m.table;
+		});
+		const table = {
+			shown: computed(() => !!props.table && !fromServer.value),
+			caption: tableCaption,
+			head: computed(() => tableCells.value.head),
+			rows: computed(() => tableCells.value.rows.slice(0, TABLE_ROWS)),
+			more: computed(() => {
+				const count = tableCells.value.rows.length;
+				if (count <= TABLE_ROWS) return "";
+				const number = numberFormatFull(locale.value.name);
+				return format(messages.value.tableMore, {
+					shown: number(TABLE_ROWS),
+					count: number(count)
+				});
+			}),
+			close: () => {
+				emit("update:table", false);
+				rootRef.value?.focus();
+			}
+		};
+		/** The summary, and how to explore it when the chart can be. */
+		function withKeys(summary) {
+			if (!interactive.value) return summary;
+			return format(zoomOn.value ? messages.value.zoomKeys : messages.value.keys, { summary });
+		}
+		const labels = computed(() => {
+			const f = funnelLayout.value;
+			if (f) return [
+				...f.names.map((tick, i) => ({
+					...tick,
+					key: `stage:${i}`,
+					axis: "stage"
+				})),
+				...f.values.map((tick, i) => ({
+					...tick,
+					key: `value:${i}`,
+					axis: "value"
+				})),
+				...f.rates.map((tick, i) => ({
+					...tick,
+					key: `rate:${i}`,
+					axis: "rate"
+				}))
+			];
+			const r = radarLayout.value;
+			if (r) return r.labels.map((tick, i) => ({
+				...tick,
+				key: `spoke:${i}`,
+				axis: "spoke"
+			}));
+			const l = layout.value;
+			if (!l) return [];
+			const out = [];
+			for (const axis of [
+				l.x,
+				l.y.y,
+				l.y.y2
+			]) {
+				if (!axis) continue;
+				axis.labels.forEach((tick, i) => out.push({
+					...tick,
+					key: `${axis.position}:${i}`,
+					axis: axis.position
+				}));
+			}
+			return out;
+		});
+		const legend = computed(() => {
+			const l = layout.value ?? pieLayout.value ?? treeLayout.value ?? radarLayout.value ?? funnelLayout.value;
+			if (!l) return [];
+			return l.legend.map((item) => ({
+				...item,
+				...legendEntries.value[item.index]
+			}));
+		});
+		const titles = computed(() => {
+			const l = layout.value;
+			if (!l) return [];
+			return [
+				l.x,
+				l.y.y,
+				l.y.y2
+			].flatMap((axis) => axis?.title ? [{
+				key: axis.position,
+				...axis.title
+			}] : []);
+		});
+		/** The size of what is drawn: a chart with axes, or a pie. */
+		const frame = computed(() => layout.value ?? pieLayout.value ?? treeLayout.value ?? radarLayout.value ?? funnelLayout.value);
+		const overlay = {
+			shown: computed(() => !!frame.value && !empty.value && !fromServer.value),
+			labels,
+			titles,
+			legend,
+			legendBox: computed(() => (layout.value ?? pieLayout.value ?? treeLayout.value ?? radarLayout.value ?? funnelLayout.value)?.legendBox),
+			hole: computed(() => {
+				const tl = treeLayout.value;
+				if (tl && tree.value?.shape === "sunburst" && tl.inner > 0 && !empty.value && !fromServer.value) return {
+					left: tl.cx,
+					top: tl.cy,
+					width: tl.inner * 2 * .8
+				};
+				const l = pieLayout.value;
+				if (!l || empty.value || fromServer.value || !(holeRatio.value > 0)) return null;
+				const box = arcBox(pieArc.value[0], pieArc.value[1]);
+				return {
+					left: l.cx,
+					top: l.cy,
+					width: l.radius * holeRatio.value * 2 * .8,
+					above: box.bottom < .01
+				};
+			}),
+			center: () => pie.value?.center() ?? tree.value?.center?.(),
+			toggle,
+			isolate,
+			hint: computed(() => messages.value.legendHint),
+			focus: (index) => focused.value = index,
+			data: dataLabels,
+			dataShown: computed(() => labelsShown.value),
+			dataFocus: computed(() => pie.value ? null : focused.value ?? pointed.value),
+			markers: markerLabels,
+			empty: computed(() => empty.value && !props.loading),
+			emptyContent: () => slots.empty?.() ?? messages.value.empty,
+			loading: computed(() => !!props.loading)
+		};
+		const stripState = computed(() => {
+			const l = layout.value;
+			if (!l?.strip || !rangePart.value) return null;
+			const [f0, f1] = l.x.full;
+			const [d0, d1] = l.x.scale.domain;
+			const span = f1 - f0 || 1;
+			return {
+				rect: l.strip,
+				horizontal: !!props.horizontal,
+				from: Math.max(0, (d0 - f0) / span),
+				to: Math.min(1, (d1 - f0) / span)
+			};
+		});
+		/**
+		* What the strip's sketch is drawn from: its box, all of x and each y axis'
+		* whole span. Kept the same object while they stay, so panning, which only
+		* moves the shown part, doesn't draw the sketch again.
+		*/
+		const sameWindow = (a, b) => a[0] === b[0] && a[1] === b[1];
+		const stripSketch = computed((old) => {
+			const l = layout.value;
+			if (!l?.strip || !rangePart.value) return null;
+			const next = {
+				rect: l.strip,
+				x: l.x.full,
+				y: {}
+			};
+			for (const [name, axis] of Object.entries(l.y)) if (axis) next.y[name] = {
+				full: axis.full,
+				log: axis.scale.kind === "log"
+			};
+			if (old && old.rect.x === next.rect.x && old.rect.y === next.rect.y && old.rect.width === next.rect.width && old.rect.height === next.rect.height && sameWindow(old.x, next.x) && Object.keys(old.y).length === Object.keys(next.y).length && Object.entries(next.y).every(([name, axis]) => {
+				const was = old.y[name];
+				return !!was && was.log === axis.log && sameWindow(was.full, axis.full);
+			})) return old;
+			return next;
+		});
+		/** Draws every series shown on the strip, in one quiet ink, over all of x. */
+		function paintStrip(canvas) {
+			const sketch = stripSketch.value;
+			if (!sketch) return;
+			const strip = sketch.rect;
+			themeVersion.value;
+			const dpr = dprNow();
+			const width = Math.round(strip.width * dpr);
+			const height = Math.round(strip.height * dpr);
+			if (canvas.width !== width) canvas.width = width;
+			if (canvas.height !== height) canvas.height = height;
+			canvas.style.width = `${strip.width}px`;
+			canvas.style.height = `${strip.height}px`;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx.clearRect(0, 0, strip.width, strip.height);
+			drawStrip(ctx, sketch, dpr);
+		}
+		/** The strip's sketch, in the strip's own px. */
+		function drawStrip(ctx, sketch, dpr) {
+			const strip = sketch.rect;
+			const horizontal = !!props.horizontal;
+			const pad = 4;
+			const plot = {
+				x: 0,
+				y: 0,
+				width: strip.width,
+				height: strip.height
+			};
+			const along = horizontal ? [0, strip.height] : [0, strip.width];
+			const m = model.value;
+			const x = m.xKind === "category" ? categoryScale(m.categories, along) : linearScale(sketch.x, along, m.xKind === "time" ? "time" : "linear");
+			const ink = resolveColor("var(--dou-chart-range-ink)");
+			const length = horizontal ? strip.height : strip.width;
+			for (const s of series.value) {
+				const axis = sketch.y[s.axis];
+				if (!axis) continue;
+				const span = horizontal ? [pad, strip.width - pad] : [strip.height - pad, pad];
+				const data = m.y[s.axis] ?? axis.full;
+				const ends = m.zero[s.axis] ? [Math.min(0, data[0]), Math.max(0, data[1])] : [data[0], data[1] > data[0] ? data[1] : data[0] + 1];
+				const y = axis.log ? logScale(axis.full, span) : linearScale(ends, span);
+				const step = m.xStep;
+				const view = {
+					x,
+					y,
+					horizontal,
+					band: x.kind === "category" ? x.step : step > 0 ? step * Math.abs(x.k) : length / 8,
+					point: horizontal ? (v, value) => [y.map(value), x.map(v)] : (v, value) => [x.map(v), y.map(value)],
+					plot,
+					dpr,
+					vector: isSvg(ctx),
+					colors: colors.value
+				};
+				ctx.save();
+				ctx.beginPath();
+				ctx.rect(0, 0, strip.width, strip.height);
+				ctx.clip();
+				s.kind.draw(ctx, {
+					...s,
+					color: ink,
+					props: {
+						...s.props,
+						dots: false,
+						lineWidth: 1
+					}
+				}, view);
+				ctx.restore();
+			}
+		}
+		const zoomLayer = {
+			brush: computed(() => brushDraft.value ?? selection.value),
+			strip: stripState,
+			sketch: stripSketch,
+			least: computed(() => {
+				const l = layout.value;
+				if (!l) return 0;
+				const span = l.x.full[1] - l.x.full[0];
+				return span > 0 ? Math.min(1, leastX.value / span) : 1;
+			}),
+			step: computed(() => {
+				const l = layout.value;
+				const m = model.value;
+				if (!l || m.xKind !== "category") return .01;
+				return 1 / Math.max(1, l.x.full[1] - l.x.full[0]);
+			}),
+			texts: computed(() => {
+				const l = layout.value;
+				if (!l) return ["", ""];
+				const m = model.value;
+				const [from, to] = l.x.scale.domain;
+				if (m.xKind === "category") {
+					const [a, b] = windowToInterval([from, to], m.xKind, m.categories);
+					return [String(a), String(b)];
+				}
+				return [xText(from), xText(to)];
+			}),
+			labels: computed(() => [messages.value.rangeStart, messages.value.rangeEnd]),
+			show: (from, to, settle) => {
+				const l = layout.value;
+				if (!l) return;
+				const [f0, f1] = l.x.full;
+				const span = f1 - f0;
+				showX([f0 + from * span, f0 + to * span], settle);
+			},
+			reset: () => showX(null),
+			start: () => setActive(null, null),
+			paint: paintStrip
+		};
+		const uid = useId();
+		let drawings = 0;
+		const SRGB = /^(#|rgba?\()/;
+		let normalizer;
+		/**
+		* A computed color as `#rrggbb` or `rgba(…)`, which every SVG reader
+		* understands. Colors a canvas keeps in another space (`oklab(…)`) are
+		* painted on a pixel and read back.
+		*/
+		function plainColor(color) {
+			if (SRGB.test(color) || typeof document === "undefined") return color;
+			normalizer ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+			if (!normalizer) return color;
+			normalizer.fillStyle = "#000";
+			normalizer.fillStyle = color;
+			const parsed = String(normalizer.fillStyle);
+			if (SRGB.test(parsed)) return parsed;
+			normalizer.clearRect(0, 0, 1, 1);
+			normalizer.fillRect(0, 0, 1, 1);
+			const [r, g, b, alpha] = normalizer.getImageData(0, 0, 1, 1).data;
+			return alpha === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${num(alpha / 255)})`;
+		}
+		/** Room either side of a marker's label on its backdrop. */
+		function svgText(text, x, top, style) {
+			let attributes = ` x="${num(x)}" y="${num(top + 8 + style.size * .35)}"${paintAttribute("fill", style.color)}`;
+			if (style.size !== 12) attributes += ` font-size="${num(style.size)}"`;
+			if (style.weight && style.weight !== "400" && style.weight !== "normal") attributes += ` font-weight="${style.weight}"`;
+			if (style.anchor && style.anchor !== "start") attributes += ` text-anchor="${style.anchor}"`;
+			if (style.halo) attributes += `${paintAttribute("stroke", style.halo)} stroke-width="3" stroke-linejoin="round" paint-order="stroke"`;
+			return `<text${attributes}>${escapeXml(text)}</text>`;
+		}
+		/** `text` cut short with an ellipsis to fit `width`, as a clipped tick label shows. */
+		function fitText(text, width) {
+			if (measure(text) <= width) return text;
+			const chars = [...text];
+			let end = chars.length;
+			while (end > 0 && measure(`${chars.slice(0, end).join("")}…`) > width) end--;
+			return `${chars.slice(0, end).join("")}…`;
+		}
+		/** A legend entry's swatch, as the page draws it. */
+		function swatch(kind, dashed, left, top, color) {
+			const fill = paintAttribute("fill", color);
+			const box = (x, y, width, height, r) => `<rect x="${num(x)}" y="${num(y)}" width="${width}" height="${height}" rx="${r}"${fill}/>`;
+			if (kind === "area" || kind === "radar") return box(left, top + 4, 12, 8, 2);
+			if (kind === "bar" || kind === "pie") return box(left + 2, top + 4, 8, 8, 2);
+			if (kind === "scatter") return `<circle cx="${num(left + 6)}" cy="${num(top + 8)}" r="4"${fill}/>`;
+			if (dashed) return box(left, top + 7, 4, 2, 0) + box(left + 7, top + 7, 4, 2, 0);
+			return box(left, top + 7, 12, 2, 1);
+		}
+		/** A heatmap's scale in the legend, as the page draws it. */
+		function scaleSwatch(svg, stops, left, top, width) {
+			const id = svg.id("scale");
+			return `<defs><linearGradient id="${id}">${stops.map((stop, i) => `<stop offset="${num(i / Math.max(1, stops.length - 1))}"${paintAttribute("stop-color", stop)}/>`).join("")}</linearGradient></defs><rect x="${num(left)}" y="${num(top + 4)}" width="${width}" height="8" rx="2" fill="url(#${id})"/>`;
+		}
+		/** The texts in an element of the chart (a donut's center), where the page shows them. */
+		function textsIn(el, origin, color) {
+			const out = [];
+			const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+			const range = document.createRange();
+			for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+				const text = node.textContent?.trim();
+				const parent = node.parentElement;
+				if (!text || !parent) continue;
+				range.selectNodeContents(node);
+				const box = range.getBoundingClientRect();
+				if (!box.width) continue;
+				const style = getComputedStyle(parent);
+				const fontSize = Number.parseFloat(style.fontSize) || 12;
+				out.push(svgText(text, box.left - origin.left, box.top - origin.top + box.height / 2 - 8, {
+					color: color(style.color),
+					size: fontSize,
+					weight: style.fontWeight
+				}));
+			}
+			return out.join("");
+		}
+		/** A filled box; nothing when it has no room. */
+		const svgBox = (r, fill) => r.width > 0 && r.height > 0 ? `<rect x="${num(r.x)}" y="${num(r.y)}" width="${num(r.width)}" height="${num(r.height)}"${paintAttribute("fill", fill)}/>` : "";
+		/** The range strip: its sketch, the parts not shown washed out and the part shown. */
+		function stripMarkup(svg, color, radius) {
+			const state = stripState.value;
+			const sketch = stripSketch.value;
+			if (!state || !sketch) return;
+			const { rect, horizontal } = state;
+			const box = svgBox;
+			svg.raw(`<rect x="${num(rect.x + .5)}" y="${num(rect.y + .5)}" width="${num(rect.width - 1)}" height="${num(rect.height - 1)}" rx="${num(Math.max(0, radius - .5))}" fill="none"${paintAttribute("stroke", color("var(--dou-color-border-subtle)"))}/>`);
+			svg.raw(`<g transform="translate(${num(rect.x)} ${num(rect.y)})">`);
+			svg.layer(.56, () => drawStrip(svg, sketch, 1));
+			svg.raw("</g>");
+			const length = horizontal ? rect.height : rect.width;
+			const start = horizontal ? rect.y : rect.x;
+			const a = start + state.from * length;
+			const b = start + state.to * length;
+			const stretch = (from, to) => horizontal ? {
+				x: rect.x,
+				y: from,
+				width: rect.width,
+				height: to - from
+			} : {
+				x: from,
+				y: rect.y,
+				width: to - from,
+				height: rect.height
+			};
+			const shade = color("color-mix(in oklab, var(--dou-chart-surface) 72%, transparent)");
+			const edge = color("color-mix(in oklab, var(--dou-color-text) 32%, transparent)");
+			const shown = stretch(a, b);
+			svg.raw(box(stretch(start, a), shade) + box(stretch(b, start + length), shade) + box(shown, color("color-mix(in oklab, var(--dou-color-text) 6%, transparent)")));
+			const edges = horizontal ? [{
+				x: shown.x,
+				y: shown.y,
+				width: 1,
+				height: shown.height
+			}, {
+				x: shown.x + shown.width - 1,
+				y: shown.y,
+				width: 1,
+				height: shown.height
+			}] : [{
+				x: shown.x,
+				y: shown.y,
+				width: shown.width,
+				height: 1
+			}, {
+				x: shown.x,
+				y: shown.y + shown.height - 1,
+				width: shown.width,
+				height: 1
+			}];
+			svg.raw(edges.map((r) => box(r, edge)).join(""));
+		}
+		/** The chart as it is shown, as an SVG document. */
+		function exportSVG(options = {}) {
+			const root = rootRef.value;
+			const style = root && typeof getComputedStyle !== "undefined" ? getComputedStyle(root) : null;
+			const svg = new SvgPainter(`${uid}-${drawings++}-`, plainColor);
+			const color = (css) => plainColor(resolveColor(css));
+			drawSvg(svg, color, style);
+			const { width, height, padding } = exportSize(options);
+			const background = options.background === false ? "" : `<rect width="${num(width)}" height="${num(height)}"${paintAttribute("fill", color("var(--dou-chart-surface)"))}/>`;
+			const font = escapeXml(style?.fontFamily || "sans-serif");
+			return `<svg xmlns="http://www.w3.org/2000/svg" width="${num(width)}" height="${num(height)}" viewBox="0 0 ${num(width)} ${num(height)}" font-family="${font}" font-size="12"><title>${escapeXml(label.value)}</title>${background}<g transform="translate(${num(padding)} ${num(padding)})">${svg.markup()}</g></svg>`;
+		}
+		/** The exported image's size: the chart's, with the room around it. */
+		function exportSize(options) {
+			const padding = Math.max(0, options.padding ?? 16);
+			return {
+				width: (frame.value?.width ?? 0) + padding * 2,
+				height: (frame.value?.height ?? 0) + padding * 2,
+				padding
+			};
+		}
+		/**
+		* Draws the whole chart into `svg`: what the canvas shows, then its text.
+		* `color` makes a color the SVG can take; `style` is the chart's computed
+		* style, `null` on the server.
+		*/
+		function drawSvg(svg, color, style) {
+			const l = frame.value;
+			const root = rootRef.value;
+			const width = l?.width ?? 0;
+			const height = l?.height ?? 0;
+			const texts = [];
+			if (l && empty.value) {
+				const text = root?.querySelector(`.${ns.e("empty")}`)?.textContent?.trim() || messages.value.empty;
+				texts.push(svgText(text, width / 2, height / 2 - 8, {
+					color: color("var(--dou-color-text-tertiary)"),
+					size: Number.parseFloat(style?.getPropertyValue("--dou-font-size-sm") ?? "") || 12,
+					anchor: "middle"
+				}));
+			} else if (treeLayout.value) {
+				paintTree(svg, 1, true);
+				const center = root?.querySelector(`.${ns.e("center")}`);
+				if (center && root) texts.push(textsIn(center, root.getBoundingClientRect(), color));
+			} else if (pieLayout.value) {
+				paintPie(svg, 1, 1, true);
+				const center = root?.querySelector(`.${ns.e("center")}`);
+				if (center && root) texts.push(textsIn(center, root.getBoundingClientRect(), color));
+			} else if (funnelLayout.value) {
+				paintFunnel(svg, 1, 1, true);
+				const ink = color("var(--dou-chart-label)");
+				const strong = color("var(--dou-color-text-secondary)");
+				for (const tick of labels.value) {
+					const text = tick.clipped ? fitText(tick.text, tick.width) : tick.text;
+					texts.push(svgText(text, tick.left, tick.top, {
+						color: tick.axis === "value" ? strong : ink,
+						size: 12
+					}));
+				}
+			} else if (radarLayout.value) {
+				paintRadar(svg, 1, 1, true);
+				const ink = color("var(--dou-chart-label)");
+				for (const tick of labels.value) {
+					const text = tick.clipped ? fitText(tick.text, tick.width) : tick.text;
+					texts.push(svgText(text, tick.left, tick.top, {
+						color: ink,
+						size: 12
+					}));
+				}
+			} else if (layout.value) {
+				paint(svg, 1, 1, 1, true);
+				stripMarkup(svg, color, Number.parseFloat(style?.getPropertyValue("--dou-radius-control") ?? "") || 6);
+				const ink = color("var(--dou-chart-label)");
+				for (const tick of labels.value) {
+					const text = tick.clipped ? fitText(tick.text, tick.width) : tick.text;
+					texts.push(svgText(text, tick.left, tick.top, {
+						color: ink,
+						size: 12
+					}));
+				}
+				const title = color("var(--dou-chart-title)");
+				const weight = style?.getPropertyValue("--dou-font-weight-medium").trim() || "500";
+				for (const t of titles.value) texts.push(svgText(t.text, t.left, t.top, {
+					color: title,
+					size: 12,
+					weight,
+					anchor: t.align
+				}));
+				for (const m of markerLabels.value) {
+					if (m.backdrop) {
+						const plate = measure(m.text) + 8;
+						const shift = m.align === "start" ? 0 : m.align === "middle" ? plate / 2 - BACKDROP : plate - 8;
+						texts.push(`<rect x="${num(m.left - BACKDROP - shift)}" y="${num(m.top)}" width="${num(plate)}" height="16" rx="4"${paintAttribute("fill", color(`color-mix(in oklab, ${markerText(m.tone)} 10%, var(--dou-chart-surface))`))}/>`);
+					}
+					texts.push(svgText(m.text, m.left, m.top, {
+						color: color(markerText(m.tone)),
+						size: 12,
+						anchor: m.align
+					}));
+				}
+			}
+			if (l && !empty.value) {
+				const ink = color("var(--dou-color-text-secondary)");
+				const weight = style?.getPropertyValue("--dou-font-weight-medium").trim() || "500";
+				for (const value of dataLabels.value) {
+					const text = value.width === void 0 ? value.text : fitText(value.text, value.width);
+					texts.push(svgText(text, value.left, value.top, {
+						color: value.ink ? color(value.ink) : ink,
+						size: 12,
+						anchor: value.align,
+						weight: value.on ? weight : void 0
+					}));
+				}
+			}
+			const on = color("var(--dou-color-text-secondary)");
+			const off = color("var(--dou-color-text-disabled)");
+			const box = l?.legendBox;
+			for (const item of legend.value) {
+				if (box && item.top + 16 > box.y + box.height + .5) continue;
+				const room = (item.swatch ?? 12) + 6;
+				const mark = item.scale ? scaleSwatch(svg, item.scale, item.left, item.top, item.swatch ?? 40) : swatch(item.kind, item.dashed, item.left, item.top, color(item.color));
+				texts.push(item.off ? `<g opacity="0.32">${mark}</g>` : mark);
+				const text = item.clipped ? fitText(item.text, item.width - room) : item.text;
+				texts.push(svgText(text, item.left + room, item.top, {
+					color: item.off ? off : on,
+					size: 12
+				}));
+			}
+			svg.raw(texts.join(""));
+		}
+		const PNG_SOURCE = {
+			scope: "@dou-ui/chart",
+			hint: "use a smaller padding or exportSVG()"
+		};
+		/** The chart as a PNG image, from its SVG. */
+		async function exportPNG(options = {}) {
+			const { width, height } = exportSize(options);
+			return svgToPNG(exportSVG(options), {
+				width,
+				height,
+				pixelRatio: options.pixelRatio,
+				...PNG_SOURCE
+			});
+		}
+		__expose({
+			exportSVG,
+			exportPNG
+		});
+		const serverDrawing = computed(() => {
+			if (typeof window !== "undefined" || !frame.value || empty.value) return "";
+			const svg = new SvgPainter(`${uid}-`);
+			drawSvg(svg, (css) => resolveColor(css), null);
+			return svg.markup();
+		});
+		const staticState = {
+			shown: computed(() => fromServer.value && !!frame.value && !empty.value),
+			size: computed(() => ({
+				width: frame.value?.width ?? 0,
+				height: frame.value?.height ?? 0
+			})),
+			markup: serverDrawing,
+			label
+		};
+		/** Which ways on the screen what is shown can be moved: only when zoomed in along them. */
+		function panDirections() {
+			const { x, y } = zoomAxes.value;
+			const panX = x && !!xWindow.value;
+			const panY = y && !!yWindow.value;
+			return props.horizontal ? {
+				sideways: panY,
+				upDown: panX
+			} : {
+				sideways: panX,
+				upDown: panY
+			};
+		}
+		/** Which way a finger may scroll the page over the plot: not the way it pans. */
+		const touchAction = computed(() => {
+			if (!zoomOn.value) return void 0;
+			const { sideways, upDown } = panDirections();
+			return sideways && upDown ? "none" : sideways ? "pan-y" : upDown ? "pan-x" : "pan-x pan-y";
+		});
+		onBeforeUnmount(() => {
+			if (drag) endDrag(false);
+			if (gestureFrame) cancelAnimationFrame(gestureFrame);
+		});
+		const cssLength = (value) => typeof value === "number" ? `${value}px` : value;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "root",
+				class: normalizeClass([
+					unref(ns).b(),
+					unref(ns).is("interactive", interactive.value),
+					unref(ns).is("zoomed", zoomOn.value && zoomed.value),
+					unref(ns).is("brushing", !!brushPart.value && !zoomOn.value),
+					unref(ns).is("loading", !!__props.loading),
+					unref(ns).is("table", table.shown.value)
+				]),
+				style: normalizeStyle({
+					height: cssLength(__props.height),
+					touchAction: touchAction.value
+				}),
+				role: fromServer.value ? void 0 : interactive.value || table.shown.value ? "group" : "img",
+				"aria-roledescription": interactive.value && !fromServer.value ? unref(messages).chart : void 0,
+				"aria-label": fromServer.value ? void 0 : label.value,
+				"aria-busy": __props.loading || void 0,
+				tabindex: interactive.value && !fromServer.value ? 0 : void 0,
+				onPointermove: onPointerMove,
+				onPointerleave: onPointerLeave,
+				onPointerdown: onPointerDown,
+				onPointerup: onPointerUp,
+				onPointercancel: onPointerCancel,
+				onKeydown,
+				onClick,
+				onWheel,
+				onDblclick,
+				onBlur: _cache[0] || (_cache[0] = ($event) => active.value && !active.value.pointer && setActive(null, null))
+			}, [
+				createElementVNode("div", {
+					class: normalizeClass(unref(ns).e("parts")),
+					hidden: ""
+				}, [renderSlot(_ctx.$slots, "default")], 2),
+				createElementVNode("canvas", {
+					ref: "canvas",
+					class: normalizeClass(unref(ns).e("canvas")),
+					"aria-hidden": "true"
+				}, null, 2),
+				createVNode(static_default, { state: staticState }),
+				createVNode(overlay_default, { state: overlay }),
+				createVNode(zoom_layer_default, { state: zoomLayer }),
+				createVNode(pointer_default, { state: pointer }),
+				createVNode(table_default, { state: table })
+			], 46, _hoisted_1);
+		};
+	}
+});
+export { chart_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=chart.vue_vue_type_script_setup_true_lang.js.map