Merge 5057b1defe into 766dc5f2ea

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -60,6 +60,8 @@ export class GfHomeOverviewComponent implements OnInit {
   public showDetails = false;
   public unit: string;
   public user: User;
+  private graph_type: string;
+  public graph_unit: string;
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
@@ -95,6 +97,11 @@ export class GfHomeOverviewComponent implements 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(takeUntilDestroyed(this.destroyRef))
@@ -124,14 +131,21 @@ export class GfHomeOverviewComponent implements OnInit {
         this.errors = errors;
         this.performance = performance;
 
-        this.historicalDataItems = chart.map(
-          ({ date, netPerformanceInPercentageWithCurrencyEffect }) => {
-            return {
-              date,
-              value: netPerformanceInPercentageWithCurrencyEffect * 100
-            };
-          }
-        );
+        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.graph_type] * graph_multiplier
+          };
+        });
 
         if (
           this.deviceType === 'mobile' &&
@@ -148,4 +162,12 @@ export class GfHomeOverviewComponent implements OnInit {
 
     this.changeDetectorRef.markForCheck();
   }
+
+  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();
+    }
+  }
 }

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>
@@ -99,6 +99,7 @@
           [precision]="precision"
           [showDetails]="showDetails"
           [unit]="unit"
+          (metricClick)="onMetricClick($event)"
         />
       </div>
     </div>

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"

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
+  }
 }