vccs 0.0.1 → 0.2.0

package/dist/es/state/selectors/selectors.mjs

@@ -0,0 +1,104 @@
+import { selectChartDataWithIndexes } from "./dataSelectors.mjs";
+import { selectChartHeight, selectChartWidth } from "./containerSelectors.mjs";
+import { selectChartOffset } from "./selectChartOffset.mjs";
+import { selectChartName } from "./rootPropsSelectors.mjs";
+import { selectChartLayout } from "./common.mjs";
+import { calculateActiveTickIndex, calculateTooltipPos, getActiveCoordinate, inRange } from "../../utils/chart.mjs";
+import { combineActiveLabel } from "./combiners/combineActiveLabel.mjs";
+import { combineTooltipInteractionState } from "./combiners/combineTooltipInteractionState.mjs";
+import { combineActiveTooltipIndex } from "./combiners/combineActiveTooltipIndex.mjs";
+import { combineCoordinateForDefaultIndex } from "./combiners/combineCoordinateForDefaultIndex.mjs";
+import { combineTooltipPayloadConfigurations } from "./combiners/combineTooltipPayloadConfigurations.mjs";
+import { selectTooltipPayloadSearcher } from "./selectTooltipPayloadSearcher.mjs";
+import { selectTooltipState } from "./selectTooltipState.mjs";
+import { combineTooltipPayload, selectTooltipAxis, selectTooltipAxisDomain, selectTooltipAxisTicks, selectTooltipDisplayedData } from "./tooltipSelectors.mjs";
+import { useAppSelector } from "../hooks.mjs";
+import { createSelector } from "@reduxjs/toolkit";
+import { sortBy } from "lodash-es";
+//#region src/state/selectors/selectors.ts
+function useChartName() {
+	return useAppSelector(selectChartName);
+}
+function pickTooltipEventType(_state, tooltipEventType) {
+	return tooltipEventType;
+}
+function pickTrigger(_state, _tooltipEventType, trigger) {
+	return trigger;
+}
+function pickDefaultIndex(_state, _tooltipEventType, _trigger, defaultIndex) {
+	return defaultIndex;
+}
+var selectOrderedTooltipTicks = createSelector(selectTooltipAxisTicks, (ticks) => {
+	return sortBy(ticks, (o) => o.coordinate);
+});
+var selectTooltipInteractionState = createSelector([
+	selectTooltipState,
+	pickTooltipEventType,
+	pickTrigger,
+	pickDefaultIndex
+], combineTooltipInteractionState);
+var selectActiveIndex = createSelector([
+	selectTooltipInteractionState,
+	selectTooltipDisplayedData,
+	createSelector([selectTooltipAxis], (axis) => axis?.dataKey),
+	selectTooltipAxisDomain
+], combineActiveTooltipIndex);
+function selectTooltipDataKey(state, tooltipEventType, trigger) {
+	const tooltipState = selectTooltipState(state);
+	if (tooltipEventType === "axis") {
+		if (trigger === "hover") return tooltipState.axisInteraction.hover.dataKey;
+		return tooltipState.axisInteraction.click.dataKey;
+	}
+	if (trigger === "hover") return tooltipState.itemInteraction.hover.dataKey;
+	return tooltipState.itemInteraction.click.dataKey;
+}
+var selectTooltipPayloadConfigurations = createSelector([
+	selectTooltipState,
+	pickTooltipEventType,
+	pickTrigger,
+	pickDefaultIndex
+], combineTooltipPayloadConfigurations);
+var selectCoordinateForDefaultIndex = createSelector([
+	selectChartWidth,
+	selectChartHeight,
+	selectChartLayout,
+	selectChartOffset,
+	selectTooltipAxisTicks,
+	pickDefaultIndex,
+	selectTooltipPayloadConfigurations,
+	selectTooltipPayloadSearcher
+], combineCoordinateForDefaultIndex);
+var selectActiveCoordinate = createSelector([selectTooltipInteractionState, selectCoordinateForDefaultIndex], (tooltipInteractionState, defaultIndexCoordinate) => {
+	return tooltipInteractionState.coordinate ?? defaultIndexCoordinate;
+});
+var selectActiveLabel = createSelector(selectTooltipAxisTicks, selectActiveIndex, combineActiveLabel);
+var selectTooltipPayload = createSelector([
+	selectTooltipPayloadConfigurations,
+	selectActiveIndex,
+	selectChartDataWithIndexes,
+	selectTooltipAxis,
+	selectActiveLabel,
+	selectTooltipPayloadSearcher,
+	pickTooltipEventType
+], combineTooltipPayload);
+var selectIsTooltipActive = createSelector([selectTooltipInteractionState], (tooltipInteractionState) => {
+	return {
+		isActive: tooltipInteractionState.active,
+		activeIndex: tooltipInteractionState.index
+	};
+});
+function combineActiveProps(chartEvent, layout, polarViewBox, tooltipAxisType, tooltipAxisRange, tooltipTicks, orderedTooltipTicks, offset) {
+	if (!chartEvent || !layout || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks) return;
+	const rangeObj = inRange(chartEvent.chartX, chartEvent.chartY, layout, polarViewBox, offset);
+	if (!rangeObj) return;
+	const pos = calculateTooltipPos(rangeObj, layout);
+	if (pos == null) return;
+	const activeIndex = calculateActiveTickIndex(pos, orderedTooltipTicks, tooltipTicks, tooltipAxisType, tooltipAxisRange);
+	const activeCoordinate = getActiveCoordinate(layout, tooltipTicks, activeIndex, rangeObj);
+	return {
+		activeIndex: String(activeIndex),
+		activeCoordinate
+	};
+}
+//#endregion
+export { combineActiveProps, selectActiveCoordinate, selectActiveLabel, selectCoordinateForDefaultIndex, selectIsTooltipActive, selectOrderedTooltipTicks, selectTooltipDataKey, selectTooltipPayload, useChartName };

package/dist/es/state/selectors/tooltipSelectors.mjs

@@ -0,0 +1,269 @@
+import { isCategoricalAxis } from "../../utils/validate.mjs";
+import { selectChartDataWithIndexes } from "./dataSelectors.mjs";
+import { selectChartHeight, selectChartWidth } from "./containerSelectors.mjs";
+import { selectChartOffset } from "./selectChartOffset.mjs";
+import { selectChartName, selectStackOffsetType } from "./rootPropsSelectors.mjs";
+import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse.mjs";
+import { findEntryInArray, mathSign } from "../../utils/data.mjs";
+import { selectChartLayout } from "./common.mjs";
+import { getTooltipEntry, getValueByDataKey } from "../../utils/chart.mjs";
+import { combineAppliedNumericalValuesIncludingErrorValues, combineAppliedValues, combineAreasDomain, combineAxisDomain, combineAxisDomainWithNiceTicks, combineCategoricalDomain, combineDisplayedData, combineDomainOfStackGroups, combineDotsDomain, combineDuplicateDomain, combineGraphicalItemsData, combineGraphicalItemsSettings, combineLinesDomain, combineNiceTicks, combineNumericalDomain, combineRealScaleType, combineScaleFunction, combineStackGroups, filterGraphicalNotStackedItems, filterReferenceElements, getDomainDefinition, itemAxisPredicate, mergeDomains, selectAxisRange, selectAxisSettings, selectHasBar, selectReferenceAreas, selectReferenceDots, selectReferenceLines } from "./axisSelectors.mjs";
+import { combineTooltipEventType, selectDefaultTooltipEventType, selectValidateTooltipEventTypes } from "./selectTooltipEventType.mjs";
+import { combineActiveLabel } from "./combiners/combineActiveLabel.mjs";
+import { selectTooltipSettings } from "./selectTooltipSettings.mjs";
+import { combineTooltipInteractionState } from "./combiners/combineTooltipInteractionState.mjs";
+import { combineActiveTooltipIndex } from "./combiners/combineActiveTooltipIndex.mjs";
+import { combineCoordinateForDefaultIndex } from "./combiners/combineCoordinateForDefaultIndex.mjs";
+import { combineTooltipPayloadConfigurations } from "./combiners/combineTooltipPayloadConfigurations.mjs";
+import { selectTooltipPayloadSearcher } from "./selectTooltipPayloadSearcher.mjs";
+import { selectTooltipState } from "./selectTooltipState.mjs";
+import { createSelector } from "@reduxjs/toolkit";
+//#region src/state/selectors/tooltipSelectors.ts
+function getSliced(arr, startIndex, endIndex) {
+	if (!Array.isArray(arr)) return arr;
+	if (arr && startIndex + endIndex !== 0) return arr.slice(startIndex, endIndex + 1);
+	return arr;
+}
+function selectFinalData(dataDefinedOnItem, dataDefinedOnChart) {
+	if (dataDefinedOnItem != null) return dataDefinedOnItem;
+	return dataDefinedOnChart;
+}
+function combineTooltipPayload(tooltipPayloadConfigurations, activeIndex, chartDataState, tooltipAxis, activeLabel, tooltipPayloadSearcher, tooltipEventType) {
+	if (activeIndex == null || tooltipPayloadSearcher == null) return;
+	const { chartData, computedData, dataStartIndex, dataEndIndex } = chartDataState;
+	return tooltipPayloadConfigurations.reduce((agg, { dataDefinedOnItem, settings }) => {
+		const sliced = getSliced(selectFinalData(dataDefinedOnItem, chartData), dataStartIndex, dataEndIndex);
+		const finalDataKey = settings?.dataKey ?? tooltipAxis?.dataKey;
+		const finalNameKey = settings?.nameKey;
+		let tooltipPayload;
+		if (tooltipAxis?.dataKey && !tooltipAxis?.allowDuplicatedCategory && Array.isArray(sliced) && activeLabel != null && tooltipEventType === "axis") tooltipPayload = findEntryInArray(sliced, tooltipAxis.dataKey, activeLabel);
+		if (tooltipPayload == null) tooltipPayload = tooltipPayloadSearcher(sliced, activeIndex, computedData, finalNameKey);
+		if (Array.isArray(tooltipPayload)) tooltipPayload.forEach((item) => {
+			const newSettings = {
+				...settings,
+				name: item.name,
+				unit: item.unit,
+				color: void 0,
+				fill: void 0
+			};
+			agg.push(getTooltipEntry({
+				tooltipEntrySettings: newSettings,
+				dataKey: item.dataKey,
+				payload: item.payload,
+				value: getValueByDataKey(item.payload, item.dataKey),
+				name: item.name
+			}));
+		});
+		else agg.push(getTooltipEntry({
+			tooltipEntrySettings: settings,
+			dataKey: finalDataKey,
+			payload: tooltipPayload,
+			value: getValueByDataKey(tooltipPayload, finalDataKey),
+			name: getValueByDataKey(tooltipPayload, finalNameKey) ?? settings?.name
+		}));
+		return agg;
+	}, []);
+}
+function selectTooltipAxisType(state) {
+	const layout = selectChartLayout(state);
+	if (layout === "horizontal") return "xAxis";
+	if (layout === "vertical") return "yAxis";
+	if (layout === "centric") return "angleAxis";
+	return "radiusAxis";
+}
+var selectTooltipAxisId = (state) => state.tooltip.settings.axisId;
+function selectTooltipAxis(state) {
+	return selectAxisSettings(state, selectTooltipAxisType(state), selectTooltipAxisId(state));
+}
+var selectTooltipAxisRealScaleType = createSelector([
+	selectTooltipAxis,
+	selectHasBar,
+	selectChartName
+], combineRealScaleType);
+var selectAllGraphicalItemsSettings = createSelector([
+	createSelector([(state) => state.graphicalItems.cartesianItems, (state) => state.graphicalItems.polarItems], (cartesianItems, polarItems) => [...cartesianItems, ...polarItems]),
+	selectTooltipAxis,
+	createSelector([selectTooltipAxisType, selectTooltipAxisId], itemAxisPredicate)
+], combineGraphicalItemsSettings);
+/**
+* Data for tooltip always use the data with indexes set by a Brush,
+* and never accept the isPanorama flag:
+* because Tooltip never displays inside the panorama anyway
+* so we don't need to worry what would happen there.
+*/
+var selectTooltipDisplayedData = createSelector([createSelector([selectAllGraphicalItemsSettings], combineGraphicalItemsData), selectChartDataWithIndexes], combineDisplayedData);
+var selectAllTooltipAppliedValues = createSelector([
+	selectTooltipDisplayedData,
+	selectTooltipAxis,
+	selectAllGraphicalItemsSettings
+], combineAppliedValues);
+var selectTooltipAxisDomainDefinition = createSelector([selectTooltipAxis], getDomainDefinition);
+var selectTooltipDomainOfStackGroups = createSelector([
+	createSelector([
+		selectTooltipDisplayedData,
+		selectAllGraphicalItemsSettings,
+		selectStackOffsetType
+	], combineStackGroups),
+	selectChartDataWithIndexes,
+	selectTooltipAxisType
+], combineDomainOfStackGroups);
+var selectTooltipAllAppliedNumericalValuesIncludingErrorValues = createSelector([
+	selectTooltipDisplayedData,
+	selectTooltipAxis,
+	createSelector([selectAllGraphicalItemsSettings], filterGraphicalNotStackedItems),
+	selectTooltipAxisType
+], combineAppliedNumericalValuesIncludingErrorValues);
+var selectTooltipReferenceDotsDomain = createSelector([createSelector([
+	selectReferenceDots,
+	selectTooltipAxisType,
+	selectTooltipAxisId
+], filterReferenceElements), selectTooltipAxisType], combineDotsDomain);
+var selectTooltipReferenceAreasDomain = createSelector([createSelector([
+	selectReferenceAreas,
+	selectTooltipAxisType,
+	selectTooltipAxisId
+], filterReferenceElements), selectTooltipAxisType], combineAreasDomain);
+var selectTooltipAxisDomain = createSelector([
+	selectTooltipAxis,
+	selectChartLayout,
+	selectTooltipDisplayedData,
+	selectAllTooltipAppliedValues,
+	selectStackOffsetType,
+	selectTooltipAxisType,
+	createSelector([
+		selectTooltipAxis,
+		selectTooltipAxisDomainDefinition,
+		selectTooltipDomainOfStackGroups,
+		selectTooltipAllAppliedNumericalValuesIncludingErrorValues,
+		createSelector([
+			selectTooltipReferenceDotsDomain,
+			createSelector([createSelector([
+				selectReferenceLines,
+				selectTooltipAxisType,
+				selectTooltipAxisId
+			], filterReferenceElements), selectTooltipAxisType], combineLinesDomain),
+			selectTooltipReferenceAreasDomain
+		], mergeDomains)
+	], combineNumericalDomain)
+], combineAxisDomain);
+var selectTooltipAxisDomainIncludingNiceTicks = createSelector([
+	selectTooltipAxis,
+	selectTooltipAxisDomain,
+	createSelector([
+		selectTooltipAxisDomain,
+		selectTooltipAxis,
+		selectTooltipAxisRealScaleType
+	], combineNiceTicks),
+	selectTooltipAxisType
+], combineAxisDomainWithNiceTicks);
+function selectTooltipAxisRange(state) {
+	return selectAxisRange(state, selectTooltipAxisType(state), selectTooltipAxisId(state), false);
+}
+var selectTooltipAxisRangeWithReverse = createSelector([selectTooltipAxis, selectTooltipAxisRange], combineAxisRangeWithReverse);
+var selectTooltipAxisScale = createSelector([
+	selectTooltipAxis,
+	selectTooltipAxisRealScaleType,
+	selectTooltipAxisDomainIncludingNiceTicks,
+	selectTooltipAxisRangeWithReverse
+], combineScaleFunction);
+var selectTooltipDuplicateDomain = createSelector([
+	selectChartLayout,
+	selectAllTooltipAppliedValues,
+	selectTooltipAxis,
+	selectTooltipAxisType
+], combineDuplicateDomain);
+var selectTooltipCategoricalDomain = createSelector([
+	selectChartLayout,
+	selectAllTooltipAppliedValues,
+	selectTooltipAxis,
+	selectTooltipAxisType
+], combineCategoricalDomain);
+function combineTicksOfTooltipAxis(layout, axis, realScaleType, scale, range, duplicateDomain, categoricalDomain, axisType) {
+	if (!axis) return null;
+	const { type } = axis;
+	const isCategorical = isCategoricalAxis(layout, axisType);
+	if (!scale) return null;
+	const offsetForBand = realScaleType === "scaleBand" && scale.bandwidth ? scale.bandwidth() / 2 : 2;
+	let offset = type === "category" && scale.bandwidth ? scale.bandwidth() / offsetForBand : 0;
+	offset = axisType === "angleAxis" && range != null && range?.length >= 2 ? mathSign(range[0] - range[1]) * 2 * offset : offset;
+	if (isCategorical && categoricalDomain) return categoricalDomain.map((entry, index) => ({
+		coordinate: scale(entry) + offset,
+		value: entry,
+		index,
+		offset
+	}));
+	return scale.domain().map((entry, index) => ({
+		coordinate: scale(entry) + offset,
+		value: duplicateDomain ? duplicateDomain[entry] : entry,
+		index,
+		offset
+	}));
+}
+var selectTooltipAxisTicks = createSelector([
+	selectChartLayout,
+	selectTooltipAxis,
+	selectTooltipAxisRealScaleType,
+	selectTooltipAxisScale,
+	selectTooltipAxisRange,
+	selectTooltipDuplicateDomain,
+	selectTooltipCategoricalDomain,
+	selectTooltipAxisType
+], combineTicksOfTooltipAxis);
+var selectTooltipEventType = createSelector([
+	selectDefaultTooltipEventType,
+	selectValidateTooltipEventTypes,
+	selectTooltipSettings
+], (defaultTooltipEventType, validateTooltipEventType, settings) => combineTooltipEventType(settings.shared, defaultTooltipEventType, validateTooltipEventType));
+var selectTooltipTrigger = (state) => state.tooltip.settings.trigger;
+var selectDefaultIndex = (state) => state.tooltip.settings.defaultIndex;
+var selectTooltipInteractionState = createSelector([
+	selectTooltipState,
+	selectTooltipEventType,
+	selectTooltipTrigger,
+	selectDefaultIndex
+], combineTooltipInteractionState);
+var selectActiveTooltipIndex = createSelector([
+	selectTooltipInteractionState,
+	selectTooltipDisplayedData,
+	createSelector([selectTooltipAxis], (axis) => axis?.dataKey),
+	selectTooltipAxisDomain
+], combineActiveTooltipIndex);
+var selectActiveLabel = createSelector([selectTooltipAxisTicks, selectActiveTooltipIndex], combineActiveLabel);
+var selectActiveTooltipDataKey = createSelector([selectTooltipInteractionState], (tooltipInteraction) => {
+	if (!tooltipInteraction) return;
+	return tooltipInteraction.dataKey;
+});
+var selectTooltipPayloadConfigurations = createSelector([
+	selectTooltipState,
+	selectTooltipEventType,
+	selectTooltipTrigger,
+	selectDefaultIndex
+], combineTooltipPayloadConfigurations);
+var selectActiveTooltipCoordinate = createSelector([selectTooltipInteractionState, createSelector([
+	selectChartWidth,
+	selectChartHeight,
+	selectChartLayout,
+	selectChartOffset,
+	selectTooltipAxisTicks,
+	selectDefaultIndex,
+	selectTooltipPayloadConfigurations,
+	selectTooltipPayloadSearcher
+], combineCoordinateForDefaultIndex)], (tooltipInteractionState, defaultIndexCoordinate) => {
+	return tooltipInteractionState.coordinate ?? defaultIndexCoordinate;
+});
+var selectIsTooltipActive = createSelector([selectTooltipInteractionState], (tooltipInteractionState) => tooltipInteractionState.active);
+createSelector([createSelector([
+	selectTooltipPayloadConfigurations,
+	selectActiveTooltipIndex,
+	selectChartDataWithIndexes,
+	selectTooltipAxis,
+	selectActiveLabel,
+	selectTooltipPayloadSearcher,
+	selectTooltipEventType
+], combineTooltipPayload)], (payload) => {
+	if (payload == null) return;
+	const dataPoints = payload.map((p) => p.payload).filter((p) => p != null);
+	return Array.from(new Set(dataPoints));
+});
+//#endregion
+export { combineTooltipPayload, selectActiveLabel, selectActiveTooltipCoordinate, selectActiveTooltipDataKey, selectActiveTooltipIndex, selectIsTooltipActive, selectTooltipAxis, selectTooltipAxisDomain, selectTooltipAxisRangeWithReverse, selectTooltipAxisScale, selectTooltipAxisTicks, selectTooltipAxisType, selectTooltipDisplayedData };

package/dist/es/state/selectors/touchSelectors.mjs

@@ -0,0 +1,19 @@
+import { selectTooltipPayloadSearcher } from "./selectTooltipPayloadSearcher.mjs";
+import { selectTooltipState } from "./selectTooltipState.mjs";
+import { createSelector } from "@reduxjs/toolkit";
+var selectTooltipCoordinate = createSelector([
+	createSelector([selectTooltipState], (tooltipState) => tooltipState.tooltipItemPayloads),
+	selectTooltipPayloadSearcher,
+	(_state, tooltipIndex, _dataKey) => tooltipIndex,
+	(_state, _tooltipIndex, dataKey) => dataKey
+], (allTooltipConfigurations, tooltipPayloadSearcher, tooltipIndex, dataKey) => {
+	const mostRelevantTooltipConfiguration = allTooltipConfigurations.find((tooltipConfiguration) => {
+		return tooltipConfiguration.settings.dataKey === dataKey;
+	});
+	if (mostRelevantTooltipConfiguration == null) return;
+	const { positions } = mostRelevantTooltipConfiguration;
+	if (positions == null) return;
+	return tooltipPayloadSearcher?.(positions, tooltipIndex);
+});
+//#endregion
+export { selectTooltipCoordinate };

package/dist/es/state/store.mjs

@@ -0,0 +1,55 @@
+import { tooltipReducer } from "./tooltipSlice.mjs";
+import { graphicalItemsReducer } from "./graphicalItemsSlice.mjs";
+import { legendReducer } from "./legendSlice.mjs";
+import { cartesianAxisReducer } from "./cartesianAxisSlice.mjs";
+import { referenceElementsReducer } from "./referenceElementsSlice.mjs";
+import { optionsReducer } from "./optionsSlice.mjs";
+import { chartDataReducer } from "./chartDataSlice.mjs";
+import { chartLayoutReducer } from "./layoutSlice.mjs";
+import { mouseClickMiddleware, mouseMoveMiddleware } from "./mouseEventsMiddleware.mjs";
+import { reduxDevtoolsJsonStringifyReplacer } from "./reduxDevtoolsJsonStringifyReplacer.mjs";
+import { brushReducer } from "./brushSlice.mjs";
+import { rootPropsReducer } from "./rootPropsSlice.mjs";
+import { polarAxisReducer } from "./polarAxisSlice.mjs";
+import { polarOptionsReducer } from "./polarOptionsSlice.mjs";
+import { keyboardEventsMiddleware } from "./keyboardEventsMiddleware.mjs";
+import { externalEventsMiddleware } from "./externalEventsMiddleware.mjs";
+import { touchEventMiddleware } from "./touchEventsMiddleware.mjs";
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+//#region src/state/store.ts
+var rootReducer = combineReducers({
+	brush: brushReducer,
+	cartesianAxis: cartesianAxisReducer,
+	chartData: chartDataReducer,
+	graphicalItems: graphicalItemsReducer,
+	layout: chartLayoutReducer,
+	legend: legendReducer,
+	options: optionsReducer,
+	polarAxis: polarAxisReducer,
+	polarOptions: polarOptionsReducer,
+	referenceElements: referenceElementsReducer,
+	rootProps: rootPropsReducer,
+	tooltip: tooltipReducer
+});
+function createRechartsStore(preloadedState, chartName = "Chart") {
+	return configureStore({
+		reducer: rootReducer,
+		preloadedState,
+		middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+			serializableCheck: false,
+			immutableCheck: false
+		}).concat([
+			mouseClickMiddleware.middleware,
+			mouseMoveMiddleware.middleware,
+			keyboardEventsMiddleware.middleware,
+			externalEventsMiddleware,
+			touchEventMiddleware.middleware
+		]),
+		devTools: {
+			serialize: { replacer: reduxDevtoolsJsonStringifyReplacer },
+			name: `v-charts-${chartName}`
+		}
+	});
+}
+//#endregion
+export { createRechartsStore };

package/dist/es/state/tooltipSlice.mjs

@@ -0,0 +1,102 @@
+import { createSlice, current } from "@reduxjs/toolkit";
+import { castDraft } from "immer";
+//#region src/state/tooltipSlice.ts
+var noInteraction = {
+	active: false,
+	index: null,
+	dataKey: void 0,
+	coordinate: void 0
+};
+var tooltipSlice = createSlice({
+	name: "tooltip",
+	initialState: {
+		itemInteraction: {
+			click: noInteraction,
+			hover: noInteraction
+		},
+		axisInteraction: {
+			click: noInteraction,
+			hover: noInteraction
+		},
+		keyboardInteraction: noInteraction,
+		syncInteraction: {
+			active: false,
+			index: null,
+			dataKey: void 0,
+			label: void 0,
+			coordinate: void 0
+		},
+		tooltipItemPayloads: [],
+		settings: {
+			shared: void 0,
+			trigger: "hover",
+			axisId: 0,
+			active: false,
+			defaultIndex: void 0
+		}
+	},
+	reducers: {
+		addTooltipEntrySettings(state, action) {
+			state.tooltipItemPayloads.push(castDraft(action.payload));
+		},
+		removeTooltipEntrySettings(state, action) {
+			const index = current(state).tooltipItemPayloads.indexOf(castDraft(action.payload));
+			if (index > -1) state.tooltipItemPayloads.splice(index, 1);
+		},
+		setTooltipSettingsState(state, action) {
+			state.settings = action.payload;
+		},
+		setActiveMouseOverItemIndex(state, action) {
+			state.syncInteraction.active = false;
+			state.keyboardInteraction.active = false;
+			state.itemInteraction.hover.active = true;
+			state.itemInteraction.hover.index = action.payload.activeIndex;
+			state.itemInteraction.hover.dataKey = action.payload.activeDataKey;
+			state.itemInteraction.hover.coordinate = action.payload.activeCoordinate;
+		},
+		mouseLeaveChart(state) {
+			state.itemInteraction.hover.active = false;
+			state.axisInteraction.hover.active = false;
+		},
+		mouseLeaveItem(state) {
+			state.itemInteraction.hover.active = false;
+		},
+		setActiveClickItemIndex(state, action) {
+			state.syncInteraction.active = false;
+			state.itemInteraction.click.active = true;
+			state.keyboardInteraction.active = false;
+			state.itemInteraction.click.index = action.payload.activeIndex;
+			state.itemInteraction.click.dataKey = action.payload.activeDataKey;
+			state.itemInteraction.click.coordinate = action.payload.activeCoordinate;
+		},
+		setMouseOverAxisIndex(state, action) {
+			state.syncInteraction.active = false;
+			state.axisInteraction.hover.active = true;
+			state.keyboardInteraction.active = false;
+			state.axisInteraction.hover.index = action.payload.activeIndex;
+			state.axisInteraction.hover.dataKey = action.payload.activeDataKey;
+			state.axisInteraction.hover.coordinate = action.payload.activeCoordinate;
+		},
+		setMouseClickAxisIndex(state, action) {
+			state.syncInteraction.active = false;
+			state.keyboardInteraction.active = false;
+			state.axisInteraction.click.active = true;
+			state.axisInteraction.click.index = action.payload.activeIndex;
+			state.axisInteraction.click.dataKey = action.payload.activeDataKey;
+			state.axisInteraction.click.coordinate = action.payload.activeCoordinate;
+		},
+		setSyncInteraction(state, action) {
+			state.syncInteraction = action.payload;
+		},
+		setKeyboardInteraction(state, action) {
+			state.keyboardInteraction.active = action.payload.active;
+			state.keyboardInteraction.index = action.payload.activeIndex;
+			state.keyboardInteraction.coordinate = action.payload.activeCoordinate;
+			state.keyboardInteraction.dataKey = action.payload.activeDataKey;
+		}
+	}
+});
+var { addTooltipEntrySettings, removeTooltipEntrySettings, setTooltipSettingsState, setActiveMouseOverItemIndex, mouseLeaveItem, mouseLeaveChart, setActiveClickItemIndex, setMouseOverAxisIndex, setMouseClickAxisIndex, setSyncInteraction, setKeyboardInteraction } = tooltipSlice.actions;
+var tooltipReducer = tooltipSlice.reducer;
+//#endregion
+export { addTooltipEntrySettings, mouseLeaveChart, mouseLeaveItem, noInteraction, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex, setKeyboardInteraction, setMouseClickAxisIndex, setMouseOverAxisIndex, setSyncInteraction, setTooltipSettingsState, tooltipReducer };

package/dist/es/state/touchEventsMiddleware.mjs

@@ -0,0 +1,44 @@
+import { getChartPointer } from "../utils/chart.mjs";
+import { selectTooltipEventType } from "./selectors/selectTooltipEventType.mjs";
+import { setActiveMouseOverItemIndex, setMouseOverAxisIndex } from "./tooltipSlice.mjs";
+import { DATA_ITEM_DATAKEY_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
+import { selectActivePropsFromChartPointer } from "./selectors/selectActivePropsFromChartPointer.mjs";
+import { selectTooltipCoordinate } from "./selectors/touchSelectors.mjs";
+import { createAction, createListenerMiddleware } from "@reduxjs/toolkit";
+//#region src/state/touchEventsMiddleware.ts
+var touchEventAction = createAction("touchMove");
+var touchEventMiddleware = createListenerMiddleware();
+touchEventMiddleware.startListening({
+	actionCreator: touchEventAction,
+	effect: (action, listenerApi) => {
+		const touchEvent = action.payload;
+		const state = listenerApi.getState();
+		const tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
+		if (tooltipEventType === "axis") {
+			const activeProps = selectActivePropsFromChartPointer(state, getChartPointer({
+				clientX: touchEvent.touches[0].clientX,
+				clientY: touchEvent.touches[0].clientY,
+				currentTarget: touchEvent.target
+			}));
+			if (activeProps?.activeIndex != null) listenerApi.dispatch(setMouseOverAxisIndex({
+				activeIndex: activeProps.activeIndex,
+				activeDataKey: void 0,
+				activeCoordinate: activeProps.activeCoordinate
+			}));
+		} else if (tooltipEventType === "item") {
+			const touch = touchEvent.touches[0];
+			const target = document.elementFromPoint(touch.clientX, touch.clientY);
+			if (!target || !target.getAttribute) return;
+			const itemIndex = target.getAttribute(DATA_ITEM_INDEX_ATTRIBUTE_NAME);
+			const dataKey = target.getAttribute(DATA_ITEM_DATAKEY_ATTRIBUTE_NAME);
+			const coordinate = selectTooltipCoordinate(listenerApi.getState(), itemIndex, dataKey);
+			listenerApi.dispatch(setActiveMouseOverItemIndex({
+				activeDataKey: dataKey,
+				activeIndex: itemIndex,
+				activeCoordinate: coordinate
+			}));
+		}
+	}
+});
+//#endregion
+export { touchEventAction, touchEventMiddleware };

package/dist/es/state/utils/useReportScale.mjs

@@ -0,0 +1,19 @@
+import { isWellBehavedNumber } from "../../utils/validate.mjs";
+import { selectContainerScale } from "../selectors/containerSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../hooks.mjs";
+import { setScale } from "../layoutSlice.mjs";
+import { ref, watch } from "vue";
+//#region src/state/utils/useReportScale.ts
+function useReportScale() {
+	const dispatch = useAppDispatch();
+	const domRef = ref(null);
+	const scale = useAppSelector(selectContainerScale);
+	watch([domRef, scale], () => {
+		if (domRef.value == null) return;
+		const newScale = domRef.value.getBoundingClientRect().width / domRef.value.offsetWidth;
+		if (isWellBehavedNumber(newScale) && newScale !== scale.value) dispatch(setScale(newScale));
+	});
+	return domRef;
+}
+//#endregion
+export { useReportScale };

package/dist/es/synchronisation/syncSelectors.mjs

@@ -0,0 +1,6 @@
+//#region src/synchronisation/syncSelectors.ts
+function selectSynchronisedTooltipState(state) {
+	return state.tooltip.syncInteraction;
+}
+//#endregion
+export { selectSynchronisedTooltipState };

package/dist/es/synchronisation/useChartSynchronisation.mjs

@@ -0,0 +1,38 @@
+import { selectEventEmitter, selectSyncId } from "../state/selectors/rootPropsSelectors.mjs";
+import { setSyncInteraction } from "../state/tooltipSlice.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
+import { selectTooltipDataKey } from "../state/selectors/selectors.mjs";
+import { TOOLTIP_SYNC_EVENT, eventCenter } from "../utils/events.mjs";
+import { selectSynchronisedTooltipState } from "./syncSelectors.mjs";
+import { computed, watchEffect } from "vue";
+//#region src/synchronisation/useChartSynchronisation.tsx
+/**
+* Emits tooltip sync events to other charts (Vue version).
+* No events if syncId is undefined.
+* Ignores syncMethod (handled on receiver).
+*
+* @param tooltipParams computed object containing tooltip parameters
+* @returns void
+*/
+function useTooltipChartSynchronisation({ tooltipEventType, trigger, activeCoordinate, activeLabel, activeIndex, isTooltipActive }) {
+	const activeDataKey = useAppSelector((state) => selectTooltipDataKey(state, tooltipEventType.value, trigger));
+	const eventEmitterSymbol = useAppSelector(selectEventEmitter);
+	const syncId = useAppSelector(selectSyncId);
+	const tooltipState = useAppSelector(selectSynchronisedTooltipState);
+	const isReceivingSynchronisation = computed(() => tooltipState.value?.active);
+	watchEffect(() => {
+		if (isReceivingSynchronisation.value) return;
+		if (syncId.value == null) return;
+		if (eventEmitterSymbol.value == null) return;
+		const syncAction = setSyncInteraction({
+			active: isTooltipActive.value,
+			coordinate: activeCoordinate.value,
+			dataKey: activeDataKey.value,
+			index: activeIndex.value,
+			label: typeof activeLabel.value === "number" ? String(activeLabel.value) : activeLabel.value
+		});
+		eventCenter.emit(TOOLTIP_SYNC_EVENT, syncId.value, syncAction, eventEmitterSymbol.value);
+	});
+}
+//#endregion
+export { useTooltipChartSynchronisation };