@octanejs/visx 0.1.0

package/src/xychart/components/series/private/AnimatedBars.tsrx

@@ -0,0 +1,151 @@
+import type { AxisScale } from '@octanejs/visx/axis';
+import { BarRounded } from '@octanejs/visx/shape';
+import { useMemo } from 'octane';
+import { animated, useTransition as useSpringTransition } from '../../../../internal/spring.tsrx';
+import type { Bar, BarsProps } from '../../../types';
+import { cleanColor, colorHasUrl } from '../../../utils/cleanColorString';
+import getScaleBaseline from '../../../utils/getScaleBaseline';
+import AnimatedPath from './AnimatedPath.tsrx';
+
+function enterUpdate({ x, y, width, height, fill }: Bar) {
+  return {
+    x,
+    y,
+    width,
+    height,
+    fill: cleanColor(fill),
+    opacity: 1,
+  };
+}
+
+type BarTransitionConfig<Scale extends AxisScale> = {
+  scale: Scale;
+  horizontal?: boolean;
+};
+
+function useBarTransitionConfig<Scale extends AxisScale>({
+  scale,
+  horizontal,
+}: BarTransitionConfig<Scale>) {
+  const shouldAnimateX = !!horizontal;
+  return useMemo(() => {
+    const scaleBaseline = getScaleBaseline(scale);
+
+    function fromLeave({ x, y, width, height, fill }: Bar) {
+      return {
+        x: shouldAnimateX ? scaleBaseline ?? 0 : x,
+        y: shouldAnimateX ? y : scaleBaseline ?? 0,
+        width: shouldAnimateX ? 0 : width,
+        height: shouldAnimateX ? height : 0,
+        fill: cleanColor(fill),
+        opacity: 0,
+      };
+    }
+
+    return {
+      unique: true,
+      from: fromLeave,
+      leave: fromLeave,
+      enter: enterUpdate,
+      update: enterUpdate,
+      keys: (bar: Bar) => bar.key,
+    };
+  }, [scale, shouldAnimateX]);
+}
+
+function AnimatedBarsRounded<XScale extends AxisScale, YScale extends AxisScale>({
+  bars,
+  xScale,
+  yScale,
+  horizontal,
+  radius,
+  radiusAll,
+  radiusTop,
+  radiusRight,
+  radiusBottom,
+  radiusLeft,
+  ...pathProps
+}: BarsProps<XScale, YScale> & { radius: number }) {
+  return <>
+      {bars.map(({ key, fill, x, y, width, height }) => (
+        <BarRounded
+          key={key}
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          radius={radius}
+          all={radiusAll}
+          top={radiusTop}
+          right={radiusRight}
+          bottom={radiusBottom}
+          left={radiusLeft}
+        >
+          {({ path }) => (
+            <AnimatedPath
+              className="visx-bar visx-bar-rounded"
+              d={path}
+              fill={fill}
+              {...pathProps}
+            />
+          )}
+        </BarRounded>
+      ))}
+    </>
+}
+
+function AnimatedBarsUnrounded<XScale extends AxisScale, YScale extends AxisScale>({
+  bars,
+  xScale,
+  yScale,
+  horizontal,
+  radius,
+  radiusAll,
+  radiusTop,
+  radiusRight,
+  radiusBottom,
+  radiusLeft,
+  ...rectProps
+}: BarsProps<XScale, YScale>) {
+  const animatedBars = useSpringTransition(bars, {
+    ...useBarTransitionConfig({ horizontal, scale: horizontal ? xScale : yScale }),
+  });
+  const isFocusable = Boolean(rectProps.onFocus || rectProps.onBlur);
+
+  return <>
+      {animatedBars(
+        (
+          // @ts-expect-error x/y aren't in react-spring types (which are HTML CSS properties)
+          { x, y, width, height, fill, opacity },
+          item,
+          { key },
+        ) =>
+          item == null || key == null ? null : (
+            <animated.rect
+              key={key}
+              tabIndex={isFocusable ? 0 : undefined}
+              className="visx-bar"
+              x={x}
+              y={y}
+              width={width}
+              height={height}
+              // use the item's fill directly if it's not animate-able
+              fill={colorHasUrl(item.fill) ? item.fill : fill}
+              opacity={opacity}
+              {...rectProps}
+            />
+          ),
+      )}
+    </>
+}
+
+/** Wrapper component which renders a Bars component depending on whether it needs rounded corners. */
+export default function AnimatedBars<XScale extends AxisScale, YScale extends AxisScale>(
+  props: BarsProps<XScale, YScale>,
+) {
+  return props.radius == null ? (
+    <AnimatedBarsUnrounded {...props} />
+  ) : (
+    <AnimatedBarsRounded {...props} radius={props.radius} />
+  );
+}

package/src/xychart/components/series/private/AnimatedBars.tsrx.d.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { BarsProps } from '../../../types';
+/** Wrapper component which renders a Bars component depending on whether it needs rounded corners. */
+export default function AnimatedBars<XScale extends AxisScale, YScale extends AxisScale>(props: BarsProps<XScale, YScale>): import("react").JSX.Element;

package/src/xychart/components/series/private/AnimatedGlyphs.tsrx

@@ -0,0 +1,108 @@
+import type { AxisScale } from '@octanejs/visx/axis';
+import { useMemo } from 'octane';
+import type { ReactNode, FC } from 'react';
+import {
+	useTransition as useSpringTransition,
+	animated,
+	to,
+} from '../../../../internal/spring.tsrx';
+import getScaleBaseline from '../../../utils/getScaleBaseline';
+import type { GlyphProps, GlyphsProps } from '../../../types';
+import { cleanColor, colorHasUrl } from '../../../utils/cleanColorString';
+
+/** Memoized useTransition config */
+export function useAnimatedGlyphsConfig<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	xScale,
+	yScale,
+	horizontal,
+}: {
+	xScale: XScale;
+	yScale: YScale;
+	horizontal?: boolean;
+}) {
+	const xScaleBaseline = getScaleBaseline(xScale);
+	const yScaleBaseline = getScaleBaseline(yScale);
+	return useMemo(
+		() => ({
+			unique: true,
+			from: ({ x, y, color }: GlyphProps<Datum>) => ({
+				x: horizontal ? xScaleBaseline : x,
+				y: horizontal ? y : yScaleBaseline,
+				color: cleanColor(color),
+				opacity: 0,
+			}),
+			leave: ({ x, y, color }: GlyphProps<Datum>) => ({
+				x: horizontal ? xScaleBaseline : x,
+				y: horizontal ? y : yScaleBaseline,
+				color: cleanColor(color),
+				opacity: 0,
+			}),
+			enter: ({ x, y, color }: GlyphProps<Datum>) => ({
+				x,
+				y,
+				color: cleanColor(color),
+				opacity: 1,
+			}),
+			update: ({ x, y, color }: GlyphProps<Datum>) => ({
+				x,
+				y,
+				color: cleanColor(color),
+				opacity: 1,
+			}),
+			keys: (glyph: GlyphProps<Datum>) => glyph.key,
+		}),
+		[xScaleBaseline, yScaleBaseline, horizontal],
+	);
+}
+
+export default function AnimatedGlyphs<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	renderGlyph,
+	glyphs,
+	horizontal,
+	xScale,
+	yScale,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+}: {
+	// unanimated Glyph component
+	// unanimated Glyph component
+	// unanimated Glyph component
+	// unanimated Glyph component
+	renderGlyph: FC<GlyphProps<Datum>>;
+} & GlyphsProps<XScale, YScale, Datum>) {
+	const animatedGlyphs = useSpringTransition(glyphs, {
+		...useAnimatedGlyphsConfig({ xScale, yScale, horizontal }),
+	});
+
+	return <>
+		{/** @ts-expect-error x/y aren't in react-spring's CSSProperties */}
+		{animatedGlyphs(
+			({ x, y, color, opacity }, item, { key }) => <animated.g
+				key={key}
+				transform={to([x, y], (xVal, yVal) => `translate(${xVal}, ${yVal})`)}
+				color={color}
+				opacity={opacity}
+			>
+				{renderGlyph({
+					key,
+					datum: item.datum,
+					index: item.index,
+					x: 0,
+					y: 0,
+					size: item.size,
+					// currentColor doesn't work with url-based colors (pattern, gradient)
+					// otherwise currentColor allows us to animate the color of the <g /> element
+					color: colorHasUrl(item.color) ? item.color : 'currentColor',
+					onBlur,
+					onFocus,
+					onPointerMove,
+					onPointerOut,
+					onPointerUp,
+				}) as ReactNode}
+			</animated.g>,
+		)}
+	</>;
+}

package/src/xychart/components/series/private/AnimatedGlyphs.tsrx.d.ts

@@ -0,0 +1,40 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { FC } from 'react';
+import type { GlyphProps, GlyphsProps } from '../../../types';
+/** Memoized useTransition config */
+export declare function useAnimatedGlyphsConfig<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ xScale, yScale, horizontal, }: {
+    xScale: XScale;
+    yScale: YScale;
+    horizontal?: boolean;
+}): {
+    unique: boolean;
+    from: ({ x, y, color }: GlyphProps<Datum>) => {
+        x: any;
+        y: any;
+        color: string | undefined;
+        opacity: number;
+    };
+    leave: ({ x, y, color }: GlyphProps<Datum>) => {
+        x: any;
+        y: any;
+        color: string | undefined;
+        opacity: number;
+    };
+    enter: ({ x, y, color }: GlyphProps<Datum>) => {
+        x: number;
+        y: number;
+        color: string | undefined;
+        opacity: number;
+    };
+    update: ({ x, y, color }: GlyphProps<Datum>) => {
+        x: number;
+        y: number;
+        color: string | undefined;
+        opacity: number;
+    };
+    keys: (glyph: GlyphProps<Datum>) => string;
+};
+export default function AnimatedGlyphs<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ renderGlyph, glyphs, horizontal, xScale, yScale, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, }: {
+    renderGlyph: FC<GlyphProps<Datum>>;
+} & GlyphsProps<XScale, YScale, Datum>): import("react").JSX.Element;

package/src/xychart/components/series/private/AnimatedPath.tsrx

@@ -0,0 +1,47 @@
+import { memo, useCallback, useRef } from 'octane';
+import type { SVGProps } from 'react';
+import { animated, useSpring } from '../../../../internal/spring.tsrx';
+// @ts-expect-error no types
+import { interpolatePath } from 'd3-interpolate-path';
+import { debounce } from '@octanejs/visx/responsive';
+
+function AnimatedPath({
+	d,
+	stroke = 'transparent',
+	fill = 'transparent',
+	...lineProps
+}: Omit<SVGProps<SVGPathElement>, 'ref'>) {
+	const previousD = useRef(d);
+	// updating d in quick succession will ruin the animation because startD === endD.
+	// debounce it slightly
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const setPreviousD = useCallback(
+		debounce((dValue?: string) => {
+			previousD.current = dValue;
+		}, 50),
+		[], // create once
+	);
+
+	// react-spring cannot interpolate paths which have a differing number of points
+	// flubber is the "best" at interpolating but assumes closed paths
+	// d3-interpolate-path is better at interpolating extra/fewer points so we use that
+	const interpolator = interpolatePath(previousD.current, d);
+	setPreviousD(d);
+
+	const { t } = useSpring({
+		from: { t: 0 },
+		to: { t: 1 },
+		reset: true,
+		delay: 0,
+	});
+	const tweened = useSpring({ stroke, fill });
+	return <animated.path
+		className="visx-path"
+		d={t.to(interpolator)}
+		stroke={tweened.stroke}
+		fill={tweened.fill}
+		{...lineProps}
+	/>;
+}
+
+export default memo(AnimatedPath)

package/src/xychart/components/series/private/AnimatedPath.tsrx.d.ts

@@ -0,0 +1,4 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+declare const _default: import("octane").ComponentBody<Omit<SVGProps<SVGPathElement>, "ref">, any>;
+export default _default;

package/src/xychart/components/series/private/Bars.tsrx

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { AxisScale } from '@octanejs/visx/axis';
+import { BarRounded } from '@octanejs/visx/shape';
+import type { BarsProps } from '../../../types';
+
+export default function Bars({
+	bars,
+	horizontal,
+	xScale,
+	yScale,
+	radius,
+	radiusAll,
+	radiusTop,
+	radiusRight,
+	radiusBottom,
+	radiusLeft,
+	...restProps
+}: BarsProps<AxisScale, AxisScale>) {
+	const isFocusable = Boolean(restProps.onFocus || restProps.onBlur);
+	return <>
+		{bars.map(
+			({ key, ...barProps }) => radius == null
+				? <rect
+						key={key}
+						className="visx-bar"
+						tabIndex={isFocusable ? 0 : undefined}
+						{...barProps}
+						{...restProps}
+					/>
+				: <BarRounded
+						key={key}
+						className="visx-bar"
+						tabIndex={isFocusable ? 0 : undefined}
+						radius={radius}
+						all={radiusAll}
+						top={radiusTop}
+						right={radiusRight}
+						bottom={radiusBottom}
+						left={radiusLeft}
+						{...barProps}
+						{...restProps}
+					/>,
+		)}
+	</>;
+}

package/src/xychart/components/series/private/Bars.tsrx.d.ts

@@ -0,0 +1,4 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { BarsProps } from '../../../types';
+export default function Bars({ bars, horizontal, xScale, yScale, radius, radiusAll, radiusTop, radiusRight, radiusBottom, radiusLeft, ...restProps }: BarsProps<AxisScale, AxisScale>): import("react").JSX.Element;

package/src/xychart/components/series/private/BaseAreaSeries.tsrx

@@ -0,0 +1,187 @@
+import { Fragment, useContext, useCallback, useMemo, useEffect } from 'octane';
+import type { FC, SVGProps } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { AreaProps, LinePathProps } from '@octanejs/visx/shape';
+import { Area, LinePath } from '@octanejs/visx/shape';
+import DataContext from '../../../context/DataContext.tsrx';
+import type { DataContextType, GlyphsProps, SeriesProps } from '../../../types';
+import getScaledValueFactory from '../../../utils/getScaledValueFactory';
+import getScaleBaseline from '../../../utils/getScaleBaseline';
+import isValidNumber from '../../../typeguards/isValidNumber';
+import { AREASERIES_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import { BaseGlyphSeries } from './BaseGlyphSeries.tsrx';
+import defaultRenderGlyph from './defaultRenderGlyph.tsrx';
+import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
+
+export type BaseAreaSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	SeriesProps<XScale, YScale, Datum> & {
+		/** Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes) when chart is rendered horizontally (vertical line). Defaults to the scale zero value, not compatible with AreaStack. */
+		x0Accessor?: SeriesProps<XScale, YScale, Datum>['xAccessor'];
+		/** Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes). Defaults to the scale zero value, not compatible with AreaStack. */
+		y0Accessor?: SeriesProps<XScale, YScale, Datum>['yAccessor'];
+		/** Whether to render a Line along value of the Area shape (area is fill only). */
+		renderLine?: boolean;
+		/** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
+		curve?: AreaProps<Datum>['curve'];
+		/** Props to be passed to the Line, if rendered. */
+		lineProps?: Omit<LinePathProps<Datum> & SVGProps<SVGPathElement>, | 'data'
+		| 'x'
+		| 'y'
+		| 'children'
+		| 'defined'>;
+		/** Rendered component which is passed path props by BaseAreaSeries after processing. */
+		PathComponent?: FC<Omit<SVGProps<SVGPathElement>, 'ref'>> | 'path';
+	} & Omit<SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
+
+function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	PathComponent = 'path',
+	curve,
+	data,
+	dataKey,
+	lineProps,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+	onPointerDown,
+	enableEvents = true,
+	renderLine = true,
+	xAccessor,
+	x0Accessor,
+	xScale,
+	yAccessor,
+	y0Accessor,
+	yScale,
+	...areaProps
+}: BaseAreaSeriesProps<XScale, YScale, Datum> & Pick<DataContextType<XScale, YScale, Datum>, | 'xScale'
+| 'yScale'>) {
+	const { colorScale, theme, horizontal } = useContext(DataContext);
+	const getScaledX0 = useMemo(
+		() => (x0Accessor ? getScaledValueFactory(xScale, x0Accessor) : undefined),
+		[xScale, x0Accessor],
+	);
+	const getScaledX = useMemo(() => getScaledValueFactory(xScale, xAccessor), [xScale, xAccessor]);
+	const getScaledY0 = useMemo(
+		() => (y0Accessor ? getScaledValueFactory(yScale, y0Accessor) : undefined),
+		[yScale, y0Accessor],
+	);
+	const getScaledY = useMemo(() => getScaledValueFactory(yScale, yAccessor), [yScale, yAccessor]);
+	const isDefined = useCallback(
+		(d: Datum) => isValidNumber(xScale(xAccessor(d))) && isValidNumber(yScale(yAccessor(d))),
+		[xScale, xAccessor, yScale, yAccessor],
+	);
+	const color = colorScale?.(dataKey) ?? theme?.colors?.[0] ?? '#222';
+
+	const ownEventSourceKey = `${AREASERIES_EVENT_SOURCE}-${dataKey}`;
+	const eventEmitters = useSeriesEvents<XScale, YScale, Datum>({
+		dataKey,
+		enableEvents,
+		onBlur,
+		onFocus,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		source: ownEventSourceKey,
+		allowedSources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
+	});
+
+	// accessor functions for the area generator
+	const accessors = useMemo(() => {
+		const numericScaleBaseline = getScaleBaseline(horizontal ? xScale : yScale);
+		return horizontal
+			? {
+					x0: getScaledX0 ?? numericScaleBaseline,
+					x1: getScaledX,
+					y: getScaledY,
+				}
+			: {
+					x: getScaledX,
+					y0: getScaledY0 ?? numericScaleBaseline,
+					y1: getScaledY,
+				};
+	}, [xScale, yScale, horizontal, getScaledX, getScaledY, getScaledX0, getScaledY0]);
+
+	// render invisible glyphs for focusing if onFocus/onBlur are defined
+	const captureFocusEvents = Boolean(onFocus || onBlur);
+	const renderGlyphs = useCallback(
+		({ glyphs }: GlyphsProps<XScale, YScale, Datum>) => captureFocusEvents
+			? glyphs.map(
+					(glyph) => <Fragment key={glyph.key}>{defaultRenderGlyph({
+						...glyph,
+						color: 'transparent',
+						onFocus: eventEmitters.onFocus,
+						onBlur: eventEmitters.onBlur,
+					})}</Fragment>,
+				)
+			: null,
+		[captureFocusEvents, eventEmitters.onFocus, eventEmitters.onBlur],
+	);
+
+	return <>
+		<Area {...accessors} {...areaProps} curve={curve} defined={isDefined}>
+			{({ path }) =>
+				<PathComponent
+					className="visx-area"
+					stroke="transparent"
+					fill={color}
+					strokeLinecap="round"
+					{...areaProps}
+					d={path(data) || ''}
+					{...eventEmitters}
+				/>}
+		</Area>
+		{renderLine &&
+			<LinePath x={getScaledX} y={getScaledY} defined={isDefined} curve={curve} {...lineProps}>
+				{({ path }) =>
+					<PathComponent
+						className="visx-line"
+						fill="transparent"
+						stroke={color}
+						strokeWidth={2}
+						pointerEvents="none"
+						strokeLinecap="round"
+						{...lineProps}
+						d={path(data) || ''}
+					/>}
+			</LinePath>}
+		{captureFocusEvents &&
+			<BaseGlyphSeries
+				dataKey={dataKey}
+				data={data}
+				xAccessor={xAccessor}
+				yAccessor={yAccessor}
+				xScale={xScale}
+				yScale={yScale}
+				renderGlyphs={renderGlyphs}
+			/>}
+	</>;
+}
+
+export default function BaseAreaSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseAreaSeriesProps<XScale, YScale, Datum>) {
+	const { dataKey, data, xAccessor, yAccessor } = props;
+	const { xScale, yScale, dataRegistry } = useContext(
+		DataContext,
+	) as unknown as DataContextType<XScale, YScale, Datum>;
+
+	useEffect(() => {
+		if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
+		return () => dataRegistry?.unregisterData(dataKey);
+	}, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
+
+	const registryEntry = dataRegistry?.get(dataKey);
+
+	// Explicit domains let wrapped series render before their registration effect.
+	if (!xScale || !yScale) return null;
+
+	// otherwise pass props + over-write data/accessors
+	return <BaseAreaSeries
+		{...props}
+		xScale={xScale}
+		yScale={yScale}
+		data={registryEntry?.data ?? data}
+		xAccessor={registryEntry?.xAccessor ?? xAccessor}
+		yAccessor={registryEntry?.yAccessor ?? yAccessor}
+	/>;
+}

package/src/xychart/components/series/private/BaseAreaSeries.tsrx.d.ts

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { FC, SVGProps } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { AreaProps, LinePathProps } from '@octanejs/visx/shape';
+import type { SeriesProps } from '../../../types';
+export type BaseAreaSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = SeriesProps<XScale, YScale, Datum> & {
+    /** Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes) when chart is rendered horizontally (vertical line). Defaults to the scale zero value, not compatible with AreaStack. */
+    x0Accessor?: SeriesProps<XScale, YScale, Datum>['xAccessor'];
+    /** Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes). Defaults to the scale zero value, not compatible with AreaStack. */
+    y0Accessor?: SeriesProps<XScale, YScale, Datum>['yAccessor'];
+    /** Whether to render a Line along value of the Area shape (area is fill only). */
+    renderLine?: boolean;
+    /** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
+    curve?: AreaProps<Datum>['curve'];
+    /** Props to be passed to the Line, if rendered. */
+    lineProps?: Omit<LinePathProps<Datum> & SVGProps<SVGPathElement>, 'data' | 'x' | 'y' | 'children' | 'defined'>;
+    /** Rendered component which is passed path props by BaseAreaSeries after processing. */
+    PathComponent?: FC<Omit<SVGProps<SVGPathElement>, 'ref'>> | 'path';
+} & Omit<SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
+export default function BaseAreaSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseAreaSeriesProps<XScale, YScale, Datum>): import("react").JSX.Element | null;