vccs 0.4.0 → 0.5.0

package/dist/es/chart/generateCategoricalChart.mjs

@@ -5,13 +5,13 @@ import { createRechartsStore } from "../state/store.mjs";
 import Surface_default from "./Surface.mjs";
 import { ChartDataContextProvider } from "../context/ChartDataContextProvider.mjs";
 import ClipPath_default from "../container/ClipPath.mjs";
-import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import { ChartsWrapper } from "./ChartsWrapper.mjs";
 import { FULL_WIDTH_AND_HEIGHT } from "./const.mjs";
 import { ReportMainChartProps } from "../state/ReportMainChartProps.mjs";
 import ReportChartProps_default from "../state/ReportChartProps.mjs";
 import { applyDefaultProps } from "../utils/props.mjs";
 import { ReportPolarOptions } from "../state/ReportPolarOptions.mjs";
-import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
+import { Fragment, createVNode, defineComponent, mergeProps, ref } from "vue";
 import { provideStore } from "@reduxjs/vue-redux";
 //#region src/chart/generateCategoricalChart.tsx
 var defaultLayout = "horizontal";
@@ -63,6 +63,10 @@ var CategoricalProps = {
 	},
 	maxBarSize: { type: Number },
 	outerRadius: { type: [Number, String] },
+	responsive: {
+		type: Boolean,
+		default: false
+	},
 	reverseStackOrder: {
 		type: Boolean,
 		default: false
@@ -73,7 +77,11 @@ var CategoricalProps = {
 		default: "none"
 	},
 	startAngle: { type: Number },
-	style: { type: Object },
+	style: { type: [
+		String,
+		Object,
+		Array
+	] },
 	syncId: { type: [Number, String] },
 	syncMethod: {
 		type: [String, Function],
@@ -98,38 +106,57 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 				eventEmitter: void 0
 			} }, props.id ?? chartName) });
 			const clipPathId = provideClipPathId(props);
+			const responsiveSize = ref({
+				width: 0,
+				height: 0
+			});
+			function handleResize(width, height) {
+				const roundedWidth = Math.round(width);
+				const roundedHeight = Math.round(height);
+				if (responsiveSize.value.width === roundedWidth && responsiveSize.value.height === roundedHeight) return;
+				responsiveSize.value = {
+					width: roundedWidth,
+					height: roundedHeight
+				};
+			}
 			return () => {
-				const { compact, width, height, title, desc, ...rest } = props;
+				const { compact, width, height, title, desc, responsive, ...rest } = props;
 				const attributes = { ...attrs };
-				if (!validateWidthHeight({
-					width,
-					height
-				})) return null;
+				const effectiveWidth = responsive ? responsiveSize.value.width : width;
+				const effectiveHeight = responsive ? responsiveSize.value.height : height;
+				const hasValidSize = validateWidthHeight({
+					width: effectiveWidth,
+					height: effectiveHeight
+				});
 				const layout = props.layout ?? defaultProps.layout ?? defaultLayout;
 				const isPolarChart = layout === "centric" || layout === "radial";
-				if (compact) return createVNode(Fragment, null, [
-					createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
-					createVNode(ReportMainChartProps, {
-						"width": width,
-						"height": height,
-						"layout": layout,
-						"margin": props.margin ?? defaultMargin
-					}, null),
-					isPolarChart && createVNode(ReportPolarOptions, {
-						"cx": props.cx ?? "50%",
-						"cy": props.cy ?? "50%",
-						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
-						"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
-						"innerRadius": props.innerRadius ?? 0,
-						"outerRadius": props.outerRadius ?? "80%"
-					}, null),
-					createVNode(Surface_default, mergeProps(attrs, rest, {
-						"width": width,
-						"height": height,
-						"title": title,
-						"desc": desc
-					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
-				]);
+				if (compact) {
+					if (!hasValidSize) return null;
+					return createVNode(Fragment, null, [
+						createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+						createVNode(ReportMainChartProps, {
+							"width": effectiveWidth,
+							"height": effectiveHeight,
+							"layout": layout,
+							"margin": props.margin ?? defaultMargin
+						}, null),
+						isPolarChart && createVNode(ReportPolarOptions, {
+							"cx": props.cx ?? "50%",
+							"cy": props.cy ?? "50%",
+							"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
+							"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
+							"innerRadius": props.innerRadius ?? 0,
+							"outerRadius": props.outerRadius ?? "80%"
+						}, null),
+						createVNode(Surface_default, mergeProps(attrs, rest, {
+							"width": effectiveWidth,
+							"height": effectiveHeight,
+							"title": title,
+							"desc": desc
+						}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
+					]);
+				}
+				if (!responsive && !hasValidSize) return null;
 				if (props.accessibilityLayer) {
 					attributes.tabindex = props.tabIndex ?? 0;
 					attributes.role = props.role ?? "application";
@@ -139,14 +166,14 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 				for (const [key, value] of Object.entries(attributes)) if (key.startsWith("on") && typeof value === "function") eventHandlerAttrs[key] = value;
 				else svgAttributes[key] = value;
 				return createVNode(Fragment, null, [
-					createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
-					createVNode(ReportMainChartProps, {
-						"width": width,
-						"height": height,
+					hasValidSize && createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+					hasValidSize && createVNode(ReportMainChartProps, {
+						"width": effectiveWidth,
+						"height": effectiveHeight,
 						"layout": layout,
 						"margin": props.margin ?? defaultMargin
 					}, null),
-					isPolarChart && createVNode(ReportPolarOptions, {
+					hasValidSize && isPolarChart && createVNode(ReportPolarOptions, {
 						"cx": props.cx ?? "50%",
 						"cy": props.cy ?? "50%",
 						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
@@ -154,19 +181,21 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 						"innerRadius": props.innerRadius ?? 0,
 						"outerRadius": props.outerRadius ?? "80%"
 					}, null),
-					createVNode(RechartsWrapper, mergeProps({
+					createVNode(ChartsWrapper, mergeProps({
+						"responsive": responsive,
+						"onResize": handleResize,
 						"style": props.style,
 						"class": props.class,
-						"width": width,
-						"height": height
-					}, eventHandlerAttrs), { default: () => [createVNode(Surface_default, mergeProps(svgAttributes, {
-						"width": width,
-						"height": height,
+						"width": effectiveWidth,
+						"height": effectiveHeight
+					}, eventHandlerAttrs), { default: () => [hasValidSize && createVNode(Surface_default, mergeProps(svgAttributes, {
+						"width": effectiveWidth,
+						"height": effectiveHeight,
 						"title": title,
 						"desc": desc,
 						"style": FULL_WIDTH_AND_HEIGHT
 					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] }), slots.tooltip?.()] }),
-					createVNode(ReportChartProps_default, props, null)
+					hasValidSize && createVNode(ReportChartProps_default, props, null)
 				]);
 			};
 		}

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

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/container/Surface.mjs

@@ -21,7 +21,11 @@ var Surface = /* @__PURE__ */ defineComponent({
 		},
 		class: classProp,
 		style: {
-			type: Object,
+			type: [
+				String,
+				Object,
+				Array
+			],
 			default: void 0
 		},
 		title: {

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/state/cartesianAxisSlice.mjs

@@ -25,6 +25,17 @@ var cartesianAxisSlice = createSlice({
 		removeYAxis(state, action) {
 			delete state.yAxis[action.payload.id];
 		},
+		updateYAxisWidth(state, action) {
+			const { id, width } = action.payload;
+			const axis = state.yAxis[id];
+			if (axis) {
+				const history = axis.widthHistory || [];
+				if (history.length === 3 && history[0] === history[2] && width === history[1] && width !== axis.width && Math.abs(width - (history[0] ?? 0)) <= 1) return;
+				const newHistory = [...history, width].slice(-3);
+				axis.width = width;
+				axis.widthHistory = newHistory;
+			}
+		},
 		addZAxis(state, action) {
 			state.zAxis[action.payload.id] = castDraft(action.payload);
 		},
@@ -33,7 +44,7 @@ var cartesianAxisSlice = createSlice({
 		}
 	}
 });
-var { addXAxis, removeXAxis, addYAxis, removeYAxis, addZAxis, removeZAxis } = cartesianAxisSlice.actions;
+var { addXAxis, removeXAxis, addYAxis, removeYAxis, addZAxis, removeZAxis, updateYAxisWidth } = cartesianAxisSlice.actions;
 var cartesianAxisReducer = cartesianAxisSlice.reducer;
 //#endregion
-export { addXAxis, addYAxis, addZAxis, cartesianAxisReducer, removeXAxis, removeYAxis, removeZAxis };
+export { addXAxis, addYAxis, addZAxis, cartesianAxisReducer, removeXAxis, removeYAxis, removeZAxis, updateYAxisWidth };

package/dist/es/state/selectors/axisSelectors.mjs

@@ -639,7 +639,7 @@ function getXAxisSize(offset, axisSettings) {
 }
 function getYAxisSize(offset, axisSettings) {
 	return {
-		width: axisSettings.width,
+		width: typeof axisSettings.width === "number" ? axisSettings.width : 60,
 		height: offset.height
 	};
 }
@@ -712,7 +712,7 @@ function selectYAxisPosition(state, axisId) {
 }
 var selectYAxisSize = createSelector(selectChartOffset, selectYAxisSettings, (offset, axisSettings) => {
 	return {
-		width: axisSettings.width,
+		width: typeof axisSettings.width === "number" ? axisSettings.width : 60,
 		height: offset.height
 	};
 });

package/dist/es/state/selectors/selectChartOffset.mjs

@@ -18,10 +18,13 @@ var selectChartOffset = createSelector([
 ], (chartWidth, chartHeight, margin, brushHeight, xAxes, yAxes, legendSettings, legendSize) => {
 	const offsetH = yAxes.reduce((result, entry) => {
 		const { orientation } = entry;
-		if (!entry.mirror && !entry.hide) return {
-			...result,
-			[orientation]: result[orientation] + entry.width
-		};
+		if (!entry.mirror && !entry.hide) {
+			const width = typeof entry.width === "number" ? entry.width : 60;
+			return {
+				...result,
+				[orientation]: result[orientation] + width
+			};
+		}
 		return result;
 	}, {
 		left: margin.left || 0,

package/dist/es/state/touchEventsMiddleware.mjs

@@ -1,7 +1,7 @@
+import { DATA_ITEM_DATAKEY_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
 import { getChartPointer } from "../utils/chart.mjs";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType.mjs";
 import { setActiveMouseOverItemIndex, setMouseOverAxisIndex } from "./tooltipSlice.mjs";
-import { DATA_ITEM_DATAKEY_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
 import { selectActivePropsFromChartPointer } from "./selectors/selectActivePropsFromChartPointer.mjs";
 import { selectTooltipCoordinate } from "./selectors/touchSelectors.mjs";
 import { createAction, createListenerMiddleware } from "@reduxjs/toolkit";

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/YAxisUtils.mjs

@@ -0,0 +1,29 @@
+//#region src/utils/YAxisUtils.ts
+/**
+* Calculates the width of the Y-axis based on the tick labels and the axis label.
+* @param params - The parameters object.
+* @param [params.ticks] - An array-like object of tick elements, each with a `getBoundingClientRect` method.
+* @param [params.label] - The axis label element, with a `getBoundingClientRect` method.
+* @param [params.labelGapWithTick] - The gap between the label and the tick.
+* @param [params.tickSize] - The length of the tick line.
+* @param [params.tickMargin] - The margin between the tick line and the tick text.
+* @returns The calculated width of the Y-axis.
+*/
+function getCalculatedYAxisWidth({ ticks, label, labelGapWithTick = 5, tickSize = 0, tickMargin = 0 }) {
+	let maxTickWidth = 0;
+	if (ticks) {
+		Array.from(ticks).forEach((tickNode) => {
+			if (tickNode) {
+				const bbox = tickNode.getBoundingClientRect();
+				if (bbox.width > maxTickWidth) maxTickWidth = bbox.width;
+			}
+		});
+		const labelWidth = label ? label.getBoundingClientRect().width : 0;
+		const tickWidth = (tickSize ?? 0) + (tickMargin ?? 0);
+		const updatedYAxisWidth = maxTickWidth + tickWidth + labelWidth + (label ? labelGapWithTick : 0);
+		return Math.round(updatedYAxisWidth);
+	}
+	return 0;
+}
+//#endregion
+export { getCalculatedYAxisWidth };

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

package/dist/es/utils/validate.mjs

@@ -28,7 +28,6 @@ function isVisible(sign, tickPosition, getSize, start, end) {
 	const size = getSize();
 	return sign * (tickPosition - sign * size / 2 - start) >= 0 && sign * (tickPosition + sign * size / 2 - end) <= 0;
 }
-var isSsr = typeof window === "undefined";
 /**
 * Checks if the value is null or undefined
 * @param {any} value The value to check
@@ -39,4 +38,4 @@ function isNullish(value) {
 }
 var isNumOrStr = (value) => isNumber(value) || typeof value === "string";
 //#endregion
-export { isCategoricalAxis, isNan, isNullish, isNumOrStr, isNumber, isPercent, isSsr, isVisible, isWellBehavedNumber, validateWidthHeight };
+export { isCategoricalAxis, isNan, isNullish, isNumOrStr, isNumber, isPercent, isVisible, isWellBehavedNumber, validateWidthHeight };