Setup typescript for dashboards

Author: modularcoder

src/Dashboard/Dashboard.js renamed to src/Dashboard/Dashboard.tsx

@@ -7,7 +7,7 @@ import BasePageToolbar from '../_common/BasePageToolbar'
 
 import DashboardActions from './DashboardActions'
 import SubscriptionsHistory from './SubscriptionsHistory'
-import KeyNumbers from './KeyNumbers'
+import KeyMetrics from './KeyMetrics'
 import SubscriptionsRecent from './SubscriptionsRecent'
 import SubscriptionsBreakdown from './SubscriptionsBreakdown'
 
@@ -19,7 +19,7 @@ const Dashboard = () => {
         actionsComponent={DashboardActions}
       ></BasePageToolbar>
       <Grid container spacing={3}>
-        <KeyNumbers />
+        <KeyMetrics />
         <Grid item xs={12}>
           <SubscriptionsHistory />
         </Grid>

src/Dashboard/KeyNumbers/KeyNumbers.js renamed to src/Dashboard/KeyMetrics/KeyMetrics.tsx

@@ -50,13 +50,13 @@ const numbers = [
     chart: generateTrendChartData({
       name: 'Monthly Churn',
       from: 13,
-      to: Math.random(13 / 1.1),
+      to: Math.random() / 1.1,
       length: 15,
     }),
   },
 ]
 
-const KeyNumbers = (props) => {
+const KeyMetrics = () => {
   const classes = useStyles()
 
   return (
@@ -87,7 +87,7 @@ const KeyNumbers = (props) => {
               <Grid item xs={6} sm={6} md={12} lg={6}>
                 <Box height="100%" position="relative" minHeight={70}>
                   <div className={classes.chartContainer}>
-                    <Line data={chart.data} options={chart.options} />
+                    <Line type="line" data={chart.data} options={chart.options} />
                   </div>
                 </Box>
               </Grid>
@@ -99,7 +99,7 @@ const KeyNumbers = (props) => {
   )
 }
 
-KeyNumbers.propTypes = {}
+KeyMetrics.propTypes = {}
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -122,10 +122,10 @@ const useStyles = makeStyles((theme) => ({
   },
   valueChange: {},
   negative: {
-    color: theme.palette.text.negative,
+    color: theme.palette.error.main,
   },
   positive: {
-    color: theme.palette.text.positive,
+    color: theme.palette.success.main,
   },
   chartContainer: {
     position: 'absolute',
@@ -136,4 +136,4 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export default KeyNumbers
+export default KeyMetrics

src/Dashboard/KeyNumbers/data.js renamed to src/Dashboard/KeyMetrics/data.ts

@@ -2,8 +2,14 @@ import moment from 'moment'
 import theme from '../../_theme'
 import utilsService from '../../_services/utilsService'
 
-export const generateTrendChartData = ({ name, from = 0, to = 1000, length = 30 }) => {
+export const generateTrendChartData = ({
+  name = '',
+  from = 0,
+  to = 1000,
+  length = 30,
+}) => {
   return {
+    type: 'line',
     data: {
       datasets: [
         {
@@ -34,34 +40,32 @@ export const generateTrendChartData = ({ name, from = 0, to = 1000, length = 30
           bottom: 10,
         },
       },
-      legend: {
-        display: false,
-      },
       scales: {
-        xAxes: [
-          {
-            display: false,
-          },
-        ],
-        yAxes: [
-          {
-            display: false,
-          },
-        ],
+        x: {
+          display: false,
+        },
+        y: {
+          display: false,
+        },
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
       },
       tooltips: {
         mode: 'index',
         intersect: false,
         caretSize: 0,
         callbacks: {
-          label: function (tooltipItem, data) {
+          label: function (tooltipItem: any, data: any) {
             // var datasetLabel = ''
             // var label = data.labels[tooltipItem.index]
             return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
           },
         },
       },
-      hover: {
+      interaction: {
         mode: 'index',
         intersect: false,
       },

src/Dashboard/KeyMetrics/index.ts

@@ -0,0 +1 @@
+export { default } from './KeyMetrics'

src/Dashboard/KeyNumbers/index.js

@@ -12,7 +12,7 @@ import { Bar } from 'react-chartjs-2'
 
 import { chart } from './data'
 
-const SubscriptionsBreakdown = (props) => {
+const SubscriptionsBreakdown = () => {
   const classes = useStyles()
 
   return (
@@ -31,7 +31,7 @@ const SubscriptionsBreakdown = (props) => {
         <CardContent className={classes.cardContent}>
           <div className={classes.chartContainer}>
             <div className={classes.chart}>
-              <Bar data={chart.data} options={chart.options} />
+              <Bar type="bar" data={chart.data} options={chart.options} />
             </div>
           </div>
         </CardContent>

src/Dashboard/SubscriptionsBreakdown/SubscriptionsBreakdown.js renamed to src/Dashboard/SubscriptionsBreakdown/SubscriptionsBreakdown.tsx

@@ -14,7 +14,7 @@ import { Line } from 'react-chartjs-2'
 
 import { subscriptionsItems, subscriptionsHistoryChart } from './data'
 
-const Subscriptions = (props) => {
+const Subscriptions = () => {
   const classes = useStyles()
 
   return (
@@ -35,6 +35,7 @@ const Subscriptions = (props) => {
             <div className={classes.chartContainer}>
               <div className={classes.chart}>
                 <Line
+                  type="line"
                   data={subscriptionsHistoryChart.data}
                   options={subscriptionsHistoryChart.options}
                 />

src/Dashboard/SubscriptionsBreakdown/data.js renamed to src/Dashboard/SubscriptionsBreakdown/data.ts

@@ -20,7 +20,7 @@ import { FormattedDate } from 'react-intl'
 
 import { recentSubscriptions } from './data'
 
-const Subscriptions = (props) => {
+const Subscriptions = () => {
   const classes = useStyles()
 
   return (
@@ -37,7 +37,7 @@ const Subscriptions = (props) => {
           title="Recent Subscriptions"
         />
         <TableContainer component={Paper}>
-          <Table className={classes.table} aria-label="simple table">
+          <Table aria-label="simple table">
             <TableHead>
               <TableRow>
                 <TableCell>Organization</TableCell>

src/Dashboard/SubscriptionsBreakdown/index.js renamed to src/Dashboard/SubscriptionsBreakdown/index.ts

@@ -1,5 +1,11 @@
 import { createMuiTheme } from '@material-ui/core/styles'
 
+// Allow configuration using `createMuiTheme`
+// ref: https://material-ui.com/guides/typescript/
+declare module '@material-ui/core/styles/createMuiTheme' {
+  interface ThemeOptions {}
+}
+
 const baseTheme = createMuiTheme({
   props: {
     MuiPaper: {
@@ -78,13 +84,9 @@ const baseTheme = createMuiTheme({
     },
     secondary: {
       main: '#ae59e3', //'#619f30',
-      // main: '#9027d1', //'#619f30',
-      // main: blue[600], //'#619f30',
     },
     text: {
       secondary: 'rgba(102, 102, 102, 0.83)',
-      positive: '#8cd136',
-      negative: '#e35959',
     },
   },
   typography: {