@coreui/angular-chartjs 2.0.0-alpha.2 → 2.0.0-alpha.6

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} +33 -36
  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 +13 -13
  12. package/package.json +23 -9
  13. package/bundles/coreui-angular-chartjs.umd.js +0 -603
  14. package/bundles/coreui-angular-chartjs.umd.js.map +0 -1
  15. package/esm2015/lib/chartjs.component.js +0 -202
  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();
@@ -108,10 +95,10 @@ class ChartjsComponent {
108
95
  });
109
96
  return;
110
97
  }
98
+ const config = this.chartConfig();
111
99
  if (this.options) {
112
- this.chart.options = Object.assign({}, this.options);
100
+ Object.assign(this.chart.options, config.options);
113
101
  }
114
- const config = this.chartConfig();
115
102
  if (!this.chart.config.data) {
116
103
  this.chart.config.data = Object.assign({}, config.data);
117
104
  this.chartUpdateOutsideAngular();
@@ -138,29 +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() {
136
+ this.chartCustomTooltips();
146
137
  return {
147
138
  data: this.chartDataConfig(),
148
- options: this.options,
139
+ options: this.chartOptions(),
149
140
  plugins: this.plugins,
150
141
  type: this.type
151
142
  };
152
143
  }
144
+ chartCustomTooltips() {
145
+ var _a, _b, _c;
146
+ if (this.customTooltips) {
147
+ const options = this.options;
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 }) }) }));
153
+ }
154
+ }
155
+ ;
153
156
  }
154
- 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 });
155
- 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"] });
156
- 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.0.3", 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.0.3", 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.0.3", ngImport: i0, type: ChartjsComponent, decorators: [{
157
160
  type: Component,
158
- args: [{
159
- selector: 'c-chart',
160
- templateUrl: './chartjs.component.html',
161
- styleUrls: ['./chartjs.component.scss'],
162
- exportAs: 'cChart'
163
- }]
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"] }]
164
162
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { customTooltips: [{
165
163
  type: Input
166
164
  }], data: [{
@@ -203,16 +201,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
203
201
 
204
202
  class ChartjsModule {
205
203
  }
206
- ChartjsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
207
- ChartjsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsModule, declarations: [ChartjsComponent], exports: [ChartjsComponent] });
208
- ChartjsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ChartjsModule, imports: [[]] });
209
- 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.0.3", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
205
+ ChartjsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChartjsModule, declarations: [ChartjsComponent], exports: [ChartjsComponent] });
206
+ ChartjsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChartjsModule });
207
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChartjsModule, decorators: [{
210
208
  type: NgModule,
211
209
  args: [{
212
210
  declarations: [
213
211
  ChartjsComponent
214
212
  ],
215
- imports: [],
216
213
  exports: [
217
214
  ChartjsComponent
218
215
  ]
@@ -228,4 +225,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
228
225
  */
229
226
 
230
227
  export { ChartjsComponent, ChartjsModule };
231
- //# 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.0.3", 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.0.3", 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.0.3", 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.0.3", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
212
+ ChartjsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChartjsModule, declarations: [ChartjsComponent], exports: [ChartjsComponent] });
213
+ ChartjsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChartjsModule });
214
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", 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,7 +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
- static ɵfac: i0.ɵɵFactoryDeclaration<ChartjsComponent, never>;
51
- 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, ["*"]>;
49
+ private chartCustomTooltips;
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, ["*"]>;
52
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.2",
4
+ "version": "2.0.0-alpha.6",
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
  }