From 937d37d89697babf0dc0c2781060ae8976e46508 Mon Sep 17 00:00:00 2001
From: Batwam <56710655+Batwam@users.noreply.github.com>
Date: Wed, 24 Sep 2025 10:53:21 +0800
Subject: [PATCH 1/4] Basic Interactive Overview Graph

---
 .../home-overview/home-overview.component.ts  | 25 +++++++++++++------
 .../home-overview/home-overview.html          |  1 +
 .../portfolio-performance.component.html      | 17 ++++++++++---
 .../portfolio-performance.component.ts        |  7 ++++++
 4 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts
index 6c9694a19..bd0370d67 100644
--- a/apps/client/src/app/components/home-overview/home-overview.component.ts
+++ b/apps/client/src/app/components/home-overview/home-overview.component.ts
@@ -61,6 +61,7 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
   public showDetails = false;
   public unit: string;
   public user: User;
+  private choice: string = 'netPerformanceInPercentageWithCurrencyEffect';
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -131,14 +132,17 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
         this.errors = errors;
         this.performance = performance;
 
-        this.historicalDataItems = chart.map(
-          ({ date, netPerformanceInPercentageWithCurrencyEffect }) => {
-            return {
-              date,
-              value: netPerformanceInPercentageWithCurrencyEffect * 100
-            };
-          }
-        );
+        const multiplier =
+          this.choice === 'netPerformanceInPercentageWithCurrencyEffect'
+            ? 100
+            : 1;
+
+        this.historicalDataItems = chart.map((item) => {
+          return {
+            date: item.date,
+            value: item[this.choice] * multiplier
+          };
+        });
 
         if (
           this.deviceType === 'mobile' &&
@@ -155,4 +159,9 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
 
     this.changeDetectorRef.markForCheck();
   }
+
+  public onMetricClick(selectedChoice: string): void {
+    this.choice = selectedChoice; // update metric choice
+    this.update(); // rebuild historicalDataItems
+  }
 }
diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html
index b36302ded..f0d294a83 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -99,6 +99,7 @@
           [precision]="precision"
           [showDetails]="showDetails"
           [unit]="unit"
+          (metricClick)="onMetricClick($event)"
         />
       </div>
     </div>
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
index a2c5c17eb..6affc4a29 100644
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
@@ -30,7 +30,12 @@
         'text-success': isAllTimeHigh
       }"
     >
-      <span #value id="value"></span>
+      @if (!showDetails) {
+        <span #value id="value"></span>
+      }
+      @if (showDetails) {
+        <span #value id="value" (click)="onMetricClick('value')"></span>
+      }
     </div>
     <div class="currency-container flex-grow-1 px-1">
       {{ unit }}
@@ -38,7 +43,10 @@
   </div>
   @if (showDetails) {
     <div class="row">
-      <div class="d-flex col justify-content-end">
+      <div
+        class="d-flex col justify-content-end"
+        (click)="onMetricClick('netPerformanceWithCurrencyEffect')"
+      >
         <gf-value
           [colorizeSign]="true"
           [isCurrency]="true"
@@ -50,7 +58,10 @@
           "
         />
       </div>
-      <div class="col">
+      <div
+        class="col"
+        (click)="onMetricClick('netPerformanceInPercentageWithCurrencyEffect')"
+      >
         <gf-value
           [colorizeSign]="true"
           [isPercent]="true"
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts
index c98a26831..0ea716d2e 100644
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts
@@ -17,6 +17,8 @@ import {
   ElementRef,
   Input,
   OnChanges,
+  Output,
+  EventEmitter,
   ViewChild
 } from '@angular/core';
 import { IonIcon } from '@ionic/angular/standalone';
@@ -44,6 +46,7 @@ export class GfPortfolioPerformanceComponent implements OnChanges {
   @Input() precision: number;
   @Input() showDetails: boolean;
   @Input() unit: string;
+  @Output() metricClick = new EventEmitter<string>();
 
   @ViewChild('value') value: ElementRef;
 
@@ -95,4 +98,8 @@ export class GfPortfolioPerformanceComponent implements OnChanges {
       title: $localize`Market data is delayed for`
     });
   }
+
+  public onMetricClick(selectedChoice: string): void {
+    this.metricClick.emit(selectedChoice); // notify parent
+  }
 }

From c4603140da45163c088296d122d3813c9dd37675 Mon Sep 17 00:00:00 2001
From: Batwam <56710655+Batwam@users.noreply.github.com>
Date: Wed, 24 Sep 2025 12:21:02 +0800
Subject: [PATCH 2/4] update unit in graph caption

---
 .../home-overview/home-overview.component.ts    | 17 +++++++++++------
 .../components/home-overview/home-overview.html |  2 +-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts
index bd0370d67..7d9dee4d9 100644
--- a/apps/client/src/app/components/home-overview/home-overview.component.ts
+++ b/apps/client/src/app/components/home-overview/home-overview.component.ts
@@ -61,7 +61,8 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
   public showDetails = false;
   public unit: string;
   public user: User;
-  private choice: string = 'netPerformanceInPercentageWithCurrencyEffect';
+  private graph_type: string = 'netPerformanceInPercentageWithCurrencyEffect';
+  public graph_unit: string;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -132,15 +133,19 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
         this.errors = errors;
         this.performance = performance;
 
-        const multiplier =
-          this.choice === 'netPerformanceInPercentageWithCurrencyEffect'
+        const graph_multiplier =
+          this.graph_type === 'netPerformanceInPercentageWithCurrencyEffect'
             ? 100
             : 1;
+        this.graph_unit =
+          this.graph_type === 'netPerformanceInPercentageWithCurrencyEffect'
+            ? '%'
+            : this.unit;
 
         this.historicalDataItems = chart.map((item) => {
           return {
             date: item.date,
-            value: item[this.choice] * multiplier
+            value: item[this.graph_type] * graph_multiplier
           };
         });
 
@@ -160,8 +165,8 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
     this.changeDetectorRef.markForCheck();
   }
 
-  public onMetricClick(selectedChoice: string): void {
-    this.choice = selectedChoice; // update metric choice
+  public onMetricClick(selectedgraph_type: string): void {
+    this.graph_type = selectedgraph_type; // update metric graph_type
     this.update(); // rebuild historicalDataItems
   }
 }
diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html
index f0d294a83..46703d9b1 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -69,7 +69,6 @@
         <div class="chart-container mx-auto position-relative">
           <gf-line-chart
             class="position-absolute"
-            unit="%"
             [colorScheme]="user?.settings?.colorScheme"
             [hidden]="historicalDataItems?.length === 0"
             [historicalDataItems]="historicalDataItems"
@@ -81,6 +80,7 @@
             [showLoader]="false"
             [showXAxis]="false"
             [showYAxis]="false"
+            [unit]="graph_unit"
           />
         </div>
       </div>

From 2bef2011ce917053262ab6f2e675e72385f336fa Mon Sep 17 00:00:00 2001
From: Batwam <56710655+Batwam@users.noreply.github.com>
Date: Wed, 24 Sep 2025 12:54:24 +0800
Subject: [PATCH 3/4] update only on graph change

---
 .../app/components/home-overview/home-overview.component.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts
index 7d9dee4d9..fe1474171 100644
--- a/apps/client/src/app/components/home-overview/home-overview.component.ts
+++ b/apps/client/src/app/components/home-overview/home-overview.component.ts
@@ -166,7 +166,9 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
   }
 
   public onMetricClick(selectedgraph_type: string): void {
-    this.graph_type = selectedgraph_type; // update metric graph_type
-    this.update(); // rebuild historicalDataItems
+    if (this.graph_type !== selectedgraph_type) {
+      this.graph_type = selectedgraph_type;
+      this.update();
+    }
   }
 }

From a043f3afc5145899083d1fb3cd5463902f0237b2 Mon Sep 17 00:00:00 2001
From: Batwam <56710655+Batwam@users.noreply.github.com>
Date: Thu, 25 Sep 2025 21:22:09 +0800
Subject: [PATCH 4/4] make  selection persistent

---
 .../components/home-overview/home-overview.component.ts   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts
index fe1474171..4f4d0a412 100644
--- a/apps/client/src/app/components/home-overview/home-overview.component.ts
+++ b/apps/client/src/app/components/home-overview/home-overview.component.ts
@@ -61,7 +61,7 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
   public showDetails = false;
   public unit: string;
   public user: User;
-  private graph_type: string = 'netPerformanceInPercentageWithCurrencyEffect';
+  private graph_type: string;
   public graph_unit: string;
 
   private unsubscribeSubject = new Subject<void>();
@@ -99,6 +99,11 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
 
     this.unit = this.showDetails ? this.user.settings.baseCurrency : '%';
 
+    this.graph_type = !this.showDetails
+      ? 'netPerformanceInPercentageWithCurrencyEffect'
+      : (localStorage.getItem('home_overview_graph_type') ??
+        'netPerformanceInPercentageWithCurrencyEffect');
+
     this.impersonationStorageService
       .onChangeHasImpersonation()
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -168,6 +173,7 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
   public onMetricClick(selectedgraph_type: string): void {
     if (this.graph_type !== selectedgraph_type) {
       this.graph_type = selectedgraph_type;
+      localStorage.setItem('home_overview_graph_type', this.graph_type);
       this.update();
     }
   }