npm - @coreui/angular-chartjs - Versions diffs - 5.4.0 → 5.4.3 - Mend

@coreui/angular-chartjs 5.4.0 → 5.4.3

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

package/README.md +22 -11
package/fesm2022/coreui-angular-chartjs.mjs +101 -118
package/fesm2022/coreui-angular-chartjs.mjs.map +1 -1
package/lib/chartjs.component.d.ts +35 -37
package/lib/chartjs.interface.d.ts +71 -0
package/package.json +3 -3

package/README.md CHANGED Viewed

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://coreui.io/">
+  <a href="https://coreui.io/" target="_blank">
     <img
       src="https://coreui.io/images/brand/coreui-signet.svg"
       alt="CoreUI logo"
@@ -11,31 +11,42 @@
 <h3 align="center">CoreUI Angular wrapper for Chart.js v4</h3>
 <p align="center">
-  <a href="https://coreui.io/angular/docs/"><strong>Explore @coreui/angular-chartjs docs & examples »</strong></a>
+  <a href="https://coreui.io/angular/docs/" target="_blank">Explore <strong>@coreui/angular-chartjs docs & examples »</strong></a>
   <br>
   <br>
-  <a href="https://github.com/coreui/coreui-angular/issues/new?template=bug_report.md">Report bug</a>
+  <a href="https://github.com/coreui/coreui-angular/issues/new?template=bug_report.md" target="_blank">Report bug</a>
   ·
-  <a href="https://github.com/coreui/coreui-angular/issues/new?template=feature_request.md">Request feature</a>
+  <a href="https://github.com/coreui/coreui-angular/issues/new?template=feature_request.md" target="_blank">Request feature</a>
   ·
   <a href="https://blog.coreui.io/">Blog</a>
 </p>
+<hr>
+<p>
+Featured CoreUI for Angular libraries:
+<br>
+· <a href="https://github.com/coreui/coreui-angular/tree/main/projects/coreui-angular" target="_blank">CoreUI Components for Angular</a>
+<br>
+· <a href="https://github.com/coreui/coreui-angular/tree/main/projects/coreui-angular-chartjs" target="_blank">CoreUI Angular wrapper for Chart.js v4</a>
+<br>
+· <a href="https://github.com/coreui/coreui-angular/tree/main/projects/coreui-icons-angular" target="_blank">CoreUI Icons for Angular</a>
+</p>
+<hr>
-## Status
+### Status
 ![angular][angular-badge]
 [![npm package][npm-badge-v5-ng19]][npm]
 [![npm package][npm-badge-latest]][npm]
-[![npm package][npm-badge-next]][npm]
-[![NPM downloads][npm-download]][npm]
+[![npm package][npm-badge-next]][npm]
+[![NPM downloads][npm-download]][npm]
+[![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)
 [npm-badge-v5-ng19]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng19?style=flat-square&color=brightgreen
 [npm-badge-latest]: https://img.shields.io/npm/v/@coreui/angular-chartjs/latest?style=flat-square&color=brightgreen
 [npm-badge-next]: https://img.shields.io/npm/v/@coreui/angular-chartjs/next?style=flat-square&color=red
 [npm]: https://www.npmjs.com/package/@coreui/angular-chartjs
 [npm-download]: https://img.shields.io/npm/dm/@coreui/angular-chartjs.svg?style=flat-square
-[angular-badge]: https://img.shields.io/badge/angular-^19.1.0-lightgrey.svg?style=flat-square&logo=angular
+[angular-badge]: https://img.shields.io/badge/angular-^19.2.0-lightgrey.svg?style=flat-square&logo=angular
 ##### install:
@@ -47,8 +58,8 @@ ng add @coreui/angular-chartjs
 - or npm
 ```bash
 npm install chart.js@4
-npm install @coreui/chartjs@4
-npm install @coreui/angular-chartjs@5.2
+npm install @coreui/chartjs@~4.1
+npm install @coreui/angular-chartjs@~5.4
 ````
 ##### import:

package/fesm2022/coreui-angular-chartjs.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, NgZone, Renderer2, ChangeDetectorRef, EventEmitter, afterRender, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, Input, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
+import { inject, NgZone, Renderer2, ChangeDetectorRef, input, booleanAttribute, numberAttribute, linkedSignal, output, viewChild, computed, afterRenderEffect, untracked, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import merge from 'lodash-es/merge';
 import { Chart, registerables } from 'chart.js';
 import { customTooltips } from '@coreui/chartjs';
@@ -7,10 +7,8 @@ import { customTooltips } from '@coreui/chartjs';
 Chart.register(...registerables);
 let nextId = 0;
 class ChartjsComponent {
-    get hostClasses() {
-        return {
-            'chart-wrapper': this.wrapper
-        };
+    get id() {
+        return this.idInput();
     }
     constructor() {
         this.ngZone = inject(NgZone);
@@ -18,54 +16,95 @@ class ChartjsComponent {
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /**
          * Enables custom html based tooltips instead of standard tooltips.
-         * @type boolean
+         * @return boolean
          * @default true
          */
-        this.customTooltips = true;
+        this.customTooltips = input(true, { transform: booleanAttribute });
+        /**
+         * The data object that is passed into the Chart.js chart (more info).
+         */
+        this.data = input();
+        /**
+         * A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.
+         */
+        // @Input() fallbackContent?: TemplateRef<any>;
+        /**
+         * Height attribute applied to the rendered canvas.
+         * @return number | undefined
+         * @default null
+         */
+        this.height = input(null, { transform: (value) => numberAttribute(value, undefined) });
         /**
          * ID attribute applied to the rendered canvas.
-         * @type string
+         * @return string
          */
-        this.id = `c-chartjs-${nextId++}`;
+        this.idInput = input(`c-chartjs-${nextId++}`, { alias: 'id' });
         /**
          * The options object that is passed into the Chart.js chart.
          */
-        this.options = {};
+        this.optionsInput = input({}, { alias: 'options' });
+        this.options = linkedSignal(this.optionsInput);
         /**
          * The plugins array that is passed into the Chart.js chart
          */
-        this.plugins = [];
+        this.plugins = input([]);
         /**
          * If true, will tear down and redraw chart on all updates.
-         * @type boolean
+         * @return boolean
          * @default false
          */
-        this.redraw = false;
+        this.redraw = input(false, { transform: booleanAttribute });
         /**
          * Chart.js chart type.
-         * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
+         * @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
+         */
+        this.type = input('bar');
+        /**
+         * Width attribute applied to the rendered canvas.
+         * @return number | undefined
+         * @default null
          */
-        this.type = 'bar';
+        this.width = input(null, { transform: (value) => numberAttribute(value, undefined) });
         /**
          * Put the chart into the wrapper div element.
          * @default true
          */
-        this.wrapper = true;
-        this.getDatasetAtEvent = new EventEmitter();
-        this.getElementAtEvent = new EventEmitter();
-        this.getElementsAtEvent = new EventEmitter();
-        this.chartRef = new EventEmitter();
-        // todo: verify afterRender / afterNextRender for chartjs (spec fails with 17.0.10)
-        afterRender({
-            write: () => {
-                this.ctx = this.canvasElement?.nativeElement?.getContext('2d');
+        this.wrapper = input(true, { transform: booleanAttribute });
+        this.getDatasetAtEvent = output();
+        this.getElementAtEvent = output();
+        this.getElementsAtEvent = output();
+        this.chartRef = output();
+        this.canvasElement = viewChild.required('canvasElement');
+        this.hostClasses = computed(() => {
+            return {
+                'chart-wrapper': this.wrapper()
+            };
+        });
+        this.chartDataConfig = computed(() => {
+            const { labels, datasets } = { ...this.data() };
+            return {
+                labels: labels ?? [],
+                datasets: datasets ?? []
+            };
+        });
+        this.chartOptions = computed(() => this.options() ?? {});
+        this.chartConfig = computed(() => {
+            this.chartCustomTooltips();
+            return {
+                data: this.chartDataConfig(),
+                options: this.chartOptions(),
+                plugins: this.plugins(),
+                type: this.type()
+            };
+        });
+        afterRenderEffect({
+            read: () => {
+                const canvasElement = this.canvasElement();
+                this.ctx = canvasElement?.nativeElement?.getContext('2d');
                 this.chartRender();
             }
         });
     }
-    ngAfterViewInit() {
-        this.chartRender();
-    }
     ngOnChanges(changes) {
         if (changes['data'] && !changes['data'].firstChange) {
             this.chartUpdate();
@@ -90,7 +129,8 @@ class ChartjsComponent {
         this.chartRef.emit(undefined);
     }
     chartRender() {
-        if (!this.canvasElement?.nativeElement || !this.ctx || this.chart) {
+        const canvasElement = this.canvasElement();
+        if (!canvasElement?.nativeElement || !this.ctx || this.chart) {
             return;
         }
         this.ngZone.runOutsideAngular(() => {
@@ -98,7 +138,7 @@ class ChartjsComponent {
             if (config) {
                 this.chart = new Chart(this.ctx, config);
                 this.ngZone.run(() => {
-                    this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
+                    this.renderer.setStyle(canvasElement.nativeElement, 'display', 'block');
                     this.changeDetectorRef.markForCheck();
                     this.chartRef.emit(this.chart);
                 });
@@ -109,13 +149,13 @@ class ChartjsComponent {
         if (!this.chart) {
             return;
         }
-        if (this.redraw) {
+        if (this.redraw()) {
             this.chartDestroy();
             this.chartRender();
             return;
         }
         const config = this.chartConfig();
-        if (this.options) {
+        if (this.options()) {
             Object.assign(this.chart.options ?? {}, config.options ?? {});
         }
         if (!this.chart.config.data) {
@@ -142,103 +182,46 @@ class ChartjsComponent {
     chartToBase64Image() {
         return this.chart?.toBase64Image();
     }
-    chartDataConfig() {
-        return {
-            labels: this.data?.labels ?? [],
-            datasets: this.data?.datasets ?? []
-        };
-    }
-    chartOptions() {
-        return this.options ?? {};
-    }
-    chartConfig() {
-        this.chartCustomTooltips();
-        return {
-            data: this.chartDataConfig(),
-            options: this.chartOptions(),
-            plugins: this.plugins,
-            type: this.type
-        };
-    }
     chartCustomTooltips() {
-        if (this.customTooltips) {
-            const options = this.options;
-            const plugins = this.options?.plugins;
-            const tooltip = this.options?.plugins?.tooltip;
-            this.options = merge({
-                ...options,
-                plugins: {
-                    ...plugins,
-                    tooltip: {
-                        ...tooltip,
-                        enabled: false,
-                        mode: 'index',
-                        position: 'nearest',
-                        external: customTooltips
+        if (this.customTooltips()) {
+            const options = this.options();
+            const plugins = options?.plugins;
+            const tooltip = options?.plugins?.tooltip;
+            untracked(() => {
+                this.options.set(merge({
+                    ...options,
+                    plugins: {
+                        ...plugins,
+                        tooltip: {
+                            ...tooltip,
+                            enabled: false,
+                            mode: 'index',
+                            position: 'nearest',
+                            external: customTooltips
+                        }
                     }
-                }
+                }));
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ChartjsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.6", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ChartjsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.0", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ChartjsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ChartjsComponent, decorators: [{
             type: Component,
-            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"] }]
-        }], ctorParameters: () => [], propDecorators: { customTooltips: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], data: [{
-                type: Input
-            }], height: [{
-                type: HostBinding,
-                args: ['style.height.px']
-            }, {
-                type: Input,
-                args: [{ transform: (value) => numberAttribute(value, undefined) }]
-            }], id: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], plugins: [{
-                type: Input
-            }], redraw: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], type: [{
-                type: Input
-            }], width: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }, {
-                type: Input,
-                args: [{ transform: (value) => numberAttribute(value, undefined) }]
-            }], wrapper: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], getDatasetAtEvent: [{
-                type: Output
-            }], getElementAtEvent: [{
-                type: Output
-            }], getElementsAtEvent: [{
-                type: Output
-            }], chartRef: [{
-                type: Output
-            }], canvasElement: [{
-                type: ViewChild,
-                args: ['canvasElement']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'c-chart', exportAs: 'cChart', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.height.px]': 'height()',
+                        '[style.width.px]': 'width()'
+                    }, 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"] }]
+        }], ctorParameters: () => [] });
 class ChartjsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: ChartjsModule, imports: [ChartjsComponent], exports: [ChartjsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ChartjsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ChartjsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: ChartjsModule, imports: [ChartjsComponent], exports: [ChartjsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ChartjsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ChartjsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ChartjsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/coreui-angular-chartjs.mjs.map CHANGED Viewed

	@@ -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":";;;;;;AA6BAA,KAAO,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC;AAElC,IAAI,MAAM,GAAG,CAAC;MAcD,gBAAgB,CAAA;AAsC3B,IAAA,IAAI,EAAE,GAAA;AACJ,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;;AA0DvB,IAAA,WAAA,GAAA;AA7FiB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAC5B,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAE9D;;;;AAIG;QACM,IAAc,CAAA,cAAA,GAAG,KAAK,CAAmB,IAAI,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAExF;;AAEG;QACM,IAAI,CAAA,IAAA,GAAG,KAAK,EAAa;AAElC;;AAEG;;AAGH;;;;AAIG;QACM,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;AAE1F;;;AAGG;AACM,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAS,CAAA,UAAA,EAAa,MAAM,EAAE,CAAA,CAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAM1E;;AAEG;QACM,IAAY,CAAA,YAAA,GAAG,KAAK,CAA2B,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAExE,QAAA,IAAA,CAAA,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC;AAElD;;AAEG;AACM,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAW,EAAE,CAAC;AAEtC;;;;AAIG;QACM,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE/D;;;AAGG;AACM,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAY,KAAK,CAAC;AAEvC;;;;AAIG;QACM,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;AAEzF;;;AAGG;QACM,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;QAEtD,IAAiB,CAAA,iBAAA,GAAG,MAAM,EAAqB;QAC/C,IAAiB,CAAA,iBAAA,GAAG,MAAM,EAAqB;QAC/C,IAAkB,CAAA,kBAAA,GAAG,MAAM,EAAqB;QAEhD,IAAQ,CAAA,QAAA,GAAG,MAAM,EAAO;AAExB,QAAA,IAAA,CAAA,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAa,eAAe,CAAC;AAK/D,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;YACnC,OAAO;AACL,gBAAA,eAAe,EAAE,IAAI,CAAC,OAAO;aAC9B;AACH,SAAC,CAAC;AA0HM,QAAA,IAAA,CAAA,eAAe,GAAG,QAAQ,CAAY,MAAK;AACjD,YAAA,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE;YAC/C,OAAO;gBACL,MAAM,EAAE,MAAM,IAAI,EAAE;gBACpB,QAAQ,EAAE,QAAQ,IAAI;aACvB;AACH,SAAC,CAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAe,MAAM,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;AAEjE,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAqB,MAAK;YACvD,IAAI,CAAC,mBAAmB,EAAE;YAC1B,OAAO;AACL,gBAAA,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE;AAC5B,gBAAA,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE;AAC5B,gBAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;AACvB,gBAAA,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;AACH,SAAC,CAAC;AAzIA,QAAA,iBAAiB,CAAC;YAChB,IAAI,EAAE,MAAK;AACT,gBAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;gBAC1C,IAAI,CAAC,GAAG,GAAG,aAAa,EAAE,aAAa,EAAE,UAAU,CAAC,IAAI,CAAC;gBACzD,IAAI,CAAC,WAAW,EAAE;;AAErB,SAAA,CAAC;;AAGJ,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE;YACnD,IAAI,CAAC,WAAW,EAAE;;;IAItB,WAAW,GAAA;QACT,IAAI,CAAC,YAAY,EAAE;;AAGd,IAAA,WAAW,CAAC,MAAkB,EAAA;AACnC,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf;;QAGF,MAAM,cAAc,GAAsB,IAAI,CAAC,KAAK,CAAC,yBAAyB,CAC5E,MAAM,EACN,SAAS,EACT,EAAE,SAAS,EAAE,IAAI,EAAE,EACnB,KAAK,CACN;AACD,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC;QAE3C,MAAM,cAAc,GAAsB,IAAI,CAAC,KAAK,CAAC,yBAAyB,CAC5E,MAAM,EACN,SAAS,EACT,EAAE,SAAS,EAAE,IAAI,EAAE,EACnB,KAAK,CACN;AACD,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC;QAE3C,MAAM,eAAe,GAAsB,IAAI,CAAC,KAAK,CAAC,yBAAyB,CAC7E,MAAM,EACN,OAAO,EACP,EAAE,SAAS,EAAE,IAAI,EAAE,EACnB,KAAK,CACN;AACD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC;;IAGxC,YAAY,GAAA;AACjB,QAAA,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGxB,WAAW,GAAA;AAChB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAC1C,QAAA,IAAI,CAAC,aAAa,EAAE,aAAa,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE;YAC5D;;AAGF,QAAA,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAAK;AACjC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE;YACjC,IAAI,MAAM,EAAE;AACV,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAIA,KAAO,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC;AAC1C,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAK;AACnB,oBAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE,OAAO,CAAC;AACvE,oBAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE;oBACrC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,iBAAC,CAAC;;AAEN,SAAC,CAAC;;IAGJ,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf;;AAGF,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;YACjB,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,WAAW,EAAE;YAClB;;AAGF,QAAA,MAAM,MAAM,GAAuB,IAAI,CAAC,WAAW,EAAE;AAErD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;AAClB,YAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;;QAG/D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE;AAC3B,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE;YAC3C,IAAI,CAAC,yBAAyB,EAAE;;AAGlC,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;AACpE,YAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;AACpE,YAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC;;QAGpD,IAAI,CAAC,yBAAyB,EAAE;;IAG1B,yBAAyB,GAAA;QAC/B,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAAK;AACjC,gBAAA,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;AACpB,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAK;AACnB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE;AACvC,iBAAC,CAAC;AACJ,aAAC,CAAC;AACJ,SAAC,CAAC;;IAGG,kBAAkB,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE;;IAuB5B,mBAAmB,GAAA;AACzB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9B,YAAA,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO;AAChC,YAAA,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,EAAE,OAAO;YACzC,SAAS,CAAC,MAAK;AACb,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CACd,KAAK,CAAC;AACJ,oBAAA,GAAG,OAAO;AACV,oBAAA,OAAO,EAAE;AACP,wBAAA,GAAG,OAAO;AACV,wBAAA,OAAO,EAAE;AACP,4BAAA,GAAG,OAAO;AACV,4BAAA,OAAO,EAAE,KAAK;AACd,4BAAA,IAAI,EAAE,OAAO;AACb,4BAAA,QAAQ,EAAE,SAAS;AACnB,4BAAA,QAAQ,EAAEC;AACX;AACF;AACF,iBAAA,CAAC,CACH;AACH,aAAC,CAAC;;;8GAlQK,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,+uDC7C7B,6RAYA,EAAA,MAAA,EAAA,CAAA,sCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDiCa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAZ5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,YAGT,QAAQ,EAAA,eAAA,EACD,uBAAuB,CAAC,MAAM,EACzC,IAAA,EAAA;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,mBAAmB,EAAE,UAAU;AAC/B,wBAAA,kBAAkB,EAAE;AACrB,qBAAA,EAAA,QAAA,EAAA,6RAAA,EAAA,MAAA,EAAA,CAAA,sCAAA,CAAA,EAAA;;;MEhCU,aAAa,CAAA;8GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAb,aAAa,EAAA,OAAA,EAAA,CANtB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAGhB,gBAAgB,CAAA,EAAA,CAAA,CAAA;+GAGP,aAAa,EAAA,CAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP;AACD;AACF,iBAAA;;;ACVD;;AAEG;;ACFH;;AAEG;;;;"}

package/lib/chartjs.component.d.ts CHANGED Viewed

@@ -1,77 +1,80 @@
-import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import type { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js';
+import { ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import type { ChartConfiguration, ChartData, InteractionItem, Plugin } from 'chart.js';
 import { Chart as ChartJS } from 'chart.js';
+import { BooleanInput } from './chartjs.interface';
 import * as i0 from "@angular/core";
-export declare class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
+export declare class ChartjsComponent implements OnDestroy, OnChanges {
+    static ngAcceptInputType_redraw: BooleanInput;
     private readonly ngZone;
     private readonly renderer;
     private readonly changeDetectorRef;
     /**
      * Enables custom html based tooltips instead of standard tooltips.
-     * @type boolean
+     * @return boolean
      * @default true
      */
-    customTooltips: boolean;
+    readonly customTooltips: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * The data object that is passed into the Chart.js chart (more info).
      */
-    data?: ChartData;
+    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>;
     /**
      * A fallback when the canvas cannot be rendered. Can be used for accessible chart descriptions.
      */
     /**
      * Height attribute applied to the rendered canvas.
-     * @type number | undefined
-     * @default 150
+     * @return number | undefined
+     * @default null
      */
-    height?: number;
+    readonly height: import("@angular/core").InputSignalWithTransform<number | null, unknown>;
     /**
      * ID attribute applied to the rendered canvas.
-     * @type string
+     * @return string
      */
-    id: string;
+    readonly idInput: import("@angular/core").InputSignal<string>;
+    get id(): string;
     /**
      * The options object that is passed into the Chart.js chart.
      */
-    options?: ChartOptions;
+    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>;
+    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>;
     /**
      * The plugins array that is passed into the Chart.js chart
      */
-    plugins: Plugin[];
+    readonly plugins: import("@angular/core").InputSignal<Plugin<keyof import("chart.js").ChartTypeRegistry, import("node_modules/chart.js/dist/types/basic").AnyObject>[]>;
     /**
      * If true, will tear down and redraw chart on all updates.
-     * @type boolean
+     * @return boolean
      * @default false
      */
-    redraw: boolean;
+    readonly redraw: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * Chart.js chart type.
-     * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
+     * @return {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
      */
-    type: ChartType;
+    readonly type: import("@angular/core").InputSignal<keyof import("chart.js").ChartTypeRegistry>;
     /**
      * Width attribute applied to the rendered canvas.
-     * @type number | undefined
-     * @default 300
+     * @return number | undefined
+     * @default null
      */
-    width?: number;
+    readonly width: import("@angular/core").InputSignalWithTransform<number | null, unknown>;
     /**
      * Put the chart into the wrapper div element.
      * @default true
      */
-    wrapper: boolean;
-    readonly getDatasetAtEvent: EventEmitter<any>;
-    readonly getElementAtEvent: EventEmitter<any>;
-    readonly getElementsAtEvent: EventEmitter<any>;
-    readonly chartRef: EventEmitter<any>;
-    canvasElement: ElementRef;
+    readonly wrapper: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly getDatasetAtEvent: import("@angular/core").OutputEmitterRef<InteractionItem[]>;
+    readonly getElementAtEvent: import("@angular/core").OutputEmitterRef<InteractionItem[]>;
+    readonly getElementsAtEvent: import("@angular/core").OutputEmitterRef<InteractionItem[]>;
+    readonly chartRef: import("@angular/core").OutputEmitterRef<any>;
+    readonly canvasElement: import("@angular/core").Signal<ElementRef<any>>;
     chart: ChartJS;
     ctx: CanvasRenderingContext2D;
-    get hostClasses(): {
+    readonly hostClasses: import("@angular/core").Signal<{
         'chart-wrapper': boolean;
-    };
+    }>;
     constructor();
-    ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     handleClick($event: MouseEvent): void;
@@ -81,14 +84,9 @@ export declare class ChartjsComponent implements AfterViewInit, OnDestroy, OnCha
     private chartUpdateOutsideAngular;
     chartToBase64Image(): string | undefined;
     private chartDataConfig;
-    private chartOptions;
-    private chartConfig;
+    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>>>;
+    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>>;
     private chartCustomTooltips;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartjsComponent, never>;
-    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>;
-    static ngAcceptInputType_customTooltips: unknown;
-    static ngAcceptInputType_height: string | number;
-    static ngAcceptInputType_redraw: unknown;
-    static ngAcceptInputType_width: string | number;
-    static ngAcceptInputType_wrapper: unknown;
+    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>;
 }

package/lib/chartjs.interface.d.ts ADDED Viewed

@@ -0,0 +1,71 @@
+import { ChartType } from 'chart.js/auto';
+import { EventEmitter } from '@angular/core';
+import { ChartConfiguration, DefaultDataPoint } from 'chart.js';
+export declare type BooleanInput = string | boolean | null | undefined;
+export interface IChartjs<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
+    /**
+     * Enables custom html based tooltips instead of standard tooltips.
+     * @default true
+     */
+    customTooltips?: boolean;
+    /**
+     * The data object that is passed into the Chart.js chart (more info).
+     */
+    data?: ChartConfiguration<TType, TData, TLabel>['data'];
+    /**
+     * Height attribute applied to the rendered canvas.
+     *
+     * @default undefined
+     */
+    height?: number;
+    /**
+     * Html id attribute applied to the rendered canvas.
+     */
+    id?: string;
+    /**
+     * The options object that is passed into the Chart.js chart.
+     * {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
+     */
+    options?: ChartConfiguration<TType, TData, TLabel>['options'];
+    /**
+     * The plugins array that is passed into the Chart.js chart (more info)
+     * {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
+     */
+    plugins?: ChartConfiguration<TType, TData, TLabel>['plugins'];
+    /**
+     * If true, will tear down and redraw chart on all updates.
+     * @default false
+     */
+    redraw?: boolean;
+    /**
+     * Chart.js chart type.
+     * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
+     */
+    type: ChartConfiguration<TType, TData, TLabel>['type'];
+    /**
+     * Width attribute applied to the rendered canvas.
+     * @default 300
+     */
+    width?: number;
+    /**
+     * Put the chart into the wrapper div element.
+     * @default true
+     */
+    wrapper?: boolean;
+    /**
+     * Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
+     */
+    getDatasetAtEvent: EventEmitter<any>;
+    /**
+     * Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
+     */
+    getElementAtEvent: EventEmitter<any>;
+    /**
+     * Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
+     */
+    getElementsAtEvent: EventEmitter<any>;
+    /**
+     * Emits the chart reference
+     */
+    chartRef: EventEmitter<any>;
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular-chartjs",
-  "version": "5.4.0",
+  "version": "5.4.3",
   "description": "Angular wrapper component for Chart.js",
   "copyright": "Copyright 2025 creativeLabs Łukasz Holeczek",
   "license": "MIT",
@@ -25,9 +25,9 @@
     "url": "https://github.com/coreui/coreui-angular/issues"
   },
   "peerDependencies": {
-    "@angular/core": "^19.1.0",
+    "@angular/core": "^19.2.0",
     "@coreui/chartjs": "~4.1.0",
-    "chart.js": "^4.4.7"
+    "chart.js": "^4.4.8"
   },
   "dependencies": {
     "lodash-es": "^4.17.21",