Fix dashboard charts

modularcoder · modularcoder · commit bcd0b8915c9c · 2021-04-30T02:08:38.000+04:00
diff --git a/src-ts/Dashboard/KeyMetrics/data.ts b/src-ts/Dashboard/KeyMetrics/data.ts
@@ -13,8 +13,8 @@ export const generateTrendChartData = ({
     data: {
       datasets: [
         {
-          backgroundColor: theme.palette.secondary.main,
-          borderColor: theme.palette.secondary.main,
+          backgroundColor: theme.palette.primary.main,
+          borderColor: theme.palette.primary.main,
           borderWidth: 2,
           pointRadius: 1,
           pointHoverRadius: 3,
diff --git a/src-ts/Dashboard/SubscriptionsBreakdown/SubscriptionsBreakdown.tsx b/src-ts/Dashboard/SubscriptionsBreakdown/SubscriptionsBreakdown.tsx
@@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'right',
   },
   headerIcon: {
-    color: theme.palette.secondary.main,
+    color: theme.palette.grey[300],
     verticalAlign: 'sub',
     marginRight: '.3em',
   },
diff --git a/src-ts/Dashboard/SubscriptionsBreakdown/data.ts b/src-ts/Dashboard/SubscriptionsBreakdown/data.ts
@@ -10,7 +10,7 @@ export const chart = {
         label: 'Customers',
         fill: false,
         data: [1545, 540, 749, 310, 56],
-        yAxisID: 'y1',
+        yAxisID: 'y',
       },
       {
         backgroundColor: 'rgba(136, 151, 170, 0.1)',
@@ -19,32 +19,26 @@ export const chart = {
         borderWidth: 1,
         data: [23686, 30820, 59622, 146465, 78160],
         label: 'Total Monthly Revenue, $',
-        yAxisID: 'y2',
+        yAxisID: 'y1',
       },
     ],
     labels: ['Trial', 'Starter', 'Pro', 'Silver', 'Gold'],
   },
   options: {
     scales: {
-      xAxes: [
-        {
-          gridLines: { display: false },
-          ticks: { fontColor: '#aaa', autoSkipPadding: 50 },
-        },
-      ],
-      yAxes: [
-        {
-          id: 'y1',
-          gridLines: { display: false },
-          ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
-        },
-        {
-          position: 'right',
-          id: 'y2',
-          gridLines: { display: false },
-          ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
-        },
-      ],
+      x: {
+        grid: { display: false },
+        ticks: { fontColor: '#aaa', autoSkipPadding: 50 },
+      },
+      y: {
+        grid: { display: false },
+        ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
+      },
+      y1: {
+        position: 'right',
+        grid: { display: false },
+        ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
+      },
     },
     tooltips: {
       mode: 'index',
diff --git a/src-ts/Dashboard/SubscriptionsHistory/SubscriptionsHistory.tsx b/src-ts/Dashboard/SubscriptionsHistory/SubscriptionsHistory.tsx
@@ -17,6 +17,8 @@ import { subscriptionsItems, subscriptionsHistoryChart } from './data'
 const Subscriptions = () => {
   const classes = useStyles()
 
+  console.log('subscriptionsHistoryChart', subscriptionsHistoryChart)
+
   return (
     <Card>
       <CardHeader
@@ -68,7 +70,7 @@ const Subscriptions = () => {
                     </Typography>
                   </Grid>
                 </Grid>
-                <LinearProgress variant="determinate" value={ratio} color="secondary" />
+                <LinearProgress variant="determinate" value={ratio} color="primary" />
               </div>
             ))}
           </Grid>
@@ -93,7 +95,7 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'right',
   },
   headerIcon: {
-    color: theme.palette.secondary.main,
+    color: theme.palette.grey[300],
     verticalAlign: 'sub',
     marginRight: '.3em',
   },
diff --git a/src-ts/Dashboard/SubscriptionsHistory/data.ts b/src-ts/Dashboard/SubscriptionsHistory/data.ts
@@ -18,9 +18,12 @@ export const subscriptionsHistoryChart = {
         label: 'Subscriptions',
         fill: false,
         data: [1545, 1350, 1270, 1830, 1955, 1865, 2034, 2544, 1956, 2211, 1540, 1670],
-        yAxisID: 'y1',
+        yAxisID: 'y',
+        cubicInterpolationMode: 'monotone',
+        tension: 0.4,
       },
       {
+        fill: true,
         backgroundColor: 'rgba(136, 151, 170, 0.1)',
         borderColor: '#8897aa',
         borderDash: [5, 5],
@@ -40,7 +43,9 @@ export const subscriptionsHistoryChart = {
           86895,
         ],
         label: 'Visits',
-        yAxisID: 'y2',
+        yAxisID: 'y1',
+        cubicInterpolationMode: 'monotone',
+        tension: 0.4,
       },
     ],
     labels: [
@@ -59,32 +64,27 @@ export const subscriptionsHistoryChart = {
     ],
   },
   options: {
+    stacked: false,
     scales: {
-      xAxes: [
-        {
-          gridLines: { display: false },
-          ticks: { fontColor: '#aaa', autoSkipPadding: 50 },
-        },
-      ],
-      yAxes: [
-        {
-          id: 'y1',
-          gridLines: { display: false },
-          ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
-        },
-        {
-          position: 'right',
-          id: 'y2',
-          gridLines: { display: false },
-          ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
-        },
-      ],
+      x: {
+        grid: { display: false },
+        ticks: { fontColor: '#aaa', autoSkipPadding: 50 },
+      },
+      y: {
+        grid: { display: false },
+        ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
+      },
+      y1: {
+        position: 'right',
+        grid: { display: false },
+        ticks: { fontColor: '#aaa', maxTicksLimit: 5 },
+      },
     },
     tooltips: {
       mode: 'index',
       intersect: false,
     },
-    hover: {
+    interaction: {
       mode: 'index',
       intersect: false,
     },
diff --git a/src-ts/Dashboard/SubscriptionsRecent/SubscriptionsRecent.tsx b/src-ts/Dashboard/SubscriptionsRecent/SubscriptionsRecent.tsx
@@ -96,7 +96,7 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'right',
   },
   headerIcon: {
-    color: theme.palette.secondary.main,
+    color: theme.palette.grey[300],
     verticalAlign: 'sub',
     marginRight: '.3em',
   },
