Added scatter chart entry to tests file.

This commit is contained in:
Dan Torberg
2018-03-05 08:54:10 +01:00
parent aac52dbc24
commit 0fed82625b
+54 -39
View File
@@ -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>
);
}
}