UNPKG

3.57 kBJavaScriptView Raw
1import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Input, Output, NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import * as Chart from 'chart.js';
4
5class UIChart {
6 constructor(el) {
7 this.el = el;
8 this.plugins = [];
9 this.responsive = true;
10 this.onDataSelect = new EventEmitter();
11 this._options = {};
12 }
13 get data() {
14 return this._data;
15 }
16 set data(val) {
17 this._data = val;
18 this.reinit();
19 }
20 get options() {
21 return this._options;
22 }
23 set options(val) {
24 this._options = val;
25 this.reinit();
26 }
27 ngAfterViewInit() {
28 this.initChart();
29 this.initialized = true;
30 }
31 onCanvasClick(event) {
32 if (this.chart) {
33 let element = this.chart.getElementAtEvent(event);
34 let dataset = this.chart.getDatasetAtEvent(event);
35 if (element && element[0] && dataset) {
36 this.onDataSelect.emit({ originalEvent: event, element: element[0], dataset: dataset });
37 }
38 }
39 }
40 initChart() {
41 let opts = this.options || {};
42 opts.responsive = this.responsive;
43 // allows chart to resize in responsive mode
44 if (opts.responsive && (this.height || this.width)) {
45 opts.maintainAspectRatio = false;
46 }
47 this.chart = new Chart(this.el.nativeElement.children[0].children[0], {
48 type: this.type,
49 data: this.data,
50 options: this.options,
51 plugins: this.plugins
52 });
53 }
54 getCanvas() {
55 return this.el.nativeElement.children[0].children[0];
56 }
57 getBase64Image() {
58 return this.chart.toBase64Image();
59 }
60 generateLegend() {
61 if (this.chart) {
62 return this.chart.generateLegend();
63 }
64 }
65 refresh() {
66 if (this.chart) {
67 this.chart.update();
68 }
69 }
70 reinit() {
71 if (this.chart) {
72 this.chart.destroy();
73 this.initChart();
74 }
75 }
76 ngOnDestroy() {
77 if (this.chart) {
78 this.chart.destroy();
79 this.initialized = false;
80 this.chart = null;
81 }
82 }
83}
84UIChart.decorators = [
85 { type: Component, args: [{
86 selector: 'p-chart',
87 template: `
88 <div style="position:relative" [style.width]="responsive && !width ? null : width" [style.height]="responsive && !height ? null : height">
89 <canvas [attr.width]="responsive && !width ? null : width" [attr.height]="responsive && !height ? null : height" (click)="onCanvasClick($event)"></canvas>
90 </div>
91 `,
92 changeDetection: ChangeDetectionStrategy.OnPush,
93 encapsulation: ViewEncapsulation.None
94 },] }
95];
96UIChart.ctorParameters = () => [
97 { type: ElementRef }
98];
99UIChart.propDecorators = {
100 type: [{ type: Input }],
101 plugins: [{ type: Input }],
102 width: [{ type: Input }],
103 height: [{ type: Input }],
104 responsive: [{ type: Input }],
105 onDataSelect: [{ type: Output }],
106 data: [{ type: Input }],
107 options: [{ type: Input }]
108};
109class ChartModule {
110}
111ChartModule.decorators = [
112 { type: NgModule, args: [{
113 imports: [CommonModule],
114 exports: [UIChart],
115 declarations: [UIChart]
116 },] }
117];
118
119/**
120 * Generated bundle index. Do not edit.
121 */
122
123export { ChartModule, UIChart };
124//# sourceMappingURL=primeng-chart.js.map