Basic Interactive Overview Graph

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

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>

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