@octanejs/recharts 0.1.62 → 0.1.64

package/src/polar/PolarAngleAxis.tsrx

@@ -53,245 +53,248 @@ import { getClassNameFromUnknown } from '../util/getClassNameFromUnknown';
 const eps = 1e-5;
 const COS_45 = Math.cos(degreeToRadian(45));
 
-export interface PolarAngleAxisProps<DataPointType = any, DataValueType = any> extends Omit<
-	RenderableAxisProps<DataPointType, DataValueType>,
-	'axisLine' | 'tickCount' | 'domain' | 'scale' | 'tick'
->, ZIndexable {
+export interface PolarAngleAxisProps<DataPointType = any, DataValueType = any>
+	extends
+		Omit<
+			RenderableAxisProps<DataPointType, DataValueType>,
+			'axisLine' | 'tickCount' | 'domain' | 'scale' | 'tick'
+		>,
+		ZIndexable {
 	/**
- * Controls axis line element. These are be passed as props to SVG `<line>` element representing the axis line.
- * If `true` then the axis line is drawn using props of the PolarAngleAxis component.
- * If `false` then the axis line is not drawn.
- *
- * Also see `axisLineType` prop to change the shape of the axis line.
- *
- * @defaultValue true
- *
- * @example <PolarAngleAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />
- * @example <PolarAngleAxis axisLine={false} />
- * @example <PolarAngleAxis stroke='red' strokeWidth={2} strokeDasharray={4} />
- */
+	 * Controls axis line element. These are be passed as props to SVG `<line>` element representing the axis line.
+	 * If `true` then the axis line is drawn using props of the PolarAngleAxis component.
+	 * If `false` then the axis line is not drawn.
+	 *
+	 * Also see `axisLineType` prop to change the shape of the axis line.
+	 *
+	 * @defaultValue true
+	 *
+	 * @example <PolarAngleAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />
+	 * @example <PolarAngleAxis axisLine={false} />
+	 * @example <PolarAngleAxis stroke='red' strokeWidth={2} strokeDasharray={4} />
+	 */
 	axisLine?: boolean | SVGProps<SVGCircleElement | SVGPathElement>;
 	/**
- * @defaultValue false
- */
+	 * @defaultValue false
+	 */
 	allowDecimals?: boolean;
 	/**
- * Allow the axis has duplicated categories or not when the type of axis is "category".
- * @defaultValue true
- */
+	 * Allow the axis has duplicated categories or not when the type of axis is "category".
+	 * @defaultValue true
+	 */
 	allowDuplicatedCategory?: boolean;
 	/**
- * @defaultValue 0
- */
+	 * @defaultValue 0
+	 */
 	angleAxisId?: string | number;
 	/**
- * The type of axis line.
- * @defaultValue polygon
- */
+	 * The type of axis line.
+	 * @defaultValue polygon
+	 */
 	axisLineType?: 'polygon' | 'circle';
 	/**
- * The x-coordinate of center.
- * When used inside a chart context, this prop is calculated based on the chart's dimensions,
- * and this prop is ignored.
- *
- * This is only used when rendered outside a chart context.
- */
+	 * The x-coordinate of center.
+	 * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+	 * and this prop is ignored.
+	 *
+	 * This is only used when rendered outside a chart context.
+	 */
 	cx?: number;
 	/**
- * The y-coordinate of center.
- * When used inside a chart context, this prop is calculated based on the chart's dimensions,
- * and this prop is ignored.
- *
- * This is only used when rendered outside a chart context.
- */
+	 * The y-coordinate of center.
+	 * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+	 * and this prop is ignored.
+	 *
+	 * This is only used when rendered outside a chart context.
+	 */
 	cy?: number;
 	/**
- * The orientation of axis text.
- * @defaultValue 'outer'
- */
+	 * The orientation of axis text.
+	 * @defaultValue 'outer'
+	 */
 	orientation?: 'inner' | 'outer';
 	/**
- * 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 <PolarAngleAxis type="number" domain={['dataMin', 'dataMax']} />
- * @example <PolarAngleAxis type="number" domain={[0, 'dataMax']} />
- * @example <PolarAngleAxis type="number" domain={['auto', 'auto']} />
- * @example <PolarAngleAxis type="number" domain={[0, 'dataMax + 1000']} />
- * @example <PolarAngleAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
- * @example <PolarAngleAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
- * @example <PolarAngleAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
- * @example <PolarAngleAxis 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 <PolarAngleAxis type="number" domain={['dataMin', 'dataMax']} />
+	 * @example <PolarAngleAxis type="number" domain={[0, 'dataMax']} />
+	 * @example <PolarAngleAxis type="number" domain={['auto', 'auto']} />
+	 * @example <PolarAngleAxis type="number" domain={[0, 'dataMax + 1000']} />
+	 * @example <PolarAngleAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
+	 * @example <PolarAngleAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
+	 * @example <PolarAngleAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
+	 * @example <PolarAngleAxis 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 <PolarAngleAxis scale="log" />
- * @example
- * import { scaleLog } from 'd3-scale';
- * const scale = scaleLog().base(Math.E);
- * <PolarAngleAxis 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 <PolarAngleAxis scale="log" />
+	 * @example
+	 * import { scaleLog } from 'd3-scale';
+	 * const scale = scaleLog().base(Math.E);
+	 * <PolarAngleAxis scale={scale} />
+	 */
+	scale?:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
 	/**
- * The outer radius of circle grid.
- * If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
- */
+	 * The outer radius of circle grid.
+	 * If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
+	 */
 	radius?: number | string;
 	/**
- * 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>;
 	/**
- * The count of axis ticks. Not used if 'type' is 'category'.
- */
+	 * The count of axis ticks. Not used if 'type' is 'category'.
+	 */
 	tickCount?: number;
 	/**
- * 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;
 	/**
- * The formatter function of ticks.
- */
+	 * The formatter function of ticks.
+	 */
 	tickFormatter?: (value: any, index: number) => string;
 	/**
- * The length of tick line.
- * @defaultValue 8
- */
+	 * The length of tick line.
+	 * @defaultValue 8
+	 */
 	tickSize?: number;
 	/**
- * The array of tick values to map through the axis scale.
- */
+	 * The array of tick values to map through the axis scale.
+	 */
 	ticks?: ReadonlyArray<AxisTick>;
 	/**
- * 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;
 	/**
- * 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 PolarAngleAxisEvents = {
 	/**
- * 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: TickItem, 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: TickItem, 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: TickItem, 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: TickItem, 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: TickItem, 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: TickItem, 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: TickItem, 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: TickItem, index: number, e: NativeMouseEvent<SVGGElement>) => void;
 	onTouchStart?: (data: TickItem, index: number, e: NativeTouchEvent<SVGGElement>) => void;
 	onTouchMove?: (data: TickItem, index: number, e: NativeTouchEvent<SVGGElement>) => void;
 	onTouchEnd?: (data: TickItem, index: number, e: NativeTouchEvent<SVGGElement>) => void;
 };
 
-type AxisSvgProps =
-	Omit<
-		PresentationAttributesAdaptChildEvent<TickItem, SVGGElement>,
-		'scale' | 'type' | 'dangerouslySetInnerHTML' | 'ref'
-	> & { ref?: never };
+type AxisSvgProps = Omit<
+	PresentationAttributesAdaptChildEvent<TickItem, SVGGElement>,
+	'scale' | 'type' | 'dangerouslySetInnerHTML' | 'ref'
+> & { ref?: never };
 
-export type Props<DataPointType = any, DataValueType = any> =
-	AxisSvgProps & PolarAngleAxisProps<DataPointType, DataValueType>;
+export type Props<DataPointType = any, DataValueType = any> = AxisSvgProps &
+	PolarAngleAxisProps<DataPointType, DataValueType>;
 
-type PropsWithDefaults<DataPointType = any, DataValueType = any> =
-	RequiresDefaultProps<Props<DataPointType, DataValueType>, typeof defaultPolarAngleAxisProps>;
+type PropsWithDefaults<DataPointType = any, DataValueType = any> = RequiresDefaultProps<
+	Props<DataPointType, DataValueType>,
+	typeof defaultPolarAngleAxisProps
+>;
 
-type InternalPolarAngleAxisProps =
-	Omit<PropsWithDefaults, 'scale' | 'ticks'> & {
-		cx: number;
-		cy: number;
-		radius: number;
-		ticks: ReadonlyArray<TickItem>;
-		scale: RechartsScale;
-	} & PolarAngleAxisEvents;
+type InternalPolarAngleAxisProps = Omit<PropsWithDefaults, 'scale' | 'ticks'> & {
+	cx: number;
+	cy: number;
+	radius: number;
+	ticks: ReadonlyArray<TickItem>;
+	scale: RechartsScale;
+} & PolarAngleAxisEvents;
 
 const AXIS_TYPE = 'angleAxis';
 
-type AngleAxisSettingsReporter =
-	Omit<AngleAxisSettings, 'type'> & {
-		children: OctaneNode;
-		type: AxisDomainTypeInput;
-	};
+type AngleAxisSettingsReporter = Omit<AngleAxisSettings, 'type'> & {
+	children: OctaneNode;
+	type: AxisDomainTypeInput;
+};
 
 function SetAngleAxisSettings(props: AngleAxisSettingsReporter): OctaneNode {
 	const dispatch = useAppDispatch();
@@ -403,21 +406,25 @@ const AxisLine = (props: InternalPolarAngleAxisProps) => {
 	};
 
 	if (axisLineType === 'circle') {
-		return <Dot
-			className="recharts-polar-angle-axis-line"
-			{...axisLineProps as SVGPropsForHost<typeof axisLineProps, SVGCircleElement>}
-			cx={cx}
-			cy={cy}
-			r={radius}
-		/>;
+		return (
+			<Dot
+				className="recharts-polar-angle-axis-line"
+				{...(axisLineProps as SVGPropsForHost<typeof axisLineProps, SVGCircleElement>)}
+				cx={cx}
+				cy={cy}
+				r={radius}
+			/>
+		);
 	}
 	const points = ticks.map((entry) => polarToCartesian(cx, cy, radius, entry.coordinate));
 
-	return <Polygon
-		className="recharts-polar-angle-axis-line"
-		{...axisLineProps as SVGPropsForHost<typeof axisLineProps, SVGPathElement>}
-		points={points}
-	/>;
+	return (
+		<Polygon
+			className="recharts-polar-angle-axis-line"
+			{...(axisLineProps as SVGPropsForHost<typeof axisLineProps, SVGPathElement>)}
+			points={points}
+		/>
+	);
 };
 
 type TickItemProps = {
@@ -436,7 +443,11 @@ const TickItemText = ({ tick, tickProps, value }: TickItemProps): OctaneNode =>
 	if (typeof tick === 'function') {
 		return tick(tickProps);
 	}
-	return <Text {...tickProps} className="recharts-polar-angle-axis-tick-value">{value}</Text>;
+	return (
+		<Text {...tickProps} className="recharts-polar-angle-axis-tick-value">
+			{value}
+		</Text>
+	);
 };
 
 const Ticks = (props: InternalPolarAngleAxisProps) => {
@@ -466,19 +477,22 @@ const Ticks = (props: InternalPolarAngleAxisProps) => {
 			y: lineCoord.y2,
 		};
 
-		return <Layer
-			className={clsx('recharts-polar-angle-axis-tick', getClassNameFromUnknown(tick))}
-			key={`tick-${entry.coordinate}`}
-			{...adaptEventsOfChild(props, entry, i)}
-		>
-			{tickLine &&
-				<line className="recharts-polar-angle-axis-tick-line" {...tickLineProps} {...lineCoord} />}
-			<TickItemText
-				tick={tick}
-				tickProps={tickProps}
-				value={tickFormatter ? tickFormatter(entry.value, i) : entry.value}
-			/>
-		</Layer>;
+		return (
+			<Layer
+				className={clsx('recharts-polar-angle-axis-tick', getClassNameFromUnknown(tick))}
+				key={`tick-${entry.coordinate}`}
+				{...adaptEventsOfChild(props, entry, i)}
+			>
+				{tickLine && (
+					<line className="recharts-polar-angle-axis-tick-line" {...tickLineProps} {...lineCoord} />
+				)}
+				<TickItemText
+					tick={tick}
+					tickProps={tickProps}
+					value={tickFormatter ? tickFormatter(entry.value, i) : entry.value}
+				/>
+			</Layer>
+		);
 	});
 
 	return <Layer className="recharts-polar-angle-axis-ticks">{items}</Layer>;
@@ -492,8 +506,8 @@ export const PolarAngleAxisWrapper: FunctionComponent<PropsWithDefaults> = (
 	const viewBox = useAppSelector(selectPolarViewBox);
 	const scale = useAppSelector((state) => selectPolarAxisScale(state, 'angleAxis', angleAxisId));
 	const isPanorama = useIsPanorama();
-	const ticks = useAppSelector(
-		(state) => selectPolarAngleAxisTicks(state, 'angleAxis', angleAxisId, isPanorama),
+	const ticks = useAppSelector((state) =>
+		selectPolarAngleAxisTicks(state, 'angleAxis', angleAxisId, isPanorama),
 	);
 
 	if (viewBox == null || !ticks || !ticks.length || scale == null) {
@@ -508,12 +522,14 @@ export const PolarAngleAxisWrapper: FunctionComponent<PropsWithDefaults> = (
 		ticks,
 	};
 
-	return <ZIndexLayer zIndex={props.zIndex}>
-		<Layer className={clsx('recharts-polar-angle-axis', AXIS_TYPE, props.className)}>
-			<AxisLine {...props} />
-			<Ticks {...props} />
-		</Layer>
-	</ZIndexLayer>;
+	return (
+		<ZIndexLayer zIndex={props.zIndex}>
+			<Layer className={clsx('recharts-polar-angle-axis', AXIS_TYPE, props.className)}>
+				<AxisLine {...props} />
+				<Ticks {...props} />
+			</Layer>
+		</ZIndexLayer>
+	);
 };
 
 /**
@@ -528,27 +544,29 @@ export function PolarAngleAxis<DataPointType = any, DataValueType = any>(
 		defaultPolarAngleAxisProps,
 	);
 
-	return <SetAngleAxisSettings
-		id={props.angleAxisId}
-		scale={props.scale}
-		type={props.type}
-		dataKey={props.dataKey}
-		unit={undefined}
-		name={props.name}
-		allowDuplicatedCategory={false}
-		// Ignoring the prop on purpose because axis calculation behaves as if it was false and Tooltip requires it to be true.
-		allowDataOverflow={false}
-		reversed={props.reversed}
-		includeHidden={false}
-		allowDecimals={props.allowDecimals}
-		tickCount={props.tickCount}
-		niceTicks={props.niceTicks ?? 'auto'}
-		ticks={props.ticks}
-		tick={props.tick}
-		domain={props.domain}
-	>
-		<PolarAngleAxisWrapper {...props} />
-	</SetAngleAxisSettings>;
+	return (
+		<SetAngleAxisSettings
+			id={props.angleAxisId}
+			scale={props.scale}
+			type={props.type}
+			dataKey={props.dataKey}
+			unit={undefined}
+			name={props.name}
+			allowDuplicatedCategory={false}
+			// Ignoring the prop on purpose because axis calculation behaves as if it was false and Tooltip requires it to be true.
+			allowDataOverflow={false}
+			reversed={props.reversed}
+			includeHidden={false}
+			allowDecimals={props.allowDecimals}
+			tickCount={props.tickCount}
+			niceTicks={props.niceTicks ?? 'auto'}
+			ticks={props.ticks}
+			tick={props.tick}
+			domain={props.domain}
+		>
+			<PolarAngleAxisWrapper {...props} />
+		</SetAngleAxisSettings>
+	);
 }
 
 PolarAngleAxis.displayName = 'PolarAngleAxis';