@octanejs/recharts 0.1.40 → 0.1.42

package/src/state/selectors/barSelectors.ts

@@ -0,0 +1,373 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { RegisteredCell } from '../../context/CellsContext';
+import { createSelector } from 'reselect';
+
+import { Series } from 'victory-vendor/d3-shape';
+import { RechartsRootState } from '../store';
+import {
+	BaseAxisWithScale,
+	selectAxisWithScale,
+	selectCartesianAxisSize,
+	selectStackGroups,
+	selectTicksOfGraphicalItem,
+	selectUnfilteredCartesianItems,
+} from './axisSelectors';
+import { isNullish } from '../../util/DataUtils';
+import { BarPositionPosition, getBandSizeOfAxis, StackId } from '../../util/ChartUtils';
+import {
+	CartesianViewBoxRequired,
+	ChartOffsetInternal,
+	DataKey,
+	LayoutType,
+	TickItem,
+} from '../../util/types';
+import { BarRectangleItem, computeBarRectangles } from '../../cartesian/Bar.tsrx';
+import { selectChartLayout } from '../../context/chartLayoutContext';
+import { ChartData } from '../chartDataSlice';
+import { selectChartDataWithIndexesIfNotInPanoramaPosition3 } from './dataSelectors';
+import { selectAxisViewBox, selectChartOffsetInternal } from './selectChartOffsetInternal';
+import {
+	selectBarCategoryGap,
+	selectBarGap,
+	selectRootBarSize,
+	selectRootMaxBarSize,
+} from './rootPropsSelectors';
+import {
+	AllStackGroups,
+	StackDataPoint,
+	StackSeriesIdentifier,
+} from '../../util/stacks/stackTypes';
+import { BarSettings } from '../types/BarSettings';
+import { GraphicalItemId } from '../graphicalItemsSlice';
+import { BarCategory, combineBarSizeList } from './combiners/combineBarSizeList';
+import { combineAllBarPositions } from './combiners/combineAllBarPositions';
+import { combineStackedData } from './combiners/combineStackedData';
+import {
+	selectXAxisIdFromGraphicalItemId,
+	selectYAxisIdFromGraphicalItemId,
+} from './graphicalItemSelectors';
+import { combineBarPosition } from './combiners/combineBarPosition';
+
+const pickIsPanorama = (
+	_state: RechartsRootState,
+	_id: GraphicalItemId,
+	isPanorama: boolean,
+): boolean => isPanorama;
+
+const pickBarId = (_state: RechartsRootState, id: GraphicalItemId): GraphicalItemId => id;
+
+const selectSynchronisedBarSettings: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+) => BarSettings | undefined = createSelector(
+	[selectUnfilteredCartesianItems, pickBarId],
+	(graphicalItems, id: GraphicalItemId) =>
+		graphicalItems.filter((item) => item.type === 'bar').find((item) => item.id === id),
+);
+
+export const selectMaxBarSize: (
+	_state: RechartsRootState,
+	id: GraphicalItemId,
+) => number | undefined = createSelector(
+	[selectSynchronisedBarSettings],
+	(barSettings: BarSettings | undefined) => barSettings?.maxBarSize,
+);
+
+const pickCells = (
+	_state: RechartsRootState,
+	_id: GraphicalItemId,
+	_isPanorama: boolean,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
+): ReadonlyArray<RegisteredCell> | undefined => cells;
+
+export const selectAllVisibleBars: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => ReadonlyArray<BarSettings> = createSelector(
+	[
+		selectChartLayout,
+		selectUnfilteredCartesianItems,
+		selectXAxisIdFromGraphicalItemId,
+		selectYAxisIdFromGraphicalItemId,
+		pickIsPanorama,
+	],
+	(layout: LayoutType, allItems, xAxisId, yAxisId, isPanorama) =>
+		allItems
+			.filter((i) => {
+				if (layout === 'horizontal') {
+					return i.xAxisId === xAxisId;
+				}
+				return i.yAxisId === yAxisId;
+			})
+			.filter((i) => i.isPanorama === isPanorama)
+			.filter((i) => i.hide === false)
+			.filter((i) => i.type === 'bar'),
+);
+
+export type SizeList = ReadonlyArray<BarCategory>;
+
+const selectBarStackGroups = (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+): AllStackGroups | undefined => {
+	const layout = selectChartLayout(state);
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+	if (xAxisId == null || yAxisId == null) {
+		return undefined;
+	}
+	if (layout === 'horizontal') {
+		return selectStackGroups(state, 'yAxis', yAxisId, isPanorama);
+	}
+	return selectStackGroups(state, 'xAxis', xAxisId, isPanorama);
+};
+
+export const selectBarCartesianAxisSize = (state: RechartsRootState, id: GraphicalItemId) => {
+	const layout = selectChartLayout(state);
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+	if (xAxisId == null || yAxisId == null) {
+		return undefined;
+	}
+	if (layout === 'horizontal') {
+		return selectCartesianAxisSize(state, 'xAxis', xAxisId);
+	}
+	return selectCartesianAxisSize(state, 'yAxis', yAxisId);
+};
+
+export const selectBarSizeList: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => SizeList = createSelector(
+	[selectAllVisibleBars, selectRootBarSize, selectBarCartesianAxisSize],
+	combineBarSizeList,
+);
+
+export const selectBarBandSize: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => number = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean): number => {
+	const barSettings: BarSettings | undefined = selectSynchronisedBarSettings(state, id);
+	if (barSettings == null) {
+		return 0;
+	}
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+	if (xAxisId == null || yAxisId == null) {
+		return 0;
+	}
+	const layout = selectChartLayout(state);
+	const globalMaxBarSize: number | undefined = selectRootMaxBarSize(state);
+	const { maxBarSize: childMaxBarSize } = barSettings;
+	const maxBarSize: number | undefined = isNullish(childMaxBarSize)
+		? globalMaxBarSize
+		: childMaxBarSize;
+	let axis: BaseAxisWithScale | undefined, ticks: ReadonlyArray<TickItem> | undefined;
+	if (layout === 'horizontal') {
+		axis = selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama);
+		ticks = selectTicksOfGraphicalItem(state, 'xAxis', xAxisId, isPanorama);
+	} else {
+		axis = selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama);
+		ticks = selectTicksOfGraphicalItem(state, 'yAxis', yAxisId, isPanorama);
+	}
+	return getBandSizeOfAxis(axis, ticks, true) ?? maxBarSize ?? 0;
+};
+
+export const selectAxisBandSize = (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+): number | undefined => {
+	const layout = selectChartLayout(state);
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+	if (xAxisId == null || yAxisId == null) {
+		return undefined;
+	}
+	let axis: BaseAxisWithScale | undefined, ticks: ReadonlyArray<TickItem> | undefined;
+	if (layout === 'horizontal') {
+		axis = selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama);
+		ticks = selectTicksOfGraphicalItem(state, 'xAxis', xAxisId, isPanorama);
+	} else {
+		axis = selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama);
+		ticks = selectTicksOfGraphicalItem(state, 'yAxis', yAxisId, isPanorama);
+	}
+	return getBandSizeOfAxis(axis, ticks);
+};
+
+export type BarWithPosition = {
+	stackId: StackId | undefined;
+	/**
+	 * List of dataKeys of items stacked at this position.
+	 * All of these Bars are either sharing the same stackId,
+	 * or this is an array with one Bar because it has no stackId defined.
+	 *
+	 * This structure limits us to having one dataKey only once per stack which I think is reasonable.
+	 * People who want to have the same data twice can duplicate their data to have two distinct dataKeys.
+	 */
+	dataKeys: ReadonlyArray<DataKey<any>>;
+	/**
+	 * Position of this stack in absolute pixels measured from the start of the chart
+	 */
+	position: BarPositionPosition;
+};
+
+export const selectAllBarPositions: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => ReadonlyArray<BarWithPosition> | undefined = createSelector(
+	[
+		selectBarSizeList,
+		selectRootMaxBarSize,
+		selectBarGap,
+		selectBarCategoryGap,
+		selectBarBandSize,
+		selectAxisBandSize,
+		selectMaxBarSize,
+	],
+	combineAllBarPositions,
+);
+
+const selectXAxisWithScale = (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => {
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+	if (xAxisId == null) {
+		return undefined;
+	}
+	return selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama);
+};
+
+const selectYAxisWithScale = (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => {
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+	if (yAxisId == null) {
+		return undefined;
+	}
+	return selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama);
+};
+
+const selectXAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) => {
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+	if (xAxisId == null) {
+		return undefined;
+	}
+	return selectTicksOfGraphicalItem(state, 'xAxis', xAxisId, isPanorama);
+};
+
+const selectYAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) => {
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+	if (yAxisId == null) {
+		return undefined;
+	}
+	return selectTicksOfGraphicalItem(state, 'yAxis', yAxisId, isPanorama);
+};
+
+export const selectBarPosition: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => BarPositionPosition | undefined = createSelector(
+	[selectAllBarPositions, selectSynchronisedBarSettings],
+	combineBarPosition,
+);
+
+export const selectStackedDataOfItem: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+) => Series<StackDataPoint, StackSeriesIdentifier> | undefined = createSelector(
+	[selectBarStackGroups, selectSynchronisedBarSettings],
+	combineStackedData,
+);
+
+export const selectBarRectangles: (
+	state: RechartsRootState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+	cells: ReadonlyArray<RegisteredCell> | undefined,
+) => ReadonlyArray<BarRectangleItem> | undefined = createSelector(
+	[
+		selectChartOffsetInternal,
+		selectAxisViewBox,
+		selectXAxisWithScale,
+		selectYAxisWithScale,
+		selectXAxisTicks,
+		selectYAxisTicks,
+		selectBarPosition,
+		selectChartLayout,
+		selectChartDataWithIndexesIfNotInPanoramaPosition3,
+		selectAxisBandSize,
+		selectStackedDataOfItem,
+		selectSynchronisedBarSettings,
+		pickCells,
+	],
+	(
+		offset: ChartOffsetInternal,
+		axisViewBox: CartesianViewBoxRequired,
+		xAxis: BaseAxisWithScale | undefined,
+		yAxis: BaseAxisWithScale | undefined,
+		xAxisTicks,
+		yAxisTicks,
+		pos: BarPositionPosition | undefined,
+		layout: LayoutType,
+		{ chartData, dataStartIndex, dataEndIndex },
+		bandSize,
+		stackedData,
+		barSettings: BarSettings | undefined,
+		cells,
+	): ReadonlyArray<BarRectangleItem> | undefined => {
+		if (
+			barSettings == null ||
+			pos == null ||
+			axisViewBox == null ||
+			(layout !== 'horizontal' && layout !== 'vertical') ||
+			xAxis == null ||
+			yAxis == null ||
+			xAxisTicks == null ||
+			yAxisTicks == null ||
+			bandSize == null
+		) {
+			return undefined;
+		}
+		const { data } = barSettings;
+
+		let displayedData: ChartData | undefined;
+		if (data != null && data.length > 0) {
+			displayedData = data;
+		} else {
+			displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1);
+		}
+
+		if (displayedData == null) {
+			return undefined;
+		}
+
+		return computeBarRectangles({
+			layout,
+			barSettings,
+			pos,
+			parentViewBox: axisViewBox,
+			bandSize,
+			xAxis,
+			yAxis,
+			xAxisTicks,
+			yAxisTicks,
+			stackedData,
+			displayedData,
+			offset,
+			cells,
+			dataStartIndex,
+		});
+	},
+);

package/src/state/selectors/barStackSelectors.ts

@@ -0,0 +1,99 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+import type { RechartsRootState } from '../store';
+import type { NormalizedStackId } from '../../util/ChartUtils';
+import type { BarSettings } from '../types/BarSettings';
+import { selectUnfilteredCartesianItems } from './axisSelectors';
+import type { CartesianGraphicalItemSettings } from '../graphicalItemsSlice';
+import { selectBarRectangles } from './barSelectors';
+
+const pickStackId = (state: RechartsRootState, stackId: NormalizedStackId): NormalizedStackId =>
+	stackId;
+
+const pickIsPanorama = (
+	state: RechartsRootState,
+	stackId: NormalizedStackId,
+	isPanorama: boolean,
+): boolean => isPanorama;
+
+export const selectAllBarsInStack: (
+	state: RechartsRootState,
+	stackId: NormalizedStackId,
+	isPanorama: boolean,
+) => ReadonlyArray<BarSettings> = createSelector(
+	[pickStackId, selectUnfilteredCartesianItems, pickIsPanorama],
+	(
+		stackId: NormalizedStackId,
+		allItems: ReadonlyArray<CartesianGraphicalItemSettings>,
+		isPanorama: boolean,
+	): ReadonlyArray<BarSettings> => {
+		return allItems
+			.filter((i) => i.type === 'bar')
+			.filter((i) => i.stackId === stackId)
+			.filter((i) => i.isPanorama === isPanorama)
+			.filter((i) => !i.hide);
+	},
+);
+
+const selectAllBarIdsInStack = createSelector([selectAllBarsInStack], (allBars) => {
+	return allBars.map((bar) => bar.id);
+});
+
+export type BarStackItem = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
+/**
+ * Takes two rectangles and returns a new rectangle that encompasses both.
+ * It takes the minimum x and y, and the maximum width and height.
+ * It handles overlapping rectangles, and rectangles with a gap between them.
+ * @param rect1
+ * @param rect2
+ */
+export const expandRectangle = (
+	rect1: BarStackItem | undefined,
+	rect2: BarStackItem | undefined,
+): BarStackItem | undefined => {
+	if (!rect1) {
+		return rect2;
+	}
+	if (!rect2) {
+		return rect1;
+	}
+	const x = Math.min(rect1.x, rect1.x + rect1.width, rect2.x, rect2.x + rect2.width);
+	const y = Math.min(rect1.y, rect1.y + rect1.height, rect2.y, rect2.y + rect2.height);
+	const maxX = Math.max(rect1.x, rect1.x + rect1.width, rect2.x, rect2.x + rect2.width);
+	const maxY = Math.max(rect1.y, rect1.y + rect1.height, rect2.y, rect2.y + rect2.height);
+	const width = maxX - x;
+	const height = maxY - y;
+	return { x, y, width, height };
+};
+
+const combineStackRects: (
+	state: RechartsRootState,
+	stackId: NormalizedStackId,
+	isPanorama: boolean,
+) => ReadonlyArray<BarStackItem | undefined> = (state, stackId, isPanorama) => {
+	const allBarIds = selectAllBarIdsInStack(state, stackId, isPanorama);
+	const stackRects: Array<BarStackItem | undefined> = [];
+	allBarIds.forEach((barId) => {
+		const rectangles = selectBarRectangles(state, barId, isPanorama, undefined);
+		rectangles?.forEach((rect) => {
+			const rectIndex = rect.originalDataIndex;
+			stackRects[rectIndex] = expandRectangle(stackRects[rectIndex], rect);
+		});
+	});
+	return stackRects;
+};
+
+export const selectStackRects: (
+	state: RechartsRootState,
+	stackId: NormalizedStackId,
+	isPanorama: boolean,
+) => ReadonlyArray<BarStackItem | undefined> = createSelector(
+	[(state) => state, pickStackId, pickIsPanorama],
+	combineStackRects,
+);

package/src/state/selectors/brushSelectors.ts

@@ -0,0 +1,28 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSelector } from 'reselect';
+import { RechartsRootState } from '../store';
+import { selectChartOffsetInternal } from './selectChartOffsetInternal';
+import { selectMargin } from './containerSelectors';
+import { isNumber } from '../../util/DataUtils';
+import { BrushSettings } from '../brushSlice';
+
+export const selectBrushSettings = (state: RechartsRootState): BrushSettings => state.brush;
+
+export type BrushDimensions = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
+export const selectBrushDimensions: (state: RechartsRootState) => BrushDimensions = createSelector(
+	[selectBrushSettings, selectChartOffsetInternal, selectMargin],
+	(brushSettings, offset, margin): BrushDimensions => ({
+		height: brushSettings.height,
+		x: isNumber(brushSettings.x) ? brushSettings.x : offset.left,
+		y: isNumber(brushSettings.y)
+			? brushSettings.y
+			: offset.top + offset.height + offset.brushBottom - (margin?.bottom || 0),
+		width: isNumber(brushSettings.width) ? brushSettings.width : offset.width,
+	}),
+);

package/src/state/selectors/combiners/combineActiveLabel.ts

@@ -0,0 +1,16 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { TickItem } from '../../../util/types';
+import { TooltipIndex } from '../../tooltipSlice';
+import { isNan } from '../../../util/DataUtils';
+import { ActiveLabel } from '../../../synchronisation/types';
+
+export const combineActiveLabel = (
+	tooltipTicks: ReadonlyArray<TickItem> | undefined,
+	activeIndex: TooltipIndex,
+): ActiveLabel => {
+	const n = Number(activeIndex);
+	if (isNan(n) || activeIndex == null) {
+		return undefined;
+	}
+	return n >= 0 ? tooltipTicks?.[n]?.value : undefined;
+};

package/src/state/selectors/combiners/{combineActiveTooltipIndex.js → combineActiveTooltipIndex.ts}

@@ -1,52 +1,70 @@
-// Vendored verbatim from recharts@3.9.2 es6/state/selectors/combiners/combineActiveTooltipIndex.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { TooltipIndex, TooltipInteractionState } from '../../tooltipSlice';
+import { ChartData } from '../../chartDataSlice';
 import { isWellBehavedNumber } from '../../../util/isWellBehavedNumber';
+import { DataKey, CategoricalDomain, NumberDomain } from '../../../util/types';
 import { getValueByDataKey } from '../../../util/ChartUtils';
 import { isWellFormedNumberDomain } from '../../../util/isDomainSpecifiedByUser';
-function toFiniteNumber(value) {
+
+function toFiniteNumber(value: unknown): number | undefined {
 	if (typeof value === 'number') {
 		return Number.isFinite(value) ? value : undefined;
 	}
 	if (value instanceof Date) {
-		var numericValue = value.valueOf();
+		const numericValue = value.valueOf();
 		return Number.isFinite(numericValue) ? numericValue : undefined;
 	}
-	var parsed = Number(value);
+	const parsed = Number(value);
 	return Number.isFinite(parsed) ? parsed : undefined;
 }
-function isValueWithinNumberDomain(value, domain) {
-	var numericValue = toFiniteNumber(value);
-	var lowerBound = domain[0];
-	var upperBound = domain[1];
+
+function isValueWithinNumberDomain(value: unknown, domain: NumberDomain): boolean {
+	const numericValue = toFiniteNumber(value);
+	const lowerBound = domain[0];
+	const upperBound = domain[1];
+
 	if (numericValue === undefined) {
 		return false;
 	}
-	var min = Math.min(lowerBound, upperBound);
-	var max = Math.max(lowerBound, upperBound);
+
+	const min = Math.min(lowerBound, upperBound);
+	const max = Math.max(lowerBound, upperBound);
 	return numericValue >= min && numericValue <= max;
 }
-function isValueWithinDomain(entry, axisDataKey, domain) {
+
+function isValueWithinDomain(
+	entry: unknown,
+	axisDataKey: DataKey<unknown> | undefined,
+	domain: NumberDomain | CategoricalDomain | undefined,
+): boolean {
 	if (domain == null || axisDataKey == null) {
 		return true;
 	}
-	var value = getValueByDataKey(entry, axisDataKey);
+
+	const value = getValueByDataKey(entry, axisDataKey);
 	if (value == null) {
 		return true;
 	}
+
 	if (!isWellFormedNumberDomain(domain)) {
 		return true;
 	}
+
 	return isValueWithinNumberDomain(value, domain);
 }
-export var combineActiveTooltipIndex = (tooltipInteraction, chartData, axisDataKey, domain) => {
-	var desiredIndex =
-		tooltipInteraction === null || tooltipInteraction === void 0
-			? void 0
-			: tooltipInteraction.index;
+
+export const combineActiveTooltipIndex = (
+	tooltipInteraction: TooltipInteractionState | undefined,
+	chartData: ChartData,
+	axisDataKey?: DataKey<unknown>,
+	domain?: NumberDomain | CategoricalDomain,
+): TooltipIndex | null => {
+	const desiredIndex: TooltipIndex | undefined = tooltipInteraction?.index;
 	if (desiredIndex == null) {
 		return null;
 	}
-	var indexAsNumber = Number(desiredIndex);
+
+	const indexAsNumber = Number(desiredIndex);
 	if (!isWellBehavedNumber(indexAsNumber)) {
 		// this is for charts like Sankey and Treemap that do not support numerical indexes. We need a proper solution for this before we can start supporting keyboard events on these charts.
 		return desiredIndex;
@@ -56,20 +74,24 @@ export var combineActiveTooltipIndex = (tooltipInteraction, chartData, axisDataK
 	 * Zero is a trivial limit for single-dimensional charts like Line and Area,
 	 * but this also needs a support for multidimensional charts like Sankey and Treemap! TODO
 	 */
-	var lowerLimit = 0;
-	var upperLimit = +Infinity;
+	const lowerLimit = 0;
+	let upperLimit: number = +Infinity;
+
 	if (chartData.length > 0) {
 		upperLimit = chartData.length - 1;
 	}
 
 	// now let's clamp the desiredIndex between the limits
-	var clampedIndex = Math.max(lowerLimit, Math.min(indexAsNumber, upperLimit));
-	var entry = chartData[clampedIndex];
+	const clampedIndex = Math.max(lowerLimit, Math.min(indexAsNumber, upperLimit));
+	const entry = chartData[clampedIndex];
+
 	if (entry == null) {
 		return String(clampedIndex);
 	}
+
 	if (!isValueWithinDomain(entry, axisDataKey, domain)) {
 		return null;
 	}
+
 	return String(clampedIndex);
 };