vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-13 05:20:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Recharts] improved the SVG definitions (#18467)

Browse Source 
* 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
This commit is contained in:
rapmue
2017-07-28 10:51:51 -07:00
committed by Andy
parent 4bcdd24cad
commit 1fcbecea99
2 changed files with 22 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/recharts/index.d.ts
Vendored
+17 -31
View File
@@ -3,6 +3,7 @@
// Definitions by: Maarten Mulders <https://github.com/mthmulders/>
// Raphael Mueller <https://github.com/rapmue/>
// 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<CSSStyleDeclaration> {
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<AreaChartProps, {}> {}
export interface BarProps {
export interface BarProps extends Partial<CSSStyleDeclaration> {
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<CartesianAxisProps, {}> {}
export interface CartesianGridProps {
export interface CartesianGridProps extends Partial<CSSStyleDeclaration> {
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<CrossProps, {}> {}
export interface CurveProps {
export interface CurveProps extends Partial<CSSStyleDeclaration> {
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<DotProps, {}> {}
export interface ErrorBarProps {
export interface ErrorBarProps extends Partial<CSSStyleDeclaration> {
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<any> | RechartsFunction;
wrapperStyle?: any;
@@ -262,7 +258,7 @@ export interface LegendProps {
}
export class Legend extends React.Component<LegendProps, {}> {}
export interface LineProps {
export interface LineProps extends Partial<CSSStyleDeclaration> {
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<any> | RechartsFunction;
activeDot?: boolean | any | React.ReactElement<any> | RechartsFunction;
label?: boolean | any | React.ReactElement<any> | 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<LineChartProps, {}> {}
export interface PieProps {
export interface PieProps extends Partial<CSSStyleDeclaration> {
cx?: Percentage | number;
cy?: Percentage | number;
innerRadius?: Percentage | number;
@@ -324,7 +319,6 @@ export interface PieProps {
activeShape: any | React.ReactElement<any> | 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<PolarAngleAxisProps, {}> {}
export interface PolarGridProps {
export interface PolarGridProps extends Partial<CSSStyleDeclaration> {
cx: number;
cy: number;
innerRadius: number;
@@ -417,7 +411,7 @@ export interface PolygonProps {
}
export class Polygon extends React.Component<PolygonProps, {}> {}
export interface RadarProps {
export interface RadarProps extends Partial<CSSStyleDeclaration> {
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<RadarProps, {}> {}
@@ -447,7 +440,7 @@ export interface RadarChartProps {
}
export class RadarChart extends React.Component<RadarChartProps, {}> {}
export interface RadialBarProps {
export interface RadialBarProps extends Partial<CSSStyleDeclaration> {
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<RadialBarChartProps, {}> {}
export interface RectangleProps {
export interface RectangleProps extends Partial<CSSStyleDeclaration> {
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<ResponsiveContainerProps, {}> {}
export interface ScatterProps {
export interface ScatterProps extends Partial<CSSStyleDeclaration> {
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<SectorProps, {}> {}
export interface TextProps {
export interface TextProps extends Partial<CSSStyleDeclaration> {
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<TooltipProps, {}> {}
@@ -681,7 +668,6 @@ export interface TreemapProps {
aspectRatio: number;
isAnimationActive?: boolean;
animationBegin?: number;
animationDuration?: number;
animationEasing?: AnimationEasingType;
}
export class Treemap extends React.Component<TreemapProps, {}> {}
types/recharts/recharts-tests.tsx
+5 -5
View File
@@ -15,12 +15,12 @@ const Component = (props: {}) => {
];
return (
<LineChart width={500} height={300} data={ data }>
<LineChart width={500} height={300} data={data}>
<XAxis dataKey="name"/>
<YAxis />
<CartesianGrid />
<Line type="monotone" dataKey="uv" points={ [] } />
<Line type="monotone" dataKey="pv" points={ [] } />
<YAxis/>
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>
);
};