Skip to content

Commit 32fa9e7

Browse files
modularcodermodularcoder
committed
Setup chart lib
Setup dashboard chart
1 parent 11606e2 commit 32fa9e7

File tree

5 files changed

+130
-19
lines changed

5 files changed

+130
-19
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"moment": "^2.24.0",
3030
"prop-types": "^15.7.2",
3131
"react": "^16.12.0",
32+
"react-chartjs-2": "^2.9.0",
3233
"react-dom": "^16.11.0",
3334
"react-router-dom": "^5.1.2",
3435
"react-script": "^2.0.5",

‎src/Dashboard/Subscriptions/Subscriptions.js

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,9 @@ import {
1111
LinearProgress,
1212
} from '@material-ui/core'
1313
import { Timeline as IconTimeline, MoreVert as IconMoreVert } from '@material-ui/icons'
14+
import { Line } from 'react-chartjs-2'
1415

15-
const subscriptionsItems = [
16-
{ name: 'GitHub', ratio: 55.3, value: Math.round(55.3 * 144) },
17-
{ name: 'MaterialUI', ratio: 25.7, value: Math.round(25.7 * 144) },
18-
{ name: 'Google', ratio: 15.6, value: Math.round(15.6 * 144) },
19-
{ name: 'ModularCode', ratio: 8.4, value: Math.round(8.4 * 144) },
20-
{ name: 'GH', ratio: 5.5, value: Math.round(5.5 * 144) },
21-
]
16+
import { subscriptionsItems, subscriptionsHistoryChart } from './data'
2217

2318
const Subscriptions = props => {
2419
const classes = useStyles()
@@ -38,11 +33,18 @@ const Subscriptions = props => {
3833
<CardContent className={classes.cardContent}>
3934
<Grid container spacing={4}>
4035
<Grid item sm={9} className={classes.chartBox}>
41-
<div className={classes.chart}></div>
36+
<div className={classes.chartContainer}>
37+
<div className={classes.chart}>
38+
<Line
39+
data={subscriptionsHistoryChart.data}
40+
options={subscriptionsHistoryChart.options}
41+
/>
42+
</div>
43+
</div>
4244
</Grid>
4345
<Grid item sm={3} className={classes.ratingBox}>
4446
{subscriptionsItems.map(({ name, ratio, value }) => (
45-
<div>
47+
<div key={name}>
4648
<Grid container>
4749
<Grid item xs>
4850
<Typography variant="body1">{name}</Typography>
@@ -99,10 +101,18 @@ const useStyles = makeStyles(theme => ({
99101
borderRight: '1px solid',
100102
borderRightColor: theme.palette.divider,
101103
},
102-
chart: {
104+
chartContainer: {
103105
width: '100%',
106+
position: 'relative',
104107
paddingBottom: '25%',
105-
background: '#efefef',
108+
minHeight: 240,
109+
},
110+
chart: {
111+
position: 'absolute',
112+
width: '100%',
113+
height: '100%',
114+
top: 0,
115+
left: 0,
106116
},
107117
cardContent: {
108118
'&:last-child': {

‎src/Dashboard/Subscriptions/data.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
export const subscriptionsItems = [
2+
{ name: 'GitHub', ratio: 55.3, value: Math.round(55.3 * 144) },
3+
{ name: 'MaterialUI', ratio: 25.7, value: Math.round(25.7 * 144) },
4+
{ name: 'Google', ratio: 15.6, value: Math.round(15.6 * 144) },
5+
{ name: 'ModularCode', ratio: 8.4, value: Math.round(8.4 * 144) },
6+
{ name: 'GH', ratio: 5.5, value: Math.round(5.5 * 144) },
7+
]
8+
9+
export const subscriptionsHistoryChart = {
10+
data: {
11+
datasets: [
12+
{
13+
backgroundColor: 'rgba(136, 151, 170, 0.1)',
14+
borderColor: '#8897aa',
15+
borderDash: [5, 5],
16+
borderWidth: 1,
17+
data: [
18+
23686,
19+
30820,
20+
59622,
21+
146465,
22+
78160,
23+
79520,
24+
36148,
25+
48781,
26+
158303,
27+
155174,
28+
104830,
29+
86895,
30+
],
31+
label: 'Visits',
32+
yAxisID: 'y2',
33+
},
34+
{
35+
backgroundColor: '#b1cc90',
36+
borderColor: '#8cd136',
37+
borderWidth: 2,
38+
label: 'Subscriptions',
39+
fill: false,
40+
data: [1545, 1350, 1270, 1830, 1955, 1865, 2034, 2544, 1956, 2211, 1540, 1670],
41+
yAxisID: 'y1',
42+
},
43+
],
44+
labels: [
45+
'2019-03',
46+
'2019-04',
47+
'2019-05',
48+
'2019-06',
49+
'2019-07',
50+
'2019-08',
51+
'2019-09',
52+
'2019-10',
53+
'2019-11',
54+
'2019-12',
55+
'2020-01',
56+
'2020-02',
57+
],
58+
},
59+
options: {
60+
scales: {
61+
xAxes: [
62+
{
63+
gridLines: { display: false },
64+
ticks: { fontColor: '#aaa', autoSkipPadding: 50 },
65+
},
66+
],
67+
yAxes: [
68+
{
69+
id: 'y1',
70+
gridLines: { display: false },
71+
ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
72+
},
73+
{
74+
position: 'right',
75+
id: 'y2',
76+
gridLines: { display: false },
77+
ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
78+
},
79+
],
80+
},
81+
tooltips: {
82+
mode: 'index',
83+
intersect: false,
84+
},
85+
hover: {
86+
mode: 'index',
87+
intersect: false,
88+
},
89+
responsive: true,
90+
maintainAspectRatio: false,
91+
},
92+
}

‎src/_layouts/DashboardLayout/DashboardLayout.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,10 @@ const useStyles = makeStyles(theme => ({
154154
alignItems: 'stretch',
155155
position: 'absolute',
156156
zIndex: theme.zIndex.drawer + 1,
157-
transition: theme.transitions.create(['width', 'margin'], {
158-
easing: theme.transitions.easing.sharp,
159-
duration: theme.transitions.duration.leavingScreen,
160-
}),
157+
// transition: theme.transitions.create(['width', 'margin'], {
158+
// easing: theme.transitions.easing.sharp,
159+
// duration: theme.transitions.duration.leavingScreen,
160+
// }),
161161
},
162162
sidebarContainer: {
163163
display: 'flex',
@@ -171,10 +171,10 @@ const useStyles = makeStyles(theme => ({
171171
// width: theme.sidebar.width,
172172
// flexShrink: 0,
173173
// },
174-
transition: theme.transitions.create('width', {
175-
easing: theme.transitions.easing.sharp,
176-
duration: theme.transitions.duration.leavingScreen,
177-
}),
174+
// transition: theme.transitions.create('width', {
175+
// easing: theme.transitions.easing.sharp,
176+
// duration: theme.transitions.duration.leavingScreen,
177+
// }),
178178
},
179179
sidebarContainerMobile: {
180180
width: 0,

‎yarn.lock

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11604,6 +11604,14 @@ react-app-polyfill@^1.0.4:
1160411604
regenerator-runtime "^0.13.3"
1160511605
whatwg-fetch "^3.0.0"
1160611606

11607+
react-chartjs-2@^2.9.0:
11608+
version "2.9.0"
11609+
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz#d054dbdd763fbe9a76296a4ae0752ea549b76d9e"
11610+
integrity sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==
11611+
dependencies:
11612+
lodash "^4.17.4"
11613+
prop-types "^15.5.8"
11614+
1160711615
react-clientside-effect@^1.2.2:
1160811616
version "1.2.2"
1160911617
resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"

0 commit comments

Comments
 (0)