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 { ChartComponent } from './chart.component';
-import * as widgetUtils from '../utils/widget-utils';
+import * as widgetUtils from './widget-utils';
-import { chartJsLoaded$ } from '../utils/widget-utils';
+
-// import 'chart.js';
-declare const Chart;
 
 Object.defineProperty(window, 'getComputedStyle', {
   value: () => ({
@@ -34,19 +32,18 @@ describe('ChartComponent', () => {
         },
       },
     });
-  });
 
-  test('should throw error when chart.js is not loaded', () => {
+    window.ResizeObserver =
-    try {
+    window.ResizeObserver ||
-      spectator.component.testChartJs();
+    jest.fn().mockImplementation(() => ({
-    } catch (error) {
+        disconnect: jest.fn(),
-      expect(error.message).toContain('Chart is not found');
+        observe: jest.fn(),
-    }
+        unobserve: jest.fn(),
+    }));
   });
 
   test('should have a success class by default', done => {
-    import('chart.js').then(() => {
+    import('chart.js/auto').then(() => {
-      chartJsLoaded$.next();
       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": [

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

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

npm/ng-packs/packages/theme-basic/tsconfig.json

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

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

@@ -11,7 +11,6 @@
     "@ng-bootstrap/ng-bootstrap",
     "@ngx-validate/core",
     "@swimlane/ngx-datatable",
-    "bootstrap",
+    "bootstrap"
-    "chart.js"
   ]
 }

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

@@ -13,7 +13,6 @@
     "@ngx-validate/core": "^0.0.13",
     "@swimlane/ngx-datatable": "^19.0.0",
     "bootstrap": "~4.6.0",
-    "chart.js": "^2.9.3",
     "tslib": "^2.0.0"
   },
   "publishConfig": {

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

@@ -1,11 +0,0 @@
-<div
-  style="position:relative"
-  [style.width]="responsive && !width ? null : width"
-  [style.height]="responsive && !height ? null : height"
->
-  <canvas
-    [attr.width]="responsive && !width ? null : width"
-    [attr.height]="responsive && !height ? null : height"
-    (click)="onCanvasClick($event)"
-  ></canvas>
-</div>

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

@@ -1,141 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  Output,
-} from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { chartJsLoaded$ } from '../../utils/widget-utils';
-declare const Chart: any;
-
-@Component({
-  selector: 'abp-chart',
-  templateUrl: './chart.component.html',
-})
-export class ChartComponent implements AfterViewInit, OnDestroy {
-  @Input() type: string;
-
-  @Input() options: any = {};
-
-  @Input() plugins: any[] = [];
-
-  @Input() width: string;
-
-  @Input() height: string;
-
-  @Input() responsive = true;
-
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() readonly onDataSelect: EventEmitter<any> = new EventEmitter();
-
-  @Output() readonly initialized = new BehaviorSubject(this);
-
-  private _initialized: boolean;
-
-  _data: any;
-
-  chart: any;
-
-  constructor(public el: ElementRef, private cdRef: ChangeDetectorRef) {}
-
-  @Input() get data(): any {
-    return this._data;
-  }
-
-  set data(val: any) {
-    this._data = val;
-    this.reinit();
-  }
-
-  get canvas() {
-    return this.el.nativeElement.children[0].children[0];
-  }
-
-  get base64Image() {
-    return this.chart.toBase64Image();
-  }
-
-  ngAfterViewInit() {
-    chartJsLoaded$.subscribe(() => {
-      this.testChartJs();
-
-      this.initChart();
-      this._initialized = true;
-    });
-  }
-
-  testChartJs() {
-    try {
-      Chart;
-    } catch (error) {
-      throw new Error(`Chart is not found. Import the Chart from app.module like shown below:
-      import('chart.js');
-      `);
-    }
-  }
-
-  onCanvasClick = event => {
-    if (this.chart) {
-      const element = this.chart.getElementAtEvent(event);
-      const dataset = this.chart.getDatasetAtEvent(event);
-      if (element && element.length && dataset) {
-        this.onDataSelect.emit({
-          originalEvent: event,
-          element: element[0],
-          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, {
-      type: this.type,
-      data: this.data,
-      options: this.options,
-      plugins: this.plugins,
-    });
-
-    this.cdRef.detectChanges();
-  };
-
-  generateLegend = () => {
-    if (this.chart) {
-      return this.chart.generateLegend();
-    }
-  };
-
-  refresh = () => {
-    if (this.chart) {
-      this.chart.update();
-      this.cdRef.detectChanges();
-    }
-  };
-
-  reinit = () => {
-    if (this.chart) {
-      this.chart.destroy();
-      this.initChart();
-    }
-  };
-
-  ngOnDestroy() {
-    if (this.chart) {
-      this.chart.destroy();
-      this._initialized = false;
-      this.chart = null;
-    }
-  }
-}

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

@@ -1,13 +1,12 @@
 export * from './breadcrumb/breadcrumb.component';
 export * from './button/button.component';
-export * from './chart/chart.component';
 export * from './confirmation/confirmation.component';
 export * from './http-error-wrapper/http-error-wrapper.component';
 export * from './loader-bar/loader-bar.component';
 export * from './loading/loading.component';
-export * from './modal/modal.component';
 export * from './modal/modal-close.directive';
 export * from './modal/modal-ref.service';
+export * from './modal/modal.component';
 export * from './sort-order-icon/sort-order-icon.component';
 export * from './table-empty-message/table-empty-message.component';
 export * from './table/table.component';

npm/ng-packs/packages/theme-shared/src/lib/tests/append-content.token.spec.ts

@@ -1,9 +1,8 @@
+import { DomInsertionService } from '@abp/ng.core';
 import { Component } from '@angular/core';
 import { createComponentFactory, Spectator } from '@ngneat/spectator';
-import { THEME_SHARED_APPEND_CONTENT } from '../tokens/append-content.token';
-import { DomInsertionService } from '@abp/ng.core';
-import { chartJsLoaded$ } from '../utils';
 import styles from '../constants/styles';
+import { THEME_SHARED_APPEND_CONTENT } from '../tokens/append-content.token';
 
 @Component({ selector: 'abp-dummy', template: '' })
 class DummyComponent {}
@@ -18,13 +17,4 @@ describe('AppendContentToken', () => {
     spectator.inject(THEME_SHARED_APPEND_CONTENT);
     expect(spectator.inject(DomInsertionService).has(styles)).toBe(true);
   });
-
-  it('should be loaded the chart.js', done => {
-    chartJsLoaded$.subscribe(loaded => {
-      expect(loaded).toBe(true);
-      done();
-    });
-
-    spectator.inject(THEME_SHARED_APPEND_CONTENT);
-  });
 });

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

@@ -12,7 +12,6 @@ import {
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
 import { ButtonComponent } from './components/button/button.component';
-import { ChartComponent } from './components/chart/chart.component';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 import { HttpErrorWrapperComponent } from './components/http-error-wrapper/http-error-wrapper.component';
 import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
@@ -43,7 +42,6 @@ import { DateParserFormatter } from './utils/date-parser-formatter';
 const declarationsWithExports = [
   BreadcrumbComponent,
   ButtonComponent,
-  ChartComponent,
   ConfirmationComponent,
   LoaderBarComponent,
   LoadingComponent,

npm/ng-packs/packages/theme-shared/src/lib/tokens/append-content.token.ts

@@ -1,7 +1,6 @@
 import { CONTENT_STRATEGY, DomInsertionService } from '@abp/ng.core';
 import { inject, InjectionToken } from '@angular/core';
 import styles from '../constants/styles';
-import { chartJsLoaded$ } from '../utils/widget-utils';
 
 export const THEME_SHARED_APPEND_CONTENT = new InjectionToken<void>('THEME_SHARED_APPEND_CONTENT', {
   providedIn: 'root',
@@ -9,7 +8,5 @@ export const THEME_SHARED_APPEND_CONTENT = new InjectionToken<void>('THEME_SHARE
     const domInsertion: DomInsertionService = inject(DomInsertionService);
 
     domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
-
-    import('chart.js').then(() => chartJsLoaded$.next(true));
   },
 });

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

@@ -1,3 +1,2 @@
 export * from './date-parser-formatter';
 export * from './validation-utils';
-export * from './widget-utils';

npm/ng-packs/packages/theme-shared/src/test-setup.ts

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

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

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

npm/ng-packs/tsconfig.base.json → npm/ng-packs/tsconfig.json

@@ -17,6 +17,7 @@
       "@abp/ng.account.core": ["packages/account-core/src/public-api.ts"],
       "@abp/ng.account/config": ["packages/account/config/src/public-api.ts"],
       "@abp/ng.components": ["packages/components/src/public-api.ts"],
+      "@abp/ng.components/chart.js": ["packages/components/chart.js/src/public-api.ts"],
       "@abp/ng.components/page": ["packages/components/page/src/public-api.ts"],
       "@abp/ng.components/tree": ["packages/components/tree/src/public-api.ts"],
       "@abp/ng.core": ["packages/core/src/public-api.ts"],