From 48e32a92e7cd577442b3f1704548fb09d5ae7ba7 Mon Sep 17 00:00:00 2001
From: Gonzalo D'Elia <gonzalo.n.delia@gmail.com>
Date: Wed, 16 Oct 2019 18:54:37 -0300
Subject: [PATCH] Upgraded types to latest version: Added id field for Bar,
 Line, Scatter, Area and properties gap and leaveTimeOut in Brush (#38680)

---
 types/recharts/index.d.ts         |  9 ++++++++-
 types/recharts/recharts-tests.tsx | 31 +++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/types/recharts/index.d.ts b/types/recharts/index.d.ts
index c527465e46..304243f539 100644
--- a/types/recharts/index.d.ts
+++ b/types/recharts/index.d.ts
@@ -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> { }
diff --git a/types/recharts/recharts-tests.tsx b/types/recharts/recharts-tests.tsx
index 56eff54aa6..622f142d5a 100644
--- a/types/recharts/recharts-tests.tsx
+++ b/types/recharts/recharts-tests.tsx
@@ -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>
         );
     }