import { AnimationEvent, AriaAttributes, ClipboardEvent, Component, CompositionEvent, CSSProperties, DragEvent, FocusEvent, FormEvent, FunctionComponent, JSX, KeyboardEvent, MouseEvent, PointerEvent, ReactElement, ReactNode, SVGProps, SyntheticEvent, TouchEvent, TransitionEvent, UIEvent, WheelEvent } from 'react'; import type { Props as DotProps } from '../shape/Dot'; import { RechartsScale } from './ChartUtils'; import { AxisRange } from '../state/selectors/axisSelectors'; import { ExternalMouseEvents } from '../chart/types'; import { SyncMethod } from '../synchronisation/types'; import { DotPoint } from '../component/Dots'; import { SVGPropsNoEvents } from './svgPropertiesNoEvents'; import { BaseValue } from '../cartesian/Area'; /** * 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\`. * * Also see https://d3js.org/d3-shape/stack#stack-offsets * (note that the `diverging` offset in d3 is named `sign` in recharts) */ 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'; export type AxisDomainType = 'number' | 'category'; export type DataKey = string | number | ((obj: T) => any); export type PresentationAttributesWithProps = AriaAttributes & DOMAttributesWithProps & Omit, keyof DOMAttributesWithProps>; export type PresentationAttributesAdaptChildEvent = AriaAttributes & DOMAttributesAdaptChildEvent & Omit, keyof DOMAttributesAdaptChildEvent>; export type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'; 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 declare const isPolarCoordinate: (c: Coordinate | PolarCoordinate) => c is PolarCoordinate; export type ScaleType = 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'symlog' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold'; type EventHandler> = { bivarianceHack(props: P, event: E): void; }['bivarianceHack']; type ReactEventHandler = EventHandler>; type ClipboardEventHandler = EventHandler>; type CompositionEventHandler = EventHandler>; type DragEventHandler = EventHandler>; type FocusEventHandler = EventHandler>; type FormEventHandler = EventHandler>; type KeyboardEventHandler = EventHandler>; type MouseEventHandler = EventHandler>; type TouchEventHandler = EventHandler>; type PointerEventHandler = EventHandler>; type UIEventHandler = EventHandler>; type WheelEventHandler = EventHandler>; type AnimationEventHandler = EventHandler>; type TransitionEventHandler = EventHandler>; export interface DOMAttributesWithProps { children?: ReactNode; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; onCopy?: ClipboardEventHandler; onCopyCapture?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onCutCapture?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; onPasteCapture?: ClipboardEventHandler; onCompositionEnd?: CompositionEventHandler; onCompositionEndCapture?: CompositionEventHandler; onCompositionStart?: CompositionEventHandler; onCompositionStartCapture?: CompositionEventHandler; onCompositionUpdate?: CompositionEventHandler; onCompositionUpdateCapture?: CompositionEventHandler; onFocus?: FocusEventHandler; onFocusCapture?: FocusEventHandler; onBlur?: FocusEventHandler; onBlurCapture?: FocusEventHandler; onChange?: FormEventHandler; onChangeCapture?: FormEventHandler; onBeforeInput?: FormEventHandler; onBeforeInputCapture?: FormEventHandler; onInput?: FormEventHandler; onInputCapture?: FormEventHandler; onReset?: FormEventHandler; onResetCapture?: FormEventHandler; onSubmit?: FormEventHandler; onSubmitCapture?: FormEventHandler; onInvalid?: FormEventHandler; onInvalidCapture?: FormEventHandler; onLoad?: ReactEventHandler; onLoadCapture?: ReactEventHandler; onError?: ReactEventHandler; onErrorCapture?: ReactEventHandler; onKeyDown?: KeyboardEventHandler; onKeyDownCapture?: KeyboardEventHandler; onKeyPress?: KeyboardEventHandler; onKeyPressCapture?: KeyboardEventHandler; onKeyUp?: KeyboardEventHandler; onKeyUpCapture?: KeyboardEventHandler; onAbort?: ReactEventHandler; onAbortCapture?: ReactEventHandler; onCanPlay?: ReactEventHandler; onCanPlayCapture?: ReactEventHandler; onCanPlayThrough?: ReactEventHandler; onCanPlayThroughCapture?: ReactEventHandler; onDurationChange?: ReactEventHandler; onDurationChangeCapture?: ReactEventHandler; onEmptied?: ReactEventHandler; onEmptiedCapture?: ReactEventHandler; onEncrypted?: ReactEventHandler; onEncryptedCapture?: ReactEventHandler; onEnded?: ReactEventHandler; onEndedCapture?: ReactEventHandler; onLoadedData?: ReactEventHandler; onLoadedDataCapture?: ReactEventHandler; onLoadedMetadata?: ReactEventHandler; onLoadedMetadataCapture?: ReactEventHandler; onLoadStart?: ReactEventHandler; onLoadStartCapture?: ReactEventHandler; onPause?: ReactEventHandler; onPauseCapture?: ReactEventHandler; onPlay?: ReactEventHandler; onPlayCapture?: ReactEventHandler; onPlaying?: ReactEventHandler; onPlayingCapture?: ReactEventHandler; onProgress?: ReactEventHandler; onProgressCapture?: ReactEventHandler; onRateChange?: ReactEventHandler; onRateChangeCapture?: ReactEventHandler; onSeeked?: ReactEventHandler; onSeekedCapture?: ReactEventHandler; onSeeking?: ReactEventHandler; onSeekingCapture?: ReactEventHandler; onStalled?: ReactEventHandler; onStalledCapture?: ReactEventHandler; onSuspend?: ReactEventHandler; onSuspendCapture?: ReactEventHandler; onTimeUpdate?: ReactEventHandler; onTimeUpdateCapture?: ReactEventHandler; onVolumeChange?: ReactEventHandler; onVolumeChangeCapture?: ReactEventHandler; onWaiting?: ReactEventHandler; onWaitingCapture?: ReactEventHandler; onAuxClick?: MouseEventHandler; onAuxClickCapture?: MouseEventHandler; onClick?: MouseEventHandler; onClickCapture?: MouseEventHandler; onContextMenu?: MouseEventHandler; onContextMenuCapture?: MouseEventHandler; onDoubleClick?: MouseEventHandler; onDoubleClickCapture?: MouseEventHandler; onDrag?: DragEventHandler; onDragCapture?: DragEventHandler; onDragEnd?: DragEventHandler; onDragEndCapture?: DragEventHandler; onDragEnter?: DragEventHandler; onDragEnterCapture?: DragEventHandler; onDragExit?: DragEventHandler; onDragExitCapture?: DragEventHandler; onDragLeave?: DragEventHandler; onDragLeaveCapture?: DragEventHandler; onDragOver?: DragEventHandler; onDragOverCapture?: DragEventHandler; onDragStart?: DragEventHandler; onDragStartCapture?: DragEventHandler; onDrop?: DragEventHandler; onDropCapture?: DragEventHandler; onMouseDown?: MouseEventHandler; onMouseDownCapture?: MouseEventHandler; onMouseEnter?: MouseEventHandler; onMouseLeave?: MouseEventHandler; onMouseMove?: MouseEventHandler; onMouseMoveCapture?: MouseEventHandler; onMouseOut?: MouseEventHandler; onMouseOutCapture?: MouseEventHandler; onMouseOver?: MouseEventHandler; onMouseOverCapture?: MouseEventHandler; onMouseUp?: MouseEventHandler; onMouseUpCapture?: MouseEventHandler; onSelect?: ReactEventHandler; onSelectCapture?: ReactEventHandler; onTouchCancel?: TouchEventHandler; onTouchCancelCapture?: TouchEventHandler; onTouchEnd?: TouchEventHandler; onTouchEndCapture?: TouchEventHandler; onTouchMove?: TouchEventHandler; onTouchMoveCapture?: TouchEventHandler; onTouchStart?: TouchEventHandler; onTouchStartCapture?: TouchEventHandler; onPointerDown?: PointerEventHandler; onPointerDownCapture?: PointerEventHandler; onPointerMove?: PointerEventHandler; onPointerMoveCapture?: PointerEventHandler; onPointerUp?: PointerEventHandler; onPointerUpCapture?: PointerEventHandler; onPointerCancel?: PointerEventHandler; onPointerCancelCapture?: PointerEventHandler; onPointerEnter?: PointerEventHandler; onPointerEnterCapture?: PointerEventHandler; onPointerLeave?: PointerEventHandler; onPointerLeaveCapture?: PointerEventHandler; onPointerOver?: PointerEventHandler; onPointerOverCapture?: PointerEventHandler; onPointerOut?: PointerEventHandler; onPointerOutCapture?: PointerEventHandler; onGotPointerCapture?: PointerEventHandler; onGotPointerCaptureCapture?: PointerEventHandler; onLostPointerCapture?: PointerEventHandler; onLostPointerCaptureCapture?: PointerEventHandler; onScroll?: UIEventHandler; onScrollCapture?: UIEventHandler; onWheel?: WheelEventHandler; onWheelCapture?: WheelEventHandler; onAnimationStart?: AnimationEventHandler; onAnimationStartCapture?: AnimationEventHandler; onAnimationEnd?: AnimationEventHandler; onAnimationEndCapture?: AnimationEventHandler; onAnimationIteration?: AnimationEventHandler; onAnimationIterationCapture?: AnimationEventHandler; onTransitionEnd?: TransitionEventHandler; onTransitionEndCapture?: TransitionEventHandler; } type AdaptChildEventHandler> = { bivarianceHack(data: P, index: number, event: E): void; }['bivarianceHack']; type AdaptChildReactEventHandler = AdaptChildEventHandler>; type AdaptChildClipboardEventHandler = AdaptChildEventHandler>; type AdaptChildCompositionEventHandler = AdaptChildEventHandler>; type AdaptChildDragEventHandler = AdaptChildEventHandler>; type AdaptChildFocusEventHandler = AdaptChildEventHandler>; type AdaptChildFormEventHandler = AdaptChildEventHandler>; type AdaptChildKeyboardEventHandler = AdaptChildEventHandler>; type AdaptChildMouseEventHandler = AdaptChildEventHandler>; type AdaptChildTouchEventHandler = AdaptChildEventHandler>; type AdaptChildPointerEventHandler = AdaptChildEventHandler>; type AdaptChildUIEventHandler = AdaptChildEventHandler>; type AdaptChildWheelEventHandler = AdaptChildEventHandler>; type AdaptChildAnimationEventHandler = AdaptChildEventHandler>; type AdaptChildTransitionEventHandler = AdaptChildEventHandler>; export type DOMAttributesAdaptChildEvent = { children?: ReactNode; dangerouslySetInnerHTML?: { __html: string; }; onCopy?: AdaptChildClipboardEventHandler; onCopyCapture?: AdaptChildClipboardEventHandler; onCut?: AdaptChildClipboardEventHandler; onCutCapture?: AdaptChildClipboardEventHandler; onPaste?: AdaptChildClipboardEventHandler; onPasteCapture?: AdaptChildClipboardEventHandler; onCompositionEnd?: AdaptChildCompositionEventHandler; onCompositionEndCapture?: AdaptChildCompositionEventHandler; onCompositionStart?: AdaptChildCompositionEventHandler; onCompositionStartCapture?: AdaptChildCompositionEventHandler; onCompositionUpdate?: AdaptChildCompositionEventHandler; onCompositionUpdateCapture?: AdaptChildCompositionEventHandler; onFocus?: AdaptChildFocusEventHandler; onFocusCapture?: AdaptChildFocusEventHandler; onBlur?: AdaptChildFocusEventHandler; onBlurCapture?: AdaptChildFocusEventHandler; onChange?: AdaptChildFormEventHandler; onChangeCapture?: AdaptChildFormEventHandler; onBeforeInput?: AdaptChildFormEventHandler; onBeforeInputCapture?: AdaptChildFormEventHandler; onInput?: AdaptChildFormEventHandler; onInputCapture?: AdaptChildFormEventHandler; onReset?: AdaptChildFormEventHandler; onResetCapture?: AdaptChildFormEventHandler; onSubmit?: AdaptChildFormEventHandler; onSubmitCapture?: AdaptChildFormEventHandler; onInvalid?: AdaptChildFormEventHandler; onInvalidCapture?: AdaptChildFormEventHandler; onLoad?: AdaptChildReactEventHandler; onLoadCapture?: AdaptChildReactEventHandler; onError?: AdaptChildReactEventHandler; onErrorCapture?: AdaptChildReactEventHandler; onKeyDown?: AdaptChildKeyboardEventHandler; onKeyDownCapture?: AdaptChildKeyboardEventHandler; onKeyPress?: AdaptChildKeyboardEventHandler; onKeyPressCapture?: AdaptChildKeyboardEventHandler; onKeyUp?: AdaptChildKeyboardEventHandler; onKeyUpCapture?: AdaptChildKeyboardEventHandler; onAbort?: AdaptChildReactEventHandler; onAbortCapture?: AdaptChildReactEventHandler; onCanPlay?: AdaptChildReactEventHandler; onCanPlayCapture?: AdaptChildReactEventHandler; onCanPlayThrough?: AdaptChildReactEventHandler; onCanPlayThroughCapture?: AdaptChildReactEventHandler; onDurationChange?: AdaptChildReactEventHandler; onDurationChangeCapture?: AdaptChildReactEventHandler; onEmptied?: AdaptChildReactEventHandler; onEmptiedCapture?: AdaptChildReactEventHandler; onEncrypted?: AdaptChildReactEventHandler; onEncryptedCapture?: AdaptChildReactEventHandler; onEnded?: AdaptChildReactEventHandler; onEndedCapture?: AdaptChildReactEventHandler; onLoadedData?: AdaptChildReactEventHandler; onLoadedDataCapture?: AdaptChildReactEventHandler; onLoadedMetadata?: AdaptChildReactEventHandler; onLoadedMetadataCapture?: AdaptChildReactEventHandler; onLoadStart?: AdaptChildReactEventHandler; onLoadStartCapture?: AdaptChildReactEventHandler; onPause?: AdaptChildReactEventHandler; onPauseCapture?: AdaptChildReactEventHandler; onPlay?: AdaptChildReactEventHandler; onPlayCapture?: AdaptChildReactEventHandler; onPlaying?: AdaptChildReactEventHandler; onPlayingCapture?: AdaptChildReactEventHandler; onProgress?: AdaptChildReactEventHandler; onProgressCapture?: AdaptChildReactEventHandler; onRateChange?: AdaptChildReactEventHandler; onRateChangeCapture?: AdaptChildReactEventHandler; onSeeked?: AdaptChildReactEventHandler; onSeekedCapture?: AdaptChildReactEventHandler; onSeeking?: AdaptChildReactEventHandler; onSeekingCapture?: AdaptChildReactEventHandler; onStalled?: AdaptChildReactEventHandler; onStalledCapture?: AdaptChildReactEventHandler; onSuspend?: AdaptChildReactEventHandler; onSuspendCapture?: AdaptChildReactEventHandler; onTimeUpdate?: AdaptChildReactEventHandler; onTimeUpdateCapture?: AdaptChildReactEventHandler; onVolumeChange?: AdaptChildReactEventHandler; onVolumeChangeCapture?: AdaptChildReactEventHandler; onWaiting?: AdaptChildReactEventHandler; onWaitingCapture?: AdaptChildReactEventHandler; onAuxClick?: AdaptChildMouseEventHandler; onAuxClickCapture?: AdaptChildMouseEventHandler; onClick?: AdaptChildMouseEventHandler; onClickCapture?: AdaptChildMouseEventHandler; onContextMenu?: AdaptChildMouseEventHandler; onContextMenuCapture?: AdaptChildMouseEventHandler; onDoubleClick?: AdaptChildMouseEventHandler; onDoubleClickCapture?: AdaptChildMouseEventHandler; onDrag?: AdaptChildDragEventHandler; onDragCapture?: AdaptChildDragEventHandler; onDragEnd?: AdaptChildDragEventHandler; onDragEndCapture?: AdaptChildDragEventHandler; onDragEnter?: AdaptChildDragEventHandler; onDragEnterCapture?: AdaptChildDragEventHandler; onDragExit?: AdaptChildDragEventHandler; onDragExitCapture?: AdaptChildDragEventHandler; onDragLeave?: AdaptChildDragEventHandler; onDragLeaveCapture?: AdaptChildDragEventHandler; onDragOver?: AdaptChildDragEventHandler; onDragOverCapture?: AdaptChildDragEventHandler; onDragStart?: AdaptChildDragEventHandler; onDragStartCapture?: AdaptChildDragEventHandler; onDrop?: AdaptChildDragEventHandler; onDropCapture?: AdaptChildDragEventHandler; onMouseDown?: AdaptChildMouseEventHandler; onMouseDownCapture?: AdaptChildMouseEventHandler; onMouseEnter?: AdaptChildMouseEventHandler; onMouseLeave?: AdaptChildMouseEventHandler; onMouseMove?: AdaptChildMouseEventHandler; onMouseMoveCapture?: AdaptChildMouseEventHandler; onMouseOut?: AdaptChildMouseEventHandler; onMouseOutCapture?: AdaptChildMouseEventHandler; onMouseOver?: AdaptChildMouseEventHandler; onMouseOverCapture?: AdaptChildMouseEventHandler; onMouseUp?: AdaptChildMouseEventHandler; onMouseUpCapture?: AdaptChildMouseEventHandler; onSelect?: AdaptChildReactEventHandler; onSelectCapture?: AdaptChildReactEventHandler; onTouchCancel?: AdaptChildTouchEventHandler; onTouchCancelCapture?: AdaptChildTouchEventHandler; onTouchEnd?: AdaptChildTouchEventHandler; onTouchEndCapture?: AdaptChildTouchEventHandler; onTouchMove?: AdaptChildTouchEventHandler; onTouchMoveCapture?: AdaptChildTouchEventHandler; onTouchStart?: AdaptChildTouchEventHandler; onTouchStartCapture?: AdaptChildTouchEventHandler; onPointerDown?: AdaptChildPointerEventHandler; onPointerDownCapture?: AdaptChildPointerEventHandler; onPointerMove?: AdaptChildPointerEventHandler; onPointerMoveCapture?: AdaptChildPointerEventHandler; onPointerUp?: AdaptChildPointerEventHandler; onPointerUpCapture?: AdaptChildPointerEventHandler; onPointerCancel?: AdaptChildPointerEventHandler; onPointerCancelCapture?: AdaptChildPointerEventHandler; onPointerEnter?: AdaptChildPointerEventHandler; onPointerEnterCapture?: AdaptChildPointerEventHandler; onPointerLeave?: AdaptChildPointerEventHandler; onPointerLeaveCapture?: AdaptChildPointerEventHandler; onPointerOver?: AdaptChildPointerEventHandler; onPointerOverCapture?: AdaptChildPointerEventHandler; onPointerOut?: AdaptChildPointerEventHandler; onPointerOutCapture?: AdaptChildPointerEventHandler; onGotPointerCapture?: AdaptChildPointerEventHandler; onGotPointerCaptureCapture?: AdaptChildPointerEventHandler; onLostPointerCapture?: AdaptChildPointerEventHandler; onLostPointerCaptureCapture?: AdaptChildPointerEventHandler; onScroll?: AdaptChildUIEventHandler; onScrollCapture?: AdaptChildUIEventHandler; onWheel?: AdaptChildWheelEventHandler; onWheelCapture?: AdaptChildWheelEventHandler; onAnimationStart?: AdaptChildAnimationEventHandler; onAnimationStartCapture?: AdaptChildAnimationEventHandler; onAnimationEnd?: AdaptChildAnimationEventHandler; onAnimationEndCapture?: AdaptChildAnimationEventHandler; onAnimationIteration?: AdaptChildAnimationEventHandler; onAnimationIterationCapture?: AdaptChildAnimationEventHandler; onTransitionEnd?: AdaptChildTransitionEventHandler; onTransitionEndCapture?: AdaptChildTransitionEventHandler; }; /** The type of easing function to use for animations */ export type AnimationTiming = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'; /** 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 | ReadonlyArray | 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 CategoricalDomain = ReadonlyArray; export type TickProp = SVGProps | ReactElement | ((props: any) => ReactNode) | boolean; /** The props definition of base axis */ export interface BaseAxisProps { /** The type of axis */ type?: AxisDomainType; /** The key of data displayed in the axis */ dataKey?: DataKey; /** * Whether display the axis * * @defaultValue false */ hide?: boolean; /** * The scale type as a string, or scale function * * @defaultValue auto */ scale?: ScaleType | RechartsScale; /** The option for tick */ tick?: TickProp; /** The count of ticks */ tickCount?: number; /** The option for axisLine */ axisLine?: boolean | SVGProps; /** The option for tickLine */ tickLine?: boolean | SVGProps; /** The size of tick line */ 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". */ allowDuplicatedCategory?: boolean; /** * Allow the ticks of axis to be decimals or not. * * @defaultValue true */ allowDecimals?: boolean; /** The domain of scale in this axis */ domain?: AxisDomain; /** Consider hidden elements when computing the domain (defaults to false) */ includeHidden?: boolean; /** The name of data displayed in the axis */ name?: string; /** The unit of data displayed in the axis */ unit?: string; range?: AxisRange; /** axis react component */ AxisComp?: any; /** Needed to allow usage of the label prop on the X and Y axis */ label?: string | number | ReactElement | object; /** The HTML element's class name */ className?: string; } /** 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. */ export type AxisInterval = number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart'; /** * 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. */ export type AxisTick = number | string; export interface TickItem { value: any; coordinate: number; index: number; offset?: number; } export interface CartesianTickItem extends TickItem { tickCoord?: number; tickSize?: number; isShow?: boolean; } export interface Margin { top: number; right: number; bottom: number; left: number; } export interface CartesianViewBox { x?: number; y?: number; width?: number; height?: number; } export type CartesianViewBoxRequired = Required; interface PolarViewBox { cx?: number; cy?: number; innerRadius?: number; outerRadius?: number; startAngle?: number; endAngle?: number; clockWise?: boolean; } export type PolarViewBoxRequired = Required; 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; }; export type ViewBox = CartesianViewBoxRequired | PolarViewBoxRequired; type RecordString = Record; type AdaptEventHandlersReturn = RecordString<(e?: Event) => any> | RecordString<(e: Event) => void> | null; export declare const adaptEventHandlers: (props: RecordString | Component | FunctionComponent | boolean, newHandler?: (e?: Event) => any) => AdaptEventHandlersReturn; export declare const adaptEventsOfChild: (props: RecordString, data: any, index: number) => RecordString<(e?: Event) => any> | null; /** * '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 or to control their preference, * and charts will then see what is allowed and what is not. */ export type TooltipEventType = 'axis' | 'item'; export interface SankeyNode { dx: number; dy: number; name: string; value: any; x: number; y: number; 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 Component */ export type ActiveDotProps = DotProps & { payload: any; index: number; dataKey: DataKey | 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 */ export type ActiveDotType = /** * true | false will turn the default activeDot on and off, respectively */ boolean /** * activeDot can be a custom React Component. * 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 ReactNode 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) => ReactNode) /** * activeDot can be an object; props from here will be appended to the default active dot */ | Partial /** * 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. */ | ReactElement>; /** * 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> & { points: ReadonlyArray; index: number; payload: any; dataKey: DataKey | undefined; value: any; }; /** * This is the type of `dot` prop on: * - Area * - Line * - Radar */ export type DotType = /** * true | false will turn the default dot on and off, respectively */ boolean /** * dot can be a custom React Component. * 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 ReactNode 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) => ReactNode) /** * dot can be an object; props from here will be appended to the default dot */ | Partial /** * 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. */ | ReactElement>; export type ActiveShape, ElementType = SVGElement> = ReactElement> | ((props: PropsType) => ReactElement>) | ((props: unknown) => JSX.Element) | SVGProps | boolean; export type RangeObj = PolarViewBoxRequired & { angle: number; radius: number; }; /** * Simplified version of the MouseEvent so that we don't have to mock the whole thing in tests. * * This is meant to represent the React.MouseEvent * which is a wrapper on top of https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent */ export interface MousePointer { clientX: number; clientY: number; currentTarget: Pick; } /** * Coordinates relative to the top-left corner of the chart. * Also include scale which means that a chart that's scaled will return the same coordinates as a chart that's not scaled. */ export interface ChartPointer { chartX: number; chartY: number; } export interface CartesianChartProps extends Partial { accessibilityLayer?: boolean; barCategoryGap?: number | string; barGap?: number | string; barSize?: number | string; baseValue?: BaseValue; children?: ReactNode; className?: string; compact?: boolean; data?: any[]; dataKey?: DataKey; desc?: string; height?: number | Percent; id?: string; layout?: CartesianLayout; margin?: Partial; maxBarSize?: number; reverseStackOrder?: boolean; role?: string; stackOffset?: StackOffsetType; style?: CSSProperties; syncId?: number | string; syncMethod?: SyncMethod; tabIndex?: number; throttleDelay?: number; title?: string; width?: number | Percent; /** * 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 */ responsive?: boolean; } export interface PolarChartProps extends Partial { accessibilityLayer?: boolean; barCategoryGap?: number | string; barGap?: number | string; barSize?: number | string; children?: ReactNode; className?: string; cx?: number | string; cy?: number | string; data?: any[]; dataKey?: DataKey; desc?: string; endAngle?: number; height?: number | Percent; id?: string; innerRadius?: number | string; layout?: PolarLayout; margin?: Margin; maxBarSize?: number; outerRadius?: number | string; reverseStackOrder?: boolean; role?: string; stackOffset?: StackOffsetType; startAngle?: number; style?: CSSProperties; syncId?: number | string; syncMethod?: SyncMethod; tabIndex?: number; throttleDelay?: number; title?: string; width?: number | Percent; /** * 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 */ responsive?: boolean; } export type Percent = `${number}%`; export type NonEmptyArray = readonly [T, ...T[]]; export declare const isNonEmptyArray: (arr: ReadonlyArray | null | undefined) => arr is NonEmptyArray; export {};