@octanejs/recharts 0.1.41 → 0.1.42

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));

package/src/state/SetLegendPayload.ts

@@ -5,12 +5,13 @@ import { useIsPanorama } from '../context/PanoramaContext';
 import { selectChartLayout } from '../context/chartLayoutContext';
 import { useAppDispatch, useAppSelector } from './hooks';
 import { addLegendPayload, replaceLegendPayload, removeLegendPayload } from './legendSlice';
+import type { LegendPayload } from '../component/DefaultLegendContent.tsrx';
 
-export function SetLegendPayload(props: { legendPayload: unknown }): null {
+export function SetLegendPayload(props: { legendPayload: ReadonlyArray<LegendPayload> }): null {
 	const { legendPayload } = props;
 	const dispatch = useAppDispatch();
 	const isPanorama = useIsPanorama();
-	const prevPayloadRef = useRef<unknown>(null);
+	const prevPayloadRef = useRef<ReadonlyArray<LegendPayload> | null>(null);
 	useLayoutEffect(() => {
 		if (isPanorama) {
 			return;
@@ -33,11 +34,13 @@ export function SetLegendPayload(props: { legendPayload: unknown }): null {
 	return null;
 }
 
-export function SetPolarLegendPayload(props: { legendPayload: unknown }): null {
+export function SetPolarLegendPayload(props: {
+	legendPayload: ReadonlyArray<LegendPayload>;
+}): null {
 	const { legendPayload } = props;
 	const dispatch = useAppDispatch();
 	const layout = useAppSelector(selectChartLayout);
-	const prevPayloadRef = useRef<unknown>(null);
+	const prevPayloadRef = useRef<ReadonlyArray<LegendPayload> | null>(null);
 	useLayoutEffect(() => {
 		if (layout !== 'centric' && layout !== 'radial') {
 			return;

package/src/state/SetTooltipEntrySettings.ts

@@ -6,14 +6,17 @@ import {
 	addTooltipEntrySettings,
 	removeTooltipEntrySettings,
 	replaceTooltipEntrySettings,
+	type TooltipPayloadConfiguration,
 } from './tooltipSlice';
 import { useIsPanorama } from '../context/PanoramaContext';
 
-export function SetTooltipEntrySettings(props: { tooltipEntrySettings: unknown }): null {
+export function SetTooltipEntrySettings(props: {
+	tooltipEntrySettings: TooltipPayloadConfiguration;
+}): null {
 	const { tooltipEntrySettings } = props;
 	const dispatch = useAppDispatch();
 	const isPanorama = useIsPanorama();
-	const prevSettingsRef = useRef<unknown>(null);
+	const prevSettingsRef = useRef<TooltipPayloadConfiguration | null>(null);
 	useLayoutEffect(() => {
 		if (isPanorama) {
 			// Panorama graphical items should never contribute to Tooltip payload.

package/src/state/brushSlice.ts

@@ -0,0 +1,40 @@
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Padding } from '../util/types';
+
+/**
+ * From all Brush properties, only height has a default value and will always be defined.
+ * Other properties are nullable and will be computed from offsets and margins if they are not set.
+ */
+export type BrushSettings = {
+	x: number | undefined;
+	y: number | undefined;
+	width: number | undefined;
+	height: number;
+	padding: Padding;
+};
+
+const initialState: BrushSettings = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0,
+	padding: { top: 0, right: 0, bottom: 0, left: 0 },
+};
+
+export const brushSlice = createSlice({
+	name: 'brush',
+	initialState,
+	reducers: {
+		setBrushSettings(_state: BrushSettings, action: PayloadAction<BrushSettings | null>) {
+			if (action.payload == null) {
+				return initialState;
+			}
+			return action.payload;
+		},
+	},
+});
+
+export const { setBrushSettings } = brushSlice.actions;
+
+export const brushReducer = brushSlice.reducer;