Upgraded types to latest version: Added id field for Bar, Line, Scatter, Area and properties gap and leaveTimeOut in Brush (#38680)

This commit is contained in:
Gonzalo D'Elia
2019-10-16 18:54:37 -03:00
committed by Andrew Branch
parent 9294a66f12
commit 48e32a92e7
2 changed files with 35 additions and 5 deletions

View File

@@ -1,4 +1,4 @@
// Type definitions for Recharts 1.1
// Type definitions for Recharts 1.7
// Project: http://recharts.org/, https://github.com/recharts/recharts
// Definitions by: Raphael Mueller <https://github.com/rapmue>
// Roy Xue <https://github.com/royxue>
@@ -14,6 +14,7 @@
// Leon Ng <https://github.com/iflp>
// Dave Vedder <https://github.com/veddermatic>
// Konstantin Azizov <https://github.com/g07cha>
// Gonzalo Nicolas D'Elia <https://github.com/gndelia>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
@@ -192,6 +193,7 @@ export interface AreaProps extends EventAttributes, Partial<PresentationAttribut
baseLine?: number | any[];
isRange?: boolean;
points?: Point[];
id?: string;
}
export class Area extends React.Component<AreaProps> { }
@@ -233,6 +235,7 @@ export interface BarProps extends EventAttributes, Partial<PresentationAttribute
background?: boolean | React.ReactElement | ContentRenderer<any> | object;
// see label section at http://recharts.org/#/en-US/api/Bar
label?: boolean | Label | LabelProps | React.SFC<LabelProps> | React.ReactElement<LabelProps> | ContentRenderer<any>;
id?: string;
}
export class Bar extends React.Component<BarProps> { }
@@ -260,6 +263,8 @@ export interface BrushProps {
children?: React.ReactNode;
onChange?: RechartsFunction;
updateId?: string | number;
gap?: number;
leaveTimeOut?: number;
}
export class Brush extends React.Component<BrushProps> { }
@@ -434,6 +439,7 @@ export interface LineProps extends EventAttributes, Partial<PresentationAttribut
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).
label?: boolean | object | React.ReactElement | ContentRenderer<any>;
points?: Point[];
id?: string;
}
export class Line extends React.Component<LineProps> { }
@@ -772,6 +778,7 @@ export interface ScatterProps extends EventAttributes, Partial<PresentationAttri
data?: ReadonlyArray<object>;
dataKey?: DataKey;
name?: string | number;
id?: string;
}
export class Scatter extends React.Component<ScatterProps> { }

View File

@@ -5,7 +5,7 @@ import {
CartesianGrid, Line, LineChart, PieChart, Pie,
Sector, XAxis, YAxis, Tooltip, ReferenceLine,
ReferenceArea, ResponsiveContainer, Label, LabelList, Brush,
ScatterChart, ZAxis, Legend, Scatter, Bar, BarChart, Text
ScatterChart, ZAxis, Legend, Scatter, Bar, BarChart, Text, Area, AreaChart
} from 'recharts';
interface ComponentState {
@@ -103,9 +103,11 @@ class Component extends React.Component<{}, ComponentState> {
</YAxis>
<CartesianGrid vertical={true} horizontal={false} verticalFill={["#fafafa", "#c8c8c8"]} />
<Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={this.clickHandler} />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
<Line id="custom-id" type="monotone" dataKey="pv" stroke="#82ca9d" />
<Tooltip />
<Brush dataKey="name" />
<Brush dataKey="name" gap={3} />
<Brush dataKey="name" leaveTimeOut={55} />
<ReferenceLine label={"reference"} />
<ReferenceArea
stroke="red"
@@ -183,7 +185,7 @@ class Component extends React.Component<{}, ComponentState> {
<ZAxis dataKey="amt" range={[64, 144]} name="score" unit="km" />
<Tooltip cursor={{ strokeDasharray: "3 3" }} />
<Legend />
<Scatter name="A school" data={data} fill="#8884d8" />
<Scatter id="custom-id" name="A school" data={data} fill="#8884d8" />
</ScatterChart>
</ResponsiveContainer>
<ResponsiveContainer height={250}>
@@ -201,7 +203,7 @@ class Component extends React.Component<{}, ComponentState> {
<Label position="top" content={this.renderYAxisTitle} />
</YAxis>
<Legend align="right" verticalAlign="top" height={36} width={800} wrapperStyle={{ top: 5 }} />
<Bar dataKey="pv" fill="#8884d8">
<Bar dataKey="pv" fill="#8884d8" id="custom-id">
<LabelList dataKey="name" position="insideTop" angle={45} />
</Bar>
<Bar dataKey="uv" fill="#82ca9d" radius={[10, 10, 0, 0]}>
@@ -209,6 +211,27 @@ class Component extends React.Component<{}, ComponentState> {
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer height={250}>
<AreaChart width={730} height={250} data={data}
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
<stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
</linearGradient>
<linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/>
<stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
</linearGradient>
</defs>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Area id="custom-id" type="monotone" dataKey="uv" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv)" />
<Area type="monotone" dataKey="pv" stroke="#82ca9d" fillOpacity={1} fill="url(#colorPv)" />
</AreaChart>
</ResponsiveContainer>
</div>
);
}