From f90f389fe56f0338d83c609dcc7f2ee8bca8c2fb Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 11 Sep 2019 15:45:36 +0300 Subject: [PATCH] feature(theme-shared): add lazy import chart.js add widget utils fix code quality of chart.component --- .../packages/theme-shared/ng-package.json | 3 +- .../packages/theme-shared/package.json | 1 + .../lib/components/chart/chart.component.ts | 39 +++++++++++++------ .../src/lib/theme-shared.module.ts | 15 ++++--- .../theme-shared/src/lib/utils/index.ts | 1 + .../src/lib/utils/widget-utils.ts | 16 ++++++++ .../packages/theme-shared/src/public-api.ts | 1 + 7 files changed, 57 insertions(+), 19 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/utils/widget-utils.ts diff --git a/npm/ng-packs/packages/theme-shared/ng-package.json b/npm/ng-packs/packages/theme-shared/ng-package.json index bcd238cd36..984eb7c61a 100644 --- a/npm/ng-packs/packages/theme-shared/ng-package.json +++ b/npm/ng-packs/packages/theme-shared/ng-package.json @@ -13,6 +13,7 @@ "font-awesome", "ngx-perfect-scrollbar", "primeicons", - "primeng" + "primeng", + "chart.js" ] } diff --git a/npm/ng-packs/packages/theme-shared/package.json b/npm/ng-packs/packages/theme-shared/package.json index a71bc08def..867930bf1f 100644 --- a/npm/ng-packs/packages/theme-shared/package.json +++ b/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", diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.ts index 2c8b7d0fb4..a3ff6bbdaa 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.ts +++ b/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(); } }; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 0933a607d2..606bb0dafd 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/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() { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts new file mode 100644 index 0000000000..1976b866a0 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/utils/index.ts @@ -0,0 +1 @@ +export * from './widget-utils'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/utils/widget-utils.ts b/npm/ng-packs/packages/theme-shared/src/lib/utils/widget-utils.ts new file mode 100644 index 0000000000..dfe81c973c --- /dev/null +++ b/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); diff --git a/npm/ng-packs/packages/theme-shared/src/public-api.ts b/npm/ng-packs/packages/theme-shared/src/public-api.ts index 6a9eae0f64..aaa54db7c2 100644 --- a/npm/ng-packs/packages/theme-shared/src/public-api.ts +++ b/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';