@coreui/angular-chartjs 5.4.1 → 5.4.5

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 (6) hide show
  1. package/README.md +22 -11
  2. package/fesm2022/coreui-angular-chartjs.mjs +101 -118
  3. package/fesm2022/coreui-angular-chartjs.mjs.map +1 -1
  4. package/lib/chartjs.component.d.ts +35 -37
  5. package/lib/chartjs.interface.d.ts +71 -0
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <p align="center">
2
- <a href="https://coreui.io/">
2
+ <a href="https://coreui.io/" target="_blank">
3
3
  <img
4
4
  src="https://coreui.io/images/brand/coreui-signet.svg"
5
5
  alt="CoreUI logo"
@@ -11,31 +11,42 @@
11
11
  <h3 align="center">CoreUI Angular wrapper for Chart.js v4</h3>
12
12
 
13
13
  <p align="center">
14
- <a href="https://coreui.io/angular/docs/"><strong>Explore @coreui/angular-chartjs docs & examples »</strong></a>
14
+ <a href="https://coreui.io/angular/docs/" target="_blank">Explore <strong>@coreui/angular-chartjs docs & examples »</strong></a>
15
15
  <br>
16
16
  <br>
17
- <a href="https://github.com/coreui/coreui-angular/issues/new?template=bug_report.md">Report bug</a>
17
+ <a href="https://github.com/coreui/coreui-angular/issues/new?template=bug_report.md" target="_blank">Report bug</a>
18
18
  ·
19
- <a href="https://github.com/coreui/coreui-angular/issues/new?template=feature_request.md">Request feature</a>
19
+ <a href="https://github.com/coreui/coreui-angular/issues/new?template=feature_request.md" target="_blank">Request feature</a>
20
20
  ·
21
21
  <a href="https://blog.coreui.io/">Blog</a>
22
22
  </p>
23
+ <hr>
24
+ <p>
25
+ Featured CoreUI for Angular libraries:
26
+ <br>
27
+ · <a href="https://github.com/coreui/coreui-angular/tree/main/projects/coreui-angular" target="_blank">CoreUI Components for Angular</a>
28
+ <br>
29
+ · <a href="https://github.com/coreui/coreui-angular/tree/main/projects/coreui-angular-chartjs" target="_blank">CoreUI Angular wrapper for Chart.js v4</a>
30
+ <br>
31
+ · <a href="https://github.com/coreui/coreui-angular/tree/main/projects/coreui-icons-angular" target="_blank">CoreUI Icons for Angular</a>
32
+ </p>
33
+ <hr>
23
34
 
24
- ## Status
35
+ ### Status
25
36
 
26
37
  ![angular][angular-badge]
27
38
  [![npm package][npm-badge-v5-ng19]][npm]
28
39
  [![npm package][npm-badge-latest]][npm]
29
- [![npm package][npm-badge-next]][npm]
30
- [![NPM downloads][npm-download]][npm]
31
-
40
+ [![npm package][npm-badge-next]][npm]
41
+ [![NPM downloads][npm-download]][npm]
42
+ [![Project chartjs check](https://github.com/coreui/coreui-angular/actions/workflows/project-chartjs-check.yml/badge.svg)](https://github.com/coreui/coreui-angular/actions/workflows/project-chartjs-check.yml)
32
43
 
33
44
  [npm-badge-v5-ng19]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng19?style=flat-square&color=brightgreen
34
45
  [npm-badge-latest]: https://img.shields.io/npm/v/@coreui/angular-chartjs/latest?style=flat-square&color=brightgreen
35
46
  [npm-badge-next]: https://img.shields.io/npm/v/@coreui/angular-chartjs/next?style=flat-square&color=red
36
47
  [npm]: https://www.npmjs.com/package/@coreui/angular-chartjs
37
48
  [npm-download]: https://img.shields.io/npm/dm/@coreui/angular-chartjs.svg?style=flat-square
38
- [angular-badge]: https://img.shields.io/badge/angular-^19.1.0-lightgrey.svg?style=flat-square&logo=angular
49
+ [angular-badge]: https://img.shields.io/badge/angular-^19.2.0-lightgrey.svg?style=flat-square&logo=angular
39
50
 
40
51
  ##### install:
41
52
 
@@ -47,8 +58,8 @@ ng add @coreui/angular-chartjs
47
58
  - or npm
48
59
  ```bash
49
60
  npm install chart.js@4
50
- npm install @coreui/chartjs@4
51
- npm install @coreui/angular-chartjs@5.2
61
+ npm install @coreui/chartjs@~4.1
62
+ npm install @coreui/angular-chartjs@~5.4
52
63
  ````
53
64
 
54
65
  ##### import:
package/fesm2022/coreui-angular-chartjs.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, NgZone, Renderer2, ChangeDetectorRef, EventEmitter, afterRender, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, Input, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
2
+ import { inject, NgZone, Renderer2, ChangeDetectorRef, input, booleanAttribute, numberAttribute, linkedSignal, output, viewChild, computed, afterRenderEffect, untracked, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
3
3
  import merge from 'lodash-es/merge';
4
4
  import { Chart, registerables } from 'chart.js';
5
5
  import { customTooltips } from '@coreui/chartjs';
@@ -7,10 +7,8 @@ import { customTooltips } from '@coreui/chartjs';
7
7
  Chart.register(...registerables);
8
8
  let nextId = 0;
9
9
  class ChartjsComponent {
10
- get hostClasses() {
11
- return {
12
- 'chart-wrapper': this.wrapper
13
- };
10
+ get id() {
11
+ return this.idInput();
14
12
  }
15
13
  constructor() {
16
14
  this.ngZone = inject(NgZone);
@@ -18,54 +16,95 @@ class ChartjsComponent {
18
16
  this.changeDetectorRef = inject(ChangeDetectorRef);
19
17
  /**
20
18
  * Enables custom html based tooltips instead of standard tooltips.
21
- * @type boolean
19
+ * @return boolean
22
20
  * @default true
23
21
  */
24
- this.customTooltips = true;
22
+ this.customTooltips = input(true, { transform: booleanAttribute });
23
+ /**
24
+ * The data object that is passed into the Chart.js chart (more info).
25
+ */
26
+ this.data = input();
27
+ /**
28
+ * A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.
29
+ */
30
+ // @Input() fallbackContent?: TemplateRef<any>;
31
+ /**
32
+ * Height attribute applied to the rendered canvas.
33
+ * @return number | undefined
34
+ * @default null
35
+ */
36
+ this.height = input(null, { transform: (value) => numberAttribute(value, undefined) });
25
37
  /**
26
38
  * ID attribute applied to the rendered canvas.
27
- * @type string
39
+ * @return string
28
40
  */
29
- this.id = `c-chartjs-${nextId++}`;
41
+ this.idInput = input(`c-chartjs-${nextId++}`, { alias: 'id' });
30
42
  /**
31
43
  * The options object that is passed into the Chart.js chart.
32
44
  */
33
- this.options = {};
45
+ this.optionsInput = input({}, { alias: 'options' });
46
+ this.options = linkedSignal(this.optionsInput);
34
47
  /**
35
48
  * The plugins array that is passed into the Chart.js chart
36
49
  */
37
- this.plugins = [];
50
+ this.plugins = input([]);
38
51
  /**
39
52
  * If true, will tear down and redraw chart on all updates.
40
- * @type boolean
53
+ * @return boolean
41
54
  * @default false
42
55
  */
43
- this.redraw = false;
56
+ this.redraw = input(false, { transform: booleanAttribute });
44
57
  /**
45
58
  * Chart.js chart type.
46
- * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
59
+ * @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
60
+ */
61
+ this.type = input('bar');
62
+ /**
63
+ * Width attribute applied to the rendered canvas.
64
+ * @return number | undefined
65
+ * @default null
47
66
  */
48
- this.type = 'bar';
67
+ this.width = input(null, { transform: (value) => numberAttribute(value, undefined) });
49
68
  /**
50
69
  * Put the chart into the wrapper div element.
51
70
  * @default true
52
71
  */
53
- this.wrapper = true;
54
- this.getDatasetAtEvent = new EventEmitter();
55
- this.getElementAtEvent = new EventEmitter();
56
- this.getElementsAtEvent = new EventEmitter();
57
- this.chartRef = new EventEmitter();
58
- // todo: verify afterRender / afterNextRender for chartjs (spec fails with 17.0.10)
59
- afterRender({
60
- write: () => {
61
- this.ctx = this.canvasElement?.nativeElement?.getContext('2d');
72
+ this.wrapper = input(true, { transform: booleanAttribute });
73
+ this.getDatasetAtEvent = output();
74
+ this.getElementAtEvent = output();
75
+ this.getElementsAtEvent = output();
76
+ this.chartRef = output();
77
+ this.canvasElement = viewChild.required('canvasElement');
78
+ this.hostClasses = computed(() => {
79
+ return {
80
+ 'chart-wrapper': this.wrapper()
81
+ };
82
+ });
83
+ this.chartDataConfig = computed(() => {
84
+ const { labels, datasets } = { ...this.data() };
85
+ return {
86
+ labels: labels ?? [],
87
+ datasets: datasets ?? []
88
+ };
89
+ });
90
+ this.chartOptions = computed(() => this.options() ?? {});
91
+ this.chartConfig = computed(() => {
92
+ this.chartCustomTooltips();
93
+ return {
94
+ data: this.chartDataConfig(),
95
+ options: this.chartOptions(),
96
+ plugins: this.plugins(),
97
+ type: this.type()
98
+ };
99
+ });
100
+ afterRenderEffect({
101
+ read: () => {
102
+ const canvasElement = this.canvasElement();
103
+ this.ctx = canvasElement?.nativeElement?.getContext('2d');
62
104
  this.chartRender();
63
105
  }
64
106
  });
65
107
  }
66
- ngAfterViewInit() {
67
- this.chartRender();
68
- }
69
108
  ngOnChanges(changes) {
70
109
  if (changes['data'] && !changes['data'].firstChange) {
71
110
  this.chartUpdate();
@@ -90,7 +129,8 @@ class ChartjsComponent {
90
129
  this.chartRef.emit(undefined);
91
130
  }
92
131
  chartRender() {
93
- if (!this.canvasElement?.nativeElement || !this.ctx || this.chart) {
132
+ const canvasElement = this.canvasElement();
133
+ if (!canvasElement?.nativeElement || !this.ctx || this.chart) {
94
134
  return;
95
135
  }
96
136
  this.ngZone.runOutsideAngular(() => {
@@ -98,7 +138,7 @@ class ChartjsComponent {
98
138
  if (config) {
99
139
  this.chart = new Chart(this.ctx, config);
100
140
  this.ngZone.run(() => {
101
- this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
141
+ this.renderer.setStyle(canvasElement.nativeElement, 'display', 'block');
102
142
  this.changeDetectorRef.markForCheck();
103
143
  this.chartRef.emit(this.chart);
104
144
  });
@@ -109,13 +149,13 @@ class ChartjsComponent {
109
149
  if (!this.chart) {
110
150
  return;
111
151
  }
112
- if (this.redraw) {
152
+ if (this.redraw()) {
113
153
  this.chartDestroy();
114
154
  this.chartRender();
115
155
  return;
116
156
  }
117
157
  const config = this.chartConfig();
118
- if (this.options) {
158
+ if (this.options()) {
119
159
  Object.assign(this.chart.options ?? {}, config.options ?? {});
120
160
  }
121
161
  if (!this.chart.config.data) {
@@ -142,103 +182,46 @@ class ChartjsComponent {
142
182
  chartToBase64Image() {
143
183
  return this.chart?.toBase64Image();
144
184
  }
145
- chartDataConfig() {
146
- return {
147
- labels: this.data?.labels ?? [],
148
- datasets: this.data?.datasets ?? []
149
- };
150
- }
151
- chartOptions() {
152
- return this.options ?? {};
153
- }
154
- chartConfig() {
155
- this.chartCustomTooltips();
156
- return {
157
- data: this.chartDataConfig(),
158
- options: this.chartOptions(),
159
- plugins: this.plugins,
160
- type: this.type
161
- };
162
- }
163
185
  chartCustomTooltips() {
164
- if (this.customTooltips) {
165
- const options = this.options;
166
- const plugins = this.options?.plugins;
167
- const tooltip = this.options?.plugins?.tooltip;
168
- this.options = merge({
169
- ...options,
170
- plugins: {
171
- ...plugins,
172
- tooltip: {
173
- ...tooltip,
174
- enabled: false,
175
- mode: 'index',
176
- position: 'nearest',
177
- external: customTooltips
186
+ if (this.customTooltips()) {
187
+ const options = this.options();
188
+ const plugins = options?.plugins;
189
+ const tooltip = options?.plugins?.tooltip;
190
+ untracked(() => {
191
+ this.options.set(merge({
192
+ ...options,
193
+ plugins: {
194
+ ...plugins,
195
+ tooltip: {
196
+ ...tooltip,
197
+ enabled: false,
198
+ mode: 'index',
199
+ position: 'nearest',
200
+ external: customTooltips
201
+ }
178
202
  }
179
- }
203
+ }));
180
204
  });
181
205
  }
182
206
  }
183
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ChartjsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
184
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.7", type: ChartjsComponent, isStandalone: true, selector: "c-chart", inputs: { customTooltips: ["customTooltips", "customTooltips", booleanAttribute], data: "data", height: ["height", "height", (value) => numberAttribute(value, undefined)], id: "id", options: "options", plugins: "plugins", redraw: ["redraw", "redraw", booleanAttribute], type: "type", width: ["width", "width", (value) => numberAttribute(value, undefined)], wrapper: ["wrapper", "wrapper", booleanAttribute] }, outputs: { getDatasetAtEvent: "getDatasetAtEvent", getElementAtEvent: "getElementAtEvent", getElementsAtEvent: "getElementsAtEvent", chartRef: "chartRef" }, 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)=\"handleClick($event)\"\n [height]=\"height\"\n [id]=\"id\"\n [width]=\"width\"\n role=\"img\"\n style=\"display: none;\"\n>\n <ng-content />\n <!-- <ng-container *ngTemplateOutlet=\"fallbackContent\"/>-->\n</canvas>\n", styles: [":host.chart-wrapper{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
207
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChartjsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
208
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.2", type: ChartjsComponent, isStandalone: true, selector: "c-chart", inputs: { customTooltips: { classPropertyName: "customTooltips", publicName: "customTooltips", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, redraw: { classPropertyName: "redraw", publicName: "redraw", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, wrapper: { classPropertyName: "wrapper", publicName: "wrapper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { getDatasetAtEvent: "getDatasetAtEvent", getElementAtEvent: "getElementAtEvent", getElementsAtEvent: "getElementsAtEvent", chartRef: "chartRef" }, host: { properties: { "class": "hostClasses()", "style.height.px": "height()", "style.width.px": "width()" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true, isSignal: true }], exportAs: ["cChart"], usesOnChanges: true, ngImport: i0, template: "<canvas\n #canvasElement\n (click)=\"handleClick($event)\"\n [height]=\"height() || null\"\n [id]=\"id\"\n [width]=\"width() || null\"\n role=\"img\"\n style=\"display: none;\"\n>\n <ng-content />\n <!-- <ng-container *ngTemplateOutlet=\"fallbackContent\"/>-->\n</canvas>\n", styles: [":host.chart-wrapper{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
185
209
  }
186
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ChartjsComponent, decorators: [{
210
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChartjsComponent, decorators: [{
187
211
  type: Component,
188
- args: [{ selector: 'c-chart', exportAs: 'cChart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<canvas\n #canvasElement\n (click)=\"handleClick($event)\"\n [height]=\"height\"\n [id]=\"id\"\n [width]=\"width\"\n role=\"img\"\n style=\"display: none;\"\n>\n <ng-content />\n <!-- <ng-container *ngTemplateOutlet=\"fallbackContent\"/>-->\n</canvas>\n", styles: [":host.chart-wrapper{display:block}\n"] }]
189
- }], ctorParameters: () => [], propDecorators: { customTooltips: [{
190
- type: Input,
191
- args: [{ transform: booleanAttribute }]
192
- }], data: [{
193
- type: Input
194
- }], height: [{
195
- type: HostBinding,
196
- args: ['style.height.px']
197
- }, {
198
- type: Input,
199
- args: [{ transform: (value) => numberAttribute(value, undefined) }]
200
- }], id: [{
201
- type: Input
202
- }], options: [{
203
- type: Input
204
- }], plugins: [{
205
- type: Input
206
- }], redraw: [{
207
- type: Input,
208
- args: [{ transform: booleanAttribute }]
209
- }], type: [{
210
- type: Input
211
- }], width: [{
212
- type: HostBinding,
213
- args: ['style.width.px']
214
- }, {
215
- type: Input,
216
- args: [{ transform: (value) => numberAttribute(value, undefined) }]
217
- }], wrapper: [{
218
- type: Input,
219
- args: [{ transform: booleanAttribute }]
220
- }], getDatasetAtEvent: [{
221
- type: Output
222
- }], getElementAtEvent: [{
223
- type: Output
224
- }], getElementsAtEvent: [{
225
- type: Output
226
- }], chartRef: [{
227
- type: Output
228
- }], canvasElement: [{
229
- type: ViewChild,
230
- args: ['canvasElement']
231
- }], hostClasses: [{
232
- type: HostBinding,
233
- args: ['class']
234
- }] } });
212
+ args: [{ selector: 'c-chart', exportAs: 'cChart', changeDetection: ChangeDetectionStrategy.OnPush, host: {
213
+ '[class]': 'hostClasses()',
214
+ '[style.height.px]': 'height()',
215
+ '[style.width.px]': 'width()'
216
+ }, template: "<canvas\n #canvasElement\n (click)=\"handleClick($event)\"\n [height]=\"height() || null\"\n [id]=\"id\"\n [width]=\"width() || null\"\n role=\"img\"\n style=\"display: none;\"\n>\n <ng-content />\n <!-- <ng-container *ngTemplateOutlet=\"fallbackContent\"/>-->\n</canvas>\n", styles: [":host.chart-wrapper{display:block}\n"] }]
217
+ }], ctorParameters: () => [] });
235
218
 
236
219
  class ChartjsModule {
237
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
238
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: ChartjsModule, imports: [ChartjsComponent], exports: [ChartjsComponent] }); }
239
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ChartjsModule }); }
220
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
221
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: ChartjsModule, imports: [ChartjsComponent], exports: [ChartjsComponent] }); }
222
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChartjsModule }); }
240
223
  }
241
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ChartjsModule, decorators: [{
224
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ChartjsModule, decorators: [{
242
225
  type: NgModule,
243
226
  args: [{
244
227
  imports: [
package/fesm2022/coreui-angular-chartjs.mjs.map CHANGED
@@ -1 +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 { afterRender, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, numberAttribute, OnChanges, OnDestroy, Output, Renderer2, SimpleChanges, ViewChild, inject } from '@angular/core';\n\nimport merge from 'lodash-es/merge';\n\nimport type { ChartConfiguration, ChartData, ChartOptions, ChartType, InteractionItem, Plugin } from 'chart.js';\nimport { Chart as ChartJS, registerables } from 'chart.js';\nimport { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';\n\nChartJS.register(...registerables);\n\nlet nextId = 0;\n\n@Component({\n selector: 'c-chart',\n templateUrl: './chartjs.component.html',\n styleUrls: ['./chartjs.component.scss'],\n exportAs: 'cChart',\n changeDetection: ChangeDetectionStrategy.OnPush\n // host: { ngSkipHydration: 'true' }\n})\nexport class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {\n private readonly ngZone = inject(NgZone);\n private readonly renderer = inject(Renderer2);\n private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n /**\n * Enables custom html based tooltips instead of standard tooltips.\n * @type boolean\n * @default true\n */\n @Input({ transform: booleanAttribute }) customTooltips: boolean = true;\n\n /**\n * The data object that is passed into the Chart.js chart (more info).\n */\n @Input() data?: ChartData;\n\n /**\n * A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.\n */\n // @Input() fallbackContent?: TemplateRef<any>;\n\n /**\n * Height attribute applied to the rendered canvas.\n * @type number | undefined\n * @default 150\n */\n @HostBinding('style.height.px')\n @Input({ transform: (value: string | number) => numberAttribute(value, undefined) })\n height?: number;\n\n /**\n * ID attribute applied to the rendered canvas.\n * @type string\n */\n @Input() id: string = `c-chartjs-${nextId++}`;\n\n /**\n * The options object that is passed into the Chart.js chart.\n */\n @Input() options?: ChartOptions = {};\n\n /**\n * The plugins array that is passed into the Chart.js chart\n */\n @Input() plugins: Plugin[] = [];\n\n /**\n * If true, will tear down and redraw chart on all updates.\n * @type boolean\n * @default false\n */\n @Input({ transform: booleanAttribute }) redraw: boolean = false;\n\n /**\n * Chart.js chart type.\n * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}\n */\n @Input() type: ChartType = 'bar';\n\n /**\n * Width attribute applied to the rendered canvas.\n * @type number | undefined\n * @default 300\n */\n @HostBinding('style.width.px')\n @Input({ transform: (value: string | number) => numberAttribute(value, undefined) })\n width?: number;\n\n /**\n * Put the chart into the wrapper div element.\n * @default true\n */\n @Input({ transform: booleanAttribute }) wrapper = true;\n\n @Output() readonly getDatasetAtEvent = new EventEmitter<any>();\n @Output() readonly getElementAtEvent = new EventEmitter<any>();\n @Output() readonly getElementsAtEvent = new EventEmitter<any>();\n\n @Output() readonly chartRef = new EventEmitter<any>();\n\n @ViewChild('canvasElement') canvasElement!: ElementRef;\n\n chart!: ChartJS;\n ctx!: CanvasRenderingContext2D;\n\n @HostBinding('class')\n get hostClasses() {\n return {\n 'chart-wrapper': this.wrapper\n };\n }\n\n constructor() {\n // todo: verify afterRender / afterNextRender for chartjs (spec fails with 17.0.10)\n afterRender({\n write: () => {\n this.ctx = this.canvasElement?.nativeElement?.getContext('2d');\n this.chartRender();\n }\n });\n }\n\n ngAfterViewInit(): void {\n this.chartRender();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['data'] && !changes['data'].firstChange) {\n this.chartUpdate();\n }\n }\n\n ngOnDestroy(): void {\n this.chartDestroy();\n }\n\n public handleClick($event: MouseEvent) {\n if (!this.chart) {\n return;\n }\n\n const datasetAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(\n $event,\n 'dataset',\n { intersect: true },\n false\n );\n this.getDatasetAtEvent.emit(datasetAtEvent);\n\n const elementAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(\n $event,\n 'nearest',\n { intersect: true },\n false\n );\n this.getElementAtEvent.emit(elementAtEvent);\n\n const elementsAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(\n $event,\n 'index',\n { intersect: true },\n false\n );\n this.getElementsAtEvent.emit(elementsAtEvent);\n }\n\n public chartDestroy() {\n this.chart?.destroy();\n this.chartRef.emit(undefined);\n }\n\n public chartRender() {\n if (!this.canvasElement?.nativeElement || !this.ctx || this.chart) {\n return;\n }\n\n this.ngZone.runOutsideAngular(() => {\n const config = this.chartConfig();\n if (config) {\n this.chart = new ChartJS(this.ctx, config);\n this.ngZone.run(() => {\n this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');\n this.changeDetectorRef.markForCheck();\n this.chartRef.emit(this.chart);\n });\n }\n });\n }\n\n chartUpdate() {\n if (!this.chart) {\n return;\n }\n\n if (this.redraw) {\n this.chartDestroy();\n this.chartRender();\n return;\n }\n\n const config: ChartConfiguration = this.chartConfig();\n\n if (this.options) {\n Object.assign(this.chart.options ?? {}, config.options ?? {});\n }\n\n if (!this.chart.config.data) {\n this.chart.config.data = { ...config.data };\n this.chartUpdateOutsideAngular();\n }\n\n if (this.chart) {\n Object.assign(this.chart.config.options ?? {}, config.options ?? {});\n Object.assign(this.chart.config.plugins ?? [], config.plugins ?? []);\n Object.assign(this.chart.config.data, config.data);\n }\n\n this.chartUpdateOutsideAngular();\n }\n\n private chartUpdateOutsideAngular() {\n setTimeout(() => {\n this.ngZone.runOutsideAngular(() => {\n this.chart?.update();\n this.ngZone.run(() => {\n this.changeDetectorRef.markForCheck();\n });\n });\n });\n }\n\n public chartToBase64Image(): string | undefined {\n return this.chart?.toBase64Image();\n }\n\n private chartDataConfig(): ChartData {\n return {\n labels: this.data?.labels ?? [],\n datasets: this.data?.datasets ?? []\n };\n }\n\n private chartOptions(): ChartOptions {\n return this.options ?? {};\n }\n\n private chartConfig(): ChartConfiguration {\n this.chartCustomTooltips();\n return {\n data: this.chartDataConfig(),\n options: this.chartOptions(),\n plugins: this.plugins,\n type: this.type\n };\n }\n\n private chartCustomTooltips() {\n if (this.customTooltips) {\n const options = this.options;\n const plugins = this.options?.plugins;\n const tooltip = this.options?.plugins?.tooltip;\n this.options = merge({\n ...options,\n plugins: {\n ...plugins,\n tooltip: {\n ...tooltip,\n enabled: false,\n mode: 'index',\n position: 'nearest',\n external: cuiCustomTooltips\n }\n }\n });\n }\n }\n}\n","<canvas\n #canvasElement\n (click)=\"handleClick($event)\"\n [height]=\"height\"\n [id]=\"id\"\n [width]=\"width\"\n role=\"img\"\n style=\"display: none;\"\n>\n <ng-content />\n <!-- <ng-container *ngTemplateOutlet=\"fallbackContent\"/>-->\n</canvas>\n","import { NgModule } from '@angular/core';\nimport { ChartjsComponent } from './chartjs.component';\n\n@NgModule({\n imports: [\n ChartjsComponent\n ],\n exports: [\n ChartjsComponent\n ]\n})\nexport class ChartjsModule {}\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":["ChartJS","cuiCustomTooltips"],"mappings":"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"}
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 {\n afterRenderEffect,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n linkedSignal,\n NgZone,\n numberAttribute,\n OnChanges,\n OnDestroy,\n output,\n Renderer2,\n SimpleChanges,\n untracked,\n viewChild\n} from '@angular/core';\n\nimport merge from 'lodash-es/merge';\n\nimport type { ChartConfiguration, ChartData, ChartOptions, ChartType, InteractionItem, Plugin } from 'chart.js';\nimport { Chart as ChartJS, registerables } from 'chart.js';\nimport { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';\nimport { BooleanInput } from './chartjs.interface';\n\nChartJS.register(...registerables);\n\nlet nextId = 0;\n\n@Component({\n selector: 'c-chart',\n templateUrl: './chartjs.component.html',\n styleUrls: ['./chartjs.component.scss'],\n exportAs: 'cChart',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'hostClasses()',\n '[style.height.px]': 'height()',\n '[style.width.px]': 'width()'\n }\n})\nexport class ChartjsComponent implements OnDestroy, OnChanges {\n //\n static ngAcceptInputType_redraw: BooleanInput;\n\n private readonly ngZone = inject(NgZone);\n private readonly renderer = inject(Renderer2);\n private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n /**\n * Enables custom html based tooltips instead of standard tooltips.\n * @return boolean\n * @default true\n */\n readonly customTooltips = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n /**\n * The data object that is passed into the Chart.js chart (more info).\n */\n readonly data = input<ChartData>();\n\n /**\n * A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.\n */\n // @Input() fallbackContent?: TemplateRef<any>;\n\n /**\n * Height attribute applied to the rendered canvas.\n * @return number | undefined\n * @default null\n */\n readonly height = input(null, { transform: (value) => numberAttribute(value, undefined) });\n\n /**\n * ID attribute applied to the rendered canvas.\n * @return string\n */\n readonly idInput = input<string>(`c-chartjs-${nextId++}`, { alias: 'id' });\n\n get id() {\n return this.idInput();\n }\n\n /**\n * The options object that is passed into the Chart.js chart.\n */\n readonly optionsInput = input<ChartOptions | undefined>({}, { alias: 'options' });\n\n readonly options = linkedSignal(this.optionsInput);\n\n /**\n * The plugins array that is passed into the Chart.js chart\n */\n readonly plugins = input<Plugin[]>([]);\n\n /**\n * If true, will tear down and redraw chart on all updates.\n * @return boolean\n * @default false\n */\n readonly redraw = input(false, { transform: booleanAttribute });\n\n /**\n * Chart.js chart type.\n * @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}\n */\n readonly type = input<ChartType>('bar');\n\n /**\n * Width attribute applied to the rendered canvas.\n * @return number | undefined\n * @default null\n */\n readonly width = input(null, { transform: (value) => numberAttribute(value, undefined) });\n\n /**\n * Put the chart into the wrapper div element.\n * @default true\n */\n readonly wrapper = input(true, { transform: booleanAttribute });\n\n readonly getDatasetAtEvent = output<InteractionItem[]>();\n readonly getElementAtEvent = output<InteractionItem[]>();\n readonly getElementsAtEvent = output<InteractionItem[]>();\n\n readonly chartRef = output<any>();\n\n readonly canvasElement = viewChild.required<ElementRef>('canvasElement');\n\n chart!: ChartJS;\n ctx!: CanvasRenderingContext2D;\n\n readonly hostClasses = computed(() => {\n return {\n 'chart-wrapper': this.wrapper()\n };\n });\n\n constructor() {\n afterRenderEffect({\n read: () => {\n const canvasElement = this.canvasElement();\n this.ctx = canvasElement?.nativeElement?.getContext('2d');\n this.chartRender();\n }\n });\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['data'] && !changes['data'].firstChange) {\n this.chartUpdate();\n }\n }\n\n ngOnDestroy(): void {\n this.chartDestroy();\n }\n\n public handleClick($event: MouseEvent) {\n if (!this.chart) {\n return;\n }\n\n const datasetAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(\n $event,\n 'dataset',\n { intersect: true },\n false\n );\n this.getDatasetAtEvent.emit(datasetAtEvent);\n\n const elementAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(\n $event,\n 'nearest',\n { intersect: true },\n false\n );\n this.getElementAtEvent.emit(elementAtEvent);\n\n const elementsAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(\n $event,\n 'index',\n { intersect: true },\n false\n );\n this.getElementsAtEvent.emit(elementsAtEvent);\n }\n\n public chartDestroy() {\n this.chart?.destroy();\n this.chartRef.emit(undefined);\n }\n\n public chartRender() {\n const canvasElement = this.canvasElement();\n if (!canvasElement?.nativeElement || !this.ctx || this.chart) {\n return;\n }\n\n this.ngZone.runOutsideAngular(() => {\n const config = this.chartConfig();\n if (config) {\n this.chart = new ChartJS(this.ctx, config);\n this.ngZone.run(() => {\n this.renderer.setStyle(canvasElement.nativeElement, 'display', 'block');\n this.changeDetectorRef.markForCheck();\n this.chartRef.emit(this.chart);\n });\n }\n });\n }\n\n chartUpdate() {\n if (!this.chart) {\n return;\n }\n\n if (this.redraw()) {\n this.chartDestroy();\n this.chartRender();\n return;\n }\n\n const config: ChartConfiguration = this.chartConfig();\n\n if (this.options()) {\n Object.assign(this.chart.options ?? {}, config.options ?? {});\n }\n\n if (!this.chart.config.data) {\n this.chart.config.data = { ...config.data };\n this.chartUpdateOutsideAngular();\n }\n\n if (this.chart) {\n Object.assign(this.chart.config.options ?? {}, config.options ?? {});\n Object.assign(this.chart.config.plugins ?? [], config.plugins ?? []);\n Object.assign(this.chart.config.data, config.data);\n }\n\n this.chartUpdateOutsideAngular();\n }\n\n private chartUpdateOutsideAngular() {\n setTimeout(() => {\n this.ngZone.runOutsideAngular(() => {\n this.chart?.update();\n this.ngZone.run(() => {\n this.changeDetectorRef.markForCheck();\n });\n });\n });\n }\n\n public chartToBase64Image(): string | undefined {\n return this.chart?.toBase64Image();\n }\n\n private chartDataConfig = computed<ChartData>(() => {\n const { labels, datasets } = { ...this.data() };\n return {\n labels: labels ?? [],\n datasets: datasets ?? []\n };\n });\n\n readonly chartOptions = computed<ChartOptions>(() => this.options() ?? {});\n\n readonly chartConfig = computed<ChartConfiguration>(() => {\n this.chartCustomTooltips();\n return {\n data: this.chartDataConfig(),\n options: this.chartOptions(),\n plugins: this.plugins(),\n type: this.type()\n };\n });\n\n private chartCustomTooltips() {\n if (this.customTooltips()) {\n const options = this.options();\n const plugins = options?.plugins;\n const tooltip = options?.plugins?.tooltip;\n untracked(() => {\n this.options.set(\n merge({\n ...options,\n plugins: {\n ...plugins,\n tooltip: {\n ...tooltip,\n enabled: false,\n mode: 'index',\n position: 'nearest',\n external: cuiCustomTooltips\n }\n }\n })\n );\n });\n }\n }\n}\n","<canvas\n #canvasElement\n (click)=\"handleClick($event)\"\n [height]=\"height() || null\"\n [id]=\"id\"\n [width]=\"width() || null\"\n role=\"img\"\n style=\"display: none;\"\n>\n <ng-content />\n <!-- <ng-container *ngTemplateOutlet=\"fallbackContent\"/>-->\n</canvas>\n","import { NgModule } from '@angular/core';\nimport { ChartjsComponent } from './chartjs.component';\n\n@NgModule({\n imports: [\n ChartjsComponent\n ],\n exports: [\n ChartjsComponent\n ]\n})\nexport class ChartjsModule {}\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":["ChartJS","cuiCustomTooltips"],"mappings":"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"}
package/lib/chartjs.component.d.ts CHANGED
@@ -1,77 +1,80 @@
1
- import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
2
- import type { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js';
1
+ import { ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
2
+ import type { ChartConfiguration, ChartData, InteractionItem, Plugin } from 'chart.js';
3
3
  import { Chart as ChartJS } from 'chart.js';
4
+ import { BooleanInput } from './chartjs.interface';
4
5
  import * as i0 from "@angular/core";
5
- export declare class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
6
+ export declare class ChartjsComponent implements OnDestroy, OnChanges {
7
+ static ngAcceptInputType_redraw: BooleanInput;
6
8
  private readonly ngZone;
7
9
  private readonly renderer;
8
10
  private readonly changeDetectorRef;
9
11
  /**
10
12
  * Enables custom html based tooltips instead of standard tooltips.
11
- * @type boolean
13
+ * @return boolean
12
14
  * @default true
13
15
  */
14
- customTooltips: boolean;
16
+ readonly customTooltips: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
15
17
  /**
16
18
  * The data object that is passed into the Chart.js chart (more info).
17
19
  */
18
- data?: ChartData;
20
+ readonly data: import("@angular/core").InputSignal<ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>;
19
21
  /**
20
22
  * A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.
21
23
  */
22
24
  /**
23
25
  * Height attribute applied to the rendered canvas.
24
- * @type number | undefined
25
- * @default 150
26
+ * @return number | undefined
27
+ * @default null
26
28
  */
27
- height?: number;
29
+ readonly height: import("@angular/core").InputSignalWithTransform<number | null, unknown>;
28
30
  /**
29
31
  * ID attribute applied to the rendered canvas.
30
- * @type string
32
+ * @return string
31
33
  */
32
- id: string;
34
+ readonly idInput: import("@angular/core").InputSignal<string>;
35
+ get id(): string;
33
36
  /**
34
37
  * The options object that is passed into the Chart.js chart.
35
38
  */
36
- options?: ChartOptions;
39
+ readonly optionsInput: import("@angular/core").InputSignal<import("node_modules/chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>> | undefined>;
40
+ readonly options: import("@angular/core").WritableSignal<import("node_modules/chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>> | undefined>;
37
41
  /**
38
42
  * The plugins array that is passed into the Chart.js chart
39
43
  */
40
- plugins: Plugin[];
44
+ readonly plugins: import("@angular/core").InputSignal<Plugin<keyof import("chart.js").ChartTypeRegistry, import("node_modules/chart.js/dist/types/basic").AnyObject>[]>;
41
45
  /**
42
46
  * If true, will tear down and redraw chart on all updates.
43
- * @type boolean
47
+ * @return boolean
44
48
  * @default false
45
49
  */
46
- redraw: boolean;
50
+ readonly redraw: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
47
51
  /**
48
52
  * Chart.js chart type.
49
- * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
53
+ * @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
50
54
  */
51
- type: ChartType;
55
+ readonly type: import("@angular/core").InputSignal<keyof import("chart.js").ChartTypeRegistry>;
52
56
  /**
53
57
  * Width attribute applied to the rendered canvas.
54
- * @type number | undefined
55
- * @default 300
58
+ * @return number | undefined
59
+ * @default null
56
60
  */
57
- width?: number;
61
+ readonly width: import("@angular/core").InputSignalWithTransform<number | null, unknown>;
58
62
  /**
59
63
  * Put the chart into the wrapper div element.
60
64
  * @default true
61
65
  */
62
- wrapper: boolean;
63
- readonly getDatasetAtEvent: EventEmitter<any>;
64
- readonly getElementAtEvent: EventEmitter<any>;
65
- readonly getElementsAtEvent: EventEmitter<any>;
66
- readonly chartRef: EventEmitter<any>;
67
- canvasElement: ElementRef;
66
+ readonly wrapper: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
67
+ readonly getDatasetAtEvent: import("@angular/core").OutputEmitterRef<InteractionItem[]>;
68
+ readonly getElementAtEvent: import("@angular/core").OutputEmitterRef<InteractionItem[]>;
69
+ readonly getElementsAtEvent: import("@angular/core").OutputEmitterRef<InteractionItem[]>;
70
+ readonly chartRef: import("@angular/core").OutputEmitterRef<any>;
71
+ readonly canvasElement: import("@angular/core").Signal<ElementRef<any>>;
68
72
  chart: ChartJS;
69
73
  ctx: CanvasRenderingContext2D;
70
- get hostClasses(): {
74
+ readonly hostClasses: import("@angular/core").Signal<{
71
75
  'chart-wrapper': boolean;
72
- };
76
+ }>;
73
77
  constructor();
74
- ngAfterViewInit(): void;
75
78
  ngOnChanges(changes: SimpleChanges): void;
76
79
  ngOnDestroy(): void;
77
80
  handleClick($event: MouseEvent): void;
@@ -81,14 +84,9 @@ export declare class ChartjsComponent implements AfterViewInit, OnDestroy, OnCha
81
84
  private chartUpdateOutsideAngular;
82
85
  chartToBase64Image(): string | undefined;
83
86
  private chartDataConfig;
84
- private chartOptions;
85
- private chartConfig;
87
+ readonly chartOptions: import("@angular/core").Signal<import("node_modules/chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
88
+ readonly chartConfig: import("@angular/core").Signal<ChartConfiguration<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>>;
86
89
  private chartCustomTooltips;
87
90
  static ɵfac: i0.ɵɵFactoryDeclaration<ChartjsComponent, never>;
88
- static ɵcmp: i0.ɵɵComponentDeclaration<ChartjsComponent, "c-chart", ["cChart"], { "customTooltips": { "alias": "customTooltips"; "required": false; }; "data": { "alias": "data"; "required": false; }; "height": { "alias": "height"; "required": false; }; "id": { "alias": "id"; "required": false; }; "options": { "alias": "options"; "required": false; }; "plugins": { "alias": "plugins"; "required": false; }; "redraw": { "alias": "redraw"; "required": false; }; "type": { "alias": "type"; "required": false; }; "width": { "alias": "width"; "required": false; }; "wrapper": { "alias": "wrapper"; "required": false; }; }, { "getDatasetAtEvent": "getDatasetAtEvent"; "getElementAtEvent": "getElementAtEvent"; "getElementsAtEvent": "getElementsAtEvent"; "chartRef": "chartRef"; }, never, ["*"], true, never>;
89
- static ngAcceptInputType_customTooltips: unknown;
90
- static ngAcceptInputType_height: string | number;
91
- static ngAcceptInputType_redraw: unknown;
92
- static ngAcceptInputType_width: string | number;
93
- static ngAcceptInputType_wrapper: unknown;
91
+ static ɵcmp: i0.ɵɵComponentDeclaration<ChartjsComponent, "c-chart", ["cChart"], { "customTooltips": { "alias": "customTooltips"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "optionsInput": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; "redraw": { "alias": "redraw"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "wrapper": { "alias": "wrapper"; "required": false; "isSignal": true; }; }, { "getDatasetAtEvent": "getDatasetAtEvent"; "getElementAtEvent": "getElementAtEvent"; "getElementsAtEvent": "getElementsAtEvent"; "chartRef": "chartRef"; }, never, ["*"], true, never>;
94
92
  }
package/lib/chartjs.interface.d.ts ADDED
@@ -0,0 +1,71 @@
1
+ import { ChartType } from 'chart.js/auto';
2
+ import { EventEmitter } from '@angular/core';
3
+ import { ChartConfiguration, DefaultDataPoint } from 'chart.js';
4
+ export declare type BooleanInput = string | boolean | null | undefined;
5
+ export interface IChartjs<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
6
+ /**
7
+ * Enables custom html based tooltips instead of standard tooltips.
8
+ * @default true
9
+ */
10
+ customTooltips?: boolean;
11
+ /**
12
+ * The data object that is passed into the Chart.js chart (more info).
13
+ */
14
+ data?: ChartConfiguration<TType, TData, TLabel>['data'];
15
+ /**
16
+ * Height attribute applied to the rendered canvas.
17
+ *
18
+ * @default undefined
19
+ */
20
+ height?: number;
21
+ /**
22
+ * Html id attribute applied to the rendered canvas.
23
+ */
24
+ id?: string;
25
+ /**
26
+ * The options object that is passed into the Chart.js chart.
27
+ * {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
28
+ */
29
+ options?: ChartConfiguration<TType, TData, TLabel>['options'];
30
+ /**
31
+ * The plugins array that is passed into the Chart.js chart (more info)
32
+ * {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
33
+ */
34
+ plugins?: ChartConfiguration<TType, TData, TLabel>['plugins'];
35
+ /**
36
+ * If true, will tear down and redraw chart on all updates.
37
+ * @default false
38
+ */
39
+ redraw?: boolean;
40
+ /**
41
+ * Chart.js chart type.
42
+ * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
43
+ */
44
+ type: ChartConfiguration<TType, TData, TLabel>['type'];
45
+ /**
46
+ * Width attribute applied to the rendered canvas.
47
+ * @default 300
48
+ */
49
+ width?: number;
50
+ /**
51
+ * Put the chart into the wrapper div element.
52
+ * @default true
53
+ */
54
+ wrapper?: boolean;
55
+ /**
56
+ * Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
57
+ */
58
+ getDatasetAtEvent: EventEmitter<any>;
59
+ /**
60
+ * Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
61
+ */
62
+ getElementAtEvent: EventEmitter<any>;
63
+ /**
64
+ * Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
65
+ */
66
+ getElementsAtEvent: EventEmitter<any>;
67
+ /**
68
+ * Emits the chart reference
69
+ */
70
+ chartRef: EventEmitter<any>;
71
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coreui/angular-chartjs",
3
- "version": "5.4.1",
3
+ "version": "5.4.5",
4
4
  "description": "Angular wrapper component for Chart.js",
5
5
  "copyright": "Copyright 2025 creativeLabs Łukasz Holeczek",
6
6
  "license": "MIT",
@@ -25,7 +25,7 @@
25
25
  "url": "https://github.com/coreui/coreui-angular/issues"
26
26
  },
27
27
  "peerDependencies": {
28
- "@angular/core": "^19.1.0",
28
+ "@angular/core": "^19.2.0",
29
29
  "@coreui/chartjs": "~4.1.0",
30
30
  "chart.js": "^4.4.8"
31
31
  },