From bc20b02f4ce24e255f8fdd1bcf5799d3b8477f89 Mon Sep 17 00:00:00 2001 From: ZheyangSong Date: Mon, 6 Nov 2017 16:16:55 -0800 Subject: [PATCH] Recharts Typing Update + Many interfaces are partially shaped or wrongly shaped. + Replace tab with 4-spaces --- types/recharts/index.d.ts | 1393 +++++++++++++++-------------- types/recharts/recharts-tests.tsx | 1 + 2 files changed, 743 insertions(+), 651 deletions(-) diff --git a/types/recharts/index.d.ts b/types/recharts/index.d.ts index c9bf71283d..81fa7aee98 100644 --- a/types/recharts/index.d.ts +++ b/types/recharts/index.d.ts @@ -3,843 +3,934 @@ // Definitions by: Maarten Mulders // Raphael Mueller // Roy Xue +// Zheyang Song // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 import * as React from 'react'; +import { CurveFactory } from 'd3-shape'; export type Percentage = string; export type RechartsFunction = () => void; export type TickFormatterFunction = (value: any) => any; +export type TickGeneratorFunction = (noTicksProps: object) => any[]; export type LabelFormatter = (label: string | number) => React.ReactNode; export type TooltipFormatter = (value: string | number | Array, name: string, entry: TooltipPayload, index: number) => React.ReactNode; export type ItemSorter = (a: T, b: T) => number; export type ContentRenderer

= (props: P) => React.ReactNode; +export type DataKey = string | number | ((dataObject: any) => number | [number, number]); -export type LegendType = 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'; +export type IconType = 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'; +export type LegendType = IconType | 'none'; export type LayoutType = 'horizontal' | 'vertical'; export type AnimationEasingType = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'; -export type ScaleType = 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utcTime' | 'sequential' | 'threshold'; -export type PositionType = 'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside'| 'insideLeft' | 'insideRight' | - 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight' | 'insideStart' | 'insideEnd' | 'end' | 'center'; +export type ScaleType = + 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | + 'ordinal' | 'quantile' | 'quantize' | 'utcTime' | 'sequential' | 'threshold'; +export type PositionType = + 'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside'| 'insideLeft' | 'insideRight' | + 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | + 'insideBottomRight' | 'insideStart' | 'insideEnd' | 'end' | 'center'; +export type StackOffsetType = 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette'; +export type LineType = + 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | + 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | CurveFactory; +export type AxisInterval = number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd'; -export type PartialAndNumber = { - [P in keyof T]?: number | T[P]; -}; +export type PickedCSSStyleDeclarationKeys = + 'alignmentBaseline' | 'baselineShift' | 'clip' | 'clipPath' | 'clipRule' | 'color' | + 'colorInterpolationFilters' | 'cursor' | 'direction' | 'display' | 'dominantBaseline' | + 'enableBackground' | 'fill' | 'fillRule' | 'filter' | 'floodColor' | + 'floodOpacity' | 'font' | 'fontFamily' | 'fontStretch' | 'fontStyle' | 'fontVariant' | + 'glyphOrientationHorizontal' | 'glyphOrientationVertical' | 'letterSpacing' | 'lightingColor' | + 'markerEnd' | 'markerMid' | 'markerStart' | 'mask' | 'overflow' | 'pointerEvents' | + 'stopColor' | 'strokeDasharray' | 'strokeLinecap' | 'strokeLinejoin' | 'textAnchor' | + 'textDecoration' | 'unicodeBidi' | 'visibility' | 'writingMode' | 'transform'; -export interface Margin { - top: number; - right: number; - bottom: number; - left: number; +export interface Point { + x: number; + y: number; + value: number | any[]; } -export interface AreaProps extends Partial { - type?: 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | RechartsFunction; - dataKey?: string | number; - xAxisId?: string | number; - yAxisId?: string | number; - legendType?: LegendType; - dot?: boolean | any | React.ReactElement | RechartsFunction; - activeDot?: boolean | any | React.ReactElement | RechartsFunction; - label?: boolean | any | React.ReactElement | RechartsFunction; - stroke?: string; - layout?: LayoutType; - baseLine?: number | any[]; - points?: any[]; - stackId?: string | number; - connectNulls?: boolean; - unit?: string | number; - name?: string | number; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface Margin { + top: number; + right: number; + bottom: number; + left: number; +} + +export interface Animatable { + onAnimationStart?: RechartsFunction; + onAnimationEnd?: RechartsFunction; + animationId?: number; + isAnimationActive?: boolean; + isUpdateAnimationActive?: boolean; + animationBegin?: number; + animationDuration?: number; + animationEasing?: AnimationEasingType; +} + +export interface CategoricalChartWrapper { + syncId?: string | number; + compact?: boolean; + width?: number; + height?: number; + data?: object[]; + layout?: L; + stackOffset?: StackOffsetType; + throttleDelay?: number; + margin?: Partial; + barCategoryGap?: number | string; + barGap?: number | string; + barSize?: number | string; + maxBarSize?: number; + style?: object; + className?: string; + children?: React.ReactNode | React.ReactNode[]; + onClick?: RechartsFunction; + onMouseLeave?: RechartsFunction; + onMouseEnter?: RechartsFunction; + onMouseMove?: RechartsFunction; + onMouseDown?: RechartsFunction; + onMouseUp?: RechartsFunction; + reverseStackOrder?: boolean; +} + +export interface EventAttributes { + onClick?: RechartsFunction; + onMouseDown?: RechartsFunction; + onMouseUp?: RechartsFunction; + onMouseOver?: RechartsFunction; + onMouseMove?: RechartsFunction; + onMouseOut?: RechartsFunction; + onMouseEnter?: RechartsFunction; + onMouseLeave?: RechartsFunction; + onTouchEnd?: RechartsFunction; + onTouchMove?: RechartsFunction; + onTouchStart?: RechartsFunction; + onTouchCancel?: RechartsFunction; +} + +export interface PresentationAttributes extends Pick { + angle: number; + colorInterpolation: string; + colorProfile: string; + colorRendering: string; + fillOpacity: number | string; + fontSize: number | string; + fontSizeAdjust: number | string; + fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | + 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'inherit'; + imageRendering: 'auto' | 'optimizeSpeed' | 'optimizeQuality' | 'inherit'; + kerning: number | string; + opacity: number | string; + shapeRendering: 'auto' | 'optimizeSpeed' | 'crispEdges' | 'geometricPrecision' | 'inherit'; + stopOpacity: number | string; + stroke: number | string; + strokeDashoffset: number | string; + strokeMiterlimit: number | string; + strokeOpacity: number | string; + strokeWidth: number | string; + textRendering: 'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision' | 'inherit'; + wordSpacing: number | string; + style: object; + width: number; + height: number; + dx: number; + dy: number; + x: X; + y: Y; + r: number; +} + +export interface AreaProps extends EventAttributes, Partial, Animatable { + dataKey: DataKey; // As the source code states, dataKey will replace valueKey in 1.1.0 and it'll be required (it's already required in current implementation). + className?: string; + type?: LineType; + unit?: string | number; + name?: string | number; + xAxisId?: string | number; + yAxisId?: string | number; + xAxis?: object; + yAxis?: object; + stackId?: string | number; + legendType?: LegendType; + connectNulls?: boolean; + activeDot?: boolean | object | React.ReactElement | ContentRenderer; + dot?: boolean | object | React.ReactElement | ContentRenderer; + label?: boolean | object | React.ReactElement | Label['content']; + hide?: boolean; + layout?: LayoutType; + baseLine?: number | any[]; + isRange?: boolean; + points?: Point[]; } export class Area extends React.Component { } -export interface AreaChartProps { - layout?: LayoutType; - syncId?: string; - width: number; - height: number; - data: any[]; - margin?: Margin; - stackOffset?: 'expand' | 'none' | 'wiggle' | 'silhouette'; - baseValue?: number | 'dataMin' | 'dataMax' | 'auto'; - onClick?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseLeave?: RechartsFunction; -} +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export type AreaChartProps = CategoricalChartWrapper & EventAttributes; export class AreaChart extends React.Component { } -export interface BarProps extends Partial { - layout?: LayoutType; - dataKey?: string | number; - xAxisId?: string | number; - yAxisId?: string | number; - legendType?: LegendType; - label?: boolean | any | React.ReactElement | RechartsFunction; - data?: any[]; - barSize?: number; - maxBarSize?: number; - minPointSize?: number; - shape?: React.ReactElement | RechartsFunction; - stackId?: string | number; - unit?: string | number; - name?: string | number; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface BarData { + x: number; + y: number; + width: number; + height: number; + radius: number | any[]; + value: number | string | any[]; +} + +export interface BarProps extends EventAttributes, Partial, Animatable { + dataKey: DataKey; // As the source code states, dataKey will replace valueKey in 1.1.0 and it'll be required (it's already required in current implementation). + className?: string; + layout?: LayoutType; + xAxisId?: string | number; + yAxisId?: string | number; + yAxis?: object; + xAxis?: object; + stackId?: string | number; + barSize?: number; + unit?: string | number; + name?: string | number; + legendType?: LegendType; + minPointSize?: number; + maxBarSize?: number; + hide?: boolean; + shape?: React.ReactElement | ContentRenderer; + data?: BarData[]; } export class Bar extends React.Component { } -export interface BarChartProps { - layout?: LayoutType; - syncId?: string; - width?: number; - height?: number; - data?: any[]; - margin?: Margin; - barCategoryGap?: Percentage | number; - barGap?: Percentage | number; - barSize?: number; - maxBarSize?: number; - stackOffset?: 'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign'; - onClick?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseLeave?: RechartsFunction; -} +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export type BarChartProps = CategoricalChartWrapper & EventAttributes; export class BarChart extends React.Component { } export interface BrushProps { - dataKey: number | string; - x?: number; - y?: number; - width?: number; - height?: number; - data: any[]; - travellerWidth?: number; - startIndex?: number; - endIndex?: number; - tickFormatter?: TickFormatterFunction; - onChange?: RechartsFunction; + className?: string; + fill?: string; + stroke?: string; + x: number; + y: number; + width: number; + height: number; + travellerWidth?: number; + padding?: Partial; + dataKey?: DataKey; + data?: any[]; + startIndex?: number; + endIndex?: number; + tickFormatter?: TickFormatterFunction; + children?: React.ReactNode; + onChange?: (newIndex: { + startIndex: number; + endIndex: number; + }) => void; + updateId?: string | number; } export class Brush extends React.Component { } -export interface CartesianAxisProps { - x?: number; - y?: number; - width?: number; - height?: number; - orientation?: 'top' | 'bottom' | 'left' | 'right'; - viewBox?: ViewBox; - axisLine?: boolean | any; - tickLine?: boolean | any; - minTickGap?: number; - tickSize?: number; - interval?: "preserveStart" | "preserveEnd" | "preserveStartEnd" | number; - tick?: boolean | any | React.ReactElement | RechartsFunction; - label?: string | number | React.ReactElement | ContentRenderer; - mirror?: boolean; +export interface CartesianAxisProps extends EventAttributes, Partial { + className?: string; + x?: number; + y?: number; + width?: number; + height?: number; + orientation?: 'top' | 'bottom' | 'left' | 'right'; + viewBox?: ViewBox; + tick?: boolean | ContentRenderer | object | React.ReactElement; + axisLine?: boolean | object; + tickLine?: boolean | object; + mirror?: boolean; + minTickGap?: number; + ticks?: any[]; + tickSize?: number; + stroke?: string; + tickFormatter?: TickFormatterFunction; + ticksGenerator?: TickGeneratorFunction; + interval?: AxisInterval; } export class CartesianAxis extends React.Component { } -export interface CartesianGridProps extends Partial { - x?: number; - y?: number; - horizontal?: boolean; - vertical?: boolean; - horizontalPoints?: any[]; - verticalPoints?: any[]; +export interface CartesianGridProps extends Partial { + y?: number; + width?: number; + height?: number; + horizontal?: object | React.ReactElement | ContentRenderer | boolean; + vertical?: object | React.ReactElement | ContentRenderer | boolean; + horizontalPoints?: number[]; + verticalPoints?: number[]; + horizontalCoordinatesGenerator?: (arg: { + yAxis: CartesianGridProps['yAxis']; + width: CartesianGridProps['chartWidth']; + height: CartesianGridProps['chartHeight']; + offset: CartesianGridProps['offset']; + }) => number[]; + verticalCoordinatesGenerator?: (arg: { + yAxis: CartesianGridProps['xAxis']; + width: CartesianGridProps['chartWidth']; + height: CartesianGridProps['chartHeight']; + offset: CartesianGridProps['offset']; + }) => number[]; + xAxis?: object; + yAxis?: object; + offset?: object; + chartWidth?: number; + chartHeight?: number; } export class CartesianGrid extends React.Component { } -export interface CellProps { - fill?: string; - stroke?: string; -} +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export type CellProps = Partial; export class Cell extends React.Component { } -export interface ComposedChartProps { - layout?: LayoutType; - syncId?: string; - width?: number; - height?: number; - data?: any[]; - margin?: Margin; - barCategoryGap?: Percentage | number; - barGap?: number; - barSize?: number; - onClick?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseLeave?: RechartsFunction; -} +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export type ComposedChartProps = CategoricalChartWrapper & EventAttributes; export class ComposedChart extends React.Component { } -export interface CrossProps { - x?: number; - y?: number; - top?: number; - left?: number; - width?: number; - height?: number; +export interface CrossProps extends Partial { + className?: string; + x?: number; + y?: number; + width?: number; + height?: number; + top?: number; + left?: number; } export class Cross extends React.Component { } -export interface CurveProps extends Partial { - type?: 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | RechartsFunction; - points: any[]; - layout?: LayoutType; - baseLine?: number | any[]; - connectNulls?: boolean; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export interface CurveProps extends EventAttributes, Partial { + className?: string; + type?: LineType; + layout?: LayoutType; + baseLine?: number | any[]; + points?: object[]; + connectNulls?: boolean; + path?: string; + pathRef?: React.Ref; } export class Curve extends React.Component { } -export interface DotProps { - cx: number; - cy: number; - r: number; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseLeave?: RechartsFunction; +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export interface DotProps extends EventAttributes { + className?: string; + cx?: number; + cy?: number; + r?: number; } export class Dot extends React.Component { } -export interface ErrorBarProps extends Partial { - dataKey?: string | number; - strokeWidth?: string; - stroke?: string; - direction?: string; +export interface ErrorBarProps { + dataKey: DataKey; // As the source code states, dataKey will replace valueKey in 1.1.0 and it'll be required (it's already required in current implementation). + data?: any[]; + xAxis?: object; + yAxis?: object; + layout?: string; + dataPointFormatter?: (entry: any, dataKey: DataKey) => { x: number; y: number, value: any; errorVal: any; }; + stroke?: string; + strokeWidth?: number; + width?: number; + offset?: number; } export class ErrorBar extends React.Component { } +export interface LegendPayload { + value: any; + id: any; + type: LegendType; +} + export interface LegendProps { - width?: number; - height?: number; - layout?: LayoutType; - align?: 'left' | 'center' | 'right'; - verticalAlign?: 'top' | 'middle' | 'bottom'; - iconSize?: number; - iconType?: 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'; - payload?: any[]; - chartWidth?: number; - chartHeight?: number; - margin?: Margin; - content?: React.ReactElement | ContentRenderer; - wrapperStyle?: any; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; + content?: React.ReactElement | ContentRenderer; + wrapperStyle?: object; + chartWidth?: number; + chartHeight?: number; + width?: number; + height?: number; + iconSize?: number; + iconType?: IconType; + layout?: LayoutType; + align?: 'left' | 'center' | 'right'; + verticalAlign?: 'top' | 'middle' | 'bottom'; + margin?: Partial; + payload?: LegendPayload[]; + formatter?: RechartsFunction; + onClick?: RechartsFunction; + onMouseEnter?: RechartsFunction; + onMouseLeave?: RechartsFunction; + onBBoxUpdate?: (box: { width: number; height: number; }) => void; } export class Legend extends React.Component { } -export interface LineProps extends Partial { - type?: 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | RechartsFunction; - dataKey: string | number; - xAxisId?: string | number; - yAxisId?: string | number; - legendType?: LegendType; - dot?: boolean | any | React.ReactElement | RechartsFunction; - activeDot?: boolean | any | React.ReactElement | RechartsFunction; - label?: boolean | any | React.ReactElement | RechartsFunction; - points?: any[]; // made this points property partial, since in every example they don't use this property. But their definition says not optional. - layout?: LayoutType; - connectNulls?: boolean; - unit?: string | number; - name?: string | number; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface LineProps extends EventAttributes, Partial, Animatable { + className?: string; + type?: LineType; + unit?: string | number; + name?: string | number; + xAxisId?: string | number; + yAxisId?: string | number; + yAxis?: object; + xAxis?: object; + legendType?: LegendType; + layout?: LayoutType; + connectNulls?: boolean; + hide?: boolean; + activeDot?: object | React.ReactElement | ContentRenderer | boolean; + dot?: object | React.ReactElement | ContentRenderer | boolean; + top?: number; + left?: number; + width?: number; + height?: number; + dataKey: string | number; // As the source code states, dataKey will replace valueKey in 1.1.0 and it'll be required (it's already required in current implementation). + label?: boolean | object | React.ReactElement | Label['content']; + points?: Point[]; } export class Line extends React.Component { } -export interface LineChartProps { - layout?: LayoutType; - syncId?: string; - width?: number; - height?: number; - data?: any[]; - margin?: Margin; - onClick?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseLeave?: RechartsFunction; -} +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export type LineChartProps = CategoricalChartWrapper & EventAttributes; export class LineChart extends React.Component { } -export interface PieProps extends Partial { - cx?: Percentage | number; - cy?: Percentage | number; - innerRadius?: Percentage | number; - outerRadius?: Percentage | number; - startAngle?: number; - endAngle?: number; - minAngle?: number; - paddingAngle?: number; - nameKey?: string; - dataKey?: string; - valueKey?: string; - legendType?: LegendType; - label?: boolean | any | React.ReactElement | RechartsFunction; - labelLine?: boolean | any | React.ReactElement | RechartsFunction; - data: any[]; - activeIndex?: number | number[]; - activeShape?: any | React.ReactElement | RechartsFunction; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType | RechartsFunction; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface PieProps extends EventAttributes, Partial, Animatable { + className?: string; + dataKey: DataKey; // As the source code states, dataKey will replace valueKey in 1.1.0 and it'll be required (it's already required in current implementation). + cx?: number | string; + cy?: number | string; + startAngle?: number; + endAngle?: number; + paddingAngle?: number; + innerRadius?: number | string; + outerRadius?: number | string; + cornerRadius?: number | string; + nameKey?: string | number | ((dataObject: any) => number); + valueKey?: string | number | ((dataObject: any) => number); + data?: object[]; + minAngle?: number; + legendType?: LegendType; + maxRadius?: number; + sectors?: object[]; + hide?: boolean; + labelLine?: object | ContentRenderer | React.ReactElement | boolean; + label?: { + offsetRadius: number; + } | Label['content'] | React.ReactElement | boolean; + activeShape?: object |ContentRenderer | React.ReactElement; + activeIndex?: number | number[]; } export class Pie extends React.Component { } -export interface PieChartProps { - width: number; - height: number; - margin?: Margin; - onClick?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export interface PieChartProps extends EventAttributes, CategoricalChartWrapper<'centric'> { + startAngle?: number; + endAngle?: number; + cx?: number | string; + cy?: number | string; + innerRadius?: number | string; + outerRadius?: number | string; } export class PieChart extends React.Component { } -export interface PolarAngleAxisProps { - dataKey: string | number; - cx: number; - cy: number; - radius: Percentage | number; - axisLine?: boolean | any; - axisLineType?: string; - tickLine?: boolean | any; - tick?: boolean | any | React.ReactElement | RechartsFunction; - ticks: any[]; - orient?: string; - tickFormatter: TickFormatterFunction; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface PolarAngleAxisTick { + value: any; + coordinate: number; +} + +export interface PolarAngleAxisProps extends EventAttributes, Partial { + type?: 'number' | 'category'; + angleAxisId?: string | number; + dataKey?: DataKey; // As the source code states, dataKey will replace valueKey in 1.1.0 and it'll be required (it's already required in current implementation). + cx?: number; + cy?: number; + radius?: Percentage | number; + hide?: boolean; + scale?: ScaleType | RechartsFunction; // this seems not being used by the lib. + axisLine?: boolean | object; + axisLineType?: 'polygon' | 'circle'; + tickLine?: boolean | object; + tick?: boolean | ContentRenderer | object | React.ReactElement; + ticks?: PolarAngleAxisTick[]; + stroke?: string; + orientation?: 'inner' | 'outer'; + tickFormatter: TickFormatterFunction; } export class PolarAngleAxis extends React.Component { } -export interface PolarGridProps extends Partial { - cx: number; - cy: number; - innerRadius: number; - outerRadius: number; - polarAngles: any[]; - polarRadius: any[]; - gridType?: 'polygon' | 'circle'; +export interface PolarGridProps extends Partial { + cx?: number; + cy?: number; + innerRadius?: number; + outerRadius?: number; + polarAngles?: number[]; + polarRadius?: number[]; + gridType?: 'polygon' | 'circle'; } export class PolarGrid extends React.Component { } -export interface PolarRadiusAxisProps { - angle?: number; - cx: number; - cy: number; - domain?: any[]; - label?: string | number | React.ReactElement | RechartsFunction; - orientation?: "left" | "right" | "middle"; - axisLine?: boolean | any; - tick?: boolean | any | Element | RechartsFunction; - tickFormatter: TickFormatterFunction; - tickCount?: number; - scale?: ScaleType | RechartsFunction; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface PolarRadiusAxisTick { + value: any; + coordinate: number; +} + +export type PolarRadiusAxisDomain = number | 'auto' | 'dataMin' | 'dataMax'; + +export interface PolarRadiusAxisProps extends EventAttributes, Partial { + type?: 'number' | 'category'; + cx?: number; + cy?: number; + hide?: boolean; + radiusAxisId?: string | number; + angle?: number; + tickCount?: number; + ticks?: PolarRadiusAxisTick[]; + orientation?: "left" | "right" | "middle"; + axisLine?: boolean | object; + tick?: boolean | object | React.ReactElement | ContentRenderer; + stroke?: string; + tickFormatter: TickFormatterFunction; + domain?: PolarRadiusAxisDomain[]; + scale?: ScaleType | RechartsFunction; + allowDataOverflow?: boolean; } export class PolarRadiusAxis extends React.Component { } -export interface PolygonProps { - points: any[]; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface PolygonPoint { + x: number; + y: number; +} + +export interface PolygonProps extends EventAttributes, Partial { + className?: string; + points?: PolygonPoint[]; } export class Polygon extends React.Component { } -export interface RadarProps extends Partial { - dataKey: string | number; - points: any[]; - shape: Element | RechartsFunction; - dot?: boolean | any | Element | RechartsFunction; - legendType?: LegendType; - label?: boolean | any | Element | RechartsFunction; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType; +export interface RadarPoint { + x: number; + y: number; + cx: number; + cy: number; + angle: number; + radius: number; + value: number; + payload: object; +} + +export interface RadarProps extends EventAttributes, Partial, Animatable { + className?: string; + dataKey: DataKey; // As the source code states, dataKey will replace valueKey in 1.1.0 and it'll be required (it's already required in current implementation). + points?: RadarPoint[]; + shape?: React.ReactElement | ContentRenderer; + activeDot?: object | React.ReactElement | ContentRenderer | boolean; + dot?: object | React.ReactElement | ContentRenderer | boolean; + label?: object | React.ReactElement | Label['content'] | boolean; + legendType?: LegendType; + hide?: boolean; } export class Radar extends React.Component { } -export interface RadarChartProps { - width: number; - height: number; - cx?: Percentage | number; - cy?: Percentage | number; - startAngle?: number; - innerRadius?: Percentage | number; - outerRadius?: Percentage | number; - margin?: Margin; - clockWise?: boolean; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; - onClick?: RechartsFunction; +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export interface RadarChartProps extends EventAttributes, CategoricalChartWrapper<'centric'> { + startAngle?: number; + endAngle?: number; + cx?: number | string; + cy?: number | string; + innerRadius?: number | string; + outerRadius?: number | string; } export class RadarChart extends React.Component { } -export interface RadialBarProps extends Partial { - cx?: number; - cy?: number; - startAngle?: number; - endAngle?: number; - maxAngle?: number; - minAngle?: number; - legendType?: LegendType; - label?: boolean | any | React.ReactElement | RechartsFunction; - background?: boolean | any | React.ReactElement | RechartsFunction; - data: any[]; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface RadialBarData { + cx: number; + cy: number; + innerRadius: number; + outerRadius: number; + value: any; +} + +export interface RadialBarProps extends EventAttributes, Partial, Animatable { + className?: string; + dataKey: DataKey; // As the source code states, dataKey will replace valueKey in 1.1.0 and it'll be required (it's already required in current implementation). + angleAxisId?: string | number; + radiusAxisId?: string | number; + shape?: ContentRenderer | React.ReactElement; + activeShape?: object | ContentRenderer | React.ReactElement; + cornerRadius?: number | string; + minPointSize?: number; + maxBarSize?: number; + data?: RadialBarData[]; + legendType?: LegendType; + label?: boolean | React.ReactElement | Label['content'] | object; + background?: boolean | React.ReactElement | ContentRenderer | object; + hide?: boolean; } export class RadialBar extends React.Component { } -export interface RadialBarChartProps { - width?: number; - height?: number; - data?: any[]; - margin?: Margin; - barCategoryGap?: Percentage | number; - barGap?: number; - cx?: Percentage | number; - cy?: Percentage | number; - innerRadius?: Percentage | number; - outerRadius?: Percentage | number; - barSize?: number; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; - onClick?: RechartsFunction; +export interface RadialBarChartProps extends CategoricalChartWrapper<'radial'> { + startAngle?: number; + endAngle?: number; + cx?: string | number; + cy?: string | number; + innerRadius?: string | number; + outerRadius?: string | number; } export class RadialBarChart extends React.Component { } -export interface RectangleProps extends Partial { - x?: number; - y?: number; - radius?: number; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface RectangleProps extends EventAttributes, Partial, Animatable { + className?: string; + x?: number; + y?: number; + width?: number; + height?: number; + radius?: number | any[]; } export class Rectangle extends React.Component { } -export interface ReferenceAreaProps extends PartialAndNumber { - xAxisId?: string | number; - yAxisId?: string | number; - x1?: number | string; - x2?: number | string; - y1?: number | string; - y2?: number | string; - alwaysShow?: boolean; - viewBox?: ViewBox; - xAxis?: any; - yAxis?: any; - label?: string | number | React.ReactElement | ContentRenderer; - isFront?: boolean; +export interface ReferenceAreaProps extends Partial { + className?: number | string; + viewBox?: ViewBox; + xAxis?: object; + yAxis?: object; + isFront?: boolean; + alwaysShow?: boolean; + x1?: number | string; + x2?: number | string; + y1?: number | string; + y2?: number | string; + xAxisId?: string | number; + yAxisId?: string | number; + shape?: ContentRenderer | React.ReactElement; } export class ReferenceArea extends React.Component { } -export interface ReferenceDotProps { - xAxisId?: string | number; - yAxisId?: string | number; - x: number | string; - y: number | string; - r: number; - alwaysShow?: boolean; - xAxis: any; - yAxis: any; - label?: string | number | React.ReactElement | ContentRenderer; - isFront?: boolean; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface ReferenceDotProps extends EventAttributes, Partial> { + className?: number | string; + r?: number; + xAxis?: { scale: (x: ReferenceDotProps['x']) => number }; + yAxis?: { scale: (y: ReferenceDotProps['y']) => number }; + isFront?: boolean; + alwaysShow?: boolean; + x?: number | string; + y?: number | string; + xAxisId?: string | number; + yAxisId?: string | number; + shape?: ContentRenderer< + EventAttributes + & Partial> + & { cx: number; cy: number; } + > | React.ReactElement; } export class ReferenceDot extends React.Component { } -export interface ReferenceLineProps extends PartialAndNumber { - xAxisId?: string | number; - yAxisId?: string | number; - x?: number | string; - y?: number | string; - alwaysShow?: boolean; - viewBox?: ViewBox; - xAxis?: any; - yAxis?: any; - label?: string | number | React.ReactElement | ContentRenderer; - isFront?: boolean; +export interface ReferenceLineProps extends Partial> { + className?: number | string; + viewBox?: ViewBox; + xAxis?: object; + yAxis?: object; + isFront?: boolean; + alwaysShow?: boolean; + x?: number | string; + y?: number | string; + xAxisId?: string | number; + yAxisId?: string | number; + shape?: ContentRenderer< + EventAttributes + & Partial> + & { x1: number; y1: number; x2: number; y2: number; } + > | React.ReactElement; } export class ReferenceLine extends React.Component { } export interface ResponsiveContainerProps { - aspect?: number; - width?: Percentage | number; - height?: Percentage | number; - minWidth?: number; - minHeight?: number; - maxHeight?: Percentage | number; - debounce?: number; + aspect?: number; + width?: string | number; + height?: string | number; + minHeight?: string | number; + minWidth?: string | number; + maxHeight?: string | number; + children: React.ReactNode; + debounce?: number; + id?: string | number; } export class ResponsiveContainer extends React.Component { } -export interface ScatterProps extends Partial { - legendType?: LegendType; - xAxisId?: string | number; - yAxisId?: string | number; - zAxisId?: string | number; - line?: boolean | any | React.ReactElement | RechartsFunction; - shape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | React.ReactElement | RechartsFunction; - lineType?: 'joint' | 'fitting'; - points: any[]; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface ScatterPoint { + cx?: number; + cy?: number; + size?: number; + node?: { + x?: number | string; + y?: number | string; + z?: number | string; + }; + payload?: any; +} + +export interface ScatterProps extends EventAttributes, Partial, Animatable { + xAxisId?: string | number; + yAxisId?: string | number; + zAxisId?: string | number; + line?: boolean | object | RechartsFunction | React.ReactElement; + lineType?: 'joint' | 'fitting'; + lineJointType?: LineType; + legendType?: LegendType; + activeIndex?: number; + activeShape?: object | RechartsFunction | React.ReactElement; + shape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | React.ReactElement | ContentRenderer; + points?: ScatterPoint[]; + hide?: boolean; } export class Scatter extends React.Component { } -export interface ScatterChartProps { - width: number; - height: number; - margin?: Margin; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; -} +// NOTE: the lib's implementation doesn't inherits the event props (it's kept in this definition due to the previous typing definition has it). +export type ScatterChartProps = CategoricalChartWrapper & EventAttributes; export class ScatterChart extends React.Component { } -export interface SectorProps { - cx?: number; - cy?: number; - innerRadius?: number; - outerRadius?: number; - startAngle?: number; - endAngle?: number; - cornerRadius?: number; - fill?: string; - onClick?: RechartsFunction; - onMouseDown?: RechartsFunction; - onMouseUp?: RechartsFunction; - onMouseMove?: RechartsFunction; - onMouseOver?: RechartsFunction; - onMouseOut?: RechartsFunction; - onMouseEnter?: RechartsFunction; - onMouseLeave?: RechartsFunction; +export interface SectorProps extends EventAttributes, Partial { + className?: string; + cx?: number; + cy?: number; + innerRadius?: number; + outerRadius?: number; + startAngle?: number; + endAngle?: number; + cornerRadius?: number | string; } export class Sector extends React.Component { } -export interface TextProps extends Partial { - scaleToFit?: boolean; - angle?: number; - textAnchor?: 'start' | 'middle' | 'end' | 'inherit'; - verticalAnchor?: 'start' | 'middle' | 'end'; +export interface TextProps extends Partial { + scaleToFit?: boolean; + angle?: number; + textAnchor?: 'start' | 'middle' | 'end' | 'inherit'; + verticalAnchor?: 'start' | 'middle' | 'end'; + style?: object; } export class Text extends React.Component { } export interface ViewBox { - x?: number; - y?: number; - width?: number; - height?: number; + x?: number; + y?: number; + width?: number; + height?: number; } + export interface PolarViewBox { - cx?: number; - cy?: number; - innerRadius?: number; - outerRadius?: number; - startAngle?: number; - endAngle?: number; + cx?: number; + cy?: number; + innerRadius?: number; + outerRadius?: number; + startAngle?: number; + endAngle?: number; } + export interface Coordinate { - x: number; - y: number; + x: number; + y: number; } + export interface TooltipPayload { - name: string; - value: string | number | Array; - unit: string; + name: string; + value: string | number | Array; + unit: string; } -export interface TooltipProps { - separator?: string; - offset?: number; - itemStyle?: any; - wrapperStyle?: any; - labelStyle?: any; - cursor?: boolean | any | React.ReactElement | React.StatelessComponent; - viewBox?: ViewBox; - active?: boolean; - coordinate?: Coordinate; - payload?: TooltipPayload[]; - label?: string | number; - content?: React.ReactElement | React.StatelessComponent | ContentRenderer; - formatter?: TooltipFormatter; - labelFormatter?: LabelFormatter; - itemSorter?: ItemSorter; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType; - filterNull?: boolean; + +export interface TooltipProps extends Animatable { + content?: React.ReactElement | React.StatelessComponent | ContentRenderer; + viewBox?: ViewBox; + active?: boolean; + separator?: string; + formatter?: TooltipFormatter; + offset?: number; + itemStyle?: object; + labelStyle?: object; + wrapperStyle?: object; + cursor?: boolean | object | React.ReactElement | React.StatelessComponent; + coordinate?: Coordinate; + position?: Coordinate; + label?: any; + payload?: TooltipPayload[]; + itemSorter?: ItemSorter; + filterNull?: boolean; } export class Tooltip extends React.Component { } -export interface TreemapProps { - data: any[]; - width?: number; - height?: number; - dataKey?: string; - aspectRatio: number; - isAnimationActive?: boolean; - animationBegin?: number; - animationEasing?: AnimationEasingType; -} - -export interface Label { - viewBox?: ViewBox | PolarViewBox; - formatter?: LabelFormatter; - value: string | number; - position?: PositionType; - offset?: number; - content?: React.ReactElement | ContentRenderer