vccs 0.5.0 → 1.0.0-beta.1

package/dist/es/state/externalEventsMiddleware.mjs

@@ -1,30 +0,0 @@
-import { selectActiveLabel, selectActiveTooltipCoordinate, selectActiveTooltipDataKey, selectActiveTooltipIndex, selectIsTooltipActive } from "./selectors/tooltipSelectors.mjs";
-import { createAction } from "@reduxjs/toolkit";
-//#region src/state/externalEventsMiddleware.ts
-var externalEventAction = createAction("externalEvent");
-/**
-* Calls external event handlers (onMouseMove, onClick, etc.) synchronously within the dispatch
-* call stack, while the native event's `currentTarget` is still valid.
-*
-* Using createListenerMiddleware would defer the call to a microtask, at which point the browser
-* has already cleared `e.currentTarget` per the DOM spec, breaking coordinate-based handlers like
-* DraggablePie that rely on `getRelativeCoordinate(e)`.
-*/
-var externalEventsMiddleware = (api) => (next) => (action) => {
-	const result = next(action);
-	if (externalEventAction.match(action) && action.payload.handler != null) {
-		const state = api.getState();
-		const nextState = {
-			activeCoordinate: selectActiveTooltipCoordinate(state),
-			activeDataKey: selectActiveTooltipDataKey(state),
-			activeIndex: selectActiveTooltipIndex(state),
-			activeLabel: selectActiveLabel(state),
-			activeTooltipIndex: selectActiveTooltipIndex(state),
-			isTooltipActive: selectIsTooltipActive(state)
-		};
-		action.payload.handler(nextState, action.payload.event);
-	}
-	return result;
-};
-//#endregion
-export { externalEventAction, externalEventsMiddleware };

package/dist/es/state/graphicalItemsSlice.mjs

@@ -1,47 +0,0 @@
-import { createSlice, current } from "@reduxjs/toolkit";
-import { castDraft } from "immer";
-//#region src/state/graphicalItemsSlice.ts
-var graphicalItemsSlice = createSlice({
-	name: "graphicalItems",
-	initialState: {
-		countOfBars: 0,
-		cartesianItems: [],
-		polarItems: []
-	},
-	reducers: {
-		addBar(state) {
-			state.countOfBars += 1;
-		},
-		removeBar(state) {
-			state.countOfBars -= 1;
-		},
-		addCartesianGraphicalItem(state, action) {
-			state.cartesianItems.push(castDraft(action.payload));
-		},
-		replaceCartesianGraphicalItem(state, action) {
-			const { prev, next } = action.payload;
-			const index = current(state).cartesianItems.indexOf(castDraft(prev));
-			if (index > -1) state.cartesianItems[index] = castDraft(next);
-		},
-		removeCartesianGraphicalItem(state, action) {
-			const index = current(state).cartesianItems.indexOf(castDraft(action.payload));
-			if (index > -1) state.cartesianItems.splice(index, 1);
-		},
-		addPolarGraphicalItem(state, action) {
-			state.polarItems.push(castDraft(action.payload));
-		},
-		removePolarGraphicalItem(state, action) {
-			const index = current(state).polarItems.indexOf(castDraft(action.payload));
-			if (index > -1) state.polarItems.splice(index, 1);
-		},
-		replacePolarGraphicalItem(state, action) {
-			const { prev, next } = action.payload;
-			const index = current(state).polarItems.indexOf(castDraft(prev));
-			if (index > -1) state.polarItems[index] = castDraft(next);
-		}
-	}
-});
-var { addBar, removeBar, addCartesianGraphicalItem, removeCartesianGraphicalItem, addPolarGraphicalItem, replaceCartesianGraphicalItem, removePolarGraphicalItem, replacePolarGraphicalItem } = graphicalItemsSlice.actions;
-var graphicalItemsReducer = graphicalItemsSlice.reducer;
-//#endregion
-export { addCartesianGraphicalItem, addPolarGraphicalItem, graphicalItemsReducer, removeCartesianGraphicalItem, removePolarGraphicalItem, replaceCartesianGraphicalItem, replacePolarGraphicalItem };

package/dist/es/state/hooks.mjs

@@ -1,26 +0,0 @@
-import { selectActiveTooltipDataPoints } from "./selectors/tooltipSelectors.mjs";
-import { useDispatch, useSelector } from "@reduxjs/vue-redux";
-//#region src/state/hooks.ts
-var useAppDispatch = useDispatch.withTypes();
-var useAppSelector = useSelector.withTypes();
-/**
-* Returns the currently active data points being displayed in the Tooltip.
-* Active means that it is currently visible; this hook will return `undefined` if there is no current interaction.
-*
-* This follows the `<Tooltip />` props, if the Tooltip element is present in the chart.
-* If there is no `<Tooltip />` then this hook will follow the default Tooltip props.
-*
-* Data point is whatever you pass as an input to the chart using the `data={}` prop.
-*
-* This returns an array because a chart can have multiple graphical items in it (multiple Lines for example)
-* and tooltip with `shared={true}` will display all items at the same time.
-*
-* Returns undefined when used outside a chart context.
-*
-* @returns Data points that are currently visible in a Tooltip
-*/
-function useActiveTooltipDataPoints() {
-	return useAppSelector(selectActiveTooltipDataPoints);
-}
-//#endregion
-export { useActiveTooltipDataPoints, useAppDispatch, useAppSelector };

package/dist/es/state/keyboardEventsMiddleware.mjs

@@ -1,63 +0,0 @@
-import { selectChartDirection } from "./selectors/axisSelectors.mjs";
-import { setKeyboardInteraction } from "./tooltipSlice.mjs";
-import { combineActiveTooltipIndex } from "./selectors/combiners/combineActiveTooltipIndex.mjs";
-import { selectTooltipAxisTicks, selectTooltipDisplayedData } from "./selectors/tooltipSelectors.mjs";
-import { selectCoordinateForDefaultIndex } from "./selectors/selectors.mjs";
-import { createAction, createListenerMiddleware } from "@reduxjs/toolkit";
-//#region src/state/keyboardEventsMiddleware.ts
-var keyDownAction = createAction("keyDown");
-var focusAction = createAction("focus");
-var keyboardEventsMiddleware = createListenerMiddleware();
-keyboardEventsMiddleware.startListening({
-	actionCreator: keyDownAction,
-	effect: (action, listenerApi) => {
-		const state = listenerApi.getState();
-		if (!(state.rootProps.accessibilityLayer !== false)) return;
-		const { keyboardInteraction } = state.tooltip;
-		const key = action.payload;
-		if (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "Enter") return;
-		const currentIndex = Number(combineActiveTooltipIndex(keyboardInteraction, selectTooltipDisplayedData(state)));
-		const tooltipTicks = selectTooltipAxisTicks(state);
-		if (key === "Enter") {
-			const coordinate = selectCoordinateForDefaultIndex(state, "axis", "hover", String(keyboardInteraction.index));
-			listenerApi.dispatch(setKeyboardInteraction({
-				active: !keyboardInteraction.active,
-				activeIndex: keyboardInteraction.index,
-				activeDataKey: keyboardInteraction.dataKey,
-				activeCoordinate: coordinate
-			}));
-			return;
-		}
-		const directionMultiplier = selectChartDirection(state) === "left-to-right" ? 1 : -1;
-		const nextIndex = currentIndex + (key === "ArrowRight" ? 1 : -1) * directionMultiplier;
-		if (nextIndex >= tooltipTicks.length || nextIndex < 0) return;
-		const coordinate = selectCoordinateForDefaultIndex(state, "axis", "hover", String(nextIndex));
-		listenerApi.dispatch(setKeyboardInteraction({
-			active: true,
-			activeIndex: nextIndex.toString(),
-			activeDataKey: void 0,
-			activeCoordinate: coordinate
-		}));
-	}
-});
-keyboardEventsMiddleware.startListening({
-	actionCreator: focusAction,
-	effect: (_, listenerApi) => {
-		const state = listenerApi.getState();
-		if (!(state.rootProps.accessibilityLayer !== false)) return;
-		const { keyboardInteraction } = state.tooltip;
-		if (keyboardInteraction.active) return;
-		if (keyboardInteraction.index == null) {
-			const nextIndex = "0";
-			const coordinate = selectCoordinateForDefaultIndex(state, "axis", "hover", String(nextIndex));
-			listenerApi.dispatch(setKeyboardInteraction({
-				activeDataKey: void 0,
-				active: true,
-				activeIndex: nextIndex,
-				activeCoordinate: coordinate
-			}));
-		}
-	}
-});
-//#endregion
-export { focusAction, keyDownAction, keyboardEventsMiddleware };

package/dist/es/state/layoutSlice.mjs

@@ -1,39 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-//#region src/state/layoutSlice.ts
-var chartLayoutSlice = createSlice({
-	name: "chartLayout",
-	initialState: {
-		layoutType: "horizontal",
-		width: 0,
-		height: 0,
-		margin: {
-			top: 5,
-			right: 5,
-			bottom: 5,
-			left: 5
-		},
-		scale: 1
-	},
-	reducers: {
-		setLayout(state, action) {
-			state.layoutType = action.payload;
-		},
-		setChartSize(state, action) {
-			state.width = action.payload.width;
-			state.height = action.payload.height;
-		},
-		setMargin(state, action) {
-			state.margin.top = action.payload.top;
-			state.margin.right = action.payload.right;
-			state.margin.bottom = action.payload.bottom;
-			state.margin.left = action.payload.left;
-		},
-		setScale(state, action) {
-			state.scale = action.payload;
-		}
-	}
-});
-var { setMargin, setLayout, setChartSize, setScale } = chartLayoutSlice.actions;
-var chartLayoutReducer = chartLayoutSlice.reducer;
-//#endregion
-export { chartLayoutReducer, setChartSize, setLayout, setMargin, setScale };

package/dist/es/state/legendSlice.mjs

@@ -1,40 +0,0 @@
-import { createSlice, current } from "@reduxjs/toolkit";
-import { castDraft } from "immer";
-//#region src/state/legendSlice.ts
-var legendSlice = createSlice({
-	name: "legend",
-	initialState: {
-		settings: {
-			layout: "horizontal",
-			align: "center",
-			verticalAlign: "middle"
-		},
-		size: {
-			width: 0,
-			height: 0
-		},
-		payload: []
-	},
-	reducers: {
-		setLegendSize(state, action) {
-			state.size.width = action.payload.width;
-			state.size.height = action.payload.height;
-		},
-		setLegendSettings(state, action) {
-			state.settings.align = action.payload.align;
-			state.settings.layout = action.payload.layout;
-			state.settings.verticalAlign = action.payload.verticalAlign;
-		},
-		addLegendPayload(state, action) {
-			state.payload.push(castDraft(action.payload));
-		},
-		removeLegendPayload(state, action) {
-			const index = current(state).payload.indexOf(castDraft(action.payload));
-			if (index > -1) state.payload.splice(index, 1);
-		}
-	}
-});
-var { setLegendSize, setLegendSettings, addLegendPayload, removeLegendPayload } = legendSlice.actions;
-var legendReducer = legendSlice.reducer;
-//#endregion
-export { addLegendPayload, legendReducer, removeLegendPayload, setLegendSettings, setLegendSize };

package/dist/es/state/mouseEventsMiddleware.mjs

@@ -1,41 +0,0 @@
-import { selectTooltipEventType } from "./selectors/selectTooltipEventType.mjs";
-import { mouseLeaveChart, setMouseClickAxisIndex, setMouseOverAxisIndex } from "./tooltipSlice.mjs";
-import { selectActivePropsFromChartPointer } from "./selectors/selectActivePropsFromChartPointer.mjs";
-import { createAction, createListenerMiddleware } from "@reduxjs/toolkit";
-//#region src/state/mouseEventsMiddleware.ts
-var mouseClickAction = createAction("mouseClick");
-var mouseClickMiddleware = createListenerMiddleware();
-mouseClickMiddleware.startListening({
-	actionCreator: mouseClickAction,
-	effect: (action, listenerApi) => {
-		const chartPointer = action.payload;
-		const state = listenerApi.getState();
-		if (selectTooltipEventType(state, state.tooltip.settings.shared) === "axis") {
-			const activeProps = selectActivePropsFromChartPointer(state, chartPointer);
-			if (activeProps?.activeIndex != null) listenerApi.dispatch(setMouseClickAxisIndex({
-				activeIndex: activeProps.activeIndex,
-				activeDataKey: void 0,
-				activeCoordinate: activeProps.activeCoordinate
-			}));
-		}
-	}
-});
-var mouseMoveAction = createAction("mouseMove");
-var mouseMoveMiddleware = createListenerMiddleware();
-mouseMoveMiddleware.startListening({
-	actionCreator: mouseMoveAction,
-	effect: (action, listenerApi) => {
-		const chartPointer = action.payload;
-		const state = listenerApi.getState();
-		const tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
-		const activeProps = selectActivePropsFromChartPointer(state, chartPointer);
-		if (tooltipEventType === "axis") if (activeProps?.activeIndex != null) listenerApi.dispatch(setMouseOverAxisIndex({
-			activeIndex: activeProps.activeIndex,
-			activeDataKey: void 0,
-			activeCoordinate: activeProps.activeCoordinate
-		}));
-		else listenerApi.dispatch(mouseLeaveChart());
-	}
-});
-//#endregion
-export { mouseClickAction, mouseClickMiddleware, mouseMoveAction, mouseMoveMiddleware };

package/dist/es/state/optionsSlice.mjs

@@ -1,25 +0,0 @@
-import { isNan } from "../utils/validate.mjs";
-import { createSlice } from "@reduxjs/toolkit";
-//#region src/state/optionsSlice.ts
-function arrayTooltipSearcher(data, strIndex) {
-	if (!strIndex) return void 0;
-	const numIndex = Number.parseInt(strIndex, 10);
-	if (isNan(numIndex)) return;
-	return data?.[numIndex];
-}
-var optionsSlice = createSlice({
-	name: "options",
-	initialState: {
-		chartName: "",
-		tooltipPayloadSearcher: void 0,
-		eventEmitter: void 0,
-		defaultTooltipEventType: "axis"
-	},
-	reducers: { createEventEmitter: (state) => {
-		if (state.eventEmitter == null) state.eventEmitter = Symbol("rechartsEventEmitter");
-	} }
-});
-var optionsReducer = optionsSlice.reducer;
-var { createEventEmitter } = optionsSlice.actions;
-//#endregion
-export { arrayTooltipSearcher, createEventEmitter, optionsReducer };

package/dist/es/state/polarAxisSlice.mjs

@@ -1,28 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { castDraft } from "immer";
-//#region src/state/polarAxisSlice.ts
-var polarAxisSlice = createSlice({
-	name: "polarAxis",
-	initialState: {
-		radiusAxis: {},
-		angleAxis: {}
-	},
-	reducers: {
-		addRadiusAxis(state, action) {
-			state.radiusAxis[action.payload.id] = castDraft(action.payload);
-		},
-		removeRadiusAxis(state, action) {
-			delete state.radiusAxis[action.payload.id];
-		},
-		addAngleAxis(state, action) {
-			state.angleAxis[action.payload.id] = castDraft(action.payload);
-		},
-		removeAngleAxis(state, action) {
-			delete state.angleAxis[action.payload.id];
-		}
-	}
-});
-var { addRadiusAxis, removeRadiusAxis, addAngleAxis, removeAngleAxis } = polarAxisSlice.actions;
-var polarAxisReducer = polarAxisSlice.reducer;
-//#endregion
-export { addAngleAxis, addRadiusAxis, polarAxisReducer, removeAngleAxis, removeRadiusAxis };

package/dist/es/state/polarOptionsSlice.mjs

@@ -1,13 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-//#region src/state/polarOptionsSlice.ts
-var polarOptionsSlice = createSlice({
-	name: "polarOptions",
-	initialState: null,
-	reducers: { updatePolarOptions(_, action) {
-		return action.payload;
-	} }
-});
-var { updatePolarOptions } = polarOptionsSlice.actions;
-var polarOptionsReducer = polarOptionsSlice.reducer;
-//#endregion
-export { polarOptionsReducer, updatePolarOptions };

package/dist/es/state/reduxDevtoolsJsonStringifyReplacer.mjs

@@ -1,8 +0,0 @@
-//#region src/state/reduxDevtoolsJsonStringifyReplacer.ts
-function reduxDevtoolsJsonStringifyReplacer(_key, value) {
-	if (value instanceof HTMLElement) return `HTMLElement <${value.tagName} class="${value.className}">`;
-	if (value === window) return "global.window";
-	return value;
-}
-//#endregion
-export { reduxDevtoolsJsonStringifyReplacer };

package/dist/es/state/referenceElementsSlice.mjs

@@ -1,36 +0,0 @@
-import { createSlice, current } from "@reduxjs/toolkit";
-var referenceElementsSlice = createSlice({
-	name: "referenceElements",
-	initialState: {
-		dots: [],
-		areas: [],
-		lines: []
-	},
-	reducers: {
-		addDot: (state, action) => {
-			state.dots.push(action.payload);
-		},
-		removeDot: (state, action) => {
-			const index = current(state).dots.findIndex((dot) => dot === action.payload);
-			if (index !== -1) state.dots.splice(index, 1);
-		},
-		addArea: (state, action) => {
-			state.areas.push(action.payload);
-		},
-		removeArea: (state, action) => {
-			const index = current(state).areas.findIndex((area) => area === action.payload);
-			if (index !== -1) state.areas.splice(index, 1);
-		},
-		addLine: (state, action) => {
-			state.lines.push(action.payload);
-		},
-		removeLine: (state, action) => {
-			const index = current(state).lines.findIndex((line) => line === action.payload);
-			if (index !== -1) state.lines.splice(index, 1);
-		}
-	}
-});
-var { addDot, removeDot, addArea, removeArea, addLine, removeLine } = referenceElementsSlice.actions;
-var referenceElementsReducer = referenceElementsSlice.reducer;
-//#endregion
-export { addArea, addDot, addLine, referenceElementsReducer, removeArea, removeDot, removeLine };

package/dist/es/state/rootPropsSlice.mjs

@@ -1,32 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-//#region src/state/rootPropsSlice.ts
-var initialState = {
-	accessibilityLayer: true,
-	barCategoryGap: "10%",
-	barGap: 4,
-	barSize: void 0,
-	class: void 0,
-	maxBarSize: void 0,
-	stackOffset: "none",
-	syncId: void 0,
-	syncMethod: "index"
-};
-var rootPropsSlice = createSlice({
-	name: "rootProps",
-	initialState,
-	reducers: { updateOptions: (state, action) => {
-		state.accessibilityLayer = action.payload.accessibilityLayer;
-		state.barCategoryGap = action.payload.barCategoryGap;
-		state.barGap = action.payload.barGap ?? initialState.barGap;
-		state.barSize = action.payload.barSize;
-		state.maxBarSize = action.payload.maxBarSize;
-		state.stackOffset = action.payload.stackOffset;
-		state.syncId = action.payload.syncId;
-		state.syncMethod = action.payload.syncMethod;
-		state.class = action.payload.class;
-	} }
-});
-var rootPropsReducer = rootPropsSlice.reducer;
-var { updateOptions } = rootPropsSlice.actions;
-//#endregion
-export { rootPropsReducer, updateOptions };

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

@@ -1,77 +0,0 @@
-import { isCategoricalAxis } from "../../utils/validate.mjs";
-import { selectChartDataWithIndexesIfNotInPanorama } from "./dataSelectors.mjs";
-import { selectChartLayout } from "./common.mjs";
-import { getBandSizeOfAxis, getNormalizedStackId } from "../../utils/chart.mjs";
-import { selectAxisWithScale, selectStackGroups, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems } from "./axisSelectors.mjs";
-import { computeArea } from "../../cartesian/area/utils.mjs";
-import { createSelector } from "@reduxjs/toolkit";
-//#region src/state/selectors/areaSelectors.ts
-function selectXAxisWithScale(state, xAxisId, _yAxisId, isPanorama) {
-	return selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
-}
-function selectXAxisTicks(state, xAxisId, _yAxisId, isPanorama) {
-	return selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
-}
-function selectYAxisWithScale(state, _xAxisId, yAxisId, isPanorama) {
-	return selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
-}
-function selectYAxisTicks(state, _xAxisId, yAxisId, isPanorama) {
-	return selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
-}
-var selectBandSize = createSelector([
-	selectChartLayout,
-	selectXAxisWithScale,
-	selectYAxisWithScale,
-	selectXAxisTicks,
-	selectYAxisTicks
-], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks) => {
-	if (isCategoricalAxis(layout, "xAxis")) return getBandSizeOfAxis(xAxis, xAxisTicks, false);
-	return getBandSizeOfAxis(yAxis, yAxisTicks, false);
-});
-function selectGraphicalItemStackedData(state, xAxisId, yAxisId, isPanorama, areaSettings) {
-	const isXAxisCategorical = isCategoricalAxis(selectChartLayout(state), "xAxis");
-	let stackGroups;
-	if (isXAxisCategorical) stackGroups = selectStackGroups(state, "yAxis", yAxisId, isPanorama);
-	else stackGroups = selectStackGroups(state, "xAxis", xAxisId, isPanorama);
-	if (stackGroups == null) return;
-	const { dataKey, stackId } = areaSettings;
-	return (stackGroups[stackId]?.stackedData)?.find((v) => v.key === dataKey);
-}
-function pickAreaSettings(_state, _xAxisId, _yAxisId, _isPanorama, areaSettings) {
-	return areaSettings;
-}
-var selectArea = createSelector([
-	selectChartLayout,
-	selectXAxisWithScale,
-	selectYAxisWithScale,
-	selectXAxisTicks,
-	selectYAxisTicks,
-	selectGraphicalItemStackedData,
-	selectChartDataWithIndexesIfNotInPanorama,
-	selectBandSize,
-	createSelector([selectUnfilteredCartesianItems, pickAreaSettings], (graphicalItems, areaSettingsFromProps) => {
-		if (graphicalItems.some((cgis) => cgis.type === "area" && areaSettingsFromProps.dataKey === cgis.dataKey && getNormalizedStackId(areaSettingsFromProps.stackId) === cgis.stackId && areaSettingsFromProps.data === cgis.data)) return areaSettingsFromProps;
-	})
-], (layout, xAxis, yAxis, xAxisTicks, yAxisTicks, stackedData, { chartData, dataStartIndex, dataEndIndex }, bandSize, areaSettings) => {
-	if (areaSettings == null || layout !== "horizontal" && layout !== "vertical" || xAxis == null || yAxis == null || xAxisTicks == null || yAxisTicks == null || xAxisTicks.length === 0 || yAxisTicks.length === 0) return;
-	const { data } = areaSettings;
-	let displayedData;
-	if (data && data.length > 0) displayedData = data;
-	else displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1);
-	if (displayedData == null) return;
-	return computeArea({
-		layout,
-		xAxis,
-		yAxis,
-		xAxisTicks,
-		yAxisTicks,
-		dataStartIndex,
-		areaSettings,
-		stackedData,
-		displayedData,
-		chartBaseValue: void 0,
-		bandSize
-	});
-});
-//#endregion
-export { selectArea };