1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import {
BarChart, Bar,
AreaChart, Area,
LineChart, Line,
PieChart, Pie, Cell
} from 'recharts';
import { data1, data2 } from 'ba-api/chartMiniData';
import colorfull from 'ba-api/colorfull';
import { red, blue, cyan, lime } from '@material-ui/core/colors';
import { Grid } from '@material-ui/core';
import CounterWidget from '../Counter/CounterWidget';
import styles from './widget-jss';
const colors = [red[300], blue[300], cyan[300], lime[300]];
class CounterGroupWidget extends PureComponent {
render() {
const { classes } = this.props;
return (
<div className={classes.rootCounter}>
<Grid container spacing={3}>
<Grid item xs={6}>
<CounterWidget
color={colorfull[0]}
start={0}
end={105}
duration={3}
title="New Customers"
>
<BarChart width={100} height={40} data={data1}>
<Bar dataKey="uv" fill="#ffffff" />
</BarChart>
</CounterWidget>
</Grid>
<Grid item xs={6}>
<CounterWidget
color={colorfull[1]}
start={0}
end={321}
duration={3}
title="New Articles"
>
<AreaChart width={100} height={60} data={data1}>
<Area type="monotone" dataKey="uv" stroke="#FFFFFF" fill="rgba(255,255,255,.5)" />
</AreaChart>
</CounterWidget>
</Grid>
<Grid item xs={6}>
<CounterWidget
color={colorfull[2]}
start={0}
end={67}
duration={3}
title="New Contributor"
>
<LineChart width={100} height={80} data={data1}>
<Line type="monotone" dataKey="pv" stroke="#FFFFFF" strokeWidth={2} />
</LineChart>
</CounterWidget>
</Grid>
<Grid item xs={6}>
<CounterWidget
color={colorfull[3]}
start={0}
end={80}
duration={3}
title="Average Income"
>
<PieChart width={100} height={100}>
<Pie
data={data2}
cx={50}
cy={50}
dataKey="value"
innerRadius={20}
outerRadius={40}
fill="#FFFFFF"
paddingAngle={5}
>
{
data2.map((entry, index) => <Cell key={index.toString()} fill={colors[index % colors.length]} />)
}
</Pie>
</PieChart>
</CounterWidget>
</Grid>
</Grid>
</div>
);
}
}
CounterGroupWidget.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CounterGroupWidget);
|
