@octanejs/recharts 0.1.62 → 0.1.64

package/src/component/Text.tsrx

@@ -34,8 +34,10 @@ interface TextProps {
 }
 export type Props = Omit<SVGProps<SVGTextElement>, 'textAnchor' | 'verticalAnchor'> & TextProps;
 type CalculateWordsByLinesProps = Pick<Props, 'maxLines' | 'children' | 'style' | 'breakAll'>;
-type GetWordsByLinesProps =
-	Pick<Props, 'width' | 'scaleToFit' | 'children' | 'style' | 'breakAll' | 'maxLines'>;
+type GetWordsByLinesProps = Pick<
+	Props,
+	'width' | 'scaleToFit' | 'children' | 'style' | 'breakAll' | 'maxLines'
+>;
 // Port of component/Text.tsx — the SVG text renderer with word wrapping,
 // maxLines binary-search truncation, scaleToFit, and rotation. Measurement
 // runs through the vendored getStringSize (0×0 under SSR, so SSR renders the
@@ -66,12 +68,10 @@ const calculateWordWidths = ({
 				words = children.toString().split(BREAKING_SPACES);
 			}
 		}
-		const wordsWithComputedWidth = words.map(
-			(word) => ({
-				word,
-				width: getStringSize(word, style).width,
-			}),
-		);
+		const wordsWithComputedWidth = words.map((word) => ({
+			word,
+			width: getStringSize(word, style).width,
+		}));
 		const spaceWidth = breakAll ? 0 : getStringSize(' ', style).width;
 		return { wordsWithComputedWidth, spaceWidth };
 	} catch {
@@ -84,8 +84,9 @@ export function isValidTextAnchor(value: string | undefined): value is TextAncho
 }
 
 export function isRenderableText(val: unknown): val is RenderableText {
-	return isNullish(val) || typeof val === 'string' || typeof val === 'number' ||
-		typeof val === 'boolean';
+	return (
+		isNullish(val) || typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean'
+	);
 }
 
 const calculate = (
@@ -93,26 +94,28 @@ const calculate = (
 	lineWidth: number | string | undefined,
 	spaceWidth: number,
 	scaleToFit: boolean,
-): WordsWithWidth[] => words.reduce<WordsWithWidth[]>((result, { word, width }) => {
-	const currentLine = result[result.length - 1];
-	if (
-		currentLine && width != null &&
-			(lineWidth == null || scaleToFit ||
+): WordsWithWidth[] =>
+	words.reduce<WordsWithWidth[]>((result, { word, width }) => {
+		const currentLine = result[result.length - 1];
+		if (
+			currentLine &&
+			width != null &&
+			(lineWidth == null ||
+				scaleToFit ||
 				currentLine.width + width + spaceWidth < Number(lineWidth))
-	) {
-		// Word can be added to an existing line
-		currentLine.words.push(word);
-		currentLine.width += width + spaceWidth;
-	} else {
-		// Add first word to line or word is too long to scaleToFit on existing line
-		result.push({ words: [word], width });
-	}
-	return result;
-}, []);
+		) {
+			// Word can be added to an existing line
+			currentLine.words.push(word);
+			currentLine.width += width + spaceWidth;
+		} else {
+			// Add first word to line or word is too long to scaleToFit on existing line
+			result.push({ words: [word], width });
+		}
+		return result;
+	}, []);
 
-const findLongestLine = (words: ReadonlyArray<WordsWithWidth>) => words.reduce(
-	(a, b) => (a.width > b.width ? a : b),
-);
+const findLongestLine = (words: ReadonlyArray<WordsWithWidth>) =>
+	words.reduce((a, b) => (a.width > b.width ? a : b));
 
 const suffix = '…';
 
@@ -210,11 +213,8 @@ const calculateWordsByLines = (
 };
 
 const getWordsWithoutCalculate = (children: OctaneNode) => {
-	const words =
-		!isNullish(children) ? children.toString().split(BREAKING_SPACES) : [];
-	return [
-		{ words, width: undefined },
-	];
+	const words = !isNullish(children) ? children.toString().split(BREAKING_SPACES) : [];
+	return [{ words, width: undefined }];
 };
 
 export const getWordsByLines = ({
@@ -299,7 +299,12 @@ export function Text(outsideProps: Props) @{
 			break;
 		case 'middle':
 			startDy = reduceCSSCalc(
-				'calc(' + (wordsByLines.length - 1) / 2 + ' * -' + lineHeight + ' + (' + capHeight +
+				'calc(' +
+					(wordsByLines.length - 1) / 2 +
+					' * -' +
+					lineHeight +
+					' + (' +
+					capHeight +
 					' / 2))',
 			);
 			break;
@@ -330,15 +335,17 @@ export function Text(outsideProps: Props) @{
 		class={clsx('recharts-text', className)}
 		textAnchor={textAnchor}
 		fill={fill.includes('url') ? DEFAULT_FILL : fill}
-	>{wordsByLines.map((line, index) => {
-		const words = line.words.join(breakAll ? '' : ' ');
-		// duplicate words would cause duplicate keys — the index disambiguates
-		return <tspan
-			x={x}
-			dy={index === 0 ? startDy : lineHeight}
-			key={words + '-' + index}
-		>{words}</tspan>;
-	})}</text>
+	>
+		{wordsByLines.map((line, index) => {
+			const words = line.words.join(breakAll ? '' : ' ');
+			// duplicate words would cause duplicate keys — the index disambiguates
+			return (
+				<tspan x={x} dy={index === 0 ? startDy : lineHeight} key={words + '-' + index}>
+					{words}
+				</tspan>
+			);
+		})}
+	</text>
 }
 
 Text.displayName = 'Text';

package/src/component/Tooltip.tsrx

@@ -48,15 +48,14 @@ function defaultUniqBy(entry: Payload<ValueType, NameType>) {
 export type TooltipContentProps<
 	TValue extends ValueType = ValueType,
 	TName extends NameType = NameType,
-> =
-	TooltipProps<TValue, TName> & {
-		label?: string | number;
-		payload: TooltipPayload;
-		coordinate: Coordinate | undefined;
-		active: boolean;
-		accessibilityLayer: boolean;
-		activeIndex: TooltipIndex | undefined;
-	};
+> = TooltipProps<TValue, TName> & {
+	label?: string | number;
+	payload: TooltipPayload;
+	coordinate: Coordinate | undefined;
+	active: boolean;
+	accessibilityLayer: boolean;
+	activeIndex: TooltipIndex | undefined;
+};
 
 function renderContent<TValue extends ValueType, TName extends NameType>(
 	content: ContentType<TValue, TName> | undefined,
@@ -75,173 +74,180 @@ function renderContent<TValue extends ValueType, TName extends NameType>(
 type PropertiesReadFromContext =
 	'viewBox' | 'active' | 'payload' | 'coordinate' | 'label' | 'accessibilityLayer';
 
-export type TooltipProps<TValue extends ValueType = ValueType, TName extends NameType = NameType> =
-	Omit<DefaultTooltipContentProps<TValue, TName>, PropertiesReadFromContext> & {
-		/**
- * If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically.
- * If false, then Tooltip is never displayed.
- * If undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
- */
-		active?: boolean;
-		/**
- * This option allows the tooltip to extend beyond the viewBox of the chart itself.
- * @defaultValue {"x":false,"y":false}
- */
-		allowEscapeViewBox?: AllowInDimension;
-		/**
- * Specifies the duration of animation, the unit of this option is ms.
- * @defaultValue 400
- */
-		animationDuration?: AnimationDuration;
-		/**
- * The type of easing function.
- * @defaultValue ease
- */
-		animationEasing?: EasingInput;
-		/**
- * Tooltip always attaches itself to the "Tooltip" axis. Which axis is it? Depends on the layout:
- * - horizontal layout -> X axis
- * - vertical layout -> Y axis
- * - radial layout -> radial axis
- * - centric layout -> angle axis
- *
- * Tooltip will use the default axis for the layout, unless you specify an axisId.
- *
- * @defaultValue 0
- */
-		axisId?: AxisId;
-		/**
- * Renders the content of the tooltip.
- *
- * This should return HTML elements, not SVG elements.
- *
- * - If not set, the {@link DefaultTooltipContent} 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.
- *
- * @see {@link https://recharts.github.io/en-US/examples/CustomContentOfTooltip/ Example with custom content}
- */
-		content?: ContentType<TValue, TName>;
-		/**
- * The style of tooltip content which is a dom element.
- * @defaultValue {}
- */
-		contentStyle?: CSSProperties;
-		/**
- * If set false, no cursor will be drawn when tooltip is active.
- * If set a object, the option is the configuration of cursor.
- * If set a React element, the option is the custom react element of drawing cursor.
- * @defaultValue true
- */
-		cursor?: CursorDefinition;
-		defaultIndex?: number | TooltipIndex;
-		/**
- * When an item of the payload has value null or undefined, this item won't be displayed.
- * @defaultValue true
- */
-		filterNull?: boolean;
-		/**
- * Function to customize the value in the tooltip.
- * If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "name"
- */
-		formatter?: (value: TValue, name: TName, item: TooltipPayloadEntry, index: number, payload: TooltipPayload) => | OctaneNode
-		| [OctaneNode, OctaneNode];
-		/**
- * If true, the tooltip will display information about hidden series.
- * Defaults to false.
- * Interacting with the hide property of Area, Bar, Line, Scatter.
- *
- * @defaultValue false
- */
-		includeHidden?: boolean | undefined;
-		/**
- * If set false, animation of tooltip will be disabled.
- * If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
- * @defaultValue auto
- */
-		isAnimationActive?: boolean | 'auto';
-		/**
- * Sorts tooltip items.
- * Defaults to 'name' which means it sorts alphabetically by graphical item `name` property.
- * @defaultValue name
- */
-		itemSorter?: TooltipItemSorter;
-		/**
- * The style of default tooltip content item which is a li element.
- * @defaultValue {}
- */
-		itemStyle?: CSSProperties;
-		/**
- * The formatter function of label in tooltip.
- */
-		labelFormatter?: (label: any, payload: TooltipPayload) => OctaneNode;
-		/**
- * The style of default tooltip label which is a p element.
- * @defaultValue {}
- */
-		labelStyle?: CSSProperties;
-		/**
- * The offset size between the position of tooltip and the mouse cursor position.
- * When a number is provided, the same offset is applied to both x and y axes.
- *
- * When a Coordinate object is provided, you can specify different offsets for each axis (x and y as numbers)
- * @defaultValue 10
- */
-		offset?: number | Coordinate;
-		payloadUniqBy?: UniqueOption<TooltipPayloadEntry>;
-		/**
- * If portal is defined, then Tooltip will use this element as a target
- * for rendering using React Portal: https://react.dev/reference/react-dom/createPortal
- *
- * If this is undefined then Tooltip renders inside the recharts-wrapper element.
- */
-		portal?: HTMLElement | null;
-		/**
- * If this field is set, the tooltip will be displayed at the specified position
- * regardless of the mouse position.
- *
- * You can set a single field (x or y) and let the other field be calculated automatically based
- * on the mouse position.
- */
-		position?: Partial<Coordinate>;
-		/**
- * @defaultValue {"x":false,"y":false}
- */
-		reverseDirection?: AllowInDimension;
-		/**
- * The separator between name and value.
- * @defaultValue ' : '
- */
-		separator?: string;
-		/**
- * Defines whether the tooltip is reacting to the current data point,
- * or to all data points at the current axis coordinate.
- *
- * - `true`: tooltip will appear on top of all bars on an axis tick.
- * - `false`: tooltip will appear on individual bars.
- *
- * Different chart types allow different modes, and have different defaults.
- *
- * @see {@link https://github.com/recharts/recharts/wiki/Tooltip-event-type-and-shared-prop Tooltip event type and shared prop wiki page}
- */
-		shared?: boolean;
-		/**
- * If `hover` then the Tooltip shows on mouse enter and hides on mouse leave.
- *
- * If `click` then the Tooltip shows after clicking and stays active.
- *
- * @defaultValue hover
- */
-		trigger?: TooltipTrigger;
-		/**
- * @defaultValue false
- */
-		useTranslate3d?: boolean;
-		/**
- * CSS styles to be applied to the wrapper `div` element.
- */
-		wrapperStyle?: CSSProperties;
-	};
+export type TooltipProps<
+	TValue extends ValueType = ValueType,
+	TName extends NameType = NameType,
+> = Omit<DefaultTooltipContentProps<TValue, TName>, PropertiesReadFromContext> & {
+	/**
+	 * If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically.
+	 * If false, then Tooltip is never displayed.
+	 * If undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
+	 */
+	active?: boolean;
+	/**
+	 * This option allows the tooltip to extend beyond the viewBox of the chart itself.
+	 * @defaultValue {"x":false,"y":false}
+	 */
+	allowEscapeViewBox?: AllowInDimension;
+	/**
+	 * Specifies the duration of animation, the unit of this option is ms.
+	 * @defaultValue 400
+	 */
+	animationDuration?: AnimationDuration;
+	/**
+	 * The type of easing function.
+	 * @defaultValue ease
+	 */
+	animationEasing?: EasingInput;
+	/**
+	 * Tooltip always attaches itself to the "Tooltip" axis. Which axis is it? Depends on the layout:
+	 * - horizontal layout -> X axis
+	 * - vertical layout -> Y axis
+	 * - radial layout -> radial axis
+	 * - centric layout -> angle axis
+	 *
+	 * Tooltip will use the default axis for the layout, unless you specify an axisId.
+	 *
+	 * @defaultValue 0
+	 */
+	axisId?: AxisId;
+	/**
+	 * Renders the content of the tooltip.
+	 *
+	 * This should return HTML elements, not SVG elements.
+	 *
+	 * - If not set, the {@link DefaultTooltipContent} 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.
+	 *
+	 * @see {@link https://recharts.github.io/en-US/examples/CustomContentOfTooltip/ Example with custom content}
+	 */
+	content?: ContentType<TValue, TName>;
+	/**
+	 * The style of tooltip content which is a dom element.
+	 * @defaultValue {}
+	 */
+	contentStyle?: CSSProperties;
+	/**
+	 * If set false, no cursor will be drawn when tooltip is active.
+	 * If set a object, the option is the configuration of cursor.
+	 * If set a React element, the option is the custom react element of drawing cursor.
+	 * @defaultValue true
+	 */
+	cursor?: CursorDefinition;
+	defaultIndex?: number | TooltipIndex;
+	/**
+	 * When an item of the payload has value null or undefined, this item won't be displayed.
+	 * @defaultValue true
+	 */
+	filterNull?: boolean;
+	/**
+	 * Function to customize the value in the tooltip.
+	 * If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "name"
+	 */
+	formatter?: (
+		value: TValue,
+		name: TName,
+		item: TooltipPayloadEntry,
+		index: number,
+		payload: TooltipPayload,
+	) => OctaneNode | [OctaneNode, OctaneNode];
+	/**
+	 * If true, the tooltip will display information about hidden series.
+	 * Defaults to false.
+	 * Interacting with the hide property of Area, Bar, Line, Scatter.
+	 *
+	 * @defaultValue false
+	 */
+	includeHidden?: boolean | undefined;
+	/**
+	 * If set false, animation of tooltip will be disabled.
+	 * If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
+	 * @defaultValue auto
+	 */
+	isAnimationActive?: boolean | 'auto';
+	/**
+	 * Sorts tooltip items.
+	 * Defaults to 'name' which means it sorts alphabetically by graphical item `name` property.
+	 * @defaultValue name
+	 */
+	itemSorter?: TooltipItemSorter;
+	/**
+	 * The style of default tooltip content item which is a li element.
+	 * @defaultValue {}
+	 */
+	itemStyle?: CSSProperties;
+	/**
+	 * The formatter function of label in tooltip.
+	 */
+	labelFormatter?: (label: any, payload: TooltipPayload) => OctaneNode;
+	/**
+	 * The style of default tooltip label which is a p element.
+	 * @defaultValue {}
+	 */
+	labelStyle?: CSSProperties;
+	/**
+	 * The offset size between the position of tooltip and the mouse cursor position.
+	 * When a number is provided, the same offset is applied to both x and y axes.
+	 *
+	 * When a Coordinate object is provided, you can specify different offsets for each axis (x and y as numbers)
+	 * @defaultValue 10
+	 */
+	offset?: number | Coordinate;
+	payloadUniqBy?: UniqueOption<TooltipPayloadEntry>;
+	/**
+	 * If portal is defined, then Tooltip will use this element as a target
+	 * for rendering using React Portal: https://react.dev/reference/react-dom/createPortal
+	 *
+	 * If this is undefined then Tooltip renders inside the recharts-wrapper element.
+	 */
+	portal?: HTMLElement | null;
+	/**
+	 * If this field is set, the tooltip will be displayed at the specified position
+	 * regardless of the mouse position.
+	 *
+	 * You can set a single field (x or y) and let the other field be calculated automatically based
+	 * on the mouse position.
+	 */
+	position?: Partial<Coordinate>;
+	/**
+	 * @defaultValue {"x":false,"y":false}
+	 */
+	reverseDirection?: AllowInDimension;
+	/**
+	 * The separator between name and value.
+	 * @defaultValue ' : '
+	 */
+	separator?: string;
+	/**
+	 * Defines whether the tooltip is reacting to the current data point,
+	 * or to all data points at the current axis coordinate.
+	 *
+	 * - `true`: tooltip will appear on top of all bars on an axis tick.
+	 * - `false`: tooltip will appear on individual bars.
+	 *
+	 * Different chart types allow different modes, and have different defaults.
+	 *
+	 * @see {@link https://github.com/recharts/recharts/wiki/Tooltip-event-type-and-shared-prop Tooltip event type and shared prop wiki page}
+	 */
+	shared?: boolean;
+	/**
+	 * If `hover` then the Tooltip shows on mouse enter and hides on mouse leave.
+	 *
+	 * If `click` then the Tooltip shows after clicking and stays active.
+	 *
+	 * @defaultValue hover
+	 */
+	trigger?: TooltipTrigger;
+	/**
+	 * @defaultValue false
+	 */
+	useTranslate3d?: boolean;
+	/**
+	 * CSS styles to be applied to the wrapper `div` element.
+	 */
+	wrapperStyle?: CSSProperties;
+};
 
 const emptyPayload: TooltipPayload = [];
 
@@ -323,34 +329,32 @@ export function Tooltip(outsideProps: TooltipProps<ValueType, NameType>) {
 	const tooltipEventType = useTooltipEventType(shared);
 
 	const { activeIndex, isActive } =
-		useAppSelector(
-			(state) => selectIsTooltipActive(state, tooltipEventType, trigger, defaultIndexAsString),
-		) ??
-			{};
+		useAppSelector((state) =>
+			selectIsTooltipActive(state, tooltipEventType, trigger, defaultIndexAsString),
+		) ?? {};
 
-	const payloadFromRedux = useAppSelector(
-		(state) => selectTooltipPayload(state, tooltipEventType, trigger, defaultIndexAsString),
+	const payloadFromRedux = useAppSelector((state) =>
+		selectTooltipPayload(state, tooltipEventType, trigger, defaultIndexAsString),
 	);
 
-	const labelFromRedux = useAppSelector(
-		(state) => selectActiveLabel(state, tooltipEventType, trigger, defaultIndexAsString),
+	const labelFromRedux = useAppSelector((state) =>
+		selectActiveLabel(state, tooltipEventType, trigger, defaultIndexAsString),
 	);
 
-	const coordinate: Coordinate | undefined = useAppSelector(
-		(state) => selectActiveCoordinate(state, tooltipEventType, trigger, defaultIndexAsString),
+	const coordinate: Coordinate | undefined = useAppSelector((state) =>
+		selectActiveCoordinate(state, tooltipEventType, trigger, defaultIndexAsString),
 	);
 	const payload: TooltipPayload | undefined = payloadFromRedux;
 	const tooltipPortalFromContext = useTooltipPortal();
 	/*
- * The user can set `active=true` on the Tooltip in which case the Tooltip will stay always active,
- * or `active=false` in which case the Tooltip never shows.
- *
- * If the `active` prop is not defined then it will show and hide based on mouse or keyboard activity.
- */
+	 * The user can set `active=true` on the Tooltip in which case the Tooltip will stay always active,
+	 * or `active=false` in which case the Tooltip never shows.
+	 *
+	 * If the `active` prop is not defined then it will show and hide based on mouse or keyboard activity.
+	 */
 	const finalIsActive: boolean = activeFromProps ?? isActive ?? false;
 	const [lastBoundingBox, updateBoundingBox] = useElementOffset([payload, finalIsActive]);
-	const finalLabel =
-		tooltipEventType === 'axis' ? labelFromRedux : undefined;
+	const finalLabel = tooltipEventType === 'axis' ? labelFromRedux : undefined;
 
 	useTooltipChartSynchronisation(
 		tooltipEventType,
@@ -392,35 +396,42 @@ export function Tooltip(outsideProps: TooltipProps<ValueType, NameType>) {
 		accessibilityLayer,
 	};
 
-	const tooltipElement = <TooltipBoundingBox
-		allowEscapeViewBox={allowEscapeViewBox}
-		animationDuration={animationDuration}
-		animationEasing={animationEasing}
-		isAnimationActive={isAnimationActive}
-		active={finalIsActive}
-		coordinate={coordinate}
-		hasPayload={hasPayload}
-		offset={offset}
-		position={position}
-		reverseDirection={reverseDirection}
-		useTranslate3d={useTranslate3d}
-		viewBox={viewBox}
-		wrapperStyle={wrapperStyle}
-		lastBoundingBox={lastBoundingBox}
-		innerRef={updateBoundingBox}
-		hasPortalFromProps={Boolean(portalFromProps)}
-	>{renderContent(content, tooltipContentProps)}</TooltipBoundingBox>;
+	const tooltipElement = (
+		<TooltipBoundingBox
+			allowEscapeViewBox={allowEscapeViewBox}
+			animationDuration={animationDuration}
+			animationEasing={animationEasing}
+			isAnimationActive={isAnimationActive}
+			active={finalIsActive}
+			coordinate={coordinate}
+			hasPayload={hasPayload}
+			offset={offset}
+			position={position}
+			reverseDirection={reverseDirection}
+			useTranslate3d={useTranslate3d}
+			viewBox={viewBox}
+			wrapperStyle={wrapperStyle}
+			lastBoundingBox={lastBoundingBox}
+			innerRef={updateBoundingBox}
+			hasPortalFromProps={Boolean(portalFromProps)}
+		>
+			{renderContent(content, tooltipContentProps)}
+		</TooltipBoundingBox>
+	);
 
-	return <>
-		{/* Tooltip the HTML element renders through a React portal so that it escapes clipping, and it renders on top of everything else */}
-		{createPortal(tooltipElement, tooltipPortal)}
-		{finalIsActive &&
-			<Cursor
-				cursor={cursor}
-				tooltipEventType={tooltipEventType}
-				coordinate={coordinate}
-				payload={finalPayload}
-				index={activeIndex}
-			/>}
-	</>;
+	return (
+		<>
+			{/* Tooltip the HTML element renders through a React portal so that it escapes clipping, and it renders on top of everything else */}
+			{createPortal(tooltipElement, tooltipPortal)}
+			{finalIsActive && (
+				<Cursor
+					cursor={cursor}
+					tooltipEventType={tooltipEventType}
+					coordinate={coordinate}
+					payload={finalPayload}
+					index={activeIndex}
+				/>
+			)}
+		</>
+	);
 }