@octanejs/recharts 0.1.0

package/src/shape/Sector.tsrx

@@ -0,0 +1,219 @@
+// 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
+// rounded to 4dp, template whitespace/newlines preserved verbatim) — the
+// template literals below reproduce upstream's exact strings including their
+// embedded newlines and indentation.
+import { clsx } from 'clsx';
+import { polarToCartesian, RADIAN } from '../util/PolarUtils';
+import { getPercentValue, mathSign } from '../util/DataUtils';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
+import { roundTemplateLiteral } from '../util/round';
+
+const getDeltaAngle = (startAngle, endAngle) => {
+	const sign = mathSign(endAngle - startAngle);
+	const deltaAngle = Math.min(Math.abs(endAngle - startAngle), 359.999);
+	return sign * deltaAngle;
+};
+
+const getTangentCircle = ({
+	cx,
+	cy,
+	radius,
+	angle,
+	sign,
+	isExternal,
+	cornerRadius,
+	cornerIsExternal,
+}) => {
+	const centerRadius = cornerRadius * (isExternal ? 1 : -1) + radius;
+	const theta = Math.asin(cornerRadius / centerRadius) / RADIAN;
+	const centerAngle = cornerIsExternal ? angle : angle + sign * theta;
+	const center = polarToCartesian(cx, cy, centerRadius, centerAngle);
+	// The coordinate of point which is tangent to the circle
+	const circleTangency = polarToCartesian(cx, cy, radius, centerAngle);
+	// The coordinate of point which is tangent to the radius line
+	const lineTangencyAngle = cornerIsExternal ? angle - sign * theta : angle;
+	const lineTangency = polarToCartesian(
+		cx,
+		cy,
+		centerRadius * Math.cos(theta * RADIAN),
+		lineTangencyAngle,
+	);
+	return { center, circleTangency, lineTangency, theta };
+};
+
+const getSectorPath = ({ cx, cy, innerRadius, outerRadius, startAngle, endAngle }) => {
+	const angle = getDeltaAngle(startAngle, endAngle);
+
+	// When the angle of sector equals to 360, start point and end point coincide
+	const tempEndAngle = startAngle + angle;
+	const outerStartPoint = polarToCartesian(cx, cy, outerRadius, startAngle);
+	const outerEndPoint = polarToCartesian(cx, cy, outerRadius, tempEndAngle);
+	// Hoisted arc flags — inline `${+(…)}` expressions survive byte-identically
+	// but prettier splays them across lines; the string chunks stay verbatim.
+	const largeArc = +(Math.abs(angle) > 180);
+	const outerSweep = +(startAngle > tempEndAngle);
+	let path = roundTemplateLiteral`M ${outerStartPoint.x},${outerStartPoint.y}
+    A ${outerRadius},${outerRadius},0,
+    ${largeArc},${outerSweep},
+    ${outerEndPoint.x},${outerEndPoint.y}
+  `;
+	if (innerRadius > 0) {
+		const innerStartPoint = polarToCartesian(cx, cy, innerRadius, startAngle);
+		const innerEndPoint = polarToCartesian(cx, cy, innerRadius, tempEndAngle);
+		const innerSweep = +(startAngle <= tempEndAngle);
+		path +=
+			roundTemplateLiteral`L ${innerEndPoint.x},${innerEndPoint.y}
+            A ${innerRadius},${innerRadius},0,
+            ${largeArc},${innerSweep},
+            ${innerStartPoint.x},${innerStartPoint.y} Z`;
+	} else {
+		path += roundTemplateLiteral`L ${cx},${cy} Z`;
+	}
+	return path;
+};
+
+const getSectorWithCorner = ({
+	cx,
+	cy,
+	innerRadius,
+	outerRadius,
+	cornerRadius,
+	forceCornerRadius,
+	cornerIsExternal,
+	startAngle,
+	endAngle,
+}) => {
+	const sign = mathSign(endAngle - startAngle);
+	const { circleTangency: soct, lineTangency: solt, theta: sot } = getTangentCircle({
+		cx,
+		cy,
+		radius: outerRadius,
+		angle: startAngle,
+		sign,
+		cornerRadius,
+		cornerIsExternal,
+	});
+	const { circleTangency: eoct, lineTangency: eolt, theta: eot } = getTangentCircle({
+		cx,
+		cy,
+		radius: outerRadius,
+		angle: endAngle,
+		sign: -sign,
+		cornerRadius,
+		cornerIsExternal,
+	});
+	const outerArcAngle =
+		cornerIsExternal
+			? Math.abs(startAngle - endAngle)
+			: Math.abs(startAngle - endAngle) - sot - eot;
+	if (outerArcAngle < 0) {
+		if (forceCornerRadius) {
+			const cornerDiameter = cornerRadius * 2;
+			return roundTemplateLiteral`M ${solt.x},${solt.y}
+        a${cornerRadius},${cornerRadius},0,0,1,${cornerDiameter},0
+        a${cornerRadius},${cornerRadius},0,0,1,${-cornerDiameter},0
+      `;
+		}
+		return getSectorPath({ cx, cy, innerRadius, outerRadius, startAngle, endAngle });
+	}
+	const sweep = +(sign < 0);
+	const outerLargeArc = +(outerArcAngle > 180);
+	let path = roundTemplateLiteral`M ${solt.x},${solt.y}
+    A${cornerRadius},${cornerRadius},0,0,${sweep},${soct.x},${soct.y}
+    A${outerRadius},${outerRadius},0,${outerLargeArc},${sweep},${eoct.x},${eoct.y}
+    A${cornerRadius},${cornerRadius},0,0,${sweep},${eolt.x},${eolt.y}
+  `;
+	if (innerRadius > 0) {
+		const { circleTangency: sict, lineTangency: silt, theta: sit } = getTangentCircle({
+			cx,
+			cy,
+			radius: innerRadius,
+			angle: startAngle,
+			sign,
+			isExternal: true,
+			cornerRadius,
+			cornerIsExternal,
+		});
+		const { circleTangency: eict, lineTangency: eilt, theta: eit } = getTangentCircle({
+			cx,
+			cy,
+			radius: innerRadius,
+			angle: endAngle,
+			sign: -sign,
+			isExternal: true,
+			cornerRadius,
+			cornerIsExternal,
+		});
+		const innerArcAngle =
+			cornerIsExternal
+				? Math.abs(startAngle - endAngle)
+				: Math.abs(startAngle - endAngle) - sit - eit;
+		if (innerArcAngle < 0 && cornerRadius === 0) {
+			return path + 'L' + cx + ',' + cy + 'Z';
+		}
+		const innerLargeArc = +(innerArcAngle > 180);
+		const innerSweep = +(sign > 0);
+		path +=
+			roundTemplateLiteral`L${eilt.x},${eilt.y}
+      A${cornerRadius},${cornerRadius},0,0,${sweep},${eict.x},${eict.y}
+      A${innerRadius},${innerRadius},0,${innerLargeArc},${innerSweep},${sict.x},${sict.y}
+      A${cornerRadius},${cornerRadius},0,0,${sweep},${silt.x},${silt.y}Z`;
+	} else {
+		path += roundTemplateLiteral`L${cx},${cy}Z`;
+	}
+	return path;
+};
+
+export const defaultSectorProps = {
+	cx: 0,
+	cy: 0,
+	innerRadius: 0,
+	outerRadius: 0,
+	startAngle: 0,
+	endAngle: 0,
+	cornerRadius: 0,
+	forceCornerRadius: false,
+	cornerIsExternal: false,
+};
+
+export function Sector(sectorProps) {
+	const props = resolveDefaultProps(sectorProps, defaultSectorProps);
+	const {
+		cx,
+		cy,
+		innerRadius,
+		outerRadius,
+		cornerRadius,
+		forceCornerRadius,
+		cornerIsExternal,
+		startAngle,
+		endAngle,
+		className,
+	} = props;
+	if (outerRadius < innerRadius || startAngle === endAngle) {
+		return null;
+	}
+	const layerClass = clsx('recharts-sector', className);
+	const deltaRadius = outerRadius - innerRadius;
+	const cr = getPercentValue(cornerRadius, deltaRadius, 0, true);
+	let path;
+	if (cr > 0 && Math.abs(startAngle - endAngle) < 360) {
+		path = getSectorWithCorner({
+			cx,
+			cy,
+			innerRadius,
+			outerRadius,
+			cornerRadius: Math.min(cr, deltaRadius / 2),
+			forceCornerRadius,
+			cornerIsExternal,
+			startAngle,
+			endAngle,
+		});
+	} else {
+		path = getSectorPath({ cx, cy, innerRadius, outerRadius, startAngle, endAngle });
+	}
+	return <path {...svgPropertiesAndEvents(props)} className={layerClass} d={path} />;
+}

package/src/shape/Sector.tsrx.d.ts

@@ -0,0 +1,29 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export interface SectorProps {
+	cx?: number;
+	cy?: number;
+	innerRadius?: number;
+	outerRadius?: number;
+	startAngle?: number;
+	endAngle?: number;
+	cornerRadius?: number | string;
+	forceCornerRadius?: boolean;
+	cornerIsExternal?: boolean;
+	className?: unknown;
+	[key: string]: unknown;
+}
+export declare const defaultSectorProps: Required<
+	Pick<
+		SectorProps,
+		| 'cx'
+		| 'cy'
+		| 'innerRadius'
+		| 'outerRadius'
+		| 'startAngle'
+		| 'endAngle'
+		| 'cornerRadius'
+		| 'forceCornerRadius'
+		| 'cornerIsExternal'
+	>
+>;
+export declare const Sector: (props: SectorProps) => unknown;

package/src/shape/Symbols.tsrx

@@ -0,0 +1,95 @@
+// Port of shape/Symbols.tsx — the scatter/legend marker shapes, drawn by
+// victory-vendor's d3-shape symbol generators (byte-identical `d` output).
+import {
+	symbol as shapeSymbol,
+	symbolCircle,
+	symbolCross,
+	symbolDiamond,
+	symbolSquare,
+	symbolStar,
+	symbolTriangle,
+	symbolWye,
+} from 'victory-vendor/d3-shape';
+import { clsx } from 'clsx';
+import { isNumber, upperFirst } from '../util/DataUtils';
+import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
+
+const symbolFactories = {
+	symbolCircle,
+	symbolCross,
+	symbolDiamond,
+	symbolSquare,
+	symbolStar,
+	symbolTriangle,
+	symbolWye,
+};
+const RADIAN = Math.PI / 180;
+
+const getSymbolFactory = (type) => {
+	const name = 'symbol' + upperFirst(type);
+	return symbolFactories[name] || symbolCircle;
+};
+
+const calculateAreaSize = (size, sizeType, type) => {
+	if (sizeType === 'area') {
+		return size;
+	}
+	switch (type) {
+		case 'cross':
+			return (5 * size * size) / 9;
+		case 'diamond':
+			return (0.5 * size * size) / Math.sqrt(3);
+		case 'square':
+			return size * size;
+		case 'star': {
+			const angle = 18 * RADIAN;
+			return 1.25 * size * size * (Math.tan(angle) - Math.tan(angle * 2) * Math.tan(angle) ** 2);
+		}
+		case 'triangle':
+			return (Math.sqrt(3) * size * size) / 4;
+		case 'wye':
+			return ((21 - 10 * Math.sqrt(3)) * size * size) / 8;
+		default:
+			return (Math.PI * size * size) / 4;
+	}
+};
+
+const registerSymbol = (key, factory) => {
+	symbolFactories['symbol' + upperFirst(key)] = factory;
+};
+
+/** Renders a symbol from a set of predefined shapes. */
+export function Symbols(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';
+	if (typeof type === 'string') {
+		realType = type;
+	}
+	const getSymbolPath = () => {
+		const symbolFactory = getSymbolFactory(realType);
+		const symbolGen = shapeSymbol().type(symbolFactory).size(
+			calculateAreaSize(size, sizeType, realType),
+		);
+		const s = symbolGen();
+		if (s === null) {
+			return undefined;
+		}
+		return s;
+	};
+	const { className, cx, cy } = props;
+	const filteredProps = svgPropertiesAndEvents(props);
+	if (isNumber(cx) && isNumber(cy) && isNumber(size)) {
+		return <path
+			{...filteredProps}
+			className={clsx('recharts-symbols', className)}
+			transform={'translate(' + cx + ', ' + cy + ')'}
+			d={getSymbolPath()}
+		/>;
+	}
+	return null;
+}
+
+Symbols.registerSymbol = registerSymbol;

package/src/shape/Symbols.tsrx.d.ts

@@ -0,0 +1,15 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+export interface SymbolsProps {
+	type?: SymbolType;
+	size?: number;
+	sizeType?: 'area' | 'diameter';
+	cx?: number;
+	cy?: number;
+	className?: unknown;
+	[key: string]: unknown;
+}
+export declare const Symbols: {
+	(props: SymbolsProps): unknown;
+	registerSymbol: (key: string, factory: unknown) => void;
+};

package/src/shape/Trapezoid.tsrx

@@ -0,0 +1,56 @@
+// 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.
+// Path strings mirror upstream's roundTemplateLiteral output byte-for-byte.
+import { clsx } from 'clsx';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents.ts';
+import { roundTemplateLiteral } from '../util/round';
+
+const getTrapezoidPath = (x, y, upperWidth, lowerWidth, height) => {
+	const widthGap = upperWidth - lowerWidth;
+	let path;
+	path = roundTemplateLiteral`M ${x},${y}`;
+	path += roundTemplateLiteral`L ${x + upperWidth},${y}`;
+	path += roundTemplateLiteral`L ${x + upperWidth - widthGap / 2},${y + height}`;
+	path += roundTemplateLiteral`L ${x + upperWidth - widthGap / 2 - lowerWidth},${y + height}`;
+	path += roundTemplateLiteral`L ${x},${y} Z`;
+	return path;
+};
+
+export const defaultTrapezoidProps = {
+	x: 0,
+	y: 0,
+	upperWidth: 0,
+	lowerWidth: 0,
+	height: 0,
+	isUpdateAnimationActive: false,
+	animationBegin: 0,
+	animationDuration: 1500,
+	animationEasing: 'ease',
+};
+
+export function Trapezoid(outsideProps) {
+	const trapezoidProps = resolveDefaultProps(outsideProps, defaultTrapezoidProps);
+	const { x, y, upperWidth, lowerWidth, height, className } = trapezoidProps;
+
+	if (
+		x !== +x || y !== +y || upperWidth !== +upperWidth || lowerWidth !== +lowerWidth ||
+			height !== +height ||
+			upperWidth === 0 && lowerWidth === 0 ||
+			height === 0
+	) {
+		return null;
+	}
+	const layerClass = clsx('recharts-trapezoid', className);
+
+	// Static path — the update-animation branch is a Phase 5 port. Upstream's
+	// static branch wraps the path in a <g>, so mirror that.
+	return <g>
+		<path
+			{...svgPropertiesAndEvents(trapezoidProps)}
+			className={layerClass}
+			d={getTrapezoidPath(x, y, upperWidth, lowerWidth, height)}
+		/>
+	</g>;
+}

package/src/shape/Trapezoid.tsrx.d.ts

@@ -0,0 +1,29 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export interface TrapezoidProps {
+	x?: number;
+	y?: number;
+	upperWidth?: number;
+	lowerWidth?: number;
+	height?: number;
+	className?: unknown;
+	isUpdateAnimationActive?: boolean;
+	animationBegin?: number;
+	animationDuration?: number;
+	animationEasing?: string;
+	[key: string]: unknown;
+}
+export declare const defaultTrapezoidProps: Required<
+	Pick<
+		TrapezoidProps,
+		| 'x'
+		| 'y'
+		| 'upperWidth'
+		| 'lowerWidth'
+		| 'height'
+		| 'isUpdateAnimationActive'
+		| 'animationBegin'
+		| 'animationDuration'
+		| 'animationEasing'
+	>
+>;
+export declare const Trapezoid: (props: TrapezoidProps) => unknown;

package/src/state/RechartsReduxContext.ts

@@ -0,0 +1,7 @@
+// Recharts' own isolated redux context — port of state/RechartsReduxContext.ts.
+// A dedicated context (NOT @octanejs/redux's default) so a chart's store never
+// interferes with an app-level redux store the host page may be running.
+import { createContext } from 'octane';
+import type { ReactReduxContextValue } from '@octanejs/redux';
+
+export const RechartsReduxContext = createContext<ReactReduxContextValue | null>(null);

package/src/state/RechartsStoreProvider.tsrx

@@ -0,0 +1,24 @@
+// 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
+// inherits the parent chart's store.
+import { useRef } from 'octane';
+import { Provider } from '@octanejs/redux';
+import { createRechartsStore } from './store';
+import { useIsPanorama } from '../context/PanoramaContext';
+import { RechartsReduxContext } from './RechartsReduxContext';
+
+export function RechartsStoreProvider(props) {
+	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);
+	if (isPanorama) {
+		return children;
+	}
+	if (storeRef.current == null) {
+		storeRef.current = createRechartsStore(preloadedState, reduxStoreName);
+	}
+	return <Provider context={RechartsReduxContext} store={storeRef.current}>{children}</Provider>;
+}

package/src/state/ReportChartProps.ts

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

package/src/state/ReportEventSettings.ts

@@ -0,0 +1,15 @@
+// Port of state/ReportEventSettings.tsx.
+import { memo, useEffect } from 'octane';
+import { useAppDispatch } from './hooks';
+import { setEventSettings } from './eventSettingsSlice';
+import { propsAreEqual } from '../util/propsAreEqual';
+
+const ReportEventSettingsImpl = (props: Record<string, unknown>): null => {
+	const dispatch = useAppDispatch();
+	useEffect(() => {
+		dispatch(setEventSettings(props));
+	}, [dispatch, props]);
+	return null;
+};
+
+export const ReportEventSettings = memo(ReportEventSettingsImpl, propsAreEqual);

package/src/state/ReportMainChartProps.ts

@@ -0,0 +1,22 @@
+// Port of state/ReportMainChartProps.tsx — layout + margin land in the store
+// via effect (never during render), skipped entirely inside a Brush panorama.
+import { memo, useEffect } from 'octane';
+import { useIsPanorama } from '../context/PanoramaContext';
+import { setLayout, setMargin } from './layoutSlice';
+import { useAppDispatch } from './hooks';
+import { propsAreEqual } from '../util/propsAreEqual';
+
+function ReportMainChartPropsImpl(props: { layout: unknown; margin: unknown }): null {
+	const { layout, margin } = props;
+	const dispatch = useAppDispatch();
+	const isPanorama = useIsPanorama();
+	useEffect(() => {
+		if (!isPanorama) {
+			dispatch(setLayout(layout));
+			dispatch(setMargin(margin));
+		}
+	}, [dispatch, isPanorama, layout, margin]);
+	return null;
+}
+
+export const ReportMainChartProps = memo(ReportMainChartPropsImpl, propsAreEqual);

package/src/state/SetGraphicalItem.ts

@@ -0,0 +1,61 @@
+// Port of state/SetGraphicalItem.tsx — registers a graphical item's settings
+// in the store on layout-effect timing (add on mount, replace on change,
+// remove on unmount).
+import { memo, useLayoutEffect, useRef } from 'octane';
+import { useAppDispatch } from './hooks';
+import {
+	addCartesianGraphicalItem,
+	addPolarGraphicalItem,
+	removeCartesianGraphicalItem,
+	removePolarGraphicalItem,
+	replaceCartesianGraphicalItem,
+	replacePolarGraphicalItem,
+} from './graphicalItemsSlice';
+
+const SetCartesianGraphicalItemImpl = (props: Record<string, unknown>): null => {
+	const dispatch = useAppDispatch();
+	const prevPropsRef = useRef<Record<string, unknown> | null>(null);
+	useLayoutEffect(() => {
+		if (prevPropsRef.current === null) {
+			dispatch(addCartesianGraphicalItem(props));
+		} else if (prevPropsRef.current !== props) {
+			dispatch(replaceCartesianGraphicalItem({ prev: prevPropsRef.current, next: props }));
+		}
+		prevPropsRef.current = props;
+	}, [dispatch, props]);
+	useLayoutEffect(() => {
+		return () => {
+			if (prevPropsRef.current) {
+				dispatch(removeCartesianGraphicalItem(prevPropsRef.current));
+				prevPropsRef.current = null;
+			}
+		};
+	}, [dispatch]);
+	return null;
+};
+
+export const SetCartesianGraphicalItem = memo(SetCartesianGraphicalItemImpl);
+
+const SetPolarGraphicalItemImpl = (props: Record<string, unknown>): null => {
+	const dispatch = useAppDispatch();
+	const prevPropsRef = useRef<Record<string, unknown> | null>(null);
+	useLayoutEffect(() => {
+		if (prevPropsRef.current === null) {
+			dispatch(addPolarGraphicalItem(props));
+		} else if (prevPropsRef.current !== props) {
+			dispatch(replacePolarGraphicalItem({ prev: prevPropsRef.current, next: props }));
+		}
+		prevPropsRef.current = props;
+	}, [dispatch, props]);
+	useLayoutEffect(() => {
+		return () => {
+			if (prevPropsRef.current) {
+				dispatch(removePolarGraphicalItem(prevPropsRef.current));
+				prevPropsRef.current = null;
+			}
+		};
+	}, [dispatch]);
+	return null;
+};
+
+export const SetPolarGraphicalItem = memo(SetPolarGraphicalItemImpl);

package/src/state/SetLegendPayload.ts

@@ -0,0 +1,61 @@
+// Port of state/SetLegendPayload.tsx — legend payload registration (cartesian
+// skips panorama; polar gates on the polar layouts).
+import { useLayoutEffect, useRef } from 'octane';
+import { useIsPanorama } from '../context/PanoramaContext';
+import { selectChartLayout } from '../context/chartLayoutContext';
+import { useAppDispatch, useAppSelector } from './hooks';
+import { addLegendPayload, replaceLegendPayload, removeLegendPayload } from './legendSlice';
+
+export function SetLegendPayload(props: { legendPayload: unknown }): null {
+	const { legendPayload } = props;
+	const dispatch = useAppDispatch();
+	const isPanorama = useIsPanorama();
+	const prevPayloadRef = useRef<unknown>(null);
+	useLayoutEffect(() => {
+		if (isPanorama) {
+			return;
+		}
+		if (prevPayloadRef.current === null) {
+			dispatch(addLegendPayload(legendPayload));
+		} else if (prevPayloadRef.current !== legendPayload) {
+			dispatch(replaceLegendPayload({ prev: prevPayloadRef.current, next: legendPayload }));
+		}
+		prevPayloadRef.current = legendPayload;
+	}, [dispatch, isPanorama, legendPayload]);
+	useLayoutEffect(() => {
+		return () => {
+			if (prevPayloadRef.current) {
+				dispatch(removeLegendPayload(prevPayloadRef.current));
+				prevPayloadRef.current = null;
+			}
+		};
+	}, [dispatch]);
+	return null;
+}
+
+export function SetPolarLegendPayload(props: { legendPayload: unknown }): null {
+	const { legendPayload } = props;
+	const dispatch = useAppDispatch();
+	const layout = useAppSelector(selectChartLayout);
+	const prevPayloadRef = useRef<unknown>(null);
+	useLayoutEffect(() => {
+		if (layout !== 'centric' && layout !== 'radial') {
+			return;
+		}
+		if (prevPayloadRef.current === null) {
+			dispatch(addLegendPayload(legendPayload));
+		} else if (prevPayloadRef.current !== legendPayload) {
+			dispatch(replaceLegendPayload({ prev: prevPayloadRef.current, next: legendPayload }));
+		}
+		prevPayloadRef.current = legendPayload;
+	}, [dispatch, layout, legendPayload]);
+	useLayoutEffect(() => {
+		return () => {
+			if (prevPayloadRef.current) {
+				dispatch(removeLegendPayload(prevPayloadRef.current));
+				prevPayloadRef.current = null;
+			}
+		};
+	}, [dispatch]);
+	return null;
+}