@solidports/recharts 0.1.0 → 0.1.1

package/src/polar/PolarRadiusAxis.tsx

@@ -1,547 +0,0 @@
-/* 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} />
-		</>
-	)
-}