@octanejs/recharts 0.1.62 → 0.1.64

package/src/polar/RadialBar.tsrx

@@ -94,8 +94,9 @@ import { CellsContext, useCellRegistry } from '../context/CellsContext';
 
 const STABLE_EMPTY_ARRAY: readonly RadialBarDataItem[] = [];
 
-export type RadialBarDataItem =
-	SectorProps & GeometrySector & TooltipTriggerInfo & {
+export type RadialBarDataItem = SectorProps &
+	GeometrySector &
+	TooltipTriggerInfo & {
 		value?: any;
 		payload?: any;
 		background?: SectorProps;
@@ -103,12 +104,11 @@ export type RadialBarDataItem =
 
 type RadialBarBackground = boolean | (ActiveShape<SectorProps> & ZIndexable);
 
-type RadialBarSectorsProps =
-	ShapeAnimationProps & {
-		sectors: ReadonlyArray<RadialBarDataItem>;
-		allOtherRadialBarProps: InternalProps;
-		showLabels: boolean;
-	};
+type RadialBarSectorsProps = ShapeAnimationProps & {
+	sectors: ReadonlyArray<RadialBarDataItem>;
+	allOtherRadialBarProps: InternalProps;
+	showLabels: boolean;
+};
 
 function RadialBarLabelListProvider({
 	showLabels,
@@ -138,9 +138,11 @@ function RadialBarLabelListProvider({
 		}),
 	);
 
-	return <PolarLabelListContextProvider
-		value={showLabels ? labelListEntries : undefined}
-	>{children}</PolarLabelListContextProvider>;
+	return (
+		<PolarLabelListContextProvider value={showLabels ? labelListEntries : undefined}>
+			{children}
+		</PolarLabelListContextProvider>
+	);
 }
 
 function RadialBarSectors({
@@ -178,49 +180,55 @@ function RadialBarSectors({
 		return null;
 	}
 
-	return <RadialBarLabelListProvider showLabels={showLabels} sectors={sectors}>
-		{sectors.map((entry: RadialBarDataItem, i: number) => {
-			const isActive: boolean = Boolean(activeShape && activeIndex === String(i));
-			const onMouseEnter = onMouseEnterFromContext(entry, i);
-			const onMouseLeave = onMouseLeaveFromContext(entry, i);
-			const onClick = onClickFromContext(entry, i);
-
-			const radialBarSectorProps: ComponentProps<typeof RadialBarSector> = {
-				...baseProps,
-				cornerRadius: parseCornerRadius(cornerRadius),
-				...entry,
-				...adaptEventsOfChild(restOfAllOtherProps, entry, i),
-				onMouseEnter,
-				onMouseLeave,
-				onClick,
-				className: `recharts-radial-bar-sector ${entry.className}`,
-				forceCornerRadius: others.forceCornerRadius,
-				cornerIsExternal: others.cornerIsExternal,
-				animationElapsedTime,
-				isAnimating,
-				isEntrance,
-				isActive,
-				option: isActive && activeShape != null ? activeShape : shape,
-				index: i,
-			};
-
-			if (isActive) {
-				return <ZIndexLayer
-					zIndex={DefaultZIndexes.activeBar}
-					key={`sector-${entry.cx}-${entry.cy}-${entry.innerRadius}-${entry.outerRadius}-${entry.startAngle}-${entry.endAngle}-${i}`}
-				>
-					<RadialBarSector {...radialBarSectorProps} />
-				</ZIndexLayer>;
-			}
+	return (
+		<RadialBarLabelListProvider showLabels={showLabels} sectors={sectors}>
+			{sectors.map((entry: RadialBarDataItem, i: number) => {
+				const isActive: boolean = Boolean(activeShape && activeIndex === String(i));
+				const onMouseEnter = onMouseEnterFromContext(entry, i);
+				const onMouseLeave = onMouseLeaveFromContext(entry, i);
+				const onClick = onClickFromContext(entry, i);
+
+				const radialBarSectorProps: ComponentProps<typeof RadialBarSector> = {
+					...baseProps,
+					cornerRadius: parseCornerRadius(cornerRadius),
+					...entry,
+					...adaptEventsOfChild(restOfAllOtherProps, entry, i),
+					onMouseEnter,
+					onMouseLeave,
+					onClick,
+					className: `recharts-radial-bar-sector ${entry.className}`,
+					forceCornerRadius: others.forceCornerRadius,
+					cornerIsExternal: others.cornerIsExternal,
+					animationElapsedTime,
+					isAnimating,
+					isEntrance,
+					isActive,
+					option: isActive && activeShape != null ? activeShape : shape,
+					index: i,
+				};
+
+				if (isActive) {
+					return (
+						<ZIndexLayer
+							zIndex={DefaultZIndexes.activeBar}
+							key={`sector-${entry.cx}-${entry.cy}-${entry.innerRadius}-${entry.outerRadius}-${entry.startAngle}-${entry.endAngle}-${i}`}
+						>
+							<RadialBarSector {...radialBarSectorProps} />
+						</ZIndexLayer>
+					);
+				}
 
-			return <RadialBarSector
-				key={`sector-${entry.cx}-${entry.cy}-${entry.innerRadius}-${entry.outerRadius}-${entry.startAngle}-${entry.endAngle}-${i}`}
-				{...radialBarSectorProps}
-			/>;
-		})}
-		<LabelListFromLabelProp label={allOtherRadialBarProps.label} />
-		{allOtherRadialBarProps.children}
-	</RadialBarLabelListProvider>;
+				return (
+					<RadialBarSector
+						key={`sector-${entry.cx}-${entry.cy}-${entry.innerRadius}-${entry.outerRadius}-${entry.startAngle}-${entry.endAngle}-${i}`}
+						{...radialBarSectorProps}
+					/>
+				);
+			})}
+			<LabelListFromLabelProp label={allOtherRadialBarProps.label} />
+			{allOtherRadialBarProps.children}
+		</RadialBarLabelListProvider>
+	);
 }
 
 const defaultRadialBarAnimateItems: AnimationInterpolateFn<RadialBarDataItem, PolarLayout> = (
@@ -269,16 +277,14 @@ function SectorsWithAnimation({
 		onAnimationEnd,
 	} = props;
 	const animationInput = JSON.stringify(
-		sectors.map(
-			({ cx, cy, innerRadius, outerRadius, startAngle, endAngle }) => [
-				cx,
-				cy,
-				innerRadius,
-				outerRadius,
-				startAngle,
-				endAngle,
-			],
-		),
+		sectors.map(({ cx, cy, innerRadius, outerRadius, startAngle, endAngle }) => [
+			cx,
+			cy,
+			innerRadius,
+			outerRadius,
+			startAngle,
+			endAngle,
+		]),
 	);
 
 	const { isAnimating, handleAnimationStart, handleAnimationEnd } = useAnimationCallbacks(
@@ -290,31 +296,34 @@ function SectorsWithAnimation({
 
 	if (layout == null) return null;
 
-	return <AnimatedItems
-		animationInput={animationInput}
-		animationIdPrefix="recharts-radialbar-"
-		items={sectors}
-		previousItemsRef={previousSectorsRef}
-		isAnimationActive={isAnimationActive}
-		animationBegin={animationBegin}
-		animationDuration={animationDuration}
-		animationEasing={animationEasing}
-		onAnimationStart={handleAnimationStart}
-		onAnimationEnd={handleAnimationEnd}
-		animationInterpolateFn={props.animationInterpolateFn}
-		animationMatchBy={props.animationMatchBy}
-		layout={layout}
-	>
-		{(stepData, animationElapsedTime, isEntrance) =>
-			<RadialBarSectors
-				sectors={stepData}
-				allOtherRadialBarProps={props}
-				showLabels={!isAnimating}
-				animationElapsedTime={animationElapsedTime}
-				isAnimating={isAnimating || animationElapsedTime < 1}
-				isEntrance={isEntrance}
-			/>}
-	</AnimatedItems>;
+	return (
+		<AnimatedItems
+			animationInput={animationInput}
+			animationIdPrefix="recharts-radialbar-"
+			items={sectors}
+			previousItemsRef={previousSectorsRef}
+			isAnimationActive={isAnimationActive}
+			animationBegin={animationBegin}
+			animationDuration={animationDuration}
+			animationEasing={animationEasing}
+			onAnimationStart={handleAnimationStart}
+			onAnimationEnd={handleAnimationEnd}
+			animationInterpolateFn={props.animationInterpolateFn}
+			animationMatchBy={props.animationMatchBy}
+			layout={layout}
+		>
+			{(stepData, animationElapsedTime, isEntrance) => (
+				<RadialBarSectors
+					sectors={stepData}
+					allOtherRadialBarProps={props}
+					showLabels={!isAnimating}
+					animationElapsedTime={animationElapsedTime}
+					isAnimating={isAnimating || animationElapsedTime < 1}
+					isEntrance={isEntrance}
+				/>
+			)}
+		</AnimatedItems>
+	);
 }
 
 function RenderSectors(props: InternalProps) {
@@ -323,271 +332,293 @@ function RenderSectors(props: InternalProps) {
 	return <SectorsWithAnimation props={props} previousSectorsRef={previousSectorsRef} />;
 }
 
-interface InternalRadialBarProps<DataPointType = any, DataValueType = any> extends DataConsumer<
-	DataPointType,
-	DataValueType
->, ZIndexable {
+interface InternalRadialBarProps<DataPointType = any, DataValueType = any>
+	extends DataConsumer<DataPointType, DataValueType>, ZIndexable {
 	activeShape?: ActiveShape<RadialBarSectorProps, SVGPathElement>;
 	/**
- * @defaultValue 0
- */
+	 * @defaultValue 0
+	 */
 	angleAxisId?: AxisId;
 	/**
- * Specifies when the animation should begin, the unit of this option is ms.
- * @defaultValue 0
- */
+	 * Specifies when the animation should begin, the unit of this option is ms.
+	 * @defaultValue 0
+	 */
 	animationBegin?: number;
 	/**
- * Specifies the duration of animation, the unit of this option is ms.
- * @defaultValue 1500
- */
+	 * Specifies the duration of animation, the unit of this option is ms.
+	 * @defaultValue 1500
+	 */
 	animationDuration?: AnimationDuration;
 	/**
- * The type of easing function.
- * @defaultValue ease
- */
+	 * The type of easing function.
+	 * @defaultValue ease
+	 */
 	animationEasing?: EasingInput;
 	/**
- * Custom animation function for interpolating data items.
- * When provided, this replaces the default animation interpolation.
- *
- * @param prevItems The items from the previous animation frame, or null on first render
- * @param nextItems The target items to animate towards
- * @param animationElapsedTime A normalized time value (0 = start, 1 = end)
- * @returns The interpolated items at time animationElapsedTime
- *
- * @since 3.9
- * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
- */
+	 * Custom animation function for interpolating data items.
+	 * When provided, this replaces the default animation interpolation.
+	 *
+	 * @param prevItems The items from the previous animation frame, or null on first render
+	 * @param nextItems The target items to animate towards
+	 * @param animationElapsedTime A normalized time value (0 = start, 1 = end)
+	 * @returns The interpolated items at time animationElapsedTime
+	 *
+	 * @since 3.9
+	 * @see {@link https://recharts.github.io/en-US/guide/animations/ Animations guide}
+	 */
 	animationInterpolateFn?: AnimationInterpolateFn<RadialBarDataItem, PolarLayout>;
 	/**
- * Strategy for matching previous items to next items during animation.
- * Determines how Recharts pairs old data points with new data points
- * to create smooth transitions.
- *
- * - `matchAppend` (default): match sequentially by index and treat newly appended items as new
- * - `matchByIndex`: match by array position with proportional stretching
- * - `matchByDataKey('someKey')`: match by a data key from the payload
- * - Custom function `(item, index) => key`: match by the returned key
- *
- * @defaultValue append
- * @see matchByIndex
- * @see matchByDataKey
- * @see matchAppend
- */
+	 * Strategy for matching previous items to next items during animation.
+	 * Determines how Recharts pairs old data points with new data points
+	 * to create smooth transitions.
+	 *
+	 * - `matchAppend` (default): match sequentially by index and treat newly appended items as new
+	 * - `matchByIndex`: match by array position with proportional stretching
+	 * - `matchByDataKey('someKey')`: match by a data key from the payload
+	 * - Custom function `(item, index) => key`: match by the returned key
+	 *
+	 * @defaultValue append
+	 * @see matchByIndex
+	 * @see matchByDataKey
+	 * @see matchAppend
+	 */
 	animationMatchBy?: AnimationMatchByProp<RadialBarDataItem>;
 	/**
- * Renders a background for each bar. Options:
- *  - `false`: no background;
- *  - `true`: renders default background;
- *  - `object`: the props of background rectangle;
- *  - `OctaneElement`: a custom background element;
- *  - `function`: a render function of custom background.
- *
- * @defaultValue false
- */
+	 * Renders a background for each bar. Options:
+	 *  - `false`: no background;
+	 *  - `true`: renders default background;
+	 *  - `object`: the props of background rectangle;
+	 *  - `OctaneElement`: a custom background element;
+	 *  - `function`: a render function of custom background.
+	 *
+	 * @defaultValue false
+	 */
 	background?: RadialBarBackground;
 	/**
- * The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
- */
+	 * The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
+	 */
 	barSize?: number;
 	className?: string;
 	/**
- * @defaultValue false
- */
+	 * @defaultValue false
+	 */
 	cornerIsExternal?: boolean;
 	/**
- * @defaultValue 0
- */
+	 * @defaultValue 0
+	 */
 	cornerRadius?: string | number;
 	/**
- * Calculated radial bar sectors
- */
+	 * Calculated radial bar sectors
+	 */
 	sectors: ReadonlyArray<RadialBarDataItem>;
 	/**
- * @defaultValue false
- */
+	 * @defaultValue false
+	 */
 	forceCornerRadius?: boolean;
 	/**
- * @defaultValue false
- */
+	 * @defaultValue false
+	 */
 	hide?: boolean;
 	/**
- * If set false, animation of radial bars will be disabled.
- * If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
- * @defaultValue auto
- */
+	 * If set false, animation of radial bars will be disabled.
+	 * If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
+	 * @defaultValue auto
+	 */
 	isAnimationActive?: boolean | 'auto';
 	/**
- * Renders one label for each data point. Options:
- * - `true`: renders default labels;
- * - `false`: no labels are rendered;
- * - `object`: the props of LabelList component;
- * - `OctaneElement`: a custom SVG label element, such as `<text>` or `<g>`.
- *   HTML elements such as `<div>` are not valid inside the chart SVG and may trigger React DOM warnings.
- * - `function`: a render function of custom label.
- *
- * @defaultValue false
- */
+	 * Renders one label for each data point. Options:
+	 * - `true`: renders default labels;
+	 * - `false`: no labels are rendered;
+	 * - `object`: the props of LabelList component;
+	 * - `OctaneElement`: a custom SVG label element, such as `<text>` or `<g>`.
+	 *   HTML elements such as `<div>` are not valid inside the chart SVG and may trigger React DOM warnings.
+	 * - `function`: a render function of custom label.
+	 *
+	 * @defaultValue false
+	 */
 	label?: ImplicitLabelListType;
 	/**
- * The type of icon in legend.  If set to 'none', no legend item will be rendered.
- * @defaultValue rect
- */
+	 * The type of icon in legend.  If set to 'none', no legend item will be rendered.
+	 * @defaultValue rect
+	 */
 	legendType?: LegendType;
 	maxBarSize?: number;
 	/**
- * @defaultValue 0
- */
+	 * @defaultValue 0
+	 */
 	minPointSize?: number;
 	/**
- * The customized event handler of animation end
- */
+	 * The customized event handler of animation end
+	 */
 	onAnimationEnd?: () => void;
 	/**
- * The customized event handler of animation start
- */
+	 * The customized event handler of animation start
+	 */
 	onAnimationStart?: () => void;
 	/**
- * The customized event handler of click in this chart.
- */
-	onClick?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
-		SVGGraphicsElement
-	>) => void;
+	 * The customized event handler of click in this chart.
+	 */
+	onClick?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeMouseEvent<SVGGraphicsElement>,
+	) => void;
 	/**
- * The customized event handler of mousedown in this chart.
- */
-	onMouseDown?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
-		SVGGraphicsElement
-	>) => void;
+	 * The customized event handler of mousedown in this chart.
+	 */
+	onMouseDown?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeMouseEvent<SVGGraphicsElement>,
+	) => void;
 	/**
- * The customized event handler of mouseup in this chart.
- */
-	onMouseUp?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
-		SVGGraphicsElement
-	>) => void;
+	 * The customized event handler of mouseup in this chart.
+	 */
+	onMouseUp?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeMouseEvent<SVGGraphicsElement>,
+	) => void;
 	/**
- * The customized event handler of mousemove in this chart.
- */
-	onMouseMove?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
-		SVGGraphicsElement
-	>) => void;
+	 * The customized event handler of mousemove in this chart.
+	 */
+	onMouseMove?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeMouseEvent<SVGGraphicsElement>,
+	) => void;
 	/**
- * The customized event handler of mouseover in this chart.
- */
-	onMouseOver?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
-		SVGGraphicsElement
-	>) => void;
+	 * The customized event handler of mouseover in this chart.
+	 */
+	onMouseOver?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeMouseEvent<SVGGraphicsElement>,
+	) => void;
 	/**
- * The customized event handler of mouseout in this chart.
- */
-	onMouseOut?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
-		SVGGraphicsElement
-	>) => void;
+	 * The customized event handler of mouseout in this chart.
+	 */
+	onMouseOut?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeMouseEvent<SVGGraphicsElement>,
+	) => void;
 	/**
- * The customized event handler of mouseenter in this chart.
- */
-	onMouseEnter?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
-		SVGGraphicsElement
-	>) => void;
+	 * The customized event handler of mouseenter in this chart.
+	 */
+	onMouseEnter?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeMouseEvent<SVGGraphicsElement>,
+	) => void;
 	/**
- * The customized event handler of mouseleave in this chart.
- */
-	onMouseLeave?: (data: RadialBarDataItem, index: number, e: NativeMouseEvent<
-		SVGGraphicsElement
-	>) => void;
-	onTouchStart?: (data: RadialBarDataItem, index: number, e: NativeTouchEvent<
-		SVGGraphicsElement
-	>) => void;
-	onTouchMove?: (data: RadialBarDataItem, index: number, e: NativeTouchEvent<
-		SVGGraphicsElement
-	>) => void;
-	onTouchEnd?: (data: RadialBarDataItem, index: number, e: NativeTouchEvent<
-		SVGGraphicsElement
-	>) => void;
+	 * The customized event handler of mouseleave in this chart.
+	 */
+	onMouseLeave?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeMouseEvent<SVGGraphicsElement>,
+	) => void;
+	onTouchStart?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeTouchEvent<SVGGraphicsElement>,
+	) => void;
+	onTouchMove?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeTouchEvent<SVGGraphicsElement>,
+	) => void;
+	onTouchEnd?: (
+		data: RadialBarDataItem,
+		index: number,
+		e: NativeTouchEvent<SVGGraphicsElement>,
+	) => void;
 	/**
- * @defaultValue 0
- */
+	 * @defaultValue 0
+	 */
 	radiusAxisId?: AxisId;
 	/**
- * If set a OctaneElement, the shape of radial bar sectors can be customized.
- * If set a function, the function will be called to render customized shape.
- * During animations, the function shape also receives `animationElapsedTime`, `isAnimating`, and `isEntrance`.
- * By default, renders a sector.
- */
+	 * If set a OctaneElement, the shape of radial bar sectors can be customized.
+	 * If set a function, the function will be called to render customized shape.
+	 * During animations, the function shape also receives `animationElapsedTime`, `isAnimating`, and `isEntrance`.
+	 * By default, renders a sector.
+	 */
 	shape?: ActiveShape<RadialBarSectorProps, SVGPathElement>;
 	stackId?: string | number;
 	tooltipType?: TooltipType;
 	/**
- * Formats the value displayed in the tooltip for this RadialBar.
- * When set, takes precedence over the `formatter` prop on the Tooltip component.
- */
+	 * Formats the value displayed in the tooltip for this RadialBar.
+	 * When set, takes precedence over the `formatter` prop on the Tooltip component.
+	 */
 	formatter?: Formatter;
 	/**
- * @defaultValue 300
- */
+	 * @defaultValue 300
+	 */
 	zIndex?: number;
 }
 
-export type RadialBarProps<DataPointType = any, DataValueType = any> =
-	Omit<
-		PresentationAttributesAdaptChildEvent<RadialBarDataItem, SVGElement>,
-		'ref' | keyof InternalRadialBarProps<DataPointType, DataValueType>
-	> & Omit<InternalRadialBarProps<DataPointType, DataValueType>, 'sectors'>;
+export type RadialBarProps<DataPointType = any, DataValueType = any> = Omit<
+	PresentationAttributesAdaptChildEvent<RadialBarDataItem, SVGElement>,
+	'ref' | keyof InternalRadialBarProps<DataPointType, DataValueType>
+> &
+	Omit<InternalRadialBarProps<DataPointType, DataValueType>, 'sectors'>;
 
 type InternalProps = WithIdRequired<PropsWithDefaults> & Pick<InternalRadialBarProps, 'sectors'>;
 
 function SetRadialBarPayloadLegend(props: RadialBarProps) {
-	const legendPayload = useAppSelector(
-		(state) => selectRadialBarLegendPayload(state, props.legendType),
+	const legendPayload = useAppSelector((state) =>
+		selectRadialBarLegendPayload(state, props.legendType),
 	);
 	return <SetPolarLegendPayload legendPayload={legendPayload ?? []} />;
 }
 
-const SetRadialBarTooltipEntrySettings = React.memo(({
-	dataKey,
-	sectors,
-	stroke,
-	strokeWidth,
-	name,
-	hide,
-	fill,
-	tooltipType,
-	formatter,
-	id,
-}: Pick<
-	InternalProps,
-	| 'dataKey'
-	| 'sectors'
-	| 'stroke'
-	| 'strokeWidth'
-	| 'name'
-	| 'hide'
-	| 'fill'
-	| 'tooltipType'
-	| 'formatter'
-	| 'id'
->) => {
-	const tooltipEntrySettings: TooltipPayloadConfiguration = {
-		dataDefinedOnItem: sectors,
-		getPosition: noop,
-		settings: {
-			graphicalItemId: id,
-			stroke,
-			strokeWidth,
-			fill,
-			nameKey: undefined, // RadialBar does not have nameKey, why?
-			dataKey,
-			name: getTooltipNameProp(name, dataKey),
-			hide,
-			type: tooltipType,
-			color: fill,
-			unit: '', // Why does RadialBar not support unit?
-			formatter,
-		},
-	};
-	return <SetTooltipEntrySettings tooltipEntrySettings={tooltipEntrySettings} />;
-});
+const SetRadialBarTooltipEntrySettings = React.memo(
+	({
+		dataKey,
+		sectors,
+		stroke,
+		strokeWidth,
+		name,
+		hide,
+		fill,
+		tooltipType,
+		formatter,
+		id,
+	}: Pick<
+		InternalProps,
+		| 'dataKey'
+		| 'sectors'
+		| 'stroke'
+		| 'strokeWidth'
+		| 'name'
+		| 'hide'
+		| 'fill'
+		| 'tooltipType'
+		| 'formatter'
+		| 'id'
+	>) => {
+		const tooltipEntrySettings: TooltipPayloadConfiguration = {
+			dataDefinedOnItem: sectors,
+			getPosition: noop,
+			settings: {
+				graphicalItemId: id,
+				stroke,
+				strokeWidth,
+				fill,
+				nameKey: undefined, // RadialBar does not have nameKey, why?
+				dataKey,
+				name: getTooltipNameProp(name, dataKey),
+				hide,
+				type: tooltipType,
+				color: fill,
+				unit: '', // Why does RadialBar not support unit?
+				formatter,
+			},
+		};
+		return <SetTooltipEntrySettings tooltipEntrySettings={tooltipEntrySettings} />;
+	},
+);
 
 function renderBackground(props: InternalProps, sectors?: ReadonlyArray<RadialBarDataItem>) {
 	if (sectors == null) {
@@ -595,33 +626,40 @@ function renderBackground(props: InternalProps, sectors?: ReadonlyArray<RadialBa
 	}
 	const { cornerRadius } = props;
 	const backgroundProps = svgPropertiesNoEventsFromUnknown(props.background);
-	return <ZIndexLayer
-		zIndex={getZIndexFromUnknown(props.background, DefaultZIndexes.barBackground)}
-	>{sectors.map((entry, i) => {
-		const { value, background, ...rest } = entry;
+	return (
+		<ZIndexLayer zIndex={getZIndexFromUnknown(props.background, DefaultZIndexes.barBackground)}>
+			{sectors.map((entry, i) => {
+				const { value, background, ...rest } = entry;
 
-		if (!background) {
-			return null;
-		}
+				if (!background) {
+					return null;
+				}
 
-		const sectorProps: ComponentProps<typeof RadialBarSector> = {
-			cornerRadius: parseCornerRadius(cornerRadius),
-			...rest,
-			fill: '#eee',
-			...background,
-			...backgroundProps,
-			...adaptEventsOfChild(props, entry, i),
-			index: i,
-			className: clsx('recharts-radial-bar-background-sector', String(backgroundProps?.className)),
-			option: background,
-			isActive: false,
-		};
+				const sectorProps: ComponentProps<typeof RadialBarSector> = {
+					cornerRadius: parseCornerRadius(cornerRadius),
+					...rest,
+					fill: '#eee',
+					...background,
+					...backgroundProps,
+					...adaptEventsOfChild(props, entry, i),
+					index: i,
+					className: clsx(
+						'recharts-radial-bar-background-sector',
+						String(backgroundProps?.className),
+					),
+					option: background,
+					isActive: false,
+				};
 
-		return <RadialBarSector
-			key={`background-${rest.cx}-${rest.cy}-${rest.innerRadius}-${rest.outerRadius}-${rest.startAngle}-${rest.endAngle}-${i}`}
-			{...sectorProps}
-		/>;
-	})}</ZIndexLayer>;
+				return (
+					<RadialBarSector
+						key={`background-${rest.cx}-${rest.cy}-${rest.innerRadius}-${rest.outerRadius}-${rest.startAngle}-${rest.endAngle}-${i}`}
+						{...sectorProps}
+					/>
+				);
+			})}
+		</ZIndexLayer>
+	);
 }
 
 function RadialBarWithState(props: InternalProps) {
@@ -633,18 +671,20 @@ function RadialBarWithState(props: InternalProps) {
 
 	const layerClass = clsx('recharts-area', className);
 
-	return <ZIndexLayer zIndex={props.zIndex}>
-		<Layer className={layerClass}>
-			{background &&
-				<Layer className="recharts-radial-bar-background">{renderBackground(
-					props,
-					sectors,
-				)}</Layer>}
-			<Layer className="recharts-radial-bar-sectors">
-				<RenderSectors {...props} />
+	return (
+		<ZIndexLayer zIndex={props.zIndex}>
+			<Layer className={layerClass}>
+				{background && (
+					<Layer className="recharts-radial-bar-background">
+						{renderBackground(props, sectors)}
+					</Layer>
+				)}
+				<Layer className="recharts-radial-bar-sectors">
+					<RenderSectors {...props} />
+				</Layer>
 			</Layer>
-		</Layer>
-	</ZIndexLayer>;
+		</ZIndexLayer>
+	);
 }
 
 function RadialBarImpl(props: WithIdRequired<PropsWithDefaults>) {
@@ -676,31 +716,32 @@ function RadialBarImpl(props: WithIdRequired<PropsWithDefaults>) {
 		],
 	);
 	const sectors: ReadonlyArray<RadialBarDataItem> =
-		useAppSelector(
-			(state) => selectRadialBarSectors(
+		useAppSelector((state) =>
+			selectRadialBarSectors(
 				state,
 				props.radiusAxisId,
 				props.angleAxisId,
 				radialBarSettings,
 				cells,
 			),
-		) ??
-			STABLE_EMPTY_ARRAY;
-	return <CellsContext value={cellRegistry}>
-		<SetRadialBarTooltipEntrySettings
-			dataKey={props.dataKey}
-			sectors={sectors}
-			stroke={props.stroke}
-			strokeWidth={props.strokeWidth}
-			name={props.name}
-			hide={props.hide}
-			fill={props.fill}
-			tooltipType={props.tooltipType}
-			formatter={props.formatter}
-			id={props.id}
-		/>
-		<RadialBarWithState {...props} sectors={sectors} />
-	</CellsContext>;
+		) ?? STABLE_EMPTY_ARRAY;
+	return (
+		<CellsContext value={cellRegistry}>
+			<SetRadialBarTooltipEntrySettings
+				dataKey={props.dataKey}
+				sectors={sectors}
+				stroke={props.stroke}
+				strokeWidth={props.strokeWidth}
+				name={props.name}
+				hide={props.hide}
+				fill={props.fill}
+				tooltipType={props.tooltipType}
+				formatter={props.formatter}
+				id={props.id}
+			/>
+			<RadialBarWithState {...props} sectors={sectors} />
+		</CellsContext>
+	);
 }
 
 export const defaultRadialBarProps = {
@@ -724,8 +765,10 @@ export const defaultRadialBarProps = {
 	zIndex: DefaultZIndexes.bar,
 } as const satisfies Partial<RadialBarProps>;
 
-type PropsWithDefaults<DataPointType = any, DataValueType = any> =
-	RequiresDefaultProps<RadialBarProps<DataPointType, DataValueType>, typeof defaultRadialBarProps>;
+type PropsWithDefaults<DataPointType = any, DataValueType = any> = RequiresDefaultProps<
+	RadialBarProps<DataPointType, DataValueType>,
+	typeof defaultRadialBarProps
+>;
 
 export function computeRadialBarDataItems({
 	displayedData,
@@ -852,7 +895,7 @@ export function computeRadialBarDataItems({
 		// Sector. Keep the row so custom shapes, Cell overrides, and tooltip
 		// indices still refer to the original datum.
 		return {
-			...entry as Record<string, unknown>,
+			...(entry as Record<string, unknown>),
 			...backgroundSector,
 			payload: entry,
 			value: stackedData ? value : value[1],
@@ -862,7 +905,7 @@ export function computeRadialBarDataItems({
 			outerRadius: outerRadius ?? defaultSectorProps.outerRadius,
 			startAngle: startAngle ?? defaultSectorProps.startAngle,
 			endAngle: endAngle ?? defaultSectorProps.endAngle,
-			...cells && cells[index] && cells[index].props as CellPropsFor<SVGPathElement>,
+			...(cells && cells[index] && (cells[index].props as CellPropsFor<SVGPathElement>)),
 		} satisfies RadialBarDataItem;
 	});
 }
@@ -879,25 +922,29 @@ export function RadialBar<DataPointType = any, DataValueType = any>(
 		outsideProps,
 		defaultRadialBarProps,
 	);
-	return <RegisterGraphicalItemId id={props.id} type="radialBar">
-		{(id) => <>
-			<SetPolarGraphicalItem
-				type="radialBar"
-				id={id}
-				data={undefined}
-				dataKey={props.dataKey}
-				hide={props.hide ?? defaultRadialBarProps.hide}
-				angleAxisId={props.angleAxisId ?? defaultRadialBarProps.angleAxisId}
-				radiusAxisId={props.radiusAxisId ?? defaultRadialBarProps.radiusAxisId}
-				stackId={getNormalizedStackId(props.stackId)}
-				barSize={props.barSize}
-				minPointSize={props.minPointSize}
-				maxBarSize={props.maxBarSize}
-			/>
-			<SetRadialBarPayloadLegend {...props} />
-			<RadialBarImpl {...props} id={id} />
-		</>}
-	</RegisterGraphicalItemId>;
+	return (
+		<RegisterGraphicalItemId id={props.id} type="radialBar">
+			{(id) => (
+				<>
+					<SetPolarGraphicalItem
+						type="radialBar"
+						id={id}
+						data={undefined}
+						dataKey={props.dataKey}
+						hide={props.hide ?? defaultRadialBarProps.hide}
+						angleAxisId={props.angleAxisId ?? defaultRadialBarProps.angleAxisId}
+						radiusAxisId={props.radiusAxisId ?? defaultRadialBarProps.radiusAxisId}
+						stackId={getNormalizedStackId(props.stackId)}
+						barSize={props.barSize}
+						minPointSize={props.minPointSize}
+						maxBarSize={props.maxBarSize}
+					/>
+					<SetRadialBarPayloadLegend {...props} />
+					<RadialBarImpl {...props} id={id} />
+				</>
+			)}
+		</RegisterGraphicalItemId>
+	);
 }
 
 RadialBar.displayName = 'RadialBar';