From 89edf41f425e4095fbc5f046ed97490bdfabacab Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sun, 31 May 2026 14:21:48 +0700
Subject: [PATCH] feat(client): convert mode to signal

---
 .../portfolio/analysis/analysis-page.component.ts | 15 ++++++++-------
 .../pages/portfolio/analysis/analysis-page.html   |  8 ++++----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
index f16cb9325..6c49a9030 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
@@ -31,6 +31,7 @@ import {
   DestroyRef,
   inject,
   OnInit,
+  signal,
   viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -86,7 +87,7 @@ export class GfAnalysisPageComponent implements OnInit {
   protected isLoadingInvestmentChart: boolean;
   protected isLoadingInvestmentTimelineChart: boolean;
   protected isLoadingPortfolioPrompt: boolean;
-  protected mode: GroupBy = 'month';
+  protected readonly mode = signal<GroupBy>('month');
   protected readonly modeOptions: ToggleOption[] = [
     { label: $localize`Monthly`, value: 'month' },
     { label: $localize`Yearly`, value: 'year' }
@@ -136,7 +137,7 @@ export class GfAnalysisPageComponent implements OnInit {
       return undefined;
     }
 
-    return this.mode === 'year'
+    return this.mode() === 'year'
       ? savingsRatePerMonth * 12
       : savingsRatePerMonth;
   }
@@ -186,7 +187,7 @@ export class GfAnalysisPageComponent implements OnInit {
   }
 
   protected onChangeGroupBy(aMode: GroupBy) {
-    this.mode = aMode;
+    this.mode.set(aMode);
     this.fetchDividendsAndInvestments();
   }
 
@@ -238,7 +239,7 @@ export class GfAnalysisPageComponent implements OnInit {
     this.dataService
       .fetchDividends({
         filters: this.userService.getFilters(),
-        groupBy: this.mode,
+        groupBy: this.mode(),
         range: this.user?.settings?.dateRange ?? DEFAULT_DATE_RANGE
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -253,7 +254,7 @@ export class GfAnalysisPageComponent implements OnInit {
     this.dataService
       .fetchInvestments({
         filters: this.userService.getFilters(),
-        groupBy: this.mode,
+        groupBy: this.mode(),
         range: this.user?.settings?.dateRange ?? DEFAULT_DATE_RANGE
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -261,7 +262,7 @@ export class GfAnalysisPageComponent implements OnInit {
         this.investmentsByGroup = investments;
         this.streaks = streaks;
         this.unitCurrentStreak =
-          this.mode === 'year'
+          this.mode() === 'year'
             ? this.streaks?.currentStreak === 1
               ? translate('YEAR')
               : translate('YEARS')
@@ -269,7 +270,7 @@ export class GfAnalysisPageComponent implements OnInit {
               ? translate('MONTH')
               : translate('MONTHS');
         this.unitLongestStreak =
-          this.mode === 'year'
+          this.mode() === 'year'
             ? this.streaks?.longestStreak === 1
               ? translate('YEAR')
               : translate('YEARS')
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index b93be9182..ec90fccec 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -442,7 +442,7 @@
         </div>
         <gf-toggle
           class="d-none d-lg-block"
-          [defaultValue]="mode"
+          [defaultValue]="mode()"
           [isLoading]="false"
           [options]="modeOptions"
           (valueChange)="onChangeGroupBy($event.value)"
@@ -476,7 +476,7 @@
           [benchmarkDataItems]="investmentsByGroup"
           [benchmarkDataLabel]="investmentTimelineDataLabel"
           [currency]="user?.settings?.baseCurrency"
-          [groupBy]="mode"
+          [groupBy]="mode()"
           [isInPercentage]="
             hasImpersonationId || user.settings.isRestrictedView
           "
@@ -501,7 +501,7 @@
         </div>
         <gf-toggle
           class="d-none d-lg-block"
-          [defaultValue]="mode"
+          [defaultValue]="mode()"
           [isLoading]="false"
           [options]="modeOptions"
           (valueChange)="onChangeGroupBy($event.value)"
@@ -513,7 +513,7 @@
           [benchmarkDataItems]="dividendsByGroup"
           [benchmarkDataLabel]="dividendTimelineDataLabel"
           [currency]="user?.settings?.baseCurrency"
-          [groupBy]="mode"
+          [groupBy]="mode()"
           [isInPercentage]="
             hasImpersonationId || user.settings.isRestrictedView
           "