@solidports/recharts 0.1.0 → 0.1.1

package/src/component/Legend.tsx

@@ -1,512 +0,0 @@
-/* eslint-disable import/no-cycle, sort-keys */
-import { Show, untrack, createEffect, createMemo, omit } from 'solid-js';
-import type { JSX } from '@solidjs/web';
-import { BarePortal } from "../util/BarePortal"
-import { useLegendPortal } from "../context/legendPortalContext"
-import {
-	type ContentType,
-	DefaultLegendContent,
-	type LegendPayload,
-	type Props as DefaultLegendContentProps,
-	type VerticalAlignmentType,
-} from "./DefaultLegendContent"
-
-import type { CartesianLayout, Margin, Size } from "../util/types"
-import { getUniqPayload, type UniqueOption } from "../util/payload/getUniqPayload"
-import { useLegendPayload } from "../context/legendPayloadContext"
-import { type ElementOffset, useElementOffset } from "../util/useElementOffset"
-import { useChartHeight, useChartWidth, useMargin, useViewBox } from "../context/chartLayoutContext"
-import type { LegendPosition, LegendSettings } from "../state/legendSlice"
-import { useOptionalChartState } from "../state/useChartState"
-import { resolveDefaultProps } from "../util/resolveDefaultProps"
-import { getCartesianPosition } from "../cartesian/getCartesianPosition"
-import { isOutsidePosition } from "../cartesian/isOutsidePosition"
-import { cartesianPositionToCSSTranslate } from "../cartesian/cartesianPositionToCSSTranslate"
-import { teardownWrite } from "../state/teardownWrite"
-
-function defaultUniqBy(entry: LegendPayload) {
-	return entry.value
-}
-
-type ContentProps = Omit<Props, "layout"> & {
-	layout: CartesianLayout
-	margin: Margin | undefined
-	chartWidth: number
-	chartHeight: number
-	contextPayload: ReadonlyArray<LegendPayload>
-}
-
-function LegendContent(props: ContentProps) {
-	const finalPayload = () =>
-		getUniqPayload(props.contextPayload, props.payloadUniqBy, defaultUniqBy)
-	/* upstream strips contextPayload before handing props to content */
-	const otherProps = omit(props, "contextPayload")
-
-	/* content type is structural (stable); snapshot once at setup */
-	const content = untrack(() => props.content)
-	if (typeof content === "function") {
-		/* user-supplied render fn — pass full props + resolved payload */
-		const contentFn = content as (p: Props) => JSX.Element
-		/* Re-invoked when props or payload change, like upstream re-rendering the content. */
-		return <>{contentFn(Object.assign({}, otherProps, { payload: finalPayload() }) as Props)}</>
-	}
-
-	if (content != null) {
-		return content as JSX.Element
-	}
-
-	return <DefaultLegendContent {...otherProps} payload={finalPayload()} />
-}
-
-type PositionInput = {
-	layout?: Props["layout"]
-	align?: Props["align"]
-	verticalAlign?: Props["verticalAlign"]
-}
-
-/* CSS strings — Solid (DOM `style.x = val`) silently drops unit-less numbers for
-   length properties (`left: 5` is invalid CSS, only `left: 5px` is). Upstream React
-   inferred `px` from numeric style values; Solid does not. */
-function px(n: number): string {
-	return `${n}px`
-}
-
-/* Solid serializes JSX style props verbatim — `backgroundColor: "red"` becomes the
-   literal attribute `backgroundColor:red`, not `background-color: red`. Upstream React
-   normalized to kebab-case; the port must mirror that for `wrapperStyle` since the
-   public API accepts React-style camelCase keys. */
-function kebabizeKey(key: string): string {
-	return key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
-}
-
-function kebabizeStyle(
-	style: JSX.CSSProperties | Record<string, string | number | undefined> | undefined,
-): Record<string, string | number> {
-	if (style == null) {
-		return {}
-	}
-	const out: Record<string, string | number> = {}
-	for (const key of Object.keys(style)) {
-		const v = (style as Record<string, string | number | undefined>)[key]
-		if (v == null) continue
-		out[kebabizeKey(key)] = v
-	}
-	return out
-}
-
-function getDefaultPosition(
-	style: JSX.CSSProperties | undefined,
-	positionProps: PositionInput,
-	margin: Margin | undefined,
-	chartWidth: number,
-	chartHeight: number,
-	box: ElementOffset,
-) {
-	const { layout, align, verticalAlign } = positionProps
-	let hPos: Record<string, string> | undefined
-	let vPos: Record<string, string> | undefined
-
-	if (
-		!style ||
-		((style.left === undefined || style.left === null) &&
-			(style.right === undefined || style.right === null))
-	) {
-		if (align === "center" && layout === "vertical") {
-			hPos = { left: px(((chartWidth || 0) - box.width) / 2) }
-		} else {
-			hPos =
-				align === "right"
-					? { right: px((margin && margin.right) || 0) }
-					: { left: px((margin && margin.left) || 0) }
-		}
-	}
-
-	if (
-		!style ||
-		((style.top === undefined || style.top === null) &&
-			(style.bottom === undefined || style.bottom === null))
-	) {
-		if (verticalAlign === "middle") {
-			vPos = { top: px(((chartHeight || 0) - box.height) / 2) }
-		} else {
-			vPos =
-				verticalAlign === "bottom"
-					? { bottom: px((margin && margin.bottom) || 0) }
-					: { top: px((margin && margin.top) || 0) }
-		}
-	}
-
-	return { ...hPos, ...vPos }
-}
-
-function getLayoutForPosition(position: LegendPosition | undefined): CartesianLayout {
-	if (
-		position === "left" ||
-		position === "right" ||
-		position === "insideLeft" ||
-		position === "insideRight"
-	) {
-		return "vertical"
-	}
-
-	return "horizontal"
-}
-
-function legendAreaFromMargin(
-	chartWidth: number,
-	chartHeight: number,
-	margin: Margin | undefined,
-) {
-	return {
-		height: Math.max(chartHeight - (margin?.top || 0) - (margin?.bottom || 0), 0),
-		width: Math.max(chartWidth - (margin?.left || 0) - (margin?.right || 0), 0),
-		x: margin?.left || 0,
-		y: margin?.top || 0,
-	}
-}
-
-function getOutsidePositionOffset(
-	position: LegendPosition | undefined,
-	offset: number,
-	box: ElementOffset,
-): { top?: number; left?: number } {
-	if (position === "top") {
-		return { top: box.height + offset }
-	}
-	if (position === "bottom") {
-		return { top: -box.height - offset }
-	}
-	if (position === "left") {
-		return { left: box.width + offset }
-	}
-	if (position === "right") {
-		return { left: -box.width - offset }
-	}
-	return {}
-}
-
-export type LegendItemSorter = "value" | "dataKey" | ((item: LegendPayload) => number | string)
-
-export type Props = Omit<DefaultLegendContentProps, "payload" | "ref" | "verticalAlign" | "layout"> & {
-	/**
-	 * Renders the content of the legend.
-	 *
-	 * This should return HTML elements, not SVG elements.
-	 *
-	 * - If not set, the {@link DefaultLegendContent} component is used.
-	 * - If set to a JSX element, that element will be rendered.
-	 * - If set to a function, the function will be called and should return HTML elements.
-	 *
-	 * @example <Legend content={CustomizedLegend} />
-	 * @example <Legend content={renderLegend} />
-	 */
-	content?: ContentType
-	/**
-	 * The layout of legend items inside the legend container.
-	 *
-	 * When `auto` then the layout is decided based on the `position` prop:
-	 * - in `left`|`right` positions, the layout is vertical
-	 * - otherwise horizontal
-	 * - if position is undefined, also horizontal
-	 *
-	 * `auto` value is new since 3.10
-	 *
-	 * @defaultValue auto
-	 */
-	layout?: CartesianLayout | "auto"
-	/**
-	 * CSS styles to be applied to the wrapper `div` element.
-	 */
-	wrapperStyle?: JSX.CSSProperties
-	/**
-	 * Width of the legend.
-	 * Accept CSS style string values like `100%` or `fit-content`, or number values like `400`.
-	 */
-	width?: number | string
-	/**
-	 * Height of the legend.
-	 * Accept CSS style string values like `100%` or `fit-content`, or number values like `400`.
-	 */
-	height?: number | string
-	payloadUniqBy?: UniqueOption<LegendPayload>
-	onBBoxUpdate?: (box: ElementOffset | null) => void
-	/**
-	 * If portal is defined, then Legend will use this element as a target
-	 * for rendering using Solid Portal.
-	 *
-	 * If this is undefined then Legend renders inside the recharts-wrapper element.
-	 */
-	portal?: HTMLElement | null
-	/**
-	 * Sorts Legend items. Defaults to `value` which means it will sort alphabetically
-	 * by the label.
-	 *
-	 * If `null` is provided then the payload is not sorted. Be aware that without sort,
-	 * the order of items may change between renders!
-	 *
-	 * @defaultValue value
-	 */
-	itemSorter?: LegendItemSorter | null
-	/**
-	 * The alignment of the whole Legend container:
-	 *
-	 * - `bottom`: shows the Legend below chart, and chart height reduces automatically to make space for it.
-	 * - `top`: shows the Legend above chart, and chart height reduces automatically.
-	 * - `middle`:  shows the Legend in the middle of chart, covering other content, and chart height remains unchanged.
-	 * The exact behavior changes depending on `align` prop.
-	 *
-	 * @defaultValue bottom
-	 */
-	verticalAlign?: VerticalAlignmentType
-	/**
-	 * The position of the legend relative to the chart.
-	 * If this is defined, it overrides `align` and `verticalAlign`.
-	 *
-	 * @since 3.10
-	 */
-	position?: LegendPosition
-	/**
-	 * The offset to the specified `position`. Direction of the offset depends on the position.
-	 *
-	 * @since 3.10
-	 */
-	offset?: number
-}
-
-function LegendSettingsDispatcher(props: LegendSettings): null {
-	const newCtx = useOptionalChartState()
-	createEffect(
-		() => ({
-			align: props.align,
-			itemSorter: props.itemSorter,
-			layout: props.layout,
-			offset: props.offset,
-			position: props.position,
-			verticalAlign: props.verticalAlign,
-		}),
-		(settings) => {
-			newCtx?.setState("legend", "settings", settings)
-		},
-	)
-	return null
-}
-
-function LegendSizeDispatcher(props: Size): null {
-	const newCtx = useOptionalChartState()
-	createEffect(
-		() => ({ height: props.height, width: props.width }),
-		(size) => {
-			newCtx?.setState("legend", "size", size)
-			return () => {
-				teardownWrite(() => {
-					newCtx?.setState("legend", "size", { height: 0, width: 0 })
-				})
-			}
-		},
-	)
-	return null
-}
-
-function getWidthOrHeight(
-	layout: CartesianLayout | undefined,
-	height: number | string | undefined,
-	width: number | string | undefined,
-	maxWidth: number,
-): null | { height?: number | string; width?: number | string } {
-	if (layout === "vertical" && height != null) {
-		return {
-			height,
-		}
-	}
-	if (layout === "horizontal") {
-		return {
-			width: width || maxWidth,
-		}
-	}
-
-	return null
-}
-
-export const legendDefaultProps = {
-	align: "center",
-	iconSize: 14,
-	inactiveColor: "#ccc",
-	itemSorter: "value",
-	labelStyle: {},
-	layout: "auto",
-	offset: 0,
-	verticalAlign: "bottom",
-} as const satisfies Partial<Props>
-
-/**
- * @consumes CartesianChartContext
- * @consumes PolarChartContext
- */
-export function Legend(outsideProps: Props) {
-	const props = resolveDefaultProps(outsideProps, legendDefaultProps)
-	/* All non-portal hooks bare T (GOTCHA-011). Arrow-thunk pattern keeps
-	   `()` callsites valid; legendPortalFromContext stays Accessor (portal context). */
-	/* legacy useLegendPayload() goes through selectLegendPayload which applies itemSorter */
-	/* — keep this path until Phase 6 hooks port unifies the merge semantics */
-	const contextPayload = createMemo(() => useLegendPayload())
-	const legendPortalFromContext = useLegendPortal()
-	const margin = createMemo(() => useMargin())
-	const [lastBoundingBox, updateBoundingBox] = useElementOffset(() => [contextPayload()])
-	const chartWidth = createMemo(() => useChartWidth())
-	const chartHeight = createMemo(() => useChartHeight())
-	const layout = (): CartesianLayout => {
-		const explicit = outsideProps.layout
-		if (explicit && explicit !== "auto") {
-			return explicit
-		}
-		return getLayoutForPosition(props.position)
-	}
-
-	const plotViewBox = createMemo(() => useViewBox())
-
-	const positionViewBox = () => {
-		if (props.position == null) {
-			return null
-		}
-		if (isOutsidePosition(props.position)) {
-			return legendAreaFromMargin(chartWidth() ?? 0, chartHeight() ?? 0, margin())
-		}
-		return plotViewBox() ?? null
-	}
-
-	const shouldReportDimensions = () =>
-		props.portal == null && (props.position == null || isOutsidePosition(props.position))
-
-	return (
-		<Show
-			when={
-				chartWidth() != null &&
-				chartHeight() != null &&
-				(props.portal ?? legendPortalFromContext()) != null &&
-				contextPayload() != null
-			}
-		>
-			{(() => {
-				const cw = () => chartWidth() ?? 0
-				const ch = () => chartHeight() ?? 0
-				const maxWidth = () => cw() - (margin()?.left || 0) - (margin()?.right || 0)
-				const widthOrHeight = () =>
-					getWidthOrHeight(layout(), props.height, props.width, maxWidth())
-				const legendPortal = () => props.portal ?? legendPortalFromContext()
-
-				/* if the user supplies their own portal, only use their defined wrapper styles */
-				const outerStyle = (): JSX.CSSProperties => {
-					if (props.portal) {
-						return kebabizeStyle(props.wrapperStyle) as JSX.CSSProperties
-					}
-					const wh = widthOrHeight()
-					let heightPx: string
-					if (wh?.height) {
-						heightPx = `${wh.height}px`
-					} else if (props.height) {
-						heightPx = `${props.height}px`
-					} else {
-						heightPx = "auto"
-					}
-					let widthPx: string
-					if (wh?.width) {
-						widthPx = `${wh.width}px`
-					} else if (props.width) {
-						widthPx = `${props.width}px`
-					} else {
-						widthPx = "auto"
-					}
-
-					const viewBox = positionViewBox()
-					const positionResult =
-						props.position == null
-							? null
-							: getCartesianPosition({
-									offset: props.offset ?? 0,
-									position: props.position,
-									viewBox: viewBox ?? { height: ch(), width: cw(), x: 0, y: 0 },
-								})
-					const outsidePositionOffset = getOutsidePositionOffset(
-						props.position,
-						props.offset ?? 0,
-						lastBoundingBox(),
-					)
-					const positionMaxWidth =
-						layout() === "vertical" ? (viewBox?.width ?? 0) / 2 : (viewBox?.width ?? 0)
-					const positionMaxHeight =
-						layout() === "horizontal" ? (viewBox?.height ?? 0) / 2 : (viewBox?.height ?? 0)
-
-					const positionStyle: Record<string, string | number> = positionResult
-						? kebabizeStyle({
-								height: "max-content",
-								left: px(positionResult.x + (outsidePositionOffset.left ?? 0)),
-								maxHeight: px(positionMaxHeight),
-								maxWidth: px(positionMaxWidth),
-								overflowY: "auto",
-								top: px(positionResult.y + (outsidePositionOffset.top ?? 0)),
-								transform: cartesianPositionToCSSTranslate(
-									positionResult.horizontalAnchor,
-									positionResult.verticalAnchor,
-								),
-								width: "max-content",
-							})
-						: getDefaultPosition(
-								props.wrapperStyle,
-								{
-									align: props.align,
-									layout: layout(),
-									verticalAlign: props.verticalAlign,
-								},
-								margin(),
-								cw(),
-								ch(),
-								lastBoundingBox(),
-							)
-
-					/* Property order is load-bearing — upstream React asserts the inline
-					   style attribute string verbatim. Solid serializes CSS in insertion
-					   order, so position → width → height → defaults → user must match. */
-					return {
-						position: "absolute",
-						width: widthPx,
-						height: heightPx,
-						...positionStyle,
-						...kebabizeStyle(props.wrapperStyle),
-					}
-				}
-
-				return (
-					<BarePortal mount={legendPortal() ?? undefined}>
-						<div class="recharts-legend-wrapper" style={outerStyle()} ref={updateBoundingBox}>
-							<LegendSettingsDispatcher
-								layout={layout()}
-								align={props.align}
-								verticalAlign={props.verticalAlign}
-								itemSorter={props.itemSorter}
-								position={props.position}
-								offset={props.offset}
-							/>
-							<Show when={shouldReportDimensions()}>
-								<LegendSizeDispatcher
-									width={lastBoundingBox().width}
-									height={lastBoundingBox().height}
-								/>
-							</Show>
-							<LegendContent
-								{...props}
-								layout={layout()}
-								{...widthOrHeight()}
-								margin={margin()}
-								chartWidth={cw()}
-								chartHeight={ch()}
-								contextPayload={contextPayload() ?? []}
-							/>
-						</div>
-					</BarePortal>
-				)
-			})()}
-		</Show>
-	)
-}
-
-Legend.displayName = "Legend"