@octanejs/recharts 0.1.41 → 0.1.43

package/src/chart/CartesianChart.tsrx

@@ -1,3 +1,16 @@
+import type { ChartOptions } from '../state/optionsSlice';
+import type { CartesianChartProps, Margin, TooltipEventType } from '../util/types';
+import type { TooltipPayloadSearcher } from '../state/tooltipSlice';
+import type { Ref } from '../util/OctaneTypes.ts';
+
+export type CartesianChartOptions = {
+	chartName: string;
+	defaultTooltipEventType: TooltipEventType;
+	validateTooltipEventTypes: ReadonlyArray<TooltipEventType>;
+	tooltipPayloadSearcher: TooltipPayloadSearcher;
+	categoricalChartProps: CartesianChartProps;
+	ref?: Ref<SVGSVGElement>;
+};
 // Port of chart/CartesianChart.tsx — the store provider + reporter components
 // every cartesian chart (BarChart, LineChart, …) shares.
 import { RechartsStoreProvider } from '../state/RechartsStoreProvider.tsrx';
@@ -9,7 +22,7 @@ import { CategoricalChart } from './CategoricalChart.tsrx';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
 import { initialEventSettingsState } from '../state/eventSettingsSlice';
 
-const defaultMargin = { top: 5, right: 5, bottom: 5, left: 5 };
+const defaultMargin: Margin = { top: 5, right: 5, bottom: 5, left: 5 };
 
 export const defaultCartesianChartProps = {
 	accessibilityLayer: true,
@@ -22,13 +35,13 @@ export const defaultCartesianChartProps = {
 	stackOffset: 'none',
 	syncMethod: 'index',
 	...initialEventSettingsState,
-};
+} as const satisfies Partial<CartesianChartProps>;
 
 /**
  * One-time, immutable options deciding chart behavior — usually filled in by
  * the convenience wrappers (BarChart, LineChart, …).
  */
-export function CartesianChart(props) @{
+export function CartesianChart(props: CartesianChartOptions) @{
 	const rootChartProps = resolveDefaultProps(
 		props.categoricalChartProps,
 		defaultCartesianChartProps,
@@ -41,7 +54,7 @@ export function CartesianChart(props) @{
 		categoricalChartProps,
 		ref,
 	} = props;
-	const options = {
+	const options: ChartOptions = {
 		chartName,
 		defaultTooltipEventType,
 		validateTooltipEventTypes,

package/src/chart/CategoricalChart.tsrx

@@ -1,3 +1,6 @@
+import type { CartesianChartProps } from '../util/types';
+import type { Ref } from '../util/OctaneTypes.ts';
+
 // Port of chart/CategoricalChart.tsx — the wrapper-div + root-svg pairing
 // (or, in compact/panorama mode, just the bare surface).
 import { RootSurface } from '../container/RootSurface.tsrx';
@@ -6,7 +9,7 @@ import { ClipPathProvider } from '../container/ClipPathProvider.tsrx';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
 import { ReportChartSize } from '../context/chartLayoutContext.ts';
 
-export function CategoricalChart(props) {
+export function CategoricalChart(props: CartesianChartProps & { ref?: Ref<SVGSVGElement> }) {
 	const {
 		width,
 		height,

package/src/chart/ComposedChart.tsrx

@@ -1,3 +1,5 @@
+import type { Ref } from '../util/OctaneTypes.ts';
+
 import { arrayTooltipSearcher } from '../state/optionsSlice';
 import { CartesianChart } from './CartesianChart.tsrx';
 import { CartesianChartProps, TooltipEventType } from '../util/types';
@@ -9,7 +11,9 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function ComposedChart(props: CartesianChartProps<unknown>) {
+export function ComposedChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	return <CartesianChart
 		chartName="ComposedChart"

package/src/chart/FunnelChart.tsrx

@@ -1,3 +1,5 @@
+import type { Ref } from '../util/OctaneTypes.ts';
+
 import { arrayTooltipSearcher } from '../state/optionsSlice';
 import { CartesianChart } from './CartesianChart.tsrx';
 import { CartesianChartProps, TooltipEventType } from '../util/types';
@@ -9,7 +11,9 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['item'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function FunnelChart(props: CartesianChartProps<unknown>) {
+export function FunnelChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	return <CartesianChart
 		chartName="FunnelChart"

package/src/chart/LineChart.tsrx

@@ -1,15 +1,21 @@
+import type { CartesianChartProps } from '../util/types';
+import type { Ref } from '../util/OctaneTypes.ts';
+import type { TooltipEventType } from '../util/types';
+
 // Port of chart/LineChart.tsx.
 import { arrayTooltipSearcher } from '../state/optionsSlice';
 import { CartesianChart } from './CartesianChart.tsrx';
 
-const allowedTooltipTypes = ['axis'];
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis'];
 
 /**
  * @consumes ResponsiveContainerContext
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function LineChart(props) {
+export function LineChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	return <CartesianChart
 		chartName="LineChart"

package/src/chart/PieChart.tsrx

@@ -1,5 +1,7 @@
+import type { Ref } from '../util/OctaneTypes.ts';
+
 import { arrayTooltipSearcher } from '../state/optionsSlice';
-import { defaultPolarChartProps, PolarChart } from './PolarChart';
+import { defaultPolarChartProps, PolarChart } from './PolarChart.tsrx';
 import { PolarChartProps, TooltipEventType } from '../util/types';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
 
@@ -17,7 +19,9 @@ export const defaultPieChartProps = {
  * @provides PolarViewBoxContext
  * @provides PolarChartContext
  */
-export function PieChart(props: PolarChartProps<unknown>) {
+export function PieChart<DataPointType = unknown>(props: PolarChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	const propsWithDefaults = resolveDefaultProps(rest, defaultPieChartProps);
 	return <PolarChart

package/src/chart/PolarChart.tsrx

@@ -1,15 +1,16 @@
 import { ChartOptions } from '../state/optionsSlice';
-import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
+import { RechartsStoreProvider } from '../state/RechartsStoreProvider.tsrx';
 import { ChartDataContextProvider } from '../context/chartDataContext';
 import { ReportMainChartProps } from '../state/ReportMainChartProps';
 import { ReportChartProps } from '../state/ReportChartProps';
 import { ReportEventSettings } from '../state/ReportEventSettings';
-import { ReportPolarOptions } from '../state/ReportPolarOptions';
+import { ReportPolarOptions } from '../state/ReportPolarOptions.tsrx';
 import { Margin, PolarChartProps, TooltipEventType } from '../util/types';
 import { TooltipPayloadSearcher } from '../state/tooltipSlice';
-import { CategoricalChart } from './CategoricalChart';
+import { CategoricalChart } from './CategoricalChart.tsrx';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
 import { initialEventSettingsState } from '../state/eventSettingsSlice';
+import type { Ref } from '../util/OctaneTypes.ts';
 
 const defaultMargin: Margin = { top: 5, right: 5, bottom: 5, left: 5 };
 
@@ -64,7 +65,7 @@ export type PolarChartOptions = {
 	categoricalChartProps: PolarChartPropsWithDefaults;
 };
 
-export function PolarChart(props: PolarChartOptions & { ref?: unknown }) {
+export function PolarChart(props: PolarChartOptions & { ref?: Ref<SVGSVGElement> }) {
 	const { ref } = props;
 	const polarChartProps = resolveDefaultProps(props.categoricalChartProps, defaultPolarChartProps);
 

package/src/chart/RadarChart.tsrx

@@ -1,7 +1,9 @@
+import type { Ref } from '../util/OctaneTypes.ts';
+
 import { arrayTooltipSearcher } from '../state/optionsSlice';
 import { PolarChartProps, PolarLayout, TooltipEventType } from '../util/types';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
-import { defaultPolarChartProps, PolarChart } from './PolarChart';
+import { defaultPolarChartProps, PolarChart } from './PolarChart.tsrx';
 
 const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis'];
 
@@ -39,7 +41,9 @@ type RadarChartProps<DataPointType> =
  * @provides PolarViewBoxContext
  * @provides PolarChartContext
  */
-export function RadarChart(props: RadarChartProps<unknown>) {
+export function RadarChart<DataPointType = unknown>(props: RadarChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	const propsWithDefaults = resolveDefaultProps(rest, defaultRadarChartProps);
 	return <PolarChart

package/src/chart/RadialBarChart.tsrx

@@ -1,7 +1,9 @@
+import type { Ref } from '../util/OctaneTypes.ts';
+
 import { arrayTooltipSearcher } from '../state/optionsSlice';
 import { PolarChartProps, TooltipEventType } from '../util/types';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
-import { defaultPolarChartProps, PolarChart } from './PolarChart';
+import { defaultPolarChartProps, PolarChart } from './PolarChart.tsrx';
 
 const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis', 'item'];
 
@@ -17,7 +19,9 @@ export const defaultRadialBarChartProps = {
  * @provides PolarViewBoxContext
  * @provides PolarChartContext
  */
-export function RadialBarChart(props: PolarChartProps<unknown>) {
+export function RadialBarChart<DataPointType = unknown>(props: PolarChartProps<DataPointType> & {
+	ref?: Ref<SVGSVGElement>;
+}) {
 	const { ref, ...rest } = props;
 	const propsWithDefaults = resolveDefaultProps(rest, defaultRadialBarChartProps);
 	return <PolarChart

package/src/chart/RechartsWrapper.tsrx

@@ -1,3 +1,39 @@
+import type {
+	CSSProperties,
+	HTMLAttributes,
+	MutableRefObject,
+	NativeKeyboardEvent,
+	NativeMouseEvent,
+	NativeTouchEvent,
+	OctaneNode,
+	Ref,
+} from '../util/OctaneTypes.ts';
+import type { ExternalMouseEvents } from './types';
+import type { Percent } from '../util/types';
+
+export type RechartsWrapperProps =
+	ExternalMouseEvents & {
+		children: OctaneNode;
+		width: number | Percent | undefined;
+		height: number | Percent | undefined;
+		responsive: boolean;
+		className?: string;
+		style?: CSSProperties;
+		ref?: Ref<HTMLDivElement>;
+		dispatchTouchEvents?: boolean;
+	};
+type WrapperDivProps =
+	Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+		width: number | string | undefined;
+		height: number | string | undefined;
+		style?: CSSProperties;
+		ref?: Ref<HTMLDivElement>;
+	};
+type StaticDivProps =
+	Omit<WrapperDivProps, 'width' | 'height'> & {
+		width: number;
+		height: number;
+	};
 // Port of chart/RechartsWrapper.tsx — the outer <div class="recharts-wrapper">:
 // hosts the tooltip/legend portals, reports container size (static, read-once,
 // or ResizeObserver-driven), measures CSS scale, and feeds every user
@@ -27,7 +63,7 @@ function EventSynchronizer() {
 	return null;
 }
 
-function getNumberOrZero(value) {
+function getNumberOrZero(value: number | string | undefined) {
 	if (typeof value === 'number') {
 		return value;
 	}
@@ -40,9 +76,9 @@ function getNumberOrZero(value) {
 	return 0;
 }
 
-function ResponsiveDiv(props) {
+function ResponsiveDiv(props: WrapperDivProps) {
 	const { ref, ...divProps } = props;
-	const observerRef = useRef(null);
+	const observerRef: MutableRefObject<ResizeObserver | null> = useRef(null);
 	const [sizes, setSizes] = useState({
 		containerWidth: getNumberOrZero(props.style?.width),
 		containerHeight: getNumberOrZero(props.style?.height),
@@ -73,7 +109,7 @@ function ResponsiveDiv(props) {
 		if (node != null && typeof ResizeObserver !== 'undefined') {
 			const { width: containerWidth, height: containerHeight } = node.getBoundingClientRect();
 			setContainerSize(containerWidth, containerHeight);
-			const callback = (entries) => {
+			const callback = (entries: ResizeObserverEntry[]) => {
 				const entry = entries[0];
 				if (entry == null) {
 					return;
@@ -100,7 +136,7 @@ function ResponsiveDiv(props) {
 	</>;
 }
 
-function ReadSizeOnceDiv(props) {
+function ReadSizeOnceDiv(props: WrapperDivProps) {
 	// Upstream spreads the FULL props onto the div — width/height included
 	// (they pass through as plain attributes).
 	const { ref, width, height, ...rest } = props;
@@ -136,7 +172,7 @@ function ReadSizeOnceDiv(props) {
 	</>;
 }
 
-function StaticDiv(props) {
+function StaticDiv(props: StaticDivProps) {
 	const { ref, width, height, ...rest } = props;
 	const divProps = { width, height, ...rest };
 	return <>
@@ -145,7 +181,7 @@ function StaticDiv(props) {
 	</>;
 }
 
-function NonResponsiveDiv(props) {
+function NonResponsiveDiv(props: WrapperDivProps) {
 	const { width, height } = props;
 	// Percentage/CSS-string sizes: read the real size from the DOM once.
 	if (typeof width === 'string' || typeof height === 'string') {
@@ -164,7 +200,7 @@ function NonResponsiveDiv(props) {
 	</>;
 }
 
-export function RechartsWrapper(props) {
+export function RechartsWrapper(props: RechartsWrapperProps) {
 	const {
 		children,
 		className,
@@ -186,7 +222,7 @@ export function RechartsWrapper(props) {
 		dispatchTouchEvents = true,
 		ref,
 	} = props;
-	const containerRef = useRef(null);
+	const containerRef: MutableRefObject<HTMLDivElement | null> = useRef<HTMLDivElement | null>(null);
 	const dispatch = useAppDispatch();
 	const [tooltipPortal, setTooltipPortal] = useState(null);
 	const [legendPortal, setLegendPortal] = useState(null);
@@ -211,19 +247,19 @@ export function RechartsWrapper(props) {
 			containerRef.current = node;
 		}
 	}, [setScaleRef, ref, setTooltipPortal, setLegendPortal]);
-	const myOnClick = useCallback((e) => {
+	const myOnClick = useCallback((e: NativeMouseEvent<HTMLDivElement>) => {
 		dispatch(mouseClickAction(e));
 		dispatch(externalEventAction({ handler: onClick, reactEvent: e }));
 	}, [dispatch, onClick]);
-	const myOnMouseEnter = useCallback((e) => {
+	const myOnMouseEnter = useCallback((e: NativeMouseEvent<HTMLDivElement>) => {
 		dispatch(mouseMoveAction(e));
 		dispatch(externalEventAction({ handler: onMouseEnter, reactEvent: e }));
 	}, [dispatch, onMouseEnter]);
-	const myOnMouseLeave = useCallback((e) => {
+	const myOnMouseLeave = useCallback((e: NativeMouseEvent<HTMLDivElement>) => {
 		dispatch(mouseLeaveChart());
 		dispatch(externalEventAction({ handler: onMouseLeave, reactEvent: e }));
 	}, [dispatch, onMouseLeave]);
-	const myOnMouseMove = useCallback((e) => {
+	const myOnMouseMove = useCallback((e: NativeMouseEvent<HTMLDivElement>) => {
 		dispatch(mouseMoveAction(e));
 		dispatch(externalEventAction({ handler: onMouseMove, reactEvent: e }));
 	}, [dispatch, onMouseMove]);
@@ -233,33 +269,33 @@ export function RechartsWrapper(props) {
 	const onBlur = useCallback(() => {
 		dispatch(blurAction());
 	}, [dispatch]);
-	const onKeyDown = useCallback((e) => {
+	const onKeyDown = useCallback((e: NativeKeyboardEvent<HTMLDivElement>) => {
 		dispatch(keyDownAction(e.key));
 	}, [dispatch]);
-	const myOnContextMenu = useCallback((e) => {
+	const myOnContextMenu = useCallback((e: NativeMouseEvent<HTMLDivElement>) => {
 		dispatch(externalEventAction({ handler: onContextMenu, reactEvent: e }));
 	}, [dispatch, onContextMenu]);
-	const myOnDoubleClick = useCallback((e) => {
+	const myOnDoubleClick = useCallback((e: NativeMouseEvent<HTMLDivElement>) => {
 		dispatch(externalEventAction({ handler: onDoubleClick, reactEvent: e }));
 	}, [dispatch, onDoubleClick]);
-	const myOnMouseDown = useCallback((e) => {
+	const myOnMouseDown = useCallback((e: NativeMouseEvent<HTMLDivElement>) => {
 		dispatch(externalEventAction({ handler: onMouseDown, reactEvent: e }));
 	}, [dispatch, onMouseDown]);
-	const myOnMouseUp = useCallback((e) => {
+	const myOnMouseUp = useCallback((e: NativeMouseEvent<HTMLDivElement>) => {
 		dispatch(externalEventAction({ handler: onMouseUp, reactEvent: e }));
 	}, [dispatch, onMouseUp]);
-	const myOnTouchStart = useCallback((e) => {
+	const myOnTouchStart = useCallback((e: NativeTouchEvent<HTMLDivElement>) => {
 		dispatch(externalEventAction({ handler: onTouchStart, reactEvent: e }));
 	}, [dispatch, onTouchStart]);
 	// Touch has no enter/leave; the middleware resolves the touched element via
 	// document.elementFromPoint.
-	const myOnTouchMove = useCallback((e) => {
+	const myOnTouchMove = useCallback((e: NativeTouchEvent<HTMLDivElement>) => {
 		if (dispatchTouchEvents) {
 			dispatch(touchEventAction(e));
 		}
 		dispatch(externalEventAction({ handler: onTouchMove, reactEvent: e }));
 	}, [dispatch, dispatchTouchEvents, onTouchMove]);
-	const myOnTouchEnd = useCallback((e) => {
+	const myOnTouchEnd = useCallback((e: NativeTouchEvent<HTMLDivElement>) => {
 		dispatch(externalEventAction({ handler: onTouchEnd, reactEvent: e }));
 	}, [dispatch, onTouchEnd]);
 	const WrapperDiv = responsive ? ResponsiveDiv : NonResponsiveDiv;