Skip to content

Commit 5df218e

Browse files
sametkabaysametkabay
committed
Dashboard InfoCards implementation
1 parent 206a10a commit 5df218e

File tree

8 files changed

+142
-5
lines changed

8 files changed

+142
-5
lines changed

‎reactjs/src/scenes/Dashboard/BarChartExample/index.tsx renamed to ‎reactjs/src/scenes/Dashboard/components/BarChartExample/index.tsx

File renamed without changes.

‎reactjs/src/scenes/Dashboard/LineChartExample/index.tsx renamed to ‎reactjs/src/scenes/Dashboard/components/LineChartExample/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
33

4-
// const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = Recharts;
54
const data = [
65
{ name: 'page 1', visit: 4000, session: 2400, amt: 2400 },
76
{ name: 'page 2', visit: 3000, session: 1398, amt: 2210 },

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.ant-list,.ant-list-item-meta-title, .ant-list-item-meta-description {
2+
color: #fff
3+
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as React from 'react';
2+
import { List } from 'antd';
3+
import "./index.css";
4+
5+
export interface ListItem {
6+
title: string;
7+
body: string | React.ReactNode;
8+
}
9+
10+
export interface IListExampleProps {
11+
value: ListItem[];
12+
header?: string;
13+
footer?: string;
14+
}
15+
16+
class ListExample extends React.Component<IListExampleProps>{
17+
render() {
18+
return (
19+
<List
20+
header={this.props.header}
21+
footer={this.props.footer}
22+
split={false}
23+
size="small"
24+
dataSource={this.props.value}
25+
renderItem={(item: any) => (
26+
<List.Item>
27+
<List.Item.Meta
28+
title={item.title}
29+
/>
30+
{item.body}
31+
</List.Item>
32+
)}
33+
/>
34+
)
35+
}
36+
37+
}
38+
39+
export default ListExample;

‎reactjs/src/scenes/Dashboard/PieChartExample/index.tsx renamed to ‎reactjs/src/scenes/Dashboard/components/PieChartExample/index.tsx

File renamed without changes.

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import { LineChart, Line } from 'recharts';
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+
class TinyLineChartExample extends React.Component<any>{
14+
15+
render() {
16+
return (
17+
<LineChart width={300} height={100} data={data}>
18+
<Line type='monotone' dataKey='pv' stroke='#fff' strokeWidth={2} />
19+
</LineChart>
20+
)
21+
}
22+
}
23+
export default TinyLineChartExample

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,22 @@
4343
background: #fff;
4444
min-Height: 240px;
4545
border-radius: 5px;
46+
}
47+
48+
.dashboardCardTinyLine{
49+
margin-top: 16px;
50+
background-color: #E91E63;
51+
border-radius: 5px;
52+
}
53+
54+
.latestSocialTrendsList {
55+
margin-top: 16px;
56+
background: #00BCD4;
57+
border-radius: 5px;
58+
}
59+
60+
.answeredTickeds {
61+
margin-top: 16px;
62+
background: #009688;
63+
border-radius: 5px;
4664
}

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

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import * as React from 'react';
22
import { Row, Col, Card, Icon } from 'antd';
33

44
import "./index.css"
5-
import LineChartExample from './LineChartExample';
6-
import PieChartExample from './PieChartExample';
7-
import BarChartExample from './BarChartExample';
5+
import TinyLineChartExample from './components/TinyLineChartExample';
6+
import BarChartExample from './components/BarChartExample';
7+
import PieChartExample from './components/PieChartExample';
8+
import LineChartExample from './components/LineChartExample';
9+
import ListExample from './components/ListExample';
810

911
export class Dashboard extends React.Component<any>{
1012
constructor(props: any) {
@@ -21,8 +23,17 @@ export class Dashboard extends React.Component<any>{
2123
pieChartLoading: true,
2224
}
2325

26+
2427
render() {
2528
const { cardLoading, lineChartLoading, barChartLoading, pieChartLoading } = this.state;
29+
30+
const visitorStatisticList = [
31+
{ title: "TODAY", body: "1.200 user" },
32+
{ title: "YESTERDAY", body: "3.872 user" },
33+
{ title: "LAST WEEK", body: "26.582 user" },
34+
];
35+
36+
2637
return (
2738
<React.Fragment>
2839
<Row gutter={16}>
@@ -103,13 +114,57 @@ export class Dashboard extends React.Component<any>{
103114
</Card>
104115
</Col>
105116
</Row>
106-
<Row>
117+
118+
<Row gutter={16}>
107119
<Col className={"dashboardBox"}>
108120
<Card title="Visit Statistics" loading={lineChartLoading} bordered={false}>
109121
<LineChartExample />
110122
</Card >
111123
</Col>
112124
</Row>
125+
126+
<Row gutter={16}>
127+
<Col
128+
xs={{ offset: 1, span: 22 }}
129+
sm={{ offset: 1, span: 22 }}
130+
md={{ offset: 1, span: 22 }}
131+
lg={{ offset: 0, span: 8 }}
132+
xl={{ offset: 0, span: 8 }}
133+
xxl={{ offset: 0, span: 8 }}
134+
>
135+
<Card className={"dashboardCardTinyLine"} loading={barChartLoading} bordered={false}>
136+
<TinyLineChartExample />
137+
<ListExample value={visitorStatisticList} />
138+
</Card>
139+
</Col>
140+
<Col
141+
xs={{ offset: 1, span: 22 }}
142+
sm={{ offset: 1, span: 22 }}
143+
md={{ offset: 1, span: 22 }}
144+
lg={{ offset: 0, span: 8 }}
145+
xl={{ offset: 0, span: 8 }}
146+
xxl={{ offset: 0, span: 8 }}
147+
>
148+
<Card className={"latestSocialTrendsList"} loading={barChartLoading} bordered={false}>
149+
<TinyLineChartExample />
150+
<ListExample value={visitorStatisticList} />
151+
</Card>
152+
</Col>
153+
<Col
154+
xs={{ offset: 1, span: 22 }}
155+
sm={{ offset: 1, span: 22 }}
156+
md={{ offset: 1, span: 22 }}
157+
lg={{ offset: 0, span: 8 }}
158+
xl={{ offset: 0, span: 8 }}
159+
xxl={{ offset: 0, span: 8 }}
160+
>
161+
<Card className={"answeredTickeds"} loading={barChartLoading} bordered={false}>
162+
<TinyLineChartExample />
163+
<ListExample value={visitorStatisticList} />
164+
</Card>
165+
</Col>
166+
</Row>
167+
113168
<Row gutter={16}>
114169
<Col span={16}>
115170
<Card title="Payment Statistics" className={"dashboardBox"} loading={barChartLoading} bordered={false}>

0 commit comments

Comments
 (0)