Skip to content

Commit 07ec1a7

Browse files
ryoldashryoldash
committed
Dashboard issue solved
1 parent e0e0fe0 commit 07ec1a7

File tree

6 files changed

+98
-107
lines changed

6 files changed

+98
-107
lines changed

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,19 @@ const data = [
1111
{ name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
1212
];
1313

14-
class BarChartExample extends React.Component<any> {
15-
render() {
16-
return (
17-
<BarChart width={600} height={350} data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
18-
<CartesianGrid strokeDasharray="3 3" />
19-
<XAxis dataKey="name" />
20-
<YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
21-
<YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
22-
<Tooltip />
23-
<Legend />
24-
<Bar yAxisId="left" dataKey="pv" fill="#8884d8" />
25-
<Bar yAxisId="right" dataKey="uv" fill="#82ca9d" />
26-
</BarChart>
27-
);
28-
}
29-
}
14+
const BarChartExample: React.SFC = () => {
15+
return (
16+
<BarChart width={600} height={350} data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
17+
<CartesianGrid strokeDasharray="3 3" />
18+
<XAxis dataKey="name" />
19+
<YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
20+
<YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
21+
<Tooltip />
22+
<Legend />
23+
<Bar yAxisId="left" dataKey="pv" fill="#8884d8" />
24+
<Bar yAxisId="right" dataKey="uv" fill="#82ca9d" />
25+
</BarChart>
26+
);
27+
};
3028

3129
export default BarChartExample;

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

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,18 @@ const data = [
1616
{ name: 'page 12', visit: 3200, session: 3300, amt: 1900 },
1717
];
1818

19-
class LineChartExample extends React.Component<any> {
20-
render() {
21-
return (
22-
<LineChart width={1150} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
23-
<XAxis dataKey="name" />
24-
<YAxis />
25-
<CartesianGrid strokeDasharray="3 3" />
26-
<Tooltip />
27-
<Legend />
28-
<Line type="monotone" dataKey="visit" stroke="#8884d8" activeDot={{ r: 12 }} />
29-
<Line type="monotone" dataKey="session" stroke="#82ca9d" />
30-
</LineChart>
31-
);
32-
}
33-
}
19+
const LineChartExample: React.SFC = () => {
20+
return (
21+
<LineChart width={1150} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
22+
<XAxis dataKey="name" />
23+
<YAxis />
24+
<CartesianGrid strokeDasharray="3 3" />
25+
<Tooltip />
26+
<Legend />
27+
<Line type="monotone" dataKey="visit" stroke="#8884d8" activeDot={{ r: 12 }} />
28+
<Line type="monotone" dataKey="session" stroke="#82ca9d" />
29+
</LineChart>
30+
);
31+
};
3432

3533
export default LineChartExample;

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

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,22 @@ export interface IListExampleProps {
1313
footer?: string;
1414
}
1515

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 title={item.title} />
28-
{item.body}
29-
</List.Item>
30-
)}
31-
/>
32-
);
33-
}
34-
}
16+
const ListExample: React.SFC<IListExampleProps> = (props: IListExampleProps) => {
17+
return (
18+
<List
19+
header={props.header}
20+
footer={props.footer}
21+
split={false}
22+
size="small"
23+
dataSource={props.value}
24+
renderItem={(item: any) => (
25+
<List.Item>
26+
<List.Item.Meta title={item.title} />
27+
{item.body}
28+
</List.Item>
29+
)}
30+
/>
31+
);
32+
};
3533

3634
export default ListExample;

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,12 @@ const data = [
1111
{ name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
1212
];
1313

14-
class TinyLineChartExample extends React.Component<any> {
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-
}
14+
const TinyLineChartExample: React.SFC = () => {
15+
return (
16+
<LineChart width={300} height={100} data={data}>
17+
<Line type="monotone" dataKey="pv" stroke="#fff" strokeWidth={2} />
18+
</LineChart>
19+
);
20+
};
2321

2422
export default TinyLineChartExample;

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

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
1-
.dashboardCard{
2-
margin-top: 16px;
1+
.dashboardCard {
2+
margin-top: 16px;
33
}
44

5-
.dasboardCard-task{
6-
background-color: #E91E63;
7-
border-radius: 5px;
5+
.dasboardCard-task {
6+
background-color: #e91e63;
7+
border-radius: 5px;
88
}
99

10-
.dasboardCard-ticket{
11-
background-color: #00BCD4;
12-
border-radius: 5px;
10+
.dasboardCard-ticket {
11+
background-color: #00bcd4;
12+
border-radius: 5px;
1313
}
1414

15-
.dasboardCard-comment{
16-
background-color: #8BC34A;
17-
border-radius: 5px;
15+
.dasboardCard-comment {
16+
background-color: #8bc34a;
17+
border-radius: 5px;
1818
}
19-
.dasboardCard-visitor{
20-
background-color: #FF9800;
21-
border-radius: 5px;
19+
20+
.dasboardCard-visitor {
21+
background-color: #ff9800;
22+
border-radius: 5px;
2223
}
2324

24-
.dashboardCardCounter{
25-
font-size: 36px;
26-
color: #fff;
25+
.dashboardCardCounter {
26+
font-size: 36px;
27+
color: #fff;
2728
}
2829

29-
.dashboardCardName{
30-
font-size: 18px;
31-
color: #fff;
32-
margin-bottom: -5;
30+
.dashboardCardName {
31+
font-size: 18px;
32+
color: #fff;
33+
margin-bottom: -5;
3334
}
3435

35-
.dashboardCardIcon{
36-
font-size: 48px;
37-
color: #fff;
36+
.dashboardCardIcon {
37+
font-size: 48px;
38+
color: #fff;
3839
}
3940

40-
.dashboardBox{
41-
margin-top: 24px;
42-
padding: 24px;
43-
background: #fff;
44-
min-Height: 240px;
45-
border-radius: 5px;
41+
.dashboardBox {
42+
margin-top: 16px;
43+
background: #fff;
44+
min-height: 240px;
45+
border-radius: 5px;
4646
}
4747

48-
.dashboardCardTinyLine{
49-
margin-top: 16px;
50-
background-color: #E91E63;
51-
border-radius: 5px;
48+
.dashboardCardTinyLine {
49+
margin-top: 16px;
50+
background-color: #e91e63;
51+
border-radius: 5px;
5252
}
5353

5454
.latestSocialTrendsList {
55-
margin-top: 16px;
56-
background: #00BCD4;
57-
border-radius: 5px;
55+
margin-top: 16px;
56+
background: #00bcd4;
57+
border-radius: 5px;
5858
}
5959

60-
.answeredTickeds {
61-
margin-top: 16px;
62-
background: #009688;
63-
border-radius: 5px;
64-
}
60+
.answeredTickeds {
61+
margin-top: 16px;
62+
background: #009688;
63+
border-radius: 5px;
64+
}

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,11 @@ import LineChartExample from './components/LineChartExample';
88
import ListExample from './components/ListExample';
99

1010
export class Dashboard extends React.Component<any> {
11-
constructor(props: any) {
12-
super(props);
13-
setInterval(() => this.setState({ cardLoading: false }), 1000);
14-
setInterval(() => this.setState({ lineChartLoading: false }), 1500);
15-
setInterval(() => this.setState({ barChartLoading: false }), 2000);
16-
setInterval(() => this.setState({ pieChartLoading: false }), 1000);
11+
componentDidMount() {
12+
setTimeout(() => this.setState({ cardLoading: false }), 1000);
13+
setTimeout(() => this.setState({ lineChartLoading: false }), 1500);
14+
setTimeout(() => this.setState({ barChartLoading: false }), 2000);
15+
setTimeout(() => this.setState({ pieChartLoading: false }), 1000);
1716
}
1817

1918
state = {

0 commit comments

Comments
 (0)