From 14f39d7936c068746bcd89063fc3634a3cb9901b Mon Sep 17 00:00:00 2001
From: Teemu Koivisto <tkoivisto456@gmail.com>
Date: Fri, 1 Jun 2018 16:11:18 +0300
Subject: [PATCH] Fix missing LabelList typing & update README

---
 types/recharts/README.MD          |  8 ++++++++
 types/recharts/index.d.ts         | 17 +++++++++++++++++
 types/recharts/recharts-tests.tsx | 24 ++++++++++++++++++++++--
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/types/recharts/README.MD b/types/recharts/README.MD
index 063a6dab3c..970e15ec0b 100644
--- a/types/recharts/README.MD
+++ b/types/recharts/README.MD
@@ -2,3 +2,11 @@ Typings for [Recharts](http://recharts.org/), a composable charting library buil
 
 The [Recharts website](https://github.com/recharts/recharts.org) has comprehensive API documentation which is generated from JavaScript files.
 Those files are used as input to generate these typings.
+
+# How to run tests
+
+As of 1.6.2018.
+
+1) Install typescript globally: `npm i -g typescript`
+2) Install React's dependencies: `cd ../react && npm i`
+3) Run tests: `cd ../recharts && tsc`
\ No newline at end of file
diff --git a/types/recharts/index.d.ts b/types/recharts/index.d.ts
index ecdcd1f420..d6e4a084a7 100644
--- a/types/recharts/index.d.ts
+++ b/types/recharts/index.d.ts
@@ -841,6 +841,23 @@ export interface LabelProps {
     content?: React.ReactElement<any> | ContentRenderer<Label>;
 }
 
+export class LabelList extends React.Component<LabelListProps> { }
+
+export interface LabelListProps {
+    angle?: number;
+    children?: React.ReactNode[] | React.ReactNode;
+    className?: string;
+    clockWise?: boolean;
+    content?: React.ReactElement<any> | ContentRenderer<Label>;
+    data?: number;
+    dataKey: string | number | RechartsFunction;
+    formatter?: LabelFormatter;
+    id?: string;
+    offset?: number;
+    position?: PositionType;
+    valueAccessor?: RechartsFunction;
+}
+
 export type AxisDomain = string | number | ContentRenderer<any> | 'auto' | 'dataMin' | 'dataMax';
 
 export interface XPadding {
diff --git a/types/recharts/recharts-tests.tsx b/types/recharts/recharts-tests.tsx
index 7eed634119..d76ede7e97 100644
--- a/types/recharts/recharts-tests.tsx
+++ b/types/recharts/recharts-tests.tsx
@@ -4,8 +4,8 @@ import * as ReactDOM from 'react-dom';
 import {
     CartesianGrid, Line, LineChart, PieChart, Pie,
     Sector, XAxis, YAxis, Tooltip, ReferenceLine,
-    ReferenceArea, ResponsiveContainer, Label, Brush,
-    ScatterChart, ZAxis, Legend, Scatter
+    ReferenceArea, ResponsiveContainer, Label, LabelList, Brush,
+    ScatterChart, ZAxis, Legend, Scatter, Bar, BarChart
 } from 'recharts';
 
 interface ComponentState {
@@ -184,6 +184,26 @@ class Component extends React.Component<{}, ComponentState> {
                         <Scatter name="A school" data={data} fill="#8884d8" />
                     </ScatterChart>
                 </ResponsiveContainer>
+                <ResponsiveContainer>
+                    <BarChart
+                        width={730}
+                        height={250}
+                        data={data}
+                        margin={{ top: 15, right: 30, left: 20, bottom: 5 }}
+                    >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="name">
+                        <Label value="Pages of my website" offset={0} position="insideBottom" />
+                    </XAxis>
+                    <YAxis label='pv of page' />
+                    <Bar dataKey="pv" fill="#8884d8">
+                        <LabelList dataKey="name" position="insideTop" angle={45}  />
+                    </Bar>
+                    <Bar dataKey="uv" fill="#82ca9d">
+                        <LabelList dataKey="uv" position="top" />
+                    </Bar>
+                    </BarChart>
+                </ResponsiveContainer>
             </div>
         );
     }