feature(theme-shared): add lazy import chart.js

add widget utils
fix code quality of chart.component

npm/ng-packs/packages/theme-shared/ng-package.json

@@ -13,6 +13,7 @@
     "font-awesome",
     "ngx-perfect-scrollbar",
     "primeicons",
-    "primeng"
+    "primeng",
+    "chart.js"
   ]
 }

npm/ng-packs/packages/theme-shared/package.json

@@ -7,6 +7,7 @@
     "@ng-bootstrap/ng-bootstrap": "^5.1.0",
     "@ngx-validate/core": "^0.0.4",
     "bootstrap": "^4.3.1",
+    "chart.js": "^2.8.0",
     "font-awesome": "^4.7.0",
     "ngx-perfect-scrollbar": "^8.0.0",
     "primeicons": "^1.0.0",

npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.ts

@@ -1,5 +1,15 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { chartJsLoaded$ } from '../../utils/widget-utils';
 declare const Chart: any;
 
 @Component({
@@ -29,7 +39,7 @@ export class ChartComponent implements AfterViewInit, OnDestroy {
 
   chart: any;
 
-  constructor(public el: ElementRef) {}
+  constructor(public el: ElementRef, private cdRef: ChangeDetectorRef) {}
 
   @Input() get data(): any {
     return this._data;
@@ -49,17 +59,19 @@ export class ChartComponent implements AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
-    try {
-      Chart;
-    } catch (error) {
-      console.error(`Chart is not found. Import the Chart from app.module like shown below:
-      import('chart.js');
-      `);
-      return;
-    }
+    chartJsLoaded$.subscribe(() => {
+      try {
+        Chart;
+      } catch (error) {
+        console.error(`Chart is not found. Import the Chart from app.module like shown below:
+        import('chart.js');
+        `);
+        return;
+      }
 
-    this.initChart();
-    this._initialized = true;
+      this.initChart();
+      this._initialized = true;
+    });
   }
 
   onCanvasClick = event => {
@@ -87,6 +99,8 @@ export class ChartComponent implements AfterViewInit, OnDestroy {
       options: this.options,
       plugins: this.plugins,
     });
+
+    this.cdRef.detectChanges();
   };
 
   generateLegend = () => {
@@ -98,6 +112,7 @@ export class ChartComponent implements AfterViewInit, OnDestroy {
   refresh = () => {
     if (this.chart) {
       this.chart.update();
+      this.cdRef.detectChanges();
     }
   };
 

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -5,19 +5,22 @@ import { MessageService } from 'primeng/components/common/messageservice';
 import { ToastModule } from 'primeng/toast';
 import { forkJoin } from 'rxjs';
 import { take } from 'rxjs/operators';
+import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
+import { ButtonComponent } from './components/button/button.component';
+import { ChangePasswordComponent } from './components/change-password/change-password.component';
+import { ChartComponent } from './components/chart/chart.component';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 import { ErrorComponent } from './components/errors/error.component';
+import { ValidationErrorComponent } from './components/errors/validation-error.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
 import { ModalComponent } from './components/modal/modal.component';
+import { ProfileComponent } from './components/profile/profile.component';
 import { ToastComponent } from './components/toast/toast.component';
 import styles from './contants/styles';
 import { ErrorHandler } from './handlers/error.handler';
-import { ButtonComponent } from './components/button/button.component';
-import { ValidationErrorComponent } from './components/errors/validation-error.component';
-import { ChangePasswordComponent } from './components/change-password/change-password.component';
-import { ProfileComponent } from './components/profile/profile.component';
-import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
-import { ChartComponent } from './components/chart/chart.component';
+import { chartJsLoaded$ } from './utils/widget-utils';
+
+import('chart.js').then(() => chartJsLoaded$.next(true));
 
 export function appendScript(injector: Injector) {
   const fn = function() {

npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts

@@ -0,0 +1 @@
+export * from './widget-utils';

npm/ng-packs/packages/theme-shared/src/lib/utils/widget-utils.ts

@@ -0,0 +1,16 @@
+import { ReplaySubject } from 'rxjs';
+
+export function getRandomBackgroundColor(count) {
+  const colors = [];
+
+  for (let i = 0; i < count; i++) {
+    const r = ((i + 5) * (i + 5) * 474) % 255;
+    const g = ((i + 5) * (i + 5) * 1600) % 255;
+    const b = ((i + 5) * (i + 5) * 84065) % 255;
+    colors.push('rgba(' + r + ', ' + g + ', ' + b + ', 0.7)');
+  }
+
+  return colors;
+}
+
+export const chartJsLoaded$ = new ReplaySubject(1);

npm/ng-packs/packages/theme-shared/src/public-api.ts

@@ -7,3 +7,4 @@ export * from './lib/animations';
 export * from './lib/components';
 export * from './lib/models';
 export * from './lib/services';
+export * from './lib/utils';