@coreui/angular-chartjs 5.6.13 → 5.6.15
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, NgZone, Renderer2, ChangeDetectorRef, input, booleanAttribute, numberAttribute, linkedSignal, output, viewChild, computed,
|
|
3
|
-
import merge from 'lodash-es
|
|
2
|
+
import { inject, NgZone, Renderer2, ChangeDetectorRef, input, booleanAttribute, numberAttribute, linkedSignal, output, viewChild, computed, effect, untracked, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { merge } from 'lodash-es';
|
|
4
4
|
import { Chart, registerables } from 'chart.js';
|
|
5
5
|
import { customTooltips } from '@coreui/chartjs';
|
|
6
6
|
|
|
@@ -20,6 +20,8 @@ class ChartjsComponent {
|
|
|
20
20
|
customTooltips = input(true, { ...(ngDevMode ? { debugName: "customTooltips" } : {}), transform: booleanAttribute });
|
|
21
21
|
/**
|
|
22
22
|
* The data object that is passed into the Chart.js chart (more info).
|
|
23
|
+
* @returns ChartData
|
|
24
|
+
* @default { labels: [], datasets: [] }
|
|
23
25
|
*/
|
|
24
26
|
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
25
27
|
/**
|
|
@@ -34,7 +36,8 @@ class ChartjsComponent {
|
|
|
34
36
|
height = input(null, { ...(ngDevMode ? { debugName: "height" } : {}), transform: (value) => numberAttribute(value, undefined) });
|
|
35
37
|
/**
|
|
36
38
|
* ID attribute applied to the rendered canvas.
|
|
37
|
-
* @
|
|
39
|
+
* @returns string
|
|
40
|
+
* @default 'c-chartjs-' + nextId
|
|
38
41
|
*/
|
|
39
42
|
idInput = input(`c-chartjs-${nextId++}`, { ...(ngDevMode ? { debugName: "idInput" } : {}), alias: 'id' });
|
|
40
43
|
get id() {
|
|
@@ -42,22 +45,27 @@ class ChartjsComponent {
|
|
|
42
45
|
}
|
|
43
46
|
/**
|
|
44
47
|
* The options object that is passed into the Chart.js chart.
|
|
48
|
+
* @returns ChartOptions | undefined
|
|
49
|
+
* @default {}
|
|
45
50
|
*/
|
|
46
51
|
optionsInput = input({}, { ...(ngDevMode ? { debugName: "optionsInput" } : {}), alias: 'options' });
|
|
47
52
|
options = linkedSignal(this.optionsInput, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
48
53
|
/**
|
|
49
54
|
* The plugins array that is passed into the Chart.js chart
|
|
55
|
+
* @returns Plugin[]
|
|
56
|
+
* @default []
|
|
50
57
|
*/
|
|
51
58
|
plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : []));
|
|
52
59
|
/**
|
|
53
60
|
* If true, will tear down and redraw chart on all updates.
|
|
54
|
-
* @
|
|
61
|
+
* @returns boolean
|
|
55
62
|
* @default false
|
|
56
63
|
*/
|
|
57
64
|
redraw = input(false, { ...(ngDevMode ? { debugName: "redraw" } : {}), transform: booleanAttribute });
|
|
58
65
|
/**
|
|
59
66
|
* Chart.js chart type.
|
|
60
|
-
* @
|
|
67
|
+
* @returns {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
|
|
68
|
+
* @default 'bar'
|
|
61
69
|
*/
|
|
62
70
|
type = input('bar', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
63
71
|
/**
|
|
@@ -68,34 +76,48 @@ class ChartjsComponent {
|
|
|
68
76
|
width = input(null, { ...(ngDevMode ? { debugName: "width" } : {}), transform: (value) => numberAttribute(value, undefined) });
|
|
69
77
|
/**
|
|
70
78
|
* Put the chart into the wrapper div element.
|
|
79
|
+
* @return boolean
|
|
71
80
|
* @default true
|
|
72
81
|
*/
|
|
73
82
|
wrapper = input(true, { ...(ngDevMode ? { debugName: "wrapper" } : {}), transform: booleanAttribute });
|
|
83
|
+
/** Event emitted on click of a chart element. Contains an array of the clicked elements.
|
|
84
|
+
* @returns InteractionItem[]
|
|
85
|
+
* @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode
|
|
86
|
+
*/
|
|
74
87
|
getDatasetAtEvent = output();
|
|
88
|
+
/** Event emitted on click of a chart element. Contains an array of the clicked element.
|
|
89
|
+
* @returns InteractionItem[]
|
|
90
|
+
* @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode
|
|
91
|
+
*/
|
|
75
92
|
getElementAtEvent = output();
|
|
93
|
+
/** Event emitted on click of a chart element. Contains an array of the clicked elements.
|
|
94
|
+
* @returns InteractionItem[]
|
|
95
|
+
* @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode
|
|
96
|
+
*/
|
|
76
97
|
getElementsAtEvent = output();
|
|
98
|
+
/** Emits the Chart.js chart instance after it is created. Can be used to access Chart.js directly on the chart instance.
|
|
99
|
+
* @returns ChartJS | undefined
|
|
100
|
+
* @see https://www.chartjs.org/docs/latest/developers/api.html#chart-instance-methods
|
|
101
|
+
*/
|
|
77
102
|
chartRef = output();
|
|
78
103
|
canvasElement = viewChild.required('canvasElement');
|
|
79
104
|
chart;
|
|
80
|
-
ctx;
|
|
81
|
-
hostClasses = computed(() => {
|
|
82
|
-
return {
|
|
83
|
-
'chart-wrapper': this.wrapper()
|
|
84
|
-
};
|
|
85
|
-
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
105
|
+
ctx = computed(() => this.canvasElement()?.nativeElement.getContext('2d'), ...(ngDevMode ? [{ debugName: "ctx" }] : []));
|
|
86
106
|
constructor() {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
this.ctx = canvasElement?.nativeElement?.getContext('2d');
|
|
107
|
+
effect(() => {
|
|
108
|
+
const ctx = this.ctx();
|
|
109
|
+
if (ctx && !this.chart) {
|
|
91
110
|
this.chartRender();
|
|
92
111
|
}
|
|
93
112
|
});
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
113
|
+
effect(() => {
|
|
114
|
+
const data = this.data();
|
|
115
|
+
untracked(() => {
|
|
116
|
+
if (this.chart && data) {
|
|
117
|
+
this.chartUpdate();
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
});
|
|
99
121
|
}
|
|
100
122
|
ngOnDestroy() {
|
|
101
123
|
this.chartDestroy();
|
|
@@ -104,12 +126,27 @@ class ChartjsComponent {
|
|
|
104
126
|
if (!this.chart) {
|
|
105
127
|
return;
|
|
106
128
|
}
|
|
107
|
-
|
|
108
|
-
this.
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
this.
|
|
129
|
+
this.emitDatasetAtEvent($event);
|
|
130
|
+
this.emitElementAtEvent($event);
|
|
131
|
+
this.emitElementsAtEvent($event);
|
|
132
|
+
}
|
|
133
|
+
emitDatasetAtEvent($event) {
|
|
134
|
+
const datasetAtEvent = this.chart?.getElementsAtEventForMode($event, 'dataset', { intersect: true }, false);
|
|
135
|
+
if (datasetAtEvent) {
|
|
136
|
+
this.getDatasetAtEvent.emit(datasetAtEvent);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
emitElementAtEvent($event) {
|
|
140
|
+
const elementAtEvent = this.chart?.getElementsAtEventForMode($event, 'nearest', { intersect: true }, false);
|
|
141
|
+
if (elementAtEvent) {
|
|
142
|
+
this.getElementAtEvent.emit(elementAtEvent);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
emitElementsAtEvent($event) {
|
|
146
|
+
const elementsAtEvent = this.chart?.getElementsAtEventForMode($event, 'index', { intersect: true }, false);
|
|
147
|
+
if (elementsAtEvent) {
|
|
148
|
+
this.getElementsAtEvent.emit(elementsAtEvent);
|
|
149
|
+
}
|
|
113
150
|
}
|
|
114
151
|
chartDestroy() {
|
|
115
152
|
this.chart?.destroy();
|
|
@@ -117,13 +154,14 @@ class ChartjsComponent {
|
|
|
117
154
|
}
|
|
118
155
|
chartRender() {
|
|
119
156
|
const canvasElement = this.canvasElement();
|
|
120
|
-
if (!canvasElement?.nativeElement || !this.ctx || this.chart) {
|
|
157
|
+
if (!canvasElement?.nativeElement || !this.ctx() || this.chart) {
|
|
121
158
|
return;
|
|
122
159
|
}
|
|
123
160
|
this.ngZone.runOutsideAngular(() => {
|
|
124
161
|
const config = this.chartConfig();
|
|
125
|
-
|
|
126
|
-
|
|
162
|
+
const ctx = this.ctx();
|
|
163
|
+
if (config && ctx) {
|
|
164
|
+
this.chart = new Chart(ctx, config);
|
|
127
165
|
this.ngZone.run(() => {
|
|
128
166
|
this.renderer.setStyle(canvasElement.nativeElement, 'display', 'block');
|
|
129
167
|
this.changeDetectorRef.markForCheck();
|
|
@@ -159,7 +197,12 @@ class ChartjsComponent {
|
|
|
159
197
|
chartUpdateOutsideAngular() {
|
|
160
198
|
setTimeout(() => {
|
|
161
199
|
this.ngZone.runOutsideAngular(() => {
|
|
162
|
-
|
|
200
|
+
try {
|
|
201
|
+
this.chart?.update();
|
|
202
|
+
}
|
|
203
|
+
catch (error) {
|
|
204
|
+
console.warn('Error on chart.update():', error);
|
|
205
|
+
}
|
|
163
206
|
this.ngZone.run(() => {
|
|
164
207
|
this.changeDetectorRef.markForCheck();
|
|
165
208
|
});
|
|
@@ -187,45 +230,46 @@ class ChartjsComponent {
|
|
|
187
230
|
};
|
|
188
231
|
}, ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
|
|
189
232
|
chartCustomTooltips() {
|
|
190
|
-
if (this.customTooltips()) {
|
|
191
|
-
|
|
192
|
-
const plugins = options?.plugins;
|
|
193
|
-
const tooltip = options?.plugins?.tooltip;
|
|
194
|
-
untracked(() => {
|
|
195
|
-
this.options.set(merge({
|
|
196
|
-
...options,
|
|
197
|
-
plugins: {
|
|
198
|
-
...plugins,
|
|
199
|
-
tooltip: {
|
|
200
|
-
...tooltip,
|
|
201
|
-
enabled: false,
|
|
202
|
-
mode: 'index',
|
|
203
|
-
position: 'nearest',
|
|
204
|
-
external: customTooltips
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
}));
|
|
208
|
-
});
|
|
233
|
+
if (!this.customTooltips()) {
|
|
234
|
+
return;
|
|
209
235
|
}
|
|
236
|
+
const options = this.options();
|
|
237
|
+
const plugins = options?.plugins;
|
|
238
|
+
const tooltip = options?.plugins?.tooltip;
|
|
239
|
+
untracked(() => {
|
|
240
|
+
this.options.set(merge({
|
|
241
|
+
...options,
|
|
242
|
+
plugins: {
|
|
243
|
+
...plugins,
|
|
244
|
+
tooltip: {
|
|
245
|
+
...tooltip,
|
|
246
|
+
enabled: false,
|
|
247
|
+
mode: 'index',
|
|
248
|
+
position: 'nearest',
|
|
249
|
+
external: customTooltips
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}));
|
|
253
|
+
});
|
|
210
254
|
}
|
|
211
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
212
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.
|
|
255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ChartjsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", 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.chart-wrapper": "wrapper()", "style.height.px": "height()", "style.width.px": "width()" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true, isSignal: true }], exportAs: ["cChart"], 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 });
|
|
213
257
|
}
|
|
214
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ChartjsComponent, decorators: [{
|
|
215
259
|
type: Component,
|
|
216
260
|
args: [{ selector: 'c-chart', exportAs: 'cChart', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
217
|
-
'[class]': '
|
|
261
|
+
'[class.chart-wrapper]': 'wrapper()',
|
|
218
262
|
'[style.height.px]': 'height()',
|
|
219
263
|
'[style.width.px]': 'width()'
|
|
220
264
|
}, 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"] }]
|
|
221
265
|
}], ctorParameters: () => [], propDecorators: { customTooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTooltips", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], optionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], redraw: [{ type: i0.Input, args: [{ isSignal: true, alias: "redraw", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], wrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapper", required: false }] }], getDatasetAtEvent: [{ type: i0.Output, args: ["getDatasetAtEvent"] }], getElementAtEvent: [{ type: i0.Output, args: ["getElementAtEvent"] }], getElementsAtEvent: [{ type: i0.Output, args: ["getElementsAtEvent"] }], chartRef: [{ type: i0.Output, args: ["chartRef"] }], canvasElement: [{ type: i0.ViewChild, args: ['canvasElement', { isSignal: true }] }] } });
|
|
222
266
|
|
|
223
267
|
class ChartjsModule {
|
|
224
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
225
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
226
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.
|
|
268
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
269
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: ChartjsModule, imports: [ChartjsComponent], exports: [ChartjsComponent] });
|
|
270
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ChartjsModule });
|
|
227
271
|
}
|
|
228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ChartjsModule, decorators: [{
|
|
229
273
|
type: NgModule,
|
|
230
274
|
args: [{
|
|
231
275
|
imports: [
|
|
@@ -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 {\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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"}
|
|
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 booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n effect,\n ElementRef,\n inject,\n input,\n linkedSignal,\n NgZone,\n numberAttribute,\n OnDestroy,\n output,\n Renderer2,\n untracked,\n viewChild\n} from '@angular/core';\n\nimport { merge } from 'lodash-es';\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.chart-wrapper]': 'wrapper()',\n '[style.height.px]': 'height()',\n '[style.width.px]': 'width()'\n }\n})\nexport class ChartjsComponent implements OnDestroy {\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(true, { transform: booleanAttribute });\n\n /**\n * The data object that is passed into the Chart.js chart (more info).\n * @returns ChartData\n * @default { labels: [], datasets: [] }\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 * @returns string\n * @default 'c-chartjs-' + nextId\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 * @returns ChartOptions | undefined\n * @default {}\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 * @returns Plugin[]\n * @default []\n */\n readonly plugins = input<Plugin[]>([]);\n\n /**\n * If true, will tear down and redraw chart on all updates.\n * @returns boolean\n * @default false\n */\n readonly redraw = input(false, { transform: booleanAttribute });\n\n /**\n * Chart.js chart type.\n * @returns {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}\n * @default 'bar'\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 * @return boolean\n * @default true\n */\n readonly wrapper = input(true, { transform: booleanAttribute });\n\n /** Event emitted on click of a chart element. Contains an array of the clicked elements.\n * @returns InteractionItem[]\n * @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode\n */\n readonly getDatasetAtEvent = output<InteractionItem[]>();\n\n /** Event emitted on click of a chart element. Contains an array of the clicked element.\n * @returns InteractionItem[]\n * @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode\n */\n readonly getElementAtEvent = output<InteractionItem[]>();\n\n /** Event emitted on click of a chart element. Contains an array of the clicked elements.\n * @returns InteractionItem[]\n * @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode\n */\n readonly getElementsAtEvent = output<InteractionItem[]>();\n\n /** Emits the Chart.js chart instance after it is created. Can be used to access Chart.js directly on the chart instance.\n * @returns ChartJS | undefined\n * @see https://www.chartjs.org/docs/latest/developers/api.html#chart-instance-methods\n */\n readonly chartRef = output<ChartJS | undefined>();\n\n readonly canvasElement = viewChild.required<ElementRef<HTMLCanvasElement>>('canvasElement');\n\n chart: ChartJS | undefined;\n readonly ctx = computed(() => this.canvasElement()?.nativeElement.getContext('2d'));\n\n constructor() {\n effect(() => {\n const ctx = this.ctx();\n if (ctx && !this.chart) {\n this.chartRender();\n }\n });\n\n effect(() => {\n const data = this.data();\n untracked(() => {\n if (this.chart && data) {\n this.chartUpdate();\n }\n });\n });\n }\n\n ngOnDestroy(): void {\n this.chartDestroy();\n }\n\n public handleClick($event: MouseEvent): void {\n if (!this.chart) {\n return;\n }\n\n this.emitDatasetAtEvent($event);\n this.emitElementAtEvent($event);\n this.emitElementsAtEvent($event);\n }\n\n private emitDatasetAtEvent($event: MouseEvent): void {\n const datasetAtEvent = this.chart?.getElementsAtEventForMode($event, 'dataset', { intersect: true }, false);\n if (datasetAtEvent) {\n this.getDatasetAtEvent.emit(datasetAtEvent);\n }\n }\n\n private emitElementAtEvent($event: MouseEvent): void {\n const elementAtEvent = this.chart?.getElementsAtEventForMode($event, 'nearest', { intersect: true }, false);\n if (elementAtEvent) {\n this.getElementAtEvent.emit(elementAtEvent);\n }\n }\n\n private emitElementsAtEvent($event: MouseEvent): void {\n const elementsAtEvent = this.chart?.getElementsAtEventForMode($event, 'index', { intersect: true }, false);\n if (elementsAtEvent) {\n this.getElementsAtEvent.emit(elementsAtEvent);\n }\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 const ctx = this.ctx();\n if (config && ctx) {\n this.chart = new ChartJS(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 public 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 try {\n this.chart?.update();\n } catch (error) {\n console.warn('Error on chart.update():', error);\n }\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 readonly 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 return;\n }\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","<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/package.json
CHANGED
|
@@ -3,11 +3,11 @@ import * as node_modules_chart_js_dist_types_utils from 'node_modules/chart.js/d
|
|
|
3
3
|
import * as chart_js from 'chart.js';
|
|
4
4
|
import { ChartData, Plugin, InteractionItem, Chart, ChartConfiguration } from 'chart.js';
|
|
5
5
|
import * as _angular_core from '@angular/core';
|
|
6
|
-
import { OnDestroy,
|
|
6
|
+
import { OnDestroy, ElementRef } from '@angular/core';
|
|
7
7
|
|
|
8
8
|
declare type BooleanInput = string | boolean | null | undefined;
|
|
9
9
|
|
|
10
|
-
declare class ChartjsComponent implements OnDestroy
|
|
10
|
+
declare class ChartjsComponent implements OnDestroy {
|
|
11
11
|
static ngAcceptInputType_redraw: BooleanInput;
|
|
12
12
|
private readonly ngZone;
|
|
13
13
|
private readonly renderer;
|
|
@@ -20,6 +20,8 @@ declare class ChartjsComponent implements OnDestroy, OnChanges {
|
|
|
20
20
|
readonly customTooltips: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
21
21
|
/**
|
|
22
22
|
* The data object that is passed into the Chart.js chart (more info).
|
|
23
|
+
* @returns ChartData
|
|
24
|
+
* @default { labels: [], datasets: [] }
|
|
23
25
|
*/
|
|
24
26
|
readonly data: _angular_core.InputSignal<ChartData<keyof chart_js.ChartTypeRegistry, (number | [number, number] | chart_js.Point | chart_js.BubbleDataPoint | null)[], unknown> | undefined>;
|
|
25
27
|
/**
|
|
@@ -33,28 +35,34 @@ declare class ChartjsComponent implements OnDestroy, OnChanges {
|
|
|
33
35
|
readonly height: _angular_core.InputSignalWithTransform<number | null, unknown>;
|
|
34
36
|
/**
|
|
35
37
|
* ID attribute applied to the rendered canvas.
|
|
36
|
-
* @
|
|
38
|
+
* @returns string
|
|
39
|
+
* @default 'c-chartjs-' + nextId
|
|
37
40
|
*/
|
|
38
41
|
readonly idInput: _angular_core.InputSignal<string>;
|
|
39
42
|
get id(): string;
|
|
40
43
|
/**
|
|
41
44
|
* The options object that is passed into the Chart.js chart.
|
|
45
|
+
* @returns ChartOptions | undefined
|
|
46
|
+
* @default {}
|
|
42
47
|
*/
|
|
43
48
|
readonly optionsInput: _angular_core.InputSignal<node_modules_chart_js_dist_types_utils._DeepPartialObject<chart_js.CoreChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.ElementChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.PluginChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.DatasetChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.ScaleChartOptions<keyof chart_js.ChartTypeRegistry>> | undefined>;
|
|
44
49
|
readonly options: _angular_core.WritableSignal<node_modules_chart_js_dist_types_utils._DeepPartialObject<chart_js.CoreChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.ElementChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.PluginChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.DatasetChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.ScaleChartOptions<keyof chart_js.ChartTypeRegistry>> | undefined>;
|
|
45
50
|
/**
|
|
46
51
|
* The plugins array that is passed into the Chart.js chart
|
|
52
|
+
* @returns Plugin[]
|
|
53
|
+
* @default []
|
|
47
54
|
*/
|
|
48
55
|
readonly plugins: _angular_core.InputSignal<Plugin<keyof chart_js.ChartTypeRegistry, node_modules_chart_js_dist_types_basic.AnyObject>[]>;
|
|
49
56
|
/**
|
|
50
57
|
* If true, will tear down and redraw chart on all updates.
|
|
51
|
-
* @
|
|
58
|
+
* @returns boolean
|
|
52
59
|
* @default false
|
|
53
60
|
*/
|
|
54
61
|
readonly redraw: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
55
62
|
/**
|
|
56
63
|
* Chart.js chart type.
|
|
57
|
-
* @
|
|
64
|
+
* @returns {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
|
|
65
|
+
* @default 'bar'
|
|
58
66
|
*/
|
|
59
67
|
readonly type: _angular_core.InputSignal<keyof chart_js.ChartTypeRegistry>;
|
|
60
68
|
/**
|
|
@@ -65,29 +73,45 @@ declare class ChartjsComponent implements OnDestroy, OnChanges {
|
|
|
65
73
|
readonly width: _angular_core.InputSignalWithTransform<number | null, unknown>;
|
|
66
74
|
/**
|
|
67
75
|
* Put the chart into the wrapper div element.
|
|
76
|
+
* @return boolean
|
|
68
77
|
* @default true
|
|
69
78
|
*/
|
|
70
79
|
readonly wrapper: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
80
|
+
/** Event emitted on click of a chart element. Contains an array of the clicked elements.
|
|
81
|
+
* @returns InteractionItem[]
|
|
82
|
+
* @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode
|
|
83
|
+
*/
|
|
71
84
|
readonly getDatasetAtEvent: _angular_core.OutputEmitterRef<InteractionItem[]>;
|
|
85
|
+
/** Event emitted on click of a chart element. Contains an array of the clicked element.
|
|
86
|
+
* @returns InteractionItem[]
|
|
87
|
+
* @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode
|
|
88
|
+
*/
|
|
72
89
|
readonly getElementAtEvent: _angular_core.OutputEmitterRef<InteractionItem[]>;
|
|
90
|
+
/** Event emitted on click of a chart element. Contains an array of the clicked elements.
|
|
91
|
+
* @returns InteractionItem[]
|
|
92
|
+
* @see https://www.chartjs.org/docs/latest/developers/api.html#getelementsateventformode
|
|
93
|
+
*/
|
|
73
94
|
readonly getElementsAtEvent: _angular_core.OutputEmitterRef<InteractionItem[]>;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
readonly
|
|
79
|
-
|
|
80
|
-
|
|
95
|
+
/** Emits the Chart.js chart instance after it is created. Can be used to access Chart.js directly on the chart instance.
|
|
96
|
+
* @returns ChartJS | undefined
|
|
97
|
+
* @see https://www.chartjs.org/docs/latest/developers/api.html#chart-instance-methods
|
|
98
|
+
*/
|
|
99
|
+
readonly chartRef: _angular_core.OutputEmitterRef<Chart<keyof chart_js.ChartTypeRegistry, (number | [number, number] | chart_js.Point | chart_js.BubbleDataPoint | null)[], unknown> | undefined>;
|
|
100
|
+
readonly canvasElement: _angular_core.Signal<ElementRef<HTMLCanvasElement>>;
|
|
101
|
+
chart: Chart | undefined;
|
|
102
|
+
readonly ctx: _angular_core.Signal<CanvasRenderingContext2D | null>;
|
|
81
103
|
constructor();
|
|
82
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
83
104
|
ngOnDestroy(): void;
|
|
84
105
|
handleClick($event: MouseEvent): void;
|
|
106
|
+
private emitDatasetAtEvent;
|
|
107
|
+
private emitElementAtEvent;
|
|
108
|
+
private emitElementsAtEvent;
|
|
85
109
|
chartDestroy(): void;
|
|
86
110
|
chartRender(): void;
|
|
87
111
|
chartUpdate(): void;
|
|
88
112
|
private chartUpdateOutsideAngular;
|
|
89
113
|
chartToBase64Image(): string | undefined;
|
|
90
|
-
|
|
114
|
+
readonly chartDataConfig: _angular_core.Signal<ChartData<keyof chart_js.ChartTypeRegistry, (number | [number, number] | chart_js.Point | chart_js.BubbleDataPoint | null)[], unknown>>;
|
|
91
115
|
readonly chartOptions: _angular_core.Signal<node_modules_chart_js_dist_types_utils._DeepPartialObject<chart_js.CoreChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.ElementChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.PluginChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.DatasetChartOptions<keyof chart_js.ChartTypeRegistry> & chart_js.ScaleChartOptions<keyof chart_js.ChartTypeRegistry>>>;
|
|
92
116
|
readonly chartConfig: _angular_core.Signal<ChartConfiguration<keyof chart_js.ChartTypeRegistry, (number | [number, number] | chart_js.Point | chart_js.BubbleDataPoint | null)[], unknown>>;
|
|
93
117
|
private chartCustomTooltips;
|