@solidports/recharts 0.1.0

package/src/component/Label.tsx

@@ -0,0 +1,636 @@
+/* eslint-disable import/no-cycle */
+import { createContext, createMemo, untrack, useContext, type Accessor } from 'solid-js';
+import type { WithoutRemoveFalse } from "../util/types"
+import type { CamelCaseSVGAttrs } from "../util/CamelCaseSVGAttrs"
+import type { JSX } from '@solidjs/web';
+import { clsx } from "clsx"
+import {
+	isValidTextAnchor,
+	type RenderableText,
+	Text,
+	type TextAnchor,
+	type TextVerticalAnchor,
+} from "./Text"
+import { isNullish, isNumber, isNumOrStr, mathSign, uniqueId } from "../util/DataUtils"
+import { polarToCartesian } from "../util/PolarUtils"
+import type {
+	CartesianViewBoxRequired,
+	DataKey,
+	PolarViewBoxRequired,
+	TrapezoidViewBox,
+	ViewBox,
+} from "../util/types"
+import { cartesianViewBoxToTrapezoid } from "../cartesian/cartesianViewBoxToTrapezoid"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { selectPolarViewBox } from "../state/selectors/polarAxisSelectors"
+import { selectChartViewBox } from "../state/selectors/selectChartOffsetInternal"
+import { resolveDefaultProps } from "../util/resolveDefaultProps"
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents"
+import { cloneJsxNodeWithProps, isJsxNode } from "../util/ReactUtils"
+import type { ZIndexable } from "../zIndex/ZIndexLayer"
+import { ZIndexLayer } from "../zIndex/ZIndexLayer"
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
+
+import {
+	type CartesianLabelPosition,
+	getCartesianPosition,
+} from "../cartesian/getCartesianPosition"
+
+/**
+ * @inline
+ */
+export type LabelContentType = JSX.Element | ((props: Props) => RenderableText | JSX.Element)
+
+type PolarLabelPosition = "insideStart" | "insideEnd" | "end"
+
+/**
+ * @inline
+ */
+export type LabelPosition = CartesianLabelPosition | PolarLabelPosition
+
+/**
+ * @inline
+ */
+export type LabelFormatter = (label: RenderableText) => RenderableText
+
+interface LabelProps extends ZIndexable {
+	/**
+	 * The box of viewing area. Used for positioning.
+	 * If undefined, viewBox will be calculated based on surrounding context.
+	 */
+	viewBox?: ViewBox
+	parentViewBox?: ViewBox
+	/**
+	 * Function to customize how content is serialized before rendering.
+	 *
+	 * This should return a renderable text - something that the {@link Text} component can render.
+	 * Typically, a string or number.
+	 * Custom components are not supported here - use the `content` prop instead.
+	 */
+	formatter?: LabelFormatter
+	/**
+	 * The value of label can be set as children or as the `value` prop
+	 *
+	 * @example <Label value="foo" />
+	 */
+	value?: RenderableText
+	/**
+	 * The offset to the specified "position". Direction of the offset depends on the position.
+	 *
+	 * @defaultValue 5
+	 */
+	offset?: number
+	/**
+	 * The position of label relative to the view box.
+	 *
+	 * @defaultValue middle
+	 */
+	position?: LabelPosition
+	/**
+	 * The value of label can be set as children or as the `value` prop
+	 *
+	 * @example <Label>foo</Label>
+	 */
+	children?: RenderableText
+	className?: string
+	/**
+	 * If set a JSX element, the option is the custom element of rendering label.
+	 * If set a function, the function will be called to render label content.
+	 *
+	 * @example <Label content={CustomizedLabel} />
+	 * @example
+	 * const renderCustomLabel = (props) => <text {...props}>Custom Label</text>
+	 * <Label content={renderCustomLabel} />
+	 */
+	content?: LabelContentType
+	/**
+	 * @defaultValue false
+	 */
+	textBreakAll?: boolean
+	/**
+	 * Text rotation angle in degrees.
+	 * Positive values rotate clockwise, negative values rotate counterclockwise.
+	 *
+	 * @defaultValue 0
+	 */
+	angle?: number
+	index?: number
+	labelRef?: SVGTextElement | ((el: SVGTextElement) => void)
+	/**
+	 * 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 2000
+	 * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
+	 */
+	zIndex?: number
+	/**
+	 * Unique identifier of this component.
+	 * Used as an HTML attribute `id`.
+	 */
+	id?: string
+}
+
+export type Props = WithoutRemoveFalse<
+	Omit<JSX.TextSVGAttributes<SVGTextElement>, "viewBox" | "children" | "ref" | "style">
+> &
+	CamelCaseSVGAttrs &
+	LabelProps & {
+		style?: JSX.CSSProperties
+	}
+
+type PropsWithDefaults = Props & {
+	offset: number
+}
+
+export type ImplicitLabelType =
+	| boolean
+	| string
+	| number
+	| JSX.Element
+	| ((props: Record<string, unknown>) => RenderableText | JSX.Element)
+	/* dataKey is only applicable when label is used implicitly from graphical element props */
+	| (Props & { dataKey?: DataKey<unknown> })
+
+type LabelContextValue<T> = Accessor<T> | T
+
+/**
+ * Solid 2 `createContext` stores `props.value` as a one-shot snapshot. Passing a
+ * memo accessor keeps the value live; the compiler may also unwrap that accessor
+ * before the snapshot, so consumers must accept either an accessor or the box.
+ */
+function readMaybeAccessor<T>(value: LabelContextValue<T> | null | undefined): T | undefined {
+	if (value == null) {
+		return undefined
+	}
+	let current: unknown = value
+	for (let i = 0; i < 2 && typeof current === "function"; i++) {
+		current = (current as Accessor<unknown>)()
+	}
+	return current as T
+}
+
+const CartesianLabelContext = createContext<LabelContextValue<TrapezoidViewBox> | null>(null)
+
+export function CartesianLabelContextProvider(props: TrapezoidViewBox & { children: JSX.Element }) {
+	const viewBox = createMemo(
+		(): TrapezoidViewBox => ({
+			height: props.height,
+			lowerWidth: props.lowerWidth,
+			upperWidth: props.upperWidth,
+			width: props.width,
+			x: props.x,
+			y: props.y,
+		}),
+	)
+	return <CartesianLabelContext value={viewBox}>{props.children}</CartesianLabelContext>
+}
+
+const useCartesianLabelContext = (): TrapezoidViewBox | undefined => {
+	const labelChildContext = useContext(CartesianLabelContext)
+	const ctx = useChartStore()
+	if (labelChildContext != null) {
+		return untrack(() => readMaybeAccessor(labelChildContext))
+	}
+	const rootViewBox = ctx ? selectChartViewBox(ctx.store) : undefined
+	return rootViewBox ? cartesianViewBoxToTrapezoid(rootViewBox) : undefined
+}
+
+const PolarLabelContext = createContext<LabelContextValue<PolarViewBoxRequired | undefined> | null>(null)
+
+/**
+ * `pending` keeps the context present but empty: polar labels inside wait (render nothing)
+ * instead of falling back to the chart viewBox, e.g. a Pie whose sectors are not known yet.
+ */
+export function PolarLabelContextProvider(
+	props: PolarViewBoxRequired & { children: JSX.Element; pending?: boolean },
+) {
+	const viewBox = createMemo(
+		(): PolarViewBoxRequired | undefined => props.pending ? undefined : ({
+			clockWise: props.clockWise,
+			cx: props.cx,
+			cy: props.cy,
+			endAngle: props.endAngle,
+			innerRadius: props.innerRadius,
+			outerRadius: props.outerRadius,
+			startAngle: props.startAngle,
+		}),
+	)
+	return <PolarLabelContext value={viewBox}>{props.children}</PolarLabelContext>
+}
+
+export const usePolarLabelContext = (): PolarViewBoxRequired | undefined => {
+	const labelChildContext = useContext(PolarLabelContext)
+	const ctx = useChartStore()
+	if (labelChildContext != null) {
+		return untrack(() => readMaybeAccessor(labelChildContext))
+	}
+	return ctx ? selectPolarViewBox(ctx.store) : undefined
+}
+
+/* eslint-disable solid/reactivity -- plain utility fn; Props parameter is not a Solid reactive proxy at this call site */
+const getLabel = (props: Props): RenderableText => {
+	const label: RenderableText = isNullish(props.children) ? props.value : props.children
+
+	if (typeof props.formatter === "function") {
+		return props.formatter(label)
+	}
+
+	return label
+}
+/* eslint-enable solid/reactivity */
+
+export const isLabelContentAFunction = (
+	content: unknown,
+): content is (props: Props) => JSX.Element => {
+	return content != null && typeof content === "function"
+}
+
+const getDeltaAngle = (startAngle: number, endAngle: number) => {
+	const sign = mathSign(endAngle - startAngle)
+	const deltaAngle = Math.min(Math.abs(endAngle - startAngle), 360)
+
+	return sign * deltaAngle
+}
+
+const renderRadialLabel = (
+	labelProps: PropsWithDefaults,
+	position: PolarLabelPosition,
+	label: RenderableText | JSX.Element,
+	attrs: Record<PropertyKey, unknown>,
+	viewBox: PolarViewBoxRequired,
+): JSX.Element => {
+	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise } = viewBox
+	const radius = (innerRadius + outerRadius) / 2
+	const deltaAngle = getDeltaAngle(startAngle, endAngle)
+	const sign = deltaAngle >= 0 ? 1 : -1
+	let labelAngle: number
+	let direction: boolean | undefined
+
+	switch (position) {
+		case "insideStart":
+			labelAngle = startAngle + sign * labelProps.offset
+			direction = clockWise
+			break
+		case "insideEnd":
+			labelAngle = endAngle - sign * labelProps.offset
+			direction = !clockWise
+			break
+		case "end":
+			labelAngle = endAngle + sign * labelProps.offset
+			direction = clockWise
+			break
+		default:
+			throw new Error(`Unsupported position ${position}`)
+	}
+
+	direction = deltaAngle <= 0 ? direction : !direction
+
+	const startPoint = polarToCartesian(cx, cy, radius, labelAngle)
+	const endPoint = polarToCartesian(cx, cy, radius, labelAngle + (direction ? 1 : -1) * 359)
+	const path = `M${startPoint.x},${startPoint.y}
+    A${radius},${radius},0,1,${direction ? 0 : 1},
+    ${endPoint.x},${endPoint.y}`
+	const id = isNullish(labelProps.id) ? uniqueId("recharts-radial-line-") : labelProps.id
+
+	return (
+		<text
+			{...attrs}
+			dominant-baseline="central"
+			class={clsx("recharts-radial-bar-label", labelProps.className)}
+		>
+			<defs>
+				<path id={id} d={path} />
+			</defs>
+			<textPath href={`#${id}`}>{label}</textPath>
+		</text>
+	)
+}
+
+const getAttrsOfPolarLabel = (
+	viewBox: PolarViewBoxRequired,
+	offset: number,
+	position: LabelPosition | undefined,
+): LabelPositionAttributes => {
+	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle } = viewBox
+	const midAngle = (startAngle + endAngle) / 2
+
+	if (position === "outside") {
+		const { x, y } = polarToCartesian(cx, cy, outerRadius + offset, midAngle)
+
+		return {
+			textAnchor: x >= cx ? "start" : "end",
+			verticalAnchor: "middle",
+			x,
+			y,
+		}
+	}
+
+	if (position === "center") {
+		return {
+			textAnchor: "middle",
+			verticalAnchor: "middle",
+			x: cx,
+			y: cy,
+		}
+	}
+
+	if (position === "centerTop") {
+		return {
+			textAnchor: "middle",
+			verticalAnchor: "start",
+			x: cx,
+			y: cy,
+		}
+	}
+
+	if (position === "centerBottom") {
+		return {
+			textAnchor: "middle",
+			verticalAnchor: "end",
+			x: cx,
+			y: cy,
+		}
+	}
+
+	const r = (innerRadius + outerRadius) / 2
+	const { x, y } = polarToCartesian(cx, cy, r, midAngle)
+
+	return {
+		textAnchor: "middle",
+		verticalAnchor: "middle",
+		x,
+		y,
+	}
+}
+
+const isPolar = (
+	viewBox: CartesianViewBoxRequired | TrapezoidViewBox | PolarViewBoxRequired | undefined,
+): viewBox is PolarViewBoxRequired => viewBox != null && "cx" in viewBox && isNumber(viewBox.cx)
+
+export type LabelPositionAttributes = {
+	height?: number
+	textAnchor: TextAnchor
+	verticalAnchor: TextVerticalAnchor
+	width?: number
+	x: number
+	y: number
+}
+
+export const defaultLabelProps = {
+	angle: 0,
+	offset: 5,
+	position: "middle",
+	textBreakAll: false,
+	zIndex: DefaultZIndexes.label,
+} as const satisfies Partial<Props>
+
+function polarViewBoxToTrapezoid(
+	viewBox: PolarViewBoxRequired | TrapezoidViewBox | undefined,
+): TrapezoidViewBox | undefined {
+	if (!isPolar(viewBox)) {
+		return viewBox
+	}
+	const { cx, cy, outerRadius } = viewBox
+	const diameter = outerRadius * 2
+	return {
+		height: diameter,
+		lowerWidth: diameter,
+		upperWidth: diameter,
+		width: diameter,
+		x: cx - outerRadius,
+		y: cy - outerRadius,
+	}
+}
+
+/**
+ * @consumes CartesianViewBoxContext
+ * @consumes PolarViewBoxContext
+ * @consumes CartesianLabelContext
+ * @consumes PolarLabelContext
+ */
+export function Label(outerProps: Props): JSX.Element | null {
+	const props: PropsWithDefaults = resolveDefaultProps(
+		outerProps,
+		defaultLabelProps,
+	) as PropsWithDefaults
+	const polarContext = useContext(PolarLabelContext)
+	const cartesianContext = useContext(CartesianLabelContext)
+	const ctx = useChartStore()
+	const polarViewBox = createMemo(() => {
+		if (polarContext != null) {
+			return readMaybeAccessor(polarContext)
+		}
+		return ctx ? selectPolarViewBox(ctx.store) : undefined
+	})
+	const cartesianViewBox = createMemo(() => {
+		if (cartesianContext != null) {
+			return readMaybeAccessor(cartesianContext)
+		}
+		const rootViewBox = ctx ? selectChartViewBox(ctx.store) : undefined
+		return rootViewBox ? cartesianViewBoxToTrapezoid(rootViewBox) : undefined
+	})
+
+	const output = createMemo(() => {
+	/*
+	 * I am not proud about this solution, but it's a quick fix for https://github.com/recharts/recharts/issues/6030#issuecomment-3155352460.
+	 * What we should really do is split Label into two components: CartesianLabel and PolarLabel and then handle their respective viewBoxes separately.
+	 * Also other components should set its own viewBox in a context so that we can fix https://github.com/recharts/recharts/issues/6156
+	 */
+	const polar = polarViewBox()
+	const cartesian = cartesianViewBox()
+	/*
+	 * When PolarLabelContext is present, wait for the polar box. Falling back to
+	 * the chart cartesian trapezoid makes custom `content` see `innerRadius: undefined`.
+	 */
+	const resolveViewBox = () => {
+		if (props.position === "center") {
+			return cartesian
+		}
+		if (polarContext != null) {
+			return polar
+		}
+		return polar ?? cartesian
+	}
+	const resolvedViewBox = resolveViewBox()
+
+	let viewBox: PolarViewBoxRequired | TrapezoidViewBox | undefined
+	if (props.viewBox == null) {
+		viewBox = resolvedViewBox
+	} else if (isPolar(props.viewBox)) {
+		viewBox = props.viewBox
+	} else {
+		viewBox = cartesianViewBoxToTrapezoid(props.viewBox)
+	}
+
+	const cartesianBox = polarViewBoxToTrapezoid(viewBox)
+
+	/* Solid has no isValidElement: an element is a Node (or a component's render accessor). */
+	const content = props.content
+	const isElementContent = isJsxNode(content)
+	if (
+		!viewBox ||
+		(isNullish(props.value) &&
+			isNullish(props.children) &&
+			!isElementContent &&
+			typeof content !== "function")
+	) {
+		return null
+	}
+
+	// TODO: Generic Polar Hook
+	const isRadialPolarLabel =
+		isPolar(viewBox) &&
+		(props.position === "insideStart" || props.position === "insideEnd" || props.position === "end")
+
+	let positionAttrs: LabelPositionAttributes | undefined
+	if (isPolar(viewBox)) {
+		if (!isRadialPolarLabel) {
+			positionAttrs = getAttrsOfPolarLabel(viewBox, props.offset, props.position)
+		}
+	} else if (cartesianBox) {
+		const cartesianResult = getCartesianPosition({
+			clamp: true,
+			offset: props.offset,
+			parentViewBox: isPolar(props.parentViewBox) ? undefined : props.parentViewBox,
+			position: props.position,
+			viewBox: cartesianBox,
+		})
+
+		positionAttrs = {
+			textAnchor: cartesianResult.horizontalAnchor,
+			verticalAnchor: cartesianResult.verticalAnchor,
+			x: cartesianResult.x,
+			y: cartesianResult.y,
+			...(cartesianResult.width !== undefined ? { width: cartesianResult.width } : {}),
+			...(cartesianResult.height !== undefined ? { height: cartesianResult.height } : {}),
+		}
+	}
+
+	/*
+	 * Custom content receives the computed x and y too, so that custom labels
+	 * can be positioned the same way the built-in Text label is. Explicitly
+	 * passed props win over the computed values. Only x and y are forwarded (not
+	 * the anchors): a custom label that spreads its props into a nested Label
+	 * would otherwise have that Label's own computed anchors overridden.
+	 * https://github.com/recharts/recharts/issues/5067
+	 */
+	const propsWithViewBox: Record<string, unknown> = {
+		...(positionAttrs?.x !== undefined ? { x: positionAttrs.x } : {}),
+		...(positionAttrs?.y !== undefined ? { y: positionAttrs.y } : {}),
+		...props,
+		viewBox,
+	}
+
+	if (isElementContent) {
+		/* upstream: cloneElement(content, props) */
+		const { labelRef: _ref, children: _children, content: _content, ...propsWithoutLabelRef } = propsWithViewBox
+		return cloneJsxNodeWithProps(content as Node, propsWithoutLabelRef) as unknown as JSX.Element
+	}
+
+	let label: RenderableText
+	if (typeof content === "function") {
+		const { content: _, ...propsForContent } = propsWithViewBox
+		/* React's createElement(content, props) calls function components with
+		   (props, legacyContext={}). Tests are 1:1 ports so they assert the
+		   two-arg shape. Solid has no legacy context so pass an empty object. */
+		const rendered = (content as (p: Record<string, unknown>, legacyCtx: Record<string, never>) => RenderableText | JSX.Element)(propsForContent, {})
+		if (rendered != null && typeof rendered === "object") {
+			return rendered as JSX.Element
+		}
+		label = rendered as RenderableText
+	} else {
+		label = getLabel(props)
+	}
+
+	const attrs = svgPropertiesAndEvents({ ...props })
+
+	if (isRadialPolarLabel && isPolar(viewBox)) {
+		return renderRadialLabel(props, props.position as PolarLabelPosition, label, attrs, viewBox)
+	}
+
+	if (positionAttrs == null) {
+		return null
+	}
+
+	return (
+		<ZIndexLayer zIndex={props.zIndex}>
+			<Text
+				ref={props.labelRef}
+				className={clsx("recharts-label", props.className ?? "")}
+				{...attrs}
+				{...positionAttrs}
+				/*
+				 * textAnchor is decided by default based on the `position`
+				 * but we allow overriding via props for precise control.
+				 */
+				textAnchor={
+					isValidTextAnchor(props.textAnchor) ? props.textAnchor : positionAttrs.textAnchor
+				}
+				breakAll={props.textBreakAll}
+			>
+				{label}
+			</Text>
+		</ZIndexLayer>
+	)
+	})
+
+	return output as unknown as JSX.Element
+}
+
+Label.displayName = "Label"
+
+const parseLabel = (
+	label: ImplicitLabelType | undefined,
+	viewBox: ViewBox | undefined,
+	labelRef?: SVGTextElement | ((el: SVGTextElement) => void),
+): JSX.Element | null => {
+	if (!label) {
+		return null
+	}
+
+	const commonProps = { labelRef, viewBox }
+
+	if (label === true) {
+		return <Label {...commonProps} />
+	}
+
+	if (isNumOrStr(label)) {
+		return <Label value={label} {...commonProps} />
+	}
+
+	if (isLabelContentAFunction(label)) {
+		return <Label content={label} {...commonProps} />
+	}
+
+	/* `label={<CustomLabel />}` — user JSX evaluated to a live Node before reaching us.
+	 * Render it directly; clone if reused so position attrs from Label compute via the
+	 * cloned subtree. Single-instance render at this site (no per-tick repeat). */
+	if (isJsxNode(label)) {
+		return <>{(label as Node).cloneNode(true) as unknown as JSX.Element}</>
+	}
+
+	if (label && typeof label === "object") {
+		return <Label {...(label as Props)} {...commonProps} />
+	}
+
+	return null
+}
+
+export function CartesianLabelFromLabelProp(props: {
+	label: ImplicitLabelType | undefined
+	labelRef?: SVGTextElement | ((el: SVGTextElement) => void)
+}): JSX.Element | null {
+	return (
+		untrack(() => parseLabel(props.label, useCartesianLabelContext(), props.labelRef)) || null
+	)
+}
+
+export function PolarLabelFromLabelProp(props: {
+	label: ImplicitLabelType | undefined
+}): JSX.Element | null {
+	return untrack(() => parseLabel(props.label, usePolarLabelContext())) || null
+}