vccs 0.4.0 → 0.4.1

package/dist/es/cartesian/utils/get-ticks.mjs

@@ -1,4 +1,5 @@
-import { isNumber, isSsr, isVisible } from "../../utils/validate.mjs";
+import { isNumber, isVisible } from "../../utils/validate.mjs";
+import { Global } from "../../utils/Global.mjs";
 import { mathSign } from "../../utils/data.mjs";
 import { getStringSize } from "../../utils/attrs.mjs";
 import { getAngledTickWidth, getNumberIntervalTicks, getTickBoundaries } from "../../utils/tick.mjs";
@@ -87,7 +88,7 @@ function getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, preserv
 function getTicks(props, fontSize, letterSpacing) {
 	const { tick, ticks, viewBox, minTickGap, orientation, interval, tickFormatter, unit, angle } = props;
 	if (!ticks || !ticks.length || !tick) return [];
-	if (isNumber(interval) || isSsr) return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
+	if (isNumber(interval) || Global.isSsr) return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
 	let candidates = [];
 	const sizeKey = orientation === "top" || orientation === "bottom" ? "width" : "height";
 	const unitSize = unit && sizeKey === "width" ? getStringSize(unit, {

package/dist/es/chart/RechartsWrapper.mjs

@@ -31,7 +31,11 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		onTouchEnd: { type: Function },
 		onTouchMove: { type: Function },
 		onTouchStart: { type: Function },
-		style: { type: Object },
+		style: { type: [
+			String,
+			Object,
+			Array
+		] },
 		width: {
 			type: Number,
 			required: true
@@ -132,13 +136,12 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		};
 		return () => createVNode("div", {
 			"class": ["v-charts-wrapper", props.class],
-			"style": {
+			"style": [{
 				position: "relative",
 				cursor: "default",
 				width: `${props.width}px`,
-				height: `${props.height}px`,
-				...props.style
-			},
+				height: `${props.height}px`
+			}, props.style],
 			"role": "application",
 			"onClick": myOnClick,
 			"onContextmenu": myOnContextMenu,

package/dist/es/chart/Sankey.mjs

@@ -0,0 +1,332 @@
+import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../state/tooltipSlice.mjs";
+import { useAppDispatch } from "../state/hooks.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { Animate } from "../animation/Animate.mjs";
+import { createRechartsStore } from "../state/store.mjs";
+import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import Surface from "../container/Surface.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";
+//#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 = {
+	data: {
+		type: Object,
+		required: true
+	},
+	width: {
+		type: Number,
+		required: true
+	},
+	height: {
+		type: Number,
+		required: true
+	},
+	nameKey: {
+		type: String,
+		default: "name"
+	},
+	dataKey: {
+		type: String,
+		default: "value"
+	},
+	nodePadding: {
+		type: Number,
+		default: 10
+	},
+	nodeWidth: {
+		type: Number,
+		default: 10
+	},
+	iterations: {
+		type: Number,
+		default: 32
+	},
+	margin: {
+		type: Object,
+		default: () => ({
+			top: 5,
+			right: 5,
+			bottom: 5,
+			left: 5
+		})
+	},
+	nodeFill: {
+		type: String,
+		default: "#0088fe"
+	},
+	nodeStroke: {
+		type: String,
+		default: "#fff"
+	},
+	linkFill: {
+		type: String,
+		default: "#0088fe"
+	},
+	linkStroke: {
+		type: String,
+		default: "none"
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	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
+				}
+			});
+		});
+		const payloadTree = computed(() => {
+			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
+					};
+				})
+			};
+		});
+		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: ""
+				}
+			};
+			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);
+		}
+		function handleMouseLeave(item, type, e) {
+			dispatch(mouseLeaveItem());
+			props.onMouseLeave?.(item, type, e);
+		}
+		function handleNodeClick(node, index, e) {
+			const coord = {
+				x: ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2,
+				y: ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2
+			};
+			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
+			};
+			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 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)
+			}, [createVNode("rect", {
+				"x": x,
+				"y": y,
+				"width": width,
+				"height": height,
+				"fill": props.nodeFill,
+				"stroke": props.nodeStroke
+			}, null)]);
+		}
+		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,
+				"style": { opacity },
+				"onClick": (e) => handleLinkClick(link, index, e),
+				"onMouseenter": (e) => handleLinkMouseEnter(link, index, e),
+				"onMouseleave": (e) => handleMouseLeave(link, "link", e)
+			}, null);
+		}
+		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))])]) })] })] });
+	}
+});
+var Sankey = /* @__PURE__ */ defineComponent({
+	name: "Sankey",
+	props: SankeyVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		provideStore({ store: createRechartsStore({ options: sankeyOptions }, "Sankey") });
+		return () => {
+			if (!props.data || !props.data.nodes || props.data.nodes.length === 0) return null;
+			return createVNode(RechartsWrapper, {
+				"width": props.width,
+				"height": props.height
+			}, { default: () => [createVNode(SankeyInner, props, {
+				node: slots.node,
+				link: slots.link
+			}), slots.default?.()] });
+		};
+	}
+});
+//#endregion
+export { Sankey, SankeyVueProps, sankeyPayloadSearcher };

package/dist/es/chart/SunburstChart.mjs

@@ -0,0 +1,229 @@
+import { polarToCartesian } from "../utils/polar.mjs";
+import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../state/tooltipSlice.mjs";
+import { useAppDispatch } from "../state/hooks.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { createRechartsStore } from "../state/store.mjs";
+import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import Surface from "../container/Surface.mjs";
+import { Sector } from "../shape/Sector.mjs";
+import { computeSunburstLayout } from "./sunburstUtils.mjs";
+import { computed, createVNode, defineComponent, isVNode, watchEffect } from "vue";
+import { provideStore } from "@reduxjs/vue-redux";
+import { get } from "lodash-es";
+//#region src/chart/SunburstChart.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var sunburstPayloadSearcher = (data, activeIndex) => {
+	if (!data || !activeIndex) return void 0;
+	return get(data, activeIndex);
+};
+var sunburstOptions = {
+	chartName: "SunburstChart",
+	defaultTooltipEventType: "item",
+	validateTooltipEventTypes: ["item"],
+	tooltipPayloadSearcher: sunburstPayloadSearcher,
+	eventEmitter: void 0
+};
+var SunburstChartVueProps = {
+	data: {
+		type: Object,
+		required: true
+	},
+	dataKey: {
+		type: String,
+		default: "value"
+	},
+	nameKey: {
+		type: String,
+		default: "name"
+	},
+	width: {
+		type: Number,
+		required: true
+	},
+	height: {
+		type: Number,
+		required: true
+	},
+	cx: {
+		type: Number,
+		default: void 0
+	},
+	cy: {
+		type: Number,
+		default: void 0
+	},
+	innerRadius: {
+		type: Number,
+		default: 50
+	},
+	outerRadius: {
+		type: Number,
+		default: void 0
+	},
+	startAngle: {
+		type: Number,
+		default: 0
+	},
+	endAngle: {
+		type: Number,
+		default: 360
+	},
+	ringPadding: {
+		type: Number,
+		default: 2
+	},
+	padding: {
+		type: Number,
+		default: 2
+	},
+	fill: {
+		type: String,
+		default: "#333"
+	},
+	stroke: {
+		type: String,
+		default: "#fff"
+	},
+	onClick: {
+		type: Function,
+		default: void 0
+	},
+	onMouseEnter: {
+		type: Function,
+		default: void 0
+	},
+	onMouseLeave: {
+		type: Function,
+		default: void 0
+	}
+};
+var SunburstInner = /* @__PURE__ */ defineComponent({
+	name: "SunburstInner",
+	props: SunburstChartVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		const resolvedCx = computed(() => props.cx ?? props.width / 2);
+		const resolvedCy = computed(() => props.cy ?? props.height / 2);
+		const resolvedOuterRadius = computed(() => props.outerRadius ?? Math.min(props.width, props.height) / 2);
+		const nodes = computed(() => computeSunburstLayout({
+			data: props.data,
+			cx: resolvedCx.value,
+			cy: resolvedCy.value,
+			innerRadius: props.innerRadius,
+			outerRadius: resolvedOuterRadius.value,
+			startAngle: props.startAngle,
+			endAngle: props.endAngle,
+			dataKey: props.dataKey,
+			ringPadding: props.ringPadding,
+			padding: props.padding
+		}));
+		watchEffect((onCleanup) => {
+			const tooltipEntrySettings = {
+				dataDefinedOnItem: props.data,
+				positions: void 0,
+				settings: {
+					stroke: props.stroke,
+					strokeWidth: void 0,
+					fill: props.fill,
+					dataKey: props.dataKey,
+					nameKey: props.nameKey,
+					name: void 0,
+					hide: false,
+					type: void 0,
+					color: props.fill,
+					unit: ""
+				}
+			};
+			dispatch(addTooltipEntrySettings(tooltipEntrySettings));
+			onCleanup(() => {
+				dispatch(removeTooltipEntrySettings(tooltipEntrySettings));
+			});
+		});
+		function getNodeFill(node) {
+			if (node.fill) return node.fill;
+			return props.fill;
+		}
+		function getTooltipCoordinate(node) {
+			const midAngle = (node.startAngle + node.endAngle) / 2;
+			const midRadius = (node.innerRadius + node.outerRadius) / 2;
+			return polarToCartesian(node.cx, node.cy, midRadius, midAngle);
+		}
+		function handleMouseEnter(node, e) {
+			dispatch(setActiveMouseOverItemIndex({
+				activeIndex: node.tooltipIndex,
+				activeDataKey: props.dataKey,
+				activeCoordinate: getTooltipCoordinate(node)
+			}));
+			props.onMouseEnter?.(node.payload, e);
+		}
+		function handleMouseLeave(node, e) {
+			dispatch(mouseLeaveItem());
+			props.onMouseLeave?.(node.payload, e);
+		}
+		function handleClick(node, e) {
+			dispatch(setActiveClickItemIndex({
+				activeIndex: node.tooltipIndex,
+				activeDataKey: props.dataKey,
+				activeCoordinate: getTooltipCoordinate(node)
+			}));
+			props.onClick?.(node.payload, e);
+		}
+		function renderSector(node, index) {
+			const nodeFill = getNodeFill(node);
+			const slotProps = {
+				...node,
+				index
+			};
+			if (slots.content) return createVNode("g", {
+				"key": `sector-${index}`,
+				"class": "v-charts-sunburst-sector",
+				"onClick": (e) => handleClick(node, e),
+				"onMouseenter": (e) => handleMouseEnter(node, e),
+				"onMouseleave": (e) => handleMouseLeave(node, e)
+			}, [slots.content(slotProps)]);
+			return createVNode("g", {
+				"key": `sector-${index}`,
+				"class": "v-charts-sunburst-sector",
+				"onClick": (e) => handleClick(node, e),
+				"onMouseenter": (e) => handleMouseEnter(node, e),
+				"onMouseleave": (e) => handleMouseLeave(node, e)
+			}, [createVNode(Sector, {
+				"cx": node.cx,
+				"cy": node.cy,
+				"innerRadius": node.innerRadius,
+				"outerRadius": node.outerRadius,
+				"startAngle": node.startAngle,
+				"endAngle": node.endAngle,
+				"fill": nodeFill,
+				"stroke": props.stroke
+			}, null)]);
+		}
+		return () => {
+			let _slot;
+			return createVNode(Surface, {
+				"width": props.width,
+				"height": props.height
+			}, { default: () => [createVNode(Layer, { "class": "v-charts-sunburst" }, _isSlot(_slot = nodes.value.map((node, index) => renderSector(node, index))) ? _slot : { default: () => [_slot] })] });
+		};
+	}
+});
+var SunburstChart = /* @__PURE__ */ defineComponent({
+	name: "SunburstChart",
+	props: SunburstChartVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		provideStore({ store: createRechartsStore({ options: sunburstOptions }, "SunburstChart") });
+		return () => {
+			if (!props.data?.children || props.data.children.length === 0) return null;
+			return createVNode(RechartsWrapper, {
+				"width": props.width,
+				"height": props.height
+			}, { default: () => [createVNode(SunburstInner, props, { content: slots.content }), slots.default?.()] });
+		};
+	}
+});
+//#endregion
+export { SunburstChart, SunburstChartVueProps, sunburstPayloadSearcher };

package/dist/es/chart/generateCategoricalChart.mjs

@@ -73,7 +73,11 @@ var CategoricalProps = {
 		default: "none"
 	},
 	startAngle: { type: Number },
-	style: { type: Object },
+	style: { type: [
+		String,
+		Object,
+		Array
+	] },
 	syncId: { type: [Number, String] },
 	syncMethod: {
 		type: [String, Function],

package/dist/es/chart/sankeyUtils.mjs

@@ -0,0 +1,28 @@
+import { toRaw } from "vue";
+import { sankey, sankeyLinkHorizontal } from "d3-sankey";
+//#region src/chart/sankeyUtils.ts
+function computeSankeyLayout(args) {
+	const { data, width, height, nodePadding, nodeWidth, iterations, margin } = args;
+	const cloned = {
+		nodes: data.nodes.map((n) => ({ ...toRaw(n) })),
+		links: data.links.map((l) => ({ ...toRaw(l) }))
+	};
+	const result = sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).extent([[margin.left, margin.top], [Math.max(margin.left + 1, width - margin.right), Math.max(margin.top + 1, height - margin.bottom)]]).iterations(iterations)(cloned);
+	const x0Min = margin.left;
+	const x1Max = Math.max(margin.left + 1, width - margin.right);
+	const y0Min = margin.top;
+	const y1Max = Math.max(margin.top + 1, height - margin.bottom);
+	for (const n of result.nodes) {
+		if (n.x0 != null && n.x0 < x0Min) n.x0 = x0Min;
+		if (n.x1 != null && n.x1 > x1Max) n.x1 = x1Max;
+		if (n.y0 != null && n.y0 < y0Min) n.y0 = y0Min;
+		if (n.y1 != null && n.y1 > y1Max) n.y1 = y1Max;
+	}
+	return {
+		nodes: result.nodes,
+		links: result.links
+	};
+}
+var linkPathGenerator = sankeyLinkHorizontal();
+//#endregion
+export { computeSankeyLayout, linkPathGenerator };