From a70e206d4efc741b58c44d02211e06122f05034b Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sun, 1 Feb 2026 14:26:09 +0700
Subject: [PATCH] feat(lib): improve chart type safety

---
 .../fire-calculator.component.ts              | 21 +++++++++++--------
 .../portfolio-proportion-chart.component.ts   | 11 +++++++---
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
index 75e9af86d..a6057f124 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
+++ b/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`
     };
 
diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
index b3318acb9..080847c2f 100644
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/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 =