feat: @coreui/angular-chartjs (wip)

Author: xidedix

package.json

@@ -36,8 +36,10 @@
     "@angular/platform-browser": "~12.2.13",
     "@angular/platform-browser-dynamic": "~12.2.13",
     "@angular/router": "~12.2.13",
+    "@coreui/chartjs": "^3.0.0",
     "@coreui/icons-angular": "^3.0.0-alpha.3",
     "@popperjs/core": "^2.10.2",
+    "chart.js": "^3.6.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
@@ -52,23 +54,19 @@
     "@angular/cli": "~12.2.13",
     "@angular/compiler-cli": "~12.2.13",
     "@angular/language-service": "~12.2.13",
-    "@coreui/chartjs": "^3.0.0",
     "@types/jasmine": "~3.8.2",
     "@types/lodash": "^4.14.177",
     "@types/node": "^16.11.9",
     "@typescript-eslint/eslint-plugin": "~4.33.0",
     "@typescript-eslint/parser": "~4.33.0",
-    "chart.js": "^3.6.0",
     "eslint": "^7.32.0",
     "jasmine-core": "~3.8.0",
     "karma": "~6.3.9",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "lodash.assign": "^4.2.0",
-    "lodash.find": "^4.6.0",
-    "lodash.merge": "^4.6.2",
+    "lodash-es": "^4.17.21",
     "ng-packagr": "~12.2.5",
     "prettier": "^2.4.1",
     "typescript": "~4.3.5"

projects/coreui-angular-chartjs/.eslintrc.json

@@ -10,6 +10,8 @@
       ],
       "parserOptions": {
         "project": [
+          "./tsconfig.lib.json",
+          "./tsconfig.spec.json",
           "./projects/coreui-angular-chartjs/tsconfig.lib.json",
           "./projects/coreui-angular-chartjs/tsconfig.spec.json"
         ],

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

@@ -2,6 +2,14 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/coreui-angular-chartjs",
   "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}
+    "entryFile": "src/public-api.ts",
+    "umdModuleIds": {
+      "@coreui/chartjs": "@coreui/chartjs",
+      "chart.js": "chart.js"
+    }
+  },
+  "allowedNonPeerDependencies": [
+    "@coreui/chartjs",
+    "chart.js"
+  ]
+}

projects/coreui-angular-chartjs/package.json

@@ -13,6 +13,7 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "peerDependencies": {
+    "@angular/cdk": "^12.2.0",
     "@angular/common": "^12.2.0",
     "@angular/core": "^12.2.0",
     "@coreui/chartjs": "^3.0.0",

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

@@ -4,6 +4,8 @@
   [height]="height"
   [id]="id"
   [width]="width"
-  role="img">
+  role="img"
+  style="display: none"
+>
   <ng-content></ng-content>
 </canvas>

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

@@ -1,5 +1,5 @@
 :host {
-  .chart-wrapper {
+  &.chart-wrapper {
     display: block;
   }
 }

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

@@ -1,35 +1,47 @@
 import {
+  AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
   HostBinding,
   Input,
+  NgZone,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
+  Renderer2,
+  SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
 
-import assign from 'lodash/assign';
-import find from 'lodash/find';
-import merge from 'lodash/merge';
+import { assign, find, merge } from 'lodash';
 
-import { Chart, ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
+import Chart, { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
 import * as chartjs from 'chart.js';
 
 import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';
 import { IChartjs } from './chartjs.interface';
 
+let nextId = 0;
+
 @Component({
   selector: 'c-chart',
   templateUrl: './chartjs.component.html',
   styleUrls: ['./chartjs.component.scss']
 })
-export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
+// export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnInit {
+export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnInit, OnChanges {
+
+  static ngAcceptInputType_height: NumberInput;
+  static ngAcceptInputType_width: NumberInput;
+  static ngAcceptInputType_redraw: BooleanInput;
+
   @Input() customTooltips = true;
   @Input() data: ChartData | ((canvas: HTMLCanvasElement) => ChartData) | undefined;
 
+  @HostBinding('style.height.px')
   @Input()
   set height(value: number) {
     this._height = coerceNumberProperty(value);
@@ -39,7 +51,7 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
   }
   private _height = 150;
 
-  @Input() id?: string;
+  @Input() id = `c-chartjs-${nextId++}`;
   @Input() options?: ChartOptions;
   @Input() plugins?: Plugin[];
 
@@ -61,8 +73,8 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
   get width() {
     return this._width;
   }
-
   private _width = 300;
+
   @Input() wrapper = true;
 
   @Output() getDatasetAtEvent = new EventEmitter<any>();
@@ -71,7 +83,7 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
 
   @ViewChild('canvasElement') canvasElement!: ElementRef;
 
-  private chart: Chart | undefined;
+  chart: Chart | undefined;
 
   @HostBinding('class')
   get hostClasses() {
@@ -89,10 +101,20 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
       : merge({}, this.data);
   }
 
-  constructor() {}
+  constructor(
+    private elementRef: ElementRef,
+    private ngZone: NgZone,
+    private renderer: Renderer2
+  ) {}
 
   ngOnInit(): void {
+    // this.setupChart();
+    // this.updateChart();
+  }
+
+  ngAfterViewInit(): void {
     this.setupChart();
+    this.updateChart();
   }
 
   ngOnDestroy(): void {
@@ -102,20 +124,25 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
   setupChart() {
     if (!this.canvasElement) return;
 
-    const canvasRef = this.canvasElement.nativeElement;
-
     if (this.customTooltips) {
       chartjs.defaults.plugins.tooltip.enabled = false;
       chartjs.defaults.plugins.tooltip.mode = 'index';
       chartjs.defaults.plugins.tooltip.position = 'nearest';
       chartjs.defaults.plugins.tooltip.external = cuiCustomTooltips;
     }
 
-    this.chart = new Chart(canvasRef.value, {
-      type: this.type,
-      data: this.computedData,
-      options: this.options as ChartOptions,
-      plugins: this.plugins
+    const ctx: CanvasRenderingContext2D = this.canvasElement.nativeElement.getContext('2d');
+
+    return this.ngZone.runOutsideAngular(() => {
+      this.chart = new Chart(ctx, {
+        type: this.type,
+        data: this.computedData,
+        options: this.options as ChartOptions,
+        plugins: this.plugins
+      });
+      setTimeout(() => {
+        this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
+      });
     });
   }
 
@@ -139,13 +166,20 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
   updateChart() {
     if (!this.chart) return;
 
+    if (this.redraw) {
+      this.destroyChart();
+      setTimeout(() => {
+        this.setupChart();
+      });
+    }
+
     if (this.options) {
       this.chart.options = { ...this.options };
     }
 
     if (!this.chart.config.data) {
       this.chart.config.data = this.computedData;
-      this.chart.update();
+      this.ngZone.runOutsideAngular(() => {this.chart?.update();});
       return;
     }
 
@@ -181,6 +215,14 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
       };
     });
 
-    this.chart?.update();
+    this.ngZone.runOutsideAngular(() => {
+      setTimeout(() => {
+        this.chart?.update();
+      });
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.updateChart();
   }
 }

projects/coreui-angular/.eslintrc.json

@@ -10,6 +10,8 @@
       ],
       "parserOptions": {
         "project": [
+          "./tsconfig.lib.json",
+          "./tsconfig.spec.json",
           "projects/coreui-angular/tsconfig.lib.json",
           "projects/coreui-angular/tsconfig.spec.json"
         ],

projects/coreui-angular/ng-package.json

@@ -8,5 +8,7 @@
       "@popperjs/core": "popperjs.core"
     }
   },
-  "allowedNonPeerDependencies": ["@popperjs/core"]
+  "allowedNonPeerDependencies": [
+    "@popperjs/core"
+  ]
 }

projects/coreui-angular/package.json

@@ -17,10 +17,11 @@
     }
   ],
   "dependencies": {
-    "tslib": "^2.3.0",
-    "@popperjs/core": "^2.10.2"
+    "@popperjs/core": "^2.10.2",
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
+    "@angular/cdk": "^12.2.0",
     "@angular/common": "^12.2.0",
     "@angular/core": "^12.2.0",
     "@angular/router": "^12.2.0"