@octanejs/recharts 0.1.62 → 0.1.63

package/src/cartesian/XAxis.tsrx

@@ -30,11 +30,12 @@ interface XAxisProps<DataPointType = any, DataValueType = any> extends Omit<
 	mirror?: boolean;
 	orientation?: XAxisOrientation;
 	domain?: AxisDomain;
-	scale?: | ScaleType
-	| CustomScaleDefinition
-	| CustomScaleDefinition<string>
-	| CustomScaleDefinition<number>
-	| CustomScaleDefinition<Date>;
+	scale?:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
 	tick?: TickProp<XAxisTickContentProps>;
 	ticks?: ReadonlyArray<AxisTick>;
 	padding?: XAxisPadding;
@@ -45,13 +46,15 @@ interface XAxisProps<DataPointType = any, DataValueType = any> extends Omit<
 	letterSpacing?: number | string;
 	niceTicks?: NiceTicksAlgorithm;
 }
-export type Props<DataPointType = any, DataValueType = any> =
-	Omit<
-		PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
-		'scale' | 'ref'
-	> & XAxisProps<DataPointType, DataValueType>;
-type PropsWithDefaults<DataPointType = any, DataValueType = any> =
-	RequiresDefaultProps<Props<DataPointType, DataValueType>, typeof xAxisDefaultProps>;
+export type Props<DataPointType = any, DataValueType = any> = Omit<
+	PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
+	'scale' | 'ref'
+> &
+	XAxisProps<DataPointType, DataValueType>;
+type PropsWithDefaults<DataPointType = any, DataValueType = any> = RequiresDefaultProps<
+	Props<DataPointType, DataValueType>,
+	typeof xAxisDefaultProps
+>;
 // Port of cartesian/XAxis.tsx — registers x-axis settings in the store and
 // renders through CartesianAxis with store-synchronized settings.
 import { useLayoutEffect, useMemo, useRef, memo } from 'octane';
@@ -73,9 +76,11 @@ import { axisPropsAreEqual } from '../util/axisPropsAreEqual';
 import { useCartesianChartLayout } from '../context/chartLayoutContext.ts';
 import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
 
-function SetXAxisSettings(props: Omit<XAxisSettings, 'type'> & {
-	type: AxisDomainTypeInput;
-}) {
+function SetXAxisSettings(
+	props: Omit<XAxisSettings, 'type'> & {
+		type: AxisDomainTypeInput;
+	},
+) {
 	const dispatch = useAppDispatch();
 	const prevSettingsRef = useRef<XAxisSettings | null>(null);
 	const layout = useCartesianChartLayout();
@@ -118,34 +123,36 @@ function XAxisImpl(props: PropsWithDefaults) {
 	const viewBox = useAppSelector(selectAxisViewBox);
 	const isPanorama = useIsPanorama();
 	const axisType = 'xAxis';
-	const cartesianTickItems = useAppSelector(
-		(state) => selectTicksOfAxis(state, axisType, xAxisId, isPanorama),
+	const cartesianTickItems = useAppSelector((state) =>
+		selectTicksOfAxis(state, axisType, xAxisId, isPanorama),
 	);
 	const axisSize = useAppSelector((state) => selectXAxisSize(state, xAxisId));
 	const position = useAppSelector((state) => selectXAxisPosition(state, xAxisId));
 	// Settings come back from the store (not props) so every component renders
 	// one consistent view of the axis (recharts#6257).
-	const synchronizedSettings = useAppSelector(
-		(state) => selectXAxisSettingsNoDefaults(state, xAxisId),
+	const synchronizedSettings = useAppSelector((state) =>
+		selectXAxisSettingsNoDefaults(state, xAxisId),
 	);
 	if (axisSize == null || position == null || synchronizedSettings == null) {
 		return null;
 	}
 	const { dangerouslySetInnerHTML, ticks, scale: _del, ...allOtherProps } = props;
 	const { id, scale: _del2, ...restSynchronizedSettings } = synchronizedSettings;
-	return <CartesianAxis
-		{...allOtherProps}
-		{...restSynchronizedSettings}
-		x={position.x}
-		y={position.y}
-		width={axisSize.width}
-		height={axisSize.height}
-		className={clsx('recharts-' + axisType + ' ' + axisType, className)}
-		viewBox={viewBox}
-		ticks={cartesianTickItems}
-		axisType={axisType}
-		axisId={xAxisId}
-	/>;
+	return (
+		<CartesianAxis
+			{...allOtherProps}
+			{...restSynchronizedSettings}
+			x={position.x}
+			y={position.y}
+			width={axisSize.width}
+			height={axisSize.height}
+			className={clsx('recharts-' + axisType + ' ' + axisType, className)}
+			viewBox={viewBox}
+			ticks={cartesianTickItems}
+			axisType={axisType}
+			axisId={xAxisId}
+		/>
+	);
 }
 
 export const xAxisDefaultProps = {

package/src/cartesian/YAxis.tsrx

@@ -31,11 +31,12 @@ interface YAxisProps<DataPointType = any, DataValueType = any> extends Omit<
 	axisLine?: boolean | SVGProps<SVGLineElement>;
 	type?: AxisDomainTypeInput;
 	domain?: AxisDomain;
-	scale?: | ScaleType
-	| CustomScaleDefinition
-	| CustomScaleDefinition<string>
-	| CustomScaleDefinition<number>
-	| CustomScaleDefinition<Date>;
+	scale?:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
 	yAxisId?: string | number;
 	tick?: TickProp<YAxisTickContentProps>;
 	ticks?: ReadonlyArray<AxisTick>;
@@ -50,13 +51,15 @@ interface YAxisProps<DataPointType = any, DataValueType = any> extends Omit<
 	letterSpacing?: number | string;
 	niceTicks?: NiceTicksAlgorithm;
 }
-export type Props<DataPointType = any, DataValueType = any> =
-	Omit<
-		PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
-		'scale' | 'ref'
-	> & YAxisProps<DataPointType, DataValueType>;
-type PropsWithDefaults<DataPointType = any, DataValueType = any> =
-	RequiresDefaultProps<Props<DataPointType, DataValueType>, typeof yAxisDefaultProps>;
+export type Props<DataPointType = any, DataValueType = any> = Omit<
+	PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
+	'scale' | 'ref'
+> &
+	YAxisProps<DataPointType, DataValueType>;
+type PropsWithDefaults<DataPointType = any, DataValueType = any> = RequiresDefaultProps<
+	Props<DataPointType, DataValueType>,
+	typeof yAxisDefaultProps
+>;
 // Port of cartesian/YAxis.tsx — registers y-axis settings in the store,
 // renders through CartesianAxis, and drives width="auto" via the axis
 // component's imperative getCalculatedWidth handle.
@@ -80,9 +83,11 @@ import { axisPropsAreEqual } from '../util/axisPropsAreEqual';
 import { useCartesianChartLayout } from '../context/chartLayoutContext.ts';
 import { getAxisTypeBasedOnLayout } from '../util/getAxisTypeBasedOnLayout';
 
-function SetYAxisSettings(props: Omit<YAxisSettings, 'type'> & {
-	type: AxisDomainTypeInput;
-}) {
+function SetYAxisSettings(
+	props: Omit<YAxisSettings, 'type'> & {
+		type: AxisDomainTypeInput;
+	},
+) {
 	const dispatch = useAppDispatch();
 	const prevSettingsRef = useRef<YAxisSettings | null>(null);
 	const layout = useCartesianChartLayout();
@@ -130,20 +135,23 @@ function YAxisImpl(props: PropsWithDefaults) {
 	const axisType = 'yAxis';
 	const axisSize: Size | undefined = useAppSelector((state) => selectYAxisSize(state, yAxisId));
 	const position = useAppSelector((state) => selectYAxisPosition(state, yAxisId));
-	const cartesianTickItems = useAppSelector(
-		(state) => selectTicksOfAxis(state, axisType, yAxisId, isPanorama),
+	const cartesianTickItems = useAppSelector((state) =>
+		selectTicksOfAxis(state, axisType, yAxisId, isPanorama),
 	);
 	// Settings come back from the store (not props) so every component renders
 	// one consistent view of the axis (recharts#6257).
-	const synchronizedSettings = useAppSelector(
-		(state) => selectYAxisSettingsNoDefaults(state, yAxisId),
+	const synchronizedSettings = useAppSelector((state) =>
+		selectYAxisSettingsNoDefaults(state, yAxisId),
 	);
 	useLayoutEffect(() => {
 		// No dynamic width calculation when width !== 'auto', or when a
 		// function/element label is used.
 		if (
-			width !== 'auto' || !axisSize || isLabelContentAFunction(label) || isValidElement(label) ||
-				synchronizedSettings == null
+			width !== 'auto' ||
+			!axisSize ||
+			isLabelContentAFunction(label) ||
+			isValidElement(label) ||
+			synchronizedSettings == null
 		) {
 			return;
 		}
@@ -162,22 +170,24 @@ function YAxisImpl(props: PropsWithDefaults) {
 	}
 	const { dangerouslySetInnerHTML, ticks, scale: _del, ...allOtherProps } = props;
 	const { id, scale: _del2, ...restSynchronizedSettings } = synchronizedSettings;
-	return <CartesianAxis
-		{...allOtherProps}
-		{...restSynchronizedSettings}
-		ref={cartesianAxisRef}
-		labelRef={labelRef}
-		x={position.x}
-		y={position.y}
-		tickTextProps={width === 'auto' ? { width: undefined } : { width }}
-		width={axisSize.width}
-		height={axisSize.height}
-		className={clsx('recharts-' + axisType + ' ' + axisType, className)}
-		viewBox={viewBox}
-		ticks={cartesianTickItems}
-		axisType={axisType}
-		axisId={yAxisId}
-	/>;
+	return (
+		<CartesianAxis
+			{...allOtherProps}
+			{...restSynchronizedSettings}
+			ref={cartesianAxisRef}
+			labelRef={labelRef}
+			x={position.x}
+			y={position.y}
+			tickTextProps={width === 'auto' ? { width: undefined } : { width }}
+			width={axisSize.width}
+			height={axisSize.height}
+			className={clsx('recharts-' + axisType + ' ' + axisType, className)}
+			viewBox={viewBox}
+			ticks={cartesianTickItems}
+			axisType={axisType}
+			axisId={yAxisId}
+		/>
+	);
 }
 
 export const yAxisDefaultProps = {

package/src/cartesian/ZAxis.tsrx

@@ -42,73 +42,74 @@ export interface Props<DataPointType = any, DataValueType = any> extends Omit<
 	'domain'
 > {
 	/**
- * The type of axis.
- *
- * `category`: Treats data as distinct values.
- * Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
- *
- * `number`: Treats data as continuous range.
- * Values that are numerically closer are placed closer together on the axis.
- *
- * @defaultValue number
- */
+	 * The type of axis.
+	 *
+	 * `category`: Treats data as distinct values.
+	 * Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
+	 *
+	 * `number`: Treats data as continuous range.
+	 * Values that are numerically closer are placed closer together on the axis.
+	 *
+	 * @defaultValue number
+	 */
 	type?: 'number' | 'category';
 	/**
- * The unique id of z-axis.
- *
- * @defaultValue 0
- */
+	 * The unique id of z-axis.
+	 *
+	 * @defaultValue 0
+	 */
 	zAxisId?: AxisId;
 	/**
- * The range of axis.
- * Unlike other axes, the range of z-axis is not informed by chart dimensions.
- *
- * @defaultValue [64,64]
- */
+	 * The range of axis.
+	 * Unlike other axes, the range of z-axis is not informed by chart dimensions.
+	 *
+	 * @defaultValue [64,64]
+	 */
 	range?: AxisRange;
 	/**
- * Specify the domain of axis when the axis is a number axis.
- *
- * If undefined, then the domain is calculated based on the data and dataKeys.
- *
- * The length of domain should be 2, and we will validate the values in domain.
- *
- * Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100',
- * or a function that accepts a single argument and returns a number.
- *
- * If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
- * If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
- *
- * @example <ZAxis type="number" domain={['dataMin', 'dataMax']} />
- * @example <ZAxis type="number" domain={[0, 'dataMax']} />
- * @example <ZAxis type="number" domain={['auto', 'auto']} />
- * @example <ZAxis type="number" domain={[0, 'dataMax + 1000']} />
- * @example <ZAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
- * @example <ZAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
- * @example <ZAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
- * @example <ZAxis type="number" domain={[0, 100]} allowDataOverflow />
- */
+	 * Specify the domain of axis when the axis is a number axis.
+	 *
+	 * If undefined, then the domain is calculated based on the data and dataKeys.
+	 *
+	 * The length of domain should be 2, and we will validate the values in domain.
+	 *
+	 * Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100',
+	 * or a function that accepts a single argument and returns a number.
+	 *
+	 * If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
+	 * If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
+	 *
+	 * @example <ZAxis type="number" domain={['dataMin', 'dataMax']} />
+	 * @example <ZAxis type="number" domain={[0, 'dataMax']} />
+	 * @example <ZAxis type="number" domain={['auto', 'auto']} />
+	 * @example <ZAxis type="number" domain={[0, 'dataMax + 1000']} />
+	 * @example <ZAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
+	 * @example <ZAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
+	 * @example <ZAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
+	 * @example <ZAxis type="number" domain={[0, 100]} allowDataOverflow />
+	 */
 	domain?: AxisDomain;
 	/**
- * Scale function determines how data values are mapped to visual values.
- * In other words, decided the mapping between data domain and coordinate range.
- *
- * If undefined, or 'auto', the scale function is created internally according to the type of axis and data.
- *
- * You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.
- *
- * @defaultValue auto
- * @example <ZAxis scale="log" />
- * @example
- * import { scaleLog } from 'd3-scale';
- * const scale = scaleLog().base(Math.E);
- * <ZAxis scale={scale} />
- */
-	scale?: | ScaleType
-	| CustomScaleDefinition
-	| CustomScaleDefinition<string>
-	| CustomScaleDefinition<number>
-	| CustomScaleDefinition<Date>;
+	 * Scale function determines how data values are mapped to visual values.
+	 * In other words, decided the mapping between data domain and coordinate range.
+	 *
+	 * If undefined, or 'auto', the scale function is created internally according to the type of axis and data.
+	 *
+	 * You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.
+	 *
+	 * @defaultValue auto
+	 * @example <ZAxis scale="log" />
+	 * @example
+	 * import { scaleLog } from 'd3-scale';
+	 * const scale = scaleLog().base(Math.E);
+	 * <ZAxis scale={scale} />
+	 */
+	scale?:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
 }
 
 export const zAxisDefaultProps = {
@@ -128,20 +129,22 @@ export function ZAxis<DataPointType = any, DataValueType = any>(
 	outsideProps: Props<DataPointType, DataValueType>,
 ) {
 	const props = resolveDefaultProps(outsideProps, zAxisDefaultProps);
-	return <SetZAxisSettings
-		domain={props.domain}
-		id={props.zAxisId}
-		dataKey={props.dataKey}
-		name={props.name}
-		unit={props.unit}
-		range={props.range}
-		scale={props.scale}
-		type={props.type}
-		allowDuplicatedCategory={implicitZAxis.allowDuplicatedCategory}
-		allowDataOverflow={implicitZAxis.allowDataOverflow}
-		reversed={implicitZAxis.reversed}
-		includeHidden={implicitZAxis.includeHidden}
-	/>;
+	return (
+		<SetZAxisSettings
+			domain={props.domain}
+			id={props.zAxisId}
+			dataKey={props.dataKey}
+			name={props.name}
+			unit={props.unit}
+			range={props.range}
+			scale={props.scale}
+			type={props.type}
+			allowDuplicatedCategory={implicitZAxis.allowDuplicatedCategory}
+			allowDataOverflow={implicitZAxis.allowDataOverflow}
+			reversed={implicitZAxis.reversed}
+			includeHidden={implicitZAxis.includeHidden}
+		/>
+	);
 }
 
 ZAxis.displayName = 'ZAxis';

package/src/chart/AreaChart.tsrx

@@ -11,16 +11,20 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function AreaChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
-	ref?: Ref<SVGSVGElement>;
-}) {
+export function AreaChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: Ref<SVGSVGElement>;
+	},
+) {
 	const { ref, ...rest } = props;
-	return <CartesianChart
-		chartName="AreaChart"
-		defaultTooltipEventType="axis"
-		validateTooltipEventTypes={allowedTooltipTypes}
-		tooltipPayloadSearcher={arrayTooltipSearcher}
-		categoricalChartProps={rest}
-		ref={ref}
-	/>;
+	return (
+		<CartesianChart
+			chartName="AreaChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={rest}
+			ref={ref}
+		/>
+	);
 }

package/src/chart/BarChart.tsrx

@@ -13,16 +13,20 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis', 'item'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function BarChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
-	ref?: Ref<SVGSVGElement>;
-}) {
+export function BarChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: Ref<SVGSVGElement>;
+	},
+) {
 	const { ref, ...rest } = props;
-	return <CartesianChart
-		chartName="BarChart"
-		defaultTooltipEventType="axis"
-		validateTooltipEventTypes={allowedTooltipTypes}
-		tooltipPayloadSearcher={arrayTooltipSearcher}
-		categoricalChartProps={rest}
-		ref={ref}
-	/>;
+	return (
+		<CartesianChart
+			chartName="BarChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={rest}
+			ref={ref}
+		/>
+	);
 }

package/src/chart/CategoricalChart.tsrx

@@ -27,31 +27,37 @@ export function CategoricalChart(props: CartesianChartProps & { ref?: Ref<SVGSVG
 	// "compact" is the Brush panorama mode (but it's public, so it can render
 	// outside Brush too).
 	if (compact) {
-		return <>
-			<ReportChartSize width={width} height={height} />
-			<RootSurface otherAttributes={attrs} title={title} desc={desc}>{children}</RootSurface>
-		</>;
+		return (
+			<>
+				<ReportChartSize width={width} height={height} />
+				<RootSurface otherAttributes={attrs} title={title} desc={desc}>
+					{children}
+				</RootSurface>
+			</>
+		);
 	}
-	return <RechartsWrapper
-		className={className}
-		style={style}
-		width={width}
-		height={height}
-		responsive={responsive ?? false}
-		onClick={props.onClick}
-		onMouseLeave={props.onMouseLeave}
-		onMouseEnter={props.onMouseEnter}
-		onMouseMove={props.onMouseMove}
-		onMouseDown={props.onMouseDown}
-		onMouseUp={props.onMouseUp}
-		onContextMenu={props.onContextMenu}
-		onDoubleClick={props.onDoubleClick}
-		onTouchStart={props.onTouchStart}
-		onTouchMove={props.onTouchMove}
-		onTouchEnd={props.onTouchEnd}
-	>
-		<RootSurface otherAttributes={attrs} title={title} desc={desc} ref={ref}>
-			<ClipPathProvider>{children}</ClipPathProvider>
-		</RootSurface>
-	</RechartsWrapper>;
+	return (
+		<RechartsWrapper
+			className={className}
+			style={style}
+			width={width}
+			height={height}
+			responsive={responsive ?? false}
+			onClick={props.onClick}
+			onMouseLeave={props.onMouseLeave}
+			onMouseEnter={props.onMouseEnter}
+			onMouseMove={props.onMouseMove}
+			onMouseDown={props.onMouseDown}
+			onMouseUp={props.onMouseUp}
+			onContextMenu={props.onContextMenu}
+			onDoubleClick={props.onDoubleClick}
+			onTouchStart={props.onTouchStart}
+			onTouchMove={props.onTouchMove}
+			onTouchEnd={props.onTouchEnd}
+		>
+			<RootSurface otherAttributes={attrs} title={title} desc={desc} ref={ref}>
+				<ClipPathProvider>{children}</ClipPathProvider>
+			</RootSurface>
+		</RechartsWrapper>
+	);
 }

package/src/chart/ComposedChart.tsrx

@@ -11,16 +11,20 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function ComposedChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
-	ref?: Ref<SVGSVGElement>;
-}) {
+export function ComposedChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: Ref<SVGSVGElement>;
+	},
+) {
 	const { ref, ...rest } = props;
-	return <CartesianChart
-		chartName="ComposedChart"
-		defaultTooltipEventType="axis"
-		validateTooltipEventTypes={allowedTooltipTypes}
-		tooltipPayloadSearcher={arrayTooltipSearcher}
-		categoricalChartProps={rest}
-		ref={ref}
-	/>;
+	return (
+		<CartesianChart
+			chartName="ComposedChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={rest}
+			ref={ref}
+		/>
+	);
 }

package/src/chart/FunnelChart.tsrx

@@ -11,16 +11,20 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['item'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function FunnelChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
-	ref?: Ref<SVGSVGElement>;
-}) {
+export function FunnelChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: Ref<SVGSVGElement>;
+	},
+) {
 	const { ref, ...rest } = props;
-	return <CartesianChart
-		chartName="FunnelChart"
-		defaultTooltipEventType="item"
-		validateTooltipEventTypes={allowedTooltipTypes}
-		tooltipPayloadSearcher={arrayTooltipSearcher}
-		categoricalChartProps={rest}
-		ref={ref}
-	/>;
+	return (
+		<CartesianChart
+			chartName="FunnelChart"
+			defaultTooltipEventType="item"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={rest}
+			ref={ref}
+		/>
+	);
 }

package/src/chart/LineChart.tsrx

@@ -13,16 +13,20 @@ const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis'];
  * @provides CartesianViewBoxContext
  * @provides CartesianChartContext
  */
-export function LineChart<DataPointType = unknown>(props: CartesianChartProps<DataPointType> & {
-	ref?: Ref<SVGSVGElement>;
-}) {
+export function LineChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: Ref<SVGSVGElement>;
+	},
+) {
 	const { ref, ...rest } = props;
-	return <CartesianChart
-		chartName="LineChart"
-		defaultTooltipEventType="axis"
-		validateTooltipEventTypes={allowedTooltipTypes}
-		tooltipPayloadSearcher={arrayTooltipSearcher}
-		categoricalChartProps={rest}
-		ref={ref}
-	/>;
+	return (
+		<CartesianChart
+			chartName="LineChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={rest}
+			ref={ref}
+		/>
+	);
 }