@octanejs/recharts 0.1.41 → 0.1.43

package/src/state/selectors/selectChartOffsetInternal.ts

@@ -0,0 +1,147 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+
+import { selectLegendSettings, selectLegendSize } from './legendSelectors';
+import {
+	CartesianViewBoxRequired,
+	ChartOffsetInternal,
+	Margin,
+	OffsetHorizontal,
+	OffsetVertical,
+	Size,
+} from '../../util/types';
+import { XAxisSettings, YAxisSettings } from '../cartesianAxisSlice';
+import { LegendSettings } from '../legendSlice';
+import { appendOffsetOfLegend } from '../../util/ChartUtils';
+import { selectChartHeight, selectChartWidth, selectMargin } from './containerSelectors';
+import { selectAllXAxes, selectAllYAxes } from './selectAllAxes';
+import { DEFAULT_Y_AXIS_WIDTH } from '../../util/Constants';
+import { RechartsRootState } from '../store';
+
+export const selectBrushHeight = (state: RechartsRootState) => state.brush.height;
+
+function selectLeftAxesOffset(state: RechartsRootState): number {
+	const yAxes = selectAllYAxes(state);
+	return yAxes.reduce((result: number, entry: YAxisSettings): number => {
+		if (entry.orientation === 'left' && !entry.mirror && !entry.hide) {
+			const width = typeof entry.width === 'number' ? entry.width : DEFAULT_Y_AXIS_WIDTH;
+			return result + width;
+		}
+		return result;
+	}, 0);
+}
+
+function selectRightAxesOffset(state: RechartsRootState): number {
+	const yAxes = selectAllYAxes(state);
+	return yAxes.reduce((result: number, entry: YAxisSettings): number => {
+		if (entry.orientation === 'right' && !entry.mirror && !entry.hide) {
+			const width = typeof entry.width === 'number' ? entry.width : DEFAULT_Y_AXIS_WIDTH;
+			return result + width;
+		}
+		return result;
+	}, 0);
+}
+
+function selectTopAxesOffset(state: RechartsRootState): number {
+	const xAxes = selectAllXAxes(state);
+	return xAxes.reduce((result: number, entry: XAxisSettings): number => {
+		if (entry.orientation === 'top' && !entry.mirror && !entry.hide) {
+			return result + entry.height;
+		}
+		return result;
+	}, 0);
+}
+
+function selectBottomAxesOffset(state: RechartsRootState): number {
+	const xAxes = selectAllXAxes(state);
+	return xAxes.reduce((result: number, entry: XAxisSettings): number => {
+		if (entry.orientation === 'bottom' && !entry.mirror && !entry.hide) {
+			return result + entry.height;
+		}
+		return result;
+	}, 0);
+}
+
+/**
+ * For internal use only.
+ *
+ * @param root state
+ * @return ChartOffsetInternal
+ */
+export const selectChartOffsetInternal: (state: RechartsRootState) => ChartOffsetInternal =
+	createSelector(
+		[
+			selectChartWidth,
+			selectChartHeight,
+			selectMargin,
+			selectBrushHeight,
+			selectLeftAxesOffset,
+			selectRightAxesOffset,
+			selectTopAxesOffset,
+			selectBottomAxesOffset,
+			selectLegendSettings,
+			selectLegendSize,
+		],
+		(
+			chartWidth: number,
+			chartHeight: number,
+			margin: Margin,
+			brushHeight: number,
+			leftAxesOffset: number,
+			rightAxesOffset: number,
+			topAxesOffset: number,
+			bottomAxesOffset: number,
+			legendSettings: LegendSettings,
+			legendSize: Size,
+		): ChartOffsetInternal => {
+			const offsetH: OffsetHorizontal = {
+				left: (margin.left || 0) + leftAxesOffset,
+				right: (margin.right || 0) + rightAxesOffset,
+			};
+
+			const offsetV: OffsetVertical = {
+				top: (margin.top || 0) + topAxesOffset,
+				bottom: (margin.bottom || 0) + bottomAxesOffset,
+			};
+
+			let offset = { ...offsetV, ...offsetH };
+
+			const brushBottom = offset.bottom;
+
+			offset.bottom += brushHeight;
+
+			offset = appendOffsetOfLegend(offset, legendSettings, legendSize);
+
+			const offsetWidth = chartWidth - offset.left - offset.right;
+			const offsetHeight = chartHeight - offset.top - offset.bottom;
+
+			return {
+				brushBottom,
+				...offset,
+				// never return negative values for height and width
+				width: Math.max(offsetWidth, 0),
+				height: Math.max(offsetHeight, 0),
+			};
+		},
+	);
+
+export const selectChartViewBox = createSelector(
+	selectChartOffsetInternal,
+	(offset: ChartOffsetInternal): CartesianViewBoxRequired => ({
+		x: offset.left,
+		y: offset.top,
+		width: offset.width,
+		height: offset.height,
+	}),
+);
+
+export const selectAxisViewBox = createSelector(
+	selectChartWidth,
+	selectChartHeight,
+	(width: number, height: number): CartesianViewBoxRequired => ({
+		x: 0,
+		y: 0,
+		width,
+		height,
+	}),
+);

package/src/state/selectors/{selectPlotArea.js → selectPlotArea.ts}

@@ -1,14 +1,15 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/selectors/selectPlotArea.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
 import { createSelector } from 'reselect';
 import { selectChartOffset } from './selectChartOffset';
 import { selectChartHeight, selectChartWidth } from './containerSelectors';
-export var selectPlotArea = createSelector(
+
+export const selectPlotArea = createSelector(
 	[selectChartOffset, selectChartWidth, selectChartHeight],
 	(offset, chartWidth, chartHeight) => {
 		if (!offset || chartWidth == null || chartHeight == null) {
 			return undefined;
 		}
+
 		return {
 			x: offset.left,
 			y: offset.top,

package/src/state/selectors/selectTooltipAxisId.ts

@@ -0,0 +1,6 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { AxisId } from '../cartesianAxisSlice';
+
+export const selectTooltipAxisId = (state: RechartsRootState): AxisId =>
+	state.tooltip.settings.axisId;

package/src/state/selectors/{selectTooltipAxisType.js → selectTooltipAxisType.ts}

@@ -1,25 +1,31 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/selectors/selectTooltipAxisType.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
 import { selectChartLayout } from '../../context/chartLayoutContext';
 
 /**
  * angle, radius, X, Y, and Z axes all have domain and range and scale and associated settings
  */
+export type AllAxisTypes = 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'angleAxis';
 
 /**
  * Z axis is never displayed and so it lacks ticks and tick settings.
  */
+export type RenderableAxisType = 'xAxis' | 'yAxis' | 'angleAxis' | 'radiusAxis';
+
+export const selectTooltipAxisType = (state: RechartsRootState): RenderableAxisType => {
+	const layout = selectChartLayout(state);
 
-export var selectTooltipAxisType = (state) => {
-	var layout = selectChartLayout(state);
 	if (layout === 'horizontal') {
 		return 'xAxis';
 	}
+
 	if (layout === 'vertical') {
 		return 'yAxis';
 	}
+
 	if (layout === 'centric') {
 		return 'angleAxis';
 	}
+
 	return 'radiusAxis';
 };

package/src/state/selectors/selectTooltipEventType.ts

@@ -0,0 +1,39 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { TooltipEventType } from '../../util/types';
+import { useAppSelector } from '../hooks';
+import { SharedTooltipSettings } from '../tooltipSlice';
+
+export const selectDefaultTooltipEventType = (state: RechartsRootState): TooltipEventType =>
+	state.options.defaultTooltipEventType;
+export const selectValidateTooltipEventTypes = (
+	state: RechartsRootState,
+): ReadonlyArray<TooltipEventType> | undefined => state.options.validateTooltipEventTypes;
+
+export function combineTooltipEventType(
+	shared: SharedTooltipSettings,
+	defaultTooltipEventType: TooltipEventType,
+	validateTooltipEventTypes: ReadonlyArray<TooltipEventType> | undefined,
+): TooltipEventType {
+	if (shared == null) {
+		return defaultTooltipEventType;
+	}
+	const eventType = shared ? 'axis' : 'item';
+	if (validateTooltipEventTypes == null) {
+		return defaultTooltipEventType;
+	}
+	return validateTooltipEventTypes.includes(eventType) ? eventType : defaultTooltipEventType;
+}
+
+export function selectTooltipEventType(
+	state: RechartsRootState,
+	shared: SharedTooltipSettings,
+): TooltipEventType {
+	const defaultTooltipEventType = selectDefaultTooltipEventType(state);
+	const validateTooltipEventTypes = selectValidateTooltipEventTypes(state);
+	return combineTooltipEventType(shared, defaultTooltipEventType, validateTooltipEventTypes);
+}
+
+export function useTooltipEventType(shared: SharedTooltipSettings): TooltipEventType | undefined {
+	return useAppSelector((state) => selectTooltipEventType(state, shared));
+}

package/src/state/selectors/selectTooltipPayloadSearcher.ts

@@ -0,0 +1,6 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { TooltipPayloadSearcher } from '../tooltipSlice';
+
+export const selectTooltipPayloadSearcher = (state: RechartsRootState): TooltipPayloadSearcher =>
+	state.options.tooltipPayloadSearcher;

package/src/state/selectors/selectTooltipSettings.ts

@@ -0,0 +1,6 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { TooltipSettingsState } from '../tooltipSlice';
+
+export const selectTooltipSettings = (state: RechartsRootState): TooltipSettingsState =>
+	state.tooltip.settings;

package/src/state/selectors/selectTooltipState.ts

@@ -0,0 +1,5 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { RechartsRootState } from '../store';
+import { TooltipState } from '../tooltipSlice';
+
+export const selectTooltipState = (state: RechartsRootState): TooltipState => state.tooltip;

package/src/state/selectors/selectors.ts

@@ -0,0 +1,315 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+import { sortBy } from 'es-toolkit/compat';
+import { useAppSelector } from '../hooks';
+import { RechartsRootState } from '../store';
+import {
+	ActiveTooltipProps,
+	TooltipIndex,
+	TooltipInteractionState,
+	TooltipPayload,
+	TooltipPayloadConfiguration,
+} from '../tooltipSlice';
+import { calculateCartesianTooltipPos, calculatePolarTooltipPos } from '../../util/ChartUtils';
+import {
+	AxisType,
+	CartesianLayout,
+	ChartOffsetInternal,
+	RelativePointer,
+	Coordinate,
+	DataKey,
+	PolarCoordinate,
+	PolarLayout,
+	PolarViewBoxRequired,
+	TickItem,
+	TooltipEventType,
+} from '../../util/types';
+import { TooltipTrigger } from '../../chart/types';
+import { selectChartDataWithIndexes } from './dataSelectors';
+import {
+	selectTooltipAxisDomain,
+	selectTooltipAxisTicks,
+	selectTooltipDisplayedData,
+} from './tooltipSelectors';
+import { AxisRange, selectTooltipAxisDataKey } from './axisSelectors';
+import { selectChartName } from './rootPropsSelectors';
+import { selectChartLayout } from '../../context/chartLayoutContext';
+import { selectChartOffsetInternal } from './selectChartOffsetInternal';
+import { selectChartHeight, selectChartWidth } from './containerSelectors';
+import { combineActiveLabel } from './combiners/combineActiveLabel';
+import { combineTooltipInteractionState } from './combiners/combineTooltipInteractionState';
+import { combineActiveTooltipIndex } from './combiners/combineActiveTooltipIndex';
+import { combineCoordinateForDefaultIndex } from './combiners/combineCoordinateForDefaultIndex';
+import { combineTooltipPayloadConfigurations } from './combiners/combineTooltipPayloadConfigurations';
+import { selectTooltipPayloadSearcher } from './selectTooltipPayloadSearcher';
+import { selectTooltipState } from './selectTooltipState';
+import { combineTooltipPayload } from './combiners/combineTooltipPayload';
+import {
+	calculateActiveTickIndex,
+	getActiveCartesianCoordinate,
+	getActivePolarCoordinate,
+	isInCartesianRange,
+} from '../../util/getActiveCoordinate';
+import { inRangeOfSector } from '../../util/PolarUtils';
+
+export const useChartName = (): string | undefined => {
+	return useAppSelector(selectChartName);
+};
+
+const pickTooltipEventType = (
+	_state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+): TooltipEventType | undefined => tooltipEventType;
+
+const pickTrigger = (
+	_state: RechartsRootState,
+	_tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+): TooltipTrigger => trigger;
+
+const pickDefaultIndex = (
+	_state: RechartsRootState,
+	_tooltipEventType: TooltipEventType | undefined,
+	_trigger: TooltipTrigger,
+	defaultIndex?: TooltipIndex | undefined,
+): TooltipIndex | undefined => defaultIndex;
+
+export const selectOrderedTooltipTicks = createSelector(
+	selectTooltipAxisTicks,
+	(ticks: ReadonlyArray<TickItem> | undefined) => sortBy(ticks, (o) => o.coordinate),
+);
+
+export const selectTooltipInteractionState: (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+) => TooltipInteractionState = createSelector(
+	[selectTooltipState, pickTooltipEventType, pickTrigger, pickDefaultIndex],
+	combineTooltipInteractionState,
+);
+
+export const selectActiveIndex: (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+) => TooltipIndex | null = createSelector(
+	[
+		selectTooltipInteractionState,
+		selectTooltipDisplayedData,
+		selectTooltipAxisDataKey,
+		selectTooltipAxisDomain,
+	],
+	combineActiveTooltipIndex,
+);
+
+export const selectTooltipDataKey = (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+): DataKey<any> | undefined => {
+	if (tooltipEventType == null) {
+		return undefined;
+	}
+	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;
+};
+
+export const selectTooltipPayloadConfigurations: (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+) => ReadonlyArray<TooltipPayloadConfiguration> = createSelector(
+	[selectTooltipState, pickTooltipEventType, pickTrigger, pickDefaultIndex],
+	combineTooltipPayloadConfigurations,
+);
+
+export const selectCoordinateForDefaultIndex: (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+) => Coordinate | undefined = createSelector(
+	[
+		selectChartWidth,
+		selectChartHeight,
+		selectChartLayout,
+		selectChartOffsetInternal,
+		selectTooltipAxisTicks,
+		pickDefaultIndex,
+		selectTooltipPayloadConfigurations,
+	],
+	combineCoordinateForDefaultIndex,
+);
+
+export const selectActiveCoordinate: (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+) => Coordinate | undefined = createSelector(
+	[selectTooltipInteractionState, selectCoordinateForDefaultIndex],
+	(
+		tooltipInteractionState: TooltipInteractionState,
+		defaultIndexCoordinate: Coordinate | undefined,
+	): Coordinate | undefined => {
+		return tooltipInteractionState.coordinate ?? defaultIndexCoordinate;
+	},
+);
+
+export const selectActiveLabel: (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+) => string | number | undefined = createSelector(
+	[selectTooltipAxisTicks, selectActiveIndex],
+	combineActiveLabel,
+);
+
+export const selectTooltipPayload: (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+) => TooltipPayload | undefined = createSelector(
+	[
+		selectTooltipPayloadConfigurations,
+		selectActiveIndex,
+		selectChartDataWithIndexes,
+		selectTooltipAxisDataKey,
+		selectActiveLabel,
+		selectTooltipPayloadSearcher,
+		pickTooltipEventType,
+	],
+	combineTooltipPayload,
+);
+
+export const selectIsTooltipActive: (
+	state: RechartsRootState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+) => { isActive: boolean; activeIndex: TooltipIndex | null } = createSelector(
+	[selectTooltipInteractionState, selectActiveIndex],
+	(tooltipInteractionState: TooltipInteractionState, activeIndex: TooltipIndex | null) => {
+		return { isActive: tooltipInteractionState.active && activeIndex != null, activeIndex };
+	},
+);
+
+const combineActiveCartesianProps = (
+	chartEvent: RelativePointer | undefined,
+	layout: CartesianLayout,
+	tooltipAxisType: AxisType | undefined,
+	tooltipAxisRange: AxisRange | undefined,
+	tooltipTicks: ReadonlyArray<TickItem> | undefined,
+	orderedTooltipTicks: ReadonlyArray<TickItem> | undefined,
+	offset: ChartOffsetInternal,
+): ActiveTooltipProps | undefined => {
+	if (!chartEvent || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks) {
+		return undefined;
+	}
+	if (!isInCartesianRange(chartEvent, offset)) {
+		return undefined;
+	}
+	const pos: number | undefined = calculateCartesianTooltipPos(chartEvent, layout);
+
+	const activeIndex = calculateActiveTickIndex(
+		pos,
+		orderedTooltipTicks,
+		tooltipTicks,
+		tooltipAxisType,
+		tooltipAxisRange,
+	);
+
+	const activeCoordinate = getActiveCartesianCoordinate(
+		layout,
+		tooltipTicks,
+		activeIndex,
+		chartEvent,
+	);
+
+	return { activeIndex: String(activeIndex), activeCoordinate };
+};
+
+const combineActivePolarProps = (
+	chartEvent: RelativePointer | undefined,
+	layout: PolarLayout,
+	polarViewBox: PolarViewBoxRequired | undefined,
+	tooltipAxisType: AxisType | undefined,
+	tooltipAxisRange: AxisRange | undefined,
+	tooltipTicks: ReadonlyArray<TickItem> | undefined,
+	orderedTooltipTicks: ReadonlyArray<TickItem> | undefined,
+): ActiveTooltipProps | undefined => {
+	if (!chartEvent || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks || !polarViewBox) {
+		return undefined;
+	}
+	const rangeObj = inRangeOfSector(chartEvent, polarViewBox);
+	if (!rangeObj) {
+		return undefined;
+	}
+	const pos: number | undefined = calculatePolarTooltipPos(rangeObj, layout);
+
+	const activeIndex = calculateActiveTickIndex(
+		pos,
+		orderedTooltipTicks,
+		tooltipTicks,
+		tooltipAxisType,
+		tooltipAxisRange,
+	);
+
+	const activeCoordinate: PolarCoordinate = getActivePolarCoordinate(
+		layout,
+		tooltipTicks,
+		activeIndex,
+		rangeObj,
+	);
+
+	return { activeIndex: String(activeIndex), activeCoordinate };
+};
+
+export const combineActiveProps = (
+	chartEvent: RelativePointer | undefined,
+	layout: CartesianLayout | PolarLayout | undefined,
+	polarViewBox: PolarViewBoxRequired | undefined,
+	tooltipAxisType: AxisType | undefined,
+	tooltipAxisRange: AxisRange | undefined,
+	tooltipTicks: ReadonlyArray<TickItem> | undefined,
+	orderedTooltipTicks: ReadonlyArray<TickItem> | undefined,
+	offset: ChartOffsetInternal,
+): ActiveTooltipProps | undefined => {
+	if (!chartEvent || !layout || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks) {
+		return undefined;
+	}
+	if (layout === 'horizontal' || layout === 'vertical') {
+		return combineActiveCartesianProps(
+			chartEvent,
+			layout,
+			tooltipAxisType,
+			tooltipAxisRange,
+			tooltipTicks,
+			orderedTooltipTicks,
+			offset,
+		);
+	}
+	return combineActivePolarProps(
+		chartEvent,
+		layout,
+		polarViewBox,
+		tooltipAxisType,
+		tooltipAxisRange,
+		tooltipTicks,
+		orderedTooltipTicks,
+	);
+};