refactor(chartjs): update to ChartJS 4.x, types cleanup, use afterRender for SSR

Author: xidedix

projects/coreui-angular-chartjs/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 creativeLabs Łukasz Holeczek
+Copyright (c) 2024 creativeLabs Łukasz Holeczek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

projects/coreui-angular-chartjs/README.md

@@ -39,7 +39,7 @@
 
 ```bash
 npm install chart.js
-npm install @coreui/chartjs@3
+npm install @coreui/chartjs@4
 npm install @coreui/angular-chartjs
 ````
 
@@ -171,4 +171,4 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back
 
 ## Copyright and license
 
-Copyright 2023 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-angular/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-angular/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).

projects/coreui-angular-chartjs/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@coreui/angular-chartjs",
-  "version": "4.7.16",
+  "version": "5.0.0-next.23",
   "description": "Angular wrapper component for Chart.js",
-  "copyright": "Copyright 2023 creativeLabs Łukasz Holeczek",
+  "copyright": "Copyright 2024 creativeLabs Łukasz Holeczek",
   "license": "MIT",
   "homepage": "https://coreui.io/angular",
   "author": {
@@ -28,8 +28,8 @@
     "@angular/cdk": "^17.0.0",
     "@angular/common": "^17.0.0",
     "@angular/core": "^17.0.0",
-    "@coreui/chartjs": "^3.0.0",
-    "chart.js": "^3.9.1"
+    "@coreui/chartjs": "^4.0.0-0 || ^4.0.0",
+    "chart.js": "^4.4.1"
   },
   "dependencies": {
     "lodash-es": "^4.17.21",

projects/coreui-angular-chartjs/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

projects/coreui-angular-chartjs/src/lib/chartjs.component.html

@@ -7,5 +7,6 @@
   role="img"
   style="display: none;"
 >
-  <ng-content></ng-content>
+  <ng-content />
+  <!--  <ng-container *ngTemplateOutlet="fallbackContent"/>-->
 </canvas>

projects/coreui-angular-chartjs/src/lib/chartjs.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
 import { ChartjsComponent } from './chartjs.component';
-import { Chart, ChartData, registerables } from 'chart.js';
+import { Chart, registerables } from 'chart.js';
 
 describe('ChartjsComponent', () => {
   let component: ChartjsComponent;
@@ -16,7 +16,7 @@ describe('ChartjsComponent', () => {
 
   const labels = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 
-  const data: ChartData = {
+  const data = {
     labels: labels,
     datasets: [{
       data: [65, 59, 84, 84, 51, 55, 40],

projects/coreui-angular-chartjs/src/lib/chartjs.component.ts

@@ -22,16 +22,8 @@ import {
 
 import merge from 'lodash-es/merge';
 
-import {
-  Chart as ChartJS,
-  ChartConfiguration,
-  ChartData,
-  ChartOptions,
-  ChartType,
-  InteractionItem,
-  Plugin,
-  registerables
-} from 'chart.js';
+import type { ChartConfiguration, ChartData, ChartOptions, ChartType, InteractionItem, Plugin } from 'chart.js';
+import { Chart as ChartJS, registerables } from 'chart.js';
 import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';
 
 ChartJS.register(...registerables);
@@ -62,6 +54,11 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
    */
   @Input() data?: ChartData;
 
+  /**
+   * 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.
    * @type number | undefined