Add keynumber charts

Author: modularcoder

src/Dashboard/KeyNumbers/KeyNumbers.js

@@ -3,6 +3,9 @@ import clsx from 'clsx'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 import { Paper, Grid, Typography } from '@material-ui/core'
+import { Line } from 'react-chartjs-2'
+
+import { subscriptionsTrendChart } from './data'
 
 const KeyNumbers = props => {
   const classes = useStyles()
@@ -11,62 +14,90 @@ const KeyNumbers = props => {
     <>
       <Grid item xs={6} sm={3}>
         <Paper className={classes.paper}>
-          Subscriptions
           <Grid container spacing={0}>
             <Grid item xs={6} md={12} lg={6}>
+              <Typography variant="body2">Subscriptions</Typography>
               <Typography variant="body1" className={classes.value}>
                 139 <sup className={clsx(classes.valueChange, classes.positive)}>+5%</sup>
               </Typography>
             </Grid>
             <Grid item xs={6} md={12} lg={6}>
-              -
+              <div className={classes.chartContainer}>
+                <div className={classes.chart}>
+                  <Line
+                    data={subscriptionsTrendChart.data}
+                    options={subscriptionsTrendChart.options}
+                  />
+                </div>
+              </div>
             </Grid>
           </Grid>
         </Paper>
       </Grid>
       <Grid item xs={6} sm={3}>
         <Paper className={classes.paper}>
-          Monthly Revenue
           <Grid container spacing={0}>
             <Grid item xs={6} md={12} lg={6}>
+              <Typography variant="body2">Monthly Revenue</Typography>
               <Typography variant="body1" className={classes.value}>
                 24350${' '}
                 <sup className={clsx(classes.valueChange, classes.positive)}>+13%</sup>
               </Typography>
             </Grid>
             <Grid item xs={6} md={12} lg={6}>
-              -
+              <div className={classes.chartContainer}>
+                <div className={classes.chart}>
+                  <Line
+                    data={subscriptionsTrendChart.data}
+                    options={subscriptionsTrendChart.options}
+                  />
+                </div>
+              </div>
             </Grid>
           </Grid>
         </Paper>
       </Grid>
       <Grid item xs={6} sm={3}>
         <Paper className={classes.paper}>
-          Monthly Churn
           <Grid container spacing={0}>
             <Grid item xs={6} md={12} lg={6}>
+              <Typography variant="body2">Monthly Churn</Typography>
               <Typography variant="body1" className={classes.value}>
                 13 <sup className={clsx(classes.valueChange, classes.negative)}>+10%</sup>
               </Typography>
             </Grid>
             <Grid item xs={6} md={12} lg={6}>
-              -
+              <div className={classes.chartContainer}>
+                <div className={classes.chart}>
+                  <Line
+                    data={subscriptionsTrendChart.data}
+                    options={subscriptionsTrendChart.options}
+                  />
+                </div>
+              </div>
             </Grid>
           </Grid>
         </Paper>
       </Grid>
       <Grid item xs={6} sm={3}>
         <Paper className={classes.paper}>
-          Total Users
           <Grid container spacing={0}>
             <Grid item xs={6} md={12} lg={6}>
+              <Typography variant="body2">Total Users</Typography>
               <Typography variant="body1" className={classes.value}>
                 48205{' '}
                 <sup className={clsx(classes.valueChange, classes.positive)}>+30%</sup>
               </Typography>
             </Grid>
             <Grid item xs={6} md={12} lg={6}>
-              -
+              <div className={classes.chartContainer}>
+                <div className={classes.chart}>
+                  <Line
+                    data={subscriptionsTrendChart.data}
+                    options={subscriptionsTrendChart.options}
+                  />
+                </div>
+              </div>
             </Grid>
           </Grid>
         </Paper>
@@ -97,6 +128,18 @@ const useStyles = makeStyles(theme => ({
   positive: {
     color: theme.palette.text.positive,
   },
+  chartContainer: {
+    width: '100%',
+    position: 'relative',
+    paddingBottom: '25%',
+  },
+  chart: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+  },
 }))
 
 export default KeyNumbers

src/Dashboard/KeyNumbers/data.js

@@ -0,0 +1,43 @@
+export const subscriptionsTrendChart = {
+  data: {
+    datasets: [
+      {
+        backgroundColor: '#ae59e3',
+        borderColor: '#ae59e3',
+        // backgroundColor: 'rgba(136, 151, 170, 0.1)',
+        borderWidth: 2,
+        label: 'Subscriptions',
+        fill: false,
+        data: [1545, 1350, 1270, 1830, 1955, 1865, 2034, 2544, 1956, 2211, 1540, 1670],
+      },
+    ],
+    labels: Array(12).fill(''),
+  },
+  options: {
+    legend: {
+      display: false,
+    },
+    scales: {
+      xAxes: [
+        {
+          display: false,
+        },
+      ],
+      yAxes: [
+        {
+          display: false,
+        },
+      ],
+    },
+    tooltips: {
+      mode: 'index',
+      intersect: false,
+    },
+    hover: {
+      mode: 'index',
+      intersect: false,
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+  },
+}