@solidports/recharts 0.1.0 → 0.1.1

package/src/component/DefaultLegendContent.tsx

@@ -1,348 +0,0 @@
-/* eslint-disable import/no-cycle, sort-keys */
-import { createMemo, For, Show, untrack } from 'solid-js';
-import type { JSX } from '@solidjs/web';
-import { clsx } from "clsx"
-import { Surface } from "../container/Surface"
-import { Symbols } from "../shape/Symbols"
-import type {
-	DataKey,
-	LegendType,
-	PresentationAttributesAdaptChildEvent,
-	CartesianLayout,
-	SymbolType,
-} from "../util/types"
-import { adaptEventsOfChild } from "../util/types"
-import type { RequiresDefaultProps } from "../util/resolveDefaultProps"
-
-import { mergeProps } from '../util/solid-1-compat';
-const SIZE = 32
-export type ContentType = JSX.Element | ((props: Props) => JSX.Element)
-
-export type HorizontalAlignmentType = "center" | "left" | "right"
-export type VerticalAlignmentType = "top" | "bottom" | "middle"
-export type Formatter = (value: unknown, entry: LegendPayload, index: number) => JSX.Element
-
-export interface LegendPayload {
-	/**
-	 * This is the text that will be displayed in the legend in the DOM.
-	 * If undefined, the text will not be displayed, so the icon will be rendered without text.
-	 */
-	value: string | undefined
-	type?: LegendType
-	color?: string
-	/**
-	 * Different graphical items put different information in the payload object
-	 * so double check in runtime what are you getting here.
-	 */
-	payload?: object
-	formatter?: Formatter
-	inactive?: boolean
-	legendIcon?: JSX.Element
-	dataKey?: DataKey<unknown>
-}
-
-interface DefaultLegendContentProps {
-	/**
-	 * The size of icon in each legend item.
-	 * @defaultValue 14
-	 */
-	iconSize?: number
-	/**
-	 * The type of icon in each legend item.
-	 */
-	iconType?: LegendType
-	/**
-	 * The layout of legend items inside the legend container.
-	 * @defaultValue horizontal
-	 */
-	layout?: CartesianLayout
-	/**
-	 * Horizontal alignment of the whole Legend container:
-	 *
-	 * - `left`: shows the Legend to the left of the chart, and chart width reduces automatically to make space for it.
-	 * - `right` shows the Legend to the right of the chart, and chart width reduces automatically.
-	 * - `center` shows the Legend in the middle of chart, and chart width remains unchanged.
-	 *
-	 * The exact behavior changes depending on 'verticalAlign' prop.
-	 *
-	 * @defaultValue center
-	 */
-	align?: HorizontalAlignmentType
-	/**
-	 * Vertical 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 middle
-	 */
-	verticalAlign?: VerticalAlignmentType
-	/**
-	 * The color of the icon when the item is inactive.
-	 * @defaultValue #ccc
-	 */
-	inactiveColor?: string
-	/**
-	 * Function to customize how content is serialized before rendering.
-	 *
-	 * This should return HTML elements, or strings.
-	 *
-	 * @example (value, entry, index) => <span style={{ color: 'red' }}>{value}</span>
-	 * @example https://codesandbox.io/s/legend-formatter-rmzp9
-	 */
-	formatter?: Formatter
-	/**
-	 * The customized event handler of mouseenter on the items in this group
-	 * @example https://recharts.github.io/examples/LegendEffectOpacity
-	 */
-	onMouseEnter?: (data: LegendPayload, index: number, event: MouseEvent & { currentTarget: HTMLElement }) => void
-	/**
-	 * The customized event handler of mouseleave on the items in this group
-	 * @example https://recharts.github.io/examples/LegendEffectOpacity
-	 */
-	onMouseLeave?: (data: LegendPayload, index: number, event: MouseEvent & { currentTarget: HTMLElement }) => void
-	/**
-	 * The customized event handler of click on the items in this group
-	 */
-	onClick?: (data: LegendPayload, index: number, event: MouseEvent & { currentTarget: HTMLElement }) => void
-	/**
-	 * DefaultLegendContent.payload is omitted from Legend props.
-	 * A custom payload can be passed here if desired, or it can be passed from the Legend "content" callback.
-	 */
-	payload?: ReadonlyArray<LegendPayload>
-	/**
-	 * Style of individual items inside the Legend, a `<span>` element.
-	 * These show the data label (name, or dataKey) and value.
-	 *
-	 * @defaultValue {}
-	 */
-	labelStyle?: JSX.CSSProperties
-}
-
-export type Props = DefaultLegendContentProps &
-	Omit<PresentationAttributesAdaptChildEvent<unknown, SVGElement>, keyof DefaultLegendContentProps>
-
-const defaultLegendContentDefaultProps = {
-	align: "center",
-	iconSize: 14,
-	inactiveColor: "#ccc",
-	labelStyle: {},
-	layout: "horizontal",
-	verticalAlign: "middle",
-} as const satisfies Partial<Props>
-
-type InternalProps = RequiresDefaultProps<Props, typeof defaultLegendContentDefaultProps> & {
-	payload: ReadonlyArray<LegendPayload>
-}
-
-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 getStrokeDasharray(input: unknown): string | undefined {
-	if (typeof input === "object" && input !== null && "strokeDasharray" in input) {
-		return String(input.strokeDasharray)
-	}
-	return undefined
-}
-
-function Icon(props: {
-	data: LegendPayload
-	iconType: LegendType | undefined
-	inactiveColor: string
-}) {
-	const halfSize = SIZE / 2
-	const sixthSize = SIZE / 6
-	const thirdSize = SIZE / 3
-
-	const color = () => (props.data.inactive ? props.inactiveColor : props.data.color)
-	const preferredIcon = () => props.iconType ?? props.data.type
-
-	return (
-		<Show when={preferredIcon() !== "none"}>
-			{(() => {
-				const icon = preferredIcon()
-				if (icon === "plainline") {
-					return (
-						<line
-							stroke-width={4}
-							fill="none"
-							stroke={color()}
-							stroke-dasharray={getStrokeDasharray(props.data.payload)}
-							x1={0}
-							y1={halfSize}
-							x2={SIZE}
-							y2={halfSize}
-							class="recharts-legend-icon"
-						/>
-					)
-				}
-				if (icon === "line") {
-					return (
-						<path
-							stroke-width={4}
-							fill="none"
-							stroke={color()}
-							d={`M0,${halfSize}h${thirdSize}
-            A${sixthSize},${sixthSize},0,1,1,${2 * thirdSize},${halfSize}
-            H${SIZE}M${2 * thirdSize},${halfSize}
-            A${sixthSize},${sixthSize},0,1,1,${thirdSize},${halfSize}`}
-							class="recharts-legend-icon"
-						/>
-					)
-				}
-				if (icon === "rect") {
-					return (
-						<path
-							stroke="none"
-							fill={color()}
-							d={`M0,${SIZE / 8}h${SIZE}v${(SIZE * 3) / 4}h${-SIZE}z`}
-							class="recharts-legend-icon"
-						/>
-					)
-				}
-				if (props.data.legendIcon != null) {
-					return props.data.legendIcon
-				}
-
-				const symbolType: SymbolType = icon === "none" || icon == null ? "circle" : icon
-				return (
-					<Symbols
-						fill={color()}
-						cx={halfSize}
-						cy={halfSize}
-						size={SIZE}
-						sizeType="diameter"
-						type={symbolType}
-					/>
-				)
-			})()}
-		</Show>
-	)
-}
-
-function Items(props: InternalProps) {
-	const viewBox = { height: SIZE, width: SIZE, x: 0, y: 0 }
-	const itemStyle = () => ({
-		display: props.layout === "horizontal" ? "inline-block" : "block",
-		"margin-right": "10px",
-		"white-space": "nowrap",
-	})
-	const svgStyle: JSX.CSSProperties = {
-		display: "inline-block",
-		"margin-right": "4px",
-		"vertical-align": "middle",
-	}
-
-	/* Slots keyed by index like upstream's `legend-item-${i}` keys: payload entries are rebuilt
-	   whenever an item toggles `inactive`, and identity keys would replace the <li> nodes. */
-	return (
-		<For keyed={false} each={props.payload as LegendPayload[]}>
-			{(entry, i) => {
-				const finalFormatter = () => entry().formatter || props.formatter
-				const className = () =>
-					clsx({
-						"recharts-legend-item": true,
-						[`legend-item-${i}`]: true,
-						inactive: entry().inactive,
-					})
-
-				return (
-					<Show when={entry().type !== "none"}>
-						{(() => {
-							const finalValue = () => {
-								const fmt = finalFormatter()
-								return fmt ? fmt(entry().value, entry(), i) : entry().value
-							}
-							const textStyle = (): JSX.CSSProperties => {
-								const fromUser = kebabizeStyle(props.labelStyle)
-								/* User styles are re-keyed at runtime, so csstype's literal unions cannot be checked statically. */
-								return {
-									...fromUser,
-									color: entry().inactive
-										? props.inactiveColor
-										: (fromUser.color ?? entry().color),
-									"overflow-wrap": fromUser["overflow-wrap"] ?? "break-word",
-									"white-space": fromUser["white-space"] ?? "normal",
-								} as JSX.CSSProperties
-							}
-
-							return (
-								<li
-									class={className()}
-									style={itemStyle()}
-									{...adaptEventsOfChild(props, entry(), i)}
-								>
-									<Surface
-										width={props.iconSize}
-										height={props.iconSize}
-										viewBox={viewBox}
-										style={svgStyle}
-										aria-label={entry().value == null ? "legend icon" : `${entry().value} legend icon`}
-									>
-										<Icon
-											data={entry()}
-											iconType={props.iconType}
-											inactiveColor={props.inactiveColor}
-										/>
-									</Surface>
-									<span class="recharts-legend-item-text" style={textStyle()}>
-										{finalValue()}
-									</span>
-								</li>
-							)
-						})()}
-					</Show>
-				)
-			}}
-		</For>
-	)
-}
-
-/**
- * This component is by default rendered inside the {@link Legend} component. You would not use it directly.
- *
- * You can use this component to customize the content of the legend,
- * or you can provide your own completely independent content.
- */
-export const DefaultLegendContent = (outsideProps: Props): JSX.Element => {
-	/* mergeProps preserves prop reactivity; do NOT use resolveDefaultProps here — its
-	   `{...realProps}` spread enumerates own keys (including `payload`), capturing the
-	   initial empty array as a plain value and freezing the early-return / Show predicate
-	   to its setup-time evaluation (GOTCHA-002 + GOTCHA-004). */
-	const props = untrack(
-		() => mergeProps(defaultLegendContentDefaultProps, outsideProps) as InternalProps,
-	)
-	const payload = createMemo(() => props.payload)
-
-	const finalStyle = (): JSX.CSSProperties => ({
-		margin: 0,
-		padding: 0,
-		"text-align": props.layout === "horizontal" ? props.align : "left",
-	})
-
-	return (
-		<Show when={(payload()?.length ?? 0) > 0}>
-			<ul class="recharts-default-legend" style={finalStyle()}>
-				<Items {...props} payload={payload() ?? []} />
-			</ul>
-		</Show>
-	)
-}

package/src/component/DefaultTooltipContent.tsx

@@ -1,224 +0,0 @@
-/* eslint-disable import/no-cycle */
-/**
- * @fileOverview Default Tooltip Content
- */
-
-import { createMemo, For, Show } from 'solid-js';
-import type { JSX } from '@solidjs/web';
-import sortBy from "es-toolkit/compat/sortBy"
-import { clsx } from "clsx"
-import { isNullish, isNumOrStr } from "../util/DataUtils"
-import type { DataKey } from "../util/types"
-import type { TooltipPayload, TooltipPayloadEntry } from "../state/tooltipSlice"
-
-function defaultFormatter(value: ValueType | undefined): string | ValueType | undefined {
-	return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1])
-		? value.join(" ~ ")
-		: value
-}
-
-export type TooltipType = "none"
-export type ValueType = number | string | ReadonlyArray<number | string>
-export type NameType = number | string
-export type Formatter<TValue extends ValueType = ValueType, TName extends NameType = NameType> = (
-	value: TValue | undefined,
-	name: TName | undefined,
-	item: Payload<TValue, TName>,
-	index: number,
-	payload: ReadonlyArray<Payload<TValue, TName>>,
-) => [JSX.Element, TName] | JSX.Element
-
-export interface Payload<TValue extends ValueType = ValueType, TName extends NameType = NameType> {
-	type?: TooltipType
-	color?: string
-	formatter?: Formatter<TValue, TName>
-	name?: TName
-	value?: TValue
-	unit?: JSX.Element
-	fill?: string
-	dataKey?: DataKey<unknown>
-	nameKey?: DataKey<unknown>
-	payload?: unknown
-	chartType?: string
-	stroke?: string
-	strokeDasharray?: string | number
-	strokeWidth?: number | string
-	className?: string
-	hide?: boolean
-	/**
-	 * The id of the graphical item that the data point belongs to
-	 */
-	graphicalItemId: string
-}
-
-/**
- * @inline
- */
-export type TooltipItemSorter<
-	TValue extends ValueType = ValueType,
-	TName extends NameType = NameType,
-> = "dataKey" | "value" | "name" | ((item: Payload<TValue, TName>) => number | string | undefined)
-
-export interface Props<TValue extends ValueType = ValueType, TName extends NameType = NameType> {
-	separator?: string
-	wrapperClassName?: string
-	labelClassName?: string
-	formatter?: Formatter<TValue, TName>
-	contentStyle?: JSX.CSSProperties
-	itemStyle?: JSX.CSSProperties
-	labelStyle?: JSX.CSSProperties
-	labelFormatter?: (
-		label: JSX.Element,
-		payload: ReadonlyArray<Payload<TValue, TName>>,
-	) => JSX.Element
-	label?: JSX.Element
-	payload?: ReadonlyArray<Payload<TValue, TName>>
-	itemSorter?: TooltipItemSorter<TValue, TName>
-	accessibilityLayer?: boolean
-}
-
-export const defaultDefaultTooltipContentProps = {
-	accessibilityLayer: false,
-	contentStyle: {
-		"background-color": "#fff",
-		border: "1px solid #ccc",
-		margin: 0,
-		padding: "10px",
-		"white-space": "nowrap",
-	},
-	itemStyle: {
-		color: "#000",
-		display: "block",
-		"padding-bottom": "4px",
-		"padding-top": "4px",
-	},
-	labelStyle: {},
-	separator: " : ",
-} as const satisfies Partial<Props>
-
-function lodashLikeSortBy<T>(
-	array: ReadonlyArray<T>,
-	itemSorter: TooltipItemSorter | undefined,
-): ReadonlyArray<T> {
-	if (itemSorter == null) {
-		return array
-	}
-	return sortBy(array, itemSorter as (item: T) => string | number | undefined)
-}
-
-/**
- * This component is by default rendered inside the {@link Tooltip} component. You would not use it directly.
- *
- * You can use this component to customize the content of the tooltip,
- * or you can provide your own completely independent content.
- */
-export const DefaultTooltipContent = (props: Props): JSX.Element | null => {
-	const separator = () => props.separator ?? defaultDefaultTooltipContentProps.separator
-	const labelStyle = () => props.labelStyle ?? defaultDefaultTooltipContentProps.labelStyle
-	const accessibilityLayer = () =>
-		props.accessibilityLayer ?? defaultDefaultTooltipContentProps.accessibilityLayer
-
-	/* formatter can return string/number/JSX — the JSX slot accepts all */
-	const formatEntry = (
-		entry: TooltipPayloadEntry | null | undefined,
-		index: number,
-	): { name: unknown; value: unknown } | null => {
-		if (!entry || entry.type === "none") {
-			return null
-		}
-		const finalFormatter = entry.formatter ?? props.formatter ?? defaultFormatter
-		if (!finalFormatter) {
-			return { name: entry.name, value: entry.value }
-		}
-		const formatted = finalFormatter(entry.value, entry.name, entry, index, props.payload ?? [])
-		if (Array.isArray(formatted)) {
-			return { name: formatted[1], value: formatted[0] }
-		}
-		if (formatted != null) {
-			return { name: entry.name, value: formatted }
-		}
-		return null
-	}
-
-	const renderContent = (): JSX.Element | null => {
-		if (props.payload && props.payload.length) {
-			const listStyle: JSX.CSSProperties = { margin: 0, padding: 0 }
-
-			const sortedPayload: TooltipPayload = lodashLikeSortBy(props.payload, props.itemSorter)
-
-			return (
-				<ul class="recharts-tooltip-item-list" style={listStyle}>
-					<For each={sortedPayload as TooltipPayloadEntry[]}>
-						{(entry, i) => {
-							const item = createMemo(() => formatEntry(entry, i()))
-							const itemStyle = createMemo(
-								(): JSX.CSSProperties => ({
-									...defaultDefaultTooltipContentProps.itemStyle,
-									color: entry.color || defaultDefaultTooltipContentProps.itemStyle.color,
-									...props.itemStyle,
-								}),
-							)
-
-							return (
-								<Show when={item()}>
-									{(formatted) => (
-										<li class="recharts-tooltip-item" style={itemStyle()}>
-											<Show when={isNumOrStr(formatted().name)}>
-												<span class="recharts-tooltip-item-name">{formatted().name as JSX.Element}</span>
-												<span class="recharts-tooltip-item-separator">{separator()}</span>
-											</Show>
-											<span class="recharts-tooltip-item-value">{formatted().value as JSX.Element}</span>
-											<span class="recharts-tooltip-item-unit">{entry.unit || ""}</span>
-										</li>
-									)}
-								</Show>
-							)
-						}}
-					</For>
-				</ul>
-			)
-		}
-
-		return null
-	}
-
-	const finalStyle = (): JSX.CSSProperties => ({
-		...defaultDefaultTooltipContentProps.contentStyle,
-		...props.contentStyle,
-	})
-	const finalLabelStyle = (): JSX.CSSProperties => ({
-		margin: 0,
-		...labelStyle(),
-	})
-	const hasLabel = () => !isNullish(props.label)
-	const finalLabel = (): JSX.Element => {
-		if (
-			hasLabel() &&
-			props.labelFormatter &&
-			props.payload !== undefined &&
-			props.payload !== null
-		) {
-			return props.labelFormatter(props.label, props.payload)
-		}
-		return hasLabel() ? props.label : ""
-	}
-	const wrapperCN = () => clsx("recharts-default-tooltip", props.wrapperClassName)
-	const labelCN = () => clsx("recharts-tooltip-label", props.labelClassName)
-
-	const accessibilityAttributes = () =>
-		accessibilityLayer()
-			? {
-					"aria-live": "assertive" as const,
-					role: "status" as const,
-				}
-			: {}
-
-	return (
-		<div class={wrapperCN()} style={finalStyle()} {...accessibilityAttributes()}>
-			<p class={labelCN()} style={finalLabelStyle()}>
-				{typeof finalLabel() === "object" ? finalLabel() : `${finalLabel()}`}
-			</p>
-			{renderContent()}
-		</div>
-	)
-}