vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/cartesian/scatter/Scatter.mjs

@@ -1,176 +1,166 @@
+import { getTooltipNameProp } from "../../core/tooltip.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useSeriesProps } from "../../hooks/useSeriesProps.mjs";
+import { scatterEvents } from "../../events/itemEvents.mjs";
+import { useLayerTeleport } from "../../hooks/useLayerTeleport.mjs";
+import { useChartLayer } from "../../model/runtime.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
 import { Curve } from "../../shape/Curve.mjs";
-import { getTooltipNameProp, getValueByDataKey } from "../../utils/chart.mjs";
-import { mouseLeaveChart, setActiveMouseOverItemIndex, setMouseOverAxisIndex } from "../../state/tooltipSlice.mjs";
-import { selectActiveTooltipDataKey, selectActiveTooltipIndex } from "../../state/selectors/tooltipSelectors.mjs";
-import { useAppDispatch, useAppSelector } from "../../state/hooks.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 { forwardsSvgAttributes } from "../../utils/attributes.mjs";
 import { LabelList } from "../../components/label/LabelList.mjs";
-import { Animate } from "../../animation/Animate.mjs";
-import { SetTooltipEntrySettings } from "../../state/SetTooltipEntrySettings.mjs";
+import { mainColor } from "../../core/color.mjs";
 import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
-import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { delegateItemEvents, itemEventIndex } from "../../events/delegateItemEvents.mjs";
 import { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry } from "../error-bar/ErrorBarContext.mjs";
 import { useScatter } from "./hooks/useScatter.mjs";
 import { Symbols } from "../../shape/Symbols.mjs";
 import { getLinearRegression } from "../../utils/getLinearRegression.mjs";
-import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, mergeProps, useAttrs } from "vue";
+import { ScatterVueProps } from "./type.mjs";
+import { Fragment, computed, createVNode, defineComponent, h, mergeProps, proxyRefs, toRefs } from "vue";
 //#region src/cartesian/scatter/Scatter.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 var interpolateNumber = (from, to) => (t) => from + (to - from) * t;
-var errorBarDataPointFormatter = (dataPoint, dataKey, direction) => ({
-	x: dataPoint.cx,
-	y: dataPoint.cy,
-	value: direction === "x" ? Number(dataPoint.node.x) : Number(dataPoint.node.y),
-	errorVal: getValueByDataKey(dataPoint.payload, dataKey)
-});
-var Scatter = /* @__PURE__ */ defineComponent({
-	name: "Scatter",
+var errorBarDataPointFormatter = (dataPoint, dataKey, direction) => {
+	if (dataPoint == null || typeof dataPoint !== "object" || !("cx" in dataPoint) || !("cy" in dataPoint) || !("node" in dataPoint) || dataPoint.cx !== void 0 && typeof dataPoint.cx !== "number" || dataPoint.cy !== void 0 && typeof dataPoint.cy !== "number" || dataPoint.node == null || typeof dataPoint.node !== "object") throw new Error("vccs: ErrorBar requires Scatter geometry.");
+	const node = dataPoint.node;
+	const value = direction === "x" ? "x" in node ? node.x : void 0 : "y" in node ? node.y : void 0;
+	return {
+		x: dataPoint.cx,
+		y: dataPoint.cy,
+		value: Number(value),
+		errorVal: getValueByDataKey("payload" in dataPoint ? dataPoint.payload : void 0, dataKey)
+	};
+};
+var ScatterView = /* @__PURE__ */ defineComponent({
+	name: "ScatterView",
+	inheritAttrs: false,
 	props: {
-		xAxisId: {
-			type: [String, Number],
-			default: 0
-		},
-		yAxisId: {
-			type: [String, Number],
-			default: 0
-		},
-		zAxisId: {
-			type: [String, Number],
-			default: 0
+		item: {
+			type: Object,
+			required: true
 		},
-		dataKey: {
-			type: [
-				String,
-				Number,
-				Function
-			],
-			default: void 0
+		svgAttrs: {
+			type: Object,
+			required: true
 		},
 		data: {
-			type: Array,
-			default: void 0
-		},
-		name: {
-			type: [String, Number],
-			default: void 0
-		},
-		hide: {
-			type: Boolean,
-			default: false
-		},
-		fill: {
-			type: String,
-			default: void 0
-		},
-		shape: {
-			type: String,
-			default: "circle"
-		},
-		isAnimationActive: {
-			type: Boolean,
-			default: true
-		},
-		line: {
-			type: [Boolean, Object],
-			default: false
-		},
-		lineType: {
-			type: String,
-			default: "joint"
-		},
-		lineJointType: {
-			type: [String, Function],
-			default: "linear"
-		},
-		label: {
-			type: [Boolean, Object],
-			default: false
-		},
-		legendType: {
-			type: String,
-			default: "circle"
-		},
-		tooltipType: {
-			type: String,
-			default: void 0
-		},
-		transition: {
 			type: Object,
-			default: void 0
+			required: true
 		}
 	},
-	inheritAttrs: false,
 	slots: Object,
-	setup(props, { attrs, slots }) {
-		const errorBarRegistry = createErrorBarRegistry();
-		provideErrorBarRegistry(errorBarRegistry);
-		useSetupGraphicalItem(props, "scatter", {
-			skipTooltip: true,
-			errorBars: errorBarRegistry.errorBars
+	setup(view, { slots }) {
+		const chart = useChart();
+		const emit = scatterEvents.use();
+		const props = view.item;
+		const svgAttrs = view.svgAttrs;
+		const data = view.data;
+		const trackedProps = proxyRefs({
+			...toRefs(props),
+			data
 		});
-		const { shouldRender, points } = useScatter(props);
-		const graphicalLayerRef = useGraphicalLayerRef();
-		const svgAttrs = useAttrs();
-		const dispatch = useAppDispatch();
-		const activeIndex = useAppSelector(selectActiveTooltipIndex);
-		const activeDataKey = useAppSelector(selectActiveTooltipDataKey);
-		SetTooltipEntrySettings({
-			fn: (input) => ({
-				dataDefinedOnItem: input.points?.map((p) => p.tooltipPayload),
-				positions: void 0,
-				settings: {
-					stroke: input.stroke,
-					strokeWidth: input.strokeWidth,
-					fill: input.fill,
-					dataKey: input.dataKey,
-					nameKey: void 0,
-					name: getTooltipNameProp(input.name, input.dataKey),
-					hide: input.hide,
-					type: input.tooltipType,
-					color: input.fill,
-					unit: ""
-				}
-			}),
-			args: computed(() => ({
-				points: points.value,
-				fill: svgAttrs.fill ?? props.fill,
+		const { shouldRender, points } = useScatter(trackedProps);
+		const tooltip = chart.tooltip;
+		const tooltipConfiguration = computed(() => ({
+			dataDefinedOnItem: points.value?.map((point) => point.tooltipPayload),
+			positions: points.value?.map((point) => point.tooltipPosition),
+			settings: {
 				stroke: svgAttrs.stroke,
 				strokeWidth: svgAttrs["stroke-width"],
-				name: props.name,
+				fill: props.fill,
 				dataKey: props.dataKey,
+				nameKey: void 0,
+				name: getTooltipNameProp(props.name, props.dataKey),
 				hide: props.hide,
-				tooltipType: props.tooltipType
-			}))
-		});
+				type: props.tooltipType,
+				color: mainColor("scatter", props),
+				unit: ""
+			}
+		}));
+		tooltip.entries.register(tooltipConfiguration);
+		const activeIndex = tooltip.activeIndexFor(tooltipConfiguration);
 		provideErrorBarContext({
 			data: points,
-			xAxisId: props.xAxisId,
-			yAxisId: props.yAxisId,
+			get xAxisId() {
+				return props.xAxisId;
+			},
+			get yAxisId() {
+				return props.yAxisId;
+			},
 			dataPointFormatter: errorBarDataPointFormatter,
 			errorBarOffset: computed(() => 0)
 		});
-		let previousPoints = null;
-		let animationId = 0;
+		const createDisplay = () => {
+			const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+			return useKeyedTransition(() => points.value, {
+				key: (_point, index) => index,
+				interpolate: (from, to, t) => ({
+					...to,
+					cx: to.cx == null ? to.cx : interpolateNumber(from.cx ?? to.cx, to.cx)(t),
+					cy: to.cy == null ? to.cy : interpolateNumber(from.cy ?? to.cy, to.cy)(t),
+					size: interpolateNumber(from.size ?? 0, to.size ?? 0)(t)
+				}),
+				enterFrom: (to) => ({
+					...to,
+					size: 0
+				}),
+				exitTo: (from) => ({
+					...from,
+					size: 0
+				}),
+				isActive: () => props.isAnimationActive !== false,
+				transition: () => props.transition,
+				...callbacks
+			});
+		};
 		const dispatchScatterHover = (point, index) => {
-			const payload = {
-				activeDataKey: props.dataKey,
-				activeIndex: String(index),
-				activeCoordinate: point.tooltipPosition
-			};
-			dispatch(setMouseOverAxisIndex(payload));
-			dispatch(setActiveMouseOverItemIndex(payload));
+			tooltip.activate("hover", {
+				configuration: tooltipConfiguration.value,
+				index,
+				coordinate: point.tooltipPosition
+			});
 		};
 		const onMouseLeaveSymbol = () => {
-			dispatch(mouseLeaveChart());
+			tooltip.clear("hover", "item");
 		};
+		let symbolData = [];
+		const listeners = delegateItemEvents((index) => symbolData[index], {
+			click: (point, index, event) => {
+				tooltip.activate("click", {
+					type: "item",
+					configuration: tooltipConfiguration.value,
+					index,
+					coordinate: point.tooltipPosition
+				});
+				emit("click", point, index, event);
+			},
+			mouseenter: (point, index, event) => {
+				dispatchScatterHover(point, index);
+				emit("mouseenter", point, index, event);
+			},
+			mouseleave: (point, index, event) => {
+				onMouseLeaveSymbol();
+				emit("mouseleave", point, index, event);
+			}
+		});
+		function handleSymbolMove(event) {
+			const index = itemEventIndex(event);
+			const point = index == null ? void 0 : symbolData[index];
+			if (point && index !== void 0) {
+				event.stopPropagation();
+				dispatchScatterHover(point, index);
+			}
+		}
 		const renderSymbols = (data, svgAttrs) => {
+			symbolData = data;
 			const currentActiveIndex = activeIndex.value;
-			const currentActiveDataKey = activeDataKey.value;
 			return data.map((point, i) => {
 				if (point.cx == null || point.cy == null) return null;
-				const isActive = currentActiveIndex === String(i) && currentActiveDataKey === props.dataKey;
+				const isActive = currentActiveIndex === i;
 				const symbolProps = {
 					...svgAttrs,
 					...props.fill != null ? { fill: props.fill } : {},
@@ -179,19 +169,19 @@ var Scatter = /* @__PURE__ */ defineComponent({
 					size: isActive ? (point.size ?? 64) * 1.6 : point.size,
 					type: props.shape,
 					...isActive ? {
-						stroke: "#fff",
+						"stroke": "var(--v-charts-background, #fff)",
 						"stroke-width": 2
 					} : {}
 				};
 				return createVNode("g", {
+					"key": i,
 					"class": "v-charts-scatter-symbol",
-					"onMouseenter": () => dispatchScatterHover(point, i),
-					"onMousemove": (e) => {
-						e.stopPropagation();
-						dispatchScatterHover(point, i);
-					},
-					"onMouseleave": onMouseLeaveSymbol
-				}, [Symbols(symbolProps)]);
+					"data-v-charts-item-index": i
+				}, [slots.shape ? slots.shape({
+					...point,
+					index: i,
+					isActive
+				}) : Symbols(symbolProps)]);
 			});
 		};
 		const renderLine = (data, svgAttrs) => {
@@ -222,59 +212,67 @@ var Scatter = /* @__PURE__ */ defineComponent({
 				"style": { pointerEvents: "none" }
 			}, { default: () => [createVNode(Curve, mergeProps(lineProps, { "type": props.lineJointType }), null)] });
 		};
-		return () => {
+		const renderGeometry = (display) => {
 			if (!shouldRender.value) return null;
-			const svgAttrs = attrs;
-			const data = points.value;
-			const isAnimationActive = props.isAnimationActive;
-			let symbolsContent;
-			if (isAnimationActive && previousPoints !== data) {
-				const prevData = previousPoints;
-				animationId++;
-				symbolsContent = createVNode(Animate, {
-					"key": animationId,
-					"transition": props.transition,
-					"isActive": isAnimationActive
-				}, { default: (t) => {
-					const stepData = t === 1 ? data : data.map((entry, index) => {
-						const prev = prevData && prevData[index];
-						if (prev) return {
-							...entry,
-							cx: entry.cx == null ? void 0 : interpolateNumber(prev.cx ?? 0, entry.cx)(t),
-							cy: entry.cy == null ? void 0 : interpolateNumber(prev.cy ?? 0, entry.cy)(t),
-							size: interpolateNumber(prev.size ?? 0, entry.size ?? 0)(t)
-						};
-						return {
-							...entry,
-							size: interpolateNumber(0, entry.size ?? 0)(t)
-						};
-					});
-					if (t > 0) previousPoints = stepData;
-					return createVNode(Fragment, null, [renderLine(stepData, svgAttrs), renderSymbols(stepData, svgAttrs)]);
-				} });
-			} else {
-				previousPoints = data;
-				symbolsContent = createVNode(Fragment, null, [renderLine(data, svgAttrs), renderSymbols(data, svgAttrs)]);
-			}
-			const content = createVNode(Layer, { "class": "v-charts-scatter" }, { default: () => [
-				slots.default?.(),
-				symbolsContent,
-				props.label && (() => {
-					const labelData = data.map((point) => ({
+			const data = display.items.value.map((item) => item.value);
+			const symbolsContent = createVNode(Fragment, null, [renderLine(data, svgAttrs), renderSymbols(data, svgAttrs)]);
+			return createVNode(Fragment, null, [symbolsContent, props.label && (() => {
+				const labelData = display.items.value.map((item) => {
+					const point = item.value;
+					const opacity = labelOpacity(item);
+					return {
 						x: point.cx ?? 0,
 						y: point.cy ?? 0,
 						width: 0,
 						height: 0,
 						value: void 0,
-						payload: point.payload
-					}));
-					return createVNode(LabelList, mergeProps(typeof props.label === "object" ? props.label : {}, { "data": labelData }), null);
-				})()
-			] });
-			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(content) ? content : { default: () => [content] });
-			return content;
+						payload: point.payload,
+						key: item.key,
+						...opacity != null ? { opacity } : {}
+					};
+				});
+				return createVNode(LabelList, mergeProps(typeof props.label === "object" ? props.label : {}, { "data": labelData }), null);
+			})()]);
+		};
+		const Geometry = useDeferredView(/* @__PURE__ */ defineComponent({
+			name: "ScatterGeometry",
+			setup: () => {
+				const display = createDisplay();
+				return () => renderGeometry(display);
+			}
+		}));
+		const teleport = useLayerTeleport();
+		const graphicalLayerRef = useChartLayer("graphical");
+		return () => {
+			if (props.hide) return null;
+			return teleport(createVNode(Layer, mergeProps({
+				"data-slot": "series",
+				"class": ["v-charts-scatter", props.class]
+			}, listeners, { "onMousemove": handleSymbolMove }), { default: () => [slots.default?.(), h(Geometry)] }), graphicalLayerRef);
 		};
 	}
 });
+var Scatter = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	name: "Scatter",
+	emits: scatterEvents.emits,
+	props: ScatterVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(inputProps, { attrs, slots, emit }) {
+		const props = useSeriesProps(inputProps, ["fill"]);
+		scatterEvents.provide(emit);
+		const errorBarRegistry = createErrorBarRegistry();
+		provideErrorBarRegistry(errorBarRegistry);
+		const { data } = useSetupGraphicalItem(props, "scatter", {
+			skipTooltip: true,
+			errorBars: errorBarRegistry.errorBars
+		});
+		return () => h(ScatterView, {
+			item: props,
+			svgAttrs: attrs,
+			data
+		}, slots);
+	}
+}));
 //#endregion
 export { Scatter };

package/dist/es/cartesian/scatter/hooks/useScatter.mjs

@@ -1,17 +1,36 @@
-import { useIsPanorama } from "../../../context/PanoramaContextProvider.mjs";
-import { useAppSelector } from "../../../state/hooks.mjs";
-import { selectScatterPoints } from "../../../state/selectors/scatterSelectors.mjs";
+import { getTooltipNameProp } from "../../../core/tooltip.mjs";
+import { useChart } from "../../../model/chart.mjs";
+import { computeScatterPoints } from "../../../core/scatter.mjs";
 import { computed } from "vue";
 //#region src/cartesian/scatter/hooks/useScatter.ts
 function useScatter(props) {
-	const isPanorama = useIsPanorama();
+	const chart = useChart();
 	const scatterSettings = computed(() => ({
 		data: props.data,
 		dataKey: props.dataKey,
 		tooltipType: props.tooltipType,
-		name: props.name ?? String(props.dataKey ?? "")
+		name: getTooltipNameProp(props.name, props.dataKey)
 	}));
-	const points = useAppSelector((state) => selectScatterPoints(state, props.xAxisId ?? 0, props.yAxisId ?? 0, props.zAxisId ?? 0, scatterSettings.value, isPanorama));
+	const xAxis = computed(() => chart.axis("xAxis", props.xAxisId ?? 0));
+	const yAxis = computed(() => chart.axis("yAxis", props.yAxisId ?? 0));
+	const zAxis = computed(() => chart.axis("zAxis", props.zAxisId ?? 0));
+	const points = computed(() => {
+		const x = xAxis.value.withScale.value;
+		const y = yAxis.value.withScale.value;
+		const xTicks = xAxis.value.graphicalTicks.value;
+		const yTicks = yAxis.value.graphicalTicks.value;
+		const displayedData = chart.dataRange.displayedData(props);
+		if (!x || !y || !xTicks?.length || !yTicks?.length || !displayedData) return void 0;
+		return computeScatterPoints({
+			displayedData,
+			xAxis: x,
+			yAxis: y,
+			zAxis: zAxis.value.withScale.value,
+			scatterSettings: scatterSettings.value,
+			xAxisTicks: xTicks,
+			yAxisTicks: yTicks
+		});
+	});
 	return {
 		shouldRender: computed(() => {
 			return !props.hide && points.value != null && points.value.length > 0;

package/dist/es/cartesian/scatter/type.mjs

@@ -0,0 +1,79 @@
+import { classProp } from "../../types/common.mjs";
+//#region src/cartesian/scatter/type.ts
+var ScatterVueProps = {
+	xAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	yAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	zAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: void 0
+	},
+	data: {
+		type: Array,
+		default: void 0
+	},
+	name: {
+		type: [String, Number],
+		default: void 0
+	},
+	hide: {
+		type: Boolean,
+		default: false
+	},
+	fill: {
+		type: String,
+		default: void 0
+	},
+	shape: {
+		type: String,
+		default: "circle"
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: void 0
+	},
+	line: {
+		type: [Boolean, Object],
+		default: false
+	},
+	lineType: {
+		type: String,
+		default: "joint"
+	},
+	lineJointType: {
+		type: [String, Function],
+		default: "linear"
+	},
+	label: {
+		type: [Boolean, Object],
+		default: false
+	},
+	legendType: {
+		type: String,
+		default: "circle"
+	},
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	transition: {
+		type: Object,
+		default: void 0
+	},
+	class: classProp
+};
+//#endregion
+export { ScatterVueProps };

package/dist/es/cartesian/useNeedsClip.mjs

@@ -1,20 +1,12 @@
-import { selectXAxisSettings, selectYAxisSettings } from "../state/selectors/axisSelectors.mjs";
-import { useAppSelector } from "../state/hooks.mjs";
-import { computed } from "vue";
+import { useChart } from "../model/chart.mjs";
+import { computed, toValue } from "vue";
 //#region src/cartesian/useNeedsClip.ts
 function useNeedsClip(xAxisId, yAxisId) {
-	const xAxis = useAppSelector((state) => selectXAxisSettings(state, xAxisId));
-	const yAxis = useAppSelector((state) => selectYAxisSettings(state, yAxisId));
-	const needClipX = computed(() => {
-		return xAxis.value && xAxis.value.allowDataOverflow;
-	});
-	const needClipY = computed(() => {
-		return yAxis.value && yAxis.value.allowDataOverflow;
-	});
+	const chart = useChart();
+	const needClipX = computed(() => chart.axis("xAxis", toValue(xAxisId)).settings.value.allowDataOverflow);
+	const needClipY = computed(() => chart.axis("yAxis", toValue(yAxisId)).settings.value.allowDataOverflow);
 	return {
-		needClip: computed(() => {
-			return needClipX.value || needClipY.value;
-		}),
+		needClip: computed(() => needClipX.value || needClipY.value),
 		needClipX,
 		needClipY
 	};

package/dist/es/cartesian/utils/get-ticks.mjs

@@ -1,6 +1,6 @@
 import { isNumber, isVisible } from "../../utils/validate.mjs";
-import { Global } from "../../utils/Global.mjs";
 import { mathSign } from "../../utils/data.mjs";
+import { isServer } from "../../utils/env.mjs";
 import { getStringSize } from "../../utils/attrs.mjs";
 import { getAngledTickWidth, getNumberIntervalTicks, getTickBoundaries } from "../../utils/tick.mjs";
 import { getEquidistantTicks } from "../../utils/cartesian.mjs";
@@ -85,16 +85,16 @@ function getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, preserv
 	}
 	return result;
 }
-function getTicks(props, fontSize, letterSpacing) {
+function getTicks(props, fontSize, letterSpacing, canMeasure = !isServer()) {
 	const { tick, ticks, viewBox, minTickGap, orientation, interval, tickFormatter, unit, angle } = props;
 	if (!ticks || !ticks.length || !tick) return [];
-	if (isNumber(interval) || Global.isSsr) return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
+	if (isNumber(interval) || !canMeasure) return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
 	let candidates = [];
 	const sizeKey = orientation === "top" || orientation === "bottom" ? "width" : "height";
 	const unitSize = unit && sizeKey === "width" ? getStringSize(unit, {
 		fontSize,
 		letterSpacing
-	}) : {
+	}, canMeasure) : {
 		width: 0,
 		height: 0
 	};
@@ -103,10 +103,10 @@ function getTicks(props, fontSize, letterSpacing) {
 		return sizeKey === "width" ? getAngledTickWidth(getStringSize(value, {
 			fontSize,
 			letterSpacing
-		}), unitSize, angle) : getStringSize(value, {
+		}, canMeasure), unitSize, angle) : getStringSize(value, {
 			fontSize,
 			letterSpacing
-		})[sizeKey];
+		}, canMeasure)[sizeKey];
 	};
 	const sign = ticks.length >= 2 ? mathSign(ticks[1].coordinate - ticks[0].coordinate) : 1;
 	const boundaries = getTickBoundaries(viewBox, sign, sizeKey);

package/dist/es/cartesian/z-axis/ZAxis.mjs

@@ -1,7 +1,6 @@
-import { implicitZAxis } from "../../state/selectors/axisSelectors.mjs";
-import { useAppDispatch } from "../../state/hooks.mjs";
-import { addZAxis, removeZAxis } from "../../state/cartesianAxisSlice.mjs";
-import { defineComponent, watchEffect } from "vue";
+import { implicitZAxis } from "../../core/axis/settings.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { computed, defineComponent } from "vue";
 //#region src/cartesian/z-axis/ZAxis.tsx
 var ZAxis = /* @__PURE__ */ defineComponent({
 	name: "ZAxis",
@@ -44,9 +43,9 @@ var ZAxis = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(props) {
-		const dispatch = useAppDispatch();
-		watchEffect((onCleanup) => {
-			const settings = {
+		const { zAxis } = useChart().axes;
+		const settings = computed(() => {
+			return {
 				id: props.zAxisId,
 				dataKey: props.dataKey,
 				type: props.type,
@@ -60,11 +59,8 @@ var ZAxis = /* @__PURE__ */ defineComponent({
 				reversed: implicitZAxis.reversed,
 				includeHidden: implicitZAxis.includeHidden
 			};
-			dispatch(addZAxis(settings));
-			onCleanup(() => {
-				dispatch(removeZAxis(settings));
-			});
 		});
+		zAxis.register(settings);
 		return () => null;
 	}
 });