diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.html deleted file mode 100644 index 211614c90d..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.html +++ /dev/null @@ -1,11 +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 deleted file mode 100644 index 16fe78d661..0000000000 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.ts +++ /dev/null @@ -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 = 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; - } - } -} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts index 45036680be..5fe1fbb572 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts +++ b/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'; 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 11a2ce3493..8a9b6ed201 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 @@ -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,