@solidports/recharts 0.1.0

package/src/polar/PolarRadiusAxis.tsx

@@ -0,0 +1,547 @@
+/* eslint-disable import/no-cycle, sort-keys */
+import type { AxisTick } from "../util/types"
+import type { JSX } from '@solidjs/web';
+import { createMemo, Show, useContext, createEffect } from 'solid-js';
+import maxBy from "es-toolkit/compat/maxBy"
+import minBy from "es-toolkit/compat/minBy"
+import { clsx } from "clsx"
+import { cloneJsxNodeWithProps, isJsxNode } from "../util/ReactUtils"
+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,
+} from "../util/types"
+import type { RadiusAxisSettings } from "../state/polarAxisSlice"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { RechartsStateContext } from "../state/RechartsStateContext"
+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 { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition"
+import { usePolarChartLayout } from "../context/chartLayoutContext"
+import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout"
+import { getClassNameFromUnknown } from "../util/getClassNameFromUnknown"
+import { teardownWrite } from "../state/teardownWrite"
+
+type TickOrientation = "left" | "right" | "middle"
+
+export interface PolarRadiusAxisProps<DataPointType = unknown, DataValueType = unknown>
+	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 | JSX.LineSVGAttributes<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?: (
+		/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
+		data: any,
+		index: number,
+		e: MouseEvent & { currentTarget: SVGTextElement },
+	) => void
+	/**
+	 * The customized event handler of mousedown on the ticks of this axis
+	 */
+	onMouseDown?: (
+		/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
+		data: any,
+		index: number,
+		e: MouseEvent & { currentTarget: SVGTextElement },
+	) => void
+	/**
+	 * The customized event handler of mouseup on the ticks of this axis
+	 */
+	onMouseUp?: (
+		/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
+		data: any,
+		index: number,
+		e: MouseEvent & { currentTarget: SVGTextElement },
+	) => void
+	/**
+	 * The customized event handler of mousemove on the ticks of this axis
+	 */
+	onMouseMove?: (
+		/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
+		data: any,
+		index: number,
+		e: MouseEvent & { currentTarget: SVGTextElement },
+	) => void
+	/**
+	 * The customized event handler of mouseover on the ticks of this axis
+	 */
+	onMouseOver?: (
+		/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
+		data: any,
+		index: number,
+		e: MouseEvent & { currentTarget: SVGTextElement },
+	) => void
+	/**
+	 * The customized event handler of mouseout on the ticks of this axis
+	 */
+	onMouseOut?: (
+		/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
+		data: any,
+		index: number,
+		e: MouseEvent & { currentTarget: SVGTextElement },
+	) => void
+	/**
+	 * The customized event handler of mouseenter on the ticks of this axis
+	 */
+	onMouseEnter?: (
+		/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
+		data: any,
+		index: number,
+		e: MouseEvent & { currentTarget: SVGTextElement },
+	) => void
+	/**
+	 * The customized event handler of mouseleave on the ticks of this axis
+	 */
+	onMouseLeave?: (
+		/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract */
+		data: any,
+		index: number,
+		e: MouseEvent & { currentTarget: SVGTextElement },
+	) => void
+	/**
+	 * Allow the ticks of axis to be decimals or not.
+	 *
+	 * @defaultValue false
+	 */
+	allowDecimals?: boolean
+	/**
+	 * @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.
+	 * - `Element`: A custom element to be used as the tick label.
+	 * - `function`: A function that returns an element for custom rendering of tick labels.
+	 *
+	 * @defaultValue true
+	 */
+	tick?: TickProp<BaseTickContentProps>
+	ticks?: ReadonlyArray<TickItem>
+	/**
+	 * 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<
+	/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: tick handlers receive untyped data */
+	PresentationAttributesAdaptChildEvent<any, SVGTextElement>,
+	"scale" | "type"
+>
+
+/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped axes accept any data */
+export type Props<DataPointType = any, DataValueType = any> = AxisSvgProps &
+	PolarRadiusAxisProps<DataPointType, DataValueType>
+
+type PropsWithDefaults = RequiresDefaultProps<Props, typeof defaultPolarRadiusAxisProps>
+
+type InsideProps = Omit<PropsWithDefaults, "scale"> &
+	PolarViewBoxRequired & {
+		scale: RechartsScale
+	}
+
+const AXIS_TYPE = "radiusAxis"
+
+function SetRadiusAxisSettings(
+	props: Omit<RadiusAxisSettings, "type"> & { type: AxisDomainTypeInput },
+): null {
+	const ctx = useChartStore()
+	const stateCtx = useContext(RechartsStateContext)
+	const settings = createMemo((): RadiusAxisSettings | undefined => {
+		const evaluatedType: EvaluatedAxisDomainType | undefined = getAxisTypeBasedOnLayout(
+			usePolarChartLayout(),
+			"radiusAxis",
+			props.type,
+		)
+		if (evaluatedType == null) {
+			return undefined
+		}
+		return {
+			allowDataOverflow: props.allowDataOverflow,
+			allowDecimals: props.allowDecimals,
+			allowDuplicatedCategory: props.allowDuplicatedCategory,
+			dataKey: props.dataKey,
+			domain: props.domain,
+			id: props.id,
+			includeHidden: props.includeHidden,
+			name: props.name,
+			reversed: props.reversed,
+			scale: props.scale,
+			tick: props.tick,
+			tickCount: props.tickCount,
+			niceTicks: props.niceTicks,
+			ticks: props.ticks,
+			type: evaluatedType,
+			unit: props.unit,
+		}
+	})
+	createEffect(settings, (s) => {
+		if (s == null) {
+			return
+		}
+		const id = String(s.id)
+		if (stateCtx != null) {
+			stateCtx.setState("polarAxes", "radiusAxis", id, { settings: s })
+			return () => {
+				teardownWrite(() => {
+					stateCtx.setState(
+						"polarAxes",
+						(polar) => {
+							delete (polar.radiusAxis as Record<string, unknown>)[id]
+						},
+					)
+				})
+			}
+		}
+
+	})
+	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 {
+		clockWise: false,
+		cx,
+		cy,
+		endAngle: angle,
+		innerRadius: minRadiusTick?.coordinate || 0,
+		outerRadius: maxRadiusTick?.coordinate || 0,
+		startAngle: angle,
+	}
+}
+
+function renderAxisLine(props: InsideProps, ticks: ReadonlyArray<TickItem>): JSX.Element {
+	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(props.cx, props.cy, extent[0], props.angle)
+	const point1 = polarToCartesian(props.cx, props.cy, extent[1], props.angle)
+
+	const { ref: _ref, ...baseSvgProps } = svgPropertiesNoEvents(props)
+	const axisLineProps = {
+		...baseSvgProps,
+		fill: "none",
+		...svgPropertiesNoEvents(props.axisLine),
+		x1: point0.x,
+		y1: point0.y,
+		x2: point1.x,
+		y2: point1.y,
+	}
+
+	return <line class="recharts-polar-radius-axis-line" {...axisLineProps} />
+}
+
+function renderTickItem(
+	option: Props["tick"],
+	tickProps: Record<string, unknown>,
+	value: string | number,
+): JSX.Element {
+	if (typeof option === "function") {
+		return (option as (p: Record<string, unknown>) => JSX.Element)(tickProps)
+	}
+	if (isJsxNode(option)) {
+		return <>{cloneJsxNodeWithProps(option, tickProps) as unknown as JSX.Element}</>
+	}
+	return (
+		<Text {...tickProps} className="recharts-polar-radius-axis-tick-value">
+			{value}
+		</Text>
+	)
+}
+
+function renderTicks(props: InsideProps, ticks: ReadonlyArray<TickItem>): JSX.Element {
+	const textAnchor = getTickTextAnchor(props.orientation)
+	const axisProps = svgPropertiesNoEvents(props)
+	const customTickProps = svgPropertiesNoEventsFromUnknown(props.tick)
+
+	const items = ticks.map((entry, i) => {
+		const coord = getTickValueCoord(entry, props.angle, props.cx, props.cy)
+		const tickProps = {
+			textAnchor,
+			transform: `rotate(${90 - props.angle}, ${coord.x}, ${coord.y})`,
+			...axisProps,
+			stroke: "none",
+			fill: props.stroke,
+			...customTickProps,
+			index: i,
+			...coord,
+			payload: entry,
+		}
+
+		return (
+			<Layer
+				class={clsx("recharts-polar-radius-axis-tick", getClassNameFromUnknown(props.tick))}
+				{...adaptEventsOfChild(props, entry, i)}
+			>
+				{renderTickItem(
+					props.tick,
+					tickProps,
+					props.tickFormatter ? props.tickFormatter(entry.value, i) : entry.value,
+				)}
+			</Layer>
+		)
+	})
+
+	return <Layer class="recharts-polar-radius-axis-ticks">{items}</Layer>
+}
+
+export function PolarRadiusAxisWrapper(defaultsAndInputs: PropsWithDefaults): JSX.Element {
+	const ctx = useChartStore()
+	const viewBox = createMemo(() => (ctx ? selectPolarViewBox(ctx.store) : undefined))
+	const scale = createMemo(() =>
+		ctx
+			? selectPolarAxisScale(ctx.store, "radiusAxis", defaultsAndInputs.radiusAxisId)
+			: undefined,
+	)
+	const ticks = createMemo(() =>
+		ctx
+			? selectPolarAxisTicks(ctx.store, "radiusAxis", defaultsAndInputs.radiusAxisId, false)
+			: undefined,
+	)
+
+	/* resolved is null until every dep is present; Show + Show.children-as-fn rerenders
+	   when the memo flips truthy. IIFE-in-JSX would freeze body at first eval. */
+	const resolved = createMemo<{ props: InsideProps; ticks: ReadonlyArray<TickItem> } | null>(
+		() => {
+			const vb = viewBox()
+			const t = ticks()
+			const s = scale()
+			if (vb == null || t == null || t.length === 0 || s == null) {
+				return null
+			}
+			const props: InsideProps = {
+				...defaultsAndInputs,
+				scale: s,
+				...vb,
+			}
+			return { props, ticks: t }
+		},
+	)
+
+	return (
+		<Show when={resolved()}>
+			{(r) => (
+				<ZIndexLayer zIndex={r().props.zIndex}>
+					<Layer
+						class={clsx("recharts-polar-radius-axis", AXIS_TYPE, r().props.className)}
+					>
+						<Show when={r().props.axisLine}>{renderAxisLine(r().props, r().ticks)}</Show>
+						<Show when={r().props.tick}>{renderTicks(r().props, r().ticks)}</Show>
+						<PolarLabelContextProvider
+							{...getViewBox(r().props.angle, r().props.cx, r().props.cy, r().ticks)}
+						>
+							<PolarLabelFromLabelProp label={r().props.label} />
+							{r().props.children}
+						</PolarLabelContextProvider>
+					</Layer>
+				</ZIndexLayer>
+			)}
+		</Show>
+	)
+}
+
+/**
+ * @provides PolarLabelContext
+ * @consumes PolarViewBoxContext
+ */
+/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped axes accept any data */
+export function PolarRadiusAxis<DataPointType = any, DataValueType = any>(
+	outsideProps: Props<DataPointType, DataValueType>,
+): JSX.Element {
+	const props: PropsWithDefaults = 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}
+				/* passed through unchanged like upstream, whose TickItem prop and AxisTick setting types disagree */
+				ticks={props.ticks as unknown as ReadonlyArray<AxisTick> | undefined}
+				tickCount={props.tickCount}
+				niceTicks={props.niceTicks}
+				tick={props.tick as TickProp<unknown>}
+			/>
+			<PolarRadiusAxisWrapper {...props} />
+		</>
+	)
+}