@octanejs/recharts 0.1.16 → 0.1.18

package/src/polar/PolarRadiusAxis.tsrx

@@ -0,0 +1,463 @@
+import * as React from 'octane';
+import { FunctionComponent, ReactElement, ReactNode, SVGProps, useEffect, useMemo } from 'octane';
+import maxBy from 'es-toolkit/compat/maxBy';
+import minBy from 'es-toolkit/compat/minBy';
+
+import { clsx } from 'clsx';
+import { Text } from '../component/Text';
+import { PolarLabelContextProvider, PolarLabelFromLabelProp } from '../component/Label';
+import { Layer } from '../container/Layer';
+import { polarToCartesian } from '../util/PolarUtils';
+import {
+	adaptEventsOfChild,
+	RenderableAxisProps,
+	Coordinate,
+	PolarViewBoxRequired,
+	PresentationAttributesAdaptChildEvent,
+	TickItem,
+	AxisDomain,
+	ScaleType,
+	AxisDomainTypeInput,
+	EvaluatedAxisDomainType,
+	TickProp,
+	BaseTickContentProps,
+	AxisTick,
+} from '../util/types';
+import { addRadiusAxis, RadiusAxisSettings, removeRadiusAxis } from '../state/polarAxisSlice';
+import { NiceTicksAlgorithm } from '../state/cartesianAxisSlice';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import { selectPolarAxisScale, selectPolarAxisTicks } from '../state/selectors/polarScaleSelectors';
+import { selectPolarViewBox } from '../state/selectors/polarAxisSelectors';
+import { defaultPolarRadiusAxisProps } from './defaultPolarRadiusAxisProps';
+import {
+	svgPropertiesNoEvents,
+	svgPropertiesNoEventsFromUnknown,
+} from '../util/svgPropertiesNoEvents';
+import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { RechartsScale } from '../util/scale/RechartsScale';
+import type { CustomScaleDefinition } from '../util/scale/CustomScaleDefinition';
+import { usePolarChartLayout } from '../context/chartLayoutContext';
+import { noop } from '../util/DataUtils';
+import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
+import { getClassNameFromUnknown } from '../util/getClassNameFromUnknown';
+
+type TickOrientation = 'left' | 'right' | 'middle';
+
+export interface PolarRadiusAxisProps<DataPointType = any, DataValueType = any> extends Omit<
+	RenderableAxisProps<DataPointType, DataValueType>,
+	'axisLine' | 'angle' | 'type' | 'tickSize' | 'domain' | 'scale' | 'tick'
+>, ZIndexable {
+	/**
+ * Determines how the axis line is drawn. Options:
+ * - `true`: the axis line is drawn with default props;
+ * - `false`: the axis line is not visible;
+ * - `object`: passed as props to SVG `<line>` element representing the axis line.
+ *
+ * @example <PolarRadiusAxis axisLine={false} />
+ * @example <PolarRadiusAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />
+ * @defaultValue true
+ */
+	axisLine?: boolean | SVGProps<SVGLineElement>;
+	/**
+ * The angle of the whole axis: the line, ticks and labels, everything.
+ *
+ * This is different from other graphical elements where angle usually means
+ * the angle of text. Here, it means the angle of everything.
+ *
+ * @defaultValue 0
+ */
+	angle?: number;
+	/**
+ * The type of axis.
+ *
+ * `category`: Treats data as distinct values.
+ * Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
+ *
+ * `number`: Treats data as continuous range.
+ * Values that are numerically closer are placed closer together on the axis.
+ *
+ * `auto`: the type is inferred based on the chart layout.
+ *
+ * @defaultValue auto
+ */
+	type?: AxisDomainTypeInput;
+	/**
+ * The orientation of axis text.
+ * @defaultValue right
+ */
+	orientation?: TickOrientation;
+	/**
+ * Specify the domain of axis when the axis is a number axis.
+ *
+ * If undefined, then the domain is calculated based on the data and dataKeys.
+ *
+ * The length of domain should be 2, and we will validate the values in domain.
+ *
+ * Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100',
+ * or a function that accepts a single argument and returns a number.
+ *
+ * If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
+ * If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
+ *
+ * @example <PolarRadiusAxis type="number" domain={['dataMin', 'dataMax']} />
+ * @example <PolarRadiusAxis type="number" domain={[0, 'dataMax']} />
+ * @example <PolarRadiusAxis type="number" domain={['auto', 'auto']} />
+ * @example <PolarRadiusAxis type="number" domain={[0, 'dataMax + 1000']} />
+ * @example <PolarRadiusAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
+ * @example <PolarRadiusAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
+ * @example <PolarRadiusAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
+ * @example <PolarRadiusAxis type="number" domain={[0, 100]} allowDataOverflow />
+ */
+	domain?: AxisDomain;
+	/**
+ * Scale function determines how data values are mapped to visual values.
+ * In other words, decided the mapping between data domain and coordinate range.
+ *
+ * If undefined, or 'auto', the scale function is created internally according to the type of axis and data.
+ *
+ * You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.
+ *
+ * @defaultValue auto
+ * @example <PolarRadiusAxis scale="log" />
+ * @example
+ * import { scaleLog } from 'd3-scale';
+ * const scale = scaleLog().base(Math.E);
+ * <PolarRadiusAxis scale={scale} />
+ */
+	scale?: | ScaleType
+	| CustomScaleDefinition
+	| CustomScaleDefinition<string>
+	| CustomScaleDefinition<number>
+	| CustomScaleDefinition<Date>;
+	/**
+ * The customized event handler of click on the ticks of this axis
+ */
+	onClick?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+ * The customized event handler of mousedown on the ticks of this axis
+ */
+	onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+ * The customized event handler of mouseup on the ticks of this axis
+ */
+	onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+ * The customized event handler of mousemove on the ticks of this axis
+ */
+	onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+ * The customized event handler of mouseover on the ticks of this axis
+ */
+	onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+ * The customized event handler of mouseout on the ticks of this axis
+ */
+	onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+ * The customized event handler of mouseenter on the ticks of this axis
+ */
+	onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+ * The customized event handler of mouseleave on the ticks of this axis
+ */
+	onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+ * Allow the ticks of axis to be decimals or not.
+ *
+ * @defaultValue false
+ */
+	allowDecimals?: boolean;
+	/**
+ * Controls how Recharts calculates "nice" tick values for this axis.
+ * Options: `'none'`, `'auto'`, `'adaptive'`, `'snap125'`.
+ * See {@link NiceTicksAlgorithm} for a full description of each option.
+ *
+ * @defaultValue 'auto'
+ */
+	niceTicks?: NiceTicksAlgorithm;
+	/**
+ * @defaultValue 0
+ */
+	radiusAxisId?: string | number;
+	/**
+ * Defines how the individual label text is rendered.
+ * This controls the settings for individual ticks; on a typical axis, there are multiple ticks, depending on your data.
+ *
+ * If you want to customize the overall axis label, use the `label` prop instead.
+ *
+ * Options:
+ * - `false`: Do not render any tick labels.
+ * - `true`: Render tick labels with default settings.
+ * - `object`: An object of props to be merged into the internally calculated tick props.
+ * - `ReactElement`: A custom React element to be used as the tick label.
+ * - `function`: A function that returns a React element for custom rendering of tick labels.
+ *
+ * @defaultValue true
+ */
+	tick?: TickProp<BaseTickContentProps>;
+	ticks?: ReadonlyArray<AxisTick>;
+	/**
+ * Z-Index of this component and its children. The higher the value,
+ * the more on top it will be rendered.
+ * Components with higher zIndex will appear in front of components with lower zIndex.
+ * If undefined or 0, the content is rendered in the default layer without portals.
+ *
+ * @since 3.4
+ * @defaultValue 500
+ * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
+ */
+	zIndex?: number;
+}
+
+type AxisSvgProps =
+	Omit<PresentationAttributesAdaptChildEvent<any, SVGTextElement>, 'scale' | 'type'>;
+
+export type Props<DataPointType = any, DataValueType = any> =
+	AxisSvgProps & PolarRadiusAxisProps<DataPointType, DataValueType>;
+
+type PropsWithDefaults<DataPointType = any, DataValueType = any> =
+	RequiresDefaultProps<Props<DataPointType, DataValueType>, typeof defaultPolarRadiusAxisProps>;
+
+type InsideProps =
+	Omit<PropsWithDefaults, 'scale'> & PolarViewBoxRequired & {
+		scale: RechartsScale;
+	};
+
+const AXIS_TYPE = 'radiusAxis';
+
+function SetRadiusAxisSettings(props: Omit<RadiusAxisSettings, 'type'> & {
+	type: AxisDomainTypeInput;
+}): null {
+	const dispatch = useAppDispatch();
+	const layout = usePolarChartLayout();
+	const settings: RadiusAxisSettings | undefined = useMemo(() => {
+		const { type: typeFromProps, ...rest } = props;
+		const evaluatedType: EvaluatedAxisDomainType | undefined = getAxisTypeBasedOnLayout(
+			layout,
+			'radiusAxis',
+			typeFromProps,
+		);
+		if (evaluatedType == null) {
+			return undefined;
+		}
+		return { ...rest, type: evaluatedType };
+	}, [props, layout]);
+	useEffect(() => {
+		if (settings == null) {
+			return noop;
+		}
+		dispatch(addRadiusAxis(settings));
+		return () => {
+			dispatch(removeRadiusAxis(settings));
+		};
+	}, [dispatch, settings]);
+	return null;
+}
+
+/**
+ * Calculate the coordinate of tick
+ * @param coordinate The radius of tick
+ * @param angle from props
+ * @param cx from chart
+ * @param cy from chart
+ * @return (x, y)
+ */
+const getTickValueCoord = (
+	{ coordinate }: TickItem,
+	angle: number,
+	cx: number,
+	cy: number,
+): Coordinate => {
+	return polarToCartesian(cx, cy, coordinate, angle);
+};
+
+const getTickTextAnchor = (orientation: TickOrientation): string => {
+	let textAnchor;
+
+	switch (orientation) {
+		case 'left':
+			textAnchor = 'end';
+			break;
+		case 'right':
+			textAnchor = 'start';
+			break;
+		default:
+			textAnchor = 'middle';
+			break;
+	}
+
+	return textAnchor;
+};
+
+const getViewBox = (
+	angle: number,
+	cx: number,
+	cy: number,
+	ticks: ReadonlyArray<TickItem>,
+): PolarViewBoxRequired => {
+	const maxRadiusTick = maxBy(ticks, (entry: TickItem) => entry.coordinate || 0);
+	const minRadiusTick = minBy(ticks, (entry: TickItem) => entry.coordinate || 0);
+
+	return {
+		cx,
+		cy,
+		startAngle: angle,
+		endAngle: angle,
+		innerRadius: minRadiusTick?.coordinate || 0,
+		outerRadius: maxRadiusTick?.coordinate || 0,
+		clockWise: false,
+	};
+};
+
+const renderAxisLine = (props: InsideProps, ticks: ReadonlyArray<TickItem>): ReactElement => {
+	const { cx, cy, angle, axisLine, ...others } = props;
+	const extent: [number, number] = ticks.reduce(
+		(result: [number, number], entry: TickItem): [number, number] => [
+			Math.min(result[0], entry.coordinate),
+			Math.max(result[1], entry.coordinate),
+		],
+		[Infinity, -Infinity],
+	);
+	const point0 = polarToCartesian(cx, cy, extent[0], angle);
+	const point1 = polarToCartesian(cx, cy, extent[1], angle);
+
+	const axisLineProps = {
+		...svgPropertiesNoEvents(others),
+		fill: 'none',
+		...svgPropertiesNoEvents(axisLine),
+		x1: point0.x,
+		y1: point0.y,
+		x2: point1.x,
+		y2: point1.y,
+	};
+
+	// @ts-expect-error wrong SVG element type
+	return <line className="recharts-polar-radius-axis-line" {...axisLineProps} />;
+};
+
+const renderTickItem = (
+	option: Props['tick'],
+	tickProps: any,
+	value: string | number,
+): ReactNode => {
+	let tickItem;
+
+	if (React.isValidElement(option)) {
+		tickItem = React.cloneElement(option, tickProps);
+	} else if (typeof option === 'function') {
+		tickItem = option(tickProps);
+	} else {
+		tickItem = <Text
+			{...tickProps}
+			className="recharts-polar-radius-axis-tick-value"
+		>{value}</Text>;
+	}
+
+	return tickItem;
+};
+
+const renderTicks = (props: InsideProps, ticks: ReadonlyArray<TickItem>): ReactElement => {
+	const { angle, tickFormatter, stroke, tick, ...others } = props;
+	const textAnchor = getTickTextAnchor(props.orientation);
+	const axisProps = svgPropertiesNoEvents(others);
+	const customTickProps = svgPropertiesNoEventsFromUnknown(tick);
+
+	const items = ticks.map((entry, i) => {
+		const coord = getTickValueCoord(entry, props.angle, props.cx, props.cy);
+		const tickProps = {
+			textAnchor,
+			transform: `rotate(${90 - angle}, ${coord.x}, ${coord.y})`,
+			...axisProps,
+			stroke: 'none',
+			fill: stroke,
+			...customTickProps,
+			index: i,
+			...coord,
+			payload: entry,
+		};
+
+		return <Layer
+			className={clsx('recharts-polar-radius-axis-tick', getClassNameFromUnknown(tick))}
+			key={`tick-${entry.coordinate}`}
+			{...adaptEventsOfChild(props, entry, i)}
+		>{renderTickItem(
+			tick,
+			tickProps,
+			tickFormatter ? tickFormatter(entry.value, i) : entry.value,
+		)}</Layer>;
+	});
+
+	return <Layer className="recharts-polar-radius-axis-ticks">{items}</Layer>;
+};
+
+export const PolarRadiusAxisWrapper: FunctionComponent<PropsWithDefaults> = (
+	defaultsAndInputs: PropsWithDefaults,
+) => {
+	const { radiusAxisId } = defaultsAndInputs;
+
+	const viewBox = useAppSelector(selectPolarViewBox);
+	const scale = useAppSelector((state) => selectPolarAxisScale(state, 'radiusAxis', radiusAxisId));
+	const ticks = useAppSelector(
+		(state) => selectPolarAxisTicks(state, 'radiusAxis', radiusAxisId, false),
+	);
+
+	if (viewBox == null || !ticks || !ticks.length || scale == null) {
+		return null;
+	}
+
+	const props: InsideProps = {
+		...defaultsAndInputs,
+		scale,
+		...viewBox,
+	};
+
+	const { tick, axisLine } = props;
+
+	return <ZIndexLayer zIndex={props.zIndex}>
+		<Layer className={clsx('recharts-polar-radius-axis', AXIS_TYPE, props.className)}>
+			{axisLine && renderAxisLine(props, ticks)}
+			{tick && renderTicks(props, ticks)}
+			<PolarLabelContextProvider {...getViewBox(props.angle, props.cx, props.cy, ticks)}>
+				<PolarLabelFromLabelProp label={props.label} />
+				{props.children}
+			</PolarLabelContextProvider>
+		</Layer>
+	</ZIndexLayer>;
+};
+
+/**
+ * @provides PolarLabelContext
+ * @consumes PolarViewBoxContext
+ */
+export function PolarRadiusAxis<DataPointType = any, DataValueType = any>(
+	outsideProps: Props<DataPointType, DataValueType>,
+) {
+	const props: PropsWithDefaults<DataPointType, DataValueType> = resolveDefaultProps(
+		outsideProps,
+		defaultPolarRadiusAxisProps,
+	);
+	return <>
+		<SetRadiusAxisSettings
+			domain={props.domain}
+			id={props.radiusAxisId}
+			scale={props.scale}
+			type={props.type}
+			dataKey={props.dataKey}
+			unit={undefined}
+			name={props.name}
+			allowDuplicatedCategory={props.allowDuplicatedCategory}
+			allowDataOverflow={props.allowDataOverflow}
+			reversed={props.reversed}
+			includeHidden={props.includeHidden}
+			allowDecimals={props.allowDecimals}
+			niceTicks={props.niceTicks ?? 'auto'}
+			ticks={props.ticks}
+			tickCount={props.tickCount}
+			tick={props.tick}
+		/>
+		<PolarRadiusAxisWrapper {...props} />
+	</>;
+}
+
+PolarRadiusAxis.displayName = 'PolarRadiusAxis';

package/src/polar/PolarRadiusAxis.tsrx.d.ts

@@ -0,0 +1,209 @@
+import * as React from 'octane';
+import { FunctionComponent, SVGProps } from 'octane';
+import {
+	RenderableAxisProps,
+	PresentationAttributesAdaptChildEvent,
+	AxisDomain,
+	ScaleType,
+	AxisDomainTypeInput,
+	TickProp,
+	BaseTickContentProps,
+	AxisTick,
+} from '../util/types';
+import { NiceTicksAlgorithm } from '../state/cartesianAxisSlice';
+import { defaultPolarRadiusAxisProps } from './defaultPolarRadiusAxisProps';
+import { RequiresDefaultProps } from '../util/resolveDefaultProps';
+import { ZIndexable } from '../zIndex/ZIndexLayer';
+import { CustomScaleDefinition } from '../util/scale/CustomScaleDefinition';
+type TickOrientation = 'left' | 'right' | 'middle';
+export interface PolarRadiusAxisProps<DataPointType = any, DataValueType = any>
+	extends
+		Omit<
+			RenderableAxisProps<DataPointType, DataValueType>,
+			'axisLine' | 'angle' | 'type' | 'tickSize' | 'domain' | 'scale' | 'tick'
+		>,
+		ZIndexable {
+	/**
+	 * Determines how the axis line is drawn. Options:
+	 * - `true`: the axis line is drawn with default props;
+	 * - `false`: the axis line is not visible;
+	 * - `object`: passed as props to SVG `<line>` element representing the axis line.
+	 *
+	 * @example <PolarRadiusAxis axisLine={false} />
+	 * @example <PolarRadiusAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />
+	 * @defaultValue true
+	 */
+	axisLine?: boolean | SVGProps<SVGLineElement>;
+	/**
+	 * The angle of the whole axis: the line, ticks and labels, everything.
+	 *
+	 * This is different from other graphical elements where angle usually means
+	 * the angle of text. Here, it means the angle of everything.
+	 *
+	 * @defaultValue 0
+	 */
+	angle?: number;
+	/**
+	 * The type of axis.
+	 *
+	 * `category`: Treats data as distinct values.
+	 * Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
+	 *
+	 * `number`: Treats data as continuous range.
+	 * Values that are numerically closer are placed closer together on the axis.
+	 *
+	 * `auto`: the type is inferred based on the chart layout.
+	 *
+	 * @defaultValue auto
+	 */
+	type?: AxisDomainTypeInput;
+	/**
+	 * The orientation of axis text.
+	 * @defaultValue right
+	 */
+	orientation?: TickOrientation;
+	/**
+	 * Specify the domain of axis when the axis is a number axis.
+	 *
+	 * If undefined, then the domain is calculated based on the data and dataKeys.
+	 *
+	 * The length of domain should be 2, and we will validate the values in domain.
+	 *
+	 * Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100',
+	 * or a function that accepts a single argument and returns a number.
+	 *
+	 * If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
+	 * If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
+	 *
+	 * @example <PolarRadiusAxis type="number" domain={['dataMin', 'dataMax']} />
+	 * @example <PolarRadiusAxis type="number" domain={[0, 'dataMax']} />
+	 * @example <PolarRadiusAxis type="number" domain={['auto', 'auto']} />
+	 * @example <PolarRadiusAxis type="number" domain={[0, 'dataMax + 1000']} />
+	 * @example <PolarRadiusAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
+	 * @example <PolarRadiusAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
+	 * @example <PolarRadiusAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
+	 * @example <PolarRadiusAxis type="number" domain={[0, 100]} allowDataOverflow />
+	 */
+	domain?: AxisDomain;
+	/**
+	 * Scale function determines how data values are mapped to visual values.
+	 * In other words, decided the mapping between data domain and coordinate range.
+	 *
+	 * If undefined, or 'auto', the scale function is created internally according to the type of axis and data.
+	 *
+	 * You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.
+	 *
+	 * @defaultValue auto
+	 * @example <PolarRadiusAxis scale="log" />
+	 * @example
+	 * import { scaleLog } from 'd3-scale';
+	 * const scale = scaleLog().base(Math.E);
+	 * <PolarRadiusAxis scale={scale} />
+	 */
+	scale?:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
+	/**
+	 * The customized event handler of click on the ticks of this axis
+	 */
+	onClick?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+	 * The customized event handler of mousedown on the ticks of this axis
+	 */
+	onMouseDown?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+	 * The customized event handler of mouseup on the ticks of this axis
+	 */
+	onMouseUp?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+	 * The customized event handler of mousemove on the ticks of this axis
+	 */
+	onMouseMove?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+	 * The customized event handler of mouseover on the ticks of this axis
+	 */
+	onMouseOver?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+	 * The customized event handler of mouseout on the ticks of this axis
+	 */
+	onMouseOut?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+	 * The customized event handler of mouseenter on the ticks of this axis
+	 */
+	onMouseEnter?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+	 * The customized event handler of mouseleave on the ticks of this axis
+	 */
+	onMouseLeave?: (data: any, index: number, e: React.MouseEvent) => void;
+	/**
+	 * Allow the ticks of axis to be decimals or not.
+	 *
+	 * @defaultValue false
+	 */
+	allowDecimals?: boolean;
+	/**
+	 * Controls how Recharts calculates "nice" tick values for this axis.
+	 * Options: `'none'`, `'auto'`, `'adaptive'`, `'snap125'`.
+	 * See {@link NiceTicksAlgorithm} for a full description of each option.
+	 *
+	 * @defaultValue 'auto'
+	 */
+	niceTicks?: NiceTicksAlgorithm;
+	/**
+	 * @defaultValue 0
+	 */
+	radiusAxisId?: string | number;
+	/**
+	 * Defines how the individual label text is rendered.
+	 * This controls the settings for individual ticks; on a typical axis, there are multiple ticks, depending on your data.
+	 *
+	 * If you want to customize the overall axis label, use the `label` prop instead.
+	 *
+	 * Options:
+	 * - `false`: Do not render any tick labels.
+	 * - `true`: Render tick labels with default settings.
+	 * - `object`: An object of props to be merged into the internally calculated tick props.
+	 * - `ReactElement`: A custom React element to be used as the tick label.
+	 * - `function`: A function that returns a React element for custom rendering of tick labels.
+	 *
+	 * @defaultValue true
+	 */
+	tick?: TickProp<BaseTickContentProps>;
+	ticks?: ReadonlyArray<AxisTick>;
+	/**
+	 * Z-Index of this component and its children. The higher the value,
+	 * the more on top it will be rendered.
+	 * Components with higher zIndex will appear in front of components with lower zIndex.
+	 * If undefined or 0, the content is rendered in the default layer without portals.
+	 *
+	 * @since 3.4
+	 * @defaultValue 500
+	 * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
+	 */
+	zIndex?: number;
+}
+type AxisSvgProps = Omit<
+	PresentationAttributesAdaptChildEvent<any, SVGTextElement>,
+	'scale' | 'type'
+>;
+export type Props<DataPointType = any, DataValueType = any> = AxisSvgProps &
+	PolarRadiusAxisProps<DataPointType, DataValueType>;
+type PropsWithDefaults<DataPointType = any, DataValueType = any> = RequiresDefaultProps<
+	Props<DataPointType, DataValueType>,
+	typeof defaultPolarRadiusAxisProps
+>;
+export declare const PolarRadiusAxisWrapper: FunctionComponent<PropsWithDefaults>;
+/**
+ * @provides PolarLabelContext
+ * @consumes PolarViewBoxContext
+ */
+export declare function PolarRadiusAxis<DataPointType = any, DataValueType = any>(
+	outsideProps: Props<DataPointType, DataValueType>,
+): React.JSX.Element;
+export declare namespace PolarRadiusAxis {
+	var displayName: string;
+}
+export {};