feat(lib): improve chart type safety

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -38,8 +38,11 @@ import {
   BarElement,
   CategoryScale,
   Chart,
+  type ChartData,
+  type ChartDataset,
   LinearScale,
-  Tooltip
+  Tooltip,
+  type TooltipOptions
 } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import Color from 'color';
@@ -320,7 +323,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
                     return label;
                   }
                 }
-              }
+              } as TooltipOptions<'bar'>
             },
             responsive: true,
             scales: {
@@ -353,7 +356,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
     this.isLoading = false;
   }
 
-  private getChartData() {
+  private getChartData(): ChartData<'bar'> {
     const currentYear = new Date().getFullYear();
     const labels: number[] = [];
 
@@ -380,29 +383,29 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
       labels.push(year);
     }
 
-    const datasetDeposit = {
+    const datasetDeposit: ChartDataset<'bar'> = {
       backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
-      data: [] as number[],
+      data: [],
       label: $localize`Deposit`
     };
 
-    const datasetInterest = {
+    const datasetInterest: ChartDataset<'bar'> = {
       backgroundColor: Color(
         `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`
       )
         .lighten(0.5)
         .hex(),
-      data: [] as number[],
+      data: [],
       label: $localize`Interest`
     };
 
-    const datasetSavings = {
+    const datasetSavings: ChartDataset<'bar'> = {
       backgroundColor: Color(
         `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`
       )
         .lighten(0.25)
         .hex(),
-      data: [] as number[],
+      data: [],
       label: $localize`Savings`
     };
 

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -29,8 +29,10 @@ import {
   type ChartDataset,
   DoughnutController,
   LinearScale,
+  type Plugin,
   Tooltip,
-  type TooltipItem
+  type TooltipItem,
+  type TooltipOptions
 } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { isUUID } from 'class-validator';
@@ -408,7 +410,7 @@ export class GfPortfolioProportionChartComponent
               tooltip: this.getTooltipPluginConfiguration(data)
             }
           },
-          plugins: [ChartDataLabels],
+          plugins: [ChartDataLabels as Plugin<'doughnut'>],
           type: 'doughnut'
         });
       }
@@ -434,13 +436,16 @@ export class GfPortfolioProportionChartComponent
     ];
   }
 
-  private getTooltipPluginConfiguration(data: ChartData<'doughnut'>) {
+  private getTooltipPluginConfiguration(
+    data: ChartData<'doughnut'>
+  ): Partial<TooltipOptions<'doughnut'>> {
     return {
       ...getTooltipOptions({
         colorScheme: this.colorScheme,
         currency: this.baseCurrency,
         locale: this.locale
       }),
+      // @ts-ignore
       callbacks: {
         label: (context: TooltipItem<'doughnut'>) => {
           const labelIndex =