@octanejs/recharts 0.1.40 → 0.1.42

package/src/context/CellsContext.ts

@@ -10,20 +10,21 @@
 import { createContext, useContext, useMemo, useState } from 'octane';
 import { shallowEqual } from '@octanejs/redux';
 import { splitSlot, subSlot } from '../internal';
+import type { Props as CellProps } from '../component/Cell';
 
 export interface CellRegistry {
-	register(token: object, props: unknown): void;
+	register(token: object, props: CellProps): void;
 	unregister(token: object): void;
 }
 
 /** The shape upstream's `cells[index].props` access expects. */
 export interface RegisteredCell {
-	props: unknown;
+	props: CellProps;
 }
 
 export const CellsContext = createContext<CellRegistry | null>(null);
 
-function toCellArray(map: Map<object, unknown>): RegisteredCell[] | undefined {
+function toCellArray(map: Map<object, CellProps>): RegisteredCell[] | undefined {
 	if (map.size === 0) {
 		return undefined;
 	}
@@ -46,7 +47,7 @@ export function useCellRegistry(...rest: any[]): [RegisteredCell[] | undefined,
 	);
 	const registry = useMemo(
 		() => {
-			const entries = new Map<object, unknown>();
+			const entries = new Map<object, CellProps>();
 			let scheduled = false;
 			const publish = () => {
 				if (scheduled) return;
@@ -58,7 +59,7 @@ export function useCellRegistry(...rest: any[]): [RegisteredCell[] | undefined,
 				});
 			};
 			return {
-				register(token: object, props: unknown) {
+				register(token: object, props: CellProps) {
 					const previousProps = entries.get(token);
 					if (
 						entries.has(token) &&

package/src/context/ErrorBarContext.tsrx

@@ -1,3 +1,18 @@
+import type { OctaneNode } from '../util/OctaneTypes.ts';
+import type { AxisId } from '../state/cartesianAxisSlice';
+import type { ErrorBarDataPointFormatter } from '../cartesian/ErrorBar.tsrx';
+import type { ErrorBarsSettings } from '../state/errorBarSlice';
+import type { BarRectangleItem } from '../cartesian/Bar';
+import type { LinePointItem } from '../cartesian/Line';
+import type { ScatterPointItem } from '../cartesian/Scatter.tsrx';
+
+type ErrorBarContextType<T extends BarRectangleItem | LinePointItem | ScatterPointItem> = {
+	data: ReadonlyArray<any> | undefined;
+	xAxisId: AxisId;
+	yAxisId: AxisId;
+	dataPointFormatter: ErrorBarDataPointFormatter<T>;
+	errorBarOffset: number;
+};
 // Port of context/ErrorBarContext.tsx — the per-graphical-item settings an
 // <ErrorBar> child reads, plus the reporter that registers error-bar presence
 // in the store.
@@ -6,7 +21,7 @@ import { addErrorBar, removeErrorBar, replaceErrorBar } from '../state/errorBarS
 import { useAppDispatch } from '../state/hooks';
 import { useGraphicalItemId } from './RegisterGraphicalItemId.tsrx';
 
-const initialContextState = {
+const initialContextState: ErrorBarContextType<any> = {
 	data: [],
 	xAxisId: 'xAxis-0',
 	yAxisId: 'yAxis-0',
@@ -16,17 +31,21 @@ const initialContextState = {
 
 const ErrorBarContext = createContext(initialContextState);
 
-export function SetErrorBarContext(props) {
+export function SetErrorBarContext<
+	T extends BarRectangleItem | LinePointItem | ScatterPointItem,
+>(props: ErrorBarContextType<T> & {
+	children: OctaneNode;
+}) {
 	const { children, ...rest } = props;
 	return <ErrorBarContext.Provider value={rest}>{children}</ErrorBarContext.Provider>;
 }
 
 export const useErrorBarContext = () => useContext(ErrorBarContext);
 
-export function ReportErrorBarSettings(props) {
+export function ReportErrorBarSettings(props: ErrorBarsSettings) {
 	const dispatch = useAppDispatch();
 	const graphicalItemId = useGraphicalItemId();
-	const prevPropsRef = useRef(null);
+	const prevPropsRef = useRef<ErrorBarsSettings | null>(null);
 	useEffect(() => {
 		if (graphicalItemId == null) {
 			// ErrorBar outside a graphical item context does not do anything.

package/src/context/RegisterGraphicalItemId.tsrx

@@ -1,12 +1,20 @@
+import type { OctaneNode } from '../util/OctaneTypes.ts';
+import type { GraphicalItemId } from '../state/graphicalItemsSlice';
+
+export type IdSetter = {
+	id?: string;
+	type: string;
+	children: (id: GraphicalItemId) => OctaneNode;
+};
 // Port of context/RegisterGraphicalItemId.tsx — mints a stable per-item id
 // (user override wins) and provides it to descendants via context. `children`
 // is a RENDER PROP receiving the resolved id.
 import { createContext, useContext } from 'octane';
 import { useUniqueId } from '../util/useUniqueId';
 
-const GraphicalItemIdContext = createContext(undefined);
+const GraphicalItemIdContext = createContext<GraphicalItemId | undefined>(undefined);
 
-export function RegisterGraphicalItemId(props) {
+export function RegisterGraphicalItemId(props: IdSetter) {
 	const { id, type, children } = props;
 	const resolvedId = useUniqueId('recharts-' + type, id);
 	return <GraphicalItemIdContext.Provider value={resolvedId}>{children(

package/src/context/accessibilityContext.ts

@@ -0,0 +1,5 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { useAppSelector } from '../state/hooks';
+
+export const useAccessibilityLayer: () => boolean = () =>
+	useAppSelector((state) => state.rootProps.accessibilityLayer) ?? true;

package/src/context/brushUpdateContext.ts

@@ -0,0 +1,11 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createContext } from 'octane';
+
+export interface BrushStartEndIndex {
+	startIndex: number;
+	endIndex: number;
+}
+
+export type OnBrushUpdate = (newState: BrushStartEndIndex) => void;
+
+export const BrushUpdateDispatchContext = createContext<OnBrushUpdate>(() => {});

package/src/context/chartDataContext.ts

@@ -1,12 +1,13 @@
 // Port of context/chartDataContext.tsx — reporter components that publish the
 // chart's `data` prop into the store, plus the read hooks.
 import { useEffect } from 'octane';
-import { setChartData, setComputedData } from '../state/chartDataSlice';
+import { setChartData, setComputedData, type ChartData } from '../state/chartDataSlice';
 import { useAppDispatch, useAppSelector } from '../state/hooks';
 import { useIsPanorama } from './PanoramaContext';
 import { splitSlot, subSlot } from '../internal';
+import type { RechartsRootState } from '../state/store';
 
-export const ChartDataContextProvider = (props: { chartData: unknown }): null => {
+export const ChartDataContextProvider = (props: { chartData: ChartData | undefined }): null => {
 	const { chartData } = props;
 	const dispatch = useAppDispatch();
 	const isPanorama = useIsPanorama();
@@ -37,7 +38,7 @@ export const SetComputedData = (props: { computedData: unknown }): null => {
 	return null;
 };
 
-const selectChartData = (state: any) => state.chartData.chartData;
+const selectChartData = (state: RechartsRootState) => state.chartData.chartData;
 
 /** @deprecated use one of the other selectors instead. */
 export const useChartData = (...rest: any[]) => {
@@ -45,7 +46,7 @@ export const useChartData = (...rest: any[]) => {
 	return useAppSelector(selectChartData, subSlot(slot, 'cdc:data'));
 };
 
-const selectDataIndex = (state: any) => {
+const selectDataIndex = (state: RechartsRootState) => {
 	const { dataStartIndex, dataEndIndex } = state.chartData;
 	return { startIndex: dataStartIndex, endIndex: dataEndIndex };
 };

package/src/context/chartLayoutContext.ts

@@ -12,11 +12,22 @@ import {
 import { selectChartHeight, selectChartWidth } from '../state/selectors/containerSelectors';
 import { useIsPanorama } from './PanoramaContext';
 import { selectBrushDimensions, selectBrushSettings } from '../state/selectors/brushSelectors';
-import { useResponsiveContainerContext } from '../component/ResponsiveContainer';
+import { useResponsiveContainerContext } from '../component/ResponsiveContainer.tsrx';
 import { isPositiveNumber } from '../util/isWellBehavedNumber';
 import { splitSlot, subSlot } from '../internal';
-
-export function cartesianViewBoxToTrapezoid(box: any) {
+import type { RechartsRootState } from '../state/store';
+import type { CartesianViewBoxRequired, Margin, TrapezoidViewBox } from '../util/types';
+
+export function cartesianViewBoxToTrapezoid(box: undefined): undefined;
+export function cartesianViewBoxToTrapezoid(
+	box: CartesianViewBoxRequired | TrapezoidViewBox,
+): TrapezoidViewBox;
+export function cartesianViewBoxToTrapezoid(
+	box: CartesianViewBoxRequired | TrapezoidViewBox | undefined,
+): TrapezoidViewBox | undefined;
+export function cartesianViewBoxToTrapezoid(
+	box: CartesianViewBoxRequired | TrapezoidViewBox | undefined,
+): TrapezoidViewBox | undefined {
 	if (!box) {
 		return undefined;
 	}
@@ -81,7 +92,7 @@ export const useChartHeight = (...rest: any[]) => {
 	return useAppSelector(selectChartHeight, subSlot(slot, 'clc:height'));
 };
 
-const selectMargin = (state: any) => state.layout.margin;
+const selectMargin = (state: RechartsRootState) => state.layout.margin;
 
 /** The chart's margin (empty space around the plot), or `undefined` outside a chart. */
 export const useMargin = (...rest: any[]) => {
@@ -89,7 +100,7 @@ export const useMargin = (...rest: any[]) => {
 	return useAppSelector(selectMargin, subSlot(slot, 'clc:margin'));
 };
 
-export const selectChartLayout = (state: any) => state.layout.layoutType;
+export const selectChartLayout = (state: RechartsRootState) => state.layout.layoutType;
 
 /**
  * The chart layout as configured by the chart (`horizontal`/`vertical` for
@@ -111,7 +122,7 @@ export const useCartesianChartLayout = (...rest: any[]) => {
 	return undefined;
 };
 
-export const selectPolarChartLayout = (state: any) => {
+export const selectPolarChartLayout = (state: RechartsRootState) => {
 	const layout = state.layout.layoutType;
 	if (layout === 'centric' || layout === 'radial') {
 		return layout;
@@ -132,7 +143,10 @@ export const useIsInChartContext = (...rest: any[]) => {
 	return layout !== undefined;
 };
 
-export const ReportChartSize = (props: { width: number; height: number }): null => {
+export const ReportChartSize = (props: {
+	width: number | string | undefined;
+	height: number | string | undefined;
+}): null => {
 	const dispatch = useAppDispatch();
 	// Skip dispatching in a panorama chart: the ROOT chart decides these, and
 	// Brush reads them from the store (stability avoids a re-render cycle).
@@ -161,7 +175,7 @@ export const ReportChartSize = (props: { width: number; height: number }): null
 	return null;
 };
 
-export const ReportChartMargin = (props: { margin: unknown }): null => {
+export const ReportChartMargin = (props: { margin: Partial<Margin> }): null => {
 	const { margin } = props;
 	const dispatch = useAppDispatch();
 	useEffect(() => {

package/src/context/legendPayloadContext.tsrx

@@ -1,4 +1,4 @@
-import { LegendPayload } from '../component/DefaultLegendContent';
+import { LegendPayload } from '../component/DefaultLegendContent.tsrx';
 import { useAppSelector } from '../state/hooks';
 import { selectLegendPayload } from '../state/selectors/legendSelectors';
 

package/src/context/tooltipContext.ts

@@ -0,0 +1,83 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type { NativeMouseEvent } from '../util/OctaneTypes';
+
+import { Coordinate, DataKey } from '../util/types';
+import { useAppDispatch } from '../state/hooks';
+import {
+	mouseLeaveItem,
+	setActiveClickItemIndex,
+	setActiveMouseOverItemIndex,
+	TooltipPayload,
+} from '../state/tooltipSlice';
+
+/**
+ * Some graphical items choose to provide more information to the tooltip
+ * and some do not.
+ */
+export type TooltipTriggerInfo = {
+	tooltipPayload?: TooltipPayload;
+	tooltipPosition?: Coordinate;
+};
+
+export type MouseEnterLeaveEvent<T, E extends SVGElement = SVGElement> = (
+	data: T,
+	index: number,
+	event: NativeMouseEvent<E>,
+) => void;
+
+export const useMouseEnterItemDispatch = <
+	T extends TooltipTriggerInfo,
+	E extends SVGElement = SVGElement,
+>(
+	onMouseEnterFromProps: MouseEnterLeaveEvent<T, E> | undefined,
+	dataKey: DataKey<any> | undefined,
+	graphicalItemId: string,
+) => {
+	const dispatch = useAppDispatch();
+	return (data: T, index: number) => (event: NativeMouseEvent<E>) => {
+		onMouseEnterFromProps?.(data, index, event);
+		dispatch(
+			setActiveMouseOverItemIndex({
+				activeIndex: String(index),
+				activeDataKey: dataKey,
+				activeCoordinate: data.tooltipPosition,
+				activeGraphicalItemId: graphicalItemId,
+			}),
+		);
+	};
+};
+
+export const useMouseLeaveItemDispatch = <
+	T extends TooltipTriggerInfo,
+	E extends SVGElement = SVGElement,
+>(
+	onMouseLeaveFromProps: undefined | MouseEnterLeaveEvent<T, E>,
+) => {
+	const dispatch = useAppDispatch();
+	return (data: T, index: number) => (event: NativeMouseEvent<E>) => {
+		onMouseLeaveFromProps?.(data, index, event);
+		dispatch(mouseLeaveItem());
+	};
+};
+
+export const useMouseClickItemDispatch = <
+	T extends TooltipTriggerInfo,
+	E extends SVGElement = SVGElement,
+>(
+	onMouseClickFromProps: MouseEnterLeaveEvent<T, E> | undefined,
+	dataKey: DataKey<any> | undefined,
+	graphicalItemId: string,
+) => {
+	const dispatch = useAppDispatch();
+	return (data: T, index: number) => (event: NativeMouseEvent<E>) => {
+		onMouseClickFromProps?.(data, index, event);
+		dispatch(
+			setActiveClickItemIndex({
+				activeIndex: String(index),
+				activeDataKey: dataKey,
+				activeCoordinate: data.tooltipPosition,
+				activeGraphicalItemId: graphicalItemId,
+			}),
+		);
+	};
+};

package/src/{hooks.js → hooks.ts}

@@ -1,7 +1,7 @@
-// Vendored verbatim from recharts@3.9.2 es6/hooks.js (framework-agnostic).
-// Do not edit — update by re-vendoring when the recharts devDependency moves.
-import { defaultAxisId } from './state/cartesianAxisSlice';
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { AxisId, defaultAxisId } from './state/cartesianAxisSlice';
 import {
+	BaseAxisWithScale,
 	selectAxisDomain,
 	selectAxisInverseScale,
 	selectAxisInverseDataSnapScale,
@@ -18,14 +18,20 @@ import {
 	selectActiveTooltipDataPoints,
 	selectIsTooltipActive,
 } from './state/selectors/tooltipSelectors';
+import { ChartOffset, PlotArea } from './types';
 import { selectChartOffset } from './state/selectors/selectChartOffset';
 import { selectPlotArea } from './state/selectors/selectPlotArea';
-export var useXAxis = (xAxisId) => {
-	var isPanorama = useIsPanorama();
+import { CategoricalDomain, Coordinate, NumberDomain, TickItem } from './util/types';
+import { ActiveLabel } from './synchronisation/types';
+import { BandPosition } from './util/scale/RechartsScale';
+
+export const useXAxis = (xAxisId: AxisId): BaseAxisWithScale | undefined => {
+	const isPanorama = useIsPanorama();
 	return useAppSelector((state) => selectAxisWithScale(state, 'xAxis', xAxisId, isPanorama));
 };
-export var useYAxis = (yAxisId) => {
-	var isPanorama = useIsPanorama();
+
+export const useYAxis = (yAxisId: AxisId): BaseAxisWithScale | undefined => {
+	const isPanorama = useIsPanorama();
 	return useAppSelector((state) => selectAxisWithScale(state, 'yAxis', yAxisId, isPanorama));
 };
 
@@ -36,12 +42,17 @@ export var useYAxis = (yAxisId) => {
  * @param options.position - Position within a band: 'start', 'middle', or 'end'.
  * @returns The pixel coordinate, or `undefined` if the value is not in the domain.
  */
+export type ScaleFunction = (
+	value: unknown,
+	options?: { position?: BandPosition },
+) => number | undefined;
 
 /**
  * A function that converts pixel coordinates back to data values.
  * @param pixelValue - The pixel coordinate to convert.
  * @returns The closest data value in the domain.
  */
+export type InverseScaleFunction = (pixelValue: number) => unknown;
 
 /**
  * Returns a function to convert data values to pixel coordinates for an {@link XAxis}.
@@ -64,11 +75,10 @@ export var useYAxis = (yAxisId) => {
  * @returns A scale function that maps data values to pixel coordinates, or `undefined`.
  * @since 3.8
  */
-export var useXAxisScale = function useXAxisScale() {
-	var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
-	var isPanorama = useIsPanorama();
-	var scale = useAppSelector((state) => selectAxisScale(state, 'xAxis', xAxisId, isPanorama));
-	return scale === null || scale === void 0 ? void 0 : scale.map;
+export const useXAxisScale = (xAxisId: AxisId = defaultAxisId): ScaleFunction | undefined => {
+	const isPanorama = useIsPanorama();
+	const scale = useAppSelector((state) => selectAxisScale(state, 'xAxis', xAxisId, isPanorama));
+	return scale?.map;
 };
 
 /**
@@ -92,11 +102,10 @@ export var useXAxisScale = function useXAxisScale() {
  * @returns A scale function that maps data values to pixel coordinates, or `undefined`.
  * @since 3.8
  */
-export var useYAxisScale = function useYAxisScale() {
-	var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
-	var isPanorama = useIsPanorama();
-	var scale = useAppSelector((state) => selectAxisScale(state, 'yAxis', yAxisId, isPanorama));
-	return scale === null || scale === void 0 ? void 0 : scale.map;
+export const useYAxisScale = (yAxisId: AxisId = defaultAxisId): ScaleFunction | undefined => {
+	const isPanorama = useIsPanorama();
+	const scale = useAppSelector((state) => selectAxisScale(state, 'yAxis', yAxisId, isPanorama));
+	return scale?.map;
 };
 
 /**
@@ -124,9 +133,10 @@ export var useYAxisScale = function useYAxisScale() {
  * @returns An inverse scale function that maps pixel coordinates to data values, or `undefined`.
  * @since 3.8
  */
-export var useXAxisInverseScale = function useXAxisInverseScale() {
-	var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
-	var isPanorama = useIsPanorama();
+export const useXAxisInverseScale = (
+	xAxisId: AxisId = defaultAxisId,
+): InverseScaleFunction | undefined => {
+	const isPanorama = useIsPanorama();
 	return useAppSelector((state) => selectAxisInverseScale(state, 'xAxis', xAxisId, isPanorama));
 };
 
@@ -147,9 +157,10 @@ export var useXAxisInverseScale = function useXAxisInverseScale() {
  * @returns An inverse scale function that maps pixel coordinates to the closest data value, or `undefined`.
  * @since 3.8
  */
-export var useXAxisInverseDataSnapScale = function useXAxisInverseDataSnapScale() {
-	var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
-	var isPanorama = useIsPanorama();
+export const useXAxisInverseDataSnapScale = (
+	xAxisId: AxisId = defaultAxisId,
+): InverseScaleFunction | undefined => {
+	const isPanorama = useIsPanorama();
 	return useAppSelector((state) =>
 		selectAxisInverseDataSnapScale(state, 'xAxis', xAxisId, isPanorama),
 	);
@@ -172,8 +183,9 @@ export var useXAxisInverseDataSnapScale = function useXAxisInverseDataSnapScale(
  * @returns An inverse scale function that maps pixel coordinates to the closest tick value, or `undefined`.
  * @since 3.8
  */
-export var useXAxisInverseTickSnapScale = function useXAxisInverseTickSnapScale() {
-	var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
+export const useXAxisInverseTickSnapScale = (
+	xAxisId: AxisId = defaultAxisId,
+): InverseScaleFunction | undefined => {
 	return useAppSelector((state) => selectAxisInverseTickSnapScale(state, 'xAxis', xAxisId));
 };
 
@@ -202,9 +214,10 @@ export var useXAxisInverseTickSnapScale = function useXAxisInverseTickSnapScale(
  * @returns An inverse scale function that maps pixel coordinates to data values, or `undefined`.
  * @since 3.8
  */
-export var useYAxisInverseScale = function useYAxisInverseScale() {
-	var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
-	var isPanorama = useIsPanorama();
+export const useYAxisInverseScale = (
+	yAxisId: AxisId = defaultAxisId,
+): InverseScaleFunction | undefined => {
+	const isPanorama = useIsPanorama();
 	return useAppSelector((state) => selectAxisInverseScale(state, 'yAxis', yAxisId, isPanorama));
 };
 
@@ -225,9 +238,10 @@ export var useYAxisInverseScale = function useYAxisInverseScale() {
  * @returns An inverse scale function that maps pixel coordinates to the closest data value, or `undefined`.
  * @since 3.8
  */
-export var useYAxisInverseDataSnapScale = function useYAxisInverseDataSnapScale() {
-	var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
-	var isPanorama = useIsPanorama();
+export const useYAxisInverseDataSnapScale = (
+	yAxisId: AxisId = defaultAxisId,
+): InverseScaleFunction | undefined => {
+	const isPanorama = useIsPanorama();
 	return useAppSelector((state) =>
 		selectAxisInverseDataSnapScale(state, 'yAxis', yAxisId, isPanorama),
 	);
@@ -250,8 +264,9 @@ export var useYAxisInverseDataSnapScale = function useYAxisInverseDataSnapScale(
  * @returns An inverse scale function that maps pixel coordinates to the closest tick value, or `undefined`.
  * @since 3.8
  */
-export var useYAxisInverseTickSnapScale = function useYAxisInverseTickSnapScale() {
-	var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
+export const useYAxisInverseTickSnapScale = (
+	yAxisId: AxisId = defaultAxisId,
+): InverseScaleFunction | undefined => {
 	return useAppSelector((state) => selectAxisInverseTickSnapScale(state, 'yAxis', yAxisId));
 };
 
@@ -265,8 +280,9 @@ export var useYAxisInverseTickSnapScale = function useYAxisInverseTickSnapScale(
  * @returns An array of ticks, or `undefined` if the axis doesn't exist or hasn't been calculated yet.
  * @since 3.8
  */
-export var useXAxisTicks = function useXAxisTicks() {
-	var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
+export const useXAxisTicks = (
+	xAxisId: AxisId = defaultAxisId,
+): ReadonlyArray<TickItem> | undefined => {
 	return useAppSelector((state) => selectRenderedTicksOfAxis(state, 'xAxis', xAxisId));
 };
 
@@ -280,8 +296,9 @@ export var useXAxisTicks = function useXAxisTicks() {
  * @returns An array of ticks, or `undefined` if the axis doesn't exist or hasn't been calculated yet.
  * @since 3.8
  */
-export var useYAxisTicks = function useYAxisTicks() {
-	var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
+export const useYAxisTicks = (
+	yAxisId: AxisId = defaultAxisId,
+): ReadonlyArray<TickItem> | undefined => {
 	return useAppSelector((state) => selectRenderedTicksOfAxis(state, 'yAxis', yAxisId));
 };
 
@@ -289,6 +306,10 @@ export var useYAxisTicks = function useYAxisTicks() {
  * Data point with x and y values that can be converted to pixel coordinates.
  * The x and y values should be in the same format as your chart data.
  */
+export type CartesianDataPoint = {
+	x: number | string;
+	y: number | string;
+};
 
 /**
  * Converts a data point (in data coordinates) to pixel coordinates.
@@ -318,23 +339,26 @@ export var useYAxisTicks = function useYAxisTicks() {
  * @returns The pixel x,y coordinates, or `undefined` if conversion is not possible.
  * @since 3.8
  */
-export var useCartesianScale = function useCartesianScale(dataPoint) {
-	var xAxisId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultAxisId;
-	var yAxisId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultAxisId;
-	var xScale = useXAxisScale(xAxisId);
-	var yScale = useYAxisScale(yAxisId);
+export const useCartesianScale = (
+	dataPoint: CartesianDataPoint,
+	xAxisId: AxisId = defaultAxisId,
+	yAxisId: AxisId = defaultAxisId,
+): Coordinate | undefined => {
+	const xScale = useXAxisScale(xAxisId);
+	const yScale = useYAxisScale(yAxisId);
+
 	if (xScale == null || yScale == null) {
 		return undefined;
 	}
-	var pixelX = xScale(dataPoint.x);
-	var pixelY = yScale(dataPoint.y);
+
+	const pixelX = xScale(dataPoint.x);
+	const pixelY = yScale(dataPoint.y);
+
 	if (pixelX == null || pixelY == null) {
 		return undefined;
 	}
-	return {
-		x: pixelX,
-		y: pixelY,
-	};
+
+	return { x: pixelX, y: pixelY };
 };
 
 /**
@@ -346,7 +370,7 @@ export var useCartesianScale = function useCartesianScale(dataPoint) {
  * @returns ActiveLabel
  * @since 3.0
  */
-export var useActiveTooltipLabel = () => {
+export const useActiveTooltipLabel = (): ActiveLabel => {
 	return useAppSelector(selectActiveLabel);
 };
 
@@ -376,7 +400,7 @@ export var useActiveTooltipLabel = () => {
  * @returns Offset of the chart in pixels, or undefined if used outside a chart context.
  * @since 3.1
  */
-export var useOffset = () => {
+export const useOffset = (): ChartOffset | undefined => {
 	return useAppSelector(selectChartOffset);
 };
 
@@ -398,7 +422,7 @@ export var useOffset = () => {
  * @returns Plot area of the chart in pixels, or undefined if used outside a chart context.
  * @since 3.1
  */
-export var usePlotArea = () => {
+export const usePlotArea = (): PlotArea | undefined => {
 	return useAppSelector(selectPlotArea);
 };
 
@@ -420,7 +444,7 @@ export var usePlotArea = () => {
  *
  * @since 3.1
  */
-export var useActiveTooltipDataPoints = () => {
+export const useActiveTooltipDataPoints = <T = unknown>(): ReadonlyArray<T> | undefined => {
 	return useAppSelector(selectActiveTooltipDataPoints);
 };
 
@@ -440,9 +464,10 @@ export var useActiveTooltipDataPoints = () => {
  * @returns The domain of the X-axis, or `undefined` if it cannot be calculated or if used outside a chart context.
  * @since 3.2
  */
-export var useXAxisDomain = function useXAxisDomain() {
-	var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
-	var isPanorama = useIsPanorama();
+export const useXAxisDomain = (
+	xAxisId: AxisId = defaultAxisId,
+): NumberDomain | CategoricalDomain | undefined => {
+	const isPanorama = useIsPanorama();
 	return useAppSelector((state) => selectAxisDomain(state, 'xAxis', xAxisId, isPanorama));
 };
 
@@ -461,9 +486,10 @@ export var useXAxisDomain = function useXAxisDomain() {
  * @returns The domain of the Y-axis, or `undefined` if it cannot be calculated or if used outside a chart context.
  * @since 3.2
  */
-export var useYAxisDomain = function useYAxisDomain() {
-	var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultAxisId;
-	var isPanorama = useIsPanorama();
+export const useYAxisDomain = (
+	yAxisId: AxisId = defaultAxisId,
+): NumberDomain | CategoricalDomain | undefined => {
+	const isPanorama = useIsPanorama();
 	return useAppSelector((state) => selectAxisDomain(state, 'yAxis', yAxisId, isPanorama));
 };
 
@@ -478,12 +504,8 @@ export var useYAxisDomain = function useYAxisDomain() {
  * @returns {boolean} True if the Tooltip is active, false otherwise.
  * @since 3.7
  */
-export var useIsTooltipActive = () => {
-	var _useAppSelector;
-	return (_useAppSelector = useAppSelector(selectIsTooltipActive)) !== null &&
-		_useAppSelector !== void 0
-		? _useAppSelector
-		: false;
+export const useIsTooltipActive = (): boolean => {
+	return useAppSelector(selectIsTooltipActive) ?? false;
 };
 
 /**
@@ -497,8 +519,8 @@ export var useIsTooltipActive = () => {
  * @returns {Coordinate | undefined} The coordinate of the active Tooltip, or undefined.
  * @since 3.7
  */
-export var useActiveTooltipCoordinate = () => {
-	var coordinate = useAppSelector(selectActiveTooltipCoordinate);
+export const useActiveTooltipCoordinate = (): Coordinate | undefined => {
+	const coordinate = useAppSelector(selectActiveTooltipCoordinate);
 	if (coordinate == null) {
 		return undefined;
 	}