vccs 0.6.0 → 1.0.0-beta.2

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

@@ -1,28 +1,49 @@
+import { DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../../utils/const.mjs";
+import { sameAxis } from "../../core/axis/key.mjs";
+import { getBandSizeOfAxis } from "../../core/axis/scale.mjs";
+import { getTooltipNameProp } from "../../core/tooltip.mjs";
+import { polarToCartesian } from "../../utils/polar.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useSeriesProps } from "../../hooks/useSeriesProps.mjs";
+import { radialBarEvents } from "../../events/itemEvents.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
 import { interpolate } from "../../utils/data-utils.mjs";
-import { mouseLeaveItem, setActiveMouseOverItemIndex } from "../../state/tooltipSlice.mjs";
-import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
-import { useIsAnimating } from "../../hooks/useIsAnimating.mjs";
+import { getBaseValueOfBar } from "../../core/coordinates.mjs";
 import { Layer } from "../../container/Layer.mjs";
+import { getValueByDataKey } from "../../utils/chart.mjs";
+import { useAnimationCallbacks } from "../../animation/useAnimationCallbacks.mjs";
+import { useKeyedTransition } from "../../animation/useKeyedTransition.mjs";
+import { labelOpacity } from "../../animation/ridingLabels.mjs";
 import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
 import { LabelList } from "../../components/label/LabelList.mjs";
-import { Animate } from "../../animation/Animate.mjs";
-import { SetPolarGraphicalItem } from "../../state/SetGraphicalItem.mjs";
-import { SetLegendPayload } from "../../state/SetLegendPayload.mjs";
-import { SetTooltipEntrySettings } from "../../state/SetTooltipEntrySettings.mjs";
+import { entryColor, mainColor } from "../../core/color.mjs";
+import { useSetupPolarItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { barPositions, barSizeList, stackedData } from "../../core/barSizing.mjs";
 import { Sector } from "../../shape/Sector.mjs";
-import { selectRadialBarLegendPayload, selectRadialBarSectors } from "../../state/selectors/radialBarSelectors.mjs";
+import { computeRadialBarDataItems, radialBarLegend } from "../../core/radialBar.mjs";
 import { RadialBarVueProps } from "./type.mjs";
-import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
+import { Fragment, computed, createVNode, defineComponent, h, mergeProps } from "vue";
 //#region src/polar/radial-bar/RadialBar.tsx
-function getLegendItemColor(stroke, fill) {
-	return fill;
-}
-var RadialBar = /* @__PURE__ */ defineComponent({
-	name: "RadialBar",
-	props: RadialBarVueProps,
+var RadialBarView = /* @__PURE__ */ defineComponent({
+	name: "RadialBarView",
+	slots: Object,
 	inheritAttrs: false,
-	setup(props, { slots }) {
-		const dispatch = useAppDispatch();
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(view, { slots }) {
+		const emit = radialBarEvents.use();
+		const props = view.item;
+		const attrs = view.svgAttrs;
+		const tooltip = useChart().tooltip;
 		const radialBarSettings = computed(() => ({
 			dataKey: props.dataKey,
 			minPointSize: props.minPointSize,
@@ -30,72 +51,148 @@ var RadialBar = /* @__PURE__ */ defineComponent({
 			maxBarSize: props.maxBarSize,
 			barSize: props.barSize
 		}));
-		SetPolarGraphicalItem(computed(() => ({
-			type: "radialBar",
-			data: void 0,
-			dataKey: props.dataKey,
-			hide: props.hide,
-			angleAxisId: props.angleAxisId,
-			radiusAxisId: props.radiusAxisId,
-			barSize: props.barSize,
-			stackId: props.stackId,
-			minPointSize: props.minPointSize,
-			maxBarSize: props.maxBarSize
-		})));
-		const legendPayload = useAppSelector((state) => selectRadialBarLegendPayload(state, props.legendType));
-		SetLegendPayload(computed(() => legendPayload.value ?? []));
-		const sectors = useAppSelector((state) => selectRadialBarSectors(state, props.radiusAxisId, props.angleAxisId, radialBarSettings.value));
-		SetTooltipEntrySettings({
-			fn: (v) => v,
-			args: computed(() => ({
-				dataDefinedOnItem: void 0,
-				positions: void 0,
-				settings: {
-					dataKey: props.dataKey,
-					nameKey: void 0,
-					name: props.name ?? String(props.dataKey ?? ""),
-					hide: props.hide,
-					type: props.tooltipType,
-					color: getLegendItemColor(props.stroke, props.fill),
-					fill: props.fill,
-					stroke: props.stroke,
-					unit: ""
-				}
-			}))
+		const chart = useChart();
+		const radiusAxis = computed(() => chart.axis("radiusAxis", props.radiusAxisId));
+		const angleAxis = computed(() => chart.axis("angleAxis", props.angleAxisId));
+		const radiusTicks = computed(() => radiusAxis.value.graphicalTicks.value ?? void 0);
+		const angleTicks = computed(() => angleAxis.value.ticks.value ?? void 0);
+		const categoricalAxis = computed(() => chart.inputs.layout() === "centric" ? angleAxis.value : radiusAxis.value);
+		const categoricalTicks = computed(() => chart.inputs.layout() === "centric" ? angleTicks.value : radiusTicks.value);
+		const numericAxis = computed(() => chart.inputs.layout() === "centric" ? radiusAxis.value : angleAxis.value);
+		const bandSize = computed(() => getBandSizeOfAxis(categoricalAxis.value.withScale.value, categoricalTicks.value));
+		const barBandSize = computed(() => getBandSizeOfAxis(categoricalAxis.value.withScale.value, categoricalTicks.value, true) ?? props.maxBarSize ?? chart.options.value.maxBarSize ?? 0);
+		const visibleBars = computed(() => chart.items.polar.entries.value.filter((item) => item.type === "radialBar" && !item.hide && (chart.inputs.layout() === "centric" ? sameAxis(item.angleAxisId, props.angleAxisId) : sameAxis(item.radiusAxisId, props.radiusAxisId))));
+		const sizeList = computed(() => barSizeList(visibleBars.value, chart.options.value.barSize));
+		const positions = computed(() => barPositions(sizeList.value, chart.options.value.maxBarSize, chart.options.value.barGap, chart.options.value.barCategoryGap, barBandSize.value, bandSize.value, props.maxBarSize));
+		const position = computed(() => positions.value?.find((item) => item.stackId === props.stackId && props.dataKey != null && item.dataKeys.includes(props.dataKey))?.position);
+		const stackedData$1 = computed(() => stackedData(numericAxis.value.stackGroups.value, radialBarSettings.value));
+		const sectors = computed(() => {
+			const radius = radiusAxis.value.withScale.value;
+			const angle = angleAxis.value.withScale.value;
+			const viewport = chart.polarLayout.viewBox.value;
+			const { chartData, dataStartIndex } = chart.dataRange.state.value;
+			const band = bandSize.value;
+			const pos = position.value;
+			const radialTicks = radiusTicks.value;
+			const angularTicks = angleTicks.value;
+			const layout = chart.inputs.layout();
+			if (!radius || !angle || !chartData || band == null || !pos || !viewport || !radialTicks || !angularTicks || layout !== "centric" && layout !== "radial") return;
+			const numeric = layout === "centric" ? radius : angle;
+			return computeRadialBarDataItems({
+				angleAxis: angle,
+				angleAxisTicks: angularTicks,
+				bandSize: band,
+				baseValue: getBaseValueOfBar({ numericAxis: numeric }),
+				cx: viewport.cx,
+				cy: viewport.cy,
+				dataKey: props.dataKey,
+				dataStartIndex,
+				displayedData: chart.dataRange.displayedData({}) ?? [],
+				endAngle: viewport.endAngle,
+				layout,
+				minPointSize: props.minPointSize,
+				pos,
+				radiusAxis: radius,
+				radiusAxisTicks: radialTicks,
+				stackedData: stackedData$1.value,
+				stackedDomain: stackedData$1.value ? numeric.scale.domain() : null,
+				startAngle: viewport.startAngle
+			});
+		});
+		const tooltipConfiguration = computed(() => ({
+			dataDefinedOnItem: void 0,
+			positions: sectors.value?.map((sector) => {
+				if (sector.innerRadius == null || sector.outerRadius == null || sector.startAngle == null) return void 0;
+				return polarToCartesian(sector.cx, sector.cy, (sector.innerRadius + sector.outerRadius) / 2, (sector.startAngle + sector.endAngle) / 2);
+			}),
+			colors: sectors.value?.map((sector, index) => entryColor({
+				row: sector.payload,
+				seriesFill: props.fill,
+				index
+			})),
+			settings: {
+				dataKey: props.dataKey,
+				nameKey: void 0,
+				name: getTooltipNameProp(props.name, props.dataKey),
+				hide: props.hide,
+				type: props.tooltipType,
+				color: mainColor("radialBar", props),
+				fill: props.fill,
+				stroke: props.stroke,
+				unit: ""
+			}
+		}));
+		tooltip.entries.register(tooltipConfiguration);
+		const activeIndex = tooltip.activeIndexFor(tooltipConfiguration);
+		const activateSector = (channel, index) => tooltip.activate(channel, {
+			type: "item",
+			configuration: tooltipConfiguration.value,
+			index
+		});
+		const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+		const { items } = useKeyedTransition(() => sectors.value?.map((sector, index) => ({
+			...sector,
+			index
+		})), {
+			key: (sector, index) => getValueByDataKey(sector.payload, "name") ?? index,
+			interpolate: (from, to, t) => ({
+				...to,
+				startAngle: interpolate(from.startAngle ?? 0, to.startAngle ?? 0, t),
+				endAngle: interpolate(from.endAngle, to.endAngle, t),
+				innerRadius: interpolate(from.innerRadius ?? 0, to.innerRadius ?? 0, t),
+				outerRadius: interpolate(from.outerRadius ?? 0, to.outerRadius ?? 0, t)
+			}),
+			enterFrom: (to) => ({
+				...to,
+				endAngle: to.startAngle ?? 0
+			}),
+			exitTo: (from) => ({
+				...from,
+				endAngle: from.startAngle ?? 0
+			}),
+			isActive: () => props.isAnimationActive !== false,
+			transition: () => props.transition,
+			onEnd: callbacks.onEnd,
+			onStart: callbacks.onStart
 		});
-		const isAnimating = useIsAnimating(() => props.isAnimationActive);
 		provideCartesianLabelListData(computed(() => {
-			if (props.isAnimationActive && isAnimating.value) return void 0;
-			const data = sectors.value;
-			if (!data) return void 0;
-			const defaultFill = props.fill;
-			return data.map((sector) => ({
-				value: sector.value ?? "",
-				payload: sector.payload,
-				parentViewBox: void 0,
-				fill: sector.fill ?? defaultFill,
-				cx: sector.cx,
-				cy: sector.cy,
-				innerRadius: sector.innerRadius,
-				outerRadius: sector.outerRadius,
-				startAngle: sector.startAngle,
-				endAngle: sector.endAngle,
-				clockWise: false
-			}));
+			if (items.value.length === 0) return void 0;
+			return items.value.map((item) => {
+				const sector = item.value;
+				const opacity = labelOpacity(item);
+				return {
+					key: item.key,
+					...opacity != null ? { opacity } : {},
+					value: sector.value ?? "",
+					payload: sector.payload,
+					parentViewBox: void 0,
+					fill: entryColor({
+						row: sector.payload,
+						seriesFill: props.fill,
+						index: sector.index
+					}),
+					cx: sector.cx,
+					cy: sector.cy,
+					innerRadius: sector.innerRadius,
+					outerRadius: sector.outerRadius,
+					startAngle: sector.startAngle,
+					endAngle: sector.endAngle,
+					clockWise: false
+				};
+			});
 		}));
-		let prevSectors = null;
-		let animationId = 0;
-		let lastSectors;
 		const renderSectors = (sectorData) => {
-			const defaultFill = props.fill;
 			const defaultStroke = props.stroke;
 			const showBackground = !!props.background;
 			const backgroundProps = typeof props.background === "object" ? props.background : {};
-			return createVNode(Layer, { "class": "v-charts-radial-bar" }, { default: () => [showBackground && sectorData.map((sector, i) => {
+			return createVNode(Layer, mergeProps(attrs, {
+				"data-slot": "series",
+				"class": ["v-charts-radial-bar", props.class]
+			}), { default: () => [showBackground && sectors.value?.map((sector, i) => {
 				if (!sector.background) return null;
 				const bg = sector.background;
 				return createVNode(Sector, mergeProps({
-					"key": `bg-${i}`,
+					"key": `bg-${getValueByDataKey(sector.payload, "name") ?? i}`,
 					"cx": bg.cx,
 					"cy": bg.cy,
 					"innerRadius": bg.innerRadius,
@@ -105,23 +202,43 @@ var RadialBar = /* @__PURE__ */ defineComponent({
 					"cornerRadius": props.cornerRadius,
 					"forceCornerRadius": props.forceCornerRadius,
 					"cornerIsExternal": props.cornerIsExternal,
-					"fill": "#eee",
+					"fill": "var(--v-charts-muted, #eee)",
 					"fill-opacity": .5
 				}, backgroundProps), null);
 			}), sectorData.map((sector, i) => {
 				if (sector.innerRadius == null || sector.outerRadius == null || sector.startAngle == null || sector.endAngle == null) return null;
-				const sectorFill = sector.fill ?? defaultFill;
-				const onMouseenter = () => {
-					dispatch(setActiveMouseOverItemIndex({
-						activeIndex: String(i),
-						activeDataKey: props.dataKey
-					}));
+				const sectorFill = entryColor({
+					row: sector.payload,
+					seriesFill: props.fill,
+					index: sector.index
+				});
+				const onMouseenter = (event) => {
+					activateSector("hover", sector.index);
+					emit("mouseenter", sector, sector.index, event);
 				};
-				const onMouseleave = () => {
-					dispatch(mouseLeaveItem());
+				const onMouseleave = (event) => {
+					tooltip.clear("hover", "item");
+					emit("mouseleave", sector, sector.index, event);
 				};
-				return createVNode(Sector, {
-					"key": `sector-${i}`,
+				if (slots.shape) return createVNode("g", mergeProps({ "key": items.value[i].key }, { [DATA_ITEM_INDEX_ATTRIBUTE_NAME]: sector.index }, {
+					"onMouseenter": onMouseenter,
+					"onMouseleave": onMouseleave,
+					"onClick": (event) => {
+						activateSector("click", sector.index);
+						emit("click", sector, sector.index, event);
+					}
+				}), [slots.shape({
+					...sector,
+					innerRadius: sector.innerRadius,
+					outerRadius: sector.outerRadius,
+					startAngle: sector.startAngle,
+					endAngle: sector.endAngle,
+					fill: sectorFill,
+					stroke: defaultStroke ?? sectorFill,
+					fillOpacity: props.fillOpacity,
+					isActive: activeIndex.value === sector.index
+				})]);
+				return createVNode(Sector, mergeProps({ "key": items.value[i].key }, { [DATA_ITEM_INDEX_ATTRIBUTE_NAME]: sector.index }, {
 					"cx": sector.cx,
 					"cy": sector.cy,
 					"innerRadius": sector.innerRadius,
@@ -137,62 +254,63 @@ var RadialBar = /* @__PURE__ */ defineComponent({
 					"stroke-width": props.strokeWidth,
 					"stroke-dasharray": props.strokeDasharray,
 					"onMouseenter": onMouseenter,
-					"onMouseleave": onMouseleave
-				}, null);
+					"onMouseleave": onMouseleave,
+					"onClick": (event) => {
+						activateSector("click", sector.index);
+						emit("click", sector, sector.index, event);
+					}
+				}), null);
 			})] });
 		};
 		return () => {
 			if (props.hide) return null;
-			const data = sectors.value;
-			if (data == null || data.length === 0) return null;
-			const sectorData = data;
-			const labelEl = !isAnimating.value && props.label ? createVNode(LabelList, typeof props.label === "object" ? props.label : {}, null) : null;
-			const slotChildren = !isAnimating.value ? slots.default?.() : null;
-			if (!props.isAnimationActive) {
-				prevSectors = sectorData;
-				return createVNode(Fragment, null, [
-					renderSectors(sectorData),
-					labelEl,
-					slotChildren
-				]);
-			}
-			const prevSects = prevSectors;
-			if (data !== lastSectors) {
-				animationId++;
-				lastSectors = data;
-			}
+			if (items.value.length === 0) return null;
+			const labelProps = typeof props.label === "object" ? props.label : {};
+			const labelEl = slots.label ? createVNode(LabelList, labelProps, { label: slots.label }) : props.label ? createVNode(LabelList, labelProps, null) : null;
+			const slotChildren = slots.default?.();
 			return createVNode(Fragment, null, [
-				createVNode(Animate, {
-					"key": animationId,
-					"isActive": true,
-					"transition": props.transition,
-					"onAnimationStart": () => {
-						isAnimating.value = true;
-					},
-					"onAnimationEnd": () => {
-						isAnimating.value = false;
-					}
-				}, { default: (t) => {
-					const stepSectors = t === 1 ? sectorData : sectorData.map((sector, i) => {
-						const prev = prevSects && prevSects[i];
-						if (!prev) return {
-							...sector,
-							endAngle: interpolate(sector.startAngle ?? 0, sector.endAngle, t)
-						};
-						return {
-							...sector,
-							startAngle: prev.startAngle != null && sector.startAngle != null ? interpolate(prev.startAngle, sector.startAngle, t) : sector.startAngle,
-							endAngle: interpolate(prev.endAngle ?? 0, sector.endAngle, t)
-						};
-					});
-					if (t > 0) prevSectors = stepSectors;
-					return renderSectors(stepSectors);
-				} }),
+				renderSectors(items.value.map((item) => item.value)),
 				labelEl,
 				slotChildren
 			]);
 		};
 	}
 });
+var RadialBar = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	slots: Object,
+	name: "RadialBar",
+	emits: radialBarEvents.emits,
+	props: RadialBarVueProps,
+	inheritAttrs: false,
+	setup(inputProps, { attrs, slots, emit }) {
+		const props = useSeriesProps(inputProps);
+		radialBarEvents.provide(emit);
+		const chart = useChart();
+		const legendPayload = computed(() => radialBarLegend(chart.data.value, props.legendType));
+		useSetupPolarItem(props, "radialBar", {
+			settings: () => ({
+				angleAxisId: props.angleAxisId,
+				radiusAxisId: props.radiusAxisId,
+				barSize: props.barSize,
+				stackId: props.stackId,
+				minPointSize: props.minPointSize,
+				maxBarSize: props.maxBarSize
+			}),
+			legend: () => (legendPayload.value ?? []).map((entry, index) => ({
+				...entry,
+				color: entryColor({
+					row: entry.payload,
+					seriesFill: props.fill,
+					index
+				})
+			}))
+		});
+		const View = useDeferredView(RadialBarView);
+		return () => h(View, {
+			item: props,
+			svgAttrs: attrs
+		}, slots);
+	}
+}));
 //#endregion
 export { RadialBar };

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

@@ -1,3 +1,4 @@
+import { classProp } from "../../types/common.mjs";
 //#region src/polar/radial-bar/type.ts
 var RadialBarVueProps = {
 	dataKey: {
@@ -9,7 +10,7 @@ var RadialBarVueProps = {
 		required: true
 	},
 	name: {
-		type: String,
+		type: [String, Number],
 		default: void 0
 	},
 	angleAxisId: {
@@ -62,14 +63,11 @@ var RadialBarVueProps = {
 	},
 	isAnimationActive: {
 		type: Boolean,
-		default: true
+		default: void 0
 	},
 	transition: {
 		type: Object,
-		default: () => ({
-			duration: .4,
-			ease: "easeOut"
-		})
+		default: void 0
 	},
 	minPointSize: {
 		type: Number,
@@ -98,7 +96,8 @@ var RadialBarVueProps = {
 	cornerIsExternal: {
 		type: Boolean,
 		default: false
-	}
+	},
+	class: classProp
 };
 //#endregion
 export { RadialBarVueProps };

package/dist/es/resolver.mjs

@@ -0,0 +1,19 @@
+import { componentNames } from "./componentNames.mjs";
+//#region src/resolver.ts
+function VccsResolver(options = {}) {
+	const prefix = options.prefix ?? "";
+	const names = new Set(componentNames);
+	return {
+		type: "component",
+		resolve(name) {
+			if (!name.startsWith(prefix)) return;
+			const exportedName = name.slice(prefix.length);
+			if (names.has(exportedName)) return {
+				name: exportedName,
+				from: "vccs"
+			};
+		}
+	};
+}
+//#endregion
+export { VccsResolver };

package/dist/es/shape/Cross.mjs

@@ -1,4 +1,5 @@
 import { isNumber } from "../utils/validate.mjs";
+import { svgAttrs } from "../utils/VueUtils.mjs";
 import { createVNode, mergeProps } from "vue";
 //#region src/shape/Cross.tsx
 function getCrossPath(x, y, width, height, top, left) {
@@ -7,7 +8,7 @@ function getCrossPath(x, y, width, height, top, left) {
 function Cross(props) {
 	const { x = 0, y = 0, top = 0, left = 0, width = 0, height = 0, ...rest } = props;
 	if (!isNumber(x) || !isNumber(y) || !isNumber(width) || !isNumber(height) || !isNumber(top) || !isNumber(left)) return null;
-	return createVNode("path", mergeProps(rest, {
+	return createVNode("path", mergeProps(svgAttrs(rest), {
 		"class": "v-charts-cross",
 		"d": getCrossPath(x, y, width, height, top, left)
 	}), null);

package/dist/es/shape/Curve.mjs

@@ -1,8 +1,9 @@
-import { classProp } from "../types/common.mjs";
 import { isNumber } from "../utils/validate.mjs";
+import { classProp } from "../types/common.mjs";
+import { svgAttrs } from "../utils/VueUtils.mjs";
 import { computed, createVNode, defineComponent, mergeProps } from "vue";
-import { area, curveBasis, curveBasisClosed, curveBasisOpen, curveBumpX, curveBumpY, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore, line } from "victory-vendor/d3-shape";
 import { upperFirst } from "es-toolkit/compat";
+import { area, curveBasis, curveBasisClosed, curveBasisOpen, curveBumpX, curveBumpY, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore, line } from "d3-shape";
 //#region src/shape/Curve.tsx
 /**
 * @fileOverview Curve
@@ -65,6 +66,7 @@ var CurveVueProps = {
 	path: { type: String },
 	class: classProp
 };
+/** Props as seen inside Curve; the public `CurveProps` is derived from the component in publicProps.ts. */
 var Curve = /* @__PURE__ */ defineComponent({
 	name: "Curve",
 	props: CurveVueProps,
@@ -76,12 +78,12 @@ var Curve = /* @__PURE__ */ defineComponent({
 		});
 		return () => {
 			if (realPath.value === null && !props.path) return null;
-			return createVNode("path", mergeProps(attrs, {
+			return createVNode("path", mergeProps(svgAttrs(attrs), {
 				"class": ["v-charts-curve", props.class],
-				"d": realPath.value
+				"d": realPath.value ?? void 0
 			}), null);
 		};
 	}
 });
 //#endregion
-export { Curve, CurveVueProps, getPath };
+export { Curve, CurveVueProps };

package/dist/es/shape/Dot.mjs

@@ -1,21 +1,25 @@
-import { createVNode, defineComponent } from "vue";
+import { classProp } from "../types/common.mjs";
+import { svgAttrs } from "../utils/VueUtils.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
 var Dot = /* @__PURE__ */ defineComponent({
 	name: "Dot",
 	props: {
 		cx: { type: [Number, String] },
 		cy: { type: [Number, String] },
 		r: { type: [Number, String] },
-		clipDot: { type: Boolean }
+		clipDot: { type: Boolean },
+		class: classProp
 	},
-	setup(props) {
+	inheritAttrs: false,
+	setup(props, { attrs }) {
 		return () => {
 			const { cx, cy, r } = props;
-			if (cx === +cx && cy === +cy && r === +r) return createVNode("circle", {
+			if (cx === +cx && cy === +cy && r === +r) return createVNode("circle", mergeProps(svgAttrs(attrs), {
 				"class": ["v-charts-dot", props.class],
 				"cx": cx,
 				"cy": cy,
 				"r": r
-			}, null);
+			}), null);
 			return null;
 		};
 	}

package/dist/es/shape/Polygon.mjs

@@ -1,18 +1,15 @@
 import { isNumber } from "../utils/validate.mjs";
+import { svgAttrs } from "../utils/VueUtils.mjs";
+import { polygonPath } from "../core/polygon.mjs";
 import { createVNode, mergeProps } from "vue";
 //#region src/shape/Polygon.tsx
-function getPolygonPath(points) {
-	return points.reduce((path, point, i) => {
-		return `${path}${i === 0 ? "M" : "L"}${point.x},${point.y}`;
-	}, "") + "Z";
-}
 function Polygon(props) {
 	const { points = [], ...rest } = props;
 	if (!points || !points.length) return null;
 	if (!points.every((p) => isNumber(p.x) && isNumber(p.y))) return null;
-	return createVNode("path", mergeProps(rest, {
+	return createVNode("path", mergeProps(svgAttrs(rest), {
 		"class": "v-charts-polygon",
-		"d": getPolygonPath(points)
+		"d": polygonPath(points)
 	}), null);
 }
 //#endregion

package/dist/es/shape/Rectangle.mjs

@@ -1,3 +1,4 @@
+import { svgAttrs } from "../utils/VueUtils.mjs";
 import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/shape/Rectangle.tsx
 /**
@@ -58,22 +59,28 @@ function getRectanglePath(x, y, width, height, radius) {
 	}
 	return `M ${x},${y} h ${width} v ${height} h ${-width} Z`;
 }
+/** The rectangle as a plain element; `attrs` must already be SVG attributes (see svgAttrs). */
+function rectanglePath(attrs, x, y, width, height, radius) {
+	if (x !== +x || y !== +y || width !== +width || height !== +height || width === 0 || height === 0) return null;
+	return createVNode("path", mergeProps(attrs, {
+		"x": x,
+		"y": y,
+		"width": width,
+		"height": height,
+		"d": getRectanglePath(x, y, width, height, radius)
+	}), null);
+}
 var Rectangle = /* @__PURE__ */ defineComponent({
 	name: "Rectangle",
 	props: RectangleVueProps,
+	inheritAttrs: false,
 	setup(props, { attrs }) {
 		return () => {
-			const { x, y, width, height, radius } = props;
-			if (x !== +x || y !== +y || width !== +width || height !== +height || width === 0 || height === 0) return null;
-			return createVNode("path", mergeProps(attrs, {
-				"x": x,
-				"y": y,
-				"width": width,
-				"height": height,
-				"d": getRectanglePath(x, y, width, height, radius)
-			}), null);
+			const { x, y, width, height } = props;
+			if (x == null || y == null || width == null || height == null) return null;
+			return rectanglePath(svgAttrs(attrs), x, y, width, height, props.radius);
 		};
 	}
 });
 //#endregion
-export { Rectangle };
+export { Rectangle, rectanglePath };