@octanejs/recharts 0.1.16 → 0.1.18

package/src/component/DefaultTooltipContent.tsrx

@@ -0,0 +1,215 @@
+/**
+ * @fileOverview Default Tooltip Content
+ */
+
+import * as React from 'octane';
+import { CSSProperties, HTMLAttributes, ReactNode, SVGProps, type OctaneNode } from 'octane';
+import sortBy from 'es-toolkit/compat/sortBy';
+import { clsx } from 'clsx';
+import { isNullish, isNumOrStr } from '../util/DataUtils';
+import { DataKey } from '../util/types';
+import { TooltipPayload, TooltipPayloadEntry } from '../state/tooltipSlice';
+
+function defaultFormatter(value: ValueType | undefined): OctaneNode {
+	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>>) => | [OctaneNode, TName]
+	| OctaneNode;
+
+export interface Payload<
+	TValue extends ValueType = ValueType,
+	TName extends NameType = NameType,
+> extends Omit<SVGProps<SVGElement>, 'name'> {
+	type?: TooltipType;
+	color?: string;
+	formatter?: Formatter<TValue, TName>;
+	name?: TName;
+	value?: TValue;
+	unit?: ReactNode;
+	fill?: string;
+	dataKey?: DataKey<any>;
+	nameKey?: DataKey<any>;
+	payload?: any;
+	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?: CSSProperties;
+	itemStyle?: CSSProperties;
+	labelStyle?: CSSProperties;
+	labelFormatter?: (label: ReactNode, payload: ReadonlyArray<Payload<TValue, TName>>) => ReactNode;
+	label?: ReactNode;
+	payload?: ReadonlyArray<Payload<TValue, TName>>;
+	itemSorter?: TooltipItemSorter<TValue, TName>;
+	accessibilityLayer?: boolean;
+}
+
+export const defaultDefaultTooltipContentProps = {
+	separator: ' : ',
+	contentStyle: {
+		margin: 0,
+		padding: 10,
+		backgroundColor: '#fff',
+		border: '1px solid #ccc',
+		whiteSpace: 'nowrap',
+	},
+	itemStyle: {
+		display: 'block',
+		paddingTop: 4,
+		paddingBottom: 4,
+		color: '#000',
+	},
+	labelStyle: {},
+	accessibilityLayer: false,
+} as const satisfies Partial<Props<any, any>>;
+
+function lodashLikeSortBy<T>(
+	array: ReadonlyArray<T>,
+	itemSorter: TooltipItemSorter | undefined,
+): ReadonlyArray<T> {
+	if (itemSorter == null) {
+		return array;
+	}
+	// @ts-expect-error sortBy types somehow are returning a number type.
+	return sortBy(array, itemSorter);
+}
+
+/**
+ * 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) => {
+	const {
+		separator = defaultDefaultTooltipContentProps.separator,
+		contentStyle,
+		itemStyle,
+		labelStyle = defaultDefaultTooltipContentProps.labelStyle,
+		payload,
+		formatter,
+		itemSorter,
+		wrapperClassName,
+		labelClassName,
+		label,
+		labelFormatter,
+		accessibilityLayer = defaultDefaultTooltipContentProps.accessibilityLayer,
+	} = props;
+
+	const renderContent = () => {
+		if (payload && payload.length) {
+			const listStyle = { padding: 0, margin: 0 };
+
+			const sortedPayload: TooltipPayload = lodashLikeSortBy(payload, itemSorter);
+			const items = sortedPayload.map((entry: TooltipPayloadEntry, i: number) => {
+				if (!entry || entry.type === 'none') {
+					return null;
+				}
+
+				const finalFormatter: Formatter = entry.formatter || formatter || defaultFormatter;
+				const { value, name } = entry;
+				let finalValue: OctaneNode = value;
+				let finalName: OctaneNode = name;
+				if (finalFormatter) {
+					const formatted = finalFormatter(value, name, entry, i, payload);
+					if (Array.isArray(formatted)) {
+						[finalValue, finalName] = formatted;
+					} else if (formatted != null) {
+						finalValue = formatted;
+					} else {
+						return null;
+					}
+				}
+
+				const finalItemStyle = {
+					...defaultDefaultTooltipContentProps.itemStyle,
+					color: entry.color || defaultDefaultTooltipContentProps.itemStyle.color,
+					...itemStyle,
+				};
+
+				return <li
+					className="recharts-tooltip-item"
+					key={`tooltip-item-${i}`}
+					style={finalItemStyle}
+				>
+					{isNumOrStr(finalName)
+						? <span className="recharts-tooltip-item-name">{finalName}</span>
+						: null}
+					{isNumOrStr(finalName)
+						? <span className="recharts-tooltip-item-separator">{separator}</span>
+						: null}
+					<span className="recharts-tooltip-item-value">{finalValue}</span>
+					<span className="recharts-tooltip-item-unit">{entry.unit || ''}</span>
+				</li>;
+			});
+
+			return <ul className="recharts-tooltip-item-list" style={listStyle}>{items}</ul>;
+		}
+
+		return null;
+	};
+
+	const finalStyle: React.CSSProperties = {
+		...defaultDefaultTooltipContentProps.contentStyle,
+		...contentStyle,
+	};
+	const finalLabelStyle = {
+		margin: 0,
+		...labelStyle,
+	};
+	const hasLabel = !isNullish(label);
+	let finalLabel: ReactNode = hasLabel ? label : '';
+	const wrapperCN = clsx('recharts-default-tooltip', wrapperClassName);
+	const labelCN = clsx('recharts-tooltip-label', labelClassName);
+
+	if (hasLabel && labelFormatter && payload !== undefined && payload !== null) {
+		finalLabel = labelFormatter(label, payload);
+	}
+
+	const accessibilityAttributes =
+		accessibilityLayer
+			? {
+					role: 'status',
+					'aria-live': 'assertive',
+				} as HTMLAttributes<HTMLDivElement>
+			: {};
+
+	return <div className={wrapperCN} style={finalStyle} {...accessibilityAttributes}>
+		<p className={labelCN} style={finalLabelStyle}>
+			{React.isValidElement(finalLabel) ? finalLabel : `${finalLabel}`}
+		</p>
+		{renderContent()}
+	</div>;
+};

package/src/component/DefaultTooltipContent.tsrx.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @fileOverview Default Tooltip Content
+ */
+import * as React from 'octane';
+import { CSSProperties, ReactNode, SVGProps } from 'octane';
+import { DataKey } from '../util/types';
+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>>,
+) => [React.ReactNode, TName] | React.ReactNode;
+export interface Payload<
+	TValue extends ValueType = ValueType,
+	TName extends NameType = NameType,
+> extends Omit<SVGProps<SVGElement>, 'name'> {
+	type?: TooltipType;
+	color?: string;
+	formatter?: Formatter<TValue, TName>;
+	name?: TName;
+	value?: TValue;
+	unit?: ReactNode;
+	fill?: string;
+	dataKey?: DataKey<any>;
+	nameKey?: DataKey<any>;
+	payload?: any;
+	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?: CSSProperties;
+	itemStyle?: CSSProperties;
+	labelStyle?: CSSProperties;
+	labelFormatter?: (label: ReactNode, payload: ReadonlyArray<Payload<TValue, TName>>) => ReactNode;
+	label?: ReactNode;
+	payload?: ReadonlyArray<Payload<TValue, TName>>;
+	itemSorter?: TooltipItemSorter<TValue, TName>;
+	accessibilityLayer?: boolean;
+}
+export declare const defaultDefaultTooltipContentProps: {
+	readonly separator: ' : ';
+	readonly contentStyle: {
+		readonly margin: 0;
+		readonly padding: 10;
+		readonly backgroundColor: '#fff';
+		readonly border: '1px solid #ccc';
+		readonly whiteSpace: 'nowrap';
+	};
+	readonly itemStyle: {
+		readonly display: 'block';
+		readonly paddingTop: 4;
+		readonly paddingBottom: 4;
+		readonly color: '#000';
+	};
+	readonly labelStyle: {};
+	readonly accessibilityLayer: false;
+};
+/**
+ * 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 declare const DefaultTooltipContent: (props: Props) => React.JSX.Element;

package/src/component/Legend.tsrx

@@ -0,0 +1,302 @@
+import * as React from 'octane';
+import { CSSProperties, useLayoutEffect } from 'octane';
+import { createPortal } from 'octane';
+import { useLegendPortal } from '../context/legendPortalContext';
+import {
+	ContentType,
+	DefaultLegendContent,
+	LegendPayload,
+	Props as DefaultLegendContentProps,
+	VerticalAlignmentType,
+} from './DefaultLegendContent';
+
+import { LayoutType, Margin, Size } from '../util/types';
+import { getUniqPayload, UniqueOption } from '../util/payload/getUniqPayload';
+import { useLegendPayload } from '../context/legendPayloadContext';
+import { ElementOffset, useElementOffset } from '../util/useElementOffset';
+import { useChartHeight, useChartWidth, useMargin } from '../context/chartLayoutContext';
+import { LegendSettings, setLegendSettings, setLegendSize } from '../state/legendSlice';
+import { useAppDispatch } from '../state/hooks';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { propsAreEqual } from '../util/propsAreEqual';
+
+function defaultUniqBy(entry: LegendPayload) {
+	return entry.value;
+}
+
+type ContentProps =
+	Props & {
+		margin: Margin | undefined;
+		chartWidth: number;
+		chartHeight: number;
+		contextPayload: ReadonlyArray<LegendPayload>;
+	};
+
+function LegendContent(props: ContentProps) {
+	const { contextPayload, ...otherProps } = props;
+	const finalPayload = getUniqPayload(contextPayload, props.payloadUniqBy, defaultUniqBy);
+	const contentProps = {
+		...otherProps,
+		payload: finalPayload,
+	};
+
+	if (React.isValidElement(props.content)) {
+		return React.cloneElement(props.content, contentProps);
+	}
+	if (typeof props.content === 'function') {
+		return React.createElement(props.content as any, contentProps);
+	}
+
+	return <DefaultLegendContent {...contentProps} />;
+}
+
+type PositionInput = {
+	layout?: Props['layout'];
+	align?: Props['align'];
+	verticalAlign?: Props['verticalAlign'];
+};
+
+function getDefaultPosition(
+	style: CSSProperties | undefined,
+	props: PositionInput,
+	margin: Margin | undefined,
+	chartWidth: number,
+	chartHeight: number,
+	box: ElementOffset,
+) {
+	const { layout, align, verticalAlign } = props;
+	let hPos, vPos;
+
+	if (
+		!style ||
+			(style.left === undefined || style.left === null) &&
+				(style.right === undefined || style.right === null)
+	) {
+		if (align === 'center' && layout === 'vertical') {
+			hPos = { left: ((chartWidth || 0) - box.width) / 2 };
+		} else {
+			hPos = align === 'right'
+				? { right: margin && margin.right || 0 }
+				: { left: margin && margin.left || 0 };
+		}
+	}
+
+	if (
+		!style ||
+			(style.top === undefined || style.top === null) &&
+				(style.bottom === undefined || style.bottom === null)
+	) {
+		if (verticalAlign === 'middle') {
+			vPos = { top: ((chartHeight || 0) - box.height) / 2 };
+		} else {
+			vPos = verticalAlign === 'bottom'
+				? { bottom: margin && margin.bottom || 0 }
+				: { top: margin && margin.top || 0 };
+		}
+	}
+
+	return { ...hPos, ...vPos };
+}
+
+export type LegendItemSorter = 'value' | 'dataKey' | ((item: LegendPayload) => number | string);
+
+export type Props =
+	Omit<DefaultLegendContentProps, 'payload' | 'ref' | 'verticalAlign'> & {
+		/**
+ * 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 React element, this element will be cloned and extra props will be passed in.
+ * - 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;
+		/**
+ * CSS styles to be applied to the wrapper `div` element.
+ */
+		wrapperStyle?: 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 React Portal.
+ *
+ * If this is undefined then Legend renders inside the recharts-wrapper element.
+ *
+ * @see {@link https://react.dev/reference/react-dom/createPortal}
+ */
+		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;
+	};
+
+function LegendSettingsDispatcher({
+	align,
+	layout,
+	verticalAlign,
+	itemSorter,
+}: LegendSettings): null {
+	const dispatch = useAppDispatch();
+	useLayoutEffect(() => {
+		dispatch(setLegendSettings({ align, layout, verticalAlign, itemSorter }));
+	}, [dispatch, align, layout, verticalAlign, itemSorter]);
+	return null;
+}
+
+function LegendSizeDispatcher({ width, height }: Size): null {
+	const dispatch = useAppDispatch();
+	useLayoutEffect(() => {
+		dispatch(setLegendSize({ width, height }));
+	}, [dispatch, width, height]);
+
+	useLayoutEffect(() => {
+		return () => {
+			dispatch(setLegendSize({ width: 0, height: 0 }));
+		};
+	}, [dispatch]);
+	return null;
+}
+
+function getWidthOrHeight(
+	layout: LayoutType | 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: 'horizontal',
+	verticalAlign: 'bottom',
+} as const satisfies Partial<Props>;
+
+/**
+ * @consumes CartesianChartContext
+ * @consumes PolarChartContext
+ */
+function LegendImpl(outsideProps: Props) {
+	const props = resolveDefaultProps(outsideProps, legendDefaultProps);
+	const contextPayload = useLegendPayload();
+	const legendPortalFromContext = useLegendPortal();
+	const margin = useMargin();
+	const {
+		width: widthFromProps,
+		height: heightFromProps,
+		wrapperStyle,
+		portal: portalFromProps,
+	} = props;
+	// The contextPayload is not used directly inside the hook, but we need the onBBoxUpdate call
+	// when the payload changes, therefore it's here as a dependency.
+	const [lastBoundingBox, updateBoundingBox] = useElementOffset([contextPayload]);
+	const chartWidth = useChartWidth();
+	const chartHeight = useChartHeight();
+	if (chartWidth == null || chartHeight == null) {
+		return null;
+	}
+	const maxWidth = chartWidth - (margin?.left || 0) - (margin?.right || 0);
+	const widthOrHeight = getWidthOrHeight(props.layout, heightFromProps, widthFromProps, maxWidth);
+	// if the user supplies their own portal, only use their defined wrapper styles
+	const outerStyle: CSSProperties | undefined =
+		portalFromProps
+			? wrapperStyle
+			: {
+					position: 'absolute',
+					width: widthOrHeight?.width || widthFromProps || 'auto',
+					height: widthOrHeight?.height || heightFromProps || 'auto',
+					...getDefaultPosition(
+						wrapperStyle,
+						props,
+						margin,
+						chartWidth,
+						chartHeight,
+						lastBoundingBox,
+					),
+					...wrapperStyle,
+				};
+
+	const legendPortal = portalFromProps ?? legendPortalFromContext;
+
+	if (legendPortal == null || contextPayload == null) {
+		return null;
+	}
+
+	const legendElement = <div
+		className="recharts-legend-wrapper"
+		style={outerStyle}
+		ref={updateBoundingBox}
+	>
+		<LegendSettingsDispatcher
+			layout={props.layout}
+			align={props.align}
+			verticalAlign={props.verticalAlign}
+			itemSorter={props.itemSorter}
+		/>
+		{/* if we have a portal from props nothing should need the size of the legend */}
+		{!portalFromProps &&
+			<LegendSizeDispatcher width={lastBoundingBox.width} height={lastBoundingBox.height} />}
+		<LegendContent
+			{...props}
+			{...widthOrHeight}
+			margin={margin}
+			chartWidth={chartWidth}
+			chartHeight={chartHeight}
+			contextPayload={contextPayload}
+		/>
+	</div>;
+
+	return createPortal(legendElement, legendPortal);
+}
+
+export const Legend = React.memo(LegendImpl, propsAreEqual);
+
+Legend.displayName = 'Legend';

package/src/component/Legend.tsrx.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'octane';
+import { CSSProperties } from 'octane';
+import {
+	ContentType,
+	LegendPayload,
+	Props as DefaultLegendContentProps,
+	VerticalAlignmentType,
+} from './DefaultLegendContent';
+import { UniqueOption } from '../util/payload/getUniqPayload';
+import { ElementOffset } from '../util/useElementOffset';
+export type LegendItemSorter = 'value' | 'dataKey' | ((item: LegendPayload) => number | string);
+export type Props = Omit<DefaultLegendContentProps, 'payload' | 'ref' | 'verticalAlign'> & {
+	/**
+	 * 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 React element, this element will be cloned and extra props will be passed in.
+	 * - 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;
+	/**
+	 * CSS styles to be applied to the wrapper `div` element.
+	 */
+	wrapperStyle?: 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 React Portal.
+	 *
+	 * If this is undefined then Legend renders inside the recharts-wrapper element.
+	 *
+	 * @see {@link https://react.dev/reference/react-dom/createPortal}
+	 */
+	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;
+};
+export declare const legendDefaultProps: {
+	readonly align: 'center';
+	readonly iconSize: 14;
+	readonly inactiveColor: '#ccc';
+	readonly itemSorter: 'value';
+	readonly labelStyle: {};
+	readonly layout: 'horizontal';
+	readonly verticalAlign: 'bottom';
+};
+/**
+ * @consumes CartesianChartContext
+ * @consumes PolarChartContext
+ */
+declare function LegendImpl(outsideProps: Props): React.ReactPortal | null;
+export declare const Legend: React.MemoExoticComponent<typeof LegendImpl>;
+export {};