vccs 0.1.0 → 0.3.0

package/dist/es/state/mouseEventsMiddleware.mjs

@@ -1,34 +1,41 @@
-import { selectTooltipEventType as e } from "./selectors/selectTooltipEventType.mjs";
-import { mouseLeaveChart as t, setMouseClickAxisIndex as n, setMouseOverAxisIndex as r } from "./tooltipSlice.mjs";
-import { selectActivePropsFromChartPointer as i } from "./selectors/selectActivePropsFromChartPointer.mjs";
-import { createAction as a, createListenerMiddleware as o } from "@reduxjs/toolkit";
+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 s = a("mouseClick"), c = o();
-c.startListening({
-	actionCreator: s,
-	effect: (t, r) => {
-		let a = t.payload, o = r.getState();
-		if (e(o, o.tooltip.settings.shared) === "axis") {
-			let e = i(o, a);
-			e?.activeIndex != null && r.dispatch(n({
-				activeIndex: e.activeIndex,
+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: e.activeCoordinate
+				activeCoordinate: activeProps.activeCoordinate
 			}));
 		}
 	}
 });
-var l = a("mouseMove"), u = o();
-u.startListening({
-	actionCreator: l,
-	effect: (n, a) => {
-		let o = n.payload, s = a.getState(), c = e(s, s.tooltip.settings.shared), l = i(s, o);
-		c === "axis" && (l?.activeIndex == null ? a.dispatch(t()) : a.dispatch(r({
-			activeIndex: l.activeIndex,
+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: l.activeCoordinate
-		})));
+			activeCoordinate: activeProps.activeCoordinate
+		}));
+		else listenerApi.dispatch(mouseLeaveChart());
 	}
 });
 //#endregion
-export { s as mouseClickAction, c as mouseClickMiddleware, l as mouseMoveAction, u as mouseMoveMiddleware };
+export { mouseClickAction, mouseClickMiddleware, mouseMoveAction, mouseMoveMiddleware };

package/dist/es/state/optionsSlice.mjs

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

package/dist/es/state/polarAxisSlice.mjs

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

package/dist/es/state/polarOptionsSlice.mjs

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

package/dist/es/state/reduxDevtoolsJsonStringifyReplacer.mjs

@@ -1,6 +1,8 @@
 //#region src/state/reduxDevtoolsJsonStringifyReplacer.ts
-function e(e, t) {
-	return t instanceof HTMLElement ? `HTMLElement <${t.tagName} class="${t.className}">` : t === window ? "global.window" : t;
+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 { e as reduxDevtoolsJsonStringifyReplacer };
+export { reduxDevtoolsJsonStringifyReplacer };

package/dist/es/state/referenceElementsSlice.mjs

@@ -1,5 +1,5 @@
-import { createSlice as e, current as t } from "@reduxjs/toolkit";
-var n = e({
+import { createSlice, current } from "@reduxjs/toolkit";
+var referenceElementsSlice = createSlice({
 	name: "referenceElements",
 	initialState: {
 		dots: [],
@@ -7,28 +7,30 @@ var n = e({
 		lines: []
 	},
 	reducers: {
-		addDot: (e, t) => {
-			e.dots.push(t.payload);
+		addDot: (state, action) => {
+			state.dots.push(action.payload);
 		},
-		removeDot: (e, n) => {
-			let r = t(e).dots.findIndex((e) => e === n.payload);
-			r !== -1 && e.dots.splice(r, 1);
+		removeDot: (state, action) => {
+			const index = current(state).dots.findIndex((dot) => dot === action.payload);
+			if (index !== -1) state.dots.splice(index, 1);
 		},
-		addArea: (e, t) => {
-			e.areas.push(t.payload);
+		addArea: (state, action) => {
+			state.areas.push(action.payload);
 		},
-		removeArea: (e, n) => {
-			let r = t(e).areas.findIndex((e) => e === n.payload);
-			r !== -1 && e.areas.splice(r, 1);
+		removeArea: (state, action) => {
+			const index = current(state).areas.findIndex((area) => area === action.payload);
+			if (index !== -1) state.areas.splice(index, 1);
 		},
-		addLine: (e, t) => {
-			e.lines.push(t.payload);
+		addLine: (state, action) => {
+			state.lines.push(action.payload);
 		},
-		removeLine: (e, n) => {
-			let r = t(e).lines.findIndex((e) => e === n.payload);
-			r !== -1 && e.lines.splice(r, 1);
+		removeLine: (state, action) => {
+			const index = current(state).lines.findIndex((line) => line === action.payload);
+			if (index !== -1) state.lines.splice(index, 1);
 		}
 	}
-}), { addDot: r, removeDot: i, addArea: a, removeArea: o, addLine: s, removeLine: c } = n.actions, l = n.reducer;
+});
+var { addDot, removeDot, addArea, removeArea, addLine, removeLine } = referenceElementsSlice.actions;
+var referenceElementsReducer = referenceElementsSlice.reducer;
 //#endregion
-export { a as addArea, s as addLine, l as referenceElementsReducer, o as removeArea, c as removeLine };
+export { addArea, addDot, addLine, referenceElementsReducer, removeArea, removeDot, removeLine };

package/dist/es/state/rootPropsSlice.mjs

@@ -1,7 +1,7 @@
-import { createSlice as e } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
 //#region src/state/rootPropsSlice.ts
-var t = {
-	accessibilityLayer: !0,
+var initialState = {
+	accessibilityLayer: true,
 	barCategoryGap: "10%",
 	barGap: 4,
 	barSize: void 0,
@@ -10,12 +10,23 @@ var t = {
 	stackOffset: "none",
 	syncId: void 0,
 	syncMethod: "index"
-}, n = e({
+};
+var rootPropsSlice = createSlice({
 	name: "rootProps",
-	initialState: t,
-	reducers: { updateOptions: (e, n) => {
-		e.accessibilityLayer = n.payload.accessibilityLayer, e.barCategoryGap = n.payload.barCategoryGap, e.barGap = n.payload.barGap ?? t.barGap, e.barSize = n.payload.barSize, e.maxBarSize = n.payload.maxBarSize, e.stackOffset = n.payload.stackOffset, e.syncId = n.payload.syncId, e.syncMethod = n.payload.syncMethod, e.class = n.payload.class;
+	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;
 	} }
-}), r = n.reducer, { updateOptions: i } = n.actions;
+});
+var rootPropsReducer = rootPropsSlice.reducer;
+var { updateOptions } = rootPropsSlice.actions;
 //#endregion
-export { r as rootPropsReducer, i as updateOptions };
+export { rootPropsReducer, updateOptions };

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

@@ -1,67 +1,77 @@
-import { isCategoricalAxis as e } from "../../utils/validate.mjs";
-import { selectChartDataWithIndexesIfNotInPanorama as t } from "./dataSelectors.mjs";
-import { selectChartLayout as n } from "./common.mjs";
-import { getBandSizeOfAxis as r, getNormalizedStackId as i } from "../../utils/chart.mjs";
-import { selectAxisWithScale as a, selectStackGroups as o, selectTicksOfGraphicalItem as s, selectUnfilteredCartesianItems as c } from "./axisSelectors.mjs";
-import { computeArea as l } from "../../cartesian/area/utils.mjs";
-import { createSelector as u } from "@reduxjs/toolkit";
+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 d(e, t, n, r) {
-	return a(e, "xAxis", t, r);
+function selectXAxisWithScale(state, xAxisId, _yAxisId, isPanorama) {
+	return selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
 }
-function f(e, t, n, r) {
-	return s(e, "xAxis", t, r);
+function selectXAxisTicks(state, xAxisId, _yAxisId, isPanorama) {
+	return selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
 }
-function p(e, t, n, r) {
-	return a(e, "yAxis", n, r);
+function selectYAxisWithScale(state, _xAxisId, yAxisId, isPanorama) {
+	return selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
 }
-function m(e, t, n, r) {
-	return s(e, "yAxis", n, r);
+function selectYAxisTicks(state, _xAxisId, yAxisId, isPanorama) {
+	return selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
 }
-var h = u([
-	n,
-	d,
-	p,
-	f,
-	m
-], (t, n, i, a, o) => e(t, "xAxis") ? r(n, a, !1) : r(i, o, !1));
-function g(t, r, i, a, s) {
-	let c = e(n(t), "xAxis"), l;
-	if (l = c ? o(t, "yAxis", i, a) : o(t, "xAxis", r, a), l == null) return;
-	let { dataKey: u, stackId: d } = s;
-	return (l[d]?.stackedData)?.find((e) => e.key === u);
+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 _(e, t, n, r, i) {
-	return i;
+function pickAreaSettings(_state, _xAxisId, _yAxisId, _isPanorama, areaSettings) {
+	return areaSettings;
 }
-var v = u([
-	n,
-	d,
-	p,
-	f,
-	m,
-	g,
-	t,
-	h,
-	u([c, _], (e, t) => {
-		if (e.some((e) => e.type === "area" && t.dataKey === e.dataKey && i(t.stackId) === e.stackId && t.data === e.data)) return t;
+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;
 	})
-], (e, t, n, r, i, a, { chartData: o, dataStartIndex: s, dataEndIndex: c }, u, d) => {
-	if (d == null || e !== "horizontal" && e !== "vertical" || t == null || n == null || r == null || i == null || r.length === 0 || i.length === 0) return;
-	let { data: f } = d, p;
-	if (p = f && f.length > 0 ? f : o?.slice(s, c + 1), p != null) return l({
-		layout: e,
-		xAxis: t,
-		yAxis: n,
-		xAxisTicks: r,
-		yAxisTicks: i,
-		dataStartIndex: s,
-		areaSettings: d,
-		stackedData: a,
-		displayedData: p,
+], (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: u
+		bandSize
 	});
 });
 //#endregion
-export { v as selectArea };
+export { selectArea };