@coreui/angular-chartjs 2.0.0-alpha.3 → 2.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +128 -126
  3. package/{esm2015/coreui-angular-chartjs.js → esm2020/coreui-angular-chartjs.mjs} +0 -0
  4. package/esm2020/lib/chartjs.component.mjs +207 -0
  5. package/esm2020/lib/chartjs.module.mjs +20 -0
  6. package/{esm2015/public-api.js → esm2020/public-api.mjs} +0 -0
  7. package/fesm2015/{coreui-angular-chartjs.js → coreui-angular-chartjs.mjs} +24 -37
  8. package/fesm2015/coreui-angular-chartjs.mjs.map +1 -0
  9. package/fesm2020/coreui-angular-chartjs.mjs +235 -0
  10. package/fesm2020/coreui-angular-chartjs.mjs.map +1 -0
  11. package/lib/chartjs.component.d.ts +12 -13
  12. package/package.json +23 -9
  13. package/bundles/coreui-angular-chartjs.umd.js +0 -613
  14. package/bundles/coreui-angular-chartjs.umd.js.map +0 -1
  15. package/esm2015/lib/chartjs.component.js +0 -212
  16. package/esm2015/lib/chartjs.interface.js +0 -2
  17. package/esm2015/lib/chartjs.module.js +0 -21
  18. package/fesm2015/coreui-angular-chartjs.js.map +0 -1
  19. package/lib/chartjs.interface.d.ts +0 -65
package/fesm2015/{coreui-angular-chartjs.js → coreui-angular-chartjs.mjs} RENAMED
@@ -2,9 +2,10 @@ import * as i0 from '@angular/core';
2
2
  import { EventEmitter, Component, Input, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
3
3
  import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
4
4
  import { merge } from 'lodash';
5
- import Chart from 'chart.js/auto';
5
+ import { Chart, registerables } from 'chart.js';
6
6
  import { customTooltips } from '@coreui/chartjs';
7
7
 
8
+ Chart.register(...registerables);
8
9
  let nextId = 0;
9
10
  class ChartjsComponent {
10
11
  constructor(elementRef, ngZone, renderer) {
@@ -12,7 +13,6 @@ class ChartjsComponent {
12
13
  this.ngZone = ngZone;
13
14
  this.renderer = renderer;
14
15
  this.customTooltips = true;
15
- this._height = 150;
16
16
  this.id = `c-chartjs-${nextId++}`;
17
17
  this.plugins = [];
18
18
  this._redraw = false;
@@ -45,20 +45,12 @@ class ChartjsComponent {
45
45
  'chart-wrapper': this.wrapper
46
46
  };
47
47
  }
48
- get chartData() {
49
- const canvasRef = this.canvasElement.nativeElement;
50
- return typeof this.data === 'function'
51
- ? canvasRef.value
52
- ? this.data(canvasRef.value)
53
- : { labels: [], datasets: [] }
54
- : merge({ labels: [], datasets: [] }, Object.assign({}, this.data));
55
- }
56
48
  ngAfterViewInit() {
57
49
  this.chartRender();
58
50
  // this.chartUpdate();
59
51
  }
60
52
  ngOnChanges(changes) {
61
- if (changes.data && !changes.data.firstChange) {
53
+ if (changes['data'] && !changes['data'].firstChange) {
62
54
  this.chartUpdate();
63
55
  }
64
56
  }
@@ -80,13 +72,8 @@ class ChartjsComponent {
80
72
  (_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
81
73
  }
82
74
  chartRender() {
83
- var _a;
84
75
  if (!this.canvasElement)
85
76
  return;
86
- if (this.customTooltips) {
87
- const options = this.options;
88
- this.options = Object.assign(Object.assign({}, options), { plugins: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.plugins), { tooltip: Object.assign(Object.assign({}, (_a = options === null || options === void 0 ? void 0 : options.plugins) === null || _a === void 0 ? void 0 : _a.tooltip), { enabled: false, mode: 'index', position: 'nearest', external: customTooltips }) }) });
89
- }
90
77
  const ctx = this.canvasElement.nativeElement.getContext('2d');
91
78
  this.ngZone.runOutsideAngular(() => {
92
79
  const config = this.chartConfig();
@@ -138,39 +125,40 @@ class ChartjsComponent {
138
125
  chartDataConfig() {
139
126
  var _a, _b, _c, _d;
140
127
  return {
141
- labels: (_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.labels) !== null && _b !== void 0 ? _b : [],
142
- datasets: (_d = [...(_c = this.chartData) === null || _c === void 0 ? void 0 : _c.datasets]) !== null && _d !== void 0 ? _d : []
128
+ labels: (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.labels) !== null && _b !== void 0 ? _b : [],
129
+ datasets: (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.datasets) !== null && _d !== void 0 ? _d : []
143
130
  };
144
131
  }
132
+ chartOptions() {
133
+ return this.options;
134
+ }
145
135
  chartConfig() {
146
136
  this.chartCustomTooltips();
147
137
  return {
148
138
  data: this.chartDataConfig(),
149
- options: this.options,
139
+ options: this.chartOptions(),
150
140
  plugins: this.plugins,
151
141
  type: this.type
152
142
  };
153
143
  }
154
144
  chartCustomTooltips() {
155
- var _a;
145
+ var _a, _b, _c;
156
146
  if (this.customTooltips) {
157
147
  const options = this.options;
158
- this.options = Object.assign(Object.assign({}, options), { plugins: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.plugins), { tooltip: Object.assign(Object.assign({}, (_a = options === null || options === void 0 ? void 0 : options.plugins) === null || _a === void 0 ? void 0 : _a.tooltip), { enabled: false, mode: 'index', position: 'nearest', external: customTooltips }) }) });
148
+ // @ts-ignore
149
+ const plugins = (_a = this.options) === null || _a === void 0 ? void 0 : _a.plugins;
150
+ // @ts-ignore
151
+ const tooltip = (_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.plugins) === null || _c === void 0 ? void 0 : _c.tooltip;
152
+ this.options = merge(Object.assign(Object.assign({}, options), { plugins: Object.assign(Object.assign({}, plugins), { tooltip: Object.assign(Object.assign({}, tooltip), { enabled: false, mode: 'index', position: 'nearest', external: customTooltips }) }) }));
159
153
  }
160
- ;
161
154
  }
162
155
  ;
163
156
  }
164
- ChartjsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
165
- ChartjsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ChartjsComponent, selector: "c-chart", inputs: { customTooltips: "customTooltips", data: "data", height: "height", id: "id", options: "options", plugins: "plugins", redraw: "redraw", type: "type", width: "width", wrapper: "wrapper" }, outputs: { getDatasetAtEvent: "getDatasetAtEvent", getElementAtEvent: "getElementAtEvent", getElementsAtEvent: "getElementsAtEvent" }, host: { properties: { "style.height.px": "this.height", "style.width.px": "this.width", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true }], exportAs: ["cChart"], usesOnChanges: true, ngImport: i0, template: "<canvas\n #canvasElement\n (click)=\"handleOnClick($event)\"\n [height]=\"height\"\n [id]=\"id\"\n [width]=\"width\"\n role=\"img\"\n style=\"display: none;\"\n>\n <ng-content></ng-content>\n</canvas>\n", styles: [":host.chart-wrapper{display:block}\n"] });
166
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsComponent, decorators: [{
157
+ ChartjsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
158
+ ChartjsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ChartjsComponent, selector: "c-chart", inputs: { customTooltips: "customTooltips", data: "data", height: "height", id: "id", options: "options", plugins: "plugins", redraw: "redraw", type: "type", width: "width", wrapper: "wrapper" }, outputs: { getDatasetAtEvent: "getDatasetAtEvent", getElementAtEvent: "getElementAtEvent", getElementsAtEvent: "getElementsAtEvent" }, host: { properties: { "style.height.px": "this.height", "style.width.px": "this.width", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true }], exportAs: ["cChart"], usesOnChanges: true, ngImport: i0, template: "<canvas\r\n #canvasElement\r\n (click)=\"handleOnClick($event)\"\r\n [height]=\"height\"\r\n [id]=\"id\"\r\n [width]=\"width\"\r\n role=\"img\"\r\n style=\"display: none;\"\r\n>\r\n <ng-content></ng-content>\r\n</canvas>\r\n", styles: [":host.chart-wrapper{display:block}\n"] });
159
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsComponent, decorators: [{
167
160
  type: Component,
168
- args: [{
169
- selector: 'c-chart',
170
- templateUrl: './chartjs.component.html',
171
- styleUrls: ['./chartjs.component.scss'],
172
- exportAs: 'cChart'
173
- }]
161
+ args: [{ selector: 'c-chart', exportAs: 'cChart', template: "<canvas\r\n #canvasElement\r\n (click)=\"handleOnClick($event)\"\r\n [height]=\"height\"\r\n [id]=\"id\"\r\n [width]=\"width\"\r\n role=\"img\"\r\n style=\"display: none;\"\r\n>\r\n <ng-content></ng-content>\r\n</canvas>\r\n", styles: [":host.chart-wrapper{display:block}\n"] }]
174
162
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { customTooltips: [{
175
163
  type: Input
176
164
  }], data: [{
@@ -213,16 +201,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
213
201
 
214
202
  class ChartjsModule {
215
203
  }
216
- ChartjsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
217
- ChartjsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsModule, declarations: [ChartjsComponent], exports: [ChartjsComponent] });
218
- ChartjsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsModule, imports: [[]] });
219
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsModule, decorators: [{
204
+ ChartjsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
205
+ ChartjsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsModule, declarations: [ChartjsComponent], exports: [ChartjsComponent] });
206
+ ChartjsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsModule });
207
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsModule, decorators: [{
220
208
  type: NgModule,
221
209
  args: [{
222
210
  declarations: [
223
211
  ChartjsComponent
224
212
  ],
225
- imports: [],
226
213
  exports: [
227
214
  ChartjsComponent
228
215
  ]
@@ -238,4 +225,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
238
225
  */
239
226
 
240
227
  export { ChartjsComponent, ChartjsModule };
241
- //# sourceMappingURL=coreui-angular-chartjs.js.map
228
+ //# sourceMappingURL=coreui-angular-chartjs.mjs.map
package/fesm2015/coreui-angular-chartjs.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"coreui-angular-chartjs.mjs","sources":["../../../projects/coreui-angular-chartjs/src/lib/chartjs.component.ts","../../../projects/coreui-angular-chartjs/src/lib/chartjs.component.html","../../../projects/coreui-angular-chartjs/src/lib/chartjs.module.ts","../../../projects/coreui-angular-chartjs/src/public-api.ts","../../../projects/coreui-angular-chartjs/src/coreui-angular-chartjs.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n Component,\r\n ElementRef,\r\n EventEmitter,\r\n HostBinding,\r\n Input,\r\n NgZone,\r\n OnChanges,\r\n OnDestroy,\r\n Output,\r\n Renderer2,\r\n SimpleChanges,\r\n ViewChild\r\n} from '@angular/core';\r\nimport { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\r\n\r\nimport { merge } from 'lodash';\r\n\r\nimport { Chart, ChartConfiguration, ChartType, DefaultDataPoint, registerables } from 'chart.js';\r\nimport { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';\r\n\r\nChart.register(...registerables);\r\n\r\nlet nextId = 0;\r\n\r\n@Component({\r\n selector: 'c-chart',\r\n templateUrl: './chartjs.component.html',\r\n styleUrls: ['./chartjs.component.scss'],\r\n exportAs: 'cChart'\r\n})\r\nexport class ChartjsComponent<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges {\r\n\r\n static ngAcceptInputType_height: NumberInput;\r\n static ngAcceptInputType_width: NumberInput;\r\n static ngAcceptInputType_redraw: BooleanInput;\r\n\r\n @Input() customTooltips = true;\r\n @Input() data?: ChartConfiguration<TType, TData, TLabel>['data'];\r\n\r\n @HostBinding('style.height.px')\r\n @Input()\r\n set height(value: number | undefined) {\r\n this._height = coerceNumberProperty(value);\r\n }\r\n\r\n get height() {\r\n return this._height;\r\n }\r\n\r\n private _height: number | undefined;\r\n\r\n @Input() id = `c-chartjs-${nextId++}`;\r\n @Input() options?: ChartConfiguration<TType, TData, TLabel>['options'];\r\n @Input() plugins: ChartConfiguration<TType, TData, TLabel>['plugins'] = [];\r\n\r\n @Input()\r\n set redraw(value: boolean) {\r\n this._redraw = coerceBooleanProperty(value);\r\n }\r\n\r\n get redraw(): boolean {\r\n return this._redraw;\r\n }\r\n\r\n private _redraw = false;\r\n\r\n @Input() type: ChartConfiguration<TType, TData, TLabel>['type'] = 'bar' as TType;\r\n\r\n @HostBinding('style.width.px')\r\n @Input()\r\n set width(value: number | undefined) {\r\n this._width = coerceNumberProperty(value);\r\n }\r\n\r\n get width() {\r\n return this._width;\r\n }\r\n\r\n private _width: number | undefined;\r\n\r\n @Input() wrapper = true;\r\n\r\n @Output() getDatasetAtEvent = new EventEmitter<any>();\r\n @Output() getElementAtEvent = new EventEmitter<any>();\r\n @Output() getElementsAtEvent = new EventEmitter<any>();\r\n\r\n @ViewChild('canvasElement') canvasElement!: ElementRef;\r\n\r\n chart!: Chart<TType, TData, TLabel>;\r\n\r\n @HostBinding('class')\r\n get hostClasses() {\r\n return {\r\n 'chart-wrapper': this.wrapper\r\n };\r\n }\r\n\r\n constructor(\r\n private elementRef: ElementRef,\r\n private ngZone: NgZone,\r\n private renderer: Renderer2\r\n ) {}\r\n\r\n ngAfterViewInit(): void {\r\n this.chartRender();\r\n // this.chartUpdate();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['data'] && !changes['data'].firstChange) {\r\n this.chartUpdate();\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.chartDestroy();\r\n }\r\n\r\n public handleOnClick($event: MouseEvent) {\r\n if (!this.chart) return;\r\n\r\n const datasetAtEvent = this.chart.getElementsAtEventForMode($event, 'dataset', { intersect: true }, false);\r\n this.getDatasetAtEvent.emit(datasetAtEvent);\r\n\r\n const elementAtEvent = this.chart.getElementsAtEventForMode($event, 'nearest', { intersect: true }, false);\r\n this.getElementAtEvent.emit(elementAtEvent);\r\n\r\n const elementsAtEvent = this.chart.getElementsAtEventForMode($event, 'index', { intersect: true }, false);\r\n this.getElementsAtEvent.emit(elementsAtEvent);\r\n }\r\n\r\n public chartDestroy() {\r\n this.chart?.destroy();\r\n }\r\n\r\n public chartRender() {\r\n if (!this.canvasElement) return;\r\n\r\n const ctx: CanvasRenderingContext2D = this.canvasElement.nativeElement.getContext('2d');\r\n\r\n this.ngZone.runOutsideAngular(() => {\r\n const config = this.chartConfig();\r\n if (config) {\r\n this.chart = new Chart(ctx, config);\r\n setTimeout(() => {\r\n this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');\r\n });\r\n }\r\n });\r\n }\r\n\r\n chartUpdate() {\r\n if (!this.chart) return;\r\n\r\n if (this.redraw) {\r\n this.chartDestroy();\r\n setTimeout(() => {\r\n this.chartRender();\r\n });\r\n return;\r\n }\r\n\r\n const config = this.chartConfig();\r\n\r\n if (this.options) {\r\n Object.assign(this.chart.options, config.options);\r\n }\r\n\r\n if (!this.chart.config.data) {\r\n this.chart.config.data = { ...config.data };\r\n this.chartUpdateOutsideAngular();\r\n }\r\n\r\n if (this.chart) {\r\n Object.assign(this.chart.config.options, config.options);\r\n Object.assign(this.chart.config.plugins, config.plugins);\r\n Object.assign(this.chart.config.data, config.data);\r\n }\r\n\r\n this.chartUpdateOutsideAngular();\r\n }\r\n\r\n private chartUpdateOutsideAngular() {\r\n setTimeout(() => {\r\n this.ngZone.runOutsideAngular(() => {\r\n this.chart?.update();\r\n });\r\n });\r\n }\r\n\r\n public chartToBase64Image(): string | undefined {\r\n return this.chart?.toBase64Image();\r\n }\r\n\r\n private chartDataConfig(): ChartConfiguration<TType, TData, TLabel>['data'] {\r\n return {\r\n labels: this.data?.labels ?? [],\r\n datasets: this.data?.datasets ?? []\r\n };\r\n }\r\n\r\n private chartOptions(): ChartConfiguration<TType, TData, TLabel>['options'] {\r\n return this.options;\r\n }\r\n\r\n private chartConfig(): ChartConfiguration<TType, TData, TLabel> {\r\n this.chartCustomTooltips();\r\n return {\r\n data: this.chartDataConfig(),\r\n options: this.chartOptions(),\r\n plugins: this.plugins,\r\n type: this.type\r\n };\r\n }\r\n\r\n private chartCustomTooltips() {\r\n if (this.customTooltips) {\r\n const options = this.options;\r\n // @ts-ignore\r\n const plugins = this.options?.plugins;\r\n // @ts-ignore\r\n const tooltip = this.options?.plugins?.tooltip;\r\n this.options = merge({\r\n ...options,\r\n plugins: {\r\n ...plugins,\r\n tooltip: {\r\n ...tooltip,\r\n enabled: false,\r\n mode: 'index',\r\n position: 'nearest',\r\n external: cuiCustomTooltips\r\n }\r\n }\r\n });\r\n }\r\n };\r\n}\r\n","<canvas\r\n #canvasElement\r\n (click)=\"handleOnClick($event)\"\r\n [height]=\"height\"\r\n [id]=\"id\"\r\n [width]=\"width\"\r\n role=\"img\"\r\n style=\"display: none;\"\r\n>\r\n <ng-content></ng-content>\r\n</canvas>\r\n","import { NgModule } from '@angular/core';\r\nimport { ChartjsComponent } from './chartjs.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n ChartjsComponent\r\n ],\r\n exports: [\r\n ChartjsComponent\r\n ]\r\n})\r\nexport class ChartjsModule { }\r\n","/*\n * Public API Surface of coreui-angular-chartjs\n */\n\nexport * from './lib/chartjs.component';\nexport * from './lib/chartjs.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["cuiCustomTooltips"],"mappings":"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"}
package/fesm2020/coreui-angular-chartjs.mjs ADDED
@@ -0,0 +1,235 @@
1
+ import * as i0 from '@angular/core';
2
+ import { EventEmitter, Component, Input, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
3
+ import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
4
+ import { merge } from 'lodash';
5
+ import { Chart, registerables } from 'chart.js';
6
+ import { customTooltips } from '@coreui/chartjs';
7
+
8
+ Chart.register(...registerables);
9
+ let nextId = 0;
10
+ class ChartjsComponent {
11
+ constructor(elementRef, ngZone, renderer) {
12
+ this.elementRef = elementRef;
13
+ this.ngZone = ngZone;
14
+ this.renderer = renderer;
15
+ this.customTooltips = true;
16
+ this.id = `c-chartjs-${nextId++}`;
17
+ this.plugins = [];
18
+ this._redraw = false;
19
+ this.type = 'bar';
20
+ this.wrapper = true;
21
+ this.getDatasetAtEvent = new EventEmitter();
22
+ this.getElementAtEvent = new EventEmitter();
23
+ this.getElementsAtEvent = new EventEmitter();
24
+ }
25
+ set height(value) {
26
+ this._height = coerceNumberProperty(value);
27
+ }
28
+ get height() {
29
+ return this._height;
30
+ }
31
+ set redraw(value) {
32
+ this._redraw = coerceBooleanProperty(value);
33
+ }
34
+ get redraw() {
35
+ return this._redraw;
36
+ }
37
+ set width(value) {
38
+ this._width = coerceNumberProperty(value);
39
+ }
40
+ get width() {
41
+ return this._width;
42
+ }
43
+ get hostClasses() {
44
+ return {
45
+ 'chart-wrapper': this.wrapper
46
+ };
47
+ }
48
+ ngAfterViewInit() {
49
+ this.chartRender();
50
+ // this.chartUpdate();
51
+ }
52
+ ngOnChanges(changes) {
53
+ if (changes['data'] && !changes['data'].firstChange) {
54
+ this.chartUpdate();
55
+ }
56
+ }
57
+ ngOnDestroy() {
58
+ this.chartDestroy();
59
+ }
60
+ handleOnClick($event) {
61
+ if (!this.chart)
62
+ return;
63
+ const datasetAtEvent = this.chart.getElementsAtEventForMode($event, 'dataset', { intersect: true }, false);
64
+ this.getDatasetAtEvent.emit(datasetAtEvent);
65
+ const elementAtEvent = this.chart.getElementsAtEventForMode($event, 'nearest', { intersect: true }, false);
66
+ this.getElementAtEvent.emit(elementAtEvent);
67
+ const elementsAtEvent = this.chart.getElementsAtEventForMode($event, 'index', { intersect: true }, false);
68
+ this.getElementsAtEvent.emit(elementsAtEvent);
69
+ }
70
+ chartDestroy() {
71
+ this.chart?.destroy();
72
+ }
73
+ chartRender() {
74
+ if (!this.canvasElement)
75
+ return;
76
+ const ctx = this.canvasElement.nativeElement.getContext('2d');
77
+ this.ngZone.runOutsideAngular(() => {
78
+ const config = this.chartConfig();
79
+ if (config) {
80
+ this.chart = new Chart(ctx, config);
81
+ setTimeout(() => {
82
+ this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
83
+ });
84
+ }
85
+ });
86
+ }
87
+ chartUpdate() {
88
+ if (!this.chart)
89
+ return;
90
+ if (this.redraw) {
91
+ this.chartDestroy();
92
+ setTimeout(() => {
93
+ this.chartRender();
94
+ });
95
+ return;
96
+ }
97
+ const config = this.chartConfig();
98
+ if (this.options) {
99
+ Object.assign(this.chart.options, config.options);
100
+ }
101
+ if (!this.chart.config.data) {
102
+ this.chart.config.data = { ...config.data };
103
+ this.chartUpdateOutsideAngular();
104
+ }
105
+ if (this.chart) {
106
+ Object.assign(this.chart.config.options, config.options);
107
+ Object.assign(this.chart.config.plugins, config.plugins);
108
+ Object.assign(this.chart.config.data, config.data);
109
+ }
110
+ this.chartUpdateOutsideAngular();
111
+ }
112
+ chartUpdateOutsideAngular() {
113
+ setTimeout(() => {
114
+ this.ngZone.runOutsideAngular(() => {
115
+ this.chart?.update();
116
+ });
117
+ });
118
+ }
119
+ chartToBase64Image() {
120
+ return this.chart?.toBase64Image();
121
+ }
122
+ chartDataConfig() {
123
+ return {
124
+ labels: this.data?.labels ?? [],
125
+ datasets: this.data?.datasets ?? []
126
+ };
127
+ }
128
+ chartOptions() {
129
+ return this.options;
130
+ }
131
+ chartConfig() {
132
+ this.chartCustomTooltips();
133
+ return {
134
+ data: this.chartDataConfig(),
135
+ options: this.chartOptions(),
136
+ plugins: this.plugins,
137
+ type: this.type
138
+ };
139
+ }
140
+ chartCustomTooltips() {
141
+ if (this.customTooltips) {
142
+ const options = this.options;
143
+ // @ts-ignore
144
+ const plugins = this.options?.plugins;
145
+ // @ts-ignore
146
+ const tooltip = this.options?.plugins?.tooltip;
147
+ this.options = merge({
148
+ ...options,
149
+ plugins: {
150
+ ...plugins,
151
+ tooltip: {
152
+ ...tooltip,
153
+ enabled: false,
154
+ mode: 'index',
155
+ position: 'nearest',
156
+ external: customTooltips
157
+ }
158
+ }
159
+ });
160
+ }
161
+ }
162
+ ;
163
+ }
164
+ ChartjsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
165
+ ChartjsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ChartjsComponent, selector: "c-chart", inputs: { customTooltips: "customTooltips", data: "data", height: "height", id: "id", options: "options", plugins: "plugins", redraw: "redraw", type: "type", width: "width", wrapper: "wrapper" }, outputs: { getDatasetAtEvent: "getDatasetAtEvent", getElementAtEvent: "getElementAtEvent", getElementsAtEvent: "getElementsAtEvent" }, host: { properties: { "style.height.px": "this.height", "style.width.px": "this.width", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true }], exportAs: ["cChart"], usesOnChanges: true, ngImport: i0, template: "<canvas\r\n #canvasElement\r\n (click)=\"handleOnClick($event)\"\r\n [height]=\"height\"\r\n [id]=\"id\"\r\n [width]=\"width\"\r\n role=\"img\"\r\n style=\"display: none;\"\r\n>\r\n <ng-content></ng-content>\r\n</canvas>\r\n", styles: [":host.chart-wrapper{display:block}\n"] });
166
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsComponent, decorators: [{
167
+ type: Component,
168
+ args: [{ selector: 'c-chart', exportAs: 'cChart', template: "<canvas\r\n #canvasElement\r\n (click)=\"handleOnClick($event)\"\r\n [height]=\"height\"\r\n [id]=\"id\"\r\n [width]=\"width\"\r\n role=\"img\"\r\n style=\"display: none;\"\r\n>\r\n <ng-content></ng-content>\r\n</canvas>\r\n", styles: [":host.chart-wrapper{display:block}\n"] }]
169
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { customTooltips: [{
170
+ type: Input
171
+ }], data: [{
172
+ type: Input
173
+ }], height: [{
174
+ type: HostBinding,
175
+ args: ['style.height.px']
176
+ }, {
177
+ type: Input
178
+ }], id: [{
179
+ type: Input
180
+ }], options: [{
181
+ type: Input
182
+ }], plugins: [{
183
+ type: Input
184
+ }], redraw: [{
185
+ type: Input
186
+ }], type: [{
187
+ type: Input
188
+ }], width: [{
189
+ type: HostBinding,
190
+ args: ['style.width.px']
191
+ }, {
192
+ type: Input
193
+ }], wrapper: [{
194
+ type: Input
195
+ }], getDatasetAtEvent: [{
196
+ type: Output
197
+ }], getElementAtEvent: [{
198
+ type: Output
199
+ }], getElementsAtEvent: [{
200
+ type: Output
201
+ }], canvasElement: [{
202
+ type: ViewChild,
203
+ args: ['canvasElement']
204
+ }], hostClasses: [{
205
+ type: HostBinding,
206
+ args: ['class']
207
+ }] } });
208
+
209
+ class ChartjsModule {
210
+ }
211
+ ChartjsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
212
+ ChartjsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsModule, declarations: [ChartjsComponent], exports: [ChartjsComponent] });
213
+ ChartjsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsModule });
214
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChartjsModule, decorators: [{
215
+ type: NgModule,
216
+ args: [{
217
+ declarations: [
218
+ ChartjsComponent
219
+ ],
220
+ exports: [
221
+ ChartjsComponent
222
+ ]
223
+ }]
224
+ }] });
225
+
226
+ /*
227
+ * Public API Surface of coreui-angular-chartjs
228
+ */
229
+
230
+ /**
231
+ * Generated bundle index. Do not edit.
232
+ */
233
+
234
+ export { ChartjsComponent, ChartjsModule };
235
+ //# sourceMappingURL=coreui-angular-chartjs.mjs.map
package/fesm2020/coreui-angular-chartjs.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"coreui-angular-chartjs.mjs","sources":["../../../projects/coreui-angular-chartjs/src/lib/chartjs.component.ts","../../../projects/coreui-angular-chartjs/src/lib/chartjs.component.html","../../../projects/coreui-angular-chartjs/src/lib/chartjs.module.ts","../../../projects/coreui-angular-chartjs/src/public-api.ts","../../../projects/coreui-angular-chartjs/src/coreui-angular-chartjs.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n Component,\r\n ElementRef,\r\n EventEmitter,\r\n HostBinding,\r\n Input,\r\n NgZone,\r\n OnChanges,\r\n OnDestroy,\r\n Output,\r\n Renderer2,\r\n SimpleChanges,\r\n ViewChild\r\n} from '@angular/core';\r\nimport { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\r\n\r\nimport { merge } from 'lodash';\r\n\r\nimport { Chart, ChartConfiguration, ChartType, DefaultDataPoint, registerables } from 'chart.js';\r\nimport { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';\r\n\r\nChart.register(...registerables);\r\n\r\nlet nextId = 0;\r\n\r\n@Component({\r\n selector: 'c-chart',\r\n templateUrl: './chartjs.component.html',\r\n styleUrls: ['./chartjs.component.scss'],\r\n exportAs: 'cChart'\r\n})\r\nexport class ChartjsComponent<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges {\r\n\r\n static ngAcceptInputType_height: NumberInput;\r\n static ngAcceptInputType_width: NumberInput;\r\n static ngAcceptInputType_redraw: BooleanInput;\r\n\r\n @Input() customTooltips = true;\r\n @Input() data?: ChartConfiguration<TType, TData, TLabel>['data'];\r\n\r\n @HostBinding('style.height.px')\r\n @Input()\r\n set height(value: number | undefined) {\r\n this._height = coerceNumberProperty(value);\r\n }\r\n\r\n get height() {\r\n return this._height;\r\n }\r\n\r\n private _height: number | undefined;\r\n\r\n @Input() id = `c-chartjs-${nextId++}`;\r\n @Input() options?: ChartConfiguration<TType, TData, TLabel>['options'];\r\n @Input() plugins: ChartConfiguration<TType, TData, TLabel>['plugins'] = [];\r\n\r\n @Input()\r\n set redraw(value: boolean) {\r\n this._redraw = coerceBooleanProperty(value);\r\n }\r\n\r\n get redraw(): boolean {\r\n return this._redraw;\r\n }\r\n\r\n private _redraw = false;\r\n\r\n @Input() type: ChartConfiguration<TType, TData, TLabel>['type'] = 'bar' as TType;\r\n\r\n @HostBinding('style.width.px')\r\n @Input()\r\n set width(value: number | undefined) {\r\n this._width = coerceNumberProperty(value);\r\n }\r\n\r\n get width() {\r\n return this._width;\r\n }\r\n\r\n private _width: number | undefined;\r\n\r\n @Input() wrapper = true;\r\n\r\n @Output() getDatasetAtEvent = new EventEmitter<any>();\r\n @Output() getElementAtEvent = new EventEmitter<any>();\r\n @Output() getElementsAtEvent = new EventEmitter<any>();\r\n\r\n @ViewChild('canvasElement') canvasElement!: ElementRef;\r\n\r\n chart!: Chart<TType, TData, TLabel>;\r\n\r\n @HostBinding('class')\r\n get hostClasses() {\r\n return {\r\n 'chart-wrapper': this.wrapper\r\n };\r\n }\r\n\r\n constructor(\r\n private elementRef: ElementRef,\r\n private ngZone: NgZone,\r\n private renderer: Renderer2\r\n ) {}\r\n\r\n ngAfterViewInit(): void {\r\n this.chartRender();\r\n // this.chartUpdate();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['data'] && !changes['data'].firstChange) {\r\n this.chartUpdate();\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.chartDestroy();\r\n }\r\n\r\n public handleOnClick($event: MouseEvent) {\r\n if (!this.chart) return;\r\n\r\n const datasetAtEvent = this.chart.getElementsAtEventForMode($event, 'dataset', { intersect: true }, false);\r\n this.getDatasetAtEvent.emit(datasetAtEvent);\r\n\r\n const elementAtEvent = this.chart.getElementsAtEventForMode($event, 'nearest', { intersect: true }, false);\r\n this.getElementAtEvent.emit(elementAtEvent);\r\n\r\n const elementsAtEvent = this.chart.getElementsAtEventForMode($event, 'index', { intersect: true }, false);\r\n this.getElementsAtEvent.emit(elementsAtEvent);\r\n }\r\n\r\n public chartDestroy() {\r\n this.chart?.destroy();\r\n }\r\n\r\n public chartRender() {\r\n if (!this.canvasElement) return;\r\n\r\n const ctx: CanvasRenderingContext2D = this.canvasElement.nativeElement.getContext('2d');\r\n\r\n this.ngZone.runOutsideAngular(() => {\r\n const config = this.chartConfig();\r\n if (config) {\r\n this.chart = new Chart(ctx, config);\r\n setTimeout(() => {\r\n this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');\r\n });\r\n }\r\n });\r\n }\r\n\r\n chartUpdate() {\r\n if (!this.chart) return;\r\n\r\n if (this.redraw) {\r\n this.chartDestroy();\r\n setTimeout(() => {\r\n this.chartRender();\r\n });\r\n return;\r\n }\r\n\r\n const config = this.chartConfig();\r\n\r\n if (this.options) {\r\n Object.assign(this.chart.options, config.options);\r\n }\r\n\r\n if (!this.chart.config.data) {\r\n this.chart.config.data = { ...config.data };\r\n this.chartUpdateOutsideAngular();\r\n }\r\n\r\n if (this.chart) {\r\n Object.assign(this.chart.config.options, config.options);\r\n Object.assign(this.chart.config.plugins, config.plugins);\r\n Object.assign(this.chart.config.data, config.data);\r\n }\r\n\r\n this.chartUpdateOutsideAngular();\r\n }\r\n\r\n private chartUpdateOutsideAngular() {\r\n setTimeout(() => {\r\n this.ngZone.runOutsideAngular(() => {\r\n this.chart?.update();\r\n });\r\n });\r\n }\r\n\r\n public chartToBase64Image(): string | undefined {\r\n return this.chart?.toBase64Image();\r\n }\r\n\r\n private chartDataConfig(): ChartConfiguration<TType, TData, TLabel>['data'] {\r\n return {\r\n labels: this.data?.labels ?? [],\r\n datasets: this.data?.datasets ?? []\r\n };\r\n }\r\n\r\n private chartOptions(): ChartConfiguration<TType, TData, TLabel>['options'] {\r\n return this.options;\r\n }\r\n\r\n private chartConfig(): ChartConfiguration<TType, TData, TLabel> {\r\n this.chartCustomTooltips();\r\n return {\r\n data: this.chartDataConfig(),\r\n options: this.chartOptions(),\r\n plugins: this.plugins,\r\n type: this.type\r\n };\r\n }\r\n\r\n private chartCustomTooltips() {\r\n if (this.customTooltips) {\r\n const options = this.options;\r\n // @ts-ignore\r\n const plugins = this.options?.plugins;\r\n // @ts-ignore\r\n const tooltip = this.options?.plugins?.tooltip;\r\n this.options = merge({\r\n ...options,\r\n plugins: {\r\n ...plugins,\r\n tooltip: {\r\n ...tooltip,\r\n enabled: false,\r\n mode: 'index',\r\n position: 'nearest',\r\n external: cuiCustomTooltips\r\n }\r\n }\r\n });\r\n }\r\n };\r\n}\r\n","<canvas\r\n #canvasElement\r\n (click)=\"handleOnClick($event)\"\r\n [height]=\"height\"\r\n [id]=\"id\"\r\n [width]=\"width\"\r\n role=\"img\"\r\n style=\"display: none;\"\r\n>\r\n <ng-content></ng-content>\r\n</canvas>\r\n","import { NgModule } from '@angular/core';\r\nimport { ChartjsComponent } from './chartjs.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n ChartjsComponent\r\n ],\r\n exports: [\r\n ChartjsComponent\r\n ]\r\n})\r\nexport class ChartjsModule { }\r\n","/*\n * Public API Surface of coreui-angular-chartjs\n */\n\nexport * from './lib/chartjs.component';\nexport * from './lib/chartjs.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["cuiCustomTooltips"],"mappings":"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"}
package/lib/chartjs.component.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
2
2
  import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
3
- import Chart, { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
4
- import { IChartjs } from './chartjs.interface';
3
+ import { Chart, ChartConfiguration, ChartType, DefaultDataPoint } from 'chart.js';
5
4
  import * as i0 from "@angular/core";
6
- export declare class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnChanges {
5
+ export declare class ChartjsComponent<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges {
7
6
  private elementRef;
8
7
  private ngZone;
9
8
  private renderer;
@@ -11,17 +10,17 @@ export declare class ChartjsComponent implements IChartjs, AfterViewInit, OnDest
11
10
  static ngAcceptInputType_width: NumberInput;
12
11
  static ngAcceptInputType_redraw: BooleanInput;
13
12
  customTooltips: boolean;
14
- data: ChartData | ((canvas: HTMLCanvasElement) => ChartData) | undefined;
15
- set height(value: number);
16
- get height(): number;
13
+ data?: ChartConfiguration<TType, TData, TLabel>['data'];
14
+ set height(value: number | undefined);
15
+ get height(): number | undefined;
17
16
  private _height;
18
17
  id: string;
19
- options?: ChartOptions;
20
- plugins: Plugin[];
18
+ options?: ChartConfiguration<TType, TData, TLabel>['options'];
19
+ plugins: ChartConfiguration<TType, TData, TLabel>['plugins'];
21
20
  set redraw(value: boolean);
22
21
  get redraw(): boolean;
23
22
  private _redraw;
24
- type: ChartType;
23
+ type: ChartConfiguration<TType, TData, TLabel>['type'];
25
24
  set width(value: number | undefined);
26
25
  get width(): number | undefined;
27
26
  private _width;
@@ -30,11 +29,10 @@ export declare class ChartjsComponent implements IChartjs, AfterViewInit, OnDest
30
29
  getElementAtEvent: EventEmitter<any>;
31
30
  getElementsAtEvent: EventEmitter<any>;
32
31
  canvasElement: ElementRef;
33
- chart: Chart | undefined;
32
+ chart: Chart<TType, TData, TLabel>;
34
33
  get hostClasses(): {
35
34
  'chart-wrapper': boolean;
36
35
  };
37
- get chartData(): ChartData<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown>;
38
36
  constructor(elementRef: ElementRef, ngZone: NgZone, renderer: Renderer2);
39
37
  ngAfterViewInit(): void;
40
38
  ngOnChanges(changes: SimpleChanges): void;
@@ -46,8 +44,9 @@ export declare class ChartjsComponent implements IChartjs, AfterViewInit, OnDest
46
44
  private chartUpdateOutsideAngular;
47
45
  chartToBase64Image(): string | undefined;
48
46
  private chartDataConfig;
47
+ private chartOptions;
49
48
  private chartConfig;
50
49
  private chartCustomTooltips;
51
- static ɵfac: i0.ɵɵFactoryDeclaration<ChartjsComponent, never>;
52
- static ɵcmp: i0.ɵɵComponentDeclaration<ChartjsComponent, "c-chart", ["cChart"], { "customTooltips": "customTooltips"; "data": "data"; "height": "height"; "id": "id"; "options": "options"; "plugins": "plugins"; "redraw": "redraw"; "type": "type"; "width": "width"; "wrapper": "wrapper"; }, { "getDatasetAtEvent": "getDatasetAtEvent"; "getElementAtEvent": "getElementAtEvent"; "getElementsAtEvent": "getElementsAtEvent"; }, never, ["*"]>;
50
+ static ɵfac: i0.ɵɵFactoryDeclaration<ChartjsComponent<any, any, any>, never>;
51
+ static ɵcmp: i0.ɵɵComponentDeclaration<ChartjsComponent<any, any, any>, "c-chart", ["cChart"], { "customTooltips": "customTooltips"; "data": "data"; "height": "height"; "id": "id"; "options": "options"; "plugins": "plugins"; "redraw": "redraw"; "type": "type"; "width": "width"; "wrapper": "wrapper"; }, { "getDatasetAtEvent": "getDatasetAtEvent"; "getElementAtEvent": "getElementAtEvent"; "getElementsAtEvent": "getElementsAtEvent"; }, never, ["*"]>;
53
52
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coreui/angular-chartjs",
3
3
  "description": "Angular wrapper component for Chart.js",
4
- "version": "2.0.0-alpha.3",
4
+ "version": "2.0.0-alpha.7",
5
5
  "homepage": "https://coreui.io/angular/docs/",
6
6
  "bugs": {
7
7
  "url": "https://github.com/coreui/coreui-angular/issues"
@@ -13,20 +13,34 @@
13
13
  "license": "MIT",
14
14
  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
15
15
  "peerDependencies": {
16
- "@angular/cdk": "^12.2.0",
17
- "@angular/common": "^12.2.0",
18
- "@angular/core": "^12.2.0",
16
+ "@angular/cdk": "^13.0.0",
17
+ "@angular/common": "^13.0.0",
18
+ "@angular/core": "^13.0.0",
19
19
  "@coreui/chartjs": "^3.0.0",
20
20
  "chart.js": "^3.6.0"
21
21
  },
22
22
  "dependencies": {
23
+ "lodash-es": "^4.17.21",
23
24
  "tslib": "^2.3.0"
24
25
  },
25
- "main": "bundles/coreui-angular-chartjs.umd.js",
26
- "module": "fesm2015/coreui-angular-chartjs.js",
27
- "es2015": "fesm2015/coreui-angular-chartjs.js",
28
- "esm2015": "esm2015/coreui-angular-chartjs.js",
29
- "fesm2015": "fesm2015/coreui-angular-chartjs.js",
26
+ "module": "fesm2015/coreui-angular-chartjs.mjs",
27
+ "es2020": "fesm2020/coreui-angular-chartjs.mjs",
28
+ "esm2020": "esm2020/coreui-angular-chartjs.mjs",
29
+ "fesm2020": "fesm2020/coreui-angular-chartjs.mjs",
30
+ "fesm2015": "fesm2015/coreui-angular-chartjs.mjs",
30
31
  "typings": "coreui-angular-chartjs.d.ts",
32
+ "exports": {
33
+ "./package.json": {
34
+ "default": "./package.json"
35
+ },
36
+ ".": {
37
+ "types": "./coreui-angular-chartjs.d.ts",
38
+ "esm2020": "./esm2020/coreui-angular-chartjs.mjs",
39
+ "es2020": "./fesm2020/coreui-angular-chartjs.mjs",
40
+ "es2015": "./fesm2015/coreui-angular-chartjs.mjs",
41
+ "node": "./fesm2015/coreui-angular-chartjs.mjs",
42
+ "default": "./fesm2020/coreui-angular-chartjs.mjs"
43
+ }
44
+ },
31
45
  "sideEffects": false
32
46
  }