vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/JourneySankey.mjs

@@ -0,0 +1,682 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { useTooltipController } from "../model/tooltip.mjs";
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
+import { useAnimationCallbacks } from "../animation/useAnimationCallbacks.mjs";
+import { useReducedMotion } from "../animation/useReducedMotion.mjs";
+import { motionTokens } from "../animation/motion.mjs";
+import { useKeyedTransition } from "../animation/useKeyedTransition.mjs";
+import { chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { chartSizeProps } from "../hooks/useResponsiveSize.mjs";
+import { standaloneChartOptions } from "./shell.mjs";
+import { ChartShell, useChartShell } from "./ChartShell.mjs";
+import { useItemKeyboard } from "../events/useItemKeyboard.mjs";
+import { computeJourneyLayout, connectedLinks, journeyLinksOf, journeyNodeId, largestJourneyThrough, reorderedNodes, truncateMiddle } from "./journeyUtils.mjs";
+import { JourneySankeyVueProps } from "./journeyTypes.mjs";
+import { computed, createVNode, defineComponent, mergeProps, reactive, ref, toRaw, toRefs, watch } from "vue";
+//#region src/chart/JourneySankey.tsx
+var HEADER_BAND = 28;
+var LABEL_HEIGHT = 34;
+var CHAR_WIDTH = 6.6;
+var CURVATURE = .42;
+var journeyEmits = {
+	"update:pinned": (_path) => true,
+	"node-click": (_node, _index, _event) => true,
+	"node-mouseenter": (_node, _index, _event) => true,
+	"node-mouseleave": (_node, _index, _event) => true,
+	"link-click": (_link, _index, _event) => true,
+	"link-mouseenter": (_link, _index, _event) => true,
+	"link-mouseleave": (_link, _index, _event) => true,
+	"animation-start": () => true,
+	"animation-end": () => true
+};
+/** `fade` is the entrance's own opacity; absent outside the first appearance. */
+/** The drawing, set up inside the measured surface so its scope follows the surface's. */
+function useJourneySankey(props, slots, emit) {
+	const tooltip = useTooltipController();
+	const reducedMotion = useReducedMotion();
+	const rows = useTrackedData(() => props.data);
+	const numbers = computed(() => new Intl.NumberFormat(props.locale));
+	const percent = computed(() => new Intl.NumberFormat(props.locale, { maximumFractionDigits: 1 }));
+	const wholePercent = computed(() => new Intl.NumberFormat(props.locale, { maximumFractionDigits: 0 }));
+	const journeys = computed(() => (rows.value ?? []).flatMap((row) => {
+		const path = getValueByDataKey(row, props.pathKey);
+		const count = toFiniteNumber(getValueByDataKey(row, props.dataKey));
+		return Array.isArray(path) && count !== void 0 && count > 0 ? [{
+			path: path.map(String),
+			count,
+			rows: [row]
+		}] : [];
+	}));
+	const stepCount = computed(() => props.steps ?? Math.max(1, ...journeys.value.map((journey) => journey.path.length)));
+	const labelWidth = computed(() => Math.min(200, Math.max(120, props.width * .2)));
+	const layout = computed(() => computeJourneyLayout(journeys.value, {
+		width: props.width,
+		height: props.height,
+		steps: stepCount.value,
+		exitsKnown: props.exitsKnown,
+		nodeWidth: props.nodeWidth,
+		nodePadding: props.nodePadding,
+		labelHeight: LABEL_HEIGHT,
+		labelWidth: labelWidth.value,
+		top: props.headers ? HEADER_BAND : 0
+	}));
+	let reordered = /* @__PURE__ */ new Set();
+	let previousNodes = [];
+	let foldTargets = /* @__PURE__ */ new Map();
+	let unfoldStarts = /* @__PURE__ */ new Map();
+	watch(layout, ({ nodes }) => {
+		reordered = reorderedNodes(previousNodes, nodes);
+		foldTargets = foldAnchors(previousNodes, nodes);
+		unfoldStarts = foldAnchors(nodes, previousNodes);
+		previousNodes = nodes;
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	function foldAnchors(from, to) {
+		if (!reordered.size) return /* @__PURE__ */ new Map();
+		const target = new Map(to.map((node) => [node.id, node]));
+		const anchors = /* @__PURE__ */ new Map();
+		for (const node of from) {
+			const neighbours = from.filter((other) => other.step === node.step && other.id !== node.id && target.has(other.id) && !reordered.has(other.id));
+			const previous = neighbours.filter((other) => other.y < node.y).at(-1);
+			const next = neighbours.find((other) => other.y > node.y);
+			const above = previous && target.get(previous.id);
+			const below = next && target.get(next.id);
+			const top = above ? above.y + above.continueHeight + above.exitHeight : 0;
+			const bottom = below?.y ?? Infinity;
+			anchors.set(node.id, Math.max(top, Math.min(bottom, node.y)));
+		}
+		return anchors;
+	}
+	const fold = (node, size) => ({
+		...node,
+		continueHeight: node.continueHeight * size,
+		exitHeight: node.exitHeight * size
+	});
+	const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+	const mix = (a, b, t) => a + (b - a) * t;
+	const { items } = useKeyedTransition(() => [...layout.value.nodes.map((node) => ({
+		kind: "node",
+		node
+	})), ...layout.value.links.map((link) => ({
+		kind: "link",
+		link
+	}))], {
+		key: (shape) => shape.kind === "node" ? `n:${shape.node.id}` : `l:${shape.link.id}`,
+		interpolate: (from, to, t) => {
+			const shape = interpolateShape(from, to, t);
+			return from.fade === void 0 ? shape : {
+				...shape,
+				fade: Math.min(1, Math.max(0, mix(from.fade, to.fade ?? 1, t)))
+			};
+		},
+		enterFrom: (shape) => shape.kind === "node" ? {
+			kind: "node",
+			node: {
+				...shape.node,
+				y: unfoldStarts.get(shape.node.id) ?? shape.node.y,
+				continueHeight: 0,
+				exitHeight: 0
+			}
+		} : {
+			kind: "link",
+			link: {
+				...shape.link,
+				width: 0
+			}
+		},
+		exitTo: (shape) => shape.kind === "node" ? {
+			kind: "node",
+			node: {
+				...shape.node,
+				y: foldTargets.get(shape.node.id) ?? shape.node.y,
+				continueHeight: 0,
+				exitHeight: 0
+			}
+		} : {
+			kind: "link",
+			link: {
+				...shape.link,
+				width: 0
+			}
+		},
+		reveal,
+		connected: true,
+		isActive: () => props.isAnimationActive,
+		transition: () => props.transition,
+		onStart: callbacks.onStart,
+		onEnd: callbacks.onEnd
+	});
+	function interpolateShape(from, to, t) {
+		if (from.kind === "node" && to.kind === "node") {
+			if (reordered.has(to.node.id)) return {
+				kind: "node",
+				node: t < .5 ? {
+					...fold(from.node, 1 - t * 2),
+					y: mix(from.node.y, foldTargets.get(from.node.id) ?? from.node.y, t)
+				} : {
+					...fold(to.node, t * 2 - 1),
+					y: mix(unfoldStarts.get(to.node.id) ?? to.node.y, to.node.y, t)
+				}
+			};
+			return {
+				kind: "node",
+				node: {
+					...to.node,
+					x: mix(from.node.x, to.node.x, t),
+					y: mix(from.node.y, to.node.y, t),
+					continueHeight: mix(from.node.continueHeight, to.node.continueHeight, t),
+					exitHeight: mix(from.node.exitHeight, to.node.exitHeight, t)
+				}
+			};
+		}
+		if (from.kind === "link" && to.kind === "link") return {
+			kind: "link",
+			link: {
+				...to.link,
+				x0: mix(from.link.x0, to.link.x0, t),
+				x1: mix(from.link.x1, to.link.x1, t),
+				y0: mix(from.link.y0, to.link.y0, t),
+				y1: mix(from.link.y1, to.link.y1, t),
+				width: mix(from.link.width, to.link.width, t)
+			}
+		};
+		return to;
+	}
+	function reveal() {
+		const { nodes } = layout.value;
+		if (!nodes.length) return void 0;
+		const bottom = Math.max(...nodes.map((node) => node.y + node.continueHeight + node.exitHeight));
+		const span = props.width + bottom || 1;
+		return {
+			from: (shape) => shape.kind === "node" ? {
+				...shape,
+				node: {
+					...shape.node,
+					y: shape.node.y - 6
+				},
+				fade: 0
+			} : {
+				...shape,
+				link: {
+					...shape.link,
+					y0: shape.link.y0 - 6,
+					y1: shape.link.y1 - 6
+				},
+				fade: 0
+			},
+			order: (shape) => shape.kind === "node" ? (shape.node.x + shape.node.y) / span : (shape.link.x0 + shape.link.y0) / span
+		};
+	}
+	const hover = ref();
+	const localPinned = ref(null);
+	const pinnedPath = computed(() => props.pinned !== void 0 ? props.pinned : localPinned.value);
+	function setPinned(path) {
+		localPinned.value = path;
+		emit("update:pinned", path);
+	}
+	const highlighted = computed(() => {
+		const { links } = layout.value;
+		if (hover.value) {
+			const start = hover.value.kind === "link" ? links.filter((link) => link.id === hover.value.id) : links.filter((link) => link.source === hover.value.id || link.target === hover.value.id);
+			const ids = connectedLinks(links, start);
+			const nodes = new Set(hover.value.kind === "node" ? [hover.value.id] : []);
+			for (const link of links) if (ids.has(link.id)) {
+				nodes.add(link.source);
+				nodes.add(link.target);
+			}
+			return {
+				links: ids,
+				nodes,
+				pinned: false
+			};
+		}
+		if (pinnedPath.value?.length) return {
+			links: journeyLinksOf(pinnedPath.value, stepCount.value),
+			nodes: new Set(pinnedPath.value.slice(0, stepCount.value).map((name, step) => journeyNodeId(step, name))),
+			pinned: true
+		};
+	});
+	const linkOpacity = (link) => {
+		const h = highlighted.value;
+		if (!h) return .2;
+		return h.links.has(link.id) ? .45 : h.pinned ? .14 : .07;
+	};
+	const nodeOpacity = (node) => {
+		const h = highlighted.value;
+		return !h || h.nodes.has(node.id) ? 1 : .25;
+	};
+	const subtitleOf = (node) => {
+		if (props.subtitleFormatter) return props.subtitleFormatter(node);
+		const count = numbers.value.format(node.count);
+		if (node.step === 0) return `${count} sessions`;
+		if (node.exits === null) return count;
+		if (node.exits === 0) return `${count} · all continue`;
+		return `${count} · ${wholePercent.value.format(node.exits / node.count * 100)}% end here`;
+	};
+	const nodeById = computed(() => new Map(layout.value.nodes.map((node) => [node.id, node])));
+	const linkDescription = (link) => {
+		const source = nodeById.value.get(link.source);
+		const target = nodeById.value.get(link.target);
+		return {
+			name: `${source.name} → ${target.name}`,
+			value: `${numbers.value.format(link.count)} sessions · ${percent.value.format(link.count / source.count * 100)}% of those on ${source.name} at step ${source.step + 1}`
+		};
+	};
+	const tooltipItems = computed(() => {
+		const { nodes, links } = layout.value;
+		const values = {};
+		const names = {};
+		const texts = /* @__PURE__ */ new Map();
+		nodes.forEach((node, i) => {
+			values[`nodes[${i}]`] = node.count;
+			names[`nodes[${i}]`] = node.name;
+			texts.set(node, subtitleOf(node));
+		});
+		links.forEach((link, i) => {
+			const description = linkDescription(link);
+			values[`links[${i}]`] = link.count;
+			names[`links[${i}]`] = description.name;
+			texts.set(link, description.value);
+		});
+		return {
+			data: {
+				nodes,
+				links
+			},
+			values,
+			names,
+			texts
+		};
+	});
+	const tooltipConfiguration = computed(() => {
+		const { data, values, names, texts } = tooltipItems.value;
+		return {
+			dataDefinedOnItem: data,
+			values,
+			names,
+			positions: void 0,
+			pointerItems: [...layout.value.nodes.map((node, index) => ({
+				index,
+				payloadKey: `nodes[${index}]`,
+				identity: node.id,
+				coordinate: {
+					x: node.x + props.nodeWidth,
+					y: node.y
+				}
+			})), ...layout.value.links.map((link, index) => ({
+				index: layout.value.nodes.length + index,
+				payloadKey: `links[${index}]`,
+				identity: `${link.source}→${link.target}`,
+				coordinate: {
+					x: (link.x0 + link.x1) / 2,
+					y: (link.y0 + link.y1) / 2
+				}
+			}))],
+			settings: {
+				stroke: void 0,
+				strokeWidth: void 0,
+				fill: void 0,
+				dataKey: "value",
+				nameKey: "name",
+				name: void 0,
+				hide: false,
+				type: void 0,
+				color: void 0,
+				unit: "",
+				formatter: (value, _name, entry) => texts.get(toRaw(entry.payload)) ?? value
+			}
+		};
+	});
+	tooltip.entries.register(tooltipConfiguration);
+	const nodeIndex = (node) => layout.value.nodes.findIndex((item) => item.id === node.id);
+	const linkIndex = (link) => layout.value.links.findIndex((item) => item.id === link.id);
+	function enterNode(node, event) {
+		hover.value = {
+			kind: "node",
+			id: node.id
+		};
+		const index = nodeIndex(node);
+		if (event) emit("node-mouseenter", node, index, event);
+		tooltip.activate("hover", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index,
+			coordinate: {
+				x: node.x + props.nodeWidth,
+				y: node.y
+			}
+		});
+	}
+	function enterLink(link, event) {
+		hover.value = {
+			kind: "link",
+			id: link.id
+		};
+		const index = linkIndex(link);
+		emit("link-mouseenter", link, index, event);
+		tooltip.activate("hover", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index: layout.value.nodes.length + index,
+			coordinate: {
+				x: (link.x0 + link.x1) / 2,
+				y: (link.y0 + link.y1) / 2
+			}
+		});
+	}
+	function leave() {
+		hover.value = void 0;
+		tooltip.clear("hover", "item");
+	}
+	function leaveNode(node, event) {
+		leave();
+		emit("node-mouseleave", node, nodeIndex(node), event);
+	}
+	function leaveLink(link, event) {
+		leave();
+		emit("link-mouseleave", link, linkIndex(link), event);
+	}
+	function pinThrough(step, names) {
+		const path = largestJourneyThrough(journeys.value, stepCount.value, {
+			step,
+			names
+		});
+		setPinned(path && pinnedPath.value && path.length === pinnedPath.value.length && path.every((name, i) => name === pinnedPath.value[i]) || !path ? null : path);
+	}
+	function clickNode(node, event) {
+		pinThrough(node.step, [node.name]);
+		emit("node-click", node, nodeIndex(node), event);
+	}
+	function clickLink(link, event) {
+		const source = nodeById.value.get(link.source);
+		const target = nodeById.value.get(link.target);
+		pinThrough(source.step, [source.name, target.name]);
+		emit("link-click", link, linkIndex(link), event);
+	}
+	const focused = ref();
+	const focusedNode = () => layout.value.nodes.find((node) => node.id === focused.value);
+	const { onFocus, onKeydown } = useItemKeyboard({
+		empty: () => layout.value.nodes.length === 0,
+		start: () => focused.value === void 0 ? layout.value.nodes[0] : void 0,
+		neighbour: (key) => {
+			const nodes = layout.value.nodes;
+			const current = focusedNode();
+			if (!current) return key.startsWith("Arrow") ? nodes[0] : void 0;
+			if (key === "ArrowDown" || key === "ArrowUp") {
+				const column = nodes.filter((node) => node.step === current.step);
+				return column[column.indexOf(current) + (key === "ArrowDown" ? 1 : -1)];
+			}
+			if (key === "ArrowRight" || key === "ArrowLeft") {
+				const forward = key === "ArrowRight";
+				const candidates = layout.value.links.filter((link) => forward ? link.source === current.id : link.target === current.id).sort((a, b) => b.count - a.count);
+				const nextId = candidates[0] && (forward ? candidates[0].target : candidates[0].source);
+				return nodes.find((node) => node.id === nextId);
+			}
+		},
+		activate: (node) => {
+			focused.value = node.id;
+			enterNode(node);
+		},
+		clear: () => {
+			if (!focusedNode()) return;
+			setPinned(null);
+			focused.value = void 0;
+			leave();
+		},
+		keydown: (event) => {
+			const current = focusedNode();
+			if (!current || event.key !== "Enter" && event.key !== " ") return false;
+			event.preventDefault();
+			clickNode(current, event);
+			return true;
+		}
+	});
+	const linkPath = (link) => {
+		const mid = (link.x1 - link.x0) * CURVATURE;
+		return `M${link.x0},${link.y0}C${link.x0 + mid},${link.y0} ${link.x1 - mid},${link.y1} ${link.x1},${link.y1}`;
+	};
+	const columnWidth = computed(() => {
+		const steps = layout.value.steps;
+		return steps.length > 1 ? steps[1].x - steps[0].x : props.width;
+	});
+	const summary = computed(() => {
+		const sessions = layout.value.steps[0]?.total ?? 0;
+		const steps = layout.value.steps.length;
+		return props.title ?? `Journeys of ${numbers.value.format(sessions)} ${sessions === 1 ? "session" : "sessions"} over ${steps} ${steps === 1 ? "step" : "steps"}`;
+	});
+	const focusedLabel = computed(() => {
+		const node = focused.value ? nodeById.value.get(focused.value) : void 0;
+		return node ? `${node.name}, step ${node.step + 1}: ${subtitleOf(node)}` : summary.value;
+	});
+	const fade = computed(() => reducedMotion.value === "reduce" ? void 0 : `opacity ${motionTokens.feedback.duration}s ${motionTokens.feedback.cssEase}`);
+	const halo = {
+		paintOrder: "stroke",
+		stroke: "var(--v-charts-background, #fff)",
+		strokeWidth: "4px",
+		strokeLinejoin: "round"
+	};
+	return () => {
+		const shapes = items.value;
+		const presence = (phase, progress) => phase === "exit" ? Math.max(0, 1 - (progress ?? 1) * 2) : phase === "enter" ? Math.max(0, (progress ?? 1) * 2 - 1) : 1;
+		const folding = (progress) => progress === void 0 ? 1 : Math.abs(1 - progress * 2);
+		const links = shapes.flatMap(({ key, value, phase, progress }) => value.kind === "link" ? [{
+			key,
+			link: value.link,
+			phase,
+			shown: (value.fade ?? presence(phase, progress)) * (reordered.has(value.link.source) || reordered.has(value.link.target) ? folding(progress) : 1),
+			moving: progress !== void 0
+		}] : []);
+		const nodes = shapes.flatMap(({ key, value, phase, progress }) => value.kind === "node" ? [{
+			key,
+			node: value.node,
+			phase,
+			shown: (value.fade ?? presence(phase, progress)) * (phase === "update" && reordered.has(value.node.id) ? folding(progress) : 1),
+			moving: progress !== void 0
+		}] : []);
+		const labelChars = Math.floor((columnWidth.value - props.nodeWidth - 16) / CHAR_WIDTH);
+		return createVNode("g", {
+			"data-slot": "series",
+			"class": "v-charts-journey",
+			"role": "group",
+			"tabindex": 0,
+			"aria-label": focusedLabel.value,
+			"style": { outline: "none" },
+			"onKeydown": onKeydown,
+			"onFocus": onFocus,
+			"onBlur": () => {
+				focused.value = void 0;
+				leave();
+			}
+		}, [
+			props.headers && createVNode("g", { "class": "v-charts-journey-headers" }, [layout.value.steps.map((step) => createVNode("g", {
+				"key": step.step,
+				"transform": `translate(${step.x},0)`
+			}, [slots.header ? slots.header({
+				...step,
+				width: columnWidth.value
+			}) : createVNode("text", {
+				"y": 14,
+				"style": {
+					fontSize: "12px",
+					fill: "var(--v-charts-text, #666)"
+				}
+			}, [createVNode("tspan", { "style": { fontWeight: 500 } }, [`Step ${step.step + 1}`]), createVNode("tspan", { "style": { fill: "var(--v-charts-text, #666)" } }, [step.previousTotal == null ? ` · ${numbers.value.format(step.total)}` : ` · ${numbers.value.format(step.total)} · ${percent.value.format(step.total / (step.previousTotal || 1) * 100)}% of step ${step.step}`])])]))]),
+			createVNode("g", {
+				"class": "v-charts-journey-links",
+				"fill": "none"
+			}, [links.map(({ key, link, shown, moving }) => createVNode("path", {
+				"key": `v${String(key)}`,
+				"class": "v-charts-journey-link",
+				"d": linkPath(link),
+				"stroke-width": Math.max(link.width, .5),
+				"style": {
+					stroke: props.color,
+					opacity: linkOpacity(link) * shown,
+					transition: moving ? void 0 : fade.value,
+					pointerEvents: "none"
+				}
+			}, null)), links.map(({ key, link, phase }) => phase === "exit" ? null : createVNode("path", {
+				"key": `h${String(key)}`,
+				"class": "v-charts-journey-link-hit",
+				"d": linkPath(link),
+				"stroke": "transparent",
+				"stroke-width": Math.max(link.width, 10),
+				"style": { cursor: "pointer" },
+				"onMouseenter": (event) => enterLink(link, event),
+				"onMouseleave": (event) => leaveLink(link, event),
+				"onClick": (event) => clickLink(link, event)
+			}, null))]),
+			createVNode("g", { "class": "v-charts-journey-nodes" }, [nodes.map(({ key, node, phase, shown, moving }) => {
+				const height = node.continueHeight + node.exitHeight;
+				const href = props.nodeHref?.(node.name, node);
+				const name = truncateMiddle(node.name, node.step === layout.value.steps.length - 1 ? Math.floor(labelWidth.value / CHAR_WIDTH) : labelChars);
+				const subtitle = subtitleOf(node);
+				const isFocused = focused.value === node.id;
+				return createVNode("g", {
+					"key": String(key),
+					"class": "v-charts-journey-node",
+					"style": {
+						opacity: nodeOpacity(node) * shown,
+						transition: moving ? void 0 : fade.value,
+						pointerEvents: phase === "exit" ? "none" : void 0
+					}
+				}, [createVNode("g", {
+					"style": { cursor: "pointer" },
+					"onMouseenter": (event) => enterNode(node, event),
+					"onMouseleave": (event) => leaveNode(node, event),
+					"onClick": (event) => clickNode(node, event)
+				}, [
+					createVNode("rect", {
+						"x": node.x - 4,
+						"y": node.y,
+						"width": props.nodeWidth + 8,
+						"height": Math.max(height, 4),
+						"fill": "transparent"
+					}, null),
+					node.continueHeight > 0 && createVNode("rect", {
+						"class": "v-charts-journey-node-continue",
+						"x": node.x,
+						"y": node.y,
+						"width": props.nodeWidth,
+						"height": node.continueHeight,
+						"rx": 2,
+						"style": { fill: props.color }
+					}, null),
+					node.exitHeight > 0 && createVNode("rect", {
+						"class": "v-charts-journey-node-exit",
+						"x": node.x,
+						"y": node.y + node.continueHeight,
+						"width": props.nodeWidth,
+						"height": node.exitHeight,
+						"rx": 2,
+						"style": { fill: props.exitColor }
+					}, null),
+					isFocused && createVNode("rect", {
+						"x": node.x - 2,
+						"y": node.y - 2,
+						"width": props.nodeWidth + 4,
+						"height": height + 4,
+						"rx": 3,
+						"fill": "none",
+						"stroke-width": 1.5,
+						"style": { stroke: "var(--v-charts-focus, Highlight)" }
+					}, null)
+				]), slots.label ? createVNode("g", { "transform": `translate(${node.x + props.nodeWidth + 8},${node.y})` }, [slots.label({
+					node,
+					subtitle
+				})]) : createVNode("g", { "class": "v-charts-journey-label" }, [
+					href ? createVNode("a", { "href": href }, [createVNode("text", {
+						"x": node.x + props.nodeWidth + 8,
+						"y": node.y + 11,
+						"style": {
+							fontSize: "12px",
+							fontWeight: 500,
+							fill: "var(--v-charts-text, #666)",
+							...halo
+						}
+					}, [name])]) : createVNode("text", {
+						"x": node.x + props.nodeWidth + 8,
+						"y": node.y + 11,
+						"style": {
+							fontSize: "12px",
+							fontWeight: 500,
+							fill: "var(--v-charts-text, #666)",
+							...halo
+						}
+					}, [name]),
+					createVNode("text", {
+						"x": node.x + props.nodeWidth + 8,
+						"y": node.y + 26,
+						"style": {
+							fontSize: "11px",
+							fill: "var(--v-charts-text, #666)",
+							...halo
+						}
+					}, [subtitle]),
+					name !== node.name && createVNode("title", null, [node.name])
+				])]);
+			})])
+		]);
+	};
+}
+/**
+* User journeys as a Sankey: columns are steps, bands are sessions moving from one page to the
+* next. Hovering a band or node highlights every connected path, the grey part of a node shows
+* sessions that ended there, and clicking pins the largest journey through it.
+*
+* ```vue
+* <JourneySankey :data="[{ path: ['/', '/pricing'], count: 11 }]" v-model:pinned="pinned"><Tooltip /></JourneySankey>
+* ```
+*/
+var JourneySankey = /* @__PURE__ */ defineComponent({
+	name: "JourneySankey",
+	props: {
+		...JourneySankeyVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...journeyEmits
+	},
+	slots: Object,
+	setup(props, { emit, slots, attrs }) {
+		const naturalHeight = computed(() => {
+			const steps = props.steps ?? Infinity;
+			const perStep = /* @__PURE__ */ new Map();
+			for (const row of props.data ?? []) {
+				const path = getValueByDataKey(row, props.pathKey);
+				if (!Array.isArray(path)) continue;
+				path.slice(0, steps).forEach((name, step) => {
+					const names = perStep.get(step) ?? /* @__PURE__ */ new Set();
+					names.add(String(name));
+					perStep.set(step, names);
+				});
+			}
+			const busiest = Math.max(1, ...[...perStep.values()].map((names) => names.size));
+			return Math.round((props.headers ? HEADER_BAND : 0) + busiest * (LABEL_HEIGHT + props.nodePadding) * 1.33);
+		});
+		const size = useChartShell(reactive({
+			width: computed(() => props.width),
+			height: computed(() => props.height ?? (props.aspect ? void 0 : Math.max(200, naturalHeight.value))),
+			aspect: computed(() => props.aspect),
+			initialDimension: computed(() => props.initialDimension)
+		}), standaloneChartOptions("JourneySankey"));
+		const setupContent = () => ({ svg: useJourneySankey(reactive({
+			...toRefs(props),
+			width: size.effectiveWidth,
+			height: size.effectiveHeight
+		}), slots, emit) });
+		return () => createVNode(ChartShell, mergeProps(attrs, chartListeners(emit), {
+			"size": size,
+			"desc": props.desc,
+			"overflow": "visible",
+			"setupContent": setupContent
+		}), { default: slots.default });
+	}
+});
+//#endregion
+export { JourneySankey };

package/dist/es/chart/LineChart.mjs

@@ -1,10 +1,19 @@
-import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
-import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
-var LineChart = generateCategoricalChart({
+import { forwardsSvgAttributes } from "../utils/attributes.mjs";
+import { cartesianChartProps } from "./chartProps.mjs";
+import { chartRoot } from "./chartRoot.mjs";
+import { defineComponent } from "vue";
+//#region src/chart/LineChart.ts
+var root = chartRoot({
 	chartName: "LineChart",
+	categoryScale: "point",
+	series: ["line"],
 	defaultTooltipEventType: "axis",
-	tooltipPayloadSearcher: arrayTooltipSearcher,
 	validateTooltipEventTypes: ["axis", "item"]
 });
+var LineChart = /* @__PURE__ */ forwardsSvgAttributes(defineComponent({
+	...root,
+	props: cartesianChartProps,
+	setup: (props, context) => root.setup(props, context)
+}));
 //#endregion
 export { LineChart };