@solidports/recharts 0.1.0

package/src/cartesian/XAxis.tsx

@@ -0,0 +1,433 @@
+/* eslint-disable import/no-cycle */
+/**
+ * @fileOverview X Axis
+ */
+import type { TickItem } from "../util/types"
+import type { JSX } from '@solidjs/web';
+import { createMemo, createSignal, onCleanup, Show, useContext, createEffect, untrack } from "solid-js"
+import { clsx } from "clsx"
+import { CartesianAxis, CartesianAxisRef, defaultCartesianAxisProps } from "./CartesianAxis"
+import {
+	AxisInterval,
+	AxisTick,
+	RenderableAxisProps,
+	PresentationAttributesAdaptChildEvent,
+	AxisDomain,
+	ScaleType,
+	AxisDomainTypeInput,
+	EvaluatedAxisDomainType,
+	TickProp,
+	XAxisTickContentProps,
+} from "../util/types"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { RechartsStateContext } from "../state/RechartsStateContext"
+import type {
+	XAxisHeight,
+	XAxisOrientation,
+	XAxisPadding,
+	XAxisSettings,
+} from "../state/cartesianAxisSlice"
+import {
+	implicitXAxis,
+	selectTicksOfAxis,
+	selectXAxisPosition,
+	selectXAxisSettingsNoDefaults,
+	selectXAxisSize,
+} from "../state/selectors/axisSelectors"
+import { useAxisViewBox } from "../state/hooks/useChartSelectors"
+import { useIsPanorama } from "../context/PanoramaContext"
+import { RequiresDefaultProps, resolveDefaultProps } from "../util/resolveDefaultProps"
+import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition"
+import { useCartesianChartLayout } from "../context/chartLayoutContext"
+import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout"
+import { isLabelContentAFunction } from "../component/Label"
+import { isJsxNode } from "../util/ReactUtils"
+import { teardownWrite } from "../state/teardownWrite"
+
+interface XAxisProps<DataPointType = unknown, DataValueType = unknown> extends Omit<
+	RenderableAxisProps<DataPointType, DataValueType>,
+	"domain" | "scale" | "tick"
+> {
+	/**
+	 * 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 category
+	 */
+	type?: AxisDomainTypeInput
+	/**
+	 * Unique ID that represents this XAxis.
+	 * Required when there are multiple XAxes.
+	 *
+	 * @defaultValue 0
+	 */
+	xAxisId?: string | number
+	/**
+	 * Height of the axis in pixels.
+	 * `auto` will attempt to resize the axis based on its content.
+	 *
+	 * @defaultValue 30
+	 */
+	height?: XAxisHeight
+	/**
+	 * If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
+	 * @defaultValue false
+	 */
+	mirror?: boolean
+	/**
+	 * The orientation of axis
+	 * @defaultValue bottom
+	 */
+	orientation?: XAxisOrientation
+	/**
+	 * 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 <XAxis type="number" domain={['dataMin', 'dataMax']} />
+	 * @example <XAxis type="number" domain={[0, 'dataMax']} />
+	 * @example <XAxis type="number" domain={['auto', 'auto']} />
+	 * @example <XAxis type="number" domain={[0, 'dataMax + 1000']} />
+	 * @example <XAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
+	 * @example <XAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
+	 * @example <XAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
+	 * @example <XAxis 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 <XAxis scale="log" />
+	 * @example
+	 * import { scaleLog } from 'd3-scale';
+	 * const scale = scaleLog().base(Math.E);
+	 * <XAxis scale={scale} />
+	 */
+	scale?:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>
+	/**
+	 * 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<XAxisTickContentProps>
+	/**
+	 * Ticks can be any type when the axis is the type of category
+	 * Ticks must be numbers when the axis is the type of number
+	 */
+	ticks?: ReadonlyArray<AxisTick>
+	/**
+	 * Axis padding is the distance between the edge of plot area and the first/last tick.
+	 *
+	 * @defaultValue {"left":0,"right":0}
+	 */
+	padding?: XAxisPadding
+	/**
+	 * The minimum gap between two adjacent tick labels
+	 *
+	 * @defaultValue 5
+	 */
+	minTickGap?: number
+	/**
+	 * If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
+	 * @defaultValue preserveEnd
+	 */
+	interval?: AxisInterval
+	/**
+	 * The margin between tick line and tick.
+	 */
+	tickMargin?: number
+}
+
+/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped axes accept any data */
+export type Props<DataPointType = any, DataValueType = any> = Omit<
+	PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
+	"scale" | "ref"
+> &
+	XAxisProps<DataPointType, DataValueType>
+
+function SetXAxisSettings(
+	props: Omit<XAxisSettings, "type"> & { type: AxisDomainTypeInput },
+): null {
+	const stateCtx = useContext(RechartsStateContext)
+	let prevSettings: XAxisSettings | null = null
+	const evaluatedType = (): EvaluatedAxisDomainType | undefined => {
+		/* eslint-disable-next-line solid/reactivity -- called only from inside createMemo below; reads are tracked through the call chain */
+		const { type: typeFromProps, ..._ } = props
+		return getAxisTypeBasedOnLayout(useCartesianChartLayout(), "xAxis", typeFromProps)
+	}
+
+	const settings = createMemo((): XAxisSettings | undefined => {
+		const et = evaluatedType()
+		if (et == null) {
+			return undefined
+		}
+		/* eslint-disable-next-line solid/reactivity -- inside createMemo body; destructure is tracked */
+		const { type: _t, ...restProps } = props
+		return {
+			...restProps,
+			type: et,
+		}
+	})
+
+	createEffect(settings, (s) => {
+		if (s == null) {
+			return
+		}
+		/* upstream replaceXAxis: a changed id drops the previous entry */
+		if (prevSettings != null && String(prevSettings.id) !== String(s.id)) {
+			const prevId = String(prevSettings.id)
+			stateCtx?.setState("cartesianAxes", "xAxis", (axes) => {
+				delete axes[prevId]
+			})
+		}
+		stateCtx?.setState("cartesianAxes", "xAxis", String(s.id), { settings: s })
+		prevSettings = s
+	})
+
+	onCleanup(() => {
+		teardownWrite(() => {
+			if (prevSettings) {
+				const strId = String(prevSettings.id)
+				/* eslint-disable-next-line solid/reactivity -- cleanup runs outside tracking; intentional */
+				stateCtx?.setState("cartesianAxes", "xAxis", (axes) => { delete axes[strId] })
+				prevSettings = null
+			}
+		})
+	})
+
+	return null
+}
+
+function XAxisImpl(props: PropsWithDefaults) {
+	const [cartesianAxisRef, setCartesianAxisRef] = createSignal<CartesianAxisRef | null>(null)
+	const ctx = useChartStore()
+	const stateCtx = useContext(RechartsStateContext)
+	const viewBox = useAxisViewBox
+	const isPanorama = useIsPanorama()
+	const axisType = "xAxis"
+	const cartesianTickItems = createMemo(() =>
+		ctx ? selectTicksOfAxis(ctx.store, axisType, props.xAxisId, isPanorama) : undefined,
+	)
+	const axisSize = createMemo(() =>
+		ctx ? selectXAxisSize(ctx.store, props.xAxisId) : undefined,
+	)
+	const position = createMemo(() =>
+		ctx ? selectXAxisPosition(ctx.store, props.xAxisId) : undefined,
+	)
+	/*
+	 * Here we select settings from the store and prefer to use them instead of the actual props
+	 * so that the chart is consistent. If we used the props directly, some components will use axis settings
+	 * from state and some from props and because there is a render step between these two, they might be showing different things.
+	 * https://github.com/recharts/recharts/issues/6257
+	 */
+	const synchronizedSettings = createMemo(() =>
+		ctx ? selectXAxisSettingsNoDefaults(ctx.store, props.xAxisId) : undefined,
+	)
+
+	createEffect(
+		() => {
+			/* Subscribe before the early-return: settings and the axis ref often
+			   become ready in the same flush. Returning before reading the ref
+			   misses that update. */
+			const axisComponent = cartesianAxisRef()
+			cartesianTickItems()
+			const currentSize = axisSize()
+			const synced = synchronizedSettings()
+			/* No dynamic height calculation is done when height !== 'auto'
+			 * or when a function/JSX node is used for label */
+			if (
+				props.height !== "auto" ||
+				!currentSize ||
+				isLabelContentAFunction(props.label) ||
+				isJsxNode(props.label) ||
+				synced == null ||
+				axisComponent == null
+			) {
+				return null
+			}
+			return { axisComponent, currentSize }
+		},
+		(input) => {
+			if (input == null) {
+				return
+			}
+			const { axisComponent, currentSize } = input
+			untrack(() => {
+				const updatedXAxisHeight = axisComponent.getCalculatedHeight()
+				if (updatedXAxisHeight <= 0) {
+					return
+				}
+
+				/* if the height has changed, update the height (with oscillation guard from upstream updateXAxisHeight) */
+				if (currentSize && Math.round(currentSize.height) !== Math.round(updatedXAxisHeight)) {
+					const axisEntry = stateCtx?.state.cartesianAxes.xAxis[String(props.xAxisId)]
+					const axis = axisEntry?.settings
+					if (axis != null) {
+						const history = axis.heightHistory ?? []
+						const skip =
+							history.length === 3 &&
+							history[0] === history[2] &&
+							updatedXAxisHeight === history[1] &&
+							updatedXAxisHeight !== axis.height &&
+							Math.abs(updatedXAxisHeight - (history[0] ?? 0)) <= 1
+						if (!skip) {
+							const newHistory = [...history, updatedXAxisHeight].slice(-3)
+							stateCtx?.setState("cartesianAxes", "xAxis", String(props.xAxisId), "settings", {
+								...axis,
+								height: updatedXAxisHeight,
+								heightHistory: newHistory,
+							})
+						}
+					}
+				}
+			})
+		},
+	)
+
+	/* resolved() drops when any dep is nullish; Show rerenders subtree when
+	   the memo flips from falsy → truthy, matching React's render-when-ready. */
+	const resolved = createMemo(() => {
+		const size = axisSize()
+		const pos = position()
+		const synced = synchronizedSettings()
+		if (size == null || pos == null || synced == null) {
+			return null
+		}
+		const { id: _del1, scale: _del2, ...restSynchronizedSettings } = synced
+		return { pos, restSynchronizedSettings, size }
+	})
+
+	return (
+		<Show when={resolved()}>
+			{(v) => (
+				<CartesianAxis
+					{...props}
+					{...v().restSynchronizedSettings}
+					axisRef={setCartesianAxisRef}
+					x={v().pos.x}
+					y={v().pos.y}
+					width={v().size.width}
+					height={v().size.height}
+					class={clsx(`recharts-${axisType} ${axisType}`, props.class)}
+					viewBox={viewBox()}
+					ticks={cartesianTickItems()}
+					axisType={axisType}
+					axisId={props.xAxisId}
+				/>
+			)}
+		</Show>
+	)
+}
+
+export const xAxisDefaultProps = {
+	allowDataOverflow: implicitXAxis.allowDataOverflow,
+	allowDecimals: implicitXAxis.allowDecimals,
+	allowDuplicatedCategory: implicitXAxis.allowDuplicatedCategory,
+	angle: implicitXAxis.angle,
+	axisLine: defaultCartesianAxisProps.axisLine,
+	height: implicitXAxis.height,
+	hide: false,
+	includeHidden: implicitXAxis.includeHidden,
+	interval: implicitXAxis.interval,
+	label: false,
+	minTickGap: implicitXAxis.minTickGap,
+	mirror: implicitXAxis.mirror,
+	orientation: implicitXAxis.orientation,
+	padding: implicitXAxis.padding,
+	reversed: implicitXAxis.reversed,
+	scale: implicitXAxis.scale,
+	tick: implicitXAxis.tick,
+	tickCount: implicitXAxis.tickCount,
+	niceTicks: implicitXAxis.niceTicks,
+	tickLine: defaultCartesianAxisProps.tickLine,
+	tickSize: defaultCartesianAxisProps.tickSize,
+	type: implicitXAxis.type,
+	xAxisId: 0,
+} as const satisfies Partial<Props>
+
+type PropsWithDefaults = RequiresDefaultProps<Props, typeof xAxisDefaultProps>
+
+/**
+ * @consumes CartesianViewBoxContext
+ * @provides CartesianLabelContext
+ */
+/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped axes accept any data */
+export function XAxis<DataPointType = any, DataValueType = any>(
+	outsideProps: Props<DataPointType, DataValueType>,
+) {
+	const props: PropsWithDefaults = resolveDefaultProps(outsideProps, xAxisDefaultProps)
+	return (
+		<>
+			<SetXAxisSettings
+				allowDataOverflow={props.allowDataOverflow}
+				allowDecimals={props.allowDecimals}
+				allowDuplicatedCategory={props.allowDuplicatedCategory}
+				angle={props.angle}
+				dataKey={props.dataKey}
+				domain={props.domain}
+				height={props.height}
+				hide={props.hide}
+				id={props.xAxisId}
+				includeHidden={props.includeHidden}
+				interval={props.interval}
+				minTickGap={props.minTickGap}
+				mirror={props.mirror}
+				name={props.name}
+				orientation={props.orientation}
+				padding={props.padding}
+				reversed={props.reversed}
+				scale={props.scale}
+				tick={
+					typeof props.tick === "function"
+						? (props.tick as (p: unknown) => JSX.Element)
+						: props.tick
+				}
+				tickCount={props.tickCount}
+				niceTicks={props.niceTicks}
+				tickFormatter={props.tickFormatter}
+				ticks={props.ticks}
+				type={props.type}
+				unit={props.unit}
+			/>
+			<XAxisImpl {...props} />
+		</>
+	)
+}
+
+XAxis.displayName = "XAxis"