vccs 0.2.0 → 0.3.0

package/dist/es/cartesian/reference-area/ReferenceArea.mjs

@@ -1,4 +1,5 @@
-import { isNumOrStr, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { classProp } from "../../types/common.mjs";
+import { isNumOrStr } from "../../utils/validate.mjs";
 import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
 import { selectAxisScale } from "../../state/selectors/axisSelectors.mjs";
 import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
@@ -7,22 +8,8 @@ import { Label } from "../../components/label/Label.mjs";
 import { Rectangle } from "../../shape/Rectangle.mjs";
 import { addArea, removeArea } from "../../state/referenceElementsSlice.mjs";
 import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { rangeMax, rangeMin, scaleValue } from "../../utils/scale.mjs";
 import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } from "vue";
-//#region src/cartesian/reference-area/ReferenceArea.tsx
-function scaleValue(scale, value, position) {
-	const coord = scale(value);
-	if (!isWellBehavedNumber(coord)) return void 0;
-	const bandwidth = scale.bandwidth?.() ?? 0;
-	return position === "start" ? coord : coord + bandwidth;
-}
-function rangeMin(scale) {
-	const r = scale.range();
-	return Math.min(r[0], r[1]);
-}
-function rangeMax(scale) {
-	const r = scale.range();
-	return Math.max(r[0], r[1]);
-}
 var ReferenceArea = /* @__PURE__ */ defineComponent({
 	name: "ReferenceArea",
 	props: {
@@ -79,14 +66,11 @@ var ReferenceArea = /* @__PURE__ */ defineComponent({
 			type: String,
 			default: "discard"
 		},
-		className: {
-			type: String,
-			default: void 0
-		},
 		radius: {
 			type: [Number, Array],
 			default: 0
-		}
+		},
+		class: classProp
 	},
 	inheritAttrs: false,
 	setup(props, { attrs }) {
@@ -144,7 +128,7 @@ var ReferenceArea = /* @__PURE__ */ defineComponent({
 			};
 			const labelValue = props.label;
 			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
-			return createVNode(Layer, { "class": ["v-charts-reference-area", props.className] }, { default: () => [createVNode(Rectangle, mergeProps(svgAttrs, {
+			return createVNode(Layer, { "class": ["v-charts-reference-area", props.class] }, { default: () => [createVNode(Rectangle, mergeProps(svgAttrs, {
 				"clip-path": clipPath,
 				"x": r.x,
 				"y": r.y,

package/dist/es/cartesian/reference-dot/ReferenceDot.mjs

@@ -0,0 +1,134 @@
+import { isNumOrStr } from "../../utils/validate.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisScale } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { addDot, removeDot } from "../../state/referenceElementsSlice.mjs";
+import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { isInRange, scaleCoord } from "../../utils/scale.mjs";
+import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } from "vue";
+var ReferenceDot = /* @__PURE__ */ defineComponent({
+	name: "ReferenceDot",
+	props: {
+		x: {
+			type: [Number, String],
+			default: void 0
+		},
+		y: {
+			type: [Number, String],
+			default: void 0
+		},
+		r: {
+			type: Number,
+			default: 10
+		},
+		xAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		yAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		fill: {
+			type: String,
+			default: "#fff"
+		},
+		stroke: {
+			type: String,
+			default: "#ccc"
+		},
+		label: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object
+			],
+			default: void 0
+		},
+		ifOverflow: {
+			type: String,
+			default: "discard"
+		}
+	},
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const dispatch = useAppDispatch();
+		const isPanorama = useIsPanorama();
+		const clipPathId = useClipPathId();
+		const settings = reactive({
+			xAxisId: props.xAxisId,
+			yAxisId: props.yAxisId,
+			ifOverflow: props.ifOverflow,
+			x: props.x,
+			y: props.y,
+			r: props.r
+		});
+		onMounted(() => {
+			dispatch(addDot(settings));
+		});
+		onUnmounted(() => {
+			dispatch(removeDot(settings));
+		});
+		const xAxisScale = useAppSelector((state) => selectAxisScale(state, "xAxis", props.xAxisId, isPanorama));
+		const yAxisScale = useAppSelector((state) => selectAxisScale(state, "yAxis", props.yAxisId, isPanorama));
+		const dotCoord = computed(() => {
+			const xScale = xAxisScale.value;
+			const yScale = yAxisScale.value;
+			if (!xScale || !yScale) return null;
+			if (!isNumOrStr(props.x) || !isNumOrStr(props.y)) return null;
+			const cx = scaleCoord(xScale, props.x);
+			const cy = scaleCoord(yScale, props.y);
+			if (cx == null || cy == null) return null;
+			if (props.ifOverflow === "discard") {
+				if (!isInRange(xScale, cx) || !isInRange(yScale, cy)) return null;
+			}
+			return {
+				cx,
+				cy
+			};
+		});
+		return () => {
+			const coord = dotCoord.value;
+			if (!coord) return null;
+			const { cx, cy } = coord;
+			const clipPath = props.ifOverflow === "hidden" ? `url(#${clipPathId})` : void 0;
+			const { class: userClass, ...restAttrs } = attrs;
+			const svgAttrs = {
+				...restAttrs,
+				fill: props.fill,
+				stroke: props.stroke
+			};
+			const labelViewBox = {
+				x: cx - props.r,
+				y: cy - props.r,
+				width: props.r * 2,
+				height: props.r * 2
+			};
+			const labelValue = props.label;
+			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
+			const shapeProps = {
+				...svgAttrs,
+				cx,
+				cy,
+				r: props.r,
+				clipPath
+			};
+			return createVNode(Layer, { "class": ["v-charts-reference-dot", userClass] }, { default: () => [slots.shape ? slots.shape(shapeProps) : createVNode(Dot, mergeProps(svgAttrs, {
+				"cx": cx,
+				"cy": cy,
+				"r": props.r,
+				"clip-path": clipPath
+			}), null), labelValue != null && labelValue !== false && createVNode(Label, mergeProps({
+				"viewBox": labelViewBox,
+				"value": typeof labelValue === "string" || typeof labelValue === "number" ? labelValue : void 0
+			}, labelProps), null)] });
+		};
+	}
+});
+//#endregion
+export { ReferenceDot };

package/dist/es/cartesian/reference-line/ReferenceLine.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../../types/common.mjs";
 import { isNumOrStr, isWellBehavedNumber } from "../../utils/validate.mjs";
 import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
 import { selectAxisScale, selectXAxisSettings, selectYAxisSettings } from "../../state/selectors/axisSelectors.mjs";
@@ -7,19 +8,8 @@ import { Layer } from "../../container/Layer.mjs";
 import { Label } from "../../components/label/Label.mjs";
 import { addLine, removeLine } from "../../state/referenceElementsSlice.mjs";
 import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { isInRange, scaleCoord } from "../../utils/scale.mjs";
 import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } from "vue";
-//#region src/cartesian/reference-line/ReferenceLine.tsx
-function scaleCoord(scale, value) {
-	const coord = scale(value);
-	if (!isWellBehavedNumber(coord)) return;
-	return coord + (scale.bandwidth?.() ?? 0) / 2;
-}
-function isInRange(scale, coord) {
-	const r = scale.range();
-	const min = Math.min(r[0], r[1]);
-	const max = Math.max(r[0], r[1]);
-	return coord >= min && coord <= max;
-}
 var ReferenceLine = /* @__PURE__ */ defineComponent({
 	name: "ReferenceLine",
 	props: {
@@ -64,10 +54,7 @@ var ReferenceLine = /* @__PURE__ */ defineComponent({
 			type: String,
 			default: "discard"
 		},
-		className: {
-			type: String,
-			default: void 0
-		}
+		class: classProp
 	},
 	inheritAttrs: false,
 	setup(props, { attrs }) {
@@ -135,9 +122,9 @@ var ReferenceLine = /* @__PURE__ */ defineComponent({
 			const clipPath = props.ifOverflow === "hidden" ? `url(#${clipPathId})` : void 0;
 			const svgAttrs = {
 				...attrs,
-				stroke: props.stroke,
+				"stroke": props.stroke,
 				"stroke-width": props.strokeWidth,
-				fill: props.fill
+				"fill": props.fill
 			};
 			const labelViewBox = {
 				x: Math.min(p1.x, p2.x),
@@ -147,7 +134,7 @@ var ReferenceLine = /* @__PURE__ */ defineComponent({
 			};
 			const labelValue = props.label;
 			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
-			return createVNode(Layer, { "class": ["v-charts-reference-line", props.className] }, { default: () => [createVNode("line", mergeProps(svgAttrs, {
+			return createVNode(Layer, { "class": ["v-charts-reference-line", props.class] }, { default: () => [createVNode("line", mergeProps(svgAttrs, {
 				"clip-path": clipPath,
 				"x1": p1.x,
 				"y1": p1.y,

package/dist/es/chart/RechartsWrapper.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../types/common.mjs";
 import { getChartPointer } from "../utils/chart.mjs";
 import { mouseLeaveChart } from "../state/tooltipSlice.mjs";
 import { useAppDispatch } from "../state/hooks.mjs";
@@ -14,7 +15,7 @@ import { createVNode, defineComponent, ref } from "vue";
 var RechartsWrapper = /* @__PURE__ */ defineComponent({
 	name: "RechartsWrapper",
 	props: {
-		class: { type: String },
+		class: classProp,
 		height: {
 			type: Number,
 			required: true

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

@@ -1,3 +1,4 @@
+import { classProp } from "../types/common.mjs";
 import { validateWidthHeight } from "../utils/validate.mjs";
 import { provideClipPathId } from "./provideClipPathId.mjs";
 import { createRechartsStore } from "../state/store.mjs";
@@ -34,7 +35,7 @@ var CategoricalProps = {
 		default: 4
 	},
 	barSize: { type: [Number, String] },
-	class: { type: String },
+	class: classProp,
 	compact: { type: Boolean },
 	cx: { type: [Number, String] },
 	cy: { type: [Number, String] },
@@ -130,7 +131,7 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
 				]);
 				if (props.accessibilityLayer) {
-					attributes.tabIndex = props.tabIndex ?? 0;
+					attributes.tabindex = props.tabIndex ?? 0;
 					attributes.role = props.role ?? "application";
 				}
 				const eventHandlerAttrs = {};

package/dist/es/chart/treemapUtils.mjs

@@ -0,0 +1,32 @@
+import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
+//#region src/chart/treemapUtils.ts
+function computeTreemapLayout(options) {
+	const { data, width, height, dataKey, aspectRatio = 4 / 3, nameKey = "name", colorPanel } = options;
+	if (!data || data.length === 0 || width <= 0 || height <= 0) return [];
+	const root = hierarchy({ children: data }).sum((d) => {
+		if (d.children && d.children.length > 0) return 0;
+		const val = d[dataKey];
+		return typeof val === "number" && val > 0 ? val : 0;
+	}).sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+	treemap().size([width, height]).tile(treemapSquarify.ratio(aspectRatio)).round(true)(root);
+	return root.leaves().map((leaf) => {
+		const d = leaf.data;
+		let ancestor = leaf;
+		while (ancestor.depth > 1 && ancestor.parent) ancestor = ancestor.parent;
+		const rootIndex = ancestor.parent ? ancestor.parent.children.indexOf(ancestor) : 0;
+		return {
+			x: leaf.x0,
+			y: leaf.y0,
+			width: leaf.x1 - leaf.x0,
+			height: leaf.y1 - leaf.y0,
+			depth: leaf.depth,
+			name: d[nameKey] ?? "",
+			value: leaf.value ?? 0,
+			payload: d,
+			root: rootIndex,
+			color: colorPanel ? colorPanel[rootIndex % colorPanel.length] : void 0
+		};
+	});
+}
+//#endregion
+export { computeTreemapLayout };