@octanejs/recharts 0.1.16 → 0.1.18

package/src/util/RadialBarUtils.tsrx

@@ -0,0 +1,29 @@
+import * as React from 'octane';
+import { RadialBarDataItem, RadialBarProps } from '../polar/RadialBar';
+import { Sector } from '../shape/Sector';
+import { ShapeAnimationProps } from './types';
+import { Shape } from './ActiveShapeUtils';
+
+export const defaultRadialBarShape = Sector;
+
+export function parseCornerRadius(cornerRadius: string | number | undefined): number | undefined {
+	if (typeof cornerRadius === 'string') {
+		return parseInt(cornerRadius, 10);
+	}
+
+	return cornerRadius;
+}
+
+export interface RadialBarSectorProps extends RadialBarDataItem, ShapeAnimationProps {
+	index: number;
+	isActive: boolean;
+}
+
+type RadialBarSectorComponentProps =
+	RadialBarSectorProps & {
+		option: Exclude<RadialBarProps['shape'], undefined> | RadialBarProps['activeShape'];
+	};
+
+export function RadialBarSector({ option, ...shapeProps }: RadialBarSectorComponentProps) {
+	return <Shape option={option} DefaultShape={defaultRadialBarShape} shapeProps={shapeProps} />;
+}

package/src/util/ScatterUtils.tsrx

@@ -0,0 +1,34 @@
+import * as React from 'octane';
+import { ActiveShape, ShapeAnimationProps, SymbolType } from './types';
+import { ScatterPointItem } from '../cartesian/Scatter';
+import { InnerSymbolsProp, Symbols } from '../shape/Symbols';
+import { Shape } from './ActiveShapeUtils';
+import { DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME } from './Constants';
+import { GraphicalItemId } from '../state/graphicalItemsSlice';
+
+export type ScatterShapeProps =
+	ScatterPointItem & ShapeAnimationProps & {
+		isActive: boolean;
+		index: number;
+		[DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: GraphicalItemId;
+	};
+
+type ScatterSymbolShapeProps = ScatterShapeProps & InnerSymbolsProp;
+
+function renderSymbols(props: ScatterSymbolShapeProps) {
+	return <Symbols {...props} />;
+}
+
+export function ScatterSymbol({ option, ...props }: {
+	option: ActiveShape<ScatterShapeProps & InnerSymbolsProp, SVGPathElement> | SymbolType;
+} & ScatterShapeProps) {
+	if (typeof option === 'string') {
+		return <Shape
+			option={<Symbols type={option} {...props} />}
+			DefaultShape={renderSymbols}
+			shapeProps={props}
+		/>;
+	}
+
+	return <Shape option={option} DefaultShape={renderSymbols} shapeProps={props} />;
+}

package/src/util/cursor/getCursorPoints.ts

@@ -0,0 +1,45 @@
+import { polarToCartesian } from '../PolarUtils';
+import {
+	Coordinate,
+	ChartOffsetInternal,
+	PolarCoordinate,
+	isPolarCoordinate,
+	CartesianLayout,
+	PolarLayout,
+} from '../types';
+import { RadialCursorPoints, getRadialCursorPoints } from './getRadialCursorPoints';
+
+export function getCursorPoints(
+	layout: CartesianLayout | PolarLayout,
+	activeCoordinate: Coordinate | PolarCoordinate,
+	offset: ChartOffsetInternal,
+): [Coordinate, Coordinate] | RadialCursorPoints | undefined {
+	if (layout === 'horizontal') {
+		return [
+			{ x: activeCoordinate.x, y: offset.top },
+			{ x: activeCoordinate.x, y: offset.top + offset.height },
+		];
+	}
+
+	if (layout === 'vertical') {
+		return [
+			{ x: offset.left, y: activeCoordinate.y },
+			{ x: offset.left + offset.width, y: activeCoordinate.y },
+		];
+	}
+
+	if (isPolarCoordinate(activeCoordinate)) {
+		if (layout === 'centric') {
+			const { cx, cy, innerRadius, outerRadius, angle } = activeCoordinate;
+			const innerPoint = polarToCartesian(cx, cy, innerRadius, angle);
+			const outerPoint = polarToCartesian(cx, cy, outerRadius, angle);
+			return [
+				{ x: innerPoint.x, y: innerPoint.y },
+				{ x: outerPoint.x, y: outerPoint.y },
+			];
+		}
+		return getRadialCursorPoints(activeCoordinate);
+	}
+
+	return undefined;
+}

package/src/util/cursor/getCursorRectangle.ts

@@ -0,0 +1,28 @@
+import { ChartCoordinate, ChartOffsetInternal, LayoutType } from '../types';
+
+export type CursorRectangle = {
+	stroke: string;
+	fill: string;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
+export function getCursorRectangle(
+	layout: LayoutType,
+	activeCoordinate: ChartCoordinate,
+	offset: ChartOffsetInternal,
+	tooltipAxisBandSize: number,
+): CursorRectangle {
+	const halfSize = tooltipAxisBandSize / 2;
+
+	return {
+		stroke: 'none',
+		fill: '#ccc',
+		x: layout === 'horizontal' ? activeCoordinate.x - halfSize : offset.left + 0.5,
+		y: layout === 'horizontal' ? offset.top + 0.5 : activeCoordinate.y - halfSize,
+		width: layout === 'horizontal' ? tooltipAxisBandSize : offset.width - 1,
+		height: layout === 'horizontal' ? offset.height - 1 : tooltipAxisBandSize,
+	};
+}

package/src/util/cursor/getRadialCursorPoints.ts

@@ -0,0 +1,31 @@
+import { polarToCartesian } from '../PolarUtils';
+import { Coordinate, PolarCoordinate } from '../types';
+
+export type RadialCursorPoints = {
+	points: [startPoint: Coordinate, endPoint: Coordinate];
+	cx?: number;
+	cy?: number;
+	radius?: number;
+	startAngle?: number;
+	endAngle?: number;
+};
+
+/**
+ * Only applicable for radial layouts
+ * @param {Object} activeCoordinate ChartCoordinate
+ * @returns {Object} RadialCursorPoints
+ */
+export function getRadialCursorPoints(activeCoordinate: PolarCoordinate): RadialCursorPoints {
+	const { cx, cy, radius, startAngle, endAngle } = activeCoordinate;
+	const startPoint = polarToCartesian(cx, cy, radius, startAngle);
+	const endPoint = polarToCartesian(cx, cy, radius, endAngle);
+
+	return {
+		points: [startPoint, endPoint],
+		cx,
+		cy,
+		radius,
+		startAngle,
+		endAngle,
+	};
+}

package/src/util/payload/getUniqPayload.ts

@@ -0,0 +1,28 @@
+import uniqBy from 'es-toolkit/compat/uniqBy';
+
+type UniqueFunc<T> = (entry: T) => unknown;
+
+/**
+ * This is configuration option that decides how to filter for unique values only:
+ *
+ * - `false` means "no filter"
+ * - `true` means "use recharts default filter"
+ * - function means "use return of this function as the default key"
+ */
+export type UniqueOption<T> = boolean | UniqueFunc<T>;
+
+export function getUniqPayload<T>(
+	payload: ReadonlyArray<T>,
+	option: UniqueOption<T> | undefined,
+	defaultUniqBy: UniqueFunc<T>,
+): ReadonlyArray<T> {
+	if (option === true) {
+		return uniqBy(payload, defaultUniqBy);
+	}
+
+	if (typeof option === 'function') {
+		return uniqBy(payload, option);
+	}
+
+	return payload;
+}

package/src/util/scale/CartesianScaleHelper.ts

@@ -0,0 +1,71 @@
+import { BandPosition, RechartsScale } from './RechartsScale';
+import { CategoricalDomainItem, Coordinate, NullableCoordinate } from '../types';
+
+export interface CartesianScaleHelper<
+	XDomain extends CategoricalDomainItem = CategoricalDomainItem,
+	YDomain extends CategoricalDomainItem = CategoricalDomainItem,
+> {
+	map(value: { x: XDomain; y: YDomain }, { position }: { position: BandPosition }): Coordinate;
+
+	mapWithFallback(
+		value: { x?: XDomain | null | undefined; y?: YDomain | null | undefined },
+		{ position, fallback }: { position?: BandPosition; fallback: 'rangeMin' | 'rangeMax' },
+	): Coordinate;
+
+	isInRange({ x, y }: Partial<NullableCoordinate>): boolean;
+}
+
+/**
+ * Groups X and Y scale functions together and provides helper methods.
+ */
+export class CartesianScaleHelperImpl<
+	XDomain extends CategoricalDomainItem = CategoricalDomainItem,
+	YDomain extends CategoricalDomainItem = CategoricalDomainItem,
+> implements CartesianScaleHelper<XDomain, YDomain> {
+	private xAxisScale: RechartsScale<XDomain>;
+
+	private yAxisScale: RechartsScale<YDomain>;
+
+	constructor({ x, y }: { x: RechartsScale<XDomain>; y: RechartsScale<YDomain> }) {
+		this.xAxisScale = x;
+		this.yAxisScale = y;
+	}
+
+	map(value: { x: XDomain; y: YDomain }, { position }: { position: BandPosition }): Coordinate {
+		return {
+			x: this.xAxisScale.map(value.x, { position }) ?? 0,
+			y: this.yAxisScale.map(value.y, { position }) ?? 0,
+		};
+	}
+
+	mapWithFallback(
+		value: { x?: XDomain | null | undefined; y?: YDomain | null | undefined },
+		{ position, fallback }: { position?: BandPosition; fallback: 'rangeMin' | 'rangeMax' },
+	): Coordinate {
+		let fallbackY: number, fallbackX: number;
+		if (fallback === 'rangeMin') {
+			fallbackY = this.yAxisScale.rangeMin();
+		} else if (fallback === 'rangeMax') {
+			fallbackY = this.yAxisScale.rangeMax();
+		} else {
+			fallbackY = 0;
+		}
+		if (fallback === 'rangeMin') {
+			fallbackX = this.xAxisScale.rangeMin();
+		} else if (fallback === 'rangeMax') {
+			fallbackX = this.xAxisScale.rangeMax();
+		} else {
+			fallbackX = 0;
+		}
+		return {
+			x: this.xAxisScale.map(value.x, { position }) ?? fallbackX,
+			y: this.yAxisScale.map(value.y, { position }) ?? fallbackY,
+		};
+	}
+
+	isInRange({ x, y }: Partial<NullableCoordinate>): boolean {
+		const xInRange = x == null || this.xAxisScale.isInRange(x);
+		const yInRange = y == null || this.yAxisScale.isInRange(y);
+		return xInRange && yInRange;
+	}
+}

package/src/util/tooltip/translate.ts

@@ -0,0 +1,168 @@
+import { clsx } from 'clsx';
+import { CSSProperties } from 'octane';
+import { isNumber } from '../DataUtils';
+import { Coordinate, CartesianViewBox, AllowInDimension } from '../types';
+
+export type Dimension2D = 'x' | 'y';
+
+const CSS_CLASS_PREFIX = 'recharts-tooltip-wrapper';
+
+const TOOLTIP_HIDDEN: CSSProperties = { visibility: 'hidden' };
+
+export function getTooltipCSSClassName({
+	coordinate,
+	translateX,
+	translateY,
+}: {
+	translateX: number | undefined;
+	translateY: number | undefined;
+	coordinate: Partial<Coordinate> | undefined;
+}): string {
+	return clsx(CSS_CLASS_PREFIX, {
+		[`${CSS_CLASS_PREFIX}-right`]:
+			isNumber(translateX) && coordinate && isNumber(coordinate.x) && translateX >= coordinate.x,
+		[`${CSS_CLASS_PREFIX}-left`]:
+			isNumber(translateX) && coordinate && isNumber(coordinate.x) && translateX < coordinate.x,
+		[`${CSS_CLASS_PREFIX}-bottom`]:
+			isNumber(translateY) && coordinate && isNumber(coordinate.y) && translateY >= coordinate.y,
+		[`${CSS_CLASS_PREFIX}-top`]:
+			isNumber(translateY) && coordinate && isNumber(coordinate.y) && translateY < coordinate.y,
+	});
+}
+
+export function getTooltipTranslateXY({
+	allowEscapeViewBox,
+	coordinate,
+	key,
+	offset,
+	position,
+	reverseDirection,
+	tooltipDimension,
+	viewBox,
+	viewBoxDimension,
+}: {
+	allowEscapeViewBox: AllowInDimension;
+	coordinate: Coordinate;
+	key: Dimension2D;
+	offset: number;
+	position: Partial<Coordinate> | undefined;
+	reverseDirection: AllowInDimension;
+	tooltipDimension: number;
+	viewBox: CartesianViewBox;
+	viewBoxDimension: number | undefined;
+}): number {
+	if (position && isNumber(position[key])) {
+		return position[key];
+	}
+
+	const negative = coordinate[key] - tooltipDimension - (offset > 0 ? offset : 0);
+	const positive = coordinate[key] + offset;
+
+	if (allowEscapeViewBox[key]) {
+		return reverseDirection[key] ? negative : positive;
+	}
+
+	const viewBoxKey = viewBox[key];
+	if (viewBoxKey == null) {
+		return 0;
+	}
+
+	if (reverseDirection[key]) {
+		const tooltipBoundary = negative;
+		const viewBoxBoundary = viewBoxKey;
+		if (tooltipBoundary < viewBoxBoundary) {
+			return Math.max(positive, viewBoxKey);
+		}
+		return Math.max(negative, viewBoxKey);
+	}
+
+	if (viewBoxDimension == null) {
+		return 0;
+	}
+	const tooltipBoundary = positive + tooltipDimension;
+	const viewBoxBoundary = viewBoxKey + viewBoxDimension;
+	if (tooltipBoundary > viewBoxBoundary) {
+		return Math.max(negative, viewBoxKey);
+	}
+	return Math.max(positive, viewBoxKey);
+}
+
+export function getTransformStyle({
+	translateX,
+	translateY,
+	useTranslate3d,
+}: {
+	useTranslate3d: boolean;
+	translateX: number;
+	translateY: number;
+}): CSSProperties {
+	return {
+		transform: useTranslate3d
+			? `translate3d(${translateX}px, ${translateY}px, 0)`
+			: `translate(${translateX}px, ${translateY}px)`,
+	};
+}
+
+export function getTooltipTranslate({
+	allowEscapeViewBox,
+	coordinate,
+	offsetTop,
+	offsetLeft,
+	position,
+	reverseDirection,
+	tooltipBox,
+	useTranslate3d,
+	viewBox,
+}: {
+	allowEscapeViewBox: AllowInDimension;
+	coordinate: Coordinate | undefined;
+	offsetTop: number;
+	offsetLeft: number;
+	position: Partial<Coordinate> | undefined;
+	reverseDirection: AllowInDimension;
+	tooltipBox: { width: number; height: number };
+	useTranslate3d: boolean;
+	viewBox: CartesianViewBox;
+}): { cssProperties: CSSProperties; cssClasses: string } {
+	let cssProperties: CSSProperties, translateX: number | undefined, translateY: number | undefined;
+	if (tooltipBox.height > 0 && tooltipBox.width > 0 && coordinate) {
+		translateX = getTooltipTranslateXY({
+			allowEscapeViewBox,
+			coordinate,
+			key: 'x',
+			offset: offsetLeft,
+			position,
+			reverseDirection,
+			tooltipDimension: tooltipBox.width,
+			viewBox,
+			viewBoxDimension: viewBox.width,
+		});
+
+		translateY = getTooltipTranslateXY({
+			allowEscapeViewBox,
+			coordinate,
+			key: 'y',
+			offset: offsetTop,
+			position,
+			reverseDirection,
+			tooltipDimension: tooltipBox.height,
+			viewBox,
+			viewBoxDimension: viewBox.height,
+		});
+		cssProperties = getTransformStyle({
+			translateX,
+			translateY,
+			useTranslate3d,
+		});
+	} else {
+		cssProperties = TOOLTIP_HIDDEN;
+	}
+	return {
+		cssProperties,
+		cssClasses: getTooltipCSSClassName({
+			translateX,
+			translateY,
+			coordinate,
+		}),
+	};
+}

package/src/util/types.ts

@@ -57,3 +57,6 @@ export function adaptEventsOfChild(
 	});
 	return out;
 }
+
+export const isNonEmptyArray = <T>(arr: ReadonlyArray<T> | null | undefined): arr is [T, ...T[]] =>
+	Array.isArray(arr) && arr.length > 0;

package/src/util/useElementOffset.ts

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useRef, useState } from 'octane';
+
+const EPS = 1;
+
+/**
+ * Stores the dimensions and position of a DOM element as returned by `getBoundingClientRect()`.
+ *
+ * Values are viewport-relative and may be fractional (subpixel precision).
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect}
+ */
+export type ElementOffset = {
+	/**
+	 * Height of an element as returned by `getBoundingClientRect()`.
+	 * This is the CSS height including padding and border, and may be a fractional value.
+	 *
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/height}
+	 */
+	height: number;
+	/**
+	 * Distance from the left edge of the viewport to the left edge of the element,
+	 * as returned by `getBoundingClientRect()`.
+	 *
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/left}
+	 */
+	left: number;
+	/**
+	 * Distance from the top edge of the viewport to the top edge of the element,
+	 * as returned by `getBoundingClientRect()`.
+	 *
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/top}
+	 */
+	top: number;
+	/**
+	 * Width of an element as returned by `getBoundingClientRect()`.
+	 * This is the CSS width including padding and border, and may be a fractional value.
+	 *
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/width}
+	 */
+	width: number;
+};
+
+/**
+ * Callback ref setter returned by {@link useElementOffset}.
+ *
+ * Pass this to a DOM element's `ref` prop to start observing its layout.
+ *
+ * @param node - the DOM element to observe, or `null` when the element unmounts
+ */
+export type SetElementOffset = (node: HTMLElement | null) => void;
+
+/**
+ * Checks whether two ElementOffset values differ by more than `EPS` (1px) in any dimension.
+ *
+ * @param a - the first ElementOffset to compare
+ * @param b - the second ElementOffset to compare
+ * @returns true if any dimension differs by more than 1px
+ */
+function hasSignificantChange(a: ElementOffset, b: ElementOffset): boolean {
+	return (
+		Math.abs(a.height - b.height) > EPS ||
+		Math.abs(a.left - b.left) > EPS ||
+		Math.abs(a.top - b.top) > EPS ||
+		Math.abs(a.width - b.width) > EPS
+	);
+}
+
+/**
+ * Reads the current bounding box of a DOM element using `getBoundingClientRect()`.
+ *
+ * @param node - the DOM element to measure
+ * @returns an ElementOffset with the element's current dimensions and viewport-relative position
+ */
+function readElementOffset(node: HTMLElement): ElementOffset {
+	const rect = node.getBoundingClientRect();
+	return {
+		height: rect.height,
+		left: rect.left,
+		top: rect.top,
+		width: rect.width,
+	};
+}
+
+/**
+ * Use this to listen to element layout changes.
+ *
+ * Very useful for reading actual sizes of DOM elements relative to the viewport.
+ *
+ * Uses ResizeObserver to automatically detect size changes of the observed element.
+ *
+ * @param extraDependencies use this to trigger new DOM dimensions read when any of these change. Good for things like payload and label, that will re-render something down in the children array, but you want to read the layout box of a parent.
+ * @returns [lastElementOffset, updateElementOffset] most recent value, and setter. Pass the setter to a DOM element ref like this: `<div ref={updateElementOffset}>`
+ */
+export function useElementOffset(
+	extraDependencies: ReadonlyArray<unknown> = [],
+): [ElementOffset, SetElementOffset] {
+	const [lastBoundingBox, setLastBoundingBox] = useState<ElementOffset>({
+		height: 0,
+		left: 0,
+		top: 0,
+		width: 0,
+	});
+	const observerRef = useRef<ResizeObserver | null>(null);
+	const lastBoundingBoxRef = useRef(lastBoundingBox);
+	lastBoundingBoxRef.current = lastBoundingBox;
+
+	const updateBoundingBox = useCallback(
+		(node: HTMLElement | null) => {
+			// Disconnect any previously active ResizeObserver
+			if (observerRef.current != null) {
+				observerRef.current.disconnect();
+				observerRef.current = null;
+			}
+
+			if (node != null) {
+				// Measure immediately on ref attach
+				const box = readElementOffset(node);
+				if (hasSignificantChange(box, lastBoundingBoxRef.current)) {
+					setLastBoundingBox(box);
+				}
+
+				// Set up ResizeObserver for future size changes
+				if (typeof ResizeObserver !== 'undefined') {
+					const observer = new ResizeObserver(() => {
+						const newBox = readElementOffset(node);
+						if (hasSignificantChange(newBox, lastBoundingBoxRef.current)) {
+							setLastBoundingBox(newBox);
+						}
+					});
+					observer.observe(node);
+					observerRef.current = observer;
+				}
+			}
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[...extraDependencies],
+	);
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return () => {
+			observerRef.current?.disconnect();
+		};
+	}, []);
+
+	return [lastBoundingBox, updateBoundingBox];
+}