Upgrade Chart.js to version 3.9.1 (#2548)

* Upgrade chart.js to v. 3.9.1

* Add type guard before accessing config.type

* Create helper type guard function

* Apply the type guard function where needed

* Bump charts.js version in nested package.json

* Remove skipLibCheck from tsconfig

libs/designsystem/package.json

@@ -5,7 +5,7 @@
     "@fontsource/roboto": "4.2.1",
     "@ionic/angular": "6.2.1",
     "@kirbydesign/core": "0.0.35",
-    "chart.js": "3.3.2",
+    "chart.js": "3.9.1",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",
     "chartjs-plugin-datalabels": "^2.0.0",

libs/designsystem/src/lib/components/charts/shared/chart-js-service/chart-js.service.integration.spec.ts

@@ -2,6 +2,7 @@ import { ElementRef } from '@angular/core';
 import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
 import { Chart, FontSpec } from 'chart.js';
 
+import { chartConfigHasType } from '../../../../helpers';
 import { ChartConfigService } from '../';
 import { ColorHelper } from '../../../../helpers';
 
@@ -39,7 +40,9 @@ describe('ChartJSService with ChartConfigService', () => {
         /* Our 'column' chart is a chart.js 'bar' type chart 
         with it's indexAxis set to y; therefore testing if 
         bar is being used. */
-        expect(chart.config.type).toBe('bar');
+        if (chartConfigHasType(chart.config)) {
+          expect(chart.config.type).toBe('bar');
+        }
       });
 
       describe('and no custom options are passed', () => {
@@ -118,7 +121,9 @@ describe('ChartJSService with ChartConfigService', () => {
         });
         const chart = chartJSService['chart'];
 
-        expect(chart.config.type).toBe('line');
+        if (chartConfigHasType(chart.config)) {
+          expect(chart.config.type).toBe('line');
+        }
       });
 
       describe('and no custom options are passed', () => {
@@ -197,7 +202,9 @@ describe('ChartJSService with ChartConfigService', () => {
         });
         const chart = chartJSService['chart'];
 
-        expect(chart.config.type).toBe('bar');
+        if (chartConfigHasType(chart.config)) {
+          expect(chart.config.type).toBe('bar');
+        }
       });
 
       describe('and no custom options are passed', () => {

libs/designsystem/src/lib/components/charts/shared/chart-js-service/chart-js.service.spec.ts

@@ -4,6 +4,7 @@ import { Chart, ChartType as ChartJSType, ChartOptions } from 'chart.js';
 import { AnnotationOptions } from 'chartjs-plugin-annotation';
 import { MockProvider } from 'ng-mocks';
 
+import { chartConfigHasType } from '../../../../helpers';
 import { ChartConfigService } from '../';
 import { ChartDataset, ChartHighlightedElements, ChartType } from '../../';
 import { deepCopy } from '../../../../helpers/deep-copy';
@@ -515,14 +516,16 @@ describe('ChartJSService', () => {
     });
 
     it('should set a new type', () => {
-      const oldType = chart.config.type;
-      const newType = 'line';
-      expect(oldType).not.toBe(newType);
+      if (chartConfigHasType(chart.config)) {
+        const oldType = chart.config.type;
+        const newType = 'line';
+        expect(oldType).not.toBe(newType);
 
-      chartJSService['nonDestructivelyUpdateType']('line');
+        chartJSService['nonDestructivelyUpdateType']('line');
 
-      expect(chart.config.type).not.toBe(oldType);
-      expect(newType).toBe('line');
+        expect(chart.config.type).not.toBe(oldType);
+        expect(newType).toBe('line');
+      }
     });
 
     it('should apply config from new type', () => {

libs/designsystem/src/lib/components/charts/shared/chart-js-service/chart-js.service.ts

@@ -3,6 +3,7 @@ import { ChartConfiguration, ChartOptions } from 'chart.js';
 import { AnnotationOptions } from 'chartjs-plugin-annotation';
 
 import { mergeDeepAll } from '../../../../helpers/merge-deep';
+import { chartConfigHasType } from '../../../../helpers';
 import { ChartConfigService } from '../chart-config-service';
 import {
   ChartDataset,
@@ -116,7 +117,7 @@ export class ChartJSService {
       ? this.annotationsDelegate.createAnnotationPluginOptionsObject(annotations)
       : {};
 
-    let mergedOptions: ChartOptions = mergeDeepAll(
+    const mergedOptions: ChartOptions = mergeDeepAll(
       typeConfigOptions,
       customOptions,
       annotationPluginOptions
@@ -157,7 +158,7 @@ export class ChartJSService {
   }
 
   protected createDatasets(data: ChartDataset[] | number[]): ChartDataset[] {
-    let datasets = isNumberArray(data) ? [{ data }] : data;
+    const datasets = isNumberArray(data) ? [{ data }] : data;
 
     if (this.highlightedElements)
       this.addHighlightedElementsToDatasets(this.highlightedElements, datasets);
@@ -188,7 +189,10 @@ export class ChartJSService {
     });
 
     this.chart.options = options;
-    this.chart.config.type = this.chartConfigService.chartTypeToChartJSType(chartType);
+
+    if (chartConfigHasType(this.chart.config)) {
+      this.chart.config.type = this.chartConfigService.chartTypeToChartJSType(chartType);
+    }
   }
 
   private initializeNewChart(canvasElement: HTMLCanvasElement, config: ChartConfiguration) {

libs/designsystem/src/lib/components/charts/stock-chart/stock-chart-js.service.integration.spec.ts

@@ -2,6 +2,7 @@ import { ElementRef } from '@angular/core';
 import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
 import { Chart } from 'chart.js';
 
+import { chartConfigHasType } from '../../../helpers';
 import { ChartConfigService } from '../shared';
 
 import { StockChartJSService } from './stock-chart-js.service';
@@ -49,7 +50,9 @@ describe('StockChartJSService with ChartConfigService', () => {
     });
 
     it('should use correct ChartJS type', () => {
-      expect(chart.config.type).toBe('line');
+      if (chartConfigHasType(chart.config)) {
+        expect(chart.config.type).toBe('line');
+      }
     });
 
     it('should have correct tension', () => {

libs/designsystem/src/lib/helpers/chart-config-has-type.ts

@@ -0,0 +1,14 @@
+import { ChartConfiguration, ChartConfigurationCustomTypesPerDataset } from 'chart.js';
+
+/* 
+  Type guard is needed as of chart.js@3.8.1. The config type has been updated to a union type, 
+  and the newly added type 'ChartConfigurationCustomTypesPerDataset' does not contain the 'type' property.
+  Typescript will throw an error, when trying to access a property that doesn't exist on all union types,
+  unless a type guard is used. 
+*/
+
+export const chartConfigHasType = (
+  config: ChartConfiguration | ChartConfigurationCustomTypesPerDataset
+): config is ChartConfiguration => {
+  return 'type' in config;
+};

libs/designsystem/src/lib/helpers/index.ts

@@ -6,3 +6,4 @@ export * from './design-token-helper';
 export * from './string-helper';
 export * from './theme-color.type';
 export * from './platform.service';
+export * from './chart-config-has-type';

package.json

@@ -103,7 +103,7 @@
     "@ionic/angular": "6.2.1",
     "@nrwl/angular": "14.1.7",
     "@types/prismjs": "1.9.0",
-    "chart.js": "3.3.2",
+    "chart.js": "3.9.1",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",
     "chartjs-plugin-datalabels": "^2.0.0",

tsconfig.base.json

@@ -10,7 +10,6 @@
     "experimentalDecorators": true,
     "target": "es2017",
     "typeRoots": ["node_modules/@types"],
-    "skipLibCheck": true,
     "lib": ["es2017", "dom"],
     "baseUrl": ".",
     "resolveJsonModule": true