vccs 0.0.1 → 0.2.0

package/dist/es/components/legend/utils.mjs

@@ -0,0 +1,25 @@
+import { isNumber } from "../../utils/validate.mjs";
+//#region src/components/legend/utils.ts
+function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
+	const { layout, align, verticalAlign } = props;
+	let hPos = {};
+	let vPos = {};
+	if (!style || (style.left === void 0 || style.left === null) && (style.right === void 0 || style.right === null)) if (align === "center" && layout === "vertical") hPos = { left: `${((chartWidth || 0) - box.width) / 2}px` };
+	else hPos = align === "right" ? { right: `${margin?.right || 0}px` } : { left: `${margin?.left || 0}px` };
+	if (!style || (style.top === void 0 || style.top === null) && (style.bottom === void 0 || style.bottom === null)) if (verticalAlign === "middle") vPos = { top: `${((chartHeight || 0) - box.height) / 2}px` };
+	else vPos = verticalAlign === "bottom" ? { bottom: `${margin?.bottom || 0}px` } : { top: `${margin?.top || 0}px` };
+	return {
+		...hPos,
+		...vPos
+	};
+}
+function getWidthOrHeight(layout, height, width, maxWidth) {
+	if (layout === "vertical" && isNumber(height)) return { height };
+	if (layout === "horizontal") return { width: width || maxWidth };
+	return null;
+}
+function defaultUniqBy(entry) {
+	return entry.value;
+}
+//#endregion
+export { defaultUniqBy, getDefaultPosition, getWidthOrHeight };

package/dist/es/components/utils.mjs

@@ -0,0 +1,44 @@
+import { polarToCartesian } from "../utils/polar.mjs";
+//#region src/components/utils.ts
+function getRadialCursorPoints(activeCoordinate) {
+	const { cx, cy, radius, startAngle, endAngle } = activeCoordinate;
+	return {
+		points: [polarToCartesian(cx, cy, radius, startAngle), polarToCartesian(cx, cy, radius, endAngle)],
+		cx,
+		cy,
+		radius,
+		startAngle,
+		endAngle
+	};
+}
+function getCursorPoints(layout, activeCoordinate, offset) {
+	let x1, y1, x2, y2;
+	if (layout === "horizontal") {
+		x1 = activeCoordinate.x;
+		x2 = x1;
+		y1 = offset.top;
+		y2 = offset.top + offset.height;
+	} else if (layout === "vertical") {
+		y1 = activeCoordinate.y;
+		y2 = y1;
+		x1 = offset.left;
+		x2 = offset.left + offset.width;
+	} else if (activeCoordinate.cx != null && activeCoordinate.cy != null) if (layout === "centric") {
+		const { cx, cy, innerRadius, outerRadius, angle } = activeCoordinate;
+		const innerPoint = polarToCartesian(cx, cy, innerRadius, angle);
+		const outerPoint = polarToCartesian(cx, cy, outerRadius, angle);
+		x1 = innerPoint.x;
+		y1 = innerPoint.y;
+		x2 = outerPoint.x;
+		y2 = outerPoint.y;
+	} else return getRadialCursorPoints(activeCoordinate);
+	return [{
+		x: x1,
+		y: y1
+	}, {
+		x: x2,
+		y: y2
+	}];
+}
+//#endregion
+export { getCursorPoints };

package/dist/es/container/ClipPath.mjs

@@ -0,0 +1,25 @@
+import { useOffset } from "../context/chartLayoutContext.mjs";
+import { createVNode, defineComponent } from "vue";
+//#region src/container/ClipPath.tsx
+var ClipPath_default = /* @__PURE__ */ defineComponent({
+	name: "ClipPath",
+	props: { clipPathId: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		const offset = useOffset();
+		return () => {
+			if (!offset.value) return null;
+			const { left, top, height, width } = offset.value;
+			return createVNode("defs", null, [createVNode("clipPath", { "id": props.clipPathId }, [createVNode("rect", {
+				"x": left,
+				"y": top,
+				"height": height,
+				"width": width
+			}, null)])]);
+		};
+	}
+});
+//#endregion
+export { ClipPath_default as default };

package/dist/es/container/Layer.mjs

@@ -0,0 +1,14 @@
+import { filterProps } from "../utils/VueUtils.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/container/Layer.tsx
+var Layer = /* @__PURE__ */ defineComponent({
+	name: "VChartsLayer",
+	inheritAttrs: false,
+	setup(_, { attrs, slots }) {
+		return () => {
+			return createVNode("g", mergeProps(attrs, filterProps(attrs, true), { "class": "v-charts-layer" }), [slots.default?.()]);
+		};
+	}
+});
+//#endregion
+export { Layer };

package/dist/es/container/ResponsiveContainer.mjs

@@ -0,0 +1,5 @@
+import ResponsiveContainer_vue_vue_type_script_setup_true_lang_default from "./ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/container/ResponsiveContainer.vue
+var ResponsiveContainer_default = ResponsiveContainer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ResponsiveContainer_default as default };

package/dist/es/container/ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,144 @@
+import { isPercent } from "../utils/validate.mjs";
+import { normalizeStyle as normalizeStyle$1 } from "../utils/style.mjs";
+import { provideSizeContext } from "./useSizeContext.mjs";
+import { Fragment, cloneVNode, computed, createBlock, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, resolveDynamicComponent, toRef, useSlots } from "vue";
+import { useThrottleFn } from "@vueuse/core";
+//#region src/container/ResponsiveContainer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var ResponsiveContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ResponsiveContainer",
+	inheritAttrs: false,
+	__name: "ResponsiveContainer",
+	props: {
+		aspect: {},
+		width: { default: "100%" },
+		height: { default: "100%" },
+		minWidth: { default: 0 },
+		minHeight: {},
+		initialDimension: { default: () => ({
+			width: -1,
+			height: -1
+		}) },
+		maxHeight: {},
+		debounce: { default: 0 },
+		id: {},
+		class: {},
+		style: {},
+		onResize: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const debounce = toRef(props, "debounce");
+		const sizes = ref({
+			width: props.initialDimension.width,
+			height: props.initialDimension.height
+		});
+		const calculatedWidth = computed(() => {
+			return isPercent(props.width) ? sizes.value.width : props.width;
+		});
+		const calculatedHeight = computed(() => {
+			let height = isPercent(props.height) ? sizes.value.height : props.height;
+			if (props.aspect && props.aspect > 0) {
+				if (props.width && (props.height == null || props.height === "auto")) height = calculatedWidth.value / props.aspect;
+				else if (props.height && (props.width == null || props.width === "auto")) {}
+			}
+			return height;
+		});
+		const finalCalculatedWidth = computed(() => {
+			let width = calculatedWidth.value;
+			if (props.aspect && props.aspect > 0) {
+				if (props.height && (props.width == null || props.width === "auto")) width = calculatedHeight.value * props.aspect;
+			}
+			return width;
+		});
+		provideSizeContext({
+			sizes,
+			calculatedWidth: finalCalculatedWidth,
+			calculatedHeight
+		});
+		function setContainerSize(width, height) {
+			const roundedWidth = Math.round(width);
+			const roundedHeight = Math.round(height);
+			const { width: containerWidth, height: containerHeight } = sizes.value;
+			if (containerWidth === roundedWidth && containerHeight === roundedHeight) return;
+			sizes.value = {
+				width: roundedWidth,
+				height: roundedHeight
+			};
+		}
+		const handleResize = useThrottleFn((entries) => {
+			const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
+			setContainerSize(containerWidth, containerHeight);
+			props.onResize?.(containerWidth, containerHeight);
+		}, debounce, true, false);
+		const containerRef = ref();
+		let observer = null;
+		onMounted(() => {
+			observer = new ResizeObserver(handleResize);
+			const { width: containerWidth, height: containerHeight } = containerRef.value.getBoundingClientRect() ?? {
+				width: 0,
+				height: 0
+			};
+			setContainerSize(containerWidth, containerHeight);
+			observer.observe(containerRef.value);
+		});
+		onUnmounted(() => {
+			observer?.disconnect();
+		});
+		const isReady = computed(() => {
+			const { width: containerWidth, height: containerHeight } = sizes.value;
+			return containerWidth >= 0 && containerHeight >= 0;
+		});
+		function flattenSlotChildren(vnodes) {
+			const result = [];
+			for (const vnode of vnodes) if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...flattenSlotChildren(vnode.children));
+			else result.push(vnode);
+			return result;
+		}
+		function renderChildren() {
+			if (!isReady.value) return;
+			const calculatedWidthValue = finalCalculatedWidth.value;
+			const calculatedHeightValue = calculatedHeight.value;
+			const rawChildren = slots.default?.();
+			if (!rawChildren) return void 0;
+			return flattenSlotChildren(rawChildren).map((child, index) => {
+				return cloneVNode(child, {
+					width: calculatedWidthValue,
+					height: calculatedHeightValue,
+					key: child.key || `responsive-child-${index}`,
+					style: {
+						...normalizeStyle$1({
+							maxHeight: sizes.value.height,
+							maxWidth: sizes.value.width
+						}),
+						height: "100%",
+						width: "100%",
+						...child.props?.style
+					}
+				});
+			});
+		}
+		const containerStyle = computed(() => ({
+			...props.style,
+			...normalizeStyle$1({
+				width: props.width,
+				height: props.height,
+				minWidth: props.minWidth,
+				minHeight: props.minHeight,
+				maxHeight: props.maxHeight
+			})
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: _ctx.id ? `${_ctx.id}` : void 0,
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: normalizeClass(["vcharts-responsive-container", [props.class]]),
+				style: normalizeStyle(containerStyle.value)
+			}, [(openBlock(), createBlock(resolveDynamicComponent(() => renderChildren())))], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ResponsiveContainer_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/container/Surface.mjs

@@ -0,0 +1,62 @@
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/container/Surface.tsx
+/**
+* @fileOverview Surface component for SVG rendering
+*/
+var Surface = /* @__PURE__ */ defineComponent({
+	name: "Surface",
+	props: {
+		width: {
+			type: Number,
+			required: true
+		},
+		height: {
+			type: Number,
+			required: true
+		},
+		viewBox: {
+			type: Object,
+			default: void 0
+		},
+		class: {
+			type: String,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		title: {
+			type: String,
+			default: void 0
+		},
+		desc: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props, { slots, attrs }) {
+		return () => {
+			const { width, height, viewBox, class: className, style, title, desc, ...rest } = props;
+			const svgView = viewBox || {
+				width,
+				height,
+				x: 0,
+				y: 0
+			};
+			return createVNode("svg", mergeProps({
+				"class": ["vcharts-surface", className],
+				"width": width,
+				"height": height,
+				"style": style,
+				"viewBox": `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`
+			}, rest, attrs), [
+				title && createVNode("title", null, [title]),
+				desc && createVNode("desc", null, [desc]),
+				slots.default?.()
+			]);
+		};
+	}
+});
+//#endregion
+export { Surface as default };

package/dist/es/container/useSizeContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "../utils/createContext.mjs";
+//#region src/container/useSizeContext.ts
+var [useSizeContext, provideSizeContext] = createContext("SizeContext");
+//#endregion
+export { provideSizeContext };

package/dist/es/context/ChartDataContextProvider.mjs

@@ -0,0 +1,27 @@
+import { useAppDispatch } from "../state/hooks.mjs";
+import { setChartData } from "../state/chartDataSlice.mjs";
+import { defineComponent, onUnmounted, watch } from "vue";
+//#region src/context/ChartDataContextProvider.ts
+/**
+* ChartDataContextProvider for Vue
+* Sets chartData in store on mount/update, clears on unmount. Renders nothing.
+*/
+var ChartDataContextProvider = defineComponent({
+	name: "ChartDataContextProvider",
+	props: { chartData: {
+		type: Array,
+		required: true
+	} },
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watch(() => props.chartData, (val) => {
+			dispatch(setChartData(Array.from(val)));
+		}, { immediate: true });
+		onUnmounted(() => {
+			dispatch(setChartData(void 0));
+		});
+		return () => null;
+	}
+});
+//#endregion
+export { ChartDataContextProvider };

package/dist/es/context/PanoramaContextProvider.mjs

@@ -0,0 +1,24 @@
+import { createContext } from "../utils/createContext.mjs";
+import { defineComponent } from "vue";
+//#region src/context/PanoramaContextProvider.ts
+var [injectPanorama, providePanoramaContext] = createContext("PanoramaContext");
+/**
+* useIsPanorama composable
+* Returns the injected isPanorama value (default: false)
+*/
+function useIsPanorama() {
+	return injectPanorama(false);
+}
+defineComponent({
+	name: "PanoramaContextProvider",
+	props: { isPanorama: {
+		type: Boolean,
+		required: true
+	} },
+	setup(props, { slots }) {
+		providePanoramaContext(true);
+		return () => slots.default?.();
+	}
+});
+//#endregion
+export { useIsPanorama };

package/dist/es/context/accessibilityContext.mjs

@@ -0,0 +1,5 @@
+import { useAppSelector } from "../state/hooks.mjs";
+//#region src/context/accessibilityContext.tsx
+var useAccessibilityLayer = () => useAppSelector((state) => state.rootProps.accessibilityLayer);
+//#endregion
+export { useAccessibilityLayer };

package/dist/es/context/cartesianLabelListContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "../utils/createContext.mjs";
+//#region src/context/cartesianLabelListContext.ts
+var [useCartesianLabelListData, provideCartesianLabelListData] = createContext("CartesianLabelListContext");
+//#endregion
+export { provideCartesianLabelListData, useCartesianLabelListData };

package/dist/es/context/chartLayoutContext.mjs

@@ -0,0 +1,49 @@
+import { useIsPanorama } from "./PanoramaContextProvider.mjs";
+import { selectChartHeight, selectChartWidth } from "../state/selectors/containerSelectors.mjs";
+import { selectChartOffset, selectChartViewBox } from "../state/selectors/selectChartOffset.mjs";
+import { selectBrushDimensions, selectBrushSettings } from "../state/selectors/brushSelectors.mjs";
+import { selectChartLayout } from "../state/selectors/common.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
+import { selectChartOffsetInternal } from "../state/selectors/selectChartOffsetInternal.mjs";
+import { computed } from "vue";
+//#region src/context/chartLayoutContext.tsx
+function useOffset() {
+	return useAppSelector(selectChartOffset);
+}
+var useChartLayout = () => useAppSelector(selectChartLayout);
+function useViewBox() {
+	const panorama = useIsPanorama();
+	const rootViewBox = useAppSelector(selectChartViewBox);
+	const brushDimensions = useAppSelector(selectBrushDimensions);
+	const brushPadding = useAppSelector(selectBrushSettings);
+	return computed(() => {
+		if (!panorama || !brushDimensions.value || !brushPadding.value) return rootViewBox.value;
+		const padding = brushPadding.value.padding;
+		return {
+			width: brushDimensions.value.width - padding.left - padding.right,
+			height: brushDimensions.value.height - padding.top - padding.bottom,
+			x: padding.left,
+			y: padding.top
+		};
+	});
+}
+function useChartWidth() {
+	return useAppSelector(selectChartWidth);
+}
+function useChartHeight() {
+	return useAppSelector(selectChartHeight);
+}
+function useOffsetInternal() {
+	return useAppSelector(selectChartOffsetInternal);
+}
+var manyComponentsThrowErrorsIfMarginIsUndefined = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
+function useMargin() {
+	return useAppSelector((state) => state.layout.margin ?? manyComponentsThrowErrorsIfMarginIsUndefined);
+}
+//#endregion
+export { useChartHeight, useChartLayout, useChartWidth, useMargin, useOffset, useOffsetInternal, useViewBox };

package/dist/es/context/cursorLayerContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "../utils/createContext.mjs";
+//#region src/context/cursorLayerContext.ts
+var [useCursorLayerRef, provideCursorLayerRef] = createContext("CursorLayerContext");
+//#endregion
+export { provideCursorLayerRef, useCursorLayerRef };

package/dist/es/context/graphicalLayerContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "../utils/createContext.mjs";
+//#region src/context/graphicalLayerContext.ts
+var [useGraphicalLayerRef, provideGraphicalLayerRef] = createContext("GraphicalLayerContext");
+//#endregion
+export { provideGraphicalLayerRef, useGraphicalLayerRef };

package/dist/es/context/labelLayerContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "../utils/createContext.mjs";
+//#region src/context/labelLayerContext.ts
+var [useLabelLayerRef, provideLabelLayerRef] = createContext("LabelLayerContext");
+//#endregion
+export { provideLabelLayerRef, useLabelLayerRef };

package/dist/es/context/polarLabelViewBoxContext.mjs

@@ -0,0 +1,8 @@
+import { computed, inject } from "vue";
+//#region src/context/polarLabelViewBoxContext.ts
+var POLAR_LABEL_VIEW_BOX_KEY = Symbol("polar-label-view-box");
+function usePolarLabelViewBox() {
+	return inject(POLAR_LABEL_VIEW_BOX_KEY, computed(() => void 0));
+}
+//#endregion
+export { POLAR_LABEL_VIEW_BOX_KEY, usePolarLabelViewBox };

package/dist/es/context/useTooltipAxis.mjs

@@ -0,0 +1,17 @@
+import { getBandSizeOfAxis } from "../utils/chart.mjs";
+import { selectTooltipAxis, selectTooltipAxisScale, selectTooltipAxisTicks } from "../state/selectors/tooltipSelectors.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
+import { computed } from "vue";
+//#region src/context/useTooltipAxis.ts
+var useTooltipAxis = () => useAppSelector(selectTooltipAxis);
+function useTooltipAxisBandSize() {
+	const tooltipAxis = useTooltipAxis();
+	const tooltipTicks = useAppSelector(selectTooltipAxisTicks);
+	const tooltipAxisScale = useAppSelector(selectTooltipAxisScale);
+	return computed(() => getBandSizeOfAxis({
+		...tooltipAxis.value,
+		scale: tooltipAxisScale.value
+	}, tooltipTicks.value));
+}
+//#endregion
+export { useTooltipAxisBandSize };

package/dist/es/events/useChartSynchronisation.mjs

@@ -0,0 +1,113 @@
+import { selectEventEmitter, selectSyncId, selectSyncMethod } from "../state/selectors/rootPropsSelectors.mjs";
+import { setSyncInteraction } from "../state/tooltipSlice.mjs";
+import { selectTooltipAxisTicks } from "../state/selectors/tooltipSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../state/hooks.mjs";
+import { useChartLayout, useViewBox } from "../context/chartLayoutContext.mjs";
+import { createEventEmitter } from "../state/optionsSlice.mjs";
+import { setDataStartEndIndexes } from "../state/chartDataSlice.mjs";
+import { BRUSH_SYNC_EVENT, TOOLTIP_SYNC_EVENT, eventCenter } from "../utils/events.mjs";
+import { onMounted, watch } from "vue";
+//#region src/events/useChartSynchronisation.tsx
+function useTooltipSyncEventsListener() {
+	const mySyncId = useAppSelector(selectSyncId);
+	const myEventEmitter = useAppSelector(selectEventEmitter);
+	const dispatch = useAppDispatch();
+	const syncMethod = useAppSelector(selectSyncMethod);
+	const tooltipTicks = useAppSelector(selectTooltipAxisTicks);
+	const layout = useChartLayout();
+	const viewBox = useViewBox();
+	watch([
+		useAppSelector((state) => state.rootProps.class),
+		myEventEmitter,
+		mySyncId,
+		syncMethod,
+		tooltipTicks,
+		layout,
+		viewBox
+	], (v, o, onCleanup) => {
+		if (mySyncId.value == null) return;
+		const listener = (incomingSyncId, action, emitter) => {
+			if (myEventEmitter.value === emitter) return;
+			if (mySyncId.value !== incomingSyncId) return;
+			if (syncMethod.value === "index") {
+				dispatch(action);
+				return;
+			}
+			if (tooltipTicks.value == null) return;
+			let activeTick;
+			if (typeof syncMethod.value === "function") {
+				const syncMethodParam = {
+					activeTooltipIndex: action.payload.index == null ? void 0 : Number(action.payload.index),
+					isTooltipActive: action.payload.active,
+					activeIndex: action.payload.index == null ? void 0 : Number(action.payload.index),
+					activeLabel: action.payload.label,
+					activeDataKey: action.payload.dataKey,
+					activeCoordinate: action.payload.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) === action.payload.label);
+			if (activeTick == null || action.payload.active === false) {
+				dispatch(setSyncInteraction({
+					active: false,
+					coordinate: void 0,
+					dataKey: void 0,
+					index: null,
+					label: void 0
+				}));
+				return;
+			}
+			const { x, y } = action.payload.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
+			};
+			dispatch(setSyncInteraction({
+				active: action.payload.active,
+				coordinate: activeCoordinate,
+				dataKey: action.payload.dataKey,
+				index: String(activeTick.index),
+				label: action.payload.label
+			}));
+		};
+		eventCenter.on(TOOLTIP_SYNC_EVENT, listener);
+		onCleanup(() => {
+			eventCenter.off(TOOLTIP_SYNC_EVENT, listener);
+		});
+	});
+}
+function useBrushSyncEventsListener() {
+	const mySyncId = useAppSelector(selectSyncId);
+	const myEventEmitter = useAppSelector(selectEventEmitter);
+	const dispatch = useAppDispatch();
+	watch([mySyncId, myEventEmitter], (v, o, onCleanup) => {
+		if (mySyncId == null) return;
+		const listener = (incomingSyncId, action, emitter) => {
+			if (myEventEmitter.value === emitter) return;
+			if (mySyncId.value === incomingSyncId) dispatch(setDataStartEndIndexes(action));
+		};
+		eventCenter.on(BRUSH_SYNC_EVENT, listener);
+		onCleanup(() => {
+			eventCenter.off(BRUSH_SYNC_EVENT, listener);
+		});
+	});
+}
+/**
+* Will receive synchronisation events from other charts.
+*
+* Reads syncMethod from state and decides how to synchronise the tooltip based on that.
+*
+* @returns void
+*/
+function useSynchronisedEventsFromOtherCharts() {
+	const dispatch = useAppDispatch();
+	onMounted(() => {
+		dispatch(createEventEmitter());
+	});
+	useTooltipSyncEventsListener();
+	useBrushSyncEventsListener();
+}
+//#endregion
+export { useSynchronisedEventsFromOtherCharts };

package/dist/es/hooks/useIsAnimating.mjs

@@ -0,0 +1,28 @@
+import { computed, ref, watch } from "vue";
+//#region src/hooks/useIsAnimating.ts
+/**
+* Tracks whether a component is currently animating.
+*
+* When `isAnimationActive` is `false`, always returns `false` regardless of
+* internal state — this ensures `isAnimationActive={false}` immediately
+* disables all animation-gated rendering (e.g. deferred LabelList).
+*
+* When `isAnimationActive` is `true`, starts as `true` and can be set to
+* `false` via the returned ref (typically on animation end).
+*
+* Re-entering `isAnimationActive=true` resets internal state to `true`.
+*/
+function useIsAnimating(isAnimationActive) {
+	const internal = ref(isAnimationActive());
+	watch(isAnimationActive, (active) => {
+		if (active) internal.value = true;
+	});
+	return computed({
+		get: () => isAnimationActive() && internal.value,
+		set: (val) => {
+			internal.value = val;
+		}
+	});
+}
+//#endregion
+export { useIsAnimating };