vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/Sankey.mjs

@@ -1,39 +1,27 @@
-import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../state/tooltipSlice.mjs";
-import { useAppDispatch } from "../state/hooks.mjs";
+import { useTooltipController } from "../model/tooltip.mjs";
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { seriesColor } from "../utils/theme.mjs";
 import { Layer } from "../container/Layer.mjs";
-import { Animate } from "../animation/Animate.mjs";
-import { createRechartsStore } from "../state/store.mjs";
-import { ChartsWrapper } from "./ChartsWrapper.mjs";
-import Surface from "../container/Surface.mjs";
+import { useAnimationCallbacks } from "../animation/useAnimationCallbacks.mjs";
+import { useKeyedTransition } from "../animation/useKeyedTransition.mjs";
+import { forwardsHtmlAttributes } from "../utils/attributes.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 { computeSankeyLayout, linkPathGenerator } from "./sankeyUtils.mjs";
-import { Fragment, computed, createVNode, defineComponent, watchEffect } from "vue";
-import { provideStore } from "@reduxjs/vue-redux";
-import { get } from "lodash-es";
+import { computed, createVNode, defineComponent, mergeProps, reactive, toRefs } from "vue";
 //#region src/chart/Sankey.tsx
-var sankeyPayloadSearcher = (data, activeIndex) => {
-	if (!data || activeIndex == null) return void 0;
-	return get(data, activeIndex);
-};
-var sankeyOptions = {
-	chartName: "Sankey",
-	defaultTooltipEventType: "item",
-	validateTooltipEventTypes: ["item"],
-	tooltipPayloadSearcher: sankeyPayloadSearcher,
-	eventEmitter: void 0
-};
 var SankeyVueProps = {
+	title: {
+		type: String,
+		default: "Sankey diagram"
+	},
+	desc: String,
 	data: {
 		type: Object,
 		required: true
 	},
-	width: {
-		type: Number,
-		required: true
-	},
-	height: {
-		type: Number,
-		required: true
-	},
 	nameKey: {
 		type: String,
 		default: "name"
@@ -65,15 +53,15 @@ var SankeyVueProps = {
 	},
 	nodeFill: {
 		type: String,
-		default: "#0088fe"
+		default: seriesColor(0)
 	},
 	nodeStroke: {
 		type: String,
-		default: "#fff"
+		default: "var(--v-charts-background, #fff)"
 	},
 	linkFill: {
 		type: String,
-		default: "#0088fe"
+		default: seriesColor(0)
 	},
 	linkStroke: {
 		type: String,
@@ -85,248 +73,371 @@ var SankeyVueProps = {
 	},
 	transition: {
 		type: Object,
-		default: () => ({
-			duration: .8,
-			ease: "easeOut"
-		})
-	},
-	onClick: {
-		type: Function,
-		default: void 0
-	},
-	onMouseEnter: {
-		type: Function,
-		default: void 0
-	},
-	onMouseLeave: {
-		type: Function,
 		default: void 0
 	}
 };
-var SankeyInner = /* @__PURE__ */ defineComponent({
-	name: "SankeyInner",
-	props: SankeyVueProps,
-	slots: Object,
-	setup(props, { slots }) {
-		const dispatch = useAppDispatch();
-		const layout = computed(() => {
-			const m = props.margin;
-			return computeSankeyLayout({
-				data: props.data,
-				width: props.width,
-				height: props.height,
-				nodePadding: props.nodePadding,
-				nodeWidth: props.nodeWidth,
-				iterations: props.iterations,
-				margin: {
-					top: m.top ?? 5,
-					right: m.right ?? 5,
-					bottom: m.bottom ?? 5,
-					left: m.left ?? 5
-				}
-			});
+var sankeyEmits = {
+	"node-click": (_entry, _index, _event) => true,
+	"node-mouseenter": (_entry, _index, _event) => true,
+	"node-mouseleave": (_entry, _index, _event) => true,
+	"link-click": (_entry, _index, _event) => true,
+	"link-mouseenter": (_entry, _index, _event) => true,
+	"link-mouseleave": (_entry, _index, _event) => true,
+	"animation-start": () => true,
+	"animation-end": () => true
+};
+function useSankey(props, slots, emit) {
+	const tooltip = useTooltipController();
+	const data = useTrackedData(() => [props.data]);
+	const layout = computed(() => {
+		const m = props.margin;
+		return computeSankeyLayout({
+			data: data.value[0],
+			width: props.width,
+			height: props.height,
+			nodePadding: props.nodePadding,
+			nodeWidth: props.nodeWidth,
+			iterations: props.iterations,
+			margin: {
+				top: m.top ?? 5,
+				right: m.right ?? 5,
+				bottom: m.bottom ?? 5,
+				left: m.left ?? 5
+			}
 		});
-		const payloadTree = computed(() => {
+	});
+	const targetGeometry = computed(() => {
+		const occurrences = /* @__PURE__ */ new Map();
+		const nodes = layout.value.nodes.map((node) => {
+			const base = `node:${node.name ?? node.index ?? 0}`;
+			const count = occurrences.get(base) ?? 0;
+			occurrences.set(base, count + 1);
 			return {
-				nodes: layout.value.nodes.map((n, i) => ({
-					tooltipIndex: `nodes[${i}]`,
-					name: n[props.nameKey] ?? n.name,
-					value: n.value,
-					x0: n.x0,
-					x1: n.x1,
-					y0: n.y0,
-					y1: n.y1
-				})),
-				links: layout.value.links.map((l, i) => {
-					const src = l.source;
-					const tgt = l.target;
-					return {
-						tooltipIndex: `links[${i}]`,
-						name: `${src[props.nameKey] ?? src.name} - ${tgt[props.nameKey] ?? tgt.name}`,
-						value: l.value
-					};
-				})
+				kind: "node",
+				node,
+				identity: count === 0 ? base : `${base}\u0000${count}`
 			};
 		});
-		watchEffect((onCleanup) => {
-			const settings = {
-				dataDefinedOnItem: payloadTree.value,
-				positions: void 0,
-				settings: {
-					stroke: props.nodeStroke,
-					strokeWidth: void 0,
-					fill: props.nodeFill,
-					dataKey: props.dataKey,
-					nameKey: props.nameKey,
-					name: void 0,
-					hide: false,
-					type: void 0,
-					color: props.nodeFill,
-					unit: ""
-				}
+		const keysByIndex = new Map(nodes.map((item) => [item.node.index, item.identity]));
+		const links = layout.value.links.map((link) => {
+			const source = link.source;
+			const target = link.target;
+			const fraction = (y, node) => ((y ?? 0) - (node.y0 ?? 0)) / ((node.y1 ?? 0) - (node.y0 ?? 0) || 1);
+			return {
+				kind: "link",
+				link,
+				sourceKey: keysByIndex.get(source.index),
+				targetKey: keysByIndex.get(target.index),
+				sourceFraction: fraction(link.y0, source),
+				targetFraction: fraction(link.y1, target)
 			};
-			dispatch(addTooltipEntrySettings(settings));
-			onCleanup(() => {
-				dispatch(removeTooltipEntrySettings(settings));
-			});
 		});
-		function handleNodeMouseEnter(node, index, e) {
-			const coord = {
-				x: ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2,
-				y: ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2
-			};
-			dispatch(setActiveMouseOverItemIndex({
-				activeIndex: `nodes[${index}]`,
-				activeDataKey: props.dataKey,
-				activeCoordinate: coord
-			}));
-			props.onMouseEnter?.(node, "node", e);
-		}
-		function handleLinkMouseEnter(link, index, e) {
-			const sx = link.source.x1 ?? 0;
-			const tx = link.target.x0 ?? 0;
-			const sy = link.y0 ?? 0;
-			const ty = link.y1 ?? 0;
-			const coord = {
-				x: (sx + tx) / 2,
-				y: (sy + ty) / 2
-			};
-			dispatch(setActiveMouseOverItemIndex({
-				activeIndex: `links[${index}]`,
-				activeDataKey: props.dataKey,
-				activeCoordinate: coord
-			}));
-			props.onMouseEnter?.(link, "link", e);
+		return [...nodes, ...links];
+	});
+	const collapse = (item) => item.kind === "node" ? {
+		...item,
+		node: {
+			...item.node,
+			y1: item.node.y0
 		}
-		function handleMouseLeave(item, type, e) {
-			dispatch(mouseLeaveItem());
-			props.onMouseLeave?.(item, type, e);
+	} : {
+		...item,
+		link: {
+			...item.link,
+			width: 0
 		}
-		function handleNodeClick(node, index, e) {
-			const coord = {
-				x: ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2,
-				y: ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2
+	};
+	const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+	const { items } = useKeyedTransition(() => targetGeometry.value, {
+		key: (item) => item.kind === "node" ? item.identity : `link:${item.sourceKey.slice(5)}→${item.targetKey.slice(5)}`,
+		interpolate: (from, to, t) => {
+			const mix = (a, b) => (a ?? 0) + ((b ?? 0) - (a ?? 0)) * t;
+			if (from.kind === "node" && to.kind === "node") return {
+				...to,
+				node: {
+					...to.node,
+					x0: mix(from.node.x0, to.node.x0),
+					x1: mix(from.node.x1, to.node.x1),
+					y0: mix(from.node.y0, to.node.y0),
+					y1: mix(from.node.y1, to.node.y1)
+				}
 			};
-			dispatch(setActiveClickItemIndex({
-				activeIndex: `nodes[${index}]`,
-				activeDataKey: props.dataKey,
-				activeCoordinate: coord
-			}));
-			props.onClick?.(node, "node", e);
-		}
-		function handleLinkClick(link, index, e) {
-			const coord = {
-				x: ((link.source.x1 ?? 0) + (link.target.x0 ?? 0)) / 2,
-				y: ((link.y0 ?? 0) + (link.y1 ?? 0)) / 2
+			if (from.kind === "link" && to.kind === "link") return {
+				...to,
+				sourceFraction: mix(from.sourceFraction, to.sourceFraction),
+				targetFraction: mix(from.targetFraction, to.targetFraction),
+				link: {
+					...to.link,
+					width: mix(from.link.width, to.link.width)
+				}
 			};
-			dispatch(setActiveClickItemIndex({
-				activeIndex: `links[${index}]`,
-				activeDataKey: props.dataKey,
-				activeCoordinate: coord
-			}));
-			props.onClick?.(link, "link", e);
-		}
-		function renderNode(node, index, opacity) {
-			const x = node.x0 ?? 0;
-			const y = node.y0 ?? 0;
-			const width = (node.x1 ?? 0) - x;
-			const height = (node.y1 ?? 0) - y;
-			if (slots.node) {
-				const slotProps = {
-					payload: node,
-					index,
-					x,
-					y,
-					width,
-					height,
-					fill: props.nodeFill
-				};
-				return createVNode("g", {
-					"key": `node-${index}`,
-					"class": "v-charts-sankey-node",
-					"style": { opacity },
-					"onClick": (e) => handleNodeClick(node, index, e),
-					"onMouseenter": (e) => handleNodeMouseEnter(node, index, e),
-					"onMouseleave": (e) => handleMouseLeave(node, "node", e)
-				}, [slots.node(slotProps)]);
+			return to;
+		},
+		enterFrom: collapse,
+		exitTo: collapse,
+		connected: true,
+		isActive: () => props.isAnimationActive,
+		transition: () => props.transition,
+		onEnd: callbacks.onEnd,
+		onStart: callbacks.onStart
+	});
+	const displayNodes = computed(() => items.value.flatMap(({ key, value }) => value.kind === "node" ? [{
+		key,
+		node: value.node
+	}] : []));
+	const displayLinks = computed(() => {
+		const byKey = new Map(displayNodes.value.map(({ key, node }) => [key, node]));
+		return items.value.flatMap(({ key, value }) => {
+			if (value.kind !== "link") return [];
+			const link = value.link;
+			const source = byKey.get(value.sourceKey);
+			const target = byKey.get(value.targetKey);
+			if (!source || !target) return [];
+			return [{
+				key,
+				link: Object.assign({}, link, {
+					source,
+					target,
+					y0: (source.y0 ?? 0) + value.sourceFraction * ((source.y1 ?? 0) - (source.y0 ?? 0)),
+					y1: (target.y0 ?? 0) + value.targetFraction * ((target.y1 ?? 0) - (target.y0 ?? 0))
+				})
+			}];
+		});
+	});
+	const tooltipItems = computed(() => {
+		const nameOf = (node) => String(node[props.nameKey] ?? node.name);
+		const values = {};
+		const names = {};
+		layout.value.nodes.forEach((node, i) => {
+			values[`nodes[${i}]`] = node.value ?? null;
+			names[`nodes[${i}]`] = nameOf(node);
+		});
+		layout.value.links.forEach((link, i) => {
+			values[`links[${i}]`] = link.value ?? null;
+			names[`links[${i}]`] = `${nameOf(link.source)} - ${nameOf(link.target)}`;
+		});
+		return {
+			values,
+			names
+		};
+	});
+	const tooltipConfiguration = computed(() => {
+		return {
+			dataDefinedOnItem: data.value?.[0],
+			values: tooltipItems.value.values,
+			names: tooltipItems.value.names,
+			positions: void 0,
+			pointerItems: layout.value.links.map((link, index) => ({
+				index: layout.value.nodes.length + index,
+				payloadKey: `links[${index}]`,
+				identity: data.value?.[0]?.links[index],
+				coordinate: {
+					x: (link.source.x1 + link.target.x0) / 2,
+					y: ((link.y0 ?? 0) + (link.y1 ?? 0)) / 2
+				}
+			})),
+			keyboardItems: [...layout.value.nodes].sort((a, b) => (a.x0 ?? 0) - (b.x0 ?? 0) || (a.y0 ?? 0) - (b.y0 ?? 0)).map((node) => ({
+				identity: data.value?.[0]?.nodes[node.index],
+				index: node.index,
+				payloadKey: `nodes[${node.index}]`,
+				coordinate: {
+					x: ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2,
+					y: ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2
+				},
+				onClick: (event) => handleNodeClick(node, node.index, event)
+			})),
+			settings: {
+				stroke: props.nodeStroke,
+				strokeWidth: void 0,
+				fill: props.nodeFill,
+				dataKey: props.dataKey,
+				nameKey: props.nameKey,
+				name: void 0,
+				hide: false,
+				type: void 0,
+				color: props.nodeFill,
+				unit: ""
 			}
+		};
+	});
+	tooltip.entries.register(tooltipConfiguration);
+	function handleNodeMouseEnter(node, index, e) {
+		const coord = {
+			x: ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2,
+			y: ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2
+		};
+		tooltip.activate("hover", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index,
+			coordinate: coord
+		});
+		emit("node-mouseenter", node, index, e);
+	}
+	function handleLinkMouseEnter(link, index, e) {
+		const sx = link.source.x1 ?? 0;
+		const tx = link.target.x0 ?? 0;
+		const sy = link.y0 ?? 0;
+		const ty = link.y1 ?? 0;
+		const coord = {
+			x: (sx + tx) / 2,
+			y: (sy + ty) / 2
+		};
+		tooltip.activate("hover", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index: layout.value.nodes.length + index,
+			coordinate: coord
+		});
+		emit("link-mouseenter", link, index, e);
+	}
+	function handleNodeMouseLeave(node, index, e) {
+		tooltip.clear("hover", "item");
+		emit("node-mouseleave", node, index, e);
+	}
+	function handleLinkMouseLeave(link, index, e) {
+		tooltip.clear("hover", "item");
+		emit("link-mouseleave", link, index, e);
+	}
+	function handleNodeClick(node, index, e) {
+		const coord = {
+			x: ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2,
+			y: ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2
+		};
+		tooltip.activate("click", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index,
+			coordinate: coord
+		});
+		emit("node-click", node, index, e);
+	}
+	function handleLinkClick(link, index, e) {
+		const coord = {
+			x: ((link.source.x1 ?? 0) + (link.target.x0 ?? 0)) / 2,
+			y: ((link.y0 ?? 0) + (link.y1 ?? 0)) / 2
+		};
+		tooltip.activate("click", {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index: layout.value.nodes.length + index,
+			coordinate: coord
+		});
+		emit("link-click", link, index, e);
+	}
+	function renderNode(node, index, opacity, key) {
+		const x = node.x0 ?? 0;
+		const y = node.y0 ?? 0;
+		const width = (node.x1 ?? 0) - x;
+		const height = (node.y1 ?? 0) - y;
+		if (slots.node) {
+			const slotProps = {
+				payload: node,
+				index,
+				x,
+				y,
+				width,
+				height,
+				fill: props.nodeFill
+			};
 			return createVNode("g", {
-				"key": `node-${index}`,
+				"key": key,
 				"class": "v-charts-sankey-node",
 				"style": { opacity },
 				"onClick": (e) => handleNodeClick(node, index, e),
 				"onMouseenter": (e) => handleNodeMouseEnter(node, index, e),
-				"onMouseleave": (e) => handleMouseLeave(node, "node", e)
-			}, [createVNode("rect", {
-				"x": x,
-				"y": y,
-				"width": width,
-				"height": height,
-				"fill": props.nodeFill,
-				"stroke": props.nodeStroke
-			}, null)]);
+				"onMouseleave": (e) => handleNodeMouseLeave(node, index, e)
+			}, [slots.node(slotProps)]);
 		}
-		function renderLink(link, index, opacity) {
-			const d = linkPathGenerator(link) ?? "";
-			const linkWidth = link.width ?? 0;
-			if (slots.link) {
-				const slotProps = {
-					payload: link,
-					index,
-					d,
-					linkWidth,
-					fill: props.linkFill
-				};
-				return createVNode("g", {
-					"key": `link-${index}`,
-					"style": { opacity },
-					"onClick": (e) => handleLinkClick(link, index, e),
-					"onMouseenter": (e) => handleLinkMouseEnter(link, index, e),
-					"onMouseleave": (e) => handleMouseLeave(link, "link", e)
-				}, [slots.link(slotProps)]);
-			}
-			return createVNode("path", {
-				"key": `link-${index}`,
-				"class": "v-charts-sankey-link",
-				"d": d,
-				"fill": "none",
-				"stroke": props.linkStroke === "none" ? props.linkFill : props.linkStroke,
-				"stroke-width": linkWidth,
-				"stroke-opacity": .2,
+		return createVNode("g", {
+			"key": key,
+			"class": "v-charts-sankey-node",
+			"style": { opacity },
+			"onClick": (e) => handleNodeClick(node, index, e),
+			"onMouseenter": (e) => handleNodeMouseEnter(node, index, e),
+			"onMouseleave": (e) => handleNodeMouseLeave(node, index, e)
+		}, [createVNode("rect", {
+			"x": x,
+			"y": y,
+			"width": width,
+			"height": height,
+			"fill": props.nodeFill,
+			"stroke": props.nodeStroke
+		}, null)]);
+	}
+	function renderLink(link, index, opacity, key) {
+		const d = linkPathGenerator(link) ?? "";
+		const linkWidth = link.width ?? 0;
+		if (slots.link) {
+			const slotProps = {
+				payload: link,
+				index,
+				d,
+				linkWidth,
+				fill: props.linkFill
+			};
+			return createVNode("g", {
+				"key": key,
 				"style": { opacity },
 				"onClick": (e) => handleLinkClick(link, index, e),
 				"onMouseenter": (e) => handleLinkMouseEnter(link, index, e),
-				"onMouseleave": (e) => handleMouseLeave(link, "link", e)
-			}, null);
+				"onMouseleave": (e) => handleLinkMouseLeave(link, index, e)
+			}, [slots.link(slotProps)]);
 		}
-		return () => createVNode(Surface, {
-			"width": props.width,
-			"height": props.height
-		}, { default: () => [createVNode(Layer, { "class": "v-charts-sankey" }, { default: () => [createVNode(Animate, {
-			"isActive": props.isAnimationActive,
-			"from": 0,
-			"to": 1,
-			"transition": props.transition
-		}, { default: (progress) => createVNode(Fragment, null, [createVNode("g", { "class": "v-charts-sankey-links" }, [layout.value.links.map((link, i) => renderLink(link, i, progress))]), createVNode("g", { "class": "v-charts-sankey-nodes" }, [layout.value.nodes.map((node, i) => renderNode(node, i, progress))])]) })] })] });
+		return createVNode("path", {
+			"key": key,
+			"class": "v-charts-sankey-link",
+			"d": d,
+			"fill": "none",
+			"stroke": props.linkStroke === "none" ? props.linkFill : props.linkStroke,
+			"stroke-width": linkWidth,
+			"stroke-opacity": .2,
+			"style": { opacity },
+			"onClick": (e) => handleLinkClick(link, index, e),
+			"onMouseenter": (e) => handleLinkMouseEnter(link, index, e),
+			"onMouseleave": (e) => handleLinkMouseLeave(link, index, e)
+		}, null);
 	}
-});
-var Sankey = /* @__PURE__ */ defineComponent({
+	return () => createVNode(Layer, { "class": "v-charts-sankey" }, { default: () => [createVNode("g", { "class": "v-charts-sankey-links" }, [displayLinks.value.map(({ key, link }, i) => renderLink(link, link.index ?? i, 1, key))]), createVNode("g", { "class": "v-charts-sankey-nodes" }, [displayNodes.value.map(({ key, node }, i) => renderNode(node, node.index ?? i, 1, key))])] });
+}
+/**
+* Sankey diagram — visualizes flows between nodes.
+*
+* Supports `<Tooltip>` as a child component for hover info on both nodes and links.
+*/
+var Sankey = /* @__PURE__ */ forwardsHtmlAttributes(/* @__PURE__ */ defineComponent({
 	name: "Sankey",
-	props: SankeyVueProps,
+	props: {
+		...SankeyVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...sankeyEmits
+	},
 	slots: Object,
-	setup(props, { slots }) {
-		provideStore({ store: createRechartsStore({ options: sankeyOptions }, "Sankey") });
+	setup(props, { slots, emit, attrs }) {
+		const size = useChartShell(props, standaloneChartOptions("Sankey"));
+		function setupContent() {
+			return { svg: useSankey(reactive({
+				...toRefs(props),
+				width: size.effectiveWidth,
+				height: size.effectiveHeight
+			}), slots, emit) };
+		}
 		return () => {
 			if (!props.data || !props.data.nodes || props.data.nodes.length === 0) return null;
-			return createVNode(ChartsWrapper, {
-				"width": props.width,
-				"height": props.height
-			}, { default: () => [createVNode(SankeyInner, props, {
-				node: slots.node,
-				link: slots.link
-			}), slots.default?.()] });
+			return createVNode(ChartShell, mergeProps(attrs, chartListeners(emit), {
+				"size": size,
+				"root": "wrapper",
+				"setupContent": setupContent,
+				"accessibilityLayer": true,
+				"title": props.title,
+				"desc": props.desc
+			}), { default: slots.default });
 		};
 	}
-});
+}));
 //#endregion
-export { Sankey, SankeyVueProps, sankeyPayloadSearcher };
+export { Sankey };