vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/cartesian/bar/Bar.mjs

@@ -1,44 +1,72 @@
-import { getValueByDataKey } from "../../utils/chart.mjs";
-import { useChartLayout } from "../../context/chartLayoutContext.mjs";
+import { useChartPresentation } from "../../model/presentation.mjs";
+import { useSeriesProps } from "../../hooks/useSeriesProps.mjs";
+import { barEvents } from "../../events/itemEvents.mjs";
+import { useLayerTeleport } from "../../hooks/useLayerTeleport.mjs";
+import { useChartLayer } from "../../model/runtime.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
 import { Layer } from "../../container/Layer.mjs";
+import { getValueByDataKey } from "../../utils/chart.mjs";
 import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
 import { LabelList } from "../../components/label/LabelList.mjs";
-import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
-import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { entryColor } from "../../core/color.mjs";
+import { useSetupGraphicalItem, useSetupTooltipEntry } from "../../hooks/useSetupGraphicalItem.mjs";
+import { GraphicalItemClipPath } from "../GraphicalItemClipPath.mjs";
 import { BarVueProps } from "./type.mjs";
-import { useNeedsClip } from "../useNeedsClip.mjs";
 import { useBar } from "./hooks/useBar.mjs";
-import { GraphicalItemClipPath } from "../GraphicalItemClipPath.mjs";
 import { BarBackground } from "./components/BarBackground.mjs";
 import { BarRectangles } from "./components/BarRectangles.mjs";
 import { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry } from "../error-bar/ErrorBarContext.mjs";
-import { extractCellProps, filterOutCells } from "../../utils/cell.mjs";
-import { Teleport, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { assignCells, extractCellProps, filterOutCells } from "../../utils/cell.mjs";
+import { Fragment, computed, createVNode, defineComponent, h, mergeProps, proxyRefs, toRefs } from "vue";
 //#region src/cartesian/bar/Bar.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 var errorBarDataPointFormatter = (dataPoint, dataKey) => {
+	if (dataPoint == null || typeof dataPoint !== "object" || !("x" in dataPoint) || !("y" in dataPoint) || !("value" in dataPoint) || dataPoint.x != null && typeof dataPoint.x !== "number" || dataPoint.y != null && typeof dataPoint.y !== "number") throw new Error("vccs: ErrorBar requires Bar geometry.");
 	const value = Array.isArray(dataPoint.value) ? dataPoint.value[1] : dataPoint.value;
 	return {
 		x: dataPoint.x,
 		y: dataPoint.y,
 		value,
-		errorVal: getValueByDataKey(dataPoint.payload ?? dataPoint, dataKey)
+		errorVal: getValueByDataKey("payload" in dataPoint ? dataPoint.payload ?? dataPoint : dataPoint, dataKey)
 	};
 };
-var Bar = /* @__PURE__ */ defineComponent({
-	name: "Bar",
-	props: BarVueProps,
+var BarView = /* @__PURE__ */ defineComponent({
+	name: "BarView",
 	inheritAttrs: false,
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		settings: {
+			type: Object,
+			required: true
+		}
+	},
 	slots: Object,
-	setup(props, { attrs, slots }) {
-		const errorBarRegistry = createErrorBarRegistry();
-		provideErrorBarRegistry(errorBarRegistry);
-		useSetupGraphicalItem(props, "bar", { errorBars: errorBarRegistry.errorBars });
-		const { shouldRender, clipPathId, barData, isAnimating, cellProps: cellPropsRef } = useBar(props, slots.shape, slots.activeBar);
-		const { needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
-		const layout = useChartLayout();
+	setup(view, { slots }) {
+		const props = view.item;
+		const attrs = view.svgAttrs;
+		const data = view.data;
+		const trackedProps = proxyRefs({
+			...toRefs(props),
+			data
+		});
+		const { shouldRender, needClip, clipPathId, barData, cellProps: cellPropsRef, drawn } = useBar(trackedProps, view.settings, slots.shape, slots.activeBar);
+		const emit = barEvents.use();
+		useSetupTooltipEntry(props, "bar", data, () => barData.value?.map((bar) => bar.tooltipPosition), {
+			index: () => props.activeIndex,
+			request: (index) => emit("update:activeIndex", index)
+		});
+		const layout = useChartPresentation().layout;
 		const errorBarOffset = computed(() => {
 			const first = barData.value?.[0];
 			if (first == null || first.height == null || first.width == null) return 0;
@@ -46,51 +74,92 @@ var Bar = /* @__PURE__ */ defineComponent({
 		});
 		provideErrorBarContext({
 			data: barData,
-			xAxisId: props.xAxisId ?? "xAxis-0",
-			yAxisId: props.yAxisId ?? "yAxis-0",
+			get xAxisId() {
+				return props.xAxisId ?? "xAxis-0";
+			},
+			get yAxisId() {
+				return props.yAxisId ?? "yAxis-0";
+			},
 			dataPointFormatter: errorBarDataPointFormatter,
 			errorBarOffset
 		});
-		provideCartesianLabelListData(computed(() => {
-			if (isAnimating.value || !barData.value) return void 0;
-			return barData.value.map((entry, i) => {
-				const fill = cellPropsRef.value?.[i]?.fill ?? entry.payload?.fill ?? props.fill;
-				return {
-					x: entry.x,
-					y: entry.y,
-					width: entry.width,
-					height: entry.height,
-					value: entry.value,
-					payload: entry.payload,
-					parentViewBox: entry.parentViewBox,
-					...fill != null ? { fill } : {}
-				};
+		const labelListData = computed(() => drawn.value.map(({ bar: entry, index, opacity, key }) => {
+			const fill = entryColor({
+				cell: cellPropsRef.value[index],
+				row: entry.payload,
+				seriesFill: props.fill,
+				index
 			});
+			return {
+				x: entry.x,
+				y: entry.y,
+				width: entry.width,
+				height: entry.height,
+				value: entry.value,
+				payload: entry.payload,
+				parentViewBox: entry.parentViewBox,
+				key,
+				fill,
+				...opacity != null && opacity < 1 ? { opacity } : {}
+			};
 		}));
-		const graphicalLayerRef = useGraphicalLayerRef(null);
-		return () => {
+		provideCartesianLabelListData(labelListData);
+		const renderGeometry = () => {
 			if (!shouldRender.value) return null;
-			const defaultContent = slots.default?.() ?? [];
-			const cells = extractCellProps(defaultContent);
-			cellPropsRef.value = cells;
-			const nonCellContent = cells.length > 0 ? filterOutCells(defaultContent) : defaultContent;
-			const barContent = createVNode(Layer, { "class": ["v-charts-bar", attrs.class] }, { default: () => [
-				needClip.value && createVNode("defs", null, [createVNode(GraphicalItemClipPath, {
+			const clip = needClip.value;
+			return createVNode(Fragment, null, [
+				clip && createVNode("defs", null, [createVNode(GraphicalItemClipPath, {
 					"clipPathId": clipPathId,
 					"xAxisId": props.xAxisId,
 					"yAxisId": props.yAxisId
 				}, null)]),
 				createVNode(Layer, {
 					"class": "v-charts-bar-rectangles",
-					"clip-path": needClip.value ? `url(#clipPath-${clipPathId})` : null
-				}, { default: () => [props.background && createVNode(BarBackground, null, null), createVNode(BarRectangles, null, null)] }),
-				!isAnimating.value && props.label && createVNode(LabelList, mergeProps(typeof props.label === "object" ? props.label : {}, { "data": barData.value }), null),
-				nonCellContent
-			] });
-			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(barContent) ? barContent : { default: () => [barContent] });
-			return barContent;
+					"clip-path": clip ? `url(#clipPath-${clipPathId})` : void 0
+				}, { default: () => [props.background && !props.hide && createVNode(BarBackground, null, null), createVNode(BarRectangles, null, null)] }),
+				(props.label || slots.label) && createVNode(LabelList, mergeProps(typeof props.label === "object" ? props.label : {}, { "data": labelListData.value }), { label: slots.label })
+			]);
+		};
+		const Geometry = useDeferredView(/* @__PURE__ */ defineComponent({
+			name: "BarGeometry",
+			setup: () => renderGeometry
+		}));
+		const teleport = useLayerTeleport();
+		const graphicalLayerRef = useChartLayer("graphical");
+		return () => {
+			if (!shouldRender.value) return null;
+			const children = slots.default?.() ?? [];
+			const cells = extractCellProps(children);
+			assignCells(cellPropsRef, cells);
+			return teleport(createVNode(Layer, mergeProps(attrs, {
+				"data-slot": "series",
+				"class": ["v-charts-bar", props.class]
+			}), { default: () => [h(Geometry), props.hide ? null : cells.length > 0 ? filterOutCells(children) : children] }), graphicalLayerRef);
 		};
 	}
 });
+var Bar = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	name: "Bar",
+	emits: barEvents.emits,
+	props: BarVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(inputProps, { attrs, slots, emit }) {
+		const props = useSeriesProps(inputProps, ["fill"]);
+		barEvents.provide(emit);
+		const errorBarRegistry = createErrorBarRegistry();
+		provideErrorBarRegistry(errorBarRegistry);
+		const { data, settings } = useSetupGraphicalItem(props, "bar", {
+			skipTooltip: true,
+			errorBars: errorBarRegistry.errorBars
+		});
+		return () => h(BarView, {
+			item: props,
+			svgAttrs: attrs,
+			data,
+			settings
+		}, slots);
+	}
+}));
 //#endregion
 export { Bar };

package/dist/es/cartesian/bar/components/BarBackground.mjs

@@ -19,7 +19,7 @@ var BarBackground = /* @__PURE__ */ defineComponent({
 				const barRectangleProps = {
 					option: backgroundFromProps,
 					...rest,
-					fill: "#eee",
+					fill: "var(--v-charts-muted, #eee)",
 					...backgroundFromDataEntry,
 					...backgroundObjectProps
 				};

package/dist/es/cartesian/bar/components/BarRectangles.mjs

@@ -1,142 +1,204 @@
-import { mouseLeaveItem, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../../../state/tooltipSlice.mjs";
-import { selectActiveTooltipDataKey, selectActiveTooltipIndex } from "../../../state/selectors/tooltipSelectors.mjs";
-import { useAppDispatch, useAppSelector } from "../../../state/hooks.mjs";
-import { filterProps } from "../../../utils/VueUtils.mjs";
-import { Layer } from "../../../container/Layer.mjs";
-import { Animate } from "../../../animation/Animate.mjs";
+import { useTooltipEntry } from "../../../model/tooltip.mjs";
+import { useChart } from "../../../model/chart.mjs";
+import { barEvents } from "../../../events/itemEvents.mjs";
+import { interpolate } from "../../../utils/data-utils.mjs";
+import { filterProps, svgAttrs } from "../../../utils/VueUtils.mjs";
+import { getValueByDataKey } from "../../../utils/chart.mjs";
+import { useKeyedTransition } from "../../../animation/useKeyedTransition.mjs";
 import { useBarContext } from "../hooks/useBar.mjs";
-import { Rectangle } from "../../../shape/Rectangle.mjs";
-import { Fragment, createVNode, defineComponent, isVNode } from "vue";
+import { Rectangle, rectanglePath } from "../../../shape/Rectangle.mjs";
+import { delegateItemEvents } from "../../../events/delegateItemEvents.mjs";
+import { computed, createVNode, defineComponent, watch } from "vue";
 //#region src/cartesian/bar/components/BarRectangles.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
+/** A drawn bar plus its category band along the category axis: start and size in pixels. */
 var BarRectangles = /* @__PURE__ */ defineComponent({
 	name: "BarRectangles",
 	inheritAttrs: false,
-	setup(_) {
-		const dispatch = useAppDispatch();
-		const activeIndex = useAppSelector(selectActiveTooltipIndex);
-		const activeDataKey = useAppSelector(selectActiveTooltipDataKey);
-		let previousRectangles = null;
-		let animationId = 0;
-		const { props, data: barData, layout, isAnimating, shapeSlot, activeBarSlot, cellProps } = useBarContext();
-		const { dataKey, isAnimationActive, onAnimationStart, onAnimationEnd, activeBar, activeIndex: activeIndexProp } = props;
-		const onMouseEnterFromContext = (entry, index) => (e) => {
-			dispatch(setActiveMouseOverItemIndex({
-				activeDataKey: dataKey,
-				activeIndex: String(index),
-				activeCoordinate: {
-					x: entry.tooltipPosition.x,
-					y: entry.tooltipPosition.y
-				}
-			}));
+	setup() {
+		const emit = barEvents.use();
+		const tooltip = useChart().tooltip;
+		const entry = useTooltipEntry();
+		if (!entry) throw new Error("vccs: Bar requires its tooltip entry.");
+		const activeIndex = tooltip.activeIndexFor(entry);
+		const { props, data: barData, layout, shapeSlot, activeBarSlot, cellProps, band, drawn } = useBarContext();
+		const chart = useChart();
+		const categoryAxis = computed(() => layout.value === "vertical" ? chart.axis("yAxis", props.yAxisId).settings.value : chart.axis("xAxis", props.xAxisId).settings.value);
+		const bandOf = (bar) => {
+			const position = layout.value === "vertical" ? bar.y : bar.x;
+			return band.value && position != null ? {
+				start: position - band.value.offset,
+				size: band.value.size
+			} : void 0;
+		};
+		const atBaseline = (bar) => layout.value === "vertical" ? {
+			...bar,
+			x: bar.stackedBarStart,
+			width: 0
+		} : {
+			...bar,
+			y: bar.stackedBarStart,
+			height: 0
 		};
-		const onMouseLeaveFromContext = (entry, index) => (e) => {
-			dispatch(mouseLeaveItem());
+		const seam = ({ previous, next }) => {
+			const end = previous?.band && previous.band.start + previous.band.size;
+			const start = next?.band?.start;
+			return end == null ? start : start == null ? end : (end + start) / 2;
 		};
-		const onClickFromContext = (entry, index) => (e) => {
-			dispatch(setActiveClickItemIndex({
-				activeDataKey: dataKey,
-				activeIndex: String(index),
-				activeCoordinate: {
-					x: entry.tooltipPosition.x,
-					y: entry.tooltipPosition.y
+		let shown = false;
+		const nearerEdge = ({ bar, band }) => {
+			if (!shown || !band || props.stackId != null) return void 0;
+			const [position, size] = layout.value === "vertical" ? [bar.y ?? 0, bar.height ?? 0] : [bar.x ?? 0, bar.width ?? 0];
+			return position + size / 2 < band.start + band.size / 2 ? band.start : band.start + band.size;
+		};
+		const collapsed = (item, neighbors) => {
+			const { bar, index } = item;
+			const at = seam(neighbors) ?? nearerEdge(item);
+			if (at == null) return {
+				index,
+				bar: atBaseline(bar)
+			};
+			return {
+				index,
+				bar: layout.value === "vertical" ? {
+					...bar,
+					y: at,
+					height: 0
+				} : {
+					...bar,
+					x: at,
+					width: 0
+				},
+				band: {
+					start: at,
+					size: 0
+				},
+				opacity: 0
+			};
+		};
+		const { items } = useKeyedTransition(() => props.hide ? [] : barData.value?.map((bar, index) => ({
+			bar,
+			index,
+			band: bandOf(bar)
+		})), {
+			key: ({ bar, index }) => {
+				const dataKey = categoryAxis.value?.dataKey;
+				const category = dataKey == null ? void 0 : getValueByDataKey(bar.payload, dataKey);
+				return category == null ? index : String(category);
+			},
+			interpolate: ({ bar: from, band: fromBand, opacity: fromOpacity = 1 }, { bar: to, index, band: toBand, opacity: toOpacity = 1 }, t) => ({
+				index,
+				opacity: interpolate(fromOpacity, toOpacity, t),
+				band: fromBand && toBand && {
+					start: interpolate(fromBand.start, toBand.start, t),
+					size: interpolate(fromBand.size, toBand.size, t)
+				},
+				bar: {
+					...to,
+					x: interpolate(from.x ?? 0, to.x ?? 0, t),
+					y: interpolate(from.y ?? 0, to.y ?? 0, t),
+					width: interpolate(from.width ?? 0, to.width ?? 0, t),
+					height: interpolate(from.height ?? 0, to.height ?? 0, t)
 				}
+			}),
+			enterFrom: collapsed,
+			exitTo: collapsed,
+			connected: true,
+			isActive: () => props.isAnimationActive !== false,
+			transition: () => props.transition,
+			onStart: () => {
+				shown = true;
+				emit("animation-start");
+			},
+			onEnd: () => emit("animation-end")
+		});
+		watch(items, (value) => {
+			drawn.value = value.map(({ key, value: bar }) => ({
+				...bar,
+				key
 			}));
+		}, {
+			immediate: true,
+			flush: "sync"
+		});
+		const activate = (kind, bar, index) => {
+			const payload = {
+				configuration: entry.value,
+				index,
+				coordinate: {
+					x: bar.tooltipPosition.x,
+					y: bar.tooltipPosition.y
+				}
+			};
+			if (kind === "hover") tooltip.activate("hover", {
+				...payload,
+				type: "item"
+			});
+			else tooltip.activate("click", {
+				...payload,
+				type: "item"
+			});
 		};
-		const baseProps = filterProps(props, false);
-		const interpolateNumber = (from, to) => (t) => from + (to - from) * t;
-		const renderRectangles = (data) => {
-			if (!data) return null;
-			return createVNode(Fragment, null, [data.map((entry, i) => {
-				let _slot;
-				const activeEnabled = activeBar !== false || activeIndexProp != null || !!activeBarSlot;
-				const isActive = activeIndexProp != null ? activeEnabled && i === activeIndexProp : activeEnabled && String(i) === activeIndex.value && (activeDataKey.value == null || dataKey === activeDataKey.value);
-				const activeBarProps = isActive && typeof activeBar === "object" ? activeBar : {};
-				const entryFill = entry.payload?.fill;
-				const cellPropsForIndex = cellProps.value?.[i];
-				const barRectangleProps = {
-					...baseProps,
+		const listeners = delegateItemEvents((position) => items.value[position]?.value, {
+			click: ({ bar, index }, _position, event) => {
+				activate("click", bar, index);
+				emit("click", bar, index, event);
+			},
+			mouseenter: ({ bar, index }, _position, event) => {
+				activate("hover", bar, index);
+				emit("mouseenter", bar, index, event);
+			},
+			mouseleave: ({ bar, index }, _position, event) => {
+				tooltip.clear("hover", "item");
+				emit("mouseleave", bar, index, event);
+			}
+		});
+		return () => {
+			const baseProps = filterProps(props, false);
+			delete baseProps?.class;
+			const baseAttrs = shapeSlot || activeBarSlot ? void 0 : svgAttrs(baseProps);
+			const activeEnabled = props.activeBar !== false || props.activeIndex != null || !!activeBarSlot;
+			return createVNode("g", listeners, [items.value.map(({ key, value: { bar, index, opacity }, phase }, position) => {
+				const isActive = phase !== "exit" && activeEnabled && index === activeIndex.value;
+				const activeBarProps = isActive && typeof props.activeBar === "object" ? props.activeBar : {};
+				const entryFill = getValueByDataKey(bar.payload, "fill");
+				const customShape = isActive && activeBarSlot ? activeBarSlot : shapeSlot;
+				let shape;
+				if (baseAttrs) shape = rectanglePath({
+					...baseAttrs,
 					...entryFill ? { fill: entryFill } : {},
-					...entry,
-					...cellPropsForIndex ?? {},
-					...isActive ? activeBarProps : {},
-					isActive,
-					index: i,
-					dataKey
-				};
-				const renderShape = () => {
-					if (isActive && activeBarSlot) return activeBarSlot(barRectangleProps);
-					if (shapeSlot) return shapeSlot(barRectangleProps);
-					return createVNode(Rectangle, barRectangleProps, null);
-				};
-				return createVNode(Layer, {
-					"key": `rectangle-${entry?.x}-${entry?.y}-${entry?.value}-${i}`,
-					"class": "v-charts-bar-rectangle",
-					"onMouseenter": onMouseEnterFromContext(entry, i),
-					"onMouseleave": onMouseLeaveFromContext(entry, i),
-					"onClick": onClickFromContext(entry, i)
-				}, _isSlot(_slot = renderShape()) ? _slot : { default: () => [_slot] });
+					...svgAttrs(cellProps.value?.[index]),
+					...svgAttrs(activeBarProps)
+				}, bar.x, bar.y, bar.width, bar.height, activeBarProps.radius ?? props.radius);
+				else {
+					const barRectangleProps = {
+						...baseProps,
+						...entryFill ? { fill: entryFill } : {},
+						...bar,
+						...cellProps.value?.[index] ?? {},
+						...activeBarProps,
+						isActive,
+						index,
+						dataKey: props.dataKey
+					};
+					const { x, y, width, height } = barRectangleProps;
+					const geometry = customShape && typeof x === "number" && typeof y === "number" && typeof width === "number" && typeof height === "number" && Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(width) && Number.isFinite(height) && width !== 0 && height !== 0 ? {
+						...barRectangleProps,
+						x,
+						y,
+						width,
+						height,
+						fill: typeof barRectangleProps.fill === "string" ? barRectangleProps.fill : void 0
+					} : void 0;
+					shape = customShape ? geometry ? customShape(geometry) : null : createVNode(Rectangle, barRectangleProps, null);
+				}
+				return createVNode("g", {
+					"key": key,
+					"class": "v-charts-layer v-charts-bar-rectangle",
+					"data-v-charts-item-index": position,
+					"opacity": opacity != null && opacity < 1 ? opacity : void 0
+				}, [shape]);
 			})]);
 		};
-		return () => {
-			const data = barData.value;
-			if (!data) return null;
-			if (isAnimationActive && previousRectangles !== data) {
-				const prevData = previousRectangles;
-				animationId++;
-				isAnimating.value = true;
-				return createVNode(Animate, {
-					"key": animationId,
-					"transition": props.transition,
-					"isActive": isAnimationActive,
-					"onAnimationStart": onAnimationStart,
-					"onAnimationEnd": () => {
-						isAnimating.value = false;
-						onAnimationEnd?.();
-					}
-				}, { default: (t) => {
-					const stepData = t === 1 ? data : data.map((entry, index) => {
-						const prev = prevData?.[index];
-						if (prev && prev.stackedBarStart === entry.stackedBarStart) {
-							const interpolatorX = interpolateNumber(prev.x || 0, entry.x || 0);
-							const interpolatorY = interpolateNumber(prev.y || 0, entry.y || 0);
-							const interpolatorWidth = interpolateNumber(prev.width, entry.width);
-							const interpolatorHeight = interpolateNumber(prev.height, entry.height);
-							return {
-								...entry,
-								x: interpolatorX(t),
-								y: interpolatorY(t),
-								width: interpolatorWidth(t),
-								height: interpolatorHeight(t)
-							};
-						}
-						if (layout.value === "horizontal") {
-							const h = interpolateNumber(0, entry.height)(t);
-							const y = interpolateNumber(entry.stackedBarStart, entry.y)(t);
-							return {
-								...entry,
-								y,
-								height: h
-							};
-						}
-						const w = interpolateNumber(0, entry.width)(t);
-						const x = interpolateNumber(entry.stackedBarStart, entry.x)(t);
-						return {
-							...entry,
-							width: w,
-							x
-						};
-					});
-					if (t > 0) previousRectangles = stepData;
-					return createVNode("g", null, [renderRectangles(stepData)]);
-				} });
-			}
-			isAnimating.value = false;
-			previousRectangles = data;
-			return createVNode("g", null, [renderRectangles(data)]);
-		};
 	}
 });
 //#endregion