@solidports/recharts 0.1.0

package/src/polar/PolarAngleAxis.tsx

@@ -0,0 +1,616 @@
+/* eslint-disable import/no-cycle, sort-keys */
+import type { JSX } from '@solidjs/web';
+import type { NiceTicksAlgorithm } from "../state/cartesianAxisSlice"
+import { createMemo, Show, useContext, createEffect } from 'solid-js';
+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,
+	AxisTick,
+	AxisDomainTypeInput,
+	BaseTickContentProps,
+	DataKey,
+	EvaluatedAxisDomainType,
+	PresentationAttributesAdaptChildEvent,
+	RenderableAxisProps,
+	ScaleType,
+	TickItem,
+	TickProp,
+} from "../util/types"
+import { degreeToRadian, polarToCartesian } from "../util/PolarUtils"
+import { cloneJsxNodeWithProps, isJsxNode } from "../util/ReactUtils"
+import type { AngleAxisSettings } from "../state/polarAxisSlice"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { RechartsStateContext } from "../state/RechartsStateContext"
+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 { 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"
+
+const eps = 1e-5
+const COS_45 = Math.cos(degreeToRadian(45))
+
+export interface PolarAngleAxisProps<DataPointType = unknown, DataValueType = unknown>
+	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 | JSX.LineSVGAttributes<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.
+	 * - `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>
+
+	/**
+	 * The count of axis ticks. Not used if 'type' is 'category'.
+	 */
+	tickCount?: number
+	/**
+	 * Controls how Recharts calculates "nice" tick values for this axis.
+	 * See {@link NiceTicksAlgorithm} for a full description of each option.
+	 *
+	 * @defaultValue 'auto'
+	 */
+	niceTicks?: NiceTicksAlgorithm
+	/**
+	 * The formatter function of ticks.
+	 */
+	tickFormatter?: (value: unknown, 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
+	/**
+	 * The customized event handler of click on the ticks of this axis
+	 */
+	onClick?: (data: TickItem, index: number, e: MouseEvent & { currentTarget: SVGTextElement }) => void
+	/**
+	 * The customized event handler of mousedown on the ticks of this axis
+	 */
+	onMouseDown?: (data: TickItem, index: number, e: MouseEvent & { currentTarget: SVGTextElement }) => void
+	/**
+	 * The customized event handler of mouseup on the ticks of this axis
+	 */
+	onMouseUp?: (data: TickItem, index: number, e: MouseEvent & { currentTarget: SVGTextElement }) => void
+	/**
+	 * The customized event handler of mousemove on the ticks of this axis
+	 */
+	onMouseMove?: (data: TickItem, index: number, e: MouseEvent & { currentTarget: SVGTextElement }) => void
+	/**
+	 * The customized event handler of mouseover on the ticks of this axis
+	 */
+	onMouseOver?: (data: TickItem, index: number, e: MouseEvent & { currentTarget: SVGTextElement }) => void
+	/**
+	 * The customized event handler of mouseout on the ticks of this axis
+	 */
+	onMouseOut?: (data: TickItem, index: number, e: MouseEvent & { currentTarget: SVGTextElement }) => void
+	/**
+	 * The customized event handler of mouseenter on the ticks of this axis
+	 */
+	onMouseEnter?: (data: TickItem, index: number, e: MouseEvent & { currentTarget: SVGTextElement }) => void
+	/**
+	 * The customized event handler of mouseleave on the ticks of this axis
+	 */
+	onMouseLeave?: (data: TickItem, index: number, e: MouseEvent & { currentTarget: SVGTextElement }) => void
+}
+
+type AxisSvgProps = Omit<
+	PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
+	"scale" | "type" | "dangerouslySetInnerHTML"
+>
+
+/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped axes accept any data */
+export type Props<DataPointType = any, DataValueType = any> = AxisSvgProps &
+	PolarAngleAxisProps<DataPointType, DataValueType>
+
+type PropsWithDefaults = RequiresDefaultProps<Props, typeof defaultPolarAngleAxisProps>
+
+type InsideProps = Omit<PropsWithDefaults, "scale"> & {
+	cx: number
+	cy: number
+	radius: number
+	ticks: ReadonlyArray<TickItem>
+	scale: RechartsScale
+}
+
+const AXIS_TYPE = "angleAxis"
+
+type AngleAxisSettingsReporter = Omit<AngleAxisSettings, "type"> & {
+	children: JSX.Element
+	type: AxisDomainTypeInput
+}
+
+function SetAngleAxisSettings(props: AngleAxisSettingsReporter): JSX.Element {
+	const ctx = useChartStore()
+	const stateCtx = useContext(RechartsStateContext)
+	const settings = createMemo((): AngleAxisSettings | undefined => {
+		const evaluatedType: EvaluatedAxisDomainType | undefined = getAxisTypeBasedOnLayout(
+			usePolarChartLayout(),
+			"angleAxis",
+			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,
+		}
+	})
+	const synchronizedSettings = createMemo(() =>
+		ctx ? selectAngleAxis(ctx.store, settings()?.id) : undefined,
+	)
+	/* upstream React used `=== ` for reference equality (settings reference flows
+	   through Redux untouched). Solid's createStore proxy-wraps store values so
+	   the read object is never `===` the dispatched one. Gate on presence instead;
+	   Solid's fine-grained reactivity already handles ordering. */
+	const settingsAreSynchronized = () => synchronizedSettings() != null
+
+	createEffect(settings, (s) => {
+		if (s == null) {
+			return
+		}
+		const id = String(s.id)
+		if (stateCtx != null) {
+			stateCtx.setState("polarAxes", "angleAxis", id, { settings: s })
+			return () => {
+				teardownWrite(() => {
+					stateCtx.setState(
+						"polarAxes",
+						(polar) => {
+							delete (polar.angleAxis as Record<string, unknown>)[id]
+						},
+					)
+				})
+			}
+		}
+
+	})
+
+	return <Show when={settingsAreSynchronized()}>{props.children}</Show>
+}
+
+/**
+ * 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: InsideProps,
+): {
+	x1: number
+	y1: number
+	x2: number
+	y2: number
+} => {
+	const tickLineSize = props.tickSize || 8
+	const p1 = polarToCartesian(props.cx, props.cy, props.radius, data.coordinate)
+	const p2 = polarToCartesian(
+		props.cx,
+		props.cy,
+		props.radius + (props.orientation === "inner" ? -1 : 1) * tickLineSize,
+		data.coordinate,
+	)
+
+	return { x1: p1.x, x2: p2.x, y1: p1.y, 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"
+}
+
+function AxisLine(props: InsideProps): JSX.Element {
+	return <>{renderAxisLine(props)}</>
+}
+
+/* Runs inside AxisLine's JSX expression so every prop read is tracked. */
+function renderAxisLine(props: InsideProps): JSX.Element {
+	if (!props.axisLine) {
+		return null
+	}
+	const { ref: _ref, ...baseSvgProps } = svgPropertiesNoEvents(props)
+	const axisLineProps: Record<string, unknown> = {
+		...baseSvgProps,
+		fill: "none",
+		...svgPropertiesNoEvents(props.axisLine),
+	}
+
+	if (props.axisLineType === "circle") {
+		return (
+			<Dot
+				class="recharts-polar-angle-axis-line"
+				{...axisLineProps}
+				cx={props.cx}
+				cy={props.cy}
+				r={props.radius}
+			/>
+		)
+	}
+	const points = props.ticks.map((entry) =>
+		polarToCartesian(props.cx, props.cy, props.radius, entry.coordinate),
+	)
+
+	return <Polygon class="recharts-polar-angle-axis-line" {...axisLineProps} points={points} />
+}
+
+type TickItemProps = {
+	tick: TickProp<BaseTickContentProps>
+	tickProps: BaseTickContentProps
+	value: string | number
+}
+
+/* eslint-disable solid/reactivity -- TickItemText reads are structural type checks at component setup; called from within reactive map, not a tracked scope */
+function TickItemText(props: TickItemProps): JSX.Element {
+	return <>{renderTickItemText(props)}</>
+}
+
+/* Runs inside TickItemText's JSX expression so every reactive read is tracked. */
+function renderTickItemText(props: TickItemProps): JSX.Element {
+	if (!props.tick) {
+		return null
+	}
+	if (typeof props.tick === "function") {
+		return (props.tick as (p: BaseTickContentProps) => JSX.Element)(props.tickProps)
+	}
+	if (isJsxNode(props.tick)) {
+		return <>{cloneJsxNodeWithProps(props.tick, props.tickProps as unknown as Record<string, unknown>) as unknown as JSX.Element}</>
+	}
+	return (
+		<Text {...props.tickProps} className="recharts-polar-angle-axis-tick-value">
+			{props.value}
+		</Text>
+	)
+}
+/* eslint-enable solid/reactivity */
+
+/* eslint-disable solid/reactivity -- Ticks reads props at component setup; called from within reactive JSX (resolved memo drives re-render), so props are stable per render */
+function Ticks(props: InsideProps): JSX.Element {
+	return <>{renderTicks(props)}</>
+}
+
+/* Runs inside Ticks's JSX expression so every reactive read is tracked. */
+function renderTicks(props: InsideProps): JSX.Element {
+	const { ref: _ref, ...axisProps }: Record<string, unknown> = svgPropertiesNoEvents(props)
+	const customTickProps = svgPropertiesNoEventsFromUnknown(props.tick)
+	const tickLineProps = {
+		...axisProps,
+		fill: "none",
+		...svgPropertiesNoEvents(props.tickLine),
+	}
+
+	const items = props.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,
+			textAnchor,
+			verticalAnchor,
+			stroke: "none",
+			fill: props.stroke,
+			...customTickProps,
+			index: i,
+			payload: entry,
+			x: lineCoord.x2,
+			y: lineCoord.y2,
+		} as BaseTickContentProps
+
+		return (
+			<Layer
+				class={clsx("recharts-polar-angle-axis-tick", getClassNameFromUnknown(props.tick))}
+				{...adaptEventsOfChild(props, entry, i)}
+			>
+				<Show when={props.tickLine}>
+					<line class="recharts-polar-angle-axis-tick-line" {...tickLineProps} {...lineCoord} />
+				</Show>
+				<TickItemText
+					tick={props.tick}
+					tickProps={tickProps}
+					value={props.tickFormatter ? props.tickFormatter(entry.value, i) : entry.value}
+				/>
+			</Layer>
+		)
+	})
+
+	return <Layer class="recharts-polar-angle-axis-ticks">{items}</Layer>
+}
+/* eslint-enable solid/reactivity */
+
+export function PolarAngleAxisWrapper(defaultsAndInputs: PropsWithDefaults): JSX.Element {
+	const ctx = useChartStore()
+	const viewBox = createMemo(() => (ctx ? selectPolarViewBox(ctx.store) : undefined))
+	const scale = createMemo(() =>
+		ctx ? selectPolarAxisScale(ctx.store, "angleAxis", defaultsAndInputs.angleAxisId) : undefined,
+	)
+	const isPanorama = useIsPanorama()
+	const ticks = createMemo(() =>
+		ctx
+			? selectPolarAngleAxisTicks(
+					ctx.store,
+					"angleAxis",
+					defaultsAndInputs.angleAxisId,
+					isPanorama,
+				)
+			: undefined,
+	)
+
+	/* resolved drops to null when any dep is missing; Show rerenders the subtree when
+	   the memo flips falsy → truthy. IIFE-in-JSX would freeze the body at first eval. */
+	const resolved = createMemo<InsideProps | null>(() => {
+		const vb = viewBox()
+		const t = ticks()
+		const s = scale()
+		if (vb == null || t == null || t.length === 0 || s == null) {
+			return null
+		}
+		return {
+			...defaultsAndInputs,
+			scale: s,
+			...vb,
+			radius: vb.outerRadius,
+			ticks: t,
+		}
+	})
+
+	return (
+		<Show when={resolved()}>
+			{(p) => (
+				<ZIndexLayer zIndex={p().zIndex}>
+					<Layer class={clsx("recharts-polar-angle-axis", AXIS_TYPE, p().className)}>
+						<AxisLine {...p()} />
+						<Ticks {...p()} />
+					</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 PolarAngleAxis<DataPointType = any, DataValueType = any>(
+	outsideProps: Props<DataPointType, DataValueType>,
+): JSX.Element {
+	const props = resolveDefaultProps(outsideProps, defaultPolarAngleAxisProps)
+
+	return (
+		<SetAngleAxisSettings
+			id={props.angleAxisId}
+			scale={props.scale}
+			type={props.type}
+			/* settings are untyped; the generic only constrains what callers pass */
+			dataKey={props.dataKey as DataKey<unknown>}
+			unit={undefined}
+			name={props.name}
+			allowDuplicatedCategory={false}
+			allowDataOverflow={false}
+			reversed={props.reversed}
+			includeHidden={false}
+			allowDecimals={props.allowDecimals}
+			tickCount={props.tickCount}
+			niceTicks={props.niceTicks}
+			/* passed through unchanged like upstream, whose TickItem prop and AxisTick setting types disagree */
+			ticks={props.ticks as unknown as ReadonlyArray<AxisTick> | undefined}
+			tick={props.tick as TickProp<unknown>}
+			domain={props.domain}
+		>
+			<PolarAngleAxisWrapper {...props} />
+		</SetAngleAxisSettings>
+	)
+}