refactor(chartjs): types cleanup

Author: xidedix

projects/coreui-angular-chartjs/ng-package.json

@@ -4,8 +4,9 @@
   "lib": {
     "entryFile": "src/public-api.ts",
     "umdModuleIds": {
-      "@coreui/chartjs": "@coreui/chartjs",
-      "chart.js": "chart.js"
+      "@coreui/chartjs": "coreui.chartjs",
+      "chart.js": "chart.js",
+      "lodash": "lodash"
     }
   },
   "allowedNonPeerDependencies": [

projects/coreui-angular-chartjs/src/lib/chartjs.component.scss

@@ -1,5 +1,6 @@
 :host {
   &.chart-wrapper {
     display: block;
+    //height: 100%;
   }
 }

projects/coreui-angular-chartjs/src/lib/chartjs.component.ts

@@ -17,10 +17,10 @@ import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput
 
 import { merge } from 'lodash';
 
-import Chart, { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
-
+import { Chart, ChartConfiguration, ChartType, DefaultDataPoint, registerables } from 'chart.js';
 import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';
-import { IChartjs } from './chartjs.interface';
+
+Chart.register(...registerables);
 
 let nextId = 0;
 
@@ -30,48 +30,54 @@ let nextId = 0;
   styleUrls: ['./chartjs.component.scss'],
   exportAs: 'cChart'
 })
-export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnChanges {
+export class ChartjsComponent<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges {
 
   static ngAcceptInputType_height: NumberInput;
   static ngAcceptInputType_width: NumberInput;
   static ngAcceptInputType_redraw: BooleanInput;
 
   @Input() customTooltips = true;
-  @Input() data: ChartData | ((canvas: HTMLCanvasElement) => ChartData) | undefined;
+  @Input() data?: ChartConfiguration<TType, TData, TLabel>['data'];
 
   @HostBinding('style.height.px')
   @Input()
-  set height(value: number) {
+  set height(value: number | undefined) {
     this._height = coerceNumberProperty(value);
   }
+
   get height() {
     return this._height;
   }
-  private _height = 150;
+
+  private _height: number | undefined;
 
   @Input() id = `c-chartjs-${nextId++}`;
-  @Input() options?: ChartOptions;
-  @Input() plugins: Plugin[] = [];
+  @Input() options?: ChartConfiguration<TType, TData, TLabel>['options'];
+  @Input() plugins: ChartConfiguration<TType, TData, TLabel>['plugins'] = [];
 
   @Input()
   set redraw(value: boolean) {
     this._redraw = coerceBooleanProperty(value);
   }
+
   get redraw(): boolean {
     return this._redraw;
   }
+
   private _redraw = false;
 
-  @Input() type: ChartType = 'bar';
+  @Input() type: ChartConfiguration<TType, TData, TLabel>['type'] = 'bar' as TType;
 
   @HostBinding('style.width.px')
   @Input()
   set width(value: number | undefined) {
     this._width = coerceNumberProperty(value);
   }
+
   get width() {
     return this._width;
   }
+
   private _width: number | undefined;
 
   @Input() wrapper = true;
@@ -82,7 +88,7 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
 
   @ViewChild('canvasElement') canvasElement!: ElementRef;
 
-  chart: Chart | undefined;
+  chart!: Chart<TType, TData, TLabel>;
 
   @HostBinding('class')
   get hostClasses() {
@@ -91,15 +97,6 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
     };
   }
 
-  get chartData() {
-    const canvasRef = this.canvasElement.nativeElement;
-    return typeof this.data === 'function'
-      ? canvasRef.value
-        ? this.data(canvasRef.value)
-        : { labels: [], datasets: [] }
-      : merge({ labels: [], datasets: [] }, { ...this.data });
-  }
-
   constructor(
     private elementRef: ElementRef,
     private ngZone: NgZone,
@@ -141,31 +138,14 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
   public chartRender() {
     if (!this.canvasElement) return;
 
-    if (this.customTooltips) {
-      const options = this.options
-      this.options = {
-        ...options,
-        plugins: {
-          ...options?.plugins,
-          tooltip: {
-            ...options?.plugins?.tooltip,
-            enabled: false,
-            mode: 'index',
-            position: 'nearest',
-            external: cuiCustomTooltips
-          }
-        }
-      };
-    }
-
     const ctx: CanvasRenderingContext2D = this.canvasElement.nativeElement.getContext('2d');
 
     this.ngZone.runOutsideAngular(() => {
       const config = this.chartConfig();
       if (config) {
         this.chart = new Chart(ctx, config);
         setTimeout(() => {
-            this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
+          this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
         });
       }
     });
@@ -182,7 +162,6 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
       return;
     }
 
-
     const config = this.chartConfig();
 
     if (this.options) {
@@ -215,39 +194,47 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
     return this.chart?.toBase64Image();
   }
 
-  private chartDataConfig() {
+  private chartDataConfig(): ChartConfiguration<TType, TData, TLabel>['data'] {
     return {
-      labels: this.chartData?.labels ?? [],
-      datasets: [...this.chartData?.datasets] ?? []
+      labels: this.data?.labels ?? [],
+      datasets: this.data?.datasets ?? []
     };
   }
 
-  private chartConfig() {
+  private chartOptions(): ChartConfiguration<TType, TData, TLabel>['options'] {
+    return this.options;
+  }
+
+  private chartConfig(): ChartConfiguration<TType, TData, TLabel> {
     this.chartCustomTooltips();
     return {
       data: this.chartDataConfig(),
-      options: this.options as ChartOptions,
+      options: this.chartOptions(),
       plugins: this.plugins,
       type: this.type
     };
   }
 
   private chartCustomTooltips() {
     if (this.customTooltips) {
-      const options = this.options
-      this.options = {
+      const options = this.options;
+      // @ts-ignore
+      const plugins = this.options?.plugins;
+      // @ts-ignore
+      const tooltip = this.options?.plugins?.tooltip;
+      this.options = merge({
         ...options,
         plugins: {
-          ...options?.plugins,
+          ...plugins,
           tooltip: {
-            ...options?.plugins?.tooltip,
+            ...tooltip,
             enabled: false,
             mode: 'index',
             position: 'nearest',
             external: cuiCustomTooltips
           }
         }
-      };
-    };
+      });
+    }
   };
 }

projects/coreui-angular-chartjs/src/lib/chartjs.interface.ts

@@ -1,7 +1,8 @@
-import { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
+import { ChartType } from 'chart.js/auto';
 import { EventEmitter } from '@angular/core';
+import { ChartConfiguration, DefaultDataPoint } from 'chart.js';
 
-export interface IChartjs {
+export interface IChartjs<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
   /**
    * Enables custom html based tooltips instead of standard tooltips.
    * @default true
@@ -11,12 +12,12 @@ export interface IChartjs {
   /**
    * The data object that is passed into the Chart.js chart (more info).
    */
-  data: ChartData | ((canvas: HTMLCanvasElement) => ChartData) | undefined;
+  data?: ChartConfiguration<TType, TData, TLabel>['data'];
 
   /**
    * Height attribute applied to the rendered canvas.
    *
-   * @default 150
+   * @default undefined
    */
   height?: number;
 
@@ -29,13 +30,13 @@ export interface IChartjs {
    * The options object that is passed into the Chart.js chart.
    * {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
    */
-  options?: ChartOptions;
+  options?: ChartConfiguration<TType, TData, TLabel>['options'];
 
   /**
    * The plugins array that is passed into the Chart.js chart (more info)
    * {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
    */
-  plugins?: Plugin[];
+  plugins?: ChartConfiguration<TType, TData, TLabel>['plugins'];
 
   /**
    * If true, will tear down and redraw chart on all updates.
@@ -47,7 +48,7 @@ export interface IChartjs {
    * Chart.js chart type.
    * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
    */
-  type: ChartType;
+  type: ChartConfiguration<TType, TData, TLabel>['type'];
 
   /**
    * Width attribute applied to the rendered canvas.

projects/coreui-angular-chartjs/src/lib/chartjs.module.ts

@@ -1,14 +1,10 @@
 import { NgModule } from '@angular/core';
 import { ChartjsComponent } from './chartjs.component';
 
-
-
 @NgModule({
   declarations: [
     ChartjsComponent
   ],
-  imports: [
-  ],
   exports: [
     ChartjsComponent
   ]