From 1fcbecea9930eaf0a3147d1cf3e6c05a3f72b346 Mon Sep 17 00:00:00 2001 From: rapmue Date: Fri, 28 Jul 2017 19:51:51 +0200 Subject: [PATCH] [Recharts] improved the SVG definitions (#18467) * merged definitions with my own. therefor added some types and made changed the namespace back to a module. * fixxed lint errors * added CSSStyleDeclaration to some elements, so that they are directly styleable like in the original example * removed commented out code * commented why points is optional now --- types/recharts/index.d.ts | 48 +++++++++++-------------------- types/recharts/recharts-tests.tsx | 10 +++---- 2 files changed, 22 insertions(+), 36 deletions(-) diff --git a/types/recharts/index.d.ts b/types/recharts/index.d.ts index 515cf6b297..8f0e772cd8 100644 --- a/types/recharts/index.d.ts +++ b/types/recharts/index.d.ts @@ -3,6 +3,7 @@ // Definitions by: Maarten Mulders // Raphael Mueller // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 import * as React from 'react'; @@ -21,7 +22,7 @@ export interface Margin { left: number; } -export interface AreaProps { +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; @@ -40,7 +41,6 @@ export interface AreaProps { name?: string | number; isAnimationActive?: boolean; animationBegin?: number; - animationDuration?: number; animationEasing?: AnimationEasingType; onClick?: RechartsFunction; onMouseDown?: RechartsFunction; @@ -69,7 +69,7 @@ export interface AreaChartProps { } export class AreaChart extends React.Component {} -export interface BarProps { +export interface BarProps extends Partial { layout?: LayoutType; dataKey?: string | number; xAxisId?: string | number; @@ -86,7 +86,6 @@ export interface BarProps { name?: string | number; isAnimationActive?: boolean; animationBegin?: number; - animationDuration?: number; animationEasing?: AnimationEasingType; onClick?: RechartsFunction; onMouseDown?: RechartsFunction; @@ -151,11 +150,9 @@ export interface CartesianAxisProps { } export class CartesianAxis extends React.Component {} -export interface CartesianGridProps { +export interface CartesianGridProps extends Partial { x?: number; y?: number; - width?: number; - height?: number; horizontal?: boolean; vertical?: boolean; horizontalPoints?: any[]; @@ -196,7 +193,7 @@ export interface CrossProps { } export class Cross extends React.Component {} -export interface CurveProps { +export interface CurveProps extends Partial { type?: 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | RechartsFunction; points: any[]; layout?: LayoutType; @@ -228,9 +225,8 @@ export interface DotProps { } export class Dot extends React.Component {} -export interface ErrorBarProps { +export interface ErrorBarProps extends Partial { dataKey?: string | number; - width?: number; strokeWidth?: string; stroke?: string; direction?: string; @@ -246,8 +242,8 @@ export interface LegendProps { iconSize?: number; iconType?: 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'; payload?: any[]; - chartWidth: number; - chartHeight: number; + chartWidth?: number; + chartHeight?: number; margin?: Margin; content?: React.ReactElement | RechartsFunction; wrapperStyle?: any; @@ -262,7 +258,7 @@ export interface LegendProps { } export class Legend extends React.Component {} -export interface LineProps { +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; @@ -271,14 +267,13 @@ export interface LineProps { dot?: boolean | any | React.ReactElement | RechartsFunction; activeDot?: boolean | any | React.ReactElement | RechartsFunction; label?: boolean | any | React.ReactElement | RechartsFunction; - points: any[]; + 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; - animationDuration?: number; animationEasing?: AnimationEasingType; onClick?: RechartsFunction; onMouseDown?: RechartsFunction; @@ -305,7 +300,7 @@ export interface LineChartProps { } export class LineChart extends React.Component {} -export interface PieProps { +export interface PieProps extends Partial { cx?: Percentage | number; cy?: Percentage | number; innerRadius?: Percentage | number; @@ -324,7 +319,6 @@ export interface PieProps { activeShape: any | React.ReactElement | RechartsFunction; isAnimationActive?: boolean; animationBegin?: number; - animationDuration?: number; animationEasing?: AnimationEasingType | RechartsFunction; onClick?: RechartsFunction; onMouseDown?: RechartsFunction; @@ -370,7 +364,7 @@ export interface PolarAngleAxisProps { } export class PolarAngleAxis extends React.Component {} -export interface PolarGridProps { +export interface PolarGridProps extends Partial { cx: number; cy: number; innerRadius: number; @@ -417,7 +411,7 @@ export interface PolygonProps { } export class Polygon extends React.Component {} -export interface RadarProps { +export interface RadarProps extends Partial { dataKey: string | number; points: any[]; shape: Element | RechartsFunction; @@ -426,7 +420,6 @@ export interface RadarProps { label?: boolean | any | Element | RechartsFunction; isAnimationActive?: boolean; animationBegin?: number; - animationDuration?: number; animationEasing?: AnimationEasingType; } export class Radar extends React.Component {} @@ -447,7 +440,7 @@ export interface RadarChartProps { } export class RadarChart extends React.Component {} -export interface RadialBarProps { +export interface RadialBarProps extends Partial { cx?: number; cy?: number; startAngle?: number; @@ -460,7 +453,6 @@ export interface RadialBarProps { data: any[]; isAnimationActive?: boolean; animationBegin?: number; - animationDuration?: number; animationEasing?: AnimationEasingType; onClick?: RechartsFunction; onMouseDown?: RechartsFunction; @@ -491,11 +483,9 @@ export interface RadialBarChartProps { } export class RadialBarChart extends React.Component {} -export interface RectangleProps { +export interface RectangleProps extends Partial { x?: number; y?: number; - width?: number; - height?: number; radius?: number; onClick?: RechartsFunction; onMouseDown?: RechartsFunction; @@ -569,7 +559,7 @@ export interface ResponsiveContainerProps { } export class ResponsiveContainer extends React.Component {} -export interface ScatterProps { +export interface ScatterProps extends Partial { legendType?: LegendType; xAxisId?: string | number; yAxisId?: string | number; @@ -580,7 +570,6 @@ export interface ScatterProps { points: any[]; isAnimationActive?: boolean; animationBegin?: number; - animationDuration?: number; animationEasing?: AnimationEasingType; onClick?: RechartsFunction; onMouseDown?: RechartsFunction; @@ -627,10 +616,9 @@ export interface SectorProps { } export class Sector extends React.Component {} -export interface TextProps { +export interface TextProps extends Partial { scaleToFit?: boolean; angle?: number; - width?: number; textAnchor?: 'start' | 'middle' | 'end' | 'inherit'; verticalAnchor?: 'start' | 'middle' | 'end'; } @@ -669,7 +657,6 @@ export interface TooltipProps { itemSorter?: RechartsFunction; isAnimationActive?: boolean; animationBegin?: number; - animationDuration?: number; animationEasing?: AnimationEasingType; } export class Tooltip extends React.Component {} @@ -681,7 +668,6 @@ export interface TreemapProps { aspectRatio: number; isAnimationActive?: boolean; animationBegin?: number; - animationDuration?: number; animationEasing?: AnimationEasingType; } export class Treemap extends React.Component {} diff --git a/types/recharts/recharts-tests.tsx b/types/recharts/recharts-tests.tsx index 70f60d5d74..ddbbbe95f6 100644 --- a/types/recharts/recharts-tests.tsx +++ b/types/recharts/recharts-tests.tsx @@ -15,12 +15,12 @@ const Component = (props: {}) => { ]; return ( - + - - - - + + + + ); };