@octanejs/recharts 0.1.40 → 0.1.42

package/src/util/types.ts

@@ -1,9 +1,719 @@
-// Port of the runtime helpers from recharts' util/types.ts (the file is mostly
-// type definitions; these are the two runtime exports the components use).
-// octane events are NATIVE delegated DOM events — handlers receive the real
-// event, matching the platform (never a synthetic wrapper).
+// Adapted from recharts@3.9.2, commit b3451050c027a23957ffa50a2665c9119df21e47.
+import type {
+	AriaAttributes,
+	CSSProperties,
+	NativeMouseEvent,
+	OctaneElement,
+	OctaneNode,
+	SVGProps,
+} from './OctaneTypes';
 import { isValidElement } from 'octane';
-import { isEventKey } from '../util/excludeEventProps';
+import type * as d3Scales from 'victory-vendor/d3-scale';
+import type { Props as DotProps } from '../shape/Dot.tsrx';
+import { AxisRange } from '../state/selectors/axisSelectors';
+import { ExternalMouseEvents } from '../chart/types';
+import { SyncMethod } from '../synchronisation/types';
+import { isEventKey, type EventKeysType } from './excludeEventProps';
+import { DotPoint } from '../component/Dots.tsrx';
+import { SVGPropsNoEvents } from './svgPropertiesNoEvents';
+import { BaseValue } from '../cartesian/Area.tsrx';
+import { ImplicitLabelType } from '../component/Label.tsrx';
+import { CustomScaleDefinition } from './scale/CustomScaleDefinition';
+import { ChartData } from '../state/chartDataSlice';
+import {
+	XAxisOrientation,
+	XAxisPadding,
+	YAxisOrientation,
+	YAxisPadding,
+} from '../state/cartesianAxisSlice';
+import { TextAnchor, TextVerticalAnchor } from '../component/Text.tsrx';
+import type { TickFormatter } from '../cartesian/CartesianAxis.tsrx';
+import type { Props as TextProps } from '../component/Text.tsrx';
+import { TypedDataKey } from './typedDataKey';
+import type { EasingInput } from '../animation/easing';
+
+/**
+ * Determines how values are stacked:
+ *
+ * - `none` is the default, it adds values on top of each other. No smarts. Negative values will overlap.
+ * - `expand` make it so that the values always add up to 1 - so the chart will look like a rectangle.
+ * - `wiggle` and `silhouette` tries to keep the chart centered.
+ * - `sign` stacks positive values above zero and negative values below zero. Similar to `none` but handles negatives.
+ * - `positive` ignores all negative values, and then behaves like \`none\`.
+ *
+ * @see {@link https://d3js.org/d3-shape/stack#stack-offsets}
+ * (note that the `diverging` offset in d3 is named `sign` in recharts)
+ *
+ * @inline
+ */
+export type StackOffsetType = 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette' | 'positive';
+export type CartesianLayout = 'horizontal' | 'vertical';
+export type PolarLayout = 'centric' | 'radial';
+/**
+ * @deprecated use either `CartesianLayout` or `PolarLayout` instead.
+ * Mixing both charts families leads to ambiguity in the type system.
+ * These two layouts share very few properties, so it is best to keep them separate.
+ */
+export type LayoutType = CartesianLayout | PolarLayout;
+export type AxisType = 'xAxis' | 'yAxis' | 'zAxis' | 'angleAxis' | 'radiusAxis';
+
+/**
+ * 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.
+ *
+ * `auto`: the type is inferred based on the chart layout.
+ *
+ * This is external type - users will provide this type in props.
+ * Internally we will evaluate it to either 'category' or 'number' based on the layout,
+ * before sending it to the store.
+ *
+ * @inline
+ */
+export type AxisDomainTypeInput = 'number' | 'category' | 'auto';
+
+/**
+ * Individual axes are responsible for resolving the 'auto' type to either 'number' or 'category',
+ * based on the chart layout and axis kind. Then they can start using this type.
+ */
+export type EvaluatedAxisDomainType = 'number' | 'category';
+
+/**
+ * Extracts values from data objects.
+ *
+ * @inline
+ */
+export type DataKey<DataPointType, DataValueType = any> = TypedDataKey<
+	DataPointType,
+	DataValueType
+>;
+export type PresentationAttributesWithProps<P, T> = AriaAttributes &
+	DOMAttributesWithProps<P, T> &
+	Omit<SVGProps<T>, NativeEventProp<T> | keyof DOMAttributesWithProps<P, T>>;
+export type PresentationAttributesAdaptChildEvent<P, T> = AriaAttributes &
+	DOMAttributesAdaptChildEvent<P, T> &
+	Omit<SVGProps<T>, NativeEventProp<T> | keyof DOMAttributesAdaptChildEvent<P, T>>;
+
+/**
+ * @inline
+ */
+export type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+
+/**
+ * @inline
+ */
+export type LegendType =
+	| 'circle'
+	| 'cross'
+	| 'diamond'
+	| 'line'
+	| 'plainline'
+	| 'rect'
+	| 'square'
+	| 'star'
+	| 'triangle'
+	| 'wye'
+	| 'none';
+export type TooltipType = 'none';
+
+export type AllowInDimension = {
+	x?: boolean;
+	y?: boolean;
+};
+
+export interface Coordinate {
+	x: number;
+	y: number;
+}
+
+export interface NullableCoordinate {
+	x: number | null;
+	y: number | null;
+}
+
+export type RectangleCoordinate = {
+	x1: number;
+	y1: number;
+	x2: number;
+	y2: number;
+};
+
+export type RectanglePosition = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
+/**
+ * @deprecated do not use: too many properties, mixing too many concepts, cartesian and polar together, everything optional.
+ * Instead, use either `Coordinate` or `PolarCoordinate`.
+ */
+export interface ChartCoordinate extends Coordinate {
+	xAxis?: any;
+	yAxis?: any;
+	width?: any;
+	height?: any;
+	offset?: ChartOffsetInternal;
+	angle?: number;
+	radius?: number;
+	cx?: number;
+	cy?: number;
+	startAngle?: number;
+	endAngle?: number;
+	innerRadius?: number;
+	outerRadius?: number;
+}
+
+export type PolarCoordinate = Coordinate & {
+	angle: number;
+	startAngle: number;
+	endAngle: number;
+	clockWise: boolean;
+	cx: number;
+	cy: number;
+	innerRadius: number;
+	outerRadius: number;
+	radius: number;
+};
+
+export const isPolarCoordinate = (c: Coordinate | PolarCoordinate): c is PolarCoordinate => {
+	return 'radius' in c && 'startAngle' in c && 'endAngle' in c;
+};
+
+export type RechartsScaleType =
+	| 'linear'
+	| 'pow'
+	| 'sqrt'
+	| 'log'
+	| 'symlog'
+	| 'identity'
+	| 'time'
+	| 'band'
+	| 'point'
+	| 'ordinal'
+	| 'quantile'
+	| 'quantize'
+	| 'utc'
+	| 'sequential'
+	| 'threshold';
+
+export type D3ScaleType = Extract<keyof typeof d3Scales, `scale${string}`>;
+
+/**
+ * String shortcuts for scale types.
+ * In case none of these does what you want you can also provide your own scale function
+ * @see {@link CustomScaleDefinition}
+ */
+export type ScaleType = 'auto' | RechartsScaleType;
+
+//
+// Event Handler Types -- Copied from @types/react/index.d.ts and adapted for Props.
+//
+
+type NativeEventProp<T> = Extract<keyof SVGProps<T>, `on${string}`>;
+type NativeEventFor<H> = NonNullable<H> extends (event: infer E) => unknown ? E : never;
+
+type EventHandler<P, E> = {
+	bivarianceHack(props: P, event: E): void;
+}['bivarianceHack'];
+
+type AdaptChildEventHandler<P, E> = {
+	bivarianceHack(data: P, index: number, event: E): void;
+}['bivarianceHack'];
+
+export type RechartsMouseEventHandler<P, T = Element> = EventHandler<P, NativeMouseEvent<T>>;
+
+// Rebind the supported native event surface. Omit other native handlers from
+// inherited SVG props: the runtime adapter's whitelist does not forward them.
+export type DOMAttributesWithProps<P, T> = Pick<
+	SVGProps<T>,
+	'children' | 'dangerouslySetInnerHTML'
+> & {
+	[K in Extract<NativeEventProp<T>, EventKeysType>]?: EventHandler<
+		P,
+		NativeEventFor<SVGProps<T>[K]>
+	>;
+};
+
+export type DOMAttributesAdaptChildEvent<P, T> = Pick<
+	SVGProps<T>,
+	'children' | 'dangerouslySetInnerHTML'
+> & {
+	[K in Extract<NativeEventProp<T>, EventKeysType>]?: AdaptChildEventHandler<
+		P,
+		NativeEventFor<SVGProps<T>[K]>
+	>;
+};
+
+export type { EasingInput };
+/** @deprecated Use EasingInput instead */
+export type AnimationTiming = EasingInput;
+/** Specifies the duration of animation, the unit of this option is ms. */
+export type AnimationDuration = number;
+
+export type OffsetVertical = {
+	top: number;
+	bottom: number;
+};
+
+export type OffsetHorizontal = {
+	left: number;
+	right: number;
+};
+
+/**
+ * This object defines the offset of the chart area and width and height and brush and ... it's a bit too much information all in one.
+ * We use it internally but let's not expose it to the outside world.
+ * If you are looking for this information, instead import `ChartOffset` or `PlotArea` from `recharts`.
+ */
+export type ChartOffsetInternal = {
+	top: number;
+	bottom: number;
+	left: number;
+	right: number;
+	width: number;
+	height: number;
+	brushBottom: number;
+};
+
+export interface Padding {
+	top: number;
+	bottom: number;
+	left: number;
+	right: number;
+}
+
+export interface GeometrySector {
+	cx: number;
+	cy: number;
+	innerRadius: number;
+	outerRadius: number;
+	startAngle: number;
+	endAngle: number;
+}
+
+export type GeometrySectorWithCornerRadius = GeometrySector & {
+	cornerRadius: number;
+	forceCornerRadius: boolean;
+	cornerIsExternal: boolean;
+};
+
+export type AxisDomainItem =
+	string | number | ((d: number) => string | number) | 'auto' | 'dataMin' | 'dataMax';
+
+/**
+ * The domain of axis.
+ * This is the definition
+ *
+ * Numeric domain is always defined by an array of exactly two values, for the min and the max of the axis.
+ * Categorical domain is defined as array of all possible values.
+ *
+ * Can be specified in many ways:
+ * - array of numbers
+ * - with special strings like 'dataMin' and 'dataMax'
+ * - with special string math like 'dataMin - 100'
+ * - with keyword 'auto'
+ * - or a function
+ * - array of functions
+ * - or a combination of the above
+ */
+export type AxisDomain =
+	| ReadonlyArray<string>
+	| ReadonlyArray<number>
+	| Readonly<[AxisDomainItem, AxisDomainItem]>
+	| (([dataMin, dataMax]: NumberDomain, allowDataOverflow: boolean) => NumberDomain);
+
+/**
+ * NumberDomain is an evaluated {@link AxisDomain}.
+ * Unlike {@link AxisDomain}, it has no variety - it's a tuple of two number.
+ * This is after all the keywords and functions were evaluated and what is left is [min, max].
+ *
+ * Know that the min, max values are not guaranteed to be nice numbers - values like -Infinity or NaN are possible.
+ *
+ * There are also `category` axes that have different things than numbers in their domain.
+ */
+export type NumberDomain = readonly [min: number, max: number];
+
+export type CategoricalDomainItem = number | string | Date;
+
+export type CategoricalDomain = ReadonlyArray<CategoricalDomainItem>;
+
+export type BaseTickContentProps = {
+	angle: number;
+	className?: SVGProps<SVGElement>['className'];
+	fill: string | undefined;
+	height?: number | string;
+	index: number;
+	name?: string;
+	stroke: string;
+	payload: CartesianTickItem;
+	textAnchor: TextAnchor;
+	tickFormatter: TickFormatter | undefined;
+	verticalAnchor: TextVerticalAnchor;
+	visibleTicksCount: number;
+	width?: number | string;
+	x: number | string;
+	y: number | string;
+};
+
+/** Polar ticks do not receive cartesian tick counts or formatter callbacks. */
+export type PolarTickContentProps = Omit<
+	BaseTickContentProps,
+	'angle' | 'payload' | 'tickFormatter' | 'visibleTicksCount' | 'verticalAnchor'
+> & {
+	angle?: number;
+	payload: TickItem;
+	verticalAnchor?: TextVerticalAnchor;
+};
+
+export type XAxisTickContentProps = BaseTickContentProps & {
+	orientation: XAxisOrientation;
+	padding: XAxisPadding | undefined;
+};
+
+export type YAxisTickContentProps = BaseTickContentProps & {
+	orientation: YAxisOrientation;
+	padding: YAxisPadding | undefined;
+};
+
+/**
+ * @inline
+ */
+export type TickProp<T> = TextProps | OctaneElement | ((props: T) => OctaneNode) | boolean;
+
+export interface BaseAxisProps<DataPointType, DataValueType> extends DataConsumer<
+	DataPointType,
+	DataValueType
+> {
+	/**
+	 * 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.
+	 *
+	 * `auto`: the type is inferred based on the chart layout.
+	 */
+	type?: AxisDomainTypeInput;
+	/**
+	 * The name of data.
+	 * This option will be used in tooltip.
+	 * If no value was set to this option, the value of dataKey will be used alternatively.
+	 */
+	name?: string;
+	/**
+	 * The unit of data. This option will be used in tooltip.
+	 */
+	unit?: string;
+	/**
+	 * The data that you provide via the `data` prop is an array of objects.
+	 * Each object can have multiple properties, each representing a different data dimension.
+	 * Use the `dataKey` prop to specify which property (or dimension) to use for this component.
+	 *
+	 * Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis,
+	 * where they extract different values from the same data objects.
+	 *
+	 * Decides how to extract the value of this Axis from the data:
+	 * - `string`: the name of the field in the data object;
+	 * - `number`: the index of the field in the data;
+	 * - `function`: a function that receives the data object and returns the value of this Axis.
+	 *
+	 * If undefined, it will reuse the dataKey of graphical items.
+	 */
+	dataKey?: DataKey<DataPointType, DataValueType>;
+	/**
+	 * 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 <XAxis type="number" domain={['dataMin', 'dataMax']} />
+	 * @example <XAxis type="number" domain={[0, 'dataMax']} />
+	 * @example <XAxis type="number" domain={['auto', 'auto']} />
+	 * @example <XAxis type="number" domain={[0, 'dataMax + 1000']} />
+	 * @example <XAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
+	 * @example <XAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
+	 * @example <XAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
+	 * @example <XAxis 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 <XAxis scale="log" />
+	 * @example
+	 * import { scaleLog } from 'd3-scale';
+	 * const scale = scaleLog().base(Math.E);
+	 * <YAxis scale={scale} />
+	 */
+	scale?:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
+}
+
+/**
+ * Props shared in all renderable axes - meaning the ones that are drawn on the chart,
+ * can have ticks, axis line, etc.
+ */
+export interface RenderableAxisProps<DataPointType, DataValueType> extends BaseAxisProps<
+	DataPointType,
+	DataValueType
+> {
+	/**
+	 * Tick text rotation angle in degrees.
+	 * Positive values rotate clockwise, negative values rotate counterclockwise.
+	 *
+	 * @defaultValue 0
+	 */
+	angle?: number;
+	/**
+	 * If set true, the axis do not display in the chart.
+	 *
+	 * @defaultValue false
+	 */
+	hide?: boolean;
+	/**
+	 * Defines how the individual label text is rendered.
+	 * This controls the settings for individual ticks; on a typical axis, there are multiple ticks, depending on your data.
+	 *
+	 * If you want to customize the overall axis label, use the `label` prop instead.
+	 *
+	 * Options:
+	 * - `false`: Do not render any tick labels.
+	 * - `true`: Render tick labels with default settings.
+	 * - `object`: An object of props to be merged into the internally calculated tick props.
+	 * - `OctaneElement`: A custom React element to be used as the tick label.
+	 * - `function`: A function that returns a React element for custom rendering of tick labels.
+	 *
+	 * @defaultValue true
+	 */
+	tick?: TickProp<unknown>;
+
+	/**
+	 * The count of axis ticks. Not used if 'type' is 'category'.
+	 *
+	 * @see {@link https://recharts.github.io/guide/axisTicks/}
+	 * @defaultValue 5
+	 */
+	tickCount?: number;
+	/**
+	 * Determines how the axis line is drawn. Options:
+	 * - `true`: the axis line is drawn with default props;
+	 * - `false`: the axis line is not visible;
+	 * - `object`: passed as props to SVG `<line>` element representing the axis line.
+	 *
+	 * @defaultValue true
+	 */
+	axisLine?: boolean | SVGProps<SVGLineElement>;
+
+	/**
+	 * If false set, tick lines will not be drawn.
+	 * If true set, tick lines will be drawn which have the props calculated internally.
+	 * If object set, tick lines will be drawn which have the props merged
+	 * by the internal calculated props and the option.
+	 * @defaultValue true
+	 */
+	tickLine?: boolean | SVGProps<SVGLineElement>;
+	/**
+	 * The length of tick line.
+	 * @defaultValue 6
+	 */
+	tickSize?: number;
+	/**
+	 * The formatter function of tick.
+	 */
+	tickFormatter?: (value: any, index: number) => string;
+	/**
+	 * When domain of the axis is specified and the type of the axis is 'number',
+	 * if allowDataOverflow is set to be false,
+	 * the domain will be adjusted when the minimum value of data is smaller than domain[0] or
+	 * the maximum value of data is greater than domain[1] so that the axis displays all data values.
+	 * If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.
+	 *
+	 * @defaultValue false
+	 */
+	allowDataOverflow?: boolean;
+	/**
+	 * Allow the axis has duplicated categories or not when the type of axis is "category".
+	 * @defaultValue true
+	 */
+	allowDuplicatedCategory?: boolean;
+	/**
+	 * Allow the ticks of axis to be decimals or not.
+	 *
+	 * @defaultValue true
+	 */
+	allowDecimals?: boolean;
+	/**
+	 * Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden
+	 * @defaultValue false
+	 */
+	includeHidden?: boolean;
+	/**
+	 * @deprecated Recharts computes the range automatically based on chart width or height
+	 *
+	 * Recharts ignores this prop since 3.0
+	 */
+	range?: AxisRange;
+	/**
+	 * Defines a single label for the whole axis.
+	 * This prop renders one label in the center of the axis line.
+	 * Useful for labeling the axis as a whole, like "Time (in seconds)" or "Distance (in meters)".
+	 *
+	 * This is not controlling tick labels.
+	 * If you want to customize tick labels, please see `tickFormatter` or `tick` props.
+	 *
+	 * - `false`: no label is rendered
+	 * - `string` | `number`: the content of the label
+	 * - `object`: the props of LabelList component
+	 * - `OctaneElement`: a custom SVG label element, such as `<text>` or `<g>`.
+	 *   HTML elements such as `<div>` are not valid inside the chart SVG and may trigger React DOM warnings.
+	 * - `function`: a render function of custom label
+	 *
+	 * @defaultValue false
+	 */
+	label?: ImplicitLabelType;
+	/** The HTML element's class name */
+	className?: string;
+	/**
+	 * If set to true, the ticks of this axis are reversed.
+	 * @defaultValue false
+	 */
+	reversed?: boolean;
+}
+
+/** Defines how ticks are placed and whether / how tick collisions are handled.
+ * 'preserveStart' keeps the left tick on collision and ensures that the first tick is always shown.
+ * 'preserveEnd' keeps the right tick on collision and ensures that the last tick is always shown.
+ * 'preserveStartEnd' keeps the left tick on collision and ensures that the first and last ticks always show.
+ * 'equidistantPreserveStart' selects a number N such that every nTh tick will be shown without collision.
+ * 'equidistantPreserveEnd' selects a number N such that every nTh tick will be shown, ensuring the last tick is always visible.
+ */
+export type AxisInterval =
+	| number
+	| 'preserveStart'
+	| 'preserveEnd'
+	| 'preserveStartEnd'
+	| 'equidistantPreserveStart'
+	| 'equidistantPreserveEnd';
+
+/**
+ * Ticks can be any type when the axis is the type of category.
+ *
+ * Ticks must be numbers when the axis is the type of number.
+ *
+ * @inline
+ */
+export type AxisTick = number | string;
+
+export interface TickItem {
+	value: any;
+	coordinate: number;
+	index: number;
+	/**
+	 * How far this tick is offset from the start of a category band.
+	 * On axes that do not have bands, this will always be zero.
+	 *
+	 * We never read offset internally in Recharts,
+	 * but it has been part of the external API so let's keep it here for people who do use it.
+	 */
+	offset?: number;
+}
+
+export interface CartesianTickItem extends TickItem {
+	tickCoord?: number;
+	tickSize?: number;
+	isShow?: boolean;
+}
+
+export interface Margin {
+	top: number;
+	right: number;
+	bottom: number;
+	left: number;
+}
+
+/**
+ * @inline
+ */
+export interface CartesianViewBox {
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+}
+
+export type CartesianViewBoxRequired = Required<CartesianViewBox>;
+
+interface PolarViewBox {
+	cx?: number;
+	cy?: number;
+	innerRadius?: number;
+	outerRadius?: number;
+	startAngle?: number;
+	endAngle?: number;
+	clockWise?: boolean;
+}
+
+export type PolarViewBoxRequired = Required<PolarViewBox>;
+
+export type TrapezoidViewBox = {
+	/**
+	 * The x-coordinate of the upper left corner of the trapezoid.
+	 * If the upper side is shorter than the lower side, this will be the x-coordinate of the upper left corner,
+	 * meaning that the X does take into account the varying width of the trapezoid.
+	 */
+	x: number;
+	/**
+	 * The y-coordinate of the upper side of the trapezoid.
+	 * Nothing exciting happening here.
+	 */
+	y: number;
+	/**
+	 * The width of the upper side of the trapezoid.
+	 */
+	upperWidth: number;
+	/**
+	 * The width of the lower side of the trapezoid.
+	 */
+	lowerWidth: number;
+	/**
+	 * The overall width of the trapezoid: `Math.max(upperWidth, lowerWidth)`.
+	 */
+	width: number;
+	/**
+	 * The height of the trapezoid.
+	 */
+	height: number;
+};
+
+/**
+ * @inline
+ */
+export type ViewBox = CartesianViewBoxRequired | PolarViewBoxRequired;
 
 // Collect the event handlers off a props bag (or element), rebinding each to
 // `(e) => handler(props, e)` — recharts item components pass their own props as
@@ -58,5 +768,553 @@ export function adaptEventsOfChild(
 	return out;
 }
 
-export const isNonEmptyArray = <T>(arr: ReadonlyArray<T> | null | undefined): arr is [T, ...T[]] =>
-	Array.isArray(arr) && arr.length > 0;
+/**
+ * 'axis' means that all graphical items belonging to this axis tick will be highlighted,
+ * and all will be present in the tooltip.
+ * Tooltip with 'axis' will display when hovering on the chart background.
+ *
+ * 'item' means only the one graphical item being hovered will show in the tooltip.
+ * Tooltip with 'item' will display when hovering over individual graphical items.
+ *
+ * This is calculated internally;
+ * charts have a `defaultTooltipEventType` and `validateTooltipEventTypes` options.
+ *
+ * Users then use <Tooltip shared={true} /> or <Tooltip shared={false} /> to control their preference,
+ * and charts will then see what is allowed and what is not.
+ */
+export type TooltipEventType = 'axis' | 'item';
+
+export interface SankeyNode {
+	// node attributes
+	dx: number;
+	dy: number;
+	name: string;
+	value: any;
+	x: number;
+	y: number;
+	// tree attributes
+	depth: number;
+	targetNodes: number[];
+	targetLinks: number[];
+	sourceNodes: number[];
+	sourceLinks: number[];
+}
+
+export interface SankeyLink {
+	target: number;
+	source: number;
+	value: number;
+	sy: number;
+	dy: number;
+	ty: number;
+}
+
+export type Size = { width: number; height: number };
+
+/**
+ * These are the props we are going to pass to an `activeDot` or `dot` if it is a function or a custom ComponentType
+ */
+export type ActiveDotProps = DotProps & {
+	payload: any;
+	index: number;
+	dataKey: DataKey<any> | undefined;
+	cx: number | undefined;
+	cy: number | undefined;
+	r: number | string | undefined;
+	fill: string;
+	strokeWidth: number;
+	stroke: string;
+	value: any;
+};
+
+/**
+ * This is the type of `activeDot` prop on:
+ * - Area
+ * - Line
+ * - Radar
+ *
+ * @inline
+ */
+export type ActiveDotType =
+	/**
+	 * true | false will turn the default activeDot on and off, respectively
+	 */
+	| boolean
+	/**
+	 * activeDot can be a custom React ComponentType.
+	 * It should return an SVG element because we are in SVG context - HTML won't work here.
+	 * Unfortunately, if you write a regular old functional component and have it return SVG element,
+	 * its default, inferred return type is `JSX.Element` and so if this return type was `SVGElement`
+	 * then it would look like a type error (even when doing the right thing).
+	 * So instead here we have OctaneNode return type which is invalid in runtime
+	 * (remember, we are in SVG context so HTML elements won't work, we need SVGElement).
+	 * But better than forcing everyone to re-type their components I guess.
+	 */
+	| ((props: ActiveDotProps) => OctaneNode)
+	/**
+	 * activeDot can be an object; props from here will be appended to the default active dot
+	 */
+	| Partial<ActiveDotProps>
+	/**
+	 * activeDot can be an element; it will get cloned and will receive new extra props.
+	 * I do not recommend this way! Use React component instead, that way you get more predictable props.
+	 */
+	| OctaneElement<Partial<ActiveDotProps> & Omit<SVGProps<SVGCircleElement>, keyof ActiveDotProps>>;
+
+/**
+ * Inside the dot event handlers we provide extra information about the dot point
+ * that the Dot component itself does not need but users might find useful.
+ */
+export type DotItemDotProps = SVGPropsNoEvents<Omit<DotProps, 'points' | 'ref'>> & {
+	points: ReadonlyArray<DotPoint>;
+	index: number;
+	payload: any;
+	dataKey: DataKey<any> | undefined;
+	value: any;
+};
+
+/**
+ * This is the type of `dot` prop on:
+ * - Area
+ * - Line
+ * - Radar
+ *
+ * @inline
+ */
+export type DotType =
+	/**
+	 * true | false will turn the default dot on and off, respectively
+	 */
+	| boolean
+	/**
+	 * dot can be a custom React ComponentType.
+	 * It should return an SVG element because we are in SVG context - HTML won't work here.
+	 * Unfortunately, if you write a regular old functional component and have it return SVG element,
+	 * its default, inferred return type is `JSX.Element` and so if this return type was `SVGElement`
+	 * then it would look like a type error (even when doing the right thing).
+	 * So instead here we have OctaneNode return type which is invalid in runtime
+	 * (remember, we are in SVG context so HTML elements won't work, we need SVGElement).
+	 * But better than forcing everyone to re-type their components I guess.
+	 *
+	 * Not that when a function, or a component is used, the props received are {@link DotItemDotProps}
+	 * which contain some extra information compared to {@link DotProps}.
+	 */
+	| ((props: DotItemDotProps) => OctaneNode)
+	/**
+	 * dot can be an object; props from here will be appended to the default dot
+	 */
+	| Partial<DotProps>
+	/**
+	 * dot can be an element; it will get cloned and will receive new extra props.
+	 * I do not recommend this way! Use React component instead, that way you get more predictable props.
+	 */
+	| OctaneElement<
+			Partial<DotItemDotProps> & Omit<SVGProps<SVGCircleElement>, keyof DotItemDotProps>
+	  >;
+
+/**
+ * Animation metadata forwarded to custom chart shapes.
+ *
+ * These props let a shape react to the current animation state without needing
+ * to know how its parent chart component computes the animated geometry.
+ */
+export interface ShapeAnimationProps {
+	/**
+	 * Normalized animation progress time in the approximately `[0, 1]` range.
+	 * 0 = start of animation
+	 * 1 = end of animation
+	 * Why approximately? This number already includes easing. The typical easing functions are in 0, 1
+	 * but you may construct a custom Bézier curve that goes out of the range
+	 * and so this number may too be out of the range.
+	 */
+	animationElapsedTime?: number;
+	/**
+	 * Whether the parent chart element is currently animating.
+	 */
+	isAnimating?: boolean;
+	/**
+	 * Whether the current animation pass is the initial entrance animation.
+	 * Some Recharts components have different "first render" and "data update" animations
+	 * and this is the property that tracks it. You may choose to override it and control
+	 * which animation renders that way.
+	 */
+	isEntrance?: boolean;
+}
+
+export type ActiveShape<PropsType = Record<string, unknown>, ElementType = SVGElement> =
+	| OctaneElement<Partial<PropsType> & SVGProps<ElementType>>
+	| ((props: PropsType, index?: string | number) => OctaneNode)
+	| (Partial<PropsType> & SVGProps<ElementType>)
+	| boolean;
+
+export type RangeObj = PolarViewBoxRequired & {
+	angle: number;
+	radius: number;
+};
+
+type HTMLElementTarget = Pick<
+	HTMLElement,
+	'getBoundingClientRect' | 'offsetWidth' | 'offsetHeight'
+>;
+type SVGElementTarget = Pick<SVGGraphicsElement, 'getBoundingClientRect' | 'getBBox'>;
+
+/**
+ * Simplified version of the NativeMouseEvent so that we don't have to mock the whole thing in tests.
+ *
+ * This is meant to represent the NativeMouseEvent
+ * which is a wrapper on top of https://developer.mozilla.org/en-US/docs/Web/API/NativeMouseEvent
+ */
+export interface HTMLMousePointer {
+	clientX: number;
+	clientY: number;
+	currentTarget: HTMLElementTarget;
+}
+
+export interface HTMLTouchPointer {
+	touches: ArrayLike<Pick<Touch, 'clientX' | 'clientY'>>;
+	currentTarget: HTMLElementTarget;
+}
+
+/**
+ * Simplified version of the NativeMouseEvent for SVG elements.
+ *
+ * Similar to MousePointer but uses SVGGraphicsElement properties instead of HTMLElement properties.
+ * SVG elements use getBBox() to get the intrinsic size instead of offsetWidth/offsetHeight.
+ */
+export interface SVGMousePointer {
+	clientX: number;
+	clientY: number;
+	currentTarget: SVGElementTarget;
+}
+
+export interface SVGTouchPointer {
+	touches: ArrayLike<Pick<Touch, 'clientX' | 'clientY'>>;
+	currentTarget: SVGElementTarget;
+}
+
+/**
+ * Recharts accepts mouse events from both HTML and SVG elements.
+ */
+export type MousePointer = HTMLMousePointer | SVGMousePointer;
+export type TouchPointer = HTMLTouchPointer | SVGTouchPointer;
+
+/**
+ * Coordinates relative to the top-left corner of the active element.
+ * Also include scale which means that element that's scaled will return the same coordinates as element that's not scaled.
+ */
+export interface RelativePointer {
+	relativeX: number;
+	relativeY: number;
+}
+
+/**
+ * Data provider means that this component accepts a `data` prop which is where you can input your data into the chart state.
+ * The data is an array of objects, where each object represents a data point.
+ *
+ * DataPointType is the type of each data point object in the data array.
+ *
+ * The data is reused in multiple charts and components. Meaning if you provide data on the chart level,
+ * then all child components, graphical items, legend, tooltip, axes ... will be able to access the data.
+ *
+ * Same goes for the graphical item. If you provide data on the graphical item level,
+ * then that data is visible for the main chart, and all axes, tooltip, legend ... in the whole chart.
+ * This is not scoped to the graphical item only.
+ */
+export interface DataProvider<DataPointType> {
+	/**
+	 * The source data. Each element should be an object.
+	 * The properties of each object represent the values of different data dimensions.
+	 *
+	 * Use the `dataKey` prop to specify which properties to use.
+	 *
+	 * @example data={[{ name: 'a', value: 12 }]}
+	 * @example data={[{ label: 'foo', measurements: [5, 12] }]}
+	 */
+	data?: ChartData<DataPointType>;
+}
+
+/**
+ * Data consumer means that this component accepts a `dataKey` prop which is how you specify
+ * which dimension of the data to use for this component.
+ *
+ * DataPointType is the type of each data point object in the data array.
+ * DataValueType is the type of the value that this dataKey extracts from each data point.
+ */
+export interface DataConsumer<DataPointType, DataValueType> {
+	/**
+	 * The data that you provide via the `data` prop is an array of objects.
+	 * Each object can have multiple properties, each representing a different data dimension.
+	 * Use the `dataKey` prop to specify which property (or dimension) to use for this component.
+	 *
+	 * Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis,
+	 * where they extract different values from the same data objects.
+	 *
+	 * Decides how to extract the value from the data:
+	 * - `string`: the name of the field in the data object;
+	 * - `number`: the index of the field in the data;
+	 * - `function`: a function that receives the data object and returns the value.
+	 */
+	dataKey?: DataKey<DataPointType, DataValueType>;
+}
+
+/**
+ * Props shared with all Cartesian and Polar charts.
+ * There are three charts that do not use these base props, and define their own:
+ * - Treemap
+ * - Sunburst
+ * - Sankey
+ */
+interface BaseChartProps<DataPointType> extends DataProvider<DataPointType>, ExternalMouseEvents {
+	/**
+	 * The width of chart container.
+	 * Can be a number or a percent string like "100%".
+	 *
+	 * @see {@link https://recharts.github.io/en-US/guide/sizes/ Chart sizing guide}
+	 */
+	width?: number | Percent;
+	/**
+	 * The height of chart container.
+	 * Can be a number or a percent string like "100%".
+	 *
+	 * @see {@link https://recharts.github.io/en-US/guide/sizes/ Chart sizing guide}
+	 */
+	height?: number | Percent;
+	id?: string;
+	children?: OctaneNode;
+	className?: string;
+	/**
+	 * Turn on accessibility support for keyboard-only and screen reader users.
+	 *
+	 * @defaultValue true
+	 */
+	accessibilityLayer?: boolean;
+	desc?: string;
+	/**
+	 * Empty space around the container.
+	 *
+	 * @defaultValue {"top":5,"right":5,"bottom":5,"left":5}
+	 */
+	margin?: Partial<Margin>;
+	style?: CSSProperties;
+	/**
+	 * The CSS cursor style applied to the chart container.
+	 * Useful for setting the mouse cursor when hovering over the chart (e.g. `"pointer"`, `"crosshair"`).
+	 */
+	cursor?: CSSProperties['cursor'];
+	/**
+	 * Charts with the same syncId will synchronize Tooltip and Brush events.
+	 *
+	 * @see {@link https://recharts.github.io/en-US/examples/SynchronizedAreaChart/ Synchronized Charts Example}
+	 */
+	syncId?: number | string;
+	/**
+	 * Customize how the charts will synchronize tooltips and brushes.
+	 * `index`: synchronize using the data index in the data array. Index expects that all data has the same length.
+	 * `value`: synchronize using the data value on categorical axis (categorical: XAxis in horizontal layout, YAxis in vertical layout).
+	 * function: a custom sync method which receives tick and data as argument and returns an index.
+	 *
+	 * @defaultValue index
+	 */
+	syncMethod?: SyncMethod;
+	/**
+	 * If and where the chart should appear in the tab order
+	 */
+	tabIndex?: number;
+	/**
+	 * If true, then it will listen to container size changes and adapt the SVG chart accordingly.
+	 * If false, then it renders the chart at the specified width and height and will stay that way
+	 * even if the container size changes.
+	 *
+	 * This is similar to ResponsiveContainer but without the need for an extra wrapper component.
+	 * The `responsive` prop also uses standard CSS sizing rules, instead of custom resolution logic (like ResponsiveContainer does).
+	 * @default false
+	 *
+	 * @see {@link https://recharts.github.io/en-US/guide/sizes/ Chart sizing guide}
+	 */
+	responsive?: boolean;
+}
+
+export interface EventThrottlingProps {
+	/**
+	 * Decides the time interval to throttle events.
+	 * Only events defined in `throttledEvents` prop are throttled.
+	 * All other events are executed immediately/synchronously.
+	 *
+	 * Options:
+	 * - `number`: the time interval in milliseconds
+	 * - `'raf'`: use requestAnimationFrame to schedule updates.
+	 *
+	 * @defaultValue 'raf'
+	 */
+	throttleDelay?: number | 'raf';
+	/**
+	 * Defines which events should be throttled.
+	 * Events not in this list will not be throttled.
+	 *
+	 * Use the special value `'all'` to throttle all events. Empty array means no events are throttled.
+	 *
+	 * Use the prop `throttleDelay` to define the throttling interval.
+	 *
+	 * If an event is on this list, then you lose the opportunity to access the event synchronously.
+	 * Which means that if you want to call `e.preventDefault()` or `e.stopPropagation()` inside the event handler,
+	 * then that event handler must not be in this list.
+	 *
+	 * @defaultValue ["mousemove","touchmove","pointermove","scroll","wheel"]
+	 */
+	throttledEvents?: ReadonlyArray<keyof GlobalEventHandlersEventMap> | 'all';
+}
+
+export interface CartesianChartProps<DataPointType = unknown>
+	extends BaseChartProps<DataPointType>, EventThrottlingProps {
+	/**
+	 * The gap between two bar categories, which can be a percent value or a fixed value.
+	 *
+	 * @defaultValue 10%
+	 *
+	 * @see {@link https://recharts.github.io/en-US/guide/barAlignment/ Bar Alignment Guide}
+	 */
+	barCategoryGap?: number | string;
+	/**
+	 * The gap between two bars in the same category.
+	 *
+	 * @defaultValue 4
+	 *
+	 * @see {@link https://recharts.github.io/en-US/guide/barAlignment/ Bar Alignment Guide}
+	 */
+	barGap?: number | string;
+	/**
+	 * The width or height of each bar. If the barSize is not specified, the size of the
+	 * bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
+	 */
+	barSize?: number | string;
+	/**
+	 * Configures the starting value used to build the internal baseline for non-ranged, non-stacked areas.
+	 *
+	 * WARNING despite the name `dataMin`|`dataMax` this actually reads the domain instead, so it should rather be
+	 * `domainMin`|`domainMax`. This looks like a small detail,
+	 * but it's actually important because domains are usually extended automatically.
+	 * For example the default numerical domain starts from 0.
+	 *
+	 * - `number`: uses the corresponding axis value as a flat baseline
+	 * - `dataMin`: uses the minimum of the value-axis domain
+	 * - `dataMax`: uses the maximum of the value-axis domain
+	 *
+	 * This uses the same `BaseValue` resolution as the `baseValue` prop on `<Area />`, but acts as a fallback:
+	 * item-level `Area.baseValue` takes precedence over the chart-level `baseValue`.
+	 *
+	 * Ignored for stacked areas and for ranged areas where `dataKey` already returns `[min, max]` tuples.
+	 *
+	 * Note that the baseValue does not interact with `animationInterpolateFn`;
+	 * baseValue is always animated by linear interpolation.
+	 * If you want a custom animation then have your `dataKey` return a tuple of two values instead of a single number
+	 * which will also render a ranged Area, and that does work with your custom `animationInterpolateFn`.
+	 */
+	baseValue?: BaseValue;
+	compact?: boolean;
+	dataKey?: DataKey<any>;
+	/**
+	 * The layout of chart defines the orientation of axes, graphical items, and tooltip.
+	 *
+	 * @defaultValue horizontal
+	 */
+	layout?: CartesianLayout;
+	/**
+	 * The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
+	 */
+	maxBarSize?: number;
+	/**
+	 * If `false`, stacked items will be rendered left to right.
+	 * If `true`, stacked items will be rendered right to left.
+	 *
+	 * Render direction affects SVG layering, not x position.
+	 *
+	 * @defaultValue false
+	 */
+	reverseStackOrder?: boolean;
+	/**
+	 * The ARIA role for the chart, which provides semantic information for screen reader users.
+	 */
+	role?: string;
+	/**
+	 * The type of offset function used to generate the lower and upper values in the series array.
+	 * The types are built-in offsets in d3-shape.
+	 * Only applicable for stacked Area or Bar charts.
+	 * Has no effect when the stackId prop is not set on Area or Bar components.
+	 *
+	 * @link https://d3js.org/d3-shape/stack#stack_offset
+	 * @see {@link https://recharts.github.io/en-US/examples/BarChartStackedBySign/ Chart with stackOffset=sign example}
+	 *
+	 * @defaultValue none
+	 */
+	stackOffset?: StackOffsetType;
+	title?: string;
+}
+
+export interface PolarChartProps<DataPointType = unknown>
+	extends BaseChartProps<DataPointType>, EventThrottlingProps {
+	/**
+	 * The gap between two bar categories, which can be a percent value or a fixed value.
+	 *
+	 * @defaultValue 10%
+	 */
+	barCategoryGap?: number | string;
+	/**
+	 * The gap between two bars in the same category.
+	 *
+	 * @defaultValue 4
+	 */
+	barGap?: number | string;
+	/**
+	 * The width or height of each bar. If the barSize is not specified, the size of the
+	 * bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
+	 */
+	barSize?: number | string;
+	/**
+	 * The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width.
+	 * @defaultValue 50%
+	 */
+	cx?: number | string;
+	/**
+	 * The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height.
+	 * @defaultValue 50%
+	 */
+	cy?: number | string;
+	dataKey?: DataKey<any>;
+	/**
+	 * Angle, in degrees, at which the chart should end.
+	 */
+	endAngle?: number;
+	/**
+	 * The inner radius of the chart.
+	 * If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
+	 * @defaultValue 0
+	 */
+	innerRadius?: number | string;
+	/**
+	 * The layout of chart defines the orientation of axes, graphical items, and tooltip.
+	 */
+	layout?: PolarLayout;
+	maxBarSize?: number;
+	/**
+	 * The outer radius of the chart.
+	 * If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
+	 * @defaultValue 80%
+	 */
+	outerRadius?: number | string;
+	reverseStackOrder?: boolean;
+	role?: string;
+	stackOffset?: StackOffsetType;
+	/**
+	 * Angle in degrees from which the chart should start.
+	 */
+	startAngle?: number;
+	title?: string;
+}
+
+export type Percent = `${number}%`;
+
+export type NonEmptyArray<T> = readonly [T, ...T[]];
+
+export const isNonEmptyArray = <T>(
+	arr: ReadonlyArray<T> | null | undefined,
+): arr is NonEmptyArray<T> => Array.isArray(arr) && arr.length > 0;