vccs 0.1.0 → 0.3.0

package/dist/es/chart/Treemap.mjs

@@ -0,0 +1,379 @@
+import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../state/tooltipSlice.mjs";
+import { useAppDispatch } from "../state/hooks.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { getStringSize } from "../utils/attrs.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 { computeTreemapLayout } from "./treemapUtils.mjs";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, ref, watchEffect } from "vue";
+import { provideStore } from "@reduxjs/vue-redux";
+import { get } from "lodash-es";
+//#region src/chart/Treemap.tsx
+var DEFAULT_COLORS = [
+	"#8889DD",
+	"#9597E4",
+	"#8DC77B",
+	"#A5D297",
+	"#E2CF45",
+	"#F8C12D",
+	"#F89C24",
+	"#F56E1A"
+];
+/**
+* Recursively sum all descendant values for a given dataKey.
+*/
+function sumValues(item, dataKey) {
+	if (item.children && item.children.length > 0) return item.children.reduce((sum, child) => sum + sumValues(child, dataKey), 0);
+	const val = item[dataKey];
+	return typeof val === "number" && val > 0 ? val : 0;
+}
+/**
+* Tooltip payload searcher for Treemap — navigates nested node structure
+* using a path string like 'children[0].children[1]'.
+*/
+var treemapPayloadSearcher = (data, activeIndex) => {
+	if (!data || !activeIndex) return void 0;
+	return get(data, activeIndex);
+};
+var treemapOptions = {
+	chartName: "Treemap",
+	defaultTooltipEventType: "item",
+	validateTooltipEventTypes: ["item"],
+	tooltipPayloadSearcher: treemapPayloadSearcher,
+	eventEmitter: void 0
+};
+/**
+* Build a hierarchical node structure with tooltipIndex paths for tooltip lookup.
+*/
+function buildNodeTree(data, dataKey, nameKey, parentIndex = "") {
+	return {
+		children: data.map((item, i) => {
+			const tooltipIndex = `${parentIndex}children[${i}]`;
+			if (item.children && item.children.length > 0) {
+				const childTree = buildNodeTree(item.children, dataKey, nameKey, `${tooltipIndex}.`);
+				return {
+					...item,
+					tooltipIndex,
+					...childTree
+				};
+			}
+			return {
+				...item,
+				tooltipIndex,
+				value: sumValues(item, dataKey)
+			};
+		}),
+		name: "root",
+		tooltipIndex: parentIndex
+	};
+}
+var TreemapVueProps = {
+	data: {
+		type: Array,
+		required: true
+	},
+	dataKey: {
+		type: String,
+		default: "value"
+	},
+	nameKey: {
+		type: String,
+		default: "name"
+	},
+	width: {
+		type: Number,
+		required: true
+	},
+	height: {
+		type: Number,
+		required: true
+	},
+	aspectRatio: {
+		type: Number,
+		default: 4 / 3
+	},
+	fill: {
+		type: String,
+		default: "#808080"
+	},
+	stroke: {
+		type: String,
+		default: "#fff"
+	},
+	type: {
+		type: String,
+		default: "flat"
+	},
+	colorPanel: {
+		type: Array,
+		default: void 0
+	},
+	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
+	}
+};
+/**
+* Inner component that has access to the Redux store (provided by Treemap wrapper).
+*/
+var TreemapInner = /* @__PURE__ */ defineComponent({
+	name: "TreemapInner",
+	props: TreemapVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		const colors = computed(() => props.colorPanel ?? DEFAULT_COLORS);
+		const breadcrumbTrail = ref([]);
+		const currentData = ref(null);
+		const animationKey = ref(0);
+		const isNestMode = computed(() => props.type === "nest");
+		const nestCurrentData = computed(() => {
+			if (!isNestMode.value) return null;
+			return currentData.value ?? props.data;
+		});
+		function computeNestLevelData(data) {
+			return data.map((item) => {
+				const aggregatedValue = sumValues(item, props.dataKey);
+				const { children: _, ...rest } = item;
+				return {
+					...rest,
+					[props.dataKey]: aggregatedValue
+				};
+			});
+		}
+		const nodes = computed(() => {
+			return computeTreemapLayout({
+				data: isNestMode.value ? computeNestLevelData(nestCurrentData.value ?? props.data) : props.data,
+				width: props.width,
+				height: props.height,
+				dataKey: props.dataKey,
+				nameKey: props.nameKey,
+				aspectRatio: props.aspectRatio,
+				colorPanel: colors.value
+			});
+		});
+		const nodeTree = computed(() => {
+			return buildNodeTree(isNestMode.value ? nestCurrentData.value ?? props.data : props.data, props.dataKey, props.nameKey);
+		});
+		watchEffect((onCleanup) => {
+			const tooltipEntrySettings = {
+				dataDefinedOnItem: nodeTree.value,
+				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 getTooltipIndex(node) {
+			const data = isNestMode.value ? nestCurrentData.value ?? props.data : props.data;
+			const idx = data.findIndex((item) => item[props.nameKey] === node.name);
+			if (idx >= 0) return `children[${idx}]`;
+			for (let i = 0; i < data.length; i++) if (data[i].children) {
+				const childIdx = data[i].children.findIndex((c) => c[props.nameKey] === node.name);
+				if (childIdx >= 0) return `children[${i}].children[${childIdx}]`;
+			}
+			return `children[0]`;
+		}
+		function handleNestClick(node, e) {
+			const sourceData = nestCurrentData.value ?? props.data;
+			const clickedItem = sourceData.find((item) => item[props.nameKey] === node.name);
+			if (clickedItem?.children && clickedItem.children.length > 0) {
+				breadcrumbTrail.value = [...breadcrumbTrail.value, {
+					name: clickedItem[props.nameKey] ?? clickedItem.name,
+					data: sourceData
+				}];
+				currentData.value = clickedItem.children;
+				animationKey.value++;
+			}
+			props.onClick?.(node, e);
+		}
+		function navigateToBreadcrumb(index) {
+			if (index < 0) {
+				currentData.value = null;
+				breadcrumbTrail.value = [];
+			} else {
+				currentData.value = breadcrumbTrail.value[index].data;
+				breadcrumbTrail.value = breadcrumbTrail.value.slice(0, index);
+			}
+			animationKey.value++;
+		}
+		function getNodeFill(node) {
+			return node.color ?? props.fill;
+		}
+		function handleNodeMouseEnter(node, e) {
+			const tooltipIndex = getTooltipIndex(node);
+			const activeCoordinate = {
+				x: node.x + node.width / 2,
+				y: node.y + node.height / 2
+			};
+			dispatch(setActiveMouseOverItemIndex({
+				activeIndex: tooltipIndex,
+				activeDataKey: props.dataKey,
+				activeCoordinate
+			}));
+			props.onMouseEnter?.(node, e);
+		}
+		function handleNodeMouseLeave(node, e) {
+			dispatch(mouseLeaveItem());
+			props.onMouseLeave?.(node, e);
+		}
+		function handleNodeClick(node, e) {
+			if (isNestMode.value) handleNestClick(node, e);
+			else {
+				const tooltipIndex = getTooltipIndex(node);
+				const activeCoordinate = {
+					x: node.x + node.width / 2,
+					y: node.y + node.height / 2
+				};
+				dispatch(setActiveClickItemIndex({
+					activeIndex: tooltipIndex,
+					activeDataKey: props.dataKey,
+					activeCoordinate
+				}));
+				props.onClick?.(node, e);
+			}
+		}
+		function renderNodeAtProgress(node, index, progress) {
+			const nodeFill = getNodeFill(node);
+			const translateX = (-node.x - node.width) * (1 - progress);
+			const transform = progress < 1 ? `translate(${translateX}, 0)` : void 0;
+			const nodeProps = {
+				...node,
+				index,
+				fill: nodeFill,
+				stroke: props.stroke
+			};
+			if (slots.content) return createVNode("g", {
+				"key": `node-${index}`,
+				"class": "v-charts-treemap-node",
+				"style": { transformOrigin: `${node.x}px ${node.y}px` },
+				"transform": transform,
+				"onClick": (e) => handleNodeClick(node, e),
+				"onMouseenter": (e) => handleNodeMouseEnter(node, e),
+				"onMouseleave": (e) => handleNodeMouseLeave(node, e)
+			}, [slots.content(nodeProps)]);
+			const arrow = isNestMode.value && (() => {
+				const item = (nestCurrentData.value ?? props.data).find((d) => d[props.nameKey] === node.name);
+				return item?.children && item.children.length > 0;
+			})() && node.width > 10 && node.height > 10 ? createVNode("polygon", {
+				"points": `${node.x + 2},${node.y + node.height / 2} ${node.x + 6},${node.y + node.height / 2 + 3} ${node.x + 2},${node.y + node.height / 2 + 6}`,
+				"fill": "#fff"
+			}, null) : null;
+			const nameSize = node.width > 20 && node.height > 20 ? getStringSize(node.name, { fontSize: "14px" }) : {
+				width: Infinity,
+				height: Infinity
+			};
+			const text = node.width > 20 && node.height > 20 && nameSize.width < node.width && nameSize.height < node.height ? createVNode("text", {
+				"x": node.x + 8,
+				"y": node.y + node.height / 2 + 7,
+				"fill": "#fff",
+				"font-size": 14
+			}, [node.name]) : null;
+			return createVNode("g", {
+				"key": `node-${index}`,
+				"class": "v-charts-treemap-node",
+				"style": { transformOrigin: `${node.x}px ${node.y}px` },
+				"transform": transform,
+				"onClick": (e) => handleNodeClick(node, e),
+				"onMouseenter": (e) => handleNodeMouseEnter(node, e),
+				"onMouseleave": (e) => handleNodeMouseLeave(node, e)
+			}, [
+				createVNode("rect", {
+					"x": node.x,
+					"y": node.y,
+					"width": node.width,
+					"height": node.height,
+					"fill": nodeFill,
+					"stroke": props.stroke
+				}, null),
+				arrow,
+				text
+			]);
+		}
+		function renderBreadcrumb() {
+			if (!isNestMode.value || breadcrumbTrail.value.length === 0) return null;
+			return createVNode("div", { "class": "v-charts-treemap-breadcrumb" }, [createVNode("span", {
+				"class": "v-charts-treemap-breadcrumb-item",
+				"style": { cursor: "pointer" },
+				"onClick": () => navigateToBreadcrumb(-1)
+			}, [createTextVNode("Root")]), breadcrumbTrail.value.map((entry, i) => createVNode("span", { "key": i }, [createVNode("span", { "style": { margin: "0 4px" } }, [createTextVNode("/")]), createVNode("span", {
+				"class": "v-charts-treemap-breadcrumb-item",
+				"style": { cursor: "pointer" },
+				"onClick": () => navigateToBreadcrumb(i)
+			}, [entry.name])]))]);
+		}
+		return () => createVNode(Fragment, null, [renderBreadcrumb(), createVNode(Surface, {
+			"width": props.width,
+			"height": props.height
+		}, { default: () => [createVNode(Layer, { "class": "v-charts-treemap" }, { default: () => [createVNode(Animate, {
+			"key": animationKey.value,
+			"isActive": props.isAnimationActive,
+			"from": 0,
+			"to": 1,
+			"transition": props.transition
+		}, { default: (progress) => nodes.value.map((node, index) => renderNodeAtProgress(node, index, progress)) })] })] })]);
+	}
+});
+/**
+* Treemap chart — hierarchical data visualization using nested rectangles.
+*
+* Supports `<Tooltip>` as a child component (same pattern as BarChart, LineChart, etc.).
+*
+* Usage:
+* ```vue
+* <Treemap :data="data" data-key="value" :width="600" :height="400">
+*   <Tooltip />
+* </Treemap>
+* ```
+*/
+var Treemap = /* @__PURE__ */ defineComponent({
+	name: "Treemap",
+	props: TreemapVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		provideStore({ store: createRechartsStore({ options: treemapOptions }, "Treemap") });
+		return () => {
+			if (!props.data || props.data.length === 0) return null;
+			return createVNode(RechartsWrapper, {
+				"width": props.width,
+				"height": props.height
+			}, { default: () => [createVNode(TreemapInner, props, { content: slots.content }), slots.default?.()] });
+		};
+	}
+});
+//#endregion
+export { Treemap, TreemapVueProps, treemapPayloadSearcher };

package/dist/es/chart/const.mjs

@@ -1,7 +1,7 @@
 //#region src/chart/const.ts
-var e = {
+var FULL_WIDTH_AND_HEIGHT = {
 	width: "100%",
 	height: "100%"
 };
 //#endregion
-export { e as FULL_WIDTH_AND_HEIGHT };
+export { FULL_WIDTH_AND_HEIGHT };

package/dist/es/chart/generateCategoricalChart.mjs

@@ -1,27 +1,30 @@
-import { validateWidthHeight as e } from "../utils/validate.mjs";
-import { provideClipPathId as t } from "./provideClipPathId.mjs";
-import { createRechartsStore as n } from "../state/store.mjs";
-import r from "./Surface.mjs";
-import { ChartDataContextProvider as i } from "../context/ChartDataContextProvider.mjs";
-import a from "../container/ClipPath.mjs";
-import { RechartsWrapper as o } from "./RechartsWrapper.mjs";
-import { FULL_WIDTH_AND_HEIGHT as s } from "./const.mjs";
-import { ReportMainChartProps as c } from "../state/ReportMainChartProps.mjs";
-import l from "../state/ReportChartProps.mjs";
-import { applyDefaultProps as u } from "../utils/props.mjs";
-import { ReportPolarOptions as d } from "../state/ReportPolarOptions.mjs";
-import { Fragment as f, createVNode as p, defineComponent as m, mergeProps as h } from "vue";
-import { provideStore as g } from "@reduxjs/vue-redux";
+import { classProp } from "../types/common.mjs";
+import { validateWidthHeight } from "../utils/validate.mjs";
+import { provideClipPathId } from "./provideClipPathId.mjs";
+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 { 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 { provideStore } from "@reduxjs/vue-redux";
 //#region src/chart/generateCategoricalChart.tsx
-var _ = "horizontal", v = {
+var defaultLayout = "horizontal";
+var defaultMargin = {
 	top: 5,
 	right: 5,
 	bottom: 5,
 	left: 5
-}, y = {
+};
+var CategoricalProps = {
 	accessibilityLayer: {
 		type: Boolean,
-		default: !0
+		default: true
 	},
 	barCategoryGap: {
 		type: [Number, String],
@@ -32,7 +35,7 @@ var _ = "horizontal", v = {
 		default: 4
 	},
 	barSize: { type: [Number, String] },
-	class: { type: String },
+	class: classProp,
 	compact: { type: Boolean },
 	cx: { type: [Number, String] },
 	cy: { type: [Number, String] },
@@ -52,17 +55,17 @@ var _ = "horizontal", v = {
 	innerRadius: { type: [Number, String] },
 	layout: {
 		type: String,
-		default: _
+		default: defaultLayout
 	},
 	margin: {
 		type: Object,
-		default: () => v
+		default: () => defaultMargin
 	},
 	maxBarSize: { type: Number },
 	outerRadius: { type: [Number, String] },
 	reverseStackOrder: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	role: { type: String },
 	stackOffset: {
@@ -82,85 +85,92 @@ var _ = "horizontal", v = {
 	width: { type: Number },
 	to: { type: [String, Object] }
 };
-function b({ chartName: b, defaultProps: x = {}, defaultTooltipEventType: S = "axis", validateTooltipEventTypes: C = ["axis"], tooltipPayloadSearcher: w }) {
-	return /* @__PURE__ */ m({
-		name: b,
-		props: u(y, x),
-		setup(u, { attrs: m, slots: y }) {
-			g({ store: n({ options: {
-				chartName: b,
-				defaultTooltipEventType: S,
-				validateTooltipEventTypes: C,
-				tooltipPayloadSearcher: w,
+function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltipEventType = "axis", validateTooltipEventTypes = ["axis"], tooltipPayloadSearcher }) {
+	return /* @__PURE__ */ defineComponent({
+		name: chartName,
+		props: applyDefaultProps(CategoricalProps, defaultProps),
+		setup(props, { attrs, slots }) {
+			provideStore({ store: createRechartsStore({ options: {
+				chartName,
+				defaultTooltipEventType,
+				validateTooltipEventTypes,
+				tooltipPayloadSearcher,
 				eventEmitter: void 0
-			} }, u.id ?? b) });
-			let T = t(u);
+			} }, props.id ?? chartName) });
+			const clipPathId = provideClipPathId(props);
 			return () => {
-				let { compact: t, width: n, height: g, title: b, desc: S, ...C } = u, w = { ...m };
-				if (!e({
-					width: n,
-					height: g
+				const { compact, width, height, title, desc, ...rest } = props;
+				const attributes = { ...attrs };
+				if (!validateWidthHeight({
+					width,
+					height
 				})) return null;
-				let E = u.layout ?? x.layout ?? _, D = E === "centric" || E === "radial";
-				if (t) return p(f, null, [
-					p(i, { chartData: u.data }, null),
-					p(c, {
-						width: n,
-						height: g,
-						layout: E,
-						margin: u.margin ?? v
+				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),
-					D && p(d, {
-						cx: u.cx ?? "50%",
-						cy: u.cy ?? "50%",
-						startAngle: u.startAngle ?? x.startAngle ?? 90,
-						endAngle: u.endAngle ?? x.endAngle ?? -270,
-						innerRadius: u.innerRadius ?? 0,
-						outerRadius: u.outerRadius ?? "80%"
+					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),
-					p(r, h(m, C, {
-						width: n,
-						height: g,
-						title: b,
-						desc: S
-					}), { default: () => [p(a, { clipPathId: T }, null), y.default?.()] })
+					createVNode(Surface_default, mergeProps(attrs, rest, {
+						"width": width,
+						"height": height,
+						"title": title,
+						"desc": desc
+					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
 				]);
-				u.accessibilityLayer && (w.tabIndex = u.tabIndex ?? 0, w.role = u.role ?? "application");
-				let O = {}, k = {};
-				for (let [e, t] of Object.entries(w)) e.startsWith("on") && typeof t == "function" ? O[e] = t : k[e] = t;
-				return p(f, null, [
-					p(i, { chartData: u.data }, null),
-					p(c, {
-						width: n,
-						height: g,
-						layout: E,
-						margin: u.margin ?? v
+				if (props.accessibilityLayer) {
+					attributes.tabindex = props.tabIndex ?? 0;
+					attributes.role = props.role ?? "application";
+				}
+				const eventHandlerAttrs = {};
+				const svgAttributes = {};
+				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,
+						"layout": layout,
+						"margin": props.margin ?? defaultMargin
 					}, null),
-					D && p(d, {
-						cx: u.cx ?? "50%",
-						cy: u.cy ?? "50%",
-						startAngle: u.startAngle ?? x.startAngle ?? 90,
-						endAngle: u.endAngle ?? x.endAngle ?? -270,
-						innerRadius: u.innerRadius ?? 0,
-						outerRadius: u.outerRadius ?? "80%"
+					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),
-					p(o, h({
-						style: u.style,
-						class: u.class,
-						width: n,
-						height: g
-					}, O), { default: () => [p(r, h(k, {
-						width: n,
-						height: g,
-						title: b,
-						desc: S,
-						style: s
-					}), { default: () => [p(a, { clipPathId: T }, null), y.default?.()] }), y.tooltip?.()] }),
-					p(l, u, null)
+					createVNode(RechartsWrapper, mergeProps({
+						"style": props.style,
+						"class": props.class,
+						"width": width,
+						"height": height
+					}, eventHandlerAttrs), { default: () => [createVNode(Surface_default, mergeProps(svgAttributes, {
+						"width": width,
+						"height": height,
+						"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)
 				]);
 			};
 		}
 	});
 }
 //#endregion
-export { b as generateCategoricalChart };
+export { generateCategoricalChart };

package/dist/es/chart/provideClipPathId.mjs

@@ -1,10 +1,15 @@
-import { uniqueId as e } from "../utils/data-utils.mjs";
-import { createContext as t } from "../utils/createContext.mjs";
+import { uniqueId } from "../utils/data-utils.mjs";
+import { createContext } from "../utils/createContext.mjs";
 //#region src/chart/provideClipPathId.ts
-var [n, r] = t("clipPathId");
-function i(t) {
-	let n = `${t.id ?? e("v-charts")}-clip`;
-	return r(n), n;
+var [useClipPathId, provideClipPathIdRaw] = createContext("clipPathId");
+/**
+* Provide the clipPathId to child components.
+* @param props - The props object from the chart component
+*/
+function provideClipPathId(props) {
+	const clipPathId = `${props.id ?? uniqueId("v-charts")}-clip`;
+	provideClipPathIdRaw(clipPathId);
+	return clipPathId;
 }
 //#endregion
-export { i as provideClipPathId, n as useClipPathId };
+export { provideClipPathId, useClipPathId };