@octanejs/recharts 0.1.62 → 0.1.63

package/src/polar/PolarRadiusAxis.tsrx

@@ -51,193 +51,203 @@ 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 {
+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
- */
+	 * 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
- */
+	 * 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
- */
+	 * 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
- */
+	 * 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 />
- */
+	 * 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>;
+	 * 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
- */
+	 * The customized event handler of click on the ticks of this axis
+	 */
 	onClick?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
- * The customized event handler of mousedown on the ticks of this axis
- */
+	 * The customized event handler of mousedown on the ticks of this axis
+	 */
 	onMouseDown?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
- * The customized event handler of mouseup on the ticks of this axis
- */
+	 * The customized event handler of mouseup on the ticks of this axis
+	 */
 	onMouseUp?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
- * The customized event handler of mousemove on the ticks of this axis
- */
+	 * The customized event handler of mousemove on the ticks of this axis
+	 */
 	onMouseMove?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
- * The customized event handler of mouseover on the ticks of this axis
- */
+	 * The customized event handler of mouseover on the ticks of this axis
+	 */
 	onMouseOver?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
- * The customized event handler of mouseout on the ticks of this axis
- */
+	 * The customized event handler of mouseout on the ticks of this axis
+	 */
 	onMouseOut?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
- * The customized event handler of mouseenter on the ticks of this axis
- */
+	 * The customized event handler of mouseenter on the ticks of this axis
+	 */
 	onMouseEnter?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
- * The customized event handler of mouseleave on the ticks of this axis
- */
+	 * The customized event handler of mouseleave on the ticks of this axis
+	 */
 	onMouseLeave?: (data: any, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	/**
- * Allow the ticks of axis to be decimals or not.
- *
- * @defaultValue false
- */
+	 * 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'
- */
+	 * 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
- */
+	 * @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.
- * - `OctaneElement`: 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
- */
+	 * 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.
+	 * - `OctaneElement`: 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<PolarTickContentProps>;
 	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}
- */
+	 * 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, SVGGElement>, 'scale' | 'type' | 'ref'> & {
-		ref?: never;
-	};
+type AxisSvgProps = Omit<
+	PresentationAttributesAdaptChildEvent<any, SVGGElement>,
+	'scale' | 'type' | 'ref'
+> & {
+	ref?: never;
+};
 
-export type Props<DataPointType = any, DataValueType = any> =
-	AxisSvgProps & PolarRadiusAxisProps<DataPointType, DataValueType>;
+export type Props<DataPointType = any, DataValueType = any> = AxisSvgProps &
+	PolarRadiusAxisProps<DataPointType, DataValueType>;
 
-type PropsWithDefaults<DataPointType = any, DataValueType = any> =
-	RequiresDefaultProps<Props<DataPointType, DataValueType>, typeof defaultPolarRadiusAxisProps>;
+type PropsWithDefaults<DataPointType = any, DataValueType = any> = RequiresDefaultProps<
+	Props<DataPointType, DataValueType>,
+	typeof defaultPolarRadiusAxisProps
+>;
 
-type InsideProps =
-	Omit<PropsWithDefaults, 'scale'> & PolarViewBoxRequired & {
+type InsideProps = Omit<PropsWithDefaults, 'scale'> &
+	PolarViewBoxRequired & {
 		scale: RechartsScale;
 	};
 
 const AXIS_TYPE = 'radiusAxis';
 
-function SetRadiusAxisSettings(props: Omit<RadiusAxisSettings, 'type'> & {
-	type: AxisDomainTypeInput;
-}): null {
+function SetRadiusAxisSettings(
+	props: Omit<RadiusAxisSettings, 'type'> & {
+		type: AxisDomainTypeInput;
+	},
+): null {
 	const dispatch = useAppDispatch();
 	const layout = usePolarChartLayout();
 	const settings: RadiusAxisSettings | undefined = useMemo(() => {
@@ -356,10 +366,11 @@ const renderTickItem = (
 	} else if (typeof option === 'function') {
 		tickItem = option(tickProps);
 	} else {
-		tickItem = <Text
-			{...tickProps}
-			className="recharts-polar-radius-axis-tick-value"
-		>{value}</Text>;
+		tickItem = (
+			<Text {...tickProps} className="recharts-polar-radius-axis-tick-value">
+				{value}
+			</Text>
+		);
 	}
 
 	return tickItem;
@@ -385,15 +396,19 @@ const renderTicks = (props: InsideProps, ticks: ReadonlyArray<TickItem>): Octane
 			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={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>;
@@ -406,8 +421,8 @@ export const PolarRadiusAxisWrapper: FunctionComponent<PropsWithDefaults> = (
 
 	const viewBox = useAppSelector(selectPolarViewBox);
 	const scale = useAppSelector((state) => selectPolarAxisScale(state, 'radiusAxis', radiusAxisId));
-	const ticks = useAppSelector(
-		(state) => selectPolarAxisTicks(state, 'radiusAxis', radiusAxisId, false),
+	const ticks = useAppSelector((state) =>
+		selectPolarAxisTicks(state, 'radiusAxis', radiusAxisId, false),
 	);
 
 	if (viewBox == null || !ticks || !ticks.length || scale == null) {
@@ -422,16 +437,18 @@ export const PolarRadiusAxisWrapper: FunctionComponent<PropsWithDefaults> = (
 
 	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>;
+	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>
+	);
 };
 
 /**
@@ -445,27 +462,29 @@ export function PolarRadiusAxis<DataPointType = any, DataValueType = any>(
 		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} />
-	</>;
+	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';