vccs 0.5.0 → 1.0.0-beta.1

package/dist/es/events/sync.mjs

@@ -0,0 +1,141 @@
+import { useChartPresentation } from "../model/presentation.mjs";
+import { useTooltipController } from "../model/tooltip.mjs";
+import { BRUSH_SYNC_EVENT, TOOLTIP_SYNC_EVENT, eventCenter } from "../utils/events.mjs";
+import { computed, nextTick, onMounted, watch, watchEffect } from "vue";
+//#region src/events/sync.ts
+var receivingBrushSynchronisation = /* @__PURE__ */ new WeakSet();
+function useTooltipChartSynchronisation(source, enabled) {
+	const tooltip = useTooltipController();
+	const presentation = useChartPresentation();
+	const activeDataKey = computed(() => tooltip.target.value?.entry?.value?.settings.dataKey);
+	const eventEmitterSymbol = presentation.emitter;
+	const syncId = presentation.syncId;
+	const tooltipState = computed(() => tooltip.syncInteraction.value);
+	const isReceivingSynchronisation = computed(() => tooltipState.value?.active);
+	watchEffect(() => {
+		if (!enabled()) return;
+		if (isReceivingSynchronisation.value) return;
+		if (syncId.value == null) return;
+		if (eventEmitterSymbol.value == null) return;
+		const message = {
+			kind: "tooltip",
+			active: source.active.value,
+			coordinate: source.coordinate.value,
+			dataKey: activeDataKey.value,
+			index: source.index.value,
+			label: source.label.value
+		};
+		eventCenter.emit(TOOLTIP_SYNC_EVENT, syncId.value, message, eventEmitterSymbol.value);
+	});
+}
+function useTooltipSyncEventsListener(chart) {
+	const mySyncId = computed(() => chart.options.value.syncId);
+	const myEventEmitter = computed(() => chart.tooltipOptions.value.eventEmitter);
+	const tooltip = chart.tooltip;
+	const syncMethod = computed(() => chart.options.value.syncMethod);
+	const tooltipTicks = computed(() => chart.tooltip.ticks.value);
+	const layout = computed(chart.inputs.layout);
+	const viewBox = chart.viewBox;
+	watch([myEventEmitter, mySyncId], (v, o, onCleanup) => {
+		if (mySyncId.value == null) return;
+		const listener = (incomingSyncId, message, emitter) => {
+			if (myEventEmitter.value === emitter) return;
+			if (mySyncId.value !== incomingSyncId) return;
+			if (syncMethod.value === "index") {
+				const candidate = message.index === null ? void 0 : tooltip.targets.value[message.index];
+				tooltip.activate("sync", {
+					active: message.active,
+					index: candidate?.index ?? null,
+					configuration: candidate?.entry?.value,
+					coordinate: message.coordinate
+				});
+				return;
+			}
+			if (tooltipTicks.value == null) return;
+			let activeTick;
+			if (typeof syncMethod.value === "function") {
+				const syncMethodParam = {
+					activeTooltipIndex: message.index ?? void 0,
+					isTooltipActive: message.active,
+					activeIndex: message.index ?? void 0,
+					activeLabel: message.label,
+					activeDataKey: message.dataKey,
+					activeCoordinate: message.coordinate
+				};
+				const activeTooltipIndex = syncMethod.value(tooltipTicks.value, syncMethodParam);
+				activeTick = tooltipTicks.value[activeTooltipIndex];
+			} else if (syncMethod.value === "value") activeTick = tooltipTicks.value.find((tick) => String(tick.value) === message.label);
+			if (activeTick == null || message.active === false) {
+				tooltip.activate("sync", {
+					active: false,
+					index: null
+				});
+				return;
+			}
+			const { x, y } = message.coordinate;
+			const validateChartX = Math.min(x, viewBox.value?.x + viewBox.value?.width);
+			const validateChartY = Math.min(y, viewBox.value?.y + viewBox.value?.height);
+			const activeCoordinate = {
+				x: layout.value === "horizontal" ? activeTick.coordinate : validateChartX,
+				y: layout.value === "horizontal" ? validateChartY : activeTick.coordinate
+			};
+			const candidate = tooltip.targets.value[activeTick.index ?? -1];
+			tooltip.activate("sync", {
+				active: message.active,
+				index: candidate?.index ?? null,
+				configuration: candidate?.entry?.value,
+				coordinate: activeCoordinate
+			});
+		};
+		eventCenter.on(TOOLTIP_SYNC_EVENT, listener);
+		onCleanup(() => {
+			eventCenter.off(TOOLTIP_SYNC_EVENT, listener);
+		});
+	}, { immediate: true });
+}
+function useBrushSyncEventsListener(chart) {
+	const mySyncId = computed(() => chart.options.value.syncId);
+	const myEventEmitter = computed(() => chart.tooltipOptions.value.eventEmitter);
+	const data = chart.dataRange;
+	watch([mySyncId, myEventEmitter], (v, o, onCleanup) => {
+		if (mySyncId.value == null) return;
+		const listener = (incomingSyncId, range, emitter) => {
+			if (myEventEmitter.value === emitter) return;
+			if (mySyncId.value === incomingSyncId) {
+				receivingBrushSynchronisation.add(chart);
+				nextTick(() => receivingBrushSynchronisation.delete(chart));
+				const requestRange = chart.brush.state.value.onRangeChange;
+				if (requestRange) requestRange(range);
+				else data.receiveSyncedRange(range);
+			}
+		};
+		eventCenter.on(BRUSH_SYNC_EVENT, listener);
+		onCleanup(() => {
+			eventCenter.off(BRUSH_SYNC_EVENT, listener);
+		});
+	}, { immediate: true });
+}
+/** Receive requests through the chart's configured synchronisation method. */
+function useSynchronisedEventsFromOtherCharts(chart) {
+	onMounted(() => {
+		useTooltipSyncEventsListener(chart);
+		useBrushSyncEventsListener(chart);
+	});
+}
+function useBrushChartSynchronisation(chart) {
+	const syncId = computed(() => chart.options.value.syncId);
+	const eventEmitterSymbol = computed(() => chart.tooltipOptions.value.eventEmitter);
+	const brushStartIndex = computed(() => chart.dataRange.state.value.dataStartIndex);
+	const brushEndIndex = computed(() => chart.dataRange.state.value.dataEndIndex);
+	watchEffect(() => {
+		if (syncId.value == null || brushStartIndex.value == null || brushEndIndex.value == null || eventEmitterSymbol.value == null) return;
+		if (receivingBrushSynchronisation.delete(chart)) return;
+		const range = {
+			startIndex: brushStartIndex.value,
+			endIndex: brushEndIndex.value
+		};
+		eventCenter.emit(BRUSH_SYNC_EVENT, syncId.value, range, eventEmitterSymbol.value);
+	});
+}
+//#endregion
+export { useBrushChartSynchronisation, useSynchronisedEventsFromOtherCharts, useTooltipChartSynchronisation };

package/dist/es/events/useChartCallbacks.mjs

@@ -0,0 +1,24 @@
+import { useTooltipController } from "../model/tooltip.mjs";
+import { computed } from "vue";
+//#region src/events/useChartCallbacks.ts
+function useChartCallbacks() {
+	const tooltip = useTooltipController();
+	const source = tooltip.source;
+	const callbackState = computed(() => {
+		const target = source.active.value ? tooltip.target.value : void 0;
+		const activeIndex = target ? target.payloadKey ?? String(target.index) : null;
+		return {
+			activeCoordinate: source.coordinate.value,
+			activeDataKey: tooltip.target.value?.entry?.value?.settings.dataKey,
+			activeIndex,
+			activeLabel: source.label.value,
+			activeTooltipIndex: activeIndex,
+			isTooltipActive: source.active.value
+		};
+	});
+	return (handler, event) => {
+		if (handler) handler({ ...callbackState.value }, event);
+	};
+}
+//#endregion
+export { useChartCallbacks };

package/dist/es/events/useChartInteractions.mjs

@@ -0,0 +1,143 @@
+import { DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
+import { useChart } from "../model/chart.mjs";
+import { activeProps } from "../core/interaction.mjs";
+import { useItemInteractions } from "./useItemInteractions.mjs";
+import { getChartPointer } from "../utils/pointer.mjs";
+//#region src/events/useChartInteractions.ts
+function useChartInteractions() {
+	const chart = useChart();
+	const tooltip = chart.tooltip;
+	function selectionAtPointer(pointer, target) {
+		const selection = activeProps(pointer, chart.inputs.layout(), chart.polarLayout.viewBox.value, tooltip.axisType.value, tooltip.axis.value?.reversedRange.value, tooltip.ticks.value, tooltip.orderedTicks.value, chart.offset.value);
+		if (selection || !pointer || !(target instanceof Element)) return selection;
+		const index = target.closest(".v-charts-radial-bar .v-charts-sector")?.getAttribute(DATA_ITEM_INDEX_ATTRIBUTE_NAME);
+		if (index == null) return void 0;
+		return {
+			activeIndex: Number(index),
+			activeCoordinate: {
+				x: pointer.chartX,
+				y: pointer.chartY
+			}
+		};
+	}
+	function coordinateAt(index) {
+		return tooltip.coordinateFor(tooltip.targets.value.find((target) => target.index === index));
+	}
+	function click(chartPointer, target) {
+		if (tooltip.eventType.value === "axis") {
+			const activeProps = selectionAtPointer(chartPointer, target);
+			if (activeProps?.activeIndex != null) tooltip.activate("click", {
+				type: "axis",
+				index: activeProps.activeIndex,
+				coordinate: activeProps.activeCoordinate
+			});
+		}
+	}
+	function move(chartPointer, target) {
+		const tooltipEventType = tooltip.eventType.value;
+		const activeProps = selectionAtPointer(chartPointer, target);
+		if (tooltipEventType === "axis") {
+			if (activeProps?.activeIndex != null) tooltip.activate("hover", {
+				type: "axis",
+				index: activeProps.activeIndex,
+				coordinate: activeProps.activeCoordinate
+			});
+			else tooltip.clear("hover");
+		}
+	}
+	const { keyDown: itemKeyDown } = useItemInteractions();
+	function keyDown(event) {
+		const { key } = event;
+		if (!(chart.options.value.accessibilityLayer !== false)) return;
+		if (tooltip.eventType.value === "item") {
+			itemKeyDown(event);
+			return;
+		}
+		const keyboardInteraction = {
+			index: tooltip.target.value?.index ?? null,
+			active: tooltip.source.active.value,
+			dataKey: tooltip.target.value?.entry?.value?.settings.dataKey
+		};
+		if (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "Enter") return;
+		const currentIndex = tooltip.source.index.value ?? 0;
+		const tooltipTicks = tooltip.ticks.value;
+		if (!tooltipTicks?.length) return;
+		if (key === "Enter") {
+			const coordinate = coordinateAt(keyboardInteraction.index);
+			tooltip.activate("keyboard", {
+				type: "axis",
+				active: !keyboardInteraction.active,
+				index: keyboardInteraction.index,
+				coordinate
+			});
+			return;
+		}
+		const directionMultiplier = chart.direction.value === "left-to-right" ? 1 : -1;
+		const nextIndex = currentIndex + (key === "ArrowRight" ? 1 : -1) * directionMultiplier;
+		if (nextIndex >= tooltipTicks.length || nextIndex < 0) return;
+		const coordinate = coordinateAt(nextIndex);
+		tooltip.activate("keyboard", {
+			type: "axis",
+			active: true,
+			index: nextIndex,
+			coordinate
+		});
+	}
+	function focus() {
+		if (!(chart.options.value.accessibilityLayer !== false)) return;
+		if (tooltip.eventType.value === "item") return;
+		const keyboardInteraction = {
+			index: tooltip.target.value?.index ?? null,
+			active: tooltip.source.active.value
+		};
+		if (keyboardInteraction.active) return;
+		if (keyboardInteraction.index == null) {
+			const nextIndex = 0;
+			const coordinate = coordinateAt(nextIndex);
+			tooltip.activate("keyboard", {
+				type: "axis",
+				active: true,
+				index: nextIndex,
+				coordinate
+			});
+		}
+	}
+	function touchMove(touchEvent) {
+		const touch = touchEvent.touches[0];
+		if (!touch) return;
+		const tooltipEventType = tooltip.eventType.value;
+		if (tooltipEventType === "axis") {
+			const activeProps = selectionAtPointer(getChartPointer({
+				clientX: touch.clientX,
+				clientY: touch.clientY,
+				currentTarget: touchEvent.currentTarget
+			}));
+			if (activeProps?.activeIndex != null) tooltip.activate("hover", {
+				type: "axis",
+				index: activeProps.activeIndex,
+				coordinate: activeProps.activeCoordinate
+			});
+		} else if (tooltipEventType === "item") {
+			const target = document.elementFromPoint(touch.clientX, touch.clientY);
+			if (!target || !target.getAttribute) return;
+			const itemIndex = target.getAttribute(DATA_ITEM_INDEX_ATTRIBUTE_NAME);
+			const index = itemIndex === null ? null : Number(itemIndex);
+			const touched = index === null ? void 0 : tooltip.targets.value.find((candidate) => candidate.index === index);
+			tooltip.activate("hover", {
+				type: "item",
+				index,
+				configuration: touched?.entry?.value,
+				coordinate: touched?.coordinate
+			});
+		}
+	}
+	return {
+		click,
+		move,
+		keyDown,
+		focus,
+		touchMove
+	};
+}
+//#endregion
+export { useChartInteractions };

package/dist/es/events/useItemInteractions.mjs

@@ -0,0 +1,58 @@
+import { DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
+import { useTooltipController } from "../model/tooltip.mjs";
+//#region src/events/useItemInteractions.ts
+function useItemInteractions() {
+	const tooltip = useTooltipController();
+	function keyDown(event) {
+		const { key } = event;
+		const targets = tooltip.targets.value;
+		if (key === "Escape") {
+			tooltip.clear("keyboard");
+			return;
+		}
+		const position = tooltip.source.index.value ?? -1;
+		if (key === "Enter") {
+			targets[position]?.onClick?.(event);
+			return;
+		}
+		let next;
+		if (key === "Home") next = 0;
+		else if (key === "End") next = targets.length - 1;
+		else if (key === "ArrowRight" || key === "ArrowDown") next = Math.min(position + 1, targets.length - 1);
+		else if (key === "ArrowLeft" || key === "ArrowUp") next = Math.max(position - 1, 0);
+		else return;
+		const target = targets[next];
+		if (!target) return;
+		tooltip.activate("keyboard", {
+			active: true,
+			index: target.index,
+			coordinate: target.coordinate,
+			configuration: target.entry?.value
+		});
+	}
+	function touchMove(event) {
+		const touch = event.touches[0];
+		if (!touch) return;
+		const element = document.elementFromPoint(touch.clientX, touch.clientY);
+		if (!element) return;
+		const attribute = element.getAttribute(DATA_ITEM_INDEX_ATTRIBUTE_NAME);
+		const index = attribute === null ? null : Number(attribute);
+		const target = index === null ? void 0 : tooltip.targets.value.find((item) => item.index === index);
+		tooltip.activate("hover", {
+			type: "item",
+			index,
+			coordinate: target?.coordinate,
+			configuration: target?.entry?.value
+		});
+	}
+	function ignorePointer() {}
+	return {
+		click: ignorePointer,
+		move: ignorePointer,
+		focus: ignorePointer,
+		keyDown,
+		touchMove
+	};
+}
+//#endregion
+export { useItemInteractions };

package/dist/es/events/useItemKeyboard.mjs

@@ -0,0 +1,45 @@
+import { ref } from "vue";
+//#region src/events/useItemKeyboard.ts
+function isFocusVisible(element) {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+}
+/**
+* The keyboard channel every standalone item chart shares: focus that is visible starts on an
+* item, keys move between items, Escape clears. `keyboard` tells whether the last selection
+* came from the keyboard; pointer handlers reset it.
+*/
+function useItemKeyboard(options) {
+	const keyboard = ref(false);
+	function onFocus(event) {
+		if (options.empty() || !isFocusVisible(event.target)) return;
+		const item = options.start();
+		if (item === void 0) return;
+		keyboard.value = true;
+		options.activate(item);
+	}
+	function onKeydown(event) {
+		if (options.empty()) return;
+		if (event.key === "Escape") {
+			keyboard.value = true;
+			options.clear();
+			return;
+		}
+		if (options.keydown?.(event)) return;
+		const item = options.neighbour(event.key);
+		if (item === void 0) return;
+		event.preventDefault();
+		keyboard.value = true;
+		options.activate(item);
+	}
+	return {
+		keyboard,
+		onFocus,
+		onKeydown
+	};
+}
+//#endregion
+export { useItemKeyboard };

package/dist/es/events/usePointEvents.mjs

@@ -0,0 +1,55 @@
+import { useTooltipEntry } from "../model/tooltip.mjs";
+import { useChart } from "../model/chart.mjs";
+import { computed } from "vue";
+//#region src/events/usePointEvents.ts
+function usePointEvents(emit) {
+	const tooltip = useChart().tooltip;
+	const configuration = useTooltipEntry();
+	return (entry, index) => {
+		const payload = () => ({
+			configuration: configuration?.value,
+			index,
+			coordinate: {
+				x: entry.x,
+				y: entry.y
+			}
+		});
+		return {
+			onClick: (event) => {
+				tooltip.activate("click", {
+					...payload(),
+					type: "item"
+				});
+				emit("click", entry, index, event);
+			},
+			onMouseenter: (event) => {
+				tooltip.activate("hover", {
+					...payload(),
+					type: "item"
+				});
+				emit("mouseenter", entry, index, event);
+			},
+			onMouseleave: (event) => {
+				tooltip.clear("hover");
+				emit("mouseleave", entry, index, event);
+			}
+		};
+	};
+}
+function useSeriesPointEvents(emit, points) {
+	const chart = useChart();
+	const activeIndex = computed(() => chart.tooltip.source.active.value ? chart.tooltip.target.value?.index ?? null : null);
+	const listeners = usePointEvents(emit);
+	const dispatch = (name, event) => {
+		const index = activeIndex.value ?? 0;
+		const entry = points()[index];
+		if (entry) listeners(entry, index)[name](event);
+	};
+	return {
+		onClick: (event) => dispatch("onClick", event),
+		onMouseenter: (event) => dispatch("onMouseenter", event),
+		onMouseleave: (event) => dispatch("onMouseleave", event)
+	};
+}
+//#endregion
+export { usePointEvents, useSeriesPointEvents };

package/dist/es/hooks/deferredView.mjs

@@ -0,0 +1,19 @@
+import { isHydrating, isServerRender } from "../model/runtime.mjs";
+import { defineAsyncComponent } from "vue";
+//#region src/hooks/deferredView.ts
+/**
+* Returns the component that renders a chart item's geometry. Call during setup.
+*
+* Chart items register themselves during setup, but Vue mounts depth-first, so an item
+* renders before later siblings (another series, an axis) have registered. A client-only
+* mount corrects this before the first paint. The server renders only once, and hydration
+* must reproduce the server HTML, so there the view is wrapped as an async component: Vue
+* renders it after every sibling has run setup. Each instance needs its own wrapper,
+* because an async component renders synchronously once it has resolved.
+*/
+function useDeferredView(view) {
+	if (!isServerRender() && !isHydrating()) return view;
+	return defineAsyncComponent({ loader: () => Promise.resolve(view) });
+}
+//#endregion
+export { useDeferredView };

package/dist/es/hooks/publicHooks.mjs

@@ -1,59 +1,60 @@
-import { selectAxisDomain, selectAxisInverseDataSnapScale, selectAxisInverseScale, selectAxisInverseTickSnapScale, selectAxisScale, selectTicksOfAxis } from "../state/selectors/axisSelectors.mjs";
-import { selectActiveLabel, selectActiveTooltipCoordinate, selectIsTooltipActive } from "../state/selectors/tooltipSelectors.mjs";
-import { useAppSelector } from "../state/hooks.mjs";
-import { useOffset } from "../context/chartLayoutContext.mjs";
+import { useChartPresentation } from "../model/presentation.mjs";
+import { useTooltipSource } from "../model/tooltip.mjs";
+import { useChart } from "../model/chart.mjs";
 import { computed } from "vue";
 //#region src/hooks/publicHooks.ts
+/** Returns the chart width in px. Must be used inside a chart component tree. */
+function useChartWidth() {
+	return useChartPresentation().width;
+}
+/** Returns the chart height in px. Must be used inside a chart component tree. */
+function useChartHeight() {
+	return useChartPresentation().height;
+}
+/** Returns the chart margin. Must be used inside a chart component tree. */
+function useMargin() {
+	return useChartPresentation().margin;
+}
 /**
 * Returns whether the tooltip is currently active (visible).
 *
-* Must be used inside a chart component tree (where the Redux store is provided).
+* Must be used inside a chart component tree (where chart-local Vue state is provided).
 *
 * @returns A reactive boolean indicating tooltip active state
 */
 function useIsTooltipActive() {
-	return useAppSelector(selectIsTooltipActive);
+	return useTooltipSource().active;
 }
 /**
 * Returns the current coordinate of the active tooltip.
 *
-* Must be used inside a chart component tree (where the Redux store is provided).
+* Must be used inside a chart component tree (where chart-local Vue state is provided).
 *
 * @returns A reactive Coordinate ({ x, y }) or undefined when no tooltip is active
 */
 function useActiveTooltipCoordinate() {
-	return useAppSelector(selectActiveTooltipCoordinate);
+	return useTooltipSource().coordinate;
 }
 /**
 * Returns the label of the currently active tooltip (the value from the axis dataKey at the hovered index).
 *
-* Must be used inside a chart component tree (where the Redux store is provided).
+* Must be used inside a chart component tree (where chart-local Vue state is provided).
 *
 * @returns A reactive string label or undefined when no tooltip is active
 */
 function useActiveTooltipLabel() {
-	return useAppSelector(selectActiveLabel);
+	return useTooltipSource().label;
 }
 /**
 * Returns the plot area rectangle { x, y, width, height }.
 * This is the area inside all axes, legend, and brush — where graphical items render.
 *
-* Must be used inside a chart component tree (where the Redux store is provided).
+* Must be used inside a chart component tree (where chart-local Vue state is provided).
 *
 * @returns A reactive object with x, y, width, height or undefined if offset is not yet available
 */
 function usePlotArea() {
-	const offset = useOffset();
-	return computed(() => {
-		const o = offset.value;
-		if (o == null) return void 0;
-		return {
-			x: o.left,
-			y: o.top,
-			width: o.width,
-			height: o.height
-		};
-	});
+	return useChartPresentation().viewBox;
 }
 /**
 * Returns the computed domain of an X axis.
@@ -62,7 +63,7 @@ function usePlotArea() {
 * @returns A reactive domain (categorical or numerical) or undefined
 */
 function useXAxisDomain(axisId = 0) {
-	return useAppSelector((state) => selectAxisDomain(state, "xAxis", axisId, false));
+	return useChart().axis("xAxis", axisId).domain;
 }
 /**
 * Returns the computed domain of a Y axis.
@@ -71,7 +72,7 @@ function useXAxisDomain(axisId = 0) {
 * @returns A reactive domain (categorical or numerical) or undefined
 */
 function useYAxisDomain(axisId = 0) {
-	return useAppSelector((state) => selectAxisDomain(state, "yAxis", axisId, false));
+	return useChart().axis("yAxis", axisId).domain;
 }
 /**
 * Returns the computed tick items of an X axis.
@@ -80,7 +81,7 @@ function useYAxisDomain(axisId = 0) {
 * @returns A reactive array of TickItem or undefined
 */
 function useXAxisTicks(axisId = 0) {
-	return useAppSelector((state) => selectTicksOfAxis(state, "xAxis", axisId, false));
+	return useChart().axis("xAxis", axisId).ticks;
 }
 /**
 * Returns the computed tick items of a Y axis.
@@ -89,7 +90,7 @@ function useXAxisTicks(axisId = 0) {
 * @returns A reactive array of TickItem or undefined
 */
 function useYAxisTicks(axisId = 0) {
-	return useAppSelector((state) => selectTicksOfAxis(state, "yAxis", axisId, false));
+	return useChart().axis("yAxis", axisId).ticks;
 }
 /**
 * Returns the scale function for an X axis, mapping data values to pixel coordinates.
@@ -98,7 +99,7 @@ function useYAxisTicks(axisId = 0) {
 * @returns A reactive ScaleFunction or undefined if the axis is not yet initialized
 */
 function useXAxisScale(axisId = 0) {
-	const scale = useAppSelector((state) => selectAxisScale(state, "xAxis", axisId, false));
+	const scale = useChart().axis("xAxis", axisId).scale;
 	return computed(() => {
 		const s = scale.value;
 		if (s == null) return void 0;
@@ -115,7 +116,7 @@ function useXAxisScale(axisId = 0) {
 * @returns A reactive ScaleFunction or undefined if the axis is not yet initialized
 */
 function useYAxisScale(axisId = 0) {
-	const scale = useAppSelector((state) => selectAxisScale(state, "yAxis", axisId, false));
+	const scale = useChart().axis("yAxis", axisId).scale;
 	return computed(() => {
 		const s = scale.value;
 		if (s == null) return void 0;
@@ -132,7 +133,7 @@ function useYAxisScale(axisId = 0) {
 * @returns A reactive InverseScaleFunction or undefined
 */
 function useXAxisInverseScale(axisId = 0) {
-	return useAppSelector((state) => selectAxisInverseScale(state, "xAxis", axisId, false));
+	return useChart().axis("xAxis", axisId).inverseScale;
 }
 /**
 * Returns the inverse scale function for a Y axis, mapping pixel coordinates back to data values.
@@ -141,7 +142,7 @@ function useXAxisInverseScale(axisId = 0) {
 * @returns A reactive InverseScaleFunction or undefined
 */
 function useYAxisInverseScale(axisId = 0) {
-	return useAppSelector((state) => selectAxisInverseScale(state, "yAxis", axisId, false));
+	return useChart().axis("yAxis", axisId).inverseScale;
 }
 /**
 * Returns the inverse scale function for an X axis that snaps to the nearest data point.
@@ -150,7 +151,7 @@ function useYAxisInverseScale(axisId = 0) {
 * @returns A reactive InverseScaleFunction or undefined
 */
 function useXAxisInverseDataSnapScale(axisId = 0) {
-	return useAppSelector((state) => selectAxisInverseDataSnapScale(state, "xAxis", axisId, false));
+	return useChart().axis("xAxis", axisId).inverseDataScale;
 }
 /**
 * Returns the inverse scale function for a Y axis that snaps to the nearest data point.
@@ -159,7 +160,7 @@ function useXAxisInverseDataSnapScale(axisId = 0) {
 * @returns A reactive InverseScaleFunction or undefined
 */
 function useYAxisInverseDataSnapScale(axisId = 0) {
-	return useAppSelector((state) => selectAxisInverseDataSnapScale(state, "yAxis", axisId, false));
+	return useChart().axis("yAxis", axisId).inverseDataScale;
 }
 /**
 * Returns the inverse scale function for an X axis that snaps to the nearest tick.
@@ -168,7 +169,7 @@ function useYAxisInverseDataSnapScale(axisId = 0) {
 * @returns A reactive InverseScaleFunction or undefined
 */
 function useXAxisInverseTickSnapScale(axisId = 0) {
-	return useAppSelector((state) => selectAxisInverseTickSnapScale(state, "xAxis", axisId, false));
+	return useChart().axis("xAxis", axisId).inverseTickScale;
 }
 /**
 * Returns the inverse scale function for a Y axis that snaps to the nearest tick.
@@ -177,7 +178,7 @@ function useXAxisInverseTickSnapScale(axisId = 0) {
 * @returns A reactive InverseScaleFunction or undefined
 */
 function useYAxisInverseTickSnapScale(axisId = 0) {
-	return useAppSelector((state) => selectAxisInverseTickSnapScale(state, "yAxis", axisId, false));
+	return useChart().axis("yAxis", axisId).inverseTickScale;
 }
 /**
 * Convenience hook that maps a data point to pixel coordinates using both X and Y axis scales.
@@ -204,4 +205,4 @@ function useCartesianScale(dataPoint, xAxisId = 0, yAxisId = 0) {
 	});
 }
 //#endregion
-export { useActiveTooltipCoordinate, useActiveTooltipLabel, useCartesianScale, useIsTooltipActive, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks };
+export { useActiveTooltipCoordinate, useActiveTooltipLabel, useCartesianScale, useChartHeight, useChartWidth, useIsTooltipActive, useMargin, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks };