Break down performance into asset and currency

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -11,6 +11,7 @@ import {
   Filter,
   HistoricalDataItem,
   PortfolioInvestments,
+  PortfolioPerformance,
   Position,
   User
 } from '@ghostfolio/common/interfaces';
@@ -54,6 +55,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
     { label: $localize`Monthly`, value: 'month' },
     { label: $localize`Yearly`, value: 'year' }
   ];
+  public performance: PortfolioPerformance;
   public performanceDataItems: HistoricalDataItem[];
   public performanceDataItemsInPercentage: HistoricalDataItem[];
   public placeholder = '';
@@ -326,11 +328,12 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
         range: this.user?.settings?.dateRange
       })
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ chart, firstOrderDate }) => {
+      .subscribe(({ chart, firstOrderDate, performance }) => {
         this.firstOrderDate = firstOrderDate ?? new Date();
         this.daysInMarket = differenceInDays(new Date(), firstOrderDate);
 
         this.investments = [];
+        this.performance = performance;
         this.performanceDataItems = [];
         this.performanceDataItemsInPercentage = [];
 

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -34,6 +34,108 @@
     </div>
   </div>
 
+  @if (user?.settings?.isExperimentalFeatures) {
+  <div class="mb-5 row">
+    <div class="col">
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <div class="d-flex py-1">
+            <div class="flex-grow-1 mr-2 text-truncate" i18n>
+              Absolute Asset Performance
+            </div>
+            <div class="d-flex justify-content-end">
+              <gf-value
+                class="justify-content-end"
+                position="end"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [unit]="user?.settings?.baseCurrency"
+                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformance"
+              ></gf-value>
+            </div>
+          </div>
+          <div class="d-flex mb-3 ml-3 py-1">
+            <div class="flex-grow-1 mr-2 text-truncate" i18n>
+              Asset Performance
+            </div>
+            <div class="d-flex justify-content-end">
+              <gf-value
+                class="justify-content-end"
+                position="end"
+                [colorizeSign]="true"
+                [isPercent]="true"
+                [locale]="user?.settings?.locale"
+                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercent"
+              ></gf-value>
+            </div>
+          </div>
+          <div class="d-flex py-1">
+            <div class="flex-grow-1 mr-2 text-truncate" i18n>
+              Absolute Currency Performance
+            </div>
+            <div class="d-flex justify-content-end">
+              <gf-value
+                class="justify-content-end"
+                position="end"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [unit]="user?.settings?.baseCurrency"
+                [value]="isLoadingInvestmentChart ? undefined : (performance?.currentNetPerformanceWithCurrencyEffect === null ? null : performance?.currentNetPerformanceWithCurrencyEffect - performance?.currentNetPerformance)"
+              ></gf-value>
+            </div>
+          </div>
+          <div class="d-flex ml-3 py-1">
+            <div class="flex-grow-1 mr-2 text-truncate" i18n>
+              Currency Performance
+            </div>
+            <div class="d-flex justify-content-end">
+              <gf-value
+                class="justify-content-end"
+                position="end"
+                [colorizeSign]="true"
+                [isPercent]="true"
+                [locale]="user?.settings?.locale"
+                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercentWithCurrencyEffect - performance?.currentNetPerformancePercent"
+              ></gf-value>
+            </div>
+          </div>
+          <div><hr /></div>
+          <div class="d-flex py-1">
+            <div class="flex-grow-1 mr-2 text-truncate" i18n>
+              Absolute Net Performance
+            </div>
+            <div class="d-flex justify-content-end">
+              <gf-value
+                class="justify-content-end"
+                position="end"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [unit]="user?.settings?.baseCurrency"
+                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformanceWithCurrencyEffect"
+              ></gf-value>
+            </div>
+          </div>
+          <div class="d-flex ml-3 py-1">
+            <div class="flex-grow-1 mr-2 text-truncate" i18n>
+              Net Performance
+            </div>
+            <div class="d-flex justify-content-end">
+              <gf-value
+                class="justify-content-end"
+                position="end"
+                [colorizeSign]="true"
+                [isPercent]="true"
+                [locale]="user?.settings?.locale"
+                [value]="isLoadingInvestmentChart ? undefined : performance?.currentNetPerformancePercentWithCurrencyEffect"
+              ></gf-value>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+  }
+
   <div class="mb-5 row">
     <div class="col-md-6">
       <mat-card appearance="outlined" class="mb-3">