Merge pull request #10082 from abpframework/feat/7472

Angular UI: Move ChartComponent to @abp/ng.components/chart.js

npm/ng-packs/apps/dev-app-e2e/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/apps/dev-app/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/package.json

@@ -86,7 +86,7 @@
     "@typescript-eslint/parser": "~4.28.3",
     "angular-oauth2-oidc": "^12.1.0",
     "bootstrap": "^4.5.0",
-    "chart.js": "^2.9.3",
+    "chart.js": "^3.5.1",
     "cypress": "^7.3.0",
     "dotenv": "~10.0.0",
     "eslint": "7.22.0",

npm/ng-packs/packages/account-core/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/packages/account/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/packages/components/chart.js/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/packages/components/chart.js",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/tests/chart.component.spec.ts → npm/ng-packs/packages/components/chart.js/src/chart.component.spec.ts

@@ -1,10 +1,8 @@
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
 import { ReplaySubject } from 'rxjs';
-import { ChartComponent } from '../components';
-import * as widgetUtils from '../utils/widget-utils';
-import { chartJsLoaded$ } from '../utils/widget-utils';
-// import 'chart.js';
-declare const Chart;
+import { ChartComponent } from './chart.component';
+import * as widgetUtils from './widget-utils';
+
 
 Object.defineProperty(window, 'getComputedStyle', {
   value: () => ({
@@ -34,19 +32,18 @@ describe('ChartComponent', () => {
         },
       },
     });
-  });
 
-  test('should throw error when chart.js is not loaded', () => {
-    try {
-      spectator.component.testChartJs();
-    } catch (error) {
-      expect(error.message).toContain('Chart is not found');
-    }
+    window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+        disconnect: jest.fn(),
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+    }));
   });
 
   test('should have a success class by default', done => {
-    import('chart.js').then(() => {
-      chartJsLoaded$.next();
+    import('chart.js/auto').then(() => {
       setTimeout(() => {
         expect(spectator.component.chart).toBeTruthy();
         done();
@@ -56,7 +53,6 @@ describe('ChartComponent', () => {
 
   describe('#reinit', () => {
     it('should call the destroy method', done => {
-      chartJsLoaded$.next();
       const spy = jest.spyOn(spectator.component.chart, 'destroy');
       spectator.setHostInput({
         data: {
@@ -79,7 +75,6 @@ describe('ChartComponent', () => {
 
   describe('#refresh', () => {
     it('should call the update method', done => {
-      chartJsLoaded$.next();
       const spy = jest.spyOn(spectator.component.chart, 'update');
       spectator.component.refresh();
       setTimeout(() => {
@@ -89,38 +84,11 @@ describe('ChartComponent', () => {
     });
   });
 
-  describe('#generateLegend', () => {
-    it('should call the generateLegend method', done => {
-      chartJsLoaded$.next();
-      const spy = jest.spyOn(spectator.component.chart, 'generateLegend');
-      spectator.component.generateLegend();
-      setTimeout(() => {
-        expect(spy).toHaveBeenCalled();
-        done();
-      }, 0);
-    });
-  });
-
-  describe('#onCanvasClick', () => {
-    it('should emit the onDataSelect', done => {
-      spectator.component.onDataSelect.subscribe(() => {
-        done();
-      });
-
-      chartJsLoaded$.next();
-      jest
-        .spyOn(spectator.component.chart, 'getElementAtEvent')
-        .mockReturnValue([document.createElement('div')]);
-      spectator.click('canvas');
-    });
-  });
-
   describe('#base64Image', () => {
     it('should return the base64 image', done => {
-      chartJsLoaded$.next();
 
       setTimeout(() => {
-        expect(spectator.component.base64Image).toContain('base64');
+        expect(spectator.component.getBase64Image()).toContain('base64');
         done();
       }, 0);
     });

npm/ng-packs/packages/components/chart.js/src/chart.component.ts

@@ -0,0 +1,149 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+
+let Chart: any;
+
+@Component({
+  selector: 'abp-chart',
+  template: `
+    <div
+      style="position:relative"
+      [style.width]="responsive && !width ? null : width"
+      [style.height]="responsive && !height ? null : height"
+    >
+      <canvas
+        #canvas
+        [attr.width]="responsive && !width ? null : width"
+        [attr.height]="responsive && !height ? null : height"
+        (click)="onCanvasClick($event)"
+      ></canvas>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'abpChart',
+})
+export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
+  @Input() type: string;
+
+  @Input() data: any = {};
+
+  @Input() options: any = {};
+
+  @Input() plugins: any[] = [];
+
+  @Input() width: string;
+
+  @Input() height: string;
+
+  @Input() responsive = true;
+
+  @Output() dataSelect = new EventEmitter();
+
+  @Output() initialized = new EventEmitter<boolean>();
+
+  @ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement>;
+
+  chart: any;
+
+  constructor(public el: ElementRef, private cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    import('chart.js/auto').then(module => {
+      Chart = module.default;
+      this.initChart();
+      this.initialized.emit(true);
+    });
+  }
+
+  onCanvasClick(event) {
+    if (this.chart) {
+      const element = this.chart.getElementsAtEventForMode(
+        event,
+        'nearest',
+        { intersect: true },
+        false,
+      );
+      const dataset = this.chart.getElementsAtEventForMode(
+        event,
+        'dataset',
+        { intersect: true },
+        false,
+      );
+
+      if (element && element[0] && dataset) {
+        this.dataSelect.emit({ originalEvent: event, element: element[0], dataset: dataset });
+      }
+    }
+  }
+
+  initChart = () => {
+    const opts = this.options || {};
+    opts.responsive = this.responsive;
+
+    // allows chart to resize in responsive mode
+    if (opts.responsive && (this.height || this.width)) {
+      opts.maintainAspectRatio = false;
+    }
+
+    this.chart = new Chart(this.canvas.nativeElement, {
+      type: this.type as any,
+      data: this.data,
+      options: this.options,
+    });
+  };
+
+  getCanvas = () => {
+    return this.canvas.nativeElement;
+  };
+
+  getBase64Image = () => {
+    return this.chart.toBase64Image();
+  };
+
+  generateLegend = () => {
+    if (this.chart) {
+      return this.chart.generateLegend();
+    }
+  };
+
+  refresh = () => {
+    if (this.chart) {
+      this.chart.update();
+      this.cdr.detectChanges();
+    }
+  };
+
+  reinit = () => {
+    if (!this.chart) return;
+    this.chart.destroy();
+    this.initChart();
+  };
+
+  ngOnDestroy() {
+    if (this.chart) {
+      this.chart.destroy();
+      this.chart = null;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.chart) return;
+
+    if (changes.data?.currentValue || changes.options?.currentValue) {
+      this.chart.destroy();
+      this.initChart();
+    }
+  }
+}

npm/ng-packs/packages/components/chart.js/src/chart.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ChartComponent } from './chart.component';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [ChartComponent],
+  declarations: [ChartComponent],
+  providers: [],
+})
+export class ChartModule {}

npm/ng-packs/packages/components/chart.js/src/public-api.ts

@@ -0,0 +1,4 @@
+export * from './chart.component';
+export * from './chart.module';
+export * from './widget-utils';
+

npm/ng-packs/packages/theme-shared/src/lib/utils/widget-utils.ts → npm/ng-packs/packages/components/chart.js/src/widget-utils.ts

@@ -1,5 +1,3 @@
-import { ReplaySubject } from 'rxjs';
-
 export function getRandomBackgroundColor(count) {
   const colors = [];
 
@@ -12,5 +10,3 @@ export function getRandomBackgroundColor(count) {
 
   return colors;
 }
-
-export const chartJsLoaded$ = new ReplaySubject(1);

npm/ng-packs/packages/components/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "allowedNonPeerDependencies": ["ng-zorro-antd"]
+  "allowedNonPeerDependencies": ["ng-zorro-antd", "chart.js"]
 }

npm/ng-packs/packages/components/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "ng-zorro-antd": "^12.0.1",
+    "chart.js": "^3.5.1",
     "tslib": "^2.0.0"
   },
   "publishConfig": {

npm/ng-packs/packages/components/src/test-setup.ts

@@ -1 +1,3 @@
+import 'jest-canvas-mock';
 import 'jest-preset-angular/setup-jest';
+

npm/ng-packs/packages/components/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/packages/core/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/packages/feature-management/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/packages/identity/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/packages/permission-management/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

npm/ng-packs/packages/schematics/src/utils/angular/tsconfig.ts

@@ -66,11 +66,11 @@ export function addTsConfigProjectReferences(paths: string[]): Rule {
  * Throws an exception when the base tsconfig doesn't exists.
  */
 export function verifyBaseTsConfigExists(host: Tree): void {
-  if (host.exists('tsconfig.base.json')) {
+  if (host.exists('tsconfig.json')) {
     return;
   }
 
   throw new SchematicsException(
-    `Cannot find base TypeScript configuration file 'tsconfig.base.json'.`,
+    `Cannot find base TypeScript configuration file 'tsconfig.json'.`,
   );
 }

npm/ng-packs/packages/setting-management/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [