vccs 0.1.0 → 0.2.0

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

@@ -1,212 +1,259 @@
-import { isCategoricalAxis as e, isNullish as t } from "../../utils/validate.mjs";
-import { selectChartDataAndAlwaysIgnoreIndexes as n, selectChartDataWithIndexes as r } from "./dataSelectors.mjs";
-import { selectBarCategoryGap as i, selectBarGap as a, selectRootBarSize as o, selectRootMaxBarSize as s, selectStackOffsetType as c } from "./rootPropsSelectors.mjs";
-import { mathSign as l } from "../../utils/data.mjs";
-import { selectChartLayout as u } from "./common.mjs";
-import { selectAngleAxis as d, selectPolarViewBox as f, selectRadiusAxis as p } from "./polarAxisSelectors.mjs";
-import { getBandSizeOfAxis as m, getBaseValueOfBar as h, getCateCoordinateOfBar as g, getValueByDataKey as _, truncateByDomain as v } from "../../utils/chart.mjs";
-import { combineStackGroups as y } from "./axisSelectors.mjs";
-import { combineAllBarPositions as b, combineBarSizeList as x, combineStackedData as S } from "./barSelectors.mjs";
-import { selectPolarDisplayedData as C, selectPolarItemsSettings as w, selectUnfilteredPolarItems as T } from "./polarSelectors.mjs";
-import { selectPolarAxisScale as E, selectPolarAxisTicks as D, selectPolarGraphicalItemAxisTicks as O } from "./polarScaleSelectors.mjs";
-import { createSelector as k } from "@reduxjs/toolkit";
+import { isCategoricalAxis, isNullish } from "../../utils/validate.mjs";
+import { selectChartDataAndAlwaysIgnoreIndexes, selectChartDataWithIndexes } from "./dataSelectors.mjs";
+import { selectBarCategoryGap, selectBarGap, selectRootBarSize, selectRootMaxBarSize, selectStackOffsetType } from "./rootPropsSelectors.mjs";
+import { mathSign } from "../../utils/data.mjs";
+import { selectChartLayout } from "./common.mjs";
+import { selectAngleAxis, selectPolarViewBox, selectRadiusAxis } from "./polarAxisSelectors.mjs";
+import { getBandSizeOfAxis, getBaseValueOfBar, getCateCoordinateOfBar, getValueByDataKey, truncateByDomain } from "../../utils/chart.mjs";
+import { combineStackGroups } from "./axisSelectors.mjs";
+import { combineAllBarPositions, combineBarSizeList, combineStackedData } from "./barSelectors.mjs";
+import { selectPolarDisplayedData, selectPolarItemsSettings, selectUnfilteredPolarItems } from "./polarSelectors.mjs";
+import { selectPolarAxisScale, selectPolarAxisTicks, selectPolarGraphicalItemAxisTicks } from "./polarScaleSelectors.mjs";
+import { createSelector } from "@reduxjs/toolkit";
 //#region src/state/selectors/radialBarSelectors.ts
-function A(e, t) {
-	return p(e, t);
+function selectRadiusAxisForRadialBar(state, radiusAxisId) {
+	return selectRadiusAxis(state, radiusAxisId);
 }
-function j(e, t) {
-	return E(e, "radiusAxis", t);
+function selectRadiusAxisScaleForRadar(state, radiusAxisId) {
+	return selectPolarAxisScale(state, "radiusAxis", radiusAxisId);
 }
-var M = k([A, j], (e, t) => {
-	if (!(e == null || t == null)) return {
-		...e,
-		scale: t
+var selectRadiusAxisWithScale = createSelector([selectRadiusAxisForRadialBar, selectRadiusAxisScaleForRadar], (axis, scale) => {
+	if (axis == null || scale == null) return;
+	return {
+		...axis,
+		scale
 	};
 });
-function N(e, t, n, r) {
-	return O(e, "radiusAxis", t, r);
+function selectRadiusAxisTicks(state, radiusAxisId, _angleAxisId, isPanorama) {
+	return selectPolarGraphicalItemAxisTicks(state, "radiusAxis", radiusAxisId, isPanorama);
 }
-function P(e, t, n) {
-	return d(e, n);
+function selectAngleAxisForRadialBar(state, _radiusAxisId, angleAxisId) {
+	return selectAngleAxis(state, angleAxisId);
 }
-function F(e, t, n) {
-	return E(e, "angleAxis", n);
+function selectAngleAxisScaleForRadialBar(state, _radiusAxisId, angleAxisId) {
+	return selectPolarAxisScale(state, "angleAxis", angleAxisId);
 }
-var I = k([P, F], (e, t) => {
-	if (!(e == null || t == null)) return {
-		...e,
-		scale: t
+var selectAngleAxisWithScale = createSelector([selectAngleAxisForRadialBar, selectAngleAxisScaleForRadialBar], (axis, scale) => {
+	if (axis == null || scale == null) return;
+	return {
+		...axis,
+		scale
 	};
 });
-function L(e, t, n, r) {
-	return D(e, "angleAxis", n, r);
+function selectAngleAxisTicks(state, _radiusAxisId, angleAxisId, isPanorama) {
+	return selectPolarAxisTicks(state, "angleAxis", angleAxisId, isPanorama);
 }
-function R(e, t, n, r) {
-	return r;
+function pickRadialBarSettings(_state, _radiusAxisId, _angleAxisId, radialBarSettings) {
+	return radialBarSettings;
 }
-var z = k([T, R], (e, t) => {
-	if (e.some((e) => e.type === "radialBar" && t.dataKey === e.dataKey && t.stackId === e.stackId)) return t;
-}), B = k([
-	u,
-	M,
-	N,
-	I,
-	L
-], (t, n, r, i, a) => e(t, "radiusAxis") ? m(n, r, !1) : m(i, a, !1)), V = k([
-	I,
-	M,
-	u
-], (e, t, n) => {
-	let r = n === "radial" ? e : t;
-	if (!(r == null || r.scale == null)) return h({ numericAxis: r });
+var selectSynchronisedRadialBarSettings = createSelector([selectUnfilteredPolarItems, pickRadialBarSettings], (graphicalItems, radialBarSettingsFromProps) => {
+	if (graphicalItems.some((pgis) => pgis.type === "radialBar" && radialBarSettingsFromProps.dataKey === pgis.dataKey && radialBarSettingsFromProps.stackId === pgis.stackId)) return radialBarSettingsFromProps;
 });
-function H(e, t, n, r) {
-	return n;
+var selectBandSizeOfPolarAxis = createSelector([
+	selectChartLayout,
+	selectRadiusAxisWithScale,
+	selectRadiusAxisTicks,
+	selectAngleAxisWithScale,
+	selectAngleAxisTicks
+], (layout, radiusAxis, radiusAxisTicks, angleAxis, angleAxisTicks) => {
+	if (isCategoricalAxis(layout, "radiusAxis")) return getBandSizeOfAxis(radiusAxis, radiusAxisTicks, false);
+	return getBandSizeOfAxis(angleAxis, angleAxisTicks, false);
+});
+var selectBaseValue = createSelector([
+	selectAngleAxisWithScale,
+	selectRadiusAxisWithScale,
+	selectChartLayout
+], (angleAxis, radiusAxis, layout) => {
+	const numericAxis = layout === "radial" ? angleAxis : radiusAxis;
+	if (numericAxis == null || numericAxis.scale == null) return;
+	return getBaseValueOfBar({ numericAxis });
+});
+function pickAngleAxisId(_state, _radiusAxisId, angleAxisId, _radialBarSettings) {
+	return angleAxisId;
 }
-function U(e, t, n, r) {
-	return t;
+function pickRadiusAxisId(_state, radiusAxisId, _angleAxisId, _radialBarSettings) {
+	return radiusAxisId;
 }
-function W(e, t, n, r) {
-	return r.maxBarSize;
+function pickMaxBarSize(_state, _radiusAxisId, _angleAxisId, radialBarSettings) {
+	return radialBarSettings.maxBarSize;
 }
-var G = k([k([
-	k([
-		k([
-			u,
-			T,
-			H,
-			U
-		], (e, t, n, r) => t.filter((t) => e === "centric" ? t.angleAxisId === n : t.radiusAxisId === r).filter((e) => e.hide === !1).filter((e) => e.type === "radialBar")),
-		o,
-		() => void 0
-	], x),
-	s,
-	a,
-	i,
-	k([
-		u,
-		s,
-		I,
-		L,
-		M,
-		N,
-		W
-	], (e, n, r, i, a, o, s) => {
-		let c = t(s) ? n : s;
-		return e === "centric" ? m(r, i, !0) ?? c ?? 0 : m(a, o, !0) ?? c ?? 0;
+var selectAllVisibleRadialBars = createSelector([
+	selectChartLayout,
+	selectUnfilteredPolarItems,
+	pickAngleAxisId,
+	pickRadiusAxisId
+], (layout, allItems, angleAxisId, radiusAxisId) => {
+	return allItems.filter((i) => {
+		if (layout === "centric") return i.angleAxisId === angleAxisId;
+		return i.radiusAxisId === radiusAxisId;
+	}).filter((i) => i.hide === false).filter((i) => i.type === "radialBar");
+});
+/**
+* The generator never returned the totalSize which means that barSize in polar chart can not support percent values.
+* We can add that if we want to I suppose.
+* @returns undefined - but it should be a total size of numerical axis in polar chart
+*/
+var selectPolarBarAxisSize = () => void 0;
+var selectPolarBarPosition = createSelector([createSelector([
+	createSelector([
+		selectAllVisibleRadialBars,
+		selectRootBarSize,
+		selectPolarBarAxisSize
+	], combineBarSizeList),
+	selectRootMaxBarSize,
+	selectBarGap,
+	selectBarCategoryGap,
+	createSelector([
+		selectChartLayout,
+		selectRootMaxBarSize,
+		selectAngleAxisWithScale,
+		selectAngleAxisTicks,
+		selectRadiusAxisWithScale,
+		selectRadiusAxisTicks,
+		pickMaxBarSize
+	], (layout, globalMaxBarSize, angleAxis, angleAxisTicks, radiusAxis, radiusAxisTicks, childMaxBarSize) => {
+		const maxBarSize = isNullish(childMaxBarSize) ? globalMaxBarSize : childMaxBarSize;
+		if (layout === "centric") return getBandSizeOfAxis(angleAxis, angleAxisTicks, true) ?? maxBarSize ?? 0;
+		return getBandSizeOfAxis(radiusAxis, radiusAxisTicks, true) ?? maxBarSize ?? 0;
 	}),
-	B,
-	W
-], b), z], (e, t) => {
-	if (e == null || t == null) return;
-	let n = e.find((e) => e.stackId === t.stackId && e.dataKeys.includes(t.dataKey));
-	if (n != null) return n.position;
-}), K = k([
-	C,
-	w,
-	c
-], y), q = k([(e, t, n) => u(e) === "centric" ? K(e, "radiusAxis", t) : K(e, "angleAxis", n), z], S);
-function J({ displayedData: e, stackedData: t, dataStartIndex: n, stackedDomain: r, dataKey: i, baseValue: a, layout: o, radiusAxis: s, radiusAxisTicks: c, bandSize: u, pos: d, angleAxis: f, minPointSize: p, cx: m, cy: h, angleAxisTicks: y, startAngle: b, endAngle: x }) {
-	return (e ?? []).map((e, S) => {
-		let C, w, T, E, D, O;
-		if (t ? C = v(t[n + S], r) : (C = _(e, i), Array.isArray(C) || (C = [a, C])), o === "radial") {
-			if (E = f.scale(C[0]) ?? b, D = f.scale(C[1]) ?? x, w = g({
-				axis: s,
-				ticks: c,
-				bandSize: u,
-				offset: d.offset,
-				entry: e,
-				index: S
-			}), w != null && (w -= u / 2), w != null && D != null && E != null) {
-				T = w + d.size;
-				let e = D - E;
-				if (Math.abs(p) > 0 && Math.abs(e) < Math.abs(p)) {
-					let t = l(e || p) * (Math.abs(p) - Math.abs(e));
-					D += t;
+	selectBandSizeOfPolarAxis,
+	pickMaxBarSize
+], combineAllBarPositions), selectSynchronisedRadialBarSettings], (allBarPositions, barSettings) => {
+	if (allBarPositions == null || barSettings == null) return;
+	const position = allBarPositions.find((p) => p.stackId === barSettings.stackId && p.dataKeys.includes(barSettings.dataKey));
+	if (position == null) return;
+	return position.position;
+});
+var selectStackGroups = createSelector([
+	selectPolarDisplayedData,
+	selectPolarItemsSettings,
+	selectStackOffsetType
+], combineStackGroups);
+var selectRadialBarStackGroups = (state, radiusAxisId, angleAxisId) => {
+	if (selectChartLayout(state) === "centric") return selectStackGroups(state, "radiusAxis", radiusAxisId);
+	return selectStackGroups(state, "angleAxis", angleAxisId);
+};
+var selectPolarStackedData = createSelector([selectRadialBarStackGroups, selectSynchronisedRadialBarSettings], combineStackedData);
+function computeRadialBarDataItems({ displayedData, stackedData, dataStartIndex, stackedDomain, dataKey, baseValue, layout, radiusAxis, radiusAxisTicks, bandSize, pos, angleAxis, minPointSize, cx, cy, angleAxisTicks, startAngle: rootStartAngle, endAngle: rootEndAngle }) {
+	return (displayedData ?? []).map((entry, index) => {
+		let value, innerRadius, outerRadius, startAngle, endAngle, backgroundSector;
+		if (stackedData) value = truncateByDomain(stackedData[dataStartIndex + index], stackedDomain);
+		else {
+			value = getValueByDataKey(entry, dataKey);
+			if (!Array.isArray(value)) value = [baseValue, value];
+		}
+		if (layout === "radial") {
+			startAngle = angleAxis.scale(value[0]) ?? rootStartAngle;
+			endAngle = angleAxis.scale(value[1]) ?? rootEndAngle;
+			innerRadius = getCateCoordinateOfBar({
+				axis: radiusAxis,
+				ticks: radiusAxisTicks,
+				bandSize,
+				offset: pos.offset,
+				entry,
+				index
+			});
+			if (innerRadius != null) innerRadius = innerRadius - bandSize / 2;
+			if (innerRadius != null && endAngle != null && startAngle != null) {
+				outerRadius = innerRadius + pos.size;
+				const deltaAngle = endAngle - startAngle;
+				if (Math.abs(minPointSize) > 0 && Math.abs(deltaAngle) < Math.abs(minPointSize)) {
+					const delta = mathSign(deltaAngle || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaAngle));
+					endAngle += delta;
 				}
-				O = { background: {
-					cx: m,
-					cy: h,
-					innerRadius: w,
-					outerRadius: T,
-					startAngle: b,
-					endAngle: x
+				backgroundSector = { background: {
+					cx,
+					cy,
+					innerRadius,
+					outerRadius,
+					startAngle: rootStartAngle,
+					endAngle: rootEndAngle
 				} };
 			}
-		} else if (w = s.scale(C[0]), T = s.scale(C[1]), E = g({
-			axis: f,
-			ticks: y,
-			bandSize: u,
-			offset: d.offset,
-			entry: e,
-			index: S
-		}), w != null && T != null && E != null) {
-			D = E + d.size;
-			let e = T - w;
-			if (Math.abs(p) > 0 && Math.abs(e) < Math.abs(p)) {
-				let t = l(e || p) * (Math.abs(p) - Math.abs(e));
-				T += t;
+		} else {
+			innerRadius = radiusAxis.scale(value[0]);
+			outerRadius = radiusAxis.scale(value[1]);
+			startAngle = getCateCoordinateOfBar({
+				axis: angleAxis,
+				ticks: angleAxisTicks,
+				bandSize,
+				offset: pos.offset,
+				entry,
+				index
+			});
+			if (innerRadius != null && outerRadius != null && startAngle != null) {
+				endAngle = startAngle + pos.size;
+				const deltaRadius = outerRadius - innerRadius;
+				if (Math.abs(minPointSize) > 0 && Math.abs(deltaRadius) < Math.abs(minPointSize)) {
+					const delta = mathSign(deltaRadius || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaRadius));
+					outerRadius += delta;
+				}
 			}
 		}
 		return {
-			...e,
-			...O,
-			payload: e,
-			value: t ? C : C[1],
-			cx: m,
-			cy: h,
-			innerRadius: w,
-			outerRadius: T,
-			startAngle: E,
-			endAngle: D
+			...entry,
+			...backgroundSector,
+			payload: entry,
+			value: stackedData ? value : value[1],
+			cx,
+			cy,
+			innerRadius,
+			outerRadius,
+			startAngle,
+			endAngle
 		};
 	});
 }
-var Y = k([
-	I,
-	L,
-	M,
-	N,
-	r,
-	z,
-	B,
-	u,
-	V,
-	f,
-	G,
-	q
-], (e, t, n, r, { chartData: i, dataStartIndex: a, dataEndIndex: o }, s, c, l, u, d, f, p) => {
-	if (s == null || n == null || e == null || i == null || c == null || f == null || d == null || t == null || r == null || l !== "centric" && l !== "radial") return;
-	let { dataKey: m, minPointSize: h } = s, { cx: g, cy: _, startAngle: v, endAngle: y } = d;
-	return J({
-		angleAxis: e,
-		angleAxisTicks: t,
-		bandSize: c,
-		baseValue: u,
-		cx: g,
-		cy: _,
-		dataKey: m,
-		dataStartIndex: a,
-		displayedData: i.slice(a, o + 1),
-		endAngle: y,
-		layout: l,
-		minPointSize: h,
-		pos: f,
-		radiusAxis: n,
-		radiusAxisTicks: r,
-		stackedData: p,
-		stackedDomain: p ? (l === "centric" ? n : e).scale.domain() : null,
-		startAngle: v
+var selectRadialBarSectors = createSelector([
+	selectAngleAxisWithScale,
+	selectAngleAxisTicks,
+	selectRadiusAxisWithScale,
+	selectRadiusAxisTicks,
+	selectChartDataWithIndexes,
+	selectSynchronisedRadialBarSettings,
+	selectBandSizeOfPolarAxis,
+	selectChartLayout,
+	selectBaseValue,
+	selectPolarViewBox,
+	selectPolarBarPosition,
+	selectPolarStackedData
+], (angleAxis, angleAxisTicks, radiusAxis, radiusAxisTicks, { chartData, dataStartIndex, dataEndIndex }, radialBarSettings, bandSize, layout, baseValue, polarViewBox, pos, stackedData) => {
+	if (radialBarSettings == null || radiusAxis == null || angleAxis == null || chartData == null || bandSize == null || pos == null || polarViewBox == null || angleAxisTicks == null || radiusAxisTicks == null || layout !== "centric" && layout !== "radial") return;
+	const { dataKey, minPointSize } = radialBarSettings;
+	const { cx, cy, startAngle, endAngle } = polarViewBox;
+	return computeRadialBarDataItems({
+		angleAxis,
+		angleAxisTicks,
+		bandSize,
+		baseValue,
+		cx,
+		cy,
+		dataKey,
+		dataStartIndex,
+		displayedData: chartData.slice(dataStartIndex, dataEndIndex + 1),
+		endAngle,
+		layout,
+		minPointSize,
+		pos,
+		radiusAxis,
+		radiusAxisTicks,
+		stackedData,
+		stackedDomain: stackedData ? (layout === "centric" ? radiusAxis : angleAxis).scale.domain() : null,
+		startAngle
+	});
+});
+var selectRadialBarLegendPayload = createSelector([selectChartDataAndAlwaysIgnoreIndexes, (_s, l) => l], ({ chartData, dataStartIndex, dataEndIndex }, legendType) => {
+	if (chartData == null) return [];
+	const displayedData = chartData.slice(dataStartIndex, dataEndIndex + 1);
+	if (displayedData.length === 0) return [];
+	return displayedData.map((entry) => {
+		return {
+			type: legendType,
+			value: entry.name,
+			color: entry.fill,
+			payload: entry
+		};
 	});
-}), X = k([n, (e, t) => t], ({ chartData: e, dataStartIndex: t, dataEndIndex: n }, r) => {
-	if (e == null) return [];
-	let i = e.slice(t, n + 1);
-	return i.length === 0 ? [] : i.map((e) => ({
-		type: r,
-		value: e.name,
-		color: e.fill,
-		payload: e
-	}));
 });
 //#endregion
-export { X as selectRadialBarLegendPayload, Y as selectRadialBarSectors };
+export { selectRadialBarLegendPayload, selectRadialBarSectors };

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

@@ -1,8 +1,14 @@
 //#region src/state/selectors/rootPropsSelectors.ts
-var e = (e) => e.rootProps.maxBarSize, t = (e) => e.rootProps.barGap;
-function n(e) {
-	return e.rootProps.barCategoryGap;
+var selectRootMaxBarSize = (state) => state.rootProps.maxBarSize;
+var selectBarGap = (state) => state.rootProps.barGap;
+function selectBarCategoryGap(state) {
+	return state.rootProps.barCategoryGap;
 }
-var r = (e) => e.rootProps.barSize, i = (e) => e.rootProps.stackOffset, a = (e) => e.options.chartName, o = (e) => e.rootProps.syncId, s = (e) => e.rootProps.syncMethod, c = (e) => e.options.eventEmitter;
+var selectRootBarSize = (state) => state.rootProps.barSize;
+var selectStackOffsetType = (state) => state.rootProps.stackOffset;
+var selectChartName = (state) => state.options.chartName;
+var selectSyncId = (state) => state.rootProps.syncId;
+var selectSyncMethod = (state) => state.rootProps.syncMethod;
+var selectEventEmitter = (state) => state.options.eventEmitter;
 //#endregion
-export { n as selectBarCategoryGap, t as selectBarGap, a as selectChartName, c as selectEventEmitter, r as selectRootBarSize, e as selectRootMaxBarSize, i as selectStackOffsetType, o as selectSyncId, s as selectSyncMethod };
+export { selectBarCategoryGap, selectBarGap, selectChartName, selectEventEmitter, selectRootBarSize, selectRootMaxBarSize, selectStackOffsetType, selectSyncId, selectSyncMethod };