Skip to content

Commit 206a10a

Browse files
sametkabaysametkabay
committed
add linechart piechart implementation
1 parent cf81355 commit 206a10a

File tree

5 files changed

+112
-17
lines changed

5 files changed

+112
-17
lines changed

‎reactjs/src/scenes/Dashboard/BarChartExample/index.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "recharts";
2+
import * as React from 'react';
3+
4+
const data = [
5+
{ name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
6+
{ name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
7+
{ name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
8+
{ name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
9+
{ name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
10+
{ name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
11+
{ name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
12+
];
13+
14+
class BarChartExample extends React.Component<any>{
15+
render() {
16+
return (
17+
<BarChart width={600} height={350} data={data}
18+
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
19+
<CartesianGrid strokeDasharray="3 3" />
20+
<XAxis dataKey="name" />
21+
<YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
22+
<YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
23+
<Tooltip />
24+
<Legend />
25+
<Bar yAxisId="left" dataKey="pv" fill="#8884d8" />
26+
<Bar yAxisId="right" dataKey="uv" fill="#82ca9d" />
27+
</BarChart>
28+
);
29+
}
30+
}
31+
export default BarChartExample;

‎reactjs/src/scenes/Dashboard/LineChartExample/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class LineChartExample extends React.Component<any>{
2020

2121
render() {
2222
return (
23-
<LineChart width={1200} height={300} data={data}
23+
<LineChart width={1150} height={300} data={data}
2424
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
2525
<XAxis dataKey="name" />
2626
<YAxis />

‎reactjs/src/scenes/Dashboard/PieChartExample/index.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import * as React from 'react';
2+
import { PieChart, Pie, Tooltip } from 'recharts';
3+
4+
const data = [
5+
{ name: 'Chrome', value: 50 },
6+
{ name: 'Mozilla Firefox', value: 30 },
7+
{ name: 'Opera Browser', value: 15 },
8+
{ name: 'Other', value: 5 },
9+
]
10+
11+
class PieChartExample extends React.Component<any>{
12+
state = {
13+
activeIndex: 0,
14+
}
15+
16+
getInitialState() {
17+
return {
18+
activeIndex: 0,
19+
};
20+
}
21+
22+
onPieEnter(data: any, index: any) {
23+
this.setState({
24+
activeIndex: index,
25+
});
26+
}
27+
render() {
28+
return (
29+
<PieChart width={300} height={300}>
30+
<Pie
31+
dataKey="value"
32+
data={data}
33+
cx={150}
34+
cy={150}
35+
outerRadius={80}
36+
fill="#8884d8"
37+
label
38+
/>
39+
<Tooltip />
40+
</PieChart>
41+
);
42+
}
43+
}
44+
45+
export default PieChartExample;
46+

‎reactjs/src/scenes/Dashboard/index.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,10 @@
3737
color: #fff;
3838
}
3939

40-
.dasboardChart{
40+
.dashboardBox{
4141
margin-top: 24px;
4242
padding: 24px;
4343
background: #fff;
44-
min-Height: 360px;
44+
min-Height: 240px;
45+
border-radius: 5px;
4546
}

‎reactjs/src/scenes/Dashboard/index.tsx

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,33 @@ import { Row, Col, Card, Icon } from 'antd';
33

44
import "./index.css"
55
import LineChartExample from './LineChartExample';
6+
import PieChartExample from './PieChartExample';
7+
import BarChartExample from './BarChartExample';
68

79
export class Dashboard extends React.Component<any>{
810
constructor(props: any) {
911
super(props);
1012
setInterval(() => this.setState({ cardLoading: false }), 1000);
1113
setInterval(() => this.setState({ lineChartLoading: false }), 1500);
14+
setInterval(() => this.setState({ barChartLoading: false }), 2000);
15+
setInterval(() => this.setState({ pieChartLoading: false }), 1000);
1216
}
1317
state = {
1418
cardLoading: true,
1519
lineChartLoading: true,
20+
barChartLoading: true,
21+
pieChartLoading: true,
1622
}
1723

1824
render() {
19-
const { cardLoading, lineChartLoading } = this.state;
25+
const { cardLoading, lineChartLoading, barChartLoading, pieChartLoading } = this.state;
2026
return (
2127
<React.Fragment>
22-
2328
<Row gutter={16}>
2429
<Col
2530
className={"dashboardCard"}
26-
xs={{ offset: 2, span: 22 }}
27-
sm={{ offset: 2, span: 22 }}
31+
xs={{ offset: 1, span: 22 }}
32+
sm={{ offset: 1, span: 22 }}
2833
md={{ offset: 1, span: 11 }}
2934
lg={{ offset: 1, span: 11 }}
3035
xl={{ offset: 0, span: 6 }}
@@ -42,8 +47,8 @@ export class Dashboard extends React.Component<any>{
4247
</Col>
4348
<Col
4449
className={"dashboardCard"}
45-
xs={{ offset: 2, span: 22 }}
46-
sm={{ offset: 2, span: 22 }}
50+
xs={{ offset: 1, span: 22 }}
51+
sm={{ offset: 1, span: 22 }}
4752
md={{ offset: 1, span: 11 }}
4853
lg={{ offset: 1, span: 11 }}
4954
xl={{ offset: 0, span: 6 }}
@@ -61,8 +66,8 @@ export class Dashboard extends React.Component<any>{
6166
</Col>
6267
<Col
6368
className={"dashboardCard"}
64-
xs={{ offset: 2, span: 22 }}
65-
sm={{ offset: 2, span: 22 }}
69+
xs={{ offset: 1, span: 22 }}
70+
sm={{ offset: 1, span: 22 }}
6671
md={{ offset: 1, span: 11 }}
6772
lg={{ offset: 1, span: 11 }}
6873
xl={{ offset: 0, span: 6 }}
@@ -80,8 +85,8 @@ export class Dashboard extends React.Component<any>{
8085
</Col>
8186
<Col
8287
className={"dashboardCard"}
83-
xs={{ offset: 2, span: 22 }}
84-
sm={{ offset: 2, span: 22 }}
88+
xs={{ offset: 1, span: 22 }}
89+
sm={{ offset: 1, span: 22 }}
8590
md={{ offset: 1, span: 11 }}
8691
lg={{ offset: 1, span: 11 }}
8792
xl={{ offset: 0, span: 6 }}
@@ -99,13 +104,25 @@ export class Dashboard extends React.Component<any>{
99104
</Col>
100105
</Row>
101106
<Row>
102-
<Col className={"dasboardChart"}>
103-
<Card loading={lineChartLoading} bordered={false}>
104-
<LineChartExample />
105-
</Card >
107+
<Col className={"dashboardBox"}>
108+
<Card title="Visit Statistics" loading={lineChartLoading} bordered={false}>
109+
<LineChartExample />
110+
</Card >
106111
</Col>
107112
</Row>
113+
<Row gutter={16}>
114+
<Col span={16}>
115+
<Card title="Payment Statistics" className={"dashboardBox"} loading={barChartLoading} bordered={false}>
116+
<BarChartExample />
117+
</Card>
118+
</Col>
119+
<Col span={8}>
120+
<Card title="Browser Usage" className={"dashboardBox"} loading={pieChartLoading} bordered={false}>
121+
<PieChartExample />
122+
</Card>
108123

124+
</Col>
125+
</Row>
109126
</React.Fragment>
110127
)
111128
}

0 commit comments

Comments
 (0)