@coreui/angular-chartjs 5.4.13 → 5.5.0
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.
- package/README.md +4 -4
- package/fesm2022/coreui-angular-chartjs.mjs +97 -93
- package/fesm2022/coreui-angular-chartjs.mjs.map +1 -1
- package/index.d.ts +104 -5
- package/package.json +3 -3
- package/lib/chartjs.component.d.ts +0 -92
- package/lib/chartjs.interface.d.ts +0 -71
- package/lib/chartjs.module.d.ts +0 -7
- package/public-api.d.ts +0 -2
package/README.md
CHANGED
|
@@ -35,18 +35,18 @@ Featured CoreUI for Angular libraries:
|
|
|
35
35
|
### Status
|
|
36
36
|
|
|
37
37
|
![angular][angular-badge]
|
|
38
|
-
[![npm package][npm-badge-v5-
|
|
38
|
+
[![npm package][npm-badge-v5-ng20]][npm]
|
|
39
39
|
[![npm package][npm-badge-latest]][npm]
|
|
40
40
|
[![npm package][npm-badge-next]][npm]
|
|
41
41
|
[![NPM downloads][npm-download]][npm]
|
|
42
42
|
[](https://github.com/coreui/coreui-angular/actions/workflows/project-chartjs-check.yml)
|
|
43
43
|
|
|
44
|
-
[npm-badge-v5-
|
|
44
|
+
[npm-badge-v5-ng20]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng20?style=flat-square&color=brightgreen
|
|
45
45
|
[npm-badge-latest]: https://img.shields.io/npm/v/@coreui/angular-chartjs/latest?style=flat-square&color=brightgreen
|
|
46
46
|
[npm-badge-next]: https://img.shields.io/npm/v/@coreui/angular-chartjs/next?style=flat-square&color=red
|
|
47
47
|
[npm]: https://www.npmjs.com/package/@coreui/angular-chartjs
|
|
48
48
|
[npm-download]: https://img.shields.io/npm/dm/@coreui/angular-chartjs.svg?style=flat-square
|
|
49
|
-
[angular-badge]: https://img.shields.io/badge/angular-^
|
|
49
|
+
[angular-badge]: https://img.shields.io/badge/angular-^20.0.0-lightgrey.svg?style=flat-square&logo=angular
|
|
50
50
|
|
|
51
51
|
##### install:
|
|
52
52
|
|
|
@@ -59,7 +59,7 @@ ng add @coreui/angular-chartjs
|
|
|
59
59
|
```bash
|
|
60
60
|
npm install chart.js@4
|
|
61
61
|
npm install @coreui/chartjs@~4.1
|
|
62
|
-
npm install @coreui/angular-chartjs@~5.
|
|
62
|
+
npm install @coreui/angular-chartjs@~5.5
|
|
63
63
|
````
|
|
64
64
|
|
|
65
65
|
##### import:
|
|
@@ -7,96 +7,83 @@ import { customTooltips } from '@coreui/chartjs';
|
|
|
7
7
|
Chart.register(...registerables);
|
|
8
8
|
let nextId = 0;
|
|
9
9
|
class ChartjsComponent {
|
|
10
|
+
//
|
|
11
|
+
static ngAcceptInputType_redraw;
|
|
12
|
+
ngZone = inject(NgZone);
|
|
13
|
+
renderer = inject(Renderer2);
|
|
14
|
+
changeDetectorRef = inject(ChangeDetectorRef);
|
|
15
|
+
/**
|
|
16
|
+
* Enables custom html based tooltips instead of standard tooltips.
|
|
17
|
+
* @return boolean
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
customTooltips = input(true, { transform: booleanAttribute });
|
|
21
|
+
/**
|
|
22
|
+
* The data object that is passed into the Chart.js chart (more info).
|
|
23
|
+
*/
|
|
24
|
+
data = input();
|
|
25
|
+
/**
|
|
26
|
+
* A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.
|
|
27
|
+
*/
|
|
28
|
+
// @Input() fallbackContent?: TemplateRef<any>;
|
|
29
|
+
/**
|
|
30
|
+
* Height attribute applied to the rendered canvas.
|
|
31
|
+
* @return number | undefined
|
|
32
|
+
* @default null
|
|
33
|
+
*/
|
|
34
|
+
height = input(null, { transform: (value) => numberAttribute(value, undefined) });
|
|
35
|
+
/**
|
|
36
|
+
* ID attribute applied to the rendered canvas.
|
|
37
|
+
* @return string
|
|
38
|
+
*/
|
|
39
|
+
idInput = input(`c-chartjs-${nextId++}`, { alias: 'id' });
|
|
10
40
|
get id() {
|
|
11
41
|
return this.idInput();
|
|
12
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* The options object that is passed into the Chart.js chart.
|
|
45
|
+
*/
|
|
46
|
+
optionsInput = input({}, { alias: 'options' });
|
|
47
|
+
options = linkedSignal(this.optionsInput);
|
|
48
|
+
/**
|
|
49
|
+
* The plugins array that is passed into the Chart.js chart
|
|
50
|
+
*/
|
|
51
|
+
plugins = input([]);
|
|
52
|
+
/**
|
|
53
|
+
* If true, will tear down and redraw chart on all updates.
|
|
54
|
+
* @return boolean
|
|
55
|
+
* @default false
|
|
56
|
+
*/
|
|
57
|
+
redraw = input(false, { transform: booleanAttribute });
|
|
58
|
+
/**
|
|
59
|
+
* Chart.js chart type.
|
|
60
|
+
* @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
|
|
61
|
+
*/
|
|
62
|
+
type = input('bar');
|
|
63
|
+
/**
|
|
64
|
+
* Width attribute applied to the rendered canvas.
|
|
65
|
+
* @return number | undefined
|
|
66
|
+
* @default null
|
|
67
|
+
*/
|
|
68
|
+
width = input(null, { transform: (value) => numberAttribute(value, undefined) });
|
|
69
|
+
/**
|
|
70
|
+
* Put the chart into the wrapper div element.
|
|
71
|
+
* @default true
|
|
72
|
+
*/
|
|
73
|
+
wrapper = input(true, { transform: booleanAttribute });
|
|
74
|
+
getDatasetAtEvent = output();
|
|
75
|
+
getElementAtEvent = output();
|
|
76
|
+
getElementsAtEvent = output();
|
|
77
|
+
chartRef = output();
|
|
78
|
+
canvasElement = viewChild.required('canvasElement');
|
|
79
|
+
chart;
|
|
80
|
+
ctx;
|
|
81
|
+
hostClasses = computed(() => {
|
|
82
|
+
return {
|
|
83
|
+
'chart-wrapper': this.wrapper()
|
|
84
|
+
};
|
|
85
|
+
});
|
|
13
86
|
constructor() {
|
|
14
|
-
this.ngZone = inject(NgZone);
|
|
15
|
-
this.renderer = inject(Renderer2);
|
|
16
|
-
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
17
|
-
/**
|
|
18
|
-
* Enables custom html based tooltips instead of standard tooltips.
|
|
19
|
-
* @return boolean
|
|
20
|
-
* @default true
|
|
21
|
-
*/
|
|
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) });
|
|
37
|
-
/**
|
|
38
|
-
* ID attribute applied to the rendered canvas.
|
|
39
|
-
* @return string
|
|
40
|
-
*/
|
|
41
|
-
this.idInput = input(`c-chartjs-${nextId++}`, { alias: 'id' });
|
|
42
|
-
/**
|
|
43
|
-
* The options object that is passed into the Chart.js chart.
|
|
44
|
-
*/
|
|
45
|
-
this.optionsInput = input({}, { alias: 'options' });
|
|
46
|
-
this.options = linkedSignal(this.optionsInput);
|
|
47
|
-
/**
|
|
48
|
-
* The plugins array that is passed into the Chart.js chart
|
|
49
|
-
*/
|
|
50
|
-
this.plugins = input([]);
|
|
51
|
-
/**
|
|
52
|
-
* If true, will tear down and redraw chart on all updates.
|
|
53
|
-
* @return boolean
|
|
54
|
-
* @default false
|
|
55
|
-
*/
|
|
56
|
-
this.redraw = input(false, { transform: booleanAttribute });
|
|
57
|
-
/**
|
|
58
|
-
* Chart.js chart type.
|
|
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
|
|
66
|
-
*/
|
|
67
|
-
this.width = input(null, { transform: (value) => numberAttribute(value, undefined) });
|
|
68
|
-
/**
|
|
69
|
-
* Put the chart into the wrapper div element.
|
|
70
|
-
* @default true
|
|
71
|
-
*/
|
|
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
87
|
afterRenderEffect({
|
|
101
88
|
read: () => {
|
|
102
89
|
const canvasElement = this.canvasElement();
|
|
@@ -182,6 +169,23 @@ class ChartjsComponent {
|
|
|
182
169
|
chartToBase64Image() {
|
|
183
170
|
return this.chart?.toBase64Image();
|
|
184
171
|
}
|
|
172
|
+
chartDataConfig = computed(() => {
|
|
173
|
+
const { labels, datasets } = { ...this.data() };
|
|
174
|
+
return {
|
|
175
|
+
labels: labels ?? [],
|
|
176
|
+
datasets: datasets ?? []
|
|
177
|
+
};
|
|
178
|
+
});
|
|
179
|
+
chartOptions = computed(() => this.options() ?? {});
|
|
180
|
+
chartConfig = computed(() => {
|
|
181
|
+
this.chartCustomTooltips();
|
|
182
|
+
return {
|
|
183
|
+
data: this.chartDataConfig(),
|
|
184
|
+
options: this.chartOptions(),
|
|
185
|
+
plugins: this.plugins(),
|
|
186
|
+
type: this.type()
|
|
187
|
+
};
|
|
188
|
+
});
|
|
185
189
|
chartCustomTooltips() {
|
|
186
190
|
if (this.customTooltips()) {
|
|
187
191
|
const options = this.options();
|
|
@@ -204,10 +208,10 @@ class ChartjsComponent {
|
|
|
204
208
|
});
|
|
205
209
|
}
|
|
206
210
|
}
|
|
207
|
-
static
|
|
208
|
-
static
|
|
211
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ChartjsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
212
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", 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 });
|
|
209
213
|
}
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
214
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ChartjsComponent, decorators: [{
|
|
211
215
|
type: Component,
|
|
212
216
|
args: [{ selector: 'c-chart', exportAs: 'cChart', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
213
217
|
'[class]': 'hostClasses()',
|
|
@@ -217,11 +221,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
217
221
|
}], ctorParameters: () => [] });
|
|
218
222
|
|
|
219
223
|
class ChartjsModule {
|
|
220
|
-
static
|
|
221
|
-
static
|
|
222
|
-
static
|
|
224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
225
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ChartjsModule, imports: [ChartjsComponent], exports: [ChartjsComponent] });
|
|
226
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ChartjsModule });
|
|
223
227
|
}
|
|
224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ChartjsModule, decorators: [{
|
|
225
229
|
type: NgModule,
|
|
226
230
|
args: [{
|
|
227
231
|
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 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/index.d.ts
CHANGED
|
@@ -1,5 +1,104 @@
|
|
|
1
|
-
|
|
2
|
-
*
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import * as node_modules_chart_js_dist_types_basic from 'node_modules/chart.js/dist/types/basic';
|
|
2
|
+
import * as node_modules_chart_js_dist_types_utils from 'node_modules/chart.js/dist/types/utils';
|
|
3
|
+
import * as chart_js from 'chart.js';
|
|
4
|
+
import { ChartData, Plugin, InteractionItem, Chart, ChartConfiguration } from 'chart.js';
|
|
5
|
+
import * as _angular_core from '@angular/core';
|
|
6
|
+
import { OnDestroy, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
|
|
7
|
+
|
|
8
|
+
declare type BooleanInput = string | boolean | null | undefined;
|
|
9
|
+
|
|
10
|
+
declare class ChartjsComponent implements OnDestroy, OnChanges {
|
|
11
|
+
static ngAcceptInputType_redraw: BooleanInput;
|
|
12
|
+
private readonly ngZone;
|
|
13
|
+
private readonly renderer;
|
|
14
|
+
private readonly changeDetectorRef;
|
|
15
|
+
/**
|
|
16
|
+
* Enables custom html based tooltips instead of standard tooltips.
|
|
17
|
+
* @return boolean
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
readonly customTooltips: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
21
|
+
/**
|
|
22
|
+
* The data object that is passed into the Chart.js chart (more info).
|
|
23
|
+
*/
|
|
24
|
+
readonly data: _angular_core.InputSignal<ChartData<keyof chart_js.ChartTypeRegistry, (number | [number, number] | chart_js.Point | chart_js.BubbleDataPoint | null)[], unknown> | undefined>;
|
|
25
|
+
/**
|
|
26
|
+
* A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.
|
|
27
|
+
*/
|
|
28
|
+
/**
|
|
29
|
+
* Height attribute applied to the rendered canvas.
|
|
30
|
+
* @return number | undefined
|
|
31
|
+
* @default null
|
|
32
|
+
*/
|
|
33
|
+
readonly height: _angular_core.InputSignalWithTransform<number | null, unknown>;
|
|
34
|
+
/**
|
|
35
|
+
* ID attribute applied to the rendered canvas.
|
|
36
|
+
* @return string
|
|
37
|
+
*/
|
|
38
|
+
readonly idInput: _angular_core.InputSignal<string>;
|
|
39
|
+
get id(): string;
|
|
40
|
+
/**
|
|
41
|
+
* The options object that is passed into the Chart.js chart.
|
|
42
|
+
*/
|
|
43
|
+
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
|
+
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
|
+
/**
|
|
46
|
+
* The plugins array that is passed into the Chart.js chart
|
|
47
|
+
*/
|
|
48
|
+
readonly plugins: _angular_core.InputSignal<Plugin<keyof chart_js.ChartTypeRegistry, node_modules_chart_js_dist_types_basic.AnyObject>[]>;
|
|
49
|
+
/**
|
|
50
|
+
* If true, will tear down and redraw chart on all updates.
|
|
51
|
+
* @return boolean
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
readonly redraw: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
55
|
+
/**
|
|
56
|
+
* Chart.js chart type.
|
|
57
|
+
* @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
|
|
58
|
+
*/
|
|
59
|
+
readonly type: _angular_core.InputSignal<keyof chart_js.ChartTypeRegistry>;
|
|
60
|
+
/**
|
|
61
|
+
* Width attribute applied to the rendered canvas.
|
|
62
|
+
* @return number | undefined
|
|
63
|
+
* @default null
|
|
64
|
+
*/
|
|
65
|
+
readonly width: _angular_core.InputSignalWithTransform<number | null, unknown>;
|
|
66
|
+
/**
|
|
67
|
+
* Put the chart into the wrapper div element.
|
|
68
|
+
* @default true
|
|
69
|
+
*/
|
|
70
|
+
readonly wrapper: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
71
|
+
readonly getDatasetAtEvent: _angular_core.OutputEmitterRef<InteractionItem[]>;
|
|
72
|
+
readonly getElementAtEvent: _angular_core.OutputEmitterRef<InteractionItem[]>;
|
|
73
|
+
readonly getElementsAtEvent: _angular_core.OutputEmitterRef<InteractionItem[]>;
|
|
74
|
+
readonly chartRef: _angular_core.OutputEmitterRef<any>;
|
|
75
|
+
readonly canvasElement: _angular_core.Signal<ElementRef<any>>;
|
|
76
|
+
chart: Chart;
|
|
77
|
+
ctx: CanvasRenderingContext2D;
|
|
78
|
+
readonly hostClasses: _angular_core.Signal<{
|
|
79
|
+
'chart-wrapper': boolean;
|
|
80
|
+
}>;
|
|
81
|
+
constructor();
|
|
82
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
83
|
+
ngOnDestroy(): void;
|
|
84
|
+
handleClick($event: MouseEvent): void;
|
|
85
|
+
chartDestroy(): void;
|
|
86
|
+
chartRender(): void;
|
|
87
|
+
chartUpdate(): void;
|
|
88
|
+
private chartUpdateOutsideAngular;
|
|
89
|
+
chartToBase64Image(): string | undefined;
|
|
90
|
+
private chartDataConfig;
|
|
91
|
+
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
|
+
readonly chartConfig: _angular_core.Signal<ChartConfiguration<keyof chart_js.ChartTypeRegistry, (number | [number, number] | chart_js.Point | chart_js.BubbleDataPoint | null)[], unknown>>;
|
|
93
|
+
private chartCustomTooltips;
|
|
94
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartjsComponent, never>;
|
|
95
|
+
static ɵcmp: _angular_core.ɵɵ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>;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
declare class ChartjsModule {
|
|
99
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartjsModule, never>;
|
|
100
|
+
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ChartjsModule, never, [typeof ChartjsComponent], [typeof ChartjsComponent]>;
|
|
101
|
+
static ɵinj: _angular_core.ɵɵInjectorDeclaration<ChartjsModule>;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
export { ChartjsComponent, ChartjsModule };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coreui/angular-chartjs",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.0",
|
|
4
4
|
"description": "Angular wrapper component for Chart.js",
|
|
5
5
|
"copyright": "Copyright 2025 creativeLabs Łukasz Holeczek",
|
|
6
6
|
"license": "MIT",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://github.com/coreui/coreui-angular/issues"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@angular/core": "^
|
|
29
|
-
"@coreui/chartjs": "
|
|
28
|
+
"@angular/core": "^20.0.3",
|
|
29
|
+
"@coreui/chartjs": "^4.1.0",
|
|
30
30
|
"chart.js": "^4.4.9"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
|
2
|
-
import type { ChartConfiguration, ChartData, InteractionItem, Plugin } from 'chart.js';
|
|
3
|
-
import { Chart as ChartJS } from 'chart.js';
|
|
4
|
-
import { BooleanInput } from './chartjs.interface';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class ChartjsComponent implements OnDestroy, OnChanges {
|
|
7
|
-
static ngAcceptInputType_redraw: BooleanInput;
|
|
8
|
-
private readonly ngZone;
|
|
9
|
-
private readonly renderer;
|
|
10
|
-
private readonly changeDetectorRef;
|
|
11
|
-
/**
|
|
12
|
-
* Enables custom html based tooltips instead of standard tooltips.
|
|
13
|
-
* @return boolean
|
|
14
|
-
* @default true
|
|
15
|
-
*/
|
|
16
|
-
readonly customTooltips: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
17
|
-
/**
|
|
18
|
-
* The data object that is passed into the Chart.js chart (more info).
|
|
19
|
-
*/
|
|
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>;
|
|
21
|
-
/**
|
|
22
|
-
* A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.
|
|
23
|
-
*/
|
|
24
|
-
/**
|
|
25
|
-
* Height attribute applied to the rendered canvas.
|
|
26
|
-
* @return number | undefined
|
|
27
|
-
* @default null
|
|
28
|
-
*/
|
|
29
|
-
readonly height: import("@angular/core").InputSignalWithTransform<number | null, unknown>;
|
|
30
|
-
/**
|
|
31
|
-
* ID attribute applied to the rendered canvas.
|
|
32
|
-
* @return string
|
|
33
|
-
*/
|
|
34
|
-
readonly idInput: import("@angular/core").InputSignal<string>;
|
|
35
|
-
get id(): string;
|
|
36
|
-
/**
|
|
37
|
-
* The options object that is passed into the Chart.js chart.
|
|
38
|
-
*/
|
|
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>;
|
|
41
|
-
/**
|
|
42
|
-
* The plugins array that is passed into the Chart.js chart
|
|
43
|
-
*/
|
|
44
|
-
readonly plugins: import("@angular/core").InputSignal<Plugin<keyof import("chart.js").ChartTypeRegistry, import("node_modules/chart.js/dist/types/basic").AnyObject>[]>;
|
|
45
|
-
/**
|
|
46
|
-
* If true, will tear down and redraw chart on all updates.
|
|
47
|
-
* @return boolean
|
|
48
|
-
* @default false
|
|
49
|
-
*/
|
|
50
|
-
readonly redraw: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
51
|
-
/**
|
|
52
|
-
* Chart.js chart type.
|
|
53
|
-
* @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
|
|
54
|
-
*/
|
|
55
|
-
readonly type: import("@angular/core").InputSignal<keyof import("chart.js").ChartTypeRegistry>;
|
|
56
|
-
/**
|
|
57
|
-
* Width attribute applied to the rendered canvas.
|
|
58
|
-
* @return number | undefined
|
|
59
|
-
* @default null
|
|
60
|
-
*/
|
|
61
|
-
readonly width: import("@angular/core").InputSignalWithTransform<number | null, unknown>;
|
|
62
|
-
/**
|
|
63
|
-
* Put the chart into the wrapper div element.
|
|
64
|
-
* @default true
|
|
65
|
-
*/
|
|
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>>;
|
|
72
|
-
chart: ChartJS;
|
|
73
|
-
ctx: CanvasRenderingContext2D;
|
|
74
|
-
readonly hostClasses: import("@angular/core").Signal<{
|
|
75
|
-
'chart-wrapper': boolean;
|
|
76
|
-
}>;
|
|
77
|
-
constructor();
|
|
78
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
79
|
-
ngOnDestroy(): void;
|
|
80
|
-
handleClick($event: MouseEvent): void;
|
|
81
|
-
chartDestroy(): void;
|
|
82
|
-
chartRender(): void;
|
|
83
|
-
chartUpdate(): void;
|
|
84
|
-
private chartUpdateOutsideAngular;
|
|
85
|
-
chartToBase64Image(): string | undefined;
|
|
86
|
-
private chartDataConfig;
|
|
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>>;
|
|
89
|
-
private chartCustomTooltips;
|
|
90
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ChartjsComponent, never>;
|
|
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>;
|
|
92
|
-
}
|
|
@@ -1,71 +0,0 @@
|
|
|
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/lib/chartjs.module.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
import * as i1 from "./chartjs.component";
|
|
3
|
-
export declare class ChartjsModule {
|
|
4
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ChartjsModule, never>;
|
|
5
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<ChartjsModule, never, [typeof i1.ChartjsComponent], [typeof i1.ChartjsComponent]>;
|
|
6
|
-
static ɵinj: i0.ɵɵInjectorDeclaration<ChartjsModule>;
|
|
7
|
-
}
|
package/public-api.d.ts
DELETED