@octanejs/recharts 0.1.40 → 0.1.42

package/src/shape/Cross.tsrx

@@ -1,14 +1,26 @@
+import type { SVGProps } from '../util/OctaneTypes.ts';
+
+interface CrossProps {
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+	top?: number;
+	left?: number;
+	className?: SVGProps<SVGPathElement>['className'];
+}
+export type Props = SVGProps<SVGPathElement> & CrossProps;
 // Port of shape/Cross.tsx — the axis-cursor crosshair (a vertical + horizontal
 // line pair as one path).
 import { clsx } from 'clsx';
 import { isNumber } from '../util/DataUtils';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 
-function getPath(x, y, width, height, top, left) {
+function getPath(x: number, y: number, width: number, height: number, top: number, left: number) {
 	return 'M' + x + ',' + top + 'v' + height + 'M' + left + ',' + y + 'h' + width;
 }
 
-export function Cross(crossProps) {
+export function Cross(crossProps: Props) {
 	const { x = 0, y = 0, top = 0, left = 0, width = 0, height = 0, className, ...rest } = crossProps;
 	const props = { x, y, top, left, width, height, ...rest };
 	if (

package/src/shape/Curve.tsrx

@@ -1,3 +1,83 @@
+import type { Ref, SVGProps } from '../util/OctaneTypes.ts';
+import type {
+	Area as D3AreaCurve,
+	CurveFactory,
+	Line as D3LineCurve,
+} from 'victory-vendor/d3-shape';
+import type {
+	Coordinate,
+	LayoutType,
+	NullableCoordinate,
+	PresentationAttributesWithProps,
+	RechartsMouseEventHandler,
+} from '../util/types';
+
+interface CurveFactories {
+	[index: string]: CurveFactory;
+}
+export type CurveType =
+	| 'basis'
+	| 'basisClosed'
+	| 'basisOpen'
+	| 'bumpX'
+	| 'bumpY'
+	| 'bump'
+	| 'linear'
+	| 'linearClosed'
+	| 'natural'
+	| 'monotoneX'
+	| 'monotoneY'
+	| 'monotone'
+	| 'step'
+	| 'stepBefore'
+	| 'stepAfter'
+	| CurveFactory;
+type AreaPoint =
+	Coordinate & {
+		base: Coordinate;
+	};
+type NullableAreaPoint =
+	NullableCoordinate & {
+		base?: NullableCoordinate;
+	};
+export type BaseLineType = number | ReadonlyArray<NullableCoordinate>;
+interface CurveProps {
+	className?: SVGProps<SVGPathElement>['className'];
+	type?: CurveType;
+	layout?: LayoutType;
+	baseLine?: BaseLineType;
+	points?: ReadonlyArray<NullableCoordinate>;
+	connectNulls?: boolean;
+	path?: string;
+	pathRef?: Ref<SVGPathElement>;
+	strokeDasharray?: string | number;
+}
+export type CurveMouseEventHandler = RechartsMouseEventHandler<Props, SVGPathElement>;
+type CurveMouseEvents = {
+	onClick?: CurveMouseEventHandler;
+	onMouseEnter?: CurveMouseEventHandler;
+	onMouseLeave?: CurveMouseEventHandler;
+	onMouseDown?: CurveMouseEventHandler;
+	onMouseUp?: CurveMouseEventHandler;
+	onMouseMove?: CurveMouseEventHandler;
+	onMouseOver?: CurveMouseEventHandler;
+	onMouseOut?: CurveMouseEventHandler;
+};
+export type Props =
+	Omit<
+		PresentationAttributesWithProps<CurveProps, SVGPathElement>,
+		| 'type'
+		| 'points'
+		| 'onClick'
+		| 'onMouseEnter'
+		| 'onMouseLeave'
+		| 'onMouseDown'
+		| 'onMouseUp'
+		| 'onMouseMove'
+		| 'onMouseOver'
+		| 'onMouseOut'
+	> & CurveMouseEvents & CurveProps;
+type GetPathProps = Pick<Props, 'type' | 'points' | 'baseLine' | 'layout' | 'connectNulls'>;
 // Port of shape/Curve.tsx — the line/area path. The `d` string comes straight
 // from victory-vendor's d3-shape line/area generators (same dependency, same
 // version as upstream), so output is byte-identical by construction.
@@ -25,7 +105,7 @@ import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
 import { useChartLayout } from '../context/chartLayoutContext.ts';
 
-const CURVE_FACTORIES = {
+const CURVE_FACTORIES: CurveFactories = {
 	curveBasisClosed,
 	curveBasisOpen,
 	curveBasis,
@@ -41,12 +121,12 @@ const CURVE_FACTORIES = {
 	curveStepBefore,
 };
 
-const defined = (p) => isWellBehavedNumber(p.x) && isWellBehavedNumber(p.y);
-const areaDefined = (d) => d.base != null && defined(d.base) && defined(d);
-const getX = (p) => p.x;
-const getY = (p) => p.y;
+const defined = (p: NullableCoordinate) => isWellBehavedNumber(p.x) && isWellBehavedNumber(p.y);
+const areaDefined = (d: NullableAreaPoint) => d.base != null && defined(d.base) && defined(d);
+const getX = (p: Coordinate) => p.x;
+const getY = (p: Coordinate) => p.y;
 
-const getCurveFactory = (type, layout) => {
+const getCurveFactory = (type: CurveType, layout: LayoutType | undefined) => {
 	if (typeof type === 'function') {
 		return type;
 	}
@@ -63,7 +143,7 @@ const getCurveFactory = (type, layout) => {
 export const defaultCurveProps = {
 	connectNulls: false,
 	type: 'linear',
-};
+} as const satisfies Partial<Props>;
 
 /**
  * Calculate the path of curve. Returns null if points is an empty array.
@@ -75,52 +155,60 @@ export const getPath = ({
 	baseLine,
 	layout,
 	connectNulls = defaultCurveProps.connectNulls,
-}) => {
+}: GetPathProps): string | null => {
 	const curveFactory = getCurveFactory(type, layout);
-	const formatPoints =
+	const formatPoints: ReadonlyArray<NullableCoordinate> =
 		connectNulls ? points.filter(defined) : points;
 
 	// An area chart's array `baseLine` pairs each point with its baseline
 	// counterpart FIRST, so the `defined` filter drops both sides together.
 	if (Array.isArray(baseLine)) {
-		const areaPoints = points.map((entry, index) => ({ ...entry, base: baseLine[index] }));
-		let lineFunction;
+		const areaPoints: ReadonlyArray<NullableAreaPoint> = points.map(
+			(entry, index) => ({ ...entry, base: baseLine[index] }),
+		);
+		let lineFunction: D3AreaCurve<AreaPoint>;
 		if (layout === 'vertical') {
-			lineFunction = shapeArea().y(getY).x1(getX).x0((d) => d.base.x);
+			lineFunction = shapeArea<AreaPoint>().y(getY).x1(getX).x0((d) => d.base.x);
 		} else {
-			lineFunction = shapeArea().x(getX).y1(getY).y0((d) => d.base.y);
+			lineFunction = shapeArea<AreaPoint>().x(getX).y1(getY).y0((d) => d.base.y);
 		}
-		const nullableLineFunction = lineFunction.defined(areaDefined).curve(curveFactory);
-		const finalPoints =
+		// d3 runs the defined predicate before coordinate accessors; its single
+		// generic cannot express the nullable inputs accepted after this guard.
+		const nullableLineFunction = lineFunction.defined(areaDefined).curve(
+			curveFactory,
+		) as D3AreaCurve<NullableAreaPoint>;
+		const finalPoints: ReadonlyArray<NullableAreaPoint> =
 			connectNulls ? areaPoints.filter(areaDefined) : areaPoints;
 		return nullableLineFunction(finalPoints);
 	}
-	let lineFunction;
+	let lineFunction: D3LineCurve<Coordinate> | D3AreaCurve<Coordinate>;
 	if (layout === 'vertical' && isNumber(baseLine)) {
-		lineFunction = shapeArea().y(getY).x1(getX).x0(baseLine);
+		lineFunction = shapeArea<Coordinate>().y(getY).x1(getX).x0(baseLine);
 	} else if (isNumber(baseLine)) {
-		lineFunction = shapeArea().x(getX).y1(getY).y0(baseLine);
+		lineFunction = shapeArea<Coordinate>().x(getX).y1(getY).y0(baseLine);
 	} else {
-		lineFunction = shapeLine().x(getX).y(getY);
+		lineFunction = shapeLine<Coordinate>().x(getX).y(getY);
 	}
-	const nullableLineFunction = lineFunction.defined(defined).curve(curveFactory);
+	const nullableLineFunction = lineFunction.defined(defined).curve(curveFactory) as D3LineCurve<
+		NullableCoordinate
+	>;
 	return nullableLineFunction(formatPoints);
 };
 
-export function Curve(props) {
+export function Curve(props: Props) {
 	const { className, points, path, pathRef } = props;
 	const layout = useChartLayout();
 	if ((!points || !points.length) && !path) {
 		return null;
 	}
-	const getPathInput = {
+	const getPathInput: GetPathProps = {
 		type: props.type,
 		points: props.points,
 		baseLine: props.baseLine,
 		layout: props.layout || layout,
 		connectNulls: props.connectNulls,
 	};
-	const realPath =
+	const realPath: string | null | undefined =
 		points && points.length ? getPath(getPathInput) : path;
 	return <path
 		{...svgPropertiesNoEvents(props)}

package/src/shape/Dot.tsrx

@@ -1,10 +1,21 @@
+import type { SVGProps } from '../util/OctaneTypes.ts';
+import type { PresentationAttributesWithProps } from '../util/types';
+
+interface DotProps {
+	className?: SVGProps<SVGCircleElement>['className'];
+	cx?: number;
+	cy?: number;
+	r?: number | string;
+	clipDot?: boolean;
+}
+export type Props = PresentationAttributesWithProps<DotProps, SVGCircleElement> & DotProps;
 // Port of shape/Dot.tsx — a circle marker.
 import { clsx } from 'clsx';
 import { adaptEventHandlers } from '../util/types.ts';
 import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
 import { isNumber } from '../util/DataUtils';
 
-export function Dot(props) {
+export function Dot(props: Props) {
 	const { cx, cy, r, className } = props;
 	const layerClass = clsx('recharts-dot', className);
 	if (isNumber(cx) && isNumber(cy) && isNumber(r)) {

package/src/shape/Polygon.tsrx

@@ -1,15 +1,33 @@
+import type { NativeMouseEvent, SVGProps } from '../util/OctaneTypes.ts';
+import type { Coordinate } from '../util/types';
+
+interface PolygonProps {
+	className?: SVGProps<SVGPathElement>['className'];
+	points?: ReadonlyArray<Coordinate>;
+	baseLinePoints?: ReadonlyArray<Coordinate>;
+	connectNulls?: boolean;
+	onClick?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseDown?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseUp?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseMove?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOver?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOut?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseEnter?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseLeave?: (e: NativeMouseEvent<SVGPathElement>) => void;
+}
+export type Props = Omit<SVGProps<SVGPathElement>, 'points'> & PolygonProps;
 // Port of shape/Polygon.tsx — closed/segmented polygon paths (Radar,
 // PolarGrid). Path strings mirror upstream's roundTemplateLiteral output.
 import { clsx } from 'clsx';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 import { round } from '../util/round';
 
-function isValidatePoint(point) {
+function isValidatePoint(point: Coordinate | undefined) {
 	return point != null && point.x === +point.x && point.y === +point.y;
 }
 
-function getParsedPoints(points = []) {
-	let segmentPoints = [[]];
+function getParsedPoints(points: ReadonlyArray<Coordinate> = []) {
+	let segmentPoints: Coordinate[][] = [[]];
 	points.forEach((entry) => {
 		const lastLink = segmentPoints[segmentPoints.length - 1];
 		if (isValidatePoint(entry)) {
@@ -32,7 +50,7 @@ function getParsedPoints(points = []) {
 	return segmentPoints;
 }
 
-function getSinglePolygonPath(points, connectNulls) {
+function getSinglePolygonPath(points: ReadonlyArray<Coordinate>, connectNulls?: boolean) {
 	let segmentPoints = getParsedPoints(points);
 	if (connectNulls) {
 		segmentPoints = [segmentPoints.reduce((res, segPoints) => [...res, ...segPoints], [])];
@@ -47,13 +65,17 @@ function getSinglePolygonPath(points, connectNulls) {
 	return segmentPoints.length === 1 ? polygonPath + 'Z' : polygonPath;
 }
 
-function getRanglePath(points, baseLinePoints, connectNulls) {
+function getRanglePath(
+	points: ReadonlyArray<Coordinate>,
+	baseLinePoints: ReadonlyArray<Coordinate>,
+	connectNulls?: boolean,
+) {
 	const outerPath = getSinglePolygonPath(points, connectNulls);
 	return (outerPath.slice(-1) === 'Z' ? outerPath.slice(0, -1) : outerPath) + 'L' +
 		getSinglePolygonPath(Array.from(baseLinePoints).reverse(), connectNulls).slice(1);
 }
 
-export function Polygon(props) {
+export function Polygon(props: Props) {
 	const { points, className, baseLinePoints, connectNulls, ...others } = props;
 	if (!points || !points.length) {
 		return null;

package/src/shape/Rectangle.tsrx

@@ -1,3 +1,30 @@
+import type { NativeMouseEvent, SVGProps } from '../util/OctaneTypes.ts';
+import type { AnimationDuration } from '../util/types';
+import type { EasingInput } from '../animation/easing';
+
+export type RectRadius = number | [number, number, number, number];
+interface RectangleProps {
+	className?: SVGProps<SVGPathElement>['className'];
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+	radius?: RectRadius;
+	isAnimationActive?: boolean;
+	isUpdateAnimationActive?: boolean;
+	animationBegin?: number;
+	animationDuration?: AnimationDuration;
+	animationEasing?: EasingInput;
+	onClick?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseDown?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseUp?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseMove?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOver?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOut?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseEnter?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseLeave?: (e: NativeMouseEvent<SVGPathElement>) => void;
+}
+export type Props = Omit<SVGProps<SVGPathElement>, 'radius'> & RectangleProps;
 // Port of shape/Rectangle.tsx — a rectangle path with per-corner rounding.
 // Phase 0 ports the STATIC path (isUpdateAnimationActive defaults false, and
 // standalone Rectangles never animate); the width/height update animation and
@@ -10,7 +37,7 @@ import { resolveDefaultProps } from '../util/resolveDefaultProps';
 import { round } from '../util/round';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 
-function getRectanglePath(x, y, width, height, radius) {
+function getRectanglePath(x: number, y: number, width: number, height: number, radius: RectRadius) {
 	const roundedWidth = round(width);
 	const roundedHeight = round(height);
 	const maxRadius = Math.min(Math.abs(roundedWidth) / 2, Math.abs(roundedHeight) / 2);
@@ -134,9 +161,9 @@ export const defaultRectangleProps = {
 	animationBegin: 0,
 	animationDuration: 1500,
 	animationEasing: 'ease',
-};
+} as const satisfies Partial<Props>;
 
-export function Rectangle(rectangleProps) {
+export function Rectangle(rectangleProps: Props) {
 	const props = resolveDefaultProps(rectangleProps, defaultRectangleProps);
 	const { x, y, width, height, radius, className } = props;
 

package/src/shape/Sector.tsrx

@@ -1,3 +1,38 @@
+import type { NativeMouseEvent, SVGProps } from '../util/OctaneTypes.ts';
+import type { GeometrySector, GeometrySectorWithCornerRadius } from '../util/types';
+
+interface TangentCircleDef {
+	cx: number;
+	cy: number;
+	radius: number;
+	angle: number;
+	sign: number;
+	isExternal?: boolean;
+	cornerRadius: number;
+	cornerIsExternal?: boolean;
+}
+interface SectorProps {
+	className?: SVGProps<SVGPathElement>['className'];
+	cx?: number;
+	cy?: number;
+	innerRadius?: number;
+	outerRadius?: number;
+	startAngle?: number;
+	endAngle?: number;
+	cornerRadius?: number;
+	forceCornerRadius?: boolean;
+	cornerIsExternal?: boolean;
+	onClick?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseDown?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseUp?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseMove?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOver?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOut?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseEnter?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseLeave?: (e: NativeMouseEvent<SVGPathElement>) => void;
+}
+export type Props =
+	Omit<SVGProps<SVGPathElement>, 'cx' | 'cy' | 'dangerouslySetInnerHTML'> & Partial<SectorProps>;
 // Port of shape/Sector.tsx — the pie/radial-bar wedge (arc path with optional
 // per-corner rounding). Path strings must be BYTE-IDENTICAL to upstream:
 // recharts builds them with roundTemplateLiteral (every interpolated number
@@ -11,7 +46,7 @@ import { resolveDefaultProps } from '../util/resolveDefaultProps';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 import { roundTemplateLiteral } from '../util/round';
 
-const getDeltaAngle = (startAngle, endAngle) => {
+const getDeltaAngle = (startAngle: number, endAngle: number) => {
 	const sign = mathSign(endAngle - startAngle);
 	const deltaAngle = Math.min(Math.abs(endAngle - startAngle), 359.999);
 	return sign * deltaAngle;
@@ -26,7 +61,7 @@ const getTangentCircle = ({
 	isExternal,
 	cornerRadius,
 	cornerIsExternal,
-}) => {
+}: TangentCircleDef) => {
 	const centerRadius = cornerRadius * (isExternal ? 1 : -1) + radius;
 	const theta = Math.asin(cornerRadius / centerRadius) / RADIAN;
 	const centerAngle = cornerIsExternal ? angle : angle + sign * theta;
@@ -44,7 +79,14 @@ const getTangentCircle = ({
 	return { center, circleTangency, lineTangency, theta };
 };
 
-const getSectorPath = ({ cx, cy, innerRadius, outerRadius, startAngle, endAngle }) => {
+const getSectorPath = ({
+	cx,
+	cy,
+	innerRadius,
+	outerRadius,
+	startAngle,
+	endAngle,
+}: GeometrySector) => {
 	const angle = getDeltaAngle(startAngle, endAngle);
 
 	// When the angle of sector equals to 360, start point and end point coincide
@@ -85,7 +127,7 @@ const getSectorWithCorner = ({
 	cornerIsExternal,
 	startAngle,
 	endAngle,
-}) => {
+}: GeometrySectorWithCornerRadius) => {
 	const sign = mathSign(endAngle - startAngle);
 	const { circleTangency: soct, lineTangency: solt, theta: sot } = getTangentCircle({
 		cx,
@@ -177,9 +219,9 @@ export const defaultSectorProps = {
 	cornerRadius: 0,
 	forceCornerRadius: false,
 	cornerIsExternal: false,
-};
+} as const satisfies Partial<Props>;
 
-export function Sector(sectorProps) {
+export function Sector(sectorProps: Props) {
 	const props = resolveDefaultProps(sectorProps, defaultSectorProps);
 	const {
 		cx,

package/src/shape/Symbols.tsrx

@@ -1,3 +1,21 @@
+import type { SVGProps } from '../util/OctaneTypes.ts';
+import type { SymbolType as D3SymbolType } from 'victory-vendor/d3-shape';
+import type { SymbolType } from '../util/types';
+
+type SizeType = 'area' | 'diameter';
+interface SymbolFactory {
+	[type: string]: D3SymbolType;
+}
+export interface InnerSymbolsProp {
+	className?: SVGProps<SVGPathElement>['className'];
+	type?: SymbolType;
+	cx?: number | null;
+	cy?: number | null;
+	size?: number;
+	sizeType?: SizeType;
+}
+export type SymbolsProps =
+	Omit<SVGProps<SVGPathElement>, keyof InnerSymbolsProp> & InnerSymbolsProp;
 // Port of shape/Symbols.tsx — the scatter/legend marker shapes, drawn by
 // victory-vendor's d3-shape symbol generators (byte-identical `d` output).
 import {
@@ -14,7 +32,7 @@ import { clsx } from 'clsx';
 import { isNumber, upperFirst } from '../util/DataUtils';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 
-const symbolFactories = {
+const symbolFactories: SymbolFactory = {
 	symbolCircle,
 	symbolCross,
 	symbolDiamond,
@@ -25,12 +43,12 @@ const symbolFactories = {
 };
 const RADIAN = Math.PI / 180;
 
-const getSymbolFactory = (type) => {
+const getSymbolFactory = (type: SymbolType) => {
 	const name = 'symbol' + upperFirst(type);
 	return symbolFactories[name] || symbolCircle;
 };
 
-const calculateAreaSize = (size, sizeType, type) => {
+const calculateAreaSize = (size: number, sizeType: SizeType, type: SymbolType) => {
 	if (sizeType === 'area') {
 		return size;
 	}
@@ -54,17 +72,17 @@ const calculateAreaSize = (size, sizeType, type) => {
 	}
 };
 
-const registerSymbol = (key, factory) => {
+const registerSymbol = (key: string, factory: D3SymbolType) => {
 	symbolFactories['symbol' + upperFirst(key)] = factory;
 };
 
 /** Renders a symbol from a set of predefined shapes. */
-export function Symbols(symbolsProps) {
+export function Symbols(symbolsProps: SymbolsProps) {
 	const { type = 'circle', size = 64, sizeType = 'area', ...rest } = symbolsProps;
 	const props = { ...rest, type, size, sizeType };
 	// Runtime guard (recharts#6197): `type` can arrive as a non-string despite
 	// the declared union; fall back to 'circle'.
-	let realType = 'circle';
+	let realType: SymbolType = 'circle';
 	if (typeof type === 'string') {
 		realType = type;
 	}

package/src/shape/Trapezoid.tsrx

@@ -1,3 +1,27 @@
+import type { NativeMouseEvent, SVGProps } from '../util/OctaneTypes.ts';
+import type { AnimationDuration, EasingInput } from '../util/types';
+
+interface TrapezoidProps {
+	className?: SVGProps<SVGPathElement>['className'];
+	x?: number;
+	y?: number;
+	upperWidth?: number;
+	lowerWidth?: number;
+	height?: number;
+	isUpdateAnimationActive?: boolean;
+	animationBegin?: number;
+	animationDuration?: AnimationDuration;
+	animationEasing?: EasingInput;
+	onClick?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseDown?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseUp?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseMove?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOver?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseOut?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseEnter?: (e: NativeMouseEvent<SVGPathElement>) => void;
+	onMouseLeave?: (e: NativeMouseEvent<SVGPathElement>) => void;
+}
+export type Props = SVGProps<SVGPathElement> & TrapezoidProps;
 // Port of shape/Trapezoid.tsx — the funnel-chart segment. Phase 0 ports the
 // STATIC path (isUpdateAnimationActive defaults false); the update animation
 // and the getTotalLength entrance dash arrive with the Phase 5 animation port.
@@ -7,7 +31,13 @@ import { resolveDefaultProps } from '../util/resolveDefaultProps';
 import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
 import { roundTemplateLiteral } from '../util/round';
 
-const getTrapezoidPath = (x, y, upperWidth, lowerWidth, height) => {
+const getTrapezoidPath = (
+	x: number,
+	y: number,
+	upperWidth: number,
+	lowerWidth: number,
+	height: number,
+) => {
 	const widthGap = upperWidth - lowerWidth;
 	let path;
 	path = roundTemplateLiteral`M ${x},${y}`;
@@ -28,9 +58,9 @@ export const defaultTrapezoidProps = {
 	animationBegin: 0,
 	animationDuration: 1500,
 	animationEasing: 'ease',
-};
+} as const satisfies Partial<Props>;
 
-export function Trapezoid(outsideProps) {
+export function Trapezoid(outsideProps: Props) {
 	const trapezoidProps = resolveDefaultProps(outsideProps, defaultTrapezoidProps);
 	const { x, y, upperWidth, lowerWidth, height, className } = trapezoidProps;
 

package/src/state/RechartsStoreProvider.tsrx

@@ -1,3 +1,12 @@
+import type { MutableRefObject, OctaneNode } from '../util/OctaneTypes.ts';
+import type { Action, Store } from '@reduxjs/toolkit';
+import type { RechartsRootState } from './store';
+
+type RechartsStoreProviderProps = {
+	children: OctaneNode;
+	preloadedState?: Partial<RechartsRootState>;
+	reduxStoreName?: string;
+};
 // Port of state/RechartsStoreProvider.tsx — one isolated RTK store per chart,
 // provided through the custom RechartsReduxContext (via @octanejs/redux's
 // Provider). A PANORAMA chart (the Brush preview) renders NO provider and
@@ -8,12 +17,12 @@ import { createRechartsStore } from './store';
 import { useIsPanorama } from '../context/PanoramaContext';
 import { RechartsReduxContext } from './RechartsReduxContext';
 
-export function RechartsStoreProvider(props) {
+export function RechartsStoreProvider(props: RechartsStoreProviderProps) {
 	const { preloadedState, children, reduxStoreName } = props;
 	const isPanorama = useIsPanorama();
 	// One store per CHART (not per page): recharts supports multiple independent
 	// charts, so the store rides a ref, created on first render.
-	const storeRef = useRef(null);
+	const storeRef: MutableRefObject<Store<RechartsRootState, Action> | null> = useRef(null);
 	if (isPanorama) {
 		return children;
 	}

package/src/state/ReportChartProps.ts

@@ -1,10 +1,10 @@
 // Port of state/ReportChartProps.tsx — publishes the chart root's props into
 // the rootProps slice.
 import { useEffect } from 'octane';
-import { updateOptions } from './rootPropsSlice';
+import { updateOptions, type UpdatableChartOptions } from './rootPropsSlice';
 import { useAppDispatch } from './hooks';
 
-export function ReportChartProps(props: Record<string, unknown>): null {
+export function ReportChartProps(props: UpdatableChartOptions): null {
 	const dispatch = useAppDispatch();
 	useEffect(() => {
 		dispatch(updateOptions(props));

package/src/state/ReportMainChartProps.ts

@@ -5,8 +5,9 @@ import { useIsPanorama } from '../context/PanoramaContext';
 import { setLayout, setMargin } from './layoutSlice';
 import { useAppDispatch } from './hooks';
 import { propsAreEqual } from '../util/propsAreEqual';
+import type { LayoutType, Margin } from '../util/types';
 
-function ReportMainChartPropsImpl(props: { layout: unknown; margin: unknown }): null {
+function ReportMainChartPropsImpl(props: { layout: LayoutType; margin: Partial<Margin> }): null {
 	const { layout, margin } = props;
 	const dispatch = useAppDispatch();
 	const isPanorama = useIsPanorama();

package/src/state/SetGraphicalItem.ts

@@ -10,11 +10,13 @@ import {
 	removePolarGraphicalItem,
 	replaceCartesianGraphicalItem,
 	replacePolarGraphicalItem,
+	type CartesianGraphicalItemSettings,
+	type PolarGraphicalItemSettings,
 } from './graphicalItemsSlice';
 
-const SetCartesianGraphicalItemImpl = (props: Record<string, unknown>): null => {
+const SetCartesianGraphicalItemImpl = (props: CartesianGraphicalItemSettings): null => {
 	const dispatch = useAppDispatch();
-	const prevPropsRef = useRef<Record<string, unknown> | null>(null);
+	const prevPropsRef = useRef<CartesianGraphicalItemSettings | null>(null);
 	useLayoutEffect(() => {
 		if (prevPropsRef.current === null) {
 			dispatch(addCartesianGraphicalItem(props));
@@ -36,9 +38,9 @@ const SetCartesianGraphicalItemImpl = (props: Record<string, unknown>): null =>
 
 export const SetCartesianGraphicalItem = memo(SetCartesianGraphicalItemImpl);
 
-const SetPolarGraphicalItemImpl = (props: Record<string, unknown>): null => {
+const SetPolarGraphicalItemImpl = (props: PolarGraphicalItemSettings): null => {
 	const dispatch = useAppDispatch();
-	const prevPropsRef = useRef<Record<string, unknown> | null>(null);
+	const prevPropsRef = useRef<PolarGraphicalItemSettings | null>(null);
 	useLayoutEffect(() => {
 		if (prevPropsRef.current === null) {
 			dispatch(addPolarGraphicalItem(props));