refactor(dashboard): main chart data - typings and theme switching fix

xidedix · xidedix · commit e92aefbbb57c · 2024-03-14T14:46:26.000+01:00
diff --git a/src/app/views/dashboard/dashboard-charts-data.ts b/src/app/views/dashboard/dashboard-charts-data.ts
@@ -1,12 +1,14 @@
 import { Injectable } from '@angular/core';
+import { ChartData, ChartDataset, ChartOptions, ChartType, PluginOptionsByType, TooltipLabelStyle } from 'chart.js';
+import { DeepPartial } from 'chart.js/dist/types/utils';
 import { getStyle, hexToRgba } from '@coreui/utils';
 
 export interface IChartProps {
-  data?: any;
+  data?: ChartData;
   labels?: any;
-  options?: any;
+  options?: ChartOptions;
   colors?: any;
-  type?: any;
+  type: ChartType;
   legend?: any;
 
   [propName: string]: any;
@@ -17,10 +19,10 @@ export interface IChartProps {
 })
 export class DashboardChartsData {
   constructor() {
-    this.initMainChart();
+      this.initMainChart();
   }
 
-  public mainChart: IChartProps = {};
+  public mainChart: IChartProps = { type: 'line' };
 
   public random(min: number, max: number) {
     return Math.floor(Math.random() * (max - min + 1) + min);
@@ -29,7 +31,7 @@ export class DashboardChartsData {
   initMainChart(period: string = 'Month') {
     const brandSuccess = getStyle('--cui-success') ?? '#4dbd74';
     const brandInfo = getStyle('--cui-info') ?? '#20a8d8';
-    const brandInfoBg = hexToRgba(getStyle('--cui-info') ?? '#20a8d8', 10) ;
+    const brandInfoBg = hexToRgba(getStyle('--cui-info') ?? '#20a8d8', 10);
     const brandDanger = getStyle('--cui-danger') ?? '#f86c6b';
 
     // mainChart
@@ -100,7 +102,7 @@ export class DashboardChartsData {
       }
     ];
 
-    const datasets = [
+    const datasets: ChartDataset[] = [
       {
         data: this.mainChart['Data1'],
         label: 'Current',
@@ -118,45 +120,44 @@ export class DashboardChartsData {
       }
     ];
 
-    const plugins = {
+    const plugins: DeepPartial<PluginOptionsByType<any>> = {
       legend: {
         display: false
       },
       tooltip: {
         callbacks: {
-          labelColor: function(context: any) {
-            return {
-              backgroundColor: context.dataset.borderColor
-            };
-          }
+          labelColor: (context) => ({ backgroundColor: context.dataset.borderColor } as TooltipLabelStyle)
         }
       }
     };
 
-    const options = {
+    const colorBorderTranslucent = getStyle('--cui-border-color-translucent');
+    const colorBody = getStyle('--cui-body-color');
+
+    const options: ChartOptions = {
       maintainAspectRatio: false,
       plugins,
       scales: {
         x: {
           grid: {
-            color: getStyle('--cui-border-color-translucent'),
+            color: colorBorderTranslucent,
             drawOnChartArea: false
           },
           ticks: {
-            color: getStyle('--cui-body-color'),
-          },
+            color: colorBody
+          }
         },
         y: {
           border: {
-            color: getStyle('--cui-border-color-translucent'),
+            color: colorBorderTranslucent
           },
           grid: {
-            color: getStyle('--cui-border-color-translucent'),
+            color: colorBorderTranslucent
           },
           max: 250,
           beginAtZero: true,
           ticks: {
-            color: getStyle('--cui-body-color'),
+            color: colorBody,
             maxTicksLimit: 5,
             stepSize: Math.ceil(250 / 5)
           }
@@ -182,5 +183,4 @@ export class DashboardChartsData {
       labels
     };
   }
-
 }
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
@@ -339,7 +339,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
             @for (user of users; track user.name; let i = $index) {
               <tr>
                 <td class="text-center">
-                  <c-avatar size="md" src="{{ user.avatar }}" status="{{ user.status }}" />
+                  <c-avatar [size]="'md'" src="{{ user.avatar }}" status="{{ user.status }}" />
                 </td>
                 <td>
                   <div>{{ user.name }}</div>
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
@@ -1,13 +1,31 @@
 import { DOCUMENT, NgStyle } from '@angular/common';
-import { Component, DestroyRef, inject, OnInit, Renderer2, signal, WritableSignal } from '@angular/core';
+import { Component, DestroyRef, effect, inject, OnInit, Renderer2, signal, WritableSignal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { getStyle } from '@coreui/utils';
-import { DashboardChartsData, IChartProps } from './dashboard-charts-data';
-import { WidgetsBrandComponent } from '../widgets/widgets-brand/widgets-brand.component';
+import { ChartOptions, ScaleOptions } from 'chart.js';
+import {
+  AvatarComponent,
+  ButtonDirective,
+  ButtonGroupComponent,
+  CardBodyComponent,
+  CardComponent,
+  CardFooterComponent,
+  CardHeaderComponent,
+  ColComponent,
+  FormCheckLabelDirective,
+  GutterDirective,
+  ProgressBarDirective,
+  ProgressComponent,
+  RowComponent,
+  TableDirective,
+  TextColorDirective
+} from '@coreui/angular';
 import { ChartjsComponent } from '@coreui/angular-chartjs';
 import { IconDirective } from '@coreui/icons-angular';
-import { TextColorDirective, CardComponent, CardBodyComponent, RowComponent, ColComponent, ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective, CardFooterComponent, GutterDirective, ProgressBarDirective, ProgressComponent, CardHeaderComponent, TableDirective, AvatarComponent } from '@coreui/angular';
+import { getStyle } from '@coreui/utils';
+
+import { WidgetsBrandComponent } from '../widgets/widgets-brand/widgets-brand.component';
 import { WidgetsDropdownComponent } from '../widgets/widgets-dropdown/widgets-dropdown.component';
+import { DashboardChartsData, IChartProps } from './dashboard-charts-data';
 
 interface IUser {
   name: string;
@@ -24,10 +42,10 @@ interface IUser {
 }
 
 @Component({
-    templateUrl: 'dashboard.component.html',
-    styleUrls: ['dashboard.component.scss'],
-    standalone: true,
-    imports: [WidgetsDropdownComponent, TextColorDirective, CardComponent, CardBodyComponent, RowComponent, ColComponent, ButtonDirective, IconDirective, ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ChartjsComponent, NgStyle, CardFooterComponent, GutterDirective, ProgressBarDirective, ProgressComponent, WidgetsBrandComponent, CardHeaderComponent, TableDirective, AvatarComponent]
+  templateUrl: 'dashboard.component.html',
+  styleUrls: ['dashboard.component.scss'],
+  standalone: true,
+  imports: [WidgetsDropdownComponent, TextColorDirective, CardComponent, CardBodyComponent, RowComponent, ColComponent, ButtonDirective, IconDirective, ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ChartjsComponent, NgStyle, CardFooterComponent, GutterDirective, ProgressBarDirective, ProgressComponent, WidgetsBrandComponent, CardHeaderComponent, TableDirective, AvatarComponent]
 })
 export class DashboardComponent implements OnInit {
 
@@ -116,8 +134,14 @@ export class DashboardComponent implements OnInit {
       color: 'dark'
     }
   ];
-  public mainChart: IChartProps = {};
+
+  public mainChart: IChartProps = { type: 'line' };
   public mainChartRef: WritableSignal<any> = signal(undefined);
+  #mainChartRefEffect = effect(() => {
+    if (this.mainChartRef()) {
+      this.setChartStyles();
+    }
+  });
   public chart: Array<IChartProps> = [];
   public trafficRadioGroup = new FormGroup({
     trafficRadio: new FormControl('Month')
@@ -146,23 +170,51 @@ export class DashboardComponent implements OnInit {
 
   updateChartOnColorModeChange() {
     const unListen = this.#renderer.listen(this.#document.documentElement, 'ColorSchemeChange', () => {
-      if (this.mainChartRef()) {
-        setTimeout(() => {
-          const scales = { ...this.mainChart.options.scales };
-          scales.x.grid.borderColor = getStyle('--cui-border-color-translucent');
-          scales.x.grid.color = getStyle('--cui-border-color-translucent');
-          scales.x.ticks.color = getStyle('--cui-body-color');
-          scales.y.border.color = getStyle('--cui-border-color-translucent');
-          scales.y.grid.borderColor = getStyle('--cui-border-color-translucent');
-          scales.y.grid.color = getStyle('--cui-border-color-translucent');
-          scales.y.ticks.color = getStyle('--cui-body-color');
-          this.mainChartRef().options.scales = { ...scales };
-          this.mainChartRef().update();
-        });
-      }
+      this.setChartStyles();
     });
+
     this.#destroyRef.onDestroy(() => {
       unListen();
     });
   }
+
+  setChartStyles() {
+    if (this.mainChartRef()) {
+      setTimeout(() => {
+
+        const options: ChartOptions = { ...this.mainChart.options };
+        const colorBorderTranslucent = getStyle('--cui-border-color-translucent');
+        const colorBody = getStyle('--cui-body-color');
+
+        const scales: ScaleOptions<any> = {
+          x: {
+            grid: {
+              color: colorBorderTranslucent,
+              drawOnChartArea: false
+            },
+            ticks: {
+              color: colorBody
+            }
+          },
+          y: {
+            border: {
+              color: colorBorderTranslucent
+            },
+            grid: {
+              color: colorBorderTranslucent
+            },
+            max: 250,
+            beginAtZero: true,
+            ticks: {
+              color: colorBody,
+              maxTicksLimit: 5,
+              stepSize: Math.ceil(250 / 5)
+            }
+          }
+        };
+        this.mainChartRef().options = { ...options, scales: { ...options.scales, ...scales } };
+        this.mainChartRef().update();
+      });
+    }
+  }
 }
