Skip to content

Commit f8592a7

Browse files
ryoldashryoldash
authored
Merge pull request #3 from ryoldash/u-samet
Dashboard Implementation
2 parents 3c9b6ec + e33b2c9 commit f8592a7

File tree

9 files changed

+420
-4
lines changed

9 files changed

+420
-4
lines changed

‎reactjs/src/scenes/Dashboard/components/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/components/LineChartExample/index.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from 'react';
2+
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
3+
4+
const data = [
5+
{ name: 'page 1', visit: 4000, session: 2400, amt: 2400 },
6+
{ name: 'page 2', visit: 3000, session: 1398, amt: 2210 },
7+
{ name: 'page 3', visit: 2000, session: 9800, amt: 2290 },
8+
{ name: 'page 4', visit: 2780, session: 3908, amt: 2000 },
9+
{ name: 'page 5', visit: 1890, session: 4800, amt: 2181 },
10+
{ name: 'page 6', visit: 2390, session: 3800, amt: 2500 },
11+
{ name: 'page 7', visit: 3490, session: 4300, amt: 2400 },
12+
{ name: 'page 8', visit: 2490, session: 5300, amt: 2200 },
13+
{ name: 'page 9', visit: 3490, session: 6000, amt: 2300 },
14+
{ name: 'page 10',visit: 5000, session: 6100, amt: 2100 },
15+
{ name: 'page 11',visit: 4000, session: 4300, amt: 2000 },
16+
{ name: 'page 12',visit: 3200, session: 3300, amt: 1900 },
17+
];
18+
class LineChartExample extends React.Component<any>{
19+
20+
render() {
21+
return (
22+
<LineChart width={1150} height={300} data={data}
23+
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
24+
<XAxis dataKey="name" />
25+
<YAxis />
26+
<CartesianGrid strokeDasharray="3 3" />
27+
<Tooltip />
28+
<Legend />
29+
<Line type="monotone" dataKey="visit" stroke="#8884d8" activeDot={{ r: 12 }} />
30+
<Line type="monotone" dataKey="session" stroke="#82ca9d" />
31+
</LineChart>
32+
)
33+
}
34+
}
35+
export default LineChartExample

‎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/components/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/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: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.dashboardCard{
2+
margin-top: 16px;
3+
}
4+
5+
.dasboardCard-task{
6+
background-color: #E91E63;
7+
border-radius: 5px;
8+
}
9+
10+
.dasboardCard-ticket{
11+
background-color: #00BCD4;
12+
border-radius: 5px;
13+
}
14+
15+
.dasboardCard-comment{
16+
background-color: #8BC34A;
17+
border-radius: 5px;
18+
}
19+
.dasboardCard-visitor{
20+
background-color: #FF9800;
21+
border-radius: 5px;
22+
}
23+
24+
.dashboardCardCounter{
25+
font-size: 36px;
26+
color: #fff;
27+
}
28+
29+
.dashboardCardName{
30+
font-size: 18px;
31+
color: #fff;
32+
margin-bottom: -5;
33+
}
34+
35+
.dashboardCardIcon{
36+
font-size: 48px;
37+
color: #fff;
38+
}
39+
40+
.dashboardBox{
41+
margin-top: 24px;
42+
padding: 24px;
43+
background: #fff;
44+
min-Height: 240px;
45+
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;
64+
}

0 commit comments

Comments
 (0)