From 0fed82625bf97dcab56c42a3144809596c998a96 Mon Sep 17 00:00:00 2001
From: Dan Torberg <dan.torberg@caspeco.se>
Date: Wed, 28 Feb 2018 11:09:34 +0100
Subject: [PATCH] Added scatter chart entry to tests file.

---
 types/recharts/recharts-tests.tsx | 93 ++++++++++++++++++-------------
 1 file changed, 54 insertions(+), 39 deletions(-)

diff --git a/types/recharts/recharts-tests.tsx b/types/recharts/recharts-tests.tsx
index e052d692a5..39bcf69c89 100644
--- a/types/recharts/recharts-tests.tsx
+++ b/types/recharts/recharts-tests.tsx
@@ -4,7 +4,8 @@ import * as ReactDOM from 'react-dom';
 import {
     CartesianGrid, Line, LineChart, PieChart, Pie,
     Sector, XAxis, YAxis, Tooltip, ReferenceLine,
-    ReferenceArea, ResponsiveContainer, Label, Brush
+    ReferenceArea, ResponsiveContainer, Label, Brush,
+    ScatterChart, ZAxis, Legend, Scatter
 } from 'recharts';
 
 interface ComponentState {
@@ -86,44 +87,58 @@ class Component extends React.Component<{}, ComponentState> {
             );
         };
         return (
-            <ResponsiveContainer>
-                <LineChart width={500} height={300} data={data}>
-                    <XAxis dataKey="name">
-                        <Label>X axis - name</Label>
-                    </XAxis>
-                    <YAxis>
-                        <Label>Y axis</Label>
-                    </YAxis>
-                    <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
-                    <Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={ this.clickHandler } />
-                    <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
-                    <Tooltip />
-                    <Brush dataKey="name" />
-                    <ReferenceLine />
-                    <ReferenceArea
-                        stroke="red"
-                        fill="red"
-                        y2={1}
-                        strokeOpacity={0.2}
-                        fillOpacity={0.1}
-                    />
-                </LineChart>
-                <PieChart width={800} height={400}>
-                    <Pie
-                        dataKey="value"
-                        activeIndex={this.state.activeIndex}
-                        activeShape={renderActiveShape}
-                        data={data}
-                        cx={300}
-                        cy={200}
-                        innerRadius={60}
-                        outerRadius={80}
-                        fill="#8884d8"
-                    >
-                        <Label>A Pie Chart</Label>
-                    </Pie>
-                </PieChart>
-            </ResponsiveContainer>
+            <div style={{width: "100%", height: "100%"}}>
+                <ResponsiveContainer>
+                    <LineChart width={500} height={300} data={data}>
+                        <XAxis dataKey="name">
+                            <Label>X axis - name</Label>
+                        </XAxis>
+                        <YAxis>
+                            <Label>Y axis</Label>
+                        </YAxis>
+                        <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
+                        <Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={ this.clickHandler } />
+                        <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
+                        <Tooltip />
+                        <Brush dataKey="name" />
+                        <ReferenceLine />
+                        <ReferenceArea
+                            stroke="red"
+                            fill="red"
+                            y2={1}
+                            strokeOpacity={0.2}
+                            fillOpacity={0.1}
+                        />
+                    </LineChart>
+                </ResponsiveContainer>
+                <ResponsiveContainer>
+                    <PieChart width={800} height={400}>
+                        <Pie
+                            dataKey="value"
+                            activeIndex={this.state.activeIndex}
+                            activeShape={renderActiveShape}
+                            data={data}
+                            cx={300}
+                            cy={200}
+                            innerRadius={60}
+                            outerRadius={80}
+                            fill="#8884d8"
+                        >
+                            <Label>A Pie Chart</Label>
+                        </Pie>
+                    </PieChart>
+                </ResponsiveContainer>
+                <ResponsiveContainer>
+                    <ScatterChart width={500} height={300}>
+                        <XAxis type="number" dataKey="uv" name="stature" unit="cm" />
+                        <YAxis dataKey="pv" name="weight" unit="kg" />
+                        <ZAxis dataKey="amt" range={[64, 144]} name="score" unit="km" />
+                        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
+                        <Legend />
+                        <Scatter name="A school" data={data} fill="#8884d8" />
+                    </ScatterChart>
+                </ResponsiveContainer>
+            </div>
         );
     }
 }