vccs 0.3.0 → 0.4.1

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 };

package/dist/es/chart/sunburstUtils.mjs

@@ -0,0 +1,67 @@
+import { hierarchy, partition } from "d3-hierarchy";
+//#region src/chart/sunburstUtils.ts
+/**
+* Record each node's original child index before sorting mutates the order.
+* This ensures tooltipIndex paths point into the original data.children order.
+*/
+function recordOriginalIndices(node) {
+	if (node.children) node.children.forEach((child, i) => {
+		child._originalIndex = i;
+		recordOriginalIndices(child);
+	});
+}
+/**
+* Build a hierarchical tooltip index path string for a d3 hierarchy node.
+* Uses _originalIndex (pre-sort) so the path matches the original data structure.
+* E.g. 'children[0].children[1]'
+*/
+function buildTooltipIndex(node) {
+	const parts = [];
+	let current = node;
+	while (current.parent) {
+		const idx = current._originalIndex ?? current.parent.children.indexOf(current);
+		parts.unshift(`children[${idx}]`);
+		current = current.parent;
+	}
+	return parts.join(".");
+}
+function computeSunburstLayout(options) {
+	const { data, cx, cy, innerRadius, outerRadius, startAngle, endAngle, dataKey, ringPadding = 0, padding = 0 } = options;
+	if (!data.children || data.children.length === 0) return [];
+	const root = hierarchy(data).sum((d) => {
+		if (d.children && d.children.length > 0) return 0;
+		const val = d[dataKey];
+		return typeof val === "number" && val > 0 ? val : 0;
+	});
+	recordOriginalIndices(root);
+	root.sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+	partition().size([1, 1])(root);
+	const angleRange = endAngle - startAngle;
+	const radiusRange = outerRadius - innerRadius;
+	const nodes = [];
+	root.descendants().forEach((d) => {
+		if (d.depth === 0) return;
+		const nodeStartAngle = startAngle + d.x0 * angleRange + padding / 2;
+		const nodeEndAngle = startAngle + d.x1 * angleRange - padding / 2;
+		const nodeInnerRadius = innerRadius + d.y0 * radiusRange + ringPadding / 2;
+		const nodeOuterRadius = innerRadius + d.y1 * radiusRange - ringPadding / 2;
+		if (nodeEndAngle <= nodeStartAngle || nodeOuterRadius <= nodeInnerRadius) return;
+		nodes.push({
+			cx,
+			cy,
+			innerRadius: nodeInnerRadius,
+			outerRadius: nodeOuterRadius,
+			startAngle: nodeStartAngle,
+			endAngle: nodeEndAngle,
+			depth: d.depth,
+			name: d.data.name,
+			value: d.value ?? 0,
+			fill: d.data.fill,
+			payload: d.data,
+			tooltipIndex: buildTooltipIndex(d)
+		});
+	});
+	return nodes;
+}
+//#endregion
+export { computeSunburstLayout };

package/dist/es/components/Text.vue_vue_type_script_setup_true_lang.mjs

@@ -1,6 +1,6 @@
 import { getStringSize } from "../utils/attrs.mjs";
 import { reduceCSSCalc } from "../utils/ReduceCSSCalc.mjs";
-import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
+import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString } from "vue";
 //#region src/components/Text.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"x",
@@ -177,13 +177,13 @@ var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				fill: props.fill && props.fill.includes("url") ? "#808080" : props.fill,
 				class: "v-charts-text",
 				style: normalizeStyle(props.style)
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(wordsByLines.value, (line, index) => {
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(wordsByLines.value, (line, index) => {
 				return openBlock(), createElementBlock("tspan", {
 					key: index,
 					x: x.value,
 					dy: index === 0 ? startDy.value : props.lineHeight
 				}, toDisplayString(line.words.join(props.breakAll ? "" : " ")), 9, _hoisted_2);
-			}), 128))], 12, _hoisted_1);
+			}), 128))])], 12, _hoisted_1);
 		};
 	}
 });

package/dist/es/components/Tooltip.mjs

@@ -8,17 +8,17 @@ import { selectActiveCoordinate, selectActiveLabel, selectIsTooltipActive, selec
 import { Rectangle } from "../shape/Rectangle.mjs";
 import { useCursorLayerRef } from "../context/cursorLayerContext.mjs";
 import { usePortal } from "../chart/TooltipPortalContext.mjs";
+import { Sector } from "../shape/Sector.mjs";
 import { useAccessibilityLayer } from "../context/accessibilityContext.mjs";
 import { getTooltipTranslate } from "../utils/tooltip/translate.mjs";
 import { Cross } from "../shape/Cross.mjs";
-import { Sector } from "../shape/Sector.mjs";
 import { getCursorPoints } from "./utils.mjs";
 import { useTooltipAxisBandSize } from "../context/useTooltipAxis.mjs";
 import { useTooltipChartSynchronisation } from "../synchronisation/useChartSynchronisation.mjs";
 import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, reactive, ref, watch, watchEffect, watchPostEffect } from "vue";
 import { sortBy, uniqBy } from "es-toolkit/compat";
 import { animate } from "motion-v";
-import { useElementBounding, useMagicKeys, usePreferredReducedMotion } from "@vueuse/core";
+import { useMagicKeys, usePreferredReducedMotion } from "@vueuse/core";
 //#region src/components/Tooltip.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -148,7 +148,10 @@ var TooltipBoundingBox = /* @__PURE__ */ defineComponent({
 			}
 		});
 		const el = ref();
-		const lastBoundingBox = useElementBounding(el, {});
+		const tooltipSize = ref({
+			width: 0,
+			height: 0
+		});
 		let preTransform;
 		let animationControls;
 		const reducedMotion = usePreferredReducedMotion();
@@ -161,13 +164,13 @@ var TooltipBoundingBox = /* @__PURE__ */ defineComponent({
 				position,
 				reverseDirection,
 				tooltipBox: {
-					height: lastBoundingBox.height.value,
-					width: lastBoundingBox.width.value
+					height: tooltipSize.value.height,
+					width: tooltipSize.value.width
 				},
 				useTranslate3d: false,
 				viewBox
 			});
-			transform = !lastBoundingBox.height.value && preTransform ? preTransform : transform;
+			transform = !tooltipSize.value.height && preTransform ? preTransform : transform;
 			preTransform = transform || preTransform;
 			return {
 				cssClasses,
@@ -181,6 +184,12 @@ var TooltipBoundingBox = /* @__PURE__ */ defineComponent({
 			if (!element || !transform?.transform) return;
 			if (props.isAnimationActive && reducedMotion.value !== "reduce") animationControls = animate(element, { transform: transform.transform }, props.transition);
 			else element.style.transform = transform.transform;
+			const width = element.offsetWidth;
+			const height = element.offsetHeight;
+			if (height > 0 && (width !== tooltipSize.value.width || height !== tooltipSize.value.height)) tooltipSize.value = {
+				width,
+				height
+			};
 			onCleanup(() => {
 				animationControls?.stop();
 				animationControls = void 0;
@@ -235,17 +244,15 @@ var Cursor = /* @__PURE__ */ defineComponent({
 			let cursorElement;
 			if (isScatterChart) {
 				const { offset: _offset, ...coord } = props.coordinate;
-				const { top, left, width, height } = offset.value;
 				const crossProps = {
 					stroke: "#ccc",
 					fill: "none",
+					...offset.value,
 					...coord,
-					top,
-					left,
-					width,
-					height,
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(crossProps) : createVNode(Cross, crossProps, null);
@@ -255,6 +262,7 @@ var Cursor = /* @__PURE__ */ defineComponent({
 				const coord = props.coordinate;
 				const off = offset.value;
 				const rectProps = {
+					...off,
 					stroke: "none",
 					fill: "#ccc",
 					x: layout.value === "horizontal" ? coord.x - halfSize : off.left + .5,
@@ -263,32 +271,40 @@ var Cursor = /* @__PURE__ */ defineComponent({
 					height: layout.value === "horizontal" ? off.height - 1 : bandSize,
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(rectProps) : createVNode(Rectangle, rectProps, null);
 			} else if (layout.value === "radial" && props.coordinate?.cx != null) {
 				const radialPoints = points.value;
 				const sectorProps = {
+					stroke: "#ccc",
+					...offset.value,
 					cx: radialPoints.cx,
 					cy: radialPoints.cy,
 					startAngle: radialPoints.startAngle,
 					endAngle: radialPoints.endAngle,
 					innerRadius: radialPoints.radius,
 					outerRadius: radialPoints.radius,
-					stroke: "#ccc",
 					fill: "none",
 					class: "v-charts-tooltip-cursor",
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(sectorProps) : createVNode(Sector, sectorProps, null);
 			} else {
 				const cursorProps = {
 					stroke: "#ccc",
-					class: ["v-charts-tooltip-cursor"],
+					...offset.value,
 					layout: layout.value,
 					points: points.value,
+					class: ["v-charts-tooltip-cursor"],
 					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex: props.index,
 					...cursorSvgProps
 				};
 				cursorElement = props.cursorSlot ? props.cursorSlot(cursorProps) : createVNode(Curve, cursorProps, null);

package/dist/es/container/ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { isPercent } from "../utils/validate.mjs";
 import { normalizeStyle as normalizeStyle$1 } from "../utils/style.mjs";
 import { provideSizeContext } from "./useSizeContext.mjs";
-import { Fragment, cloneVNode, computed, createBlock, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, resolveDynamicComponent, toRef, useSlots } from "vue";
+import { Fragment, cloneVNode, computed, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, toRef, useSlots } from "vue";
 import { useThrottleFn } from "@vueuse/core";
 //#region src/container/ResponsiveContainer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["id"];
@@ -119,6 +119,19 @@ var ResponsiveContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				});
 			});
 		}
+		/**
+		* Rendering the children through `<component :is="() => renderChildren()" />` would
+		* create a new component type on every render, so Vue unmounts and remounts the whole
+		* chart subtree each time. Charts that dispatch on `mouseenter` (radial bar, radar) then
+		* loop forever: the remount recreates the element under the cursor, which fires
+		* `mouseenter` again. This renderer keeps a stable type, so the subtree is patched.
+		*/
+		const ChildrenRenderer = (rendererProps) => rendererProps.nodes;
+		ChildrenRenderer.props = { nodes: {
+			type: Array,
+			required: true
+		} };
+		ChildrenRenderer.inheritAttrs = false;
 		const containerStyle = computed(() => ({
 			...props.style,
 			...normalizeStyle$1({
@@ -136,7 +149,7 @@ var ResponsiveContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				ref: containerRef,
 				class: normalizeClass(["vcharts-responsive-container", [props.class]]),
 				style: normalizeStyle(containerStyle.value)
-			}, [(openBlock(), createBlock(resolveDynamicComponent(() => renderChildren())))], 14, _hoisted_1);
+			}, [createVNode(ChildrenRenderer, { nodes: renderChildren() ?? [] }, null, 8, ["nodes"])], 14, _hoisted_1);
 		};
 	}
 });

package/dist/es/index.mjs

@@ -1,3 +1,4 @@
+import { Global } from "./utils/Global.mjs";
 import { Curve, CurveVueProps, getPath } from "./shape/Curve.mjs";
 import { useActiveTooltipDataPoints } from "./state/hooks.mjs";
 import { useChartHeight, useChartWidth, useMargin, useOffset } from "./context/chartLayoutContext.mjs";
@@ -36,11 +37,13 @@ import { ScatterChart } from "./chart/ScatterChart.mjs";
 import { RadialBarChart } from "./chart/RadialBarChart.mjs";
 import { FunnelChart } from "./chart/FunnelChart.mjs";
 import { Treemap, TreemapVueProps, treemapPayloadSearcher } from "./chart/Treemap.mjs";
+import { Sankey, SankeyVueProps, sankeyPayloadSearcher } from "./chart/Sankey.mjs";
+import { Sector } from "./shape/Sector.mjs";
+import { SunburstChart, SunburstChartVueProps, sunburstPayloadSearcher } from "./chart/SunburstChart.mjs";
 import ResponsiveContainer_default from "./container/ResponsiveContainer.mjs";
 import { Customized } from "./components/Customized.mjs";
 import Legend_default from "./components/legend/Legend.mjs";
 import { Cross } from "./shape/Cross.mjs";
-import { Sector } from "./shape/Sector.mjs";
 import Tooltip, { getUniqPayload } from "./components/Tooltip.mjs";
 import { PieVueProps } from "./polar/pie/type.mjs";
 import { Pie } from "./polar/pie/Pie.mjs";
@@ -51,4 +54,4 @@ import { PolarRadiusAxis } from "./polar/radar/PolarRadiusAxis.mjs";
 import { RadialBar } from "./polar/radial-bar/RadialBar.mjs";
 import { Polygon } from "./shape/Polygon.mjs";
 import { useActiveTooltipCoordinate, useActiveTooltipLabel, useCartesianScale, useIsTooltipActive, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks } from "./hooks/publicHooks.mjs";
-export { Area, AreaChart, Bar, BarChart, CartesianAxis, CartesianGrid, Cell, ComposedChart, Cross, Curve, CurveVueProps, Customized, Dot, ErrorBar, ErrorBarVueProps, Funnel, FunnelChart, FunnelVueProps, Label, LabelList, Legend_default as Legend, Line, LineChart, LineContextKey, Pie, PieChart, PieVueProps, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Polygon, Radar, RadarChart, RadialBar, RadialBarChart, Rectangle, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer_default as ResponsiveContainer, Scatter, ScatterChart, Sector, Symbols, Text_default as Text, Tooltip, Trapezoid, Treemap, TreemapVueProps, XAxis, YAxis, ZAxis, createErrorBarRegistry, getPath, getUniqPayload, provideErrorBarContext, provideErrorBarRegistry, provideLineContext, treemapPayloadSearcher, useActiveTooltipCoordinate, useActiveTooltipDataPoints, useActiveTooltipLabel, useCartesianScale, useChartHeight, useChartWidth, useErrorBarContext, useErrorBarRegistry, useIsTooltipActive, useLine, useLineContext, useMargin, useOffset, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks };
+export { Area, AreaChart, Bar, BarChart, CartesianAxis, CartesianGrid, Cell, ComposedChart, Cross, Curve, CurveVueProps, Customized, Dot, ErrorBar, ErrorBarVueProps, Funnel, FunnelChart, FunnelVueProps, Global, Label, LabelList, Legend_default as Legend, Line, LineChart, LineContextKey, Pie, PieChart, PieVueProps, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Polygon, Radar, RadarChart, RadialBar, RadialBarChart, Rectangle, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer_default as ResponsiveContainer, Sankey, SankeyVueProps, Scatter, ScatterChart, Sector, SunburstChart, SunburstChartVueProps, Symbols, Text_default as Text, Tooltip, Trapezoid, Treemap, TreemapVueProps, XAxis, YAxis, ZAxis, createErrorBarRegistry, getPath, getUniqPayload, provideErrorBarContext, provideErrorBarRegistry, provideLineContext, sankeyPayloadSearcher, sunburstPayloadSearcher, treemapPayloadSearcher, useActiveTooltipCoordinate, useActiveTooltipDataPoints, useActiveTooltipLabel, useCartesianScale, useChartHeight, useChartWidth, useErrorBarContext, useErrorBarRegistry, useIsTooltipActive, useLine, useLineContext, useMargin, useOffset, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks };

package/dist/es/polar/pie/Pie.mjs

@@ -120,7 +120,7 @@ var Pie = /* @__PURE__ */ defineComponent({
 				"isActive": props.isAnimationActive,
 				"from": 0,
 				"to": 1,
-				"transition": { duration: 1.5 }
+				"transition": props.transition
 			}, { default: (progress) => {
 				let curAngle = sectorList[0]?.startAngle ?? 0;
 				const sectorNodes = sectorList.map((sector, i) => {

package/dist/es/polar/pie/type.mjs

@@ -85,6 +85,13 @@ var PieVueProps = {
 		type: Boolean,
 		default: true
 	},
+	transition: {
+		type: Object,
+		default: () => ({
+			duration: 1.2,
+			ease: "easeOut"
+		})
+	},
 	label: {
 		type: Boolean,
 		default: false

package/dist/es/polar/radar/Radar.mjs

@@ -115,6 +115,13 @@ var Radar = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: true
 		},
+		transition: {
+			type: Object,
+			default: () => ({
+				duration: .8,
+				ease: "easeOut"
+			})
+		},
 		activeDot: {
 			type: [Object, Boolean],
 			default: true
@@ -175,7 +182,7 @@ var Radar = /* @__PURE__ */ defineComponent({
 		let prevPoints = null;
 		let prevBaseLinePoints = null;
 		let animationId = 0;
-		let lastData = void 0;
+		let lastData;
 		const renderPolygon = (points, baseLinePoints, isRange) => {
 			const stroke = props.stroke ?? props.fill;
 			const hasStroke = stroke && stroke !== "none";
@@ -259,6 +266,7 @@ var Radar = /* @__PURE__ */ defineComponent({
 				createVNode(Animate, {
 					"key": animationId,
 					"isActive": true,
+					"transition": props.transition,
 					"onAnimationStart": () => {
 						isAnimating.value = true;
 					},

package/dist/es/polar/radial-bar/RadialBar.mjs

@@ -165,6 +165,7 @@ var RadialBar = /* @__PURE__ */ defineComponent({
 				createVNode(Animate, {
 					"key": animationId,
 					"isActive": true,
+					"transition": props.transition,
 					"onAnimationStart": () => {
 						isAnimating.value = true;
 					},

package/dist/es/polar/radial-bar/type.mjs

@@ -64,6 +64,13 @@ var RadialBarVueProps = {
 		type: Boolean,
 		default: true
 	},
+	transition: {
+		type: Object,
+		default: () => ({
+			duration: .4,
+			ease: "easeOut"
+		})
+	},
 	minPointSize: {
 		type: Number,
 		default: 0

package/dist/es/utils/Global.mjs

@@ -0,0 +1,18 @@
+//#region src/utils/Global.ts
+function parseIsSsrByDefault() {
+	return typeof window === "undefined";
+}
+var Global = {
+	isSsr: parseIsSsrByDefault(),
+	get(key) {
+		return Global[key];
+	},
+	set(key, value) {
+		if (typeof key === "string") Global[key] = value;
+		else Object.keys(key).forEach((k) => {
+			Global[k] = key[k];
+		});
+	}
+};
+//#endregion
+export { Global };

package/dist/es/utils/attrs.mjs

@@ -1,4 +1,4 @@
-import { isSsr } from "./validate.mjs";
+import { Global } from "./Global.mjs";
 //#region src/utils/attrs.ts
 var stringCache = {
 	widthCache: {},
@@ -23,7 +23,7 @@ function removeInvalidKeys(obj) {
 	return copyObj;
 }
 function getStringSize(text, style = {}) {
-	if (text === void 0 || text === null || isSsr) return {
+	if (text === void 0 || text === null || Global.isSsr) return {
 		width: 0,
 		height: 0
 	};