Update summary page

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -115,11 +115,13 @@
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 text-truncate ml-3">
       <ng-container i18n>Net Performance</ng-container>
-      <abbr
-        class="initialism ml-2 text-muted"
-        title="Return on Average Investment"
-        >(ROAI)</abbr
-      >
+      <ng-container *ngIf="this.calculationType">
+        <abbr
+          class="initialism ml-2 text-muted"
+          title="{{ this.calculationType.title }}"
+          >({{ this.calculationType.value }})</abbr
+        >
+      </ng-container>
     </div>
     <div class="flex-column flex-wrap justify-content-end">
       <gf-value

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -1,6 +1,7 @@
 import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { getDateFnsLocale, getLocale } from '@ghostfolio/common/helper';
 import { PortfolioSummary, User } from '@ghostfolio/common/interfaces';
+import { PerformanceCalculationType } from '@ghostfolio/common/types/performance-calculation-type.type';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import {
@@ -36,6 +37,8 @@ export class PortfolioSummaryComponent implements OnChanges {
   );
   public timeInMarket: string;
 
+  protected calculationType: { title: string; value: string };
+
   public constructor(private notificationService: NotificationService) {}
 
   public ngOnChanges() {
@@ -50,6 +53,7 @@ export class PortfolioSummaryComponent implements OnChanges {
     } else {
       this.timeInMarket = undefined;
     }
+    this.calculationType = this.getCalulationType();
   }
 
   public onEditEmergencyFund() {
@@ -64,4 +68,22 @@ export class PortfolioSummaryComponent implements OnChanges {
       title: $localize`Please set the amount of your emergency fund.`
     });
   }
+
+  private getCalulationType(): { title: string; value: string } {
+    switch (this.user?.settings?.performanceCalculationType) {
+      case PerformanceCalculationType.ROAI:
+        return {
+          title: 'Return on Average Investment',
+          value: PerformanceCalculationType.ROAI
+        };
+      case PerformanceCalculationType.ROI:
+        return {
+          title: 'Return on Investment',
+          value: PerformanceCalculationType.ROI
+        };
+
+      default:
+        return undefined;
+    }
+  }
 }