Skip to content

Commit 3cefc6b

Browse files
sametkabaysametkabay
committed
Chart added part1
1 parent c19ac85 commit 3cefc6b

File tree

2 files changed

+93
-80
lines changed

2 files changed

+93
-80
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
border-radius: 5px;
2222
}
2323

24-
2524
.dashboardCardCounter{
2625
font-size: 36px;
2726
color: #fff;
@@ -36,4 +35,11 @@
3635
.dashboardCardIcon{
3736
font-size: 48px;
3837
color: #fff;
38+
}
39+
40+
.dasboardChart{
41+
margin-top: 24px;
42+
padding: 24px;
43+
background: #fff;
44+
min-Height: 360px;
3945
}

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

Lines changed: 86 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -12,87 +12,94 @@ export class Dashboard extends React.Component<any>{
1212
}
1313

1414
render() {
15-
1615
const { loading } = this.state;
1716
return (
18-
<Row gutter={16}>
19-
<Col
20-
className={"dashboardCard"}
21-
xs={{ offset: 2, span: 22 }}
22-
sm={{ offset: 2, span: 22 }}
23-
md={{ offset: 1, span: 11 }}
24-
lg={{ offset: 1, span: 11 }}
25-
xl={{ offset: 0, span: 6 }}
26-
xxl={{ offset: 0, span: 6 }}
27-
>
28-
<Card className={"dasboardCard1"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
29-
<Col span={8}>
30-
<Icon className={"dashboardCardIcon"} type="check" />
31-
</Col>
32-
<Col span={16}>
33-
<p className={"dashboardCardName"}>New Task</p>
34-
<label className={"dashboardCardCounter"}>125</label>
35-
</Col>
36-
</Card>
37-
</Col>
38-
<Col
39-
className={"dashboardCard"}
40-
xs={{ offset: 2, span: 22 }}
41-
sm={{ offset: 2, span: 22 }}
42-
md={{ offset: 1, span: 11 }}
43-
lg={{ offset: 1, span: 11 }}
44-
xl={{ offset: 0, span: 6 }}
45-
xxl={{ offset: 0, span: 6 }}
46-
>
47-
<Card className={"dasboardCard2"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
48-
<Col span={8}>
49-
<Icon className={"dashboardCardIcon"} type="question" />
50-
</Col>
51-
<Col span={16}>
52-
<p className={"dashboardCardName"}>New Ticket</p>
53-
<label className={"dashboardCardCounter"}>257</label>
54-
</Col>
55-
</Card>
56-
</Col>
57-
<Col
58-
className={"dashboardCard"}
59-
xs={{ offset: 2, span: 22 }}
60-
sm={{ offset: 2, span: 22 }}
61-
md={{ offset: 1, span: 11 }}
62-
lg={{ offset: 1, span: 11 }}
63-
xl={{ offset: 0, span: 6 }}
64-
xxl={{ offset: 0, span: 6 }}
65-
>
66-
<Card className={"dasboardCard3"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
67-
<Col span={8}>
68-
<Icon className={"dashboardCardIcon"} type="message" />
69-
</Col>
70-
<Col span={16}>
71-
<p className={"dashboardCardName"}>New Comments</p>
72-
<label className={"dashboardCardCounter"}>243</label>
73-
</Col>
74-
</Card>
75-
</Col>
76-
<Col
77-
className={"dashboardCard"}
78-
xs={{ offset: 2, span: 22 }}
79-
sm={{ offset: 2, span: 22 }}
80-
md={{ offset: 1, span: 11 }}
81-
lg={{ offset: 1, span: 11 }}
82-
xl={{ offset: 0, span: 6 }}
83-
xxl={{ offset: 0, span: 6 }}
84-
>
85-
<Card className={"dasboardCard4"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
86-
<Col span={8}>
87-
<Icon className={"dashboardCardIcon"} type="user-add" />
88-
</Col>
89-
<Col span={16}>
90-
<p className={"dashboardCardName"}>New Visitors</p>
91-
<label className={"dashboardCardCounter"}>1225</label>
92-
</Col>
93-
</Card>
94-
</Col>
95-
</Row>
17+
<React.Fragment>
18+
19+
<Row gutter={16}>
20+
<Col
21+
className={"dashboardCard"}
22+
xs={{ offset: 2, span: 22 }}
23+
sm={{ offset: 2, span: 22 }}
24+
md={{ offset: 1, span: 11 }}
25+
lg={{ offset: 1, span: 11 }}
26+
xl={{ offset: 0, span: 6 }}
27+
xxl={{ offset: 0, span: 6 }}
28+
>
29+
<Card className={"dasboardCard1"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
30+
<Col span={8}>
31+
<Icon className={"dashboardCardIcon"} type="check" />
32+
</Col>
33+
<Col span={16}>
34+
<p className={"dashboardCardName"}>New Task</p>
35+
<label className={"dashboardCardCounter"}>125</label>
36+
</Col>
37+
</Card>
38+
</Col>
39+
<Col
40+
className={"dashboardCard"}
41+
xs={{ offset: 2, span: 22 }}
42+
sm={{ offset: 2, span: 22 }}
43+
md={{ offset: 1, span: 11 }}
44+
lg={{ offset: 1, span: 11 }}
45+
xl={{ offset: 0, span: 6 }}
46+
xxl={{ offset: 0, span: 6 }}
47+
>
48+
<Card className={"dasboardCard2"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
49+
<Col span={8}>
50+
<Icon className={"dashboardCardIcon"} type="question" />
51+
</Col>
52+
<Col span={16}>
53+
<p className={"dashboardCardName"}>New Ticket</p>
54+
<label className={"dashboardCardCounter"}>257</label>
55+
</Col>
56+
</Card>
57+
</Col>
58+
<Col
59+
className={"dashboardCard"}
60+
xs={{ offset: 2, span: 22 }}
61+
sm={{ offset: 2, span: 22 }}
62+
md={{ offset: 1, span: 11 }}
63+
lg={{ offset: 1, span: 11 }}
64+
xl={{ offset: 0, span: 6 }}
65+
xxl={{ offset: 0, span: 6 }}
66+
>
67+
<Card className={"dasboardCard3"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
68+
<Col span={8}>
69+
<Icon className={"dashboardCardIcon"} type="message" />
70+
</Col>
71+
<Col span={16}>
72+
<p className={"dashboardCardName"}>New Comments</p>
73+
<label className={"dashboardCardCounter"}>243</label>
74+
</Col>
75+
</Card>
76+
</Col>
77+
<Col
78+
className={"dashboardCard"}
79+
xs={{ offset: 2, span: 22 }}
80+
sm={{ offset: 2, span: 22 }}
81+
md={{ offset: 1, span: 11 }}
82+
lg={{ offset: 1, span: 11 }}
83+
xl={{ offset: 0, span: 6 }}
84+
xxl={{ offset: 0, span: 6 }}
85+
>
86+
<Card className={"dasboardCard4"} bodyStyle={{ padding: 10 }} loading={loading} bordered={false}>
87+
<Col span={8}>
88+
<Icon className={"dashboardCardIcon"} type="user-add" />
89+
</Col>
90+
<Col span={16}>
91+
<p className={"dashboardCardName"}>New Visitors</p>
92+
<label className={"dashboardCardCounter"}>1225</label>
93+
</Col>
94+
</Card>
95+
</Col>
96+
</Row>
97+
<Row>
98+
<Col className={"dasboardChart"}>
99+
</Col>
100+
</Row>
101+
102+
</React.Fragment>
96103
)
97104
}
98105
}

0 commit comments

Comments
 (0)