@solidports/recharts 0.1.0 → 0.1.1

package/src/cartesian/XAxis.tsx

@@ -1,433 +0,0 @@
-/* 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"