refactor(dashboard): drop obsolete ChartModule, move to ChartjsModule and c-chart component

xidedix · xidedix · commit b580a37bcc88 · 2021-11-27T04:23:25.000+01:00
diff --git a/src/app/views/dashboard/dashboard-charts-data.ts b/src/app/views/dashboard/dashboard-charts-data.ts
@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { getStyle, hexToRgba } from '@coreui/utils/src';
-import { customTooltips } from '@coreui/chartjs/dist/js/coreui-chartjs.js';
 
 export interface IChartProps {
-  Data?: any;
+  data?: any;
   labels?: any;
   options?: any;
   colors?: any;
@@ -17,12 +16,12 @@ export interface IChartProps {
   providedIn: 'any'
 })
 export class DashboardChartsData {
-  public mainChart: IChartProps = {};
-
   constructor() {
     this.initMainChart();
   }
 
+  public mainChart: IChartProps = {};
+
   public random(min: number, max: number) {
     return Math.floor(Math.random() * (max - min + 1) + min);
   }
@@ -33,8 +32,6 @@ export class DashboardChartsData {
     const brandInfoBg = hexToRgba(getStyle('--cui-info'), 10) ?? '#20a8d8';
     const brandDanger = getStyle('--cui-danger') || '#f86c6b';
 
-    // console.log(brandInfo, brandInfoBg);
-
     // mainChart
     this.mainChart.elements = period === 'Month' ? 12 : 27;
     this.mainChart.Data1 = [];
@@ -43,28 +40,14 @@ export class DashboardChartsData {
 
     // generate random values for mainChart
     for (let i = 0; i <= this.mainChart.elements; i++) {
-      this.mainChart.Data1.push(this.random(50, 200));
-      this.mainChart.Data2.push(this.random(80, 100));
+      this.mainChart.Data1.push(this.random(50, 240));
+      this.mainChart.Data2.push(this.random(20, 160));
       this.mainChart.Data3.push(65);
     }
 
-    this.mainChart.Data = [
-      {
-        data: this.mainChart.Data1,
-        label: 'Current'
-      },
-      {
-        data: this.mainChart.Data2,
-        label: 'Previous'
-      },
-      {
-        data: this.mainChart.Data3,
-        label: 'BEP'
-      }
-    ];
-
+    let labels: string[] = [];
     if (period === 'Month') {
-      this.mainChart.labels = [
+      labels = [
         'January',
         'February',
         'March',
@@ -80,124 +63,113 @@ export class DashboardChartsData {
       ];
     } else {
       /* tslint:disable:max-line-length */
-      this.mainChart.labels = [
-        'Monday',
-        'Tuesday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday',
-        'Sunday',
-        'Monday',
-        'Tuesday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday',
-        'Sunday',
+      const week = [
         'Monday',
         'Tuesday',
         'Wednesday',
         'Thursday',
         'Friday',
         'Saturday',
-        'Sunday',
-        'Monday',
-        'Thursday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday',
         'Sunday'
       ];
+      labels = week.concat(week, week, week);
     }
-    /* tslint:enable:max-line-length */
-    // @ts-ignore
-    this.mainChart.options = {
-      tooltips: {
-        enabled: false,
-        custom: customTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
+
+    const colors = [
+      {
+        // brandInfo
+        backgroundColor: brandInfoBg,
+        borderColor: brandInfo,
+        pointHoverBackgroundColor: brandInfo,
+        borderWidth: 2,
+        fill: true
+      },
+      {
+        // brandSuccess
+        backgroundColor: 'transparent',
+        borderColor: brandSuccess || '#4dbd74',
+        pointHoverBackgroundColor: '#fff'
+      },
+      {
+        // brandDanger
+        backgroundColor: 'transparent',
+        borderColor: brandDanger || '#f86c6b',
+        pointHoverBackgroundColor: brandDanger,
+        borderWidth: 1,
+        borderDash: [8, 5]
+      }
+    ];
+
+    const datasets = [
+      {
+        data: this.mainChart.Data1,
+        label: 'Current',
+        ...colors[0]
+      },
+      {
+        data: this.mainChart.Data2,
+        label: 'Previous',
+        ...colors[1]
+      },
+      {
+        data: this.mainChart.Data3,
+        label: 'BEP',
+        ...colors[2]
+      }
+    ];
+
+    const plugins = {
+      legend: {
+        display: false
+      },
+      tooltip: {
         callbacks: {
-          labelColor: function (tooltipItem: { datasetIndex: string | number; }, chart: { data: { datasets: { [x: string]: { borderColor: any; }; }; }; }) {
+          labelColor: function(context: any) {
             return {
-              backgroundColor:
-              chart.data.datasets[tooltipItem.datasetIndex].borderColor
+              backgroundColor: context.dataset.borderColor
             };
           }
         }
-      },
-      // animation: {
-      //   duration: 0
-      // },
-      responsiveAnimationDuration: 0,
-      responsive: true,
+      }
+    };
+
+    const options = {
       maintainAspectRatio: false,
+      plugins,
       scales: {
-        xAxes: [
-          {
-            gridLines: {
-              drawOnChartArea: false
-            },
-            ticks: {
-              callback: function (value: any) {
-                return period === 'Month' ? value : value.charAt(0);
-              }
-            }
+        x: {
+          grid: {
+            drawOnChartArea: false
           }
-        ],
-        yAxes: [
-          {
-            ticks: {
-              beginAtZero: true,
-              maxTicksLimit: 5,
-              stepSize: Math.ceil(250 / 5),
-              max: 250
-            }
+        },
+        y: {
+          beginAtZero: true,
+          max: 250,
+          ticks: {
+            maxTicksLimit: 5,
+            stepSize: Math.ceil(250 / 5)
           }
-        ]
+        }
       },
       elements: {
         line: {
-          borderWidth: 2
+          tension: 0.4
         },
         point: {
           radius: 0,
           hitRadius: 10,
           hoverRadius: 4,
           hoverBorderWidth: 3
         }
-      },
-      legend: {
-        display: false
       }
     };
-    this.mainChart.colors = [
-      {
-        // brandInfo
-        backgroundColor: brandInfoBg,
-        borderColor: brandInfo,
-        pointHoverBackgroundColor: '#fff'
-      },
-      {
-        // brandSuccess
-        backgroundColor: 'transparent',
-        borderColor: brandSuccess || '#4dbd74',
-        pointHoverBackgroundColor: '#fff'
-      },
-      {
-        // brandDanger
-        backgroundColor: 'transparent',
-        borderColor: brandDanger || '#f86c6b',
-        pointHoverBackgroundColor: '#fff',
-        borderWidth: 1,
-        borderDash: [8, 5]
-      }
-    ];
-    this.mainChart.legend = false;
+
     this.mainChart.type = 'line';
+    this.mainChart.options = options;
+    this.mainChart.data = {
+      datasets,
+      labels
+    };
   }
 
 }
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
@@ -59,22 +59,13 @@ <h4 class="card-title mb-0" id="traffic">
         </form>
       </c-col>
     </c-row>
-    <div
-      [@.disabled]="true"
-      [ngStyle]="{ 'height.px': 300, 'marginTop.px': 40 }"
-      class="chart-wrapper"
-    >
-      <canvas
-        [chartType]="mainChart.type"
-        [colors]="mainChart.colors"
-        [datasets]="mainChart.Data"
-        [labels]="mainChart.labels"
-        [options]="mainChart.options"
-        cNoZoneBaseChart
-        class="chart"
-      >
-      </canvas>
-    </div>
+    <c-chart [data]="mainChart.data"
+             [height]="300"
+             [ngStyle]="{'marginTop.px': 40}"
+             [options]="mainChart.options"
+             [type]="mainChart.type">
+      Main chart
+    </c-chart>
   </c-card-body>
   <c-card-footer>
     <c-row class="text-center" [md]="5" [xs]="1">
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
@@ -22,6 +22,9 @@ interface IUser {
   styleUrls: ['dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
+  constructor(private chartsData: DashboardChartsData) {
+  }
+
   public users: IUser[] = [
     {
       name: 'Yiorgos Avraamu',
@@ -108,9 +111,6 @@ export class DashboardComponent implements OnInit {
     trafficRadio: new FormControl('Month')
   });
 
-  constructor(private chartsData: DashboardChartsData) {
-  }
-
   ngOnInit(): void {
     this.initCharts();
   }
@@ -120,7 +120,7 @@ export class DashboardComponent implements OnInit {
   }
 
   setTrafficPeriod(value: string): void {
-    this.trafficRadioGroup.setValue({trafficRadio: value});
+    this.trafficRadioGroup.setValue({ trafficRadio: value });
     this.chartsData.initMainChart(value);
     this.initCharts();
   }
diff --git a/src/app/views/dashboard/dashboard.module.ts b/src/app/views/dashboard/dashboard.module.ts
@@ -7,7 +7,6 @@ import {
   ButtonGroupModule,
   ButtonModule,
   CardModule,
-  ChartModule,
   FormModule,
   GridModule,
   NavModule,
@@ -16,6 +15,7 @@ import {
   TabsModule
 } from '@coreui/angular';
 import { IconModule } from '@coreui/icons-angular';
+import { ChartjsModule } from '@coreui/angular-chartjs';
 
 import { DashboardRoutingModule } from './dashboard-routing.module';
 import { DashboardComponent } from './dashboard.component';
@@ -37,14 +37,12 @@ import { WidgetsModule } from '../widgets/widgets.module';
     FormModule,
     ButtonModule,
     ButtonGroupModule,
-    ChartModule,
+    ChartjsModule,
     AvatarModule,
     TableModule,
     WidgetsModule
   ],
-  declarations: [
-    DashboardComponent,
-  ]
+  declarations: [DashboardComponent]
 })
 export class DashboardModule {
 }
