@octanejs/recharts 0.1.61 → 0.1.63

package/src/component/Label.tsrx

@@ -32,10 +32,9 @@ interface LabelProps extends ZIndexable {
 	id?: string;
 }
 export type Props = Omit<SVGProps<SVGTextElement>, 'viewBox'> & LabelProps;
-type PropsWithDefaults =
-	Props & {
-		offset: number;
-	};
+type PropsWithDefaults = Props & {
+	offset: number;
+};
 export type ImplicitLabelType =
 	| boolean
 	| string
@@ -80,33 +79,34 @@ import { getCartesianPosition } from '../cartesian/getCartesianPosition';
 
 const CartesianLabelContext = createContext<TrapezoidViewBox | null>(null);
 
-export function CartesianLabelContextProvider(props: TrapezoidViewBox & {
-	children: OctaneNode;
-}) @{
+export function CartesianLabelContextProvider(
+	props: TrapezoidViewBox & {
+		children: OctaneNode;
+	},
+) @{
 	const { x, y, upperWidth, lowerWidth, width, height, children } = props;
-	const viewBox = useMemo(() => ({ x, y, upperWidth, lowerWidth, width, height }), [
-		x,
-		y,
-		upperWidth,
-		lowerWidth,
-		width,
-		height,
-	]);
+	const viewBox = useMemo(
+		() => ({ x, y, upperWidth, lowerWidth, width, height }),
+		[x, y, upperWidth, lowerWidth, width, height],
+	);
 	<CartesianLabelContext value={viewBox}>{children}</CartesianLabelContext>
 }
 
 function useCartesianLabelContext() {
 	const labelChildContext = useContext(CartesianLabelContext);
 	const chartContext = useViewBox();
-	return labelChildContext ||
-		(chartContext ? cartesianViewBoxToTrapezoid(chartContext) : undefined);
+	return (
+		labelChildContext || (chartContext ? cartesianViewBoxToTrapezoid(chartContext) : undefined)
+	);
 }
 
 const PolarLabelContext = createContext<PolarViewBoxRequired | null>(null);
 
-export function PolarLabelContextProvider(props: PolarViewBoxRequired & {
-	children: OctaneNode;
-}) @{
+export function PolarLabelContextProvider(
+	props: PolarViewBoxRequired & {
+		children: OctaneNode;
+	},
+) @{
 	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise, children } = props;
 	const viewBox = useMemo(
 		() => ({ cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise }),
@@ -151,8 +151,7 @@ function renderRadialLabel(
 	const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise } = viewBox;
 	const radius = (innerRadius + outerRadius) / 2;
 	const deltaAngle = getDeltaAngle(startAngle, endAngle);
-	const sign =
-		deltaAngle >= 0 ? 1 : -1;
+	const sign = deltaAngle >= 0 ? 1 : -1;
 	let labelAngle, direction;
 	switch (position) {
 		case 'insideStart':
@@ -174,24 +173,33 @@ function renderRadialLabel(
 	const startPoint = polarToCartesian(cx, cy, radius, labelAngle);
 	const endPoint = polarToCartesian(cx, cy, radius, labelAngle + (direction ? 1 : -1) * 359);
 	const path =
-		'M' + startPoint.x + ',' + startPoint.y + '\n    A' + radius + ',' + radius + ',0,1,' +
-			(direction ? 0 : 1) +
-			',\n    ' +
-			endPoint.x +
-			',' +
+		'M' +
+		startPoint.x +
+		',' +
+		startPoint.y +
+		'\n    A' +
+		radius +
+		',' +
+		radius +
+		',0,1,' +
+		(direction ? 0 : 1) +
+		',\n    ' +
+		endPoint.x +
+		',' +
 		endPoint.y;
-	const id =
-		isNullish(labelProps.id) ? uniqueId('recharts-radial-line-') : labelProps.id;
-	return <text
-		{...attrs}
-		dominantBaseline="central"
-		class={clsx('recharts-radial-bar-label', className)}
-	>
-		<defs>
-			<path id={id} d={path} />
-		</defs>
-		<textPath xlinkHref={'#' + id}>{label}</textPath>
-	</text>;
+	const id = isNullish(labelProps.id) ? uniqueId('recharts-radial-line-') : labelProps.id;
+	return (
+		<text
+			{...attrs}
+			dominantBaseline="central"
+			class={clsx('recharts-radial-bar-label', className)}
+		>
+			<defs>
+				<path id={id} d={path} />
+			</defs>
+			<textPath xlinkHref={'#' + id}>{label}</textPath>
+		</text>
+	);
 }
 
 const getAttrsOfPolarLabel = (
@@ -270,7 +278,7 @@ export function Label(outerProps: Props) {
 
 	// position 'center' prefers the cartesian box (recharts#6030 quick fix).
 	const resolvedViewBox =
-		position === 'center' ? cartesianViewBox : polarViewBox ?? cartesianViewBox;
+		position === 'center' ? cartesianViewBox : (polarViewBox ?? cartesianViewBox);
 	let viewBox, label, positionAttrs: LabelPositionAttributes;
 	if (viewBoxFromProps == null) {
 		viewBox = resolvedViewBox;
@@ -282,8 +290,10 @@ export function Label(outerProps: Props) {
 	const cartesianBox = polarViewBoxToTrapezoid(viewBox);
 	if (
 		!viewBox ||
-			isNullish(value) && isNullish(children) && !isValidElement(content) &&
-				typeof content !== 'function'
+		(isNullish(value) &&
+			isNullish(children) &&
+			!isValidElement(content) &&
+			typeof content !== 'function')
 	) {
 		return null;
 	}
@@ -327,16 +337,22 @@ export function Label(outerProps: Props) {
 			...(cartesianResult.height !== undefined ? { height: cartesianResult.height } : {}),
 		};
 	}
-	return <ZIndexLayer zIndex={props.zIndex}>
-		<Text
-			ref={labelRef}
-			className={clsx('recharts-label', className)}
-			{...attrs}
-			{...positionAttrs}
-			textAnchor={isValidTextAnchor(attrs.textAnchor) ? attrs.textAnchor : positionAttrs.textAnchor}
-			breakAll={textBreakAll}
-		>{label}</Text>
-	</ZIndexLayer>;
+	return (
+		<ZIndexLayer zIndex={props.zIndex}>
+			<Text
+				ref={labelRef}
+				className={clsx('recharts-label', className)}
+				{...attrs}
+				{...positionAttrs}
+				textAnchor={
+					isValidTextAnchor(attrs.textAnchor) ? attrs.textAnchor : positionAttrs.textAnchor
+				}
+				breakAll={textBreakAll}
+			>
+				{label}
+			</Text>
+		</ZIndexLayer>
+	);
 }
 
 Label.displayName = 'Label';
@@ -380,9 +396,7 @@ export function CartesianLabelFromLabelProp(props: {
 	return parseLabel(label, viewBox, labelRef) || null;
 }
 
-export function PolarLabelFromLabelProp(props: {
-	label: ImplicitLabelType | undefined;
-}) {
+export function PolarLabelFromLabelProp(props: { label: ImplicitLabelType | undefined }) {
 	const { label } = props;
 	const viewBox = usePolarLabelContext();
 	return parseLabel(label, viewBox) || null;

package/src/component/LabelList.tsrx

@@ -26,8 +26,10 @@ export interface PolarLabelListEntry extends LabelListEntry {
 }
 interface LabelListProps extends ZIndexable {
 	id?: string;
-	valueAccessor?: (entry: | CartesianLabelListEntry
-	| PolarLabelListEntry, index: number) => RenderableText;
+	valueAccessor?: (
+		entry: CartesianLabelListEntry | PolarLabelListEntry,
+		index: number,
+	) => RenderableText;
 	clockWise?: boolean;
 	dataKey?: DataKey<any>;
 	content?: LabelContentType;
@@ -86,35 +88,38 @@ export function LabelList(labelListProps: Props) {
 	if (!data || !data.length) {
 		return null;
 	}
-	return <ZIndexLayer zIndex={zIndex ?? DefaultZIndexes.label}>
-		<Layer className="recharts-label-list">{data.map((entry, index) => {
-			const value =
-				isNullish(dataKey)
-					? valueAccessor(entry, index)
-					: getValueByDataKey(entry.payload, dataKey);
-			const idProps = isNullish(id) ? {} : { id: id + '-' + index };
-			return <Label
-				key={'label-' + index}
-				{...svgPropertiesAndEvents(entry)}
-				{...others}
-				{...idProps}
-				fill={restProps.fill ?? entry.fill}
-				parentViewBox={entry.parentViewBox}
-				value={value}
-				textBreakAll={textBreakAll}
-				viewBox={entry.viewBox}
-				index={index}
-				zIndex={0}
-			/>;
-		})}</Layer>
-	</ZIndexLayer>;
+	return (
+		<ZIndexLayer zIndex={zIndex ?? DefaultZIndexes.label}>
+			<Layer className="recharts-label-list">
+				{data.map((entry, index) => {
+					const value = isNullish(dataKey)
+						? valueAccessor(entry, index)
+						: getValueByDataKey(entry.payload, dataKey);
+					const idProps = isNullish(id) ? {} : { id: id + '-' + index };
+					return (
+						<Label
+							key={'label-' + index}
+							{...svgPropertiesAndEvents(entry)}
+							{...others}
+							{...idProps}
+							fill={restProps.fill ?? entry.fill}
+							parentViewBox={entry.parentViewBox}
+							value={value}
+							textBreakAll={textBreakAll}
+							viewBox={entry.viewBox}
+							index={index}
+							zIndex={0}
+						/>
+					);
+				})}
+			</Layer>
+		</ZIndexLayer>
+	);
 }
 
 LabelList.displayName = 'LabelList';
 
-export function LabelListFromLabelProp(props: {
-	label?: ImplicitLabelListType;
-}) {
+export function LabelListFromLabelProp(props: { label?: ImplicitLabelListType }) {
 	const { label } = props;
 	if (!label) {
 		return null;

package/src/component/Legend.tsrx

@@ -25,13 +25,12 @@ function defaultUniqBy(entry: LegendPayload) {
 	return entry.value;
 }
 
-type ContentProps =
-	Props & {
-		margin: Margin | undefined;
-		chartWidth: number;
-		chartHeight: number;
-		contextPayload: ReadonlyArray<LegendPayload>;
-	};
+type ContentProps = Props & {
+	margin: Margin | undefined;
+	chartWidth: number;
+	chartHeight: number;
+	contextPayload: ReadonlyArray<LegendPayload>;
+};
 
 function LegendContent(props: ContentProps) {
 	const { contextPayload, ...otherProps } = props;
@@ -70,29 +69,31 @@ function getDefaultPosition(
 
 	if (
 		!style ||
-			(style.left === undefined || style.left === null) &&
-				(style.right === undefined || style.right === null)
+		((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 };
+			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)
+		((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 };
+			vPos =
+				verticalAlign === 'bottom'
+					? { bottom: (margin && margin.bottom) || 0 }
+					: { top: (margin && margin.top) || 0 };
 		}
 	}
 
@@ -101,68 +102,67 @@ function getDefaultPosition(
 
 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 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,
@@ -247,23 +247,22 @@ function LegendImpl(outsideProps: Props) {
 	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 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;
 
@@ -271,36 +270,34 @@ function LegendImpl(outsideProps: Props) {
 		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>;
+	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) as
-	typeof LegendImpl & {
-		displayName?: string;
-	};
+export const Legend = React.memo(LegendImpl, propsAreEqual) as typeof LegendImpl & {
+	displayName?: string;
+};
 
 Legend.displayName = 'Legend';

package/src/component/ResponsiveContainer.tsrx

@@ -66,9 +66,11 @@ function ResponsiveContainerContextProvider({
 	if (!isPositiveNumber(size.width) || !isPositiveNumber(size.height)) {
 		return null;
 	}
-	return <ResponsiveContainerContext
-		value={size as ResponsiveContainerDimensions}
-	>{children}</ResponsiveContainerContext>;
+	return (
+		<ResponsiveContainerContext value={size as ResponsiveContainerDimensions}>
+			{children}
+		</ResponsiveContainerContext>
+	);
 }
 
 function SizeDetectorContainer(props: Props) @{
@@ -100,9 +102,8 @@ function SizeDetectorContainer(props: Props) @{
 	const setContainerSize = useCallback((newWidth: number, newHeight: number) => {
 		const containerWidth = Math.round(newWidth);
 		const containerHeight = Math.round(newHeight);
-		setSizes(
-			(previous) => previous.containerWidth === containerWidth &&
-			previous.containerHeight === containerHeight
+		setSizes((previous) =>
+			previous.containerWidth === containerWidth && previous.containerHeight === containerHeight
 				? previous
 				: { containerWidth, containerHeight },
 		);
@@ -147,7 +148,9 @@ function SizeDetectorContainer(props: Props) @{
 			<ResponsiveContainerContextProvider
 				width={calculated.calculatedWidth}
 				height={calculated.calculatedHeight}
-			>{children}</ResponsiveContainerContextProvider>
+			>
+				{children}
+			</ResponsiveContainerContextProvider>
 		</div>
 	</div>
 }
@@ -165,10 +168,14 @@ export function ResponsiveContainer(props: Props) {
 		maxHeight: props.maxHeight,
 	});
 	if (isNumber(calculated.calculatedWidth) && isNumber(calculated.calculatedHeight)) {
-		return <ResponsiveContainerContextProvider
-			width={calculated.calculatedWidth}
-			height={calculated.calculatedHeight}
-		>{props.children}</ResponsiveContainerContextProvider>;
+		return (
+			<ResponsiveContainerContextProvider
+				width={calculated.calculatedWidth}
+				height={calculated.calculatedHeight}
+			>
+				{props.children}
+			</ResponsiveContainerContextProvider>
+		);
 	}
 	return <SizeDetectorContainer {...props} width={defaults.width} height={defaults.height} />;
 }