@octanejs/recharts 0.1.16 → 0.1.17

package/src/polar/PolarAngleAxis.tsrx

@@ -0,0 +1,554 @@
+import * as React from 'octane';
+import {
+	FunctionComponent,
+	ReactNode,
+	SVGProps,
+	useEffect,
+	useMemo,
+	type OctaneNode,
+} from 'octane';
+import { clsx } from 'clsx';
+import { Layer } from '../container/Layer';
+import { Dot } from '../shape/Dot';
+import { Polygon } from '../shape/Polygon';
+import { Text, TextAnchor, TextVerticalAnchor } from '../component/Text';
+import {
+	adaptEventsOfChild,
+	AxisDomain,
+	AxisDomainTypeInput,
+	BaseTickContentProps,
+	EvaluatedAxisDomainType,
+	PresentationAttributesAdaptChildEvent,
+	RenderableAxisProps,
+	ScaleType,
+	TickItem,
+	TickProp,
+} from '../util/types';
+import { degreeToRadian, polarToCartesian } from '../util/PolarUtils';
+import { addAngleAxis, AngleAxisSettings, removeAngleAxis } from '../state/polarAxisSlice';
+import { NiceTicksAlgorithm } from '../state/cartesianAxisSlice';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import {
+	selectPolarAngleAxisTicks,
+	selectPolarAxisScale,
+} from '../state/selectors/polarScaleSelectors';
+import { selectAngleAxis, selectPolarViewBox } from '../state/selectors/polarAxisSelectors';
+import { defaultPolarAngleAxisProps } from './defaultPolarAngleAxisProps';
+import { useIsPanorama } from '../context/PanoramaContext';
+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';
+
+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 {
+	/**
+ * 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<SVGLineElement>;
+	/**
+ * @defaultValue false
+ */
+	allowDecimals?: boolean;
+	/**
+ * Allow the axis has duplicated categories or not when the type of axis is "category".
+ * @defaultValue true
+ */
+	allowDuplicatedCategory?: boolean;
+	/**
+ * @defaultValue 0
+ */
+	angleAxisId?: string | number;
+	/**
+ * 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.
+ */
+	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.
+ */
+	cy?: number;
+	/**
+ * 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 />
+ */
+	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>;
+	/**
+ * 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.
+ * - `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>;
+	/**
+ * 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'
+ */
+	niceTicks?: NiceTicksAlgorithm;
+	/**
+ * The formatter function of ticks.
+ */
+	tickFormatter?: (value: any, index: number) => string;
+	/**
+ * The length of tick line.
+ * @defaultValue 8
+ */
+	tickSize?: number;
+	/**
+ * The array of every tick's value and angle.
+ */
+	ticks?: ReadonlyArray<TickItem>;
+	/**
+ * 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}
+ */
+	zIndex?: number;
+}
+
+type PolarAngleAxisEvents = {
+	/**
+ * The customized event handler of click on the ticks of this axis
+ */
+	onClick?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	/**
+ * The customized event handler of mousedown on the ticks of this axis
+ */
+	onMouseDown?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	/**
+ * The customized event handler of mouseup on the ticks of this axis
+ */
+	onMouseUp?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	/**
+ * The customized event handler of mousemove on the ticks of this axis
+ */
+	onMouseMove?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	/**
+ * The customized event handler of mouseover on the ticks of this axis
+ */
+	onMouseOver?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	/**
+ * The customized event handler of mouseout on the ticks of this axis
+ */
+	onMouseOut?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	/**
+ * The customized event handler of mouseenter on the ticks of this axis
+ */
+	onMouseEnter?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	/**
+ * The customized event handler of mouseleave on the ticks of this axis
+ */
+	onMouseLeave?: (data: TickItem, index: number, e: React.MouseEvent<SVGTextElement>) => void;
+	onTouchStart?: (data: TickItem, index: number, e: React.TouchEvent<SVGTextElement>) => void;
+	onTouchMove?: (data: TickItem, index: number, e: React.TouchEvent<SVGTextElement>) => void;
+	onTouchEnd?: (data: TickItem, index: number, e: React.TouchEvent<SVGTextElement>) => void;
+};
+
+type AxisSvgProps =
+	Omit<
+		PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
+		'scale' | 'type' | 'dangerouslySetInnerHTML'
+	>;
+
+export type Props<DataPointType = any, DataValueType = any> =
+	AxisSvgProps & PolarAngleAxisProps<DataPointType, DataValueType>;
+
+type PropsWithDefaults<DataPointType = any, DataValueType = any> =
+	RequiresDefaultProps<Props<DataPointType, DataValueType>, typeof defaultPolarAngleAxisProps>;
+
+type InternalPolarAngleAxisProps =
+	Omit<PropsWithDefaults, 'scale'> & {
+		cx: number;
+		cy: number;
+		radius: number;
+		ticks: ReadonlyArray<TickItem>;
+		scale: RechartsScale;
+	} & PolarAngleAxisEvents;
+
+const AXIS_TYPE = 'angleAxis';
+
+type AngleAxisSettingsReporter =
+	Omit<AngleAxisSettings, 'type'> & {
+		children: ReactNode;
+		type: AxisDomainTypeInput;
+	};
+
+function SetAngleAxisSettings(props: AngleAxisSettingsReporter): ReactNode {
+	const dispatch = useAppDispatch();
+	const layout = usePolarChartLayout();
+	const settings: AngleAxisSettings | undefined = useMemo(() => {
+		const { children, type: typeFromProps, ...rest } = props;
+		const evaluatedType: EvaluatedAxisDomainType | undefined = getAxisTypeBasedOnLayout(
+			layout,
+			'angleAxis',
+			typeFromProps,
+		);
+		if (evaluatedType == null) {
+			return undefined;
+		}
+		return { ...rest, type: evaluatedType };
+	}, [props, layout]);
+	const synchronizedSettings = useAppSelector((state) => selectAngleAxis(state, settings?.id));
+	const settingsAreSynchronized = settings === synchronizedSettings;
+	useEffect(() => {
+		if (settings == null) {
+			return noop;
+		}
+		dispatch(addAngleAxis(settings));
+		return () => {
+			dispatch(removeAngleAxis(settings));
+		};
+	}, [dispatch, settings]);
+
+	if (settingsAreSynchronized) {
+		return props.children;
+	}
+	return null;
+}
+
+/**
+ * Calculate the coordinate of line endpoint
+ * @param data The data if there are ticks
+ * @param props axis settings
+ * @return (x1, y1): The point close to text,
+ *         (x2, y2): The point close to axis
+ */
+const getTickLineCoord = (
+	data: TickItem,
+	props: InternalPolarAngleAxisProps,
+): {
+	x1: number;
+	y1: number;
+	x2: number;
+	y2: number;
+} => {
+	const { cx, cy, radius, orientation, tickSize } = props;
+	const tickLineSize = tickSize || 8;
+	const p1 = polarToCartesian(cx, cy, radius, data.coordinate);
+	const p2 = polarToCartesian(
+		cx,
+		cy,
+		radius + (orientation === 'inner' ? -1 : 1) * tickLineSize,
+		data.coordinate,
+	);
+
+	return { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y };
+};
+
+/**
+ * Get the text-anchor of each tick
+ * @param data Data of ticks
+ * @param orientation of the axis ticks
+ * @return text-anchor
+ */
+const getTickTextAnchor = (data: TickItem, orientation: Props['orientation']): TextAnchor => {
+	const cos = Math.cos(degreeToRadian(-data.coordinate));
+
+	if (cos > eps) {
+		return orientation === 'outer' ? 'start' : 'end';
+	}
+	if (cos < -eps) {
+		return orientation === 'outer' ? 'end' : 'start';
+	}
+	return 'middle';
+};
+
+/**
+ * Get the text vertical anchor of each tick
+ * @param data Data of a tick
+ * @return text vertical anchor
+ */
+const getTickTextVerticalAnchor = (data: TickItem): TextVerticalAnchor => {
+	const cos = Math.cos(degreeToRadian(-data.coordinate));
+	const sin = Math.sin(degreeToRadian(-data.coordinate));
+
+	// handle top and bottom sectors: 90±45deg and 270±45deg
+	if (Math.abs(cos) <= COS_45) {
+		// sin > 0: top sector, sin < 0: bottom sector
+		return sin > 0 ? 'start' : 'end';
+	}
+
+	return 'middle';
+};
+
+const AxisLine = (props: InternalPolarAngleAxisProps) => {
+	const { cx, cy, radius, axisLineType, axisLine, ticks } = props;
+	if (!axisLine) {
+		return null;
+	}
+	const axisLineProps = {
+		...svgPropertiesNoEvents(props),
+		fill: 'none',
+		...svgPropertiesNoEvents(axisLine),
+	};
+
+	if (axisLineType === 'circle') {
+		// @ts-expect-error wrong SVG element type
+		return <Dot
+			className="recharts-polar-angle-axis-line"
+			{...axisLineProps}
+			cx={cx}
+			cy={cy}
+			r={radius}
+		/>;
+	}
+	const points = ticks.map((entry) => polarToCartesian(cx, cy, radius, entry.coordinate));
+
+	// @ts-expect-error wrong SVG element type
+	return <Polygon className="recharts-polar-angle-axis-line" {...axisLineProps} points={points} />;
+};
+
+type TickItemProps = {
+	tick: TickProp<BaseTickContentProps>;
+	tickProps: BaseTickContentProps;
+	value: string | number;
+};
+
+const TickItemText = ({ tick, tickProps, value }: TickItemProps): ReactNode => {
+	if (!tick) {
+		return null;
+	}
+	if (React.isValidElement(tick)) {
+		return React.cloneElement(tick, tickProps);
+	}
+	if (typeof tick === 'function') {
+		return tick(tickProps);
+	}
+	return <Text {...tickProps} className="recharts-polar-angle-axis-tick-value">{value}</Text>;
+};
+
+const Ticks = (props: InternalPolarAngleAxisProps) => {
+	const { tick, tickLine, tickFormatter, stroke, ticks } = props;
+	const { ref, ...axisProps } = svgPropertiesNoEvents(props);
+	const customTickProps = svgPropertiesNoEventsFromUnknown(tick);
+	const tickLineProps = {
+		...axisProps,
+		fill: 'none',
+		...svgPropertiesNoEvents(tickLine),
+	};
+
+	const items = ticks.map((entry, i) => {
+		const lineCoord = getTickLineCoord(entry, props);
+		const textAnchor: TextAnchor = getTickTextAnchor(entry, props.orientation);
+		const verticalAnchor: TextVerticalAnchor = getTickTextVerticalAnchor(entry);
+		const tickProps: BaseTickContentProps = {
+			...axisProps,
+			// @ts-expect-error customTickProps is contributing unknown props
+			textAnchor,
+			verticalAnchor,
+			// @ts-expect-error customTickProps is contributing unknown props
+			stroke: 'none',
+			// @ts-expect-error customTickProps is contributing unknown props
+			fill: stroke,
+			...customTickProps,
+			index: i,
+			payload: entry,
+			x: lineCoord.x2,
+			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="recharts-polar-angle-axis-ticks">{items}</Layer>;
+};
+
+export const PolarAngleAxisWrapper: FunctionComponent<PropsWithDefaults> = (
+	defaultsAndInputs: PropsWithDefaults,
+) => {
+	const { angleAxisId } = defaultsAndInputs;
+
+	const viewBox = useAppSelector(selectPolarViewBox);
+	const scale = useAppSelector((state) => selectPolarAxisScale(state, 'angleAxis', angleAxisId));
+	const isPanorama = useIsPanorama();
+	const ticks = useAppSelector(
+		(state) => selectPolarAngleAxisTicks(state, 'angleAxis', angleAxisId, isPanorama),
+	);
+
+	if (viewBox == null || !ticks || !ticks.length || scale == null) {
+		return null;
+	}
+
+	const props: InternalPolarAngleAxisProps = {
+		...defaultsAndInputs,
+		scale,
+		...viewBox,
+		radius: viewBox.outerRadius,
+		ticks,
+	};
+
+	return <ZIndexLayer zIndex={props.zIndex}>
+		<Layer className={clsx('recharts-polar-angle-axis', AXIS_TYPE, props.className)}>
+			<AxisLine {...props} />
+			<Ticks {...props} />
+		</Layer>
+	</ZIndexLayer>;
+};
+
+/**
+ * @provides PolarLabelContext
+ * @consumes PolarViewBoxContext
+ */
+export function PolarAngleAxis<DataPointType = any, DataValueType = any>(
+	outsideProps: Props<DataPointType, DataValueType>,
+): OctaneNode {
+	const props: PropsWithDefaults<DataPointType, DataValueType> = resolveDefaultProps(
+		outsideProps,
+		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'}
+		// @ts-expect-error the type does not match. Is RadiusAxis really expecting what it says?
+		ticks={props.ticks}
+		tick={props.tick}
+		domain={props.domain}
+	>
+		<PolarAngleAxisWrapper {...props} />
+	</SetAngleAxisSettings>;
+}
+
+PolarAngleAxis.displayName = 'PolarAngleAxis';