Feature/extend analysis page by values (#6210)

* Extend analysis page by values

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Extended the analysis page to include the total amount, change and performance with currency effects
+
 ### Changed
 
 - Deprecated `firstBuyDate` in favor of `dateOfFirstActivity` in the endpoint `GET api/v1/portfolio/holding/:dataSource/:symbol`

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

@@ -2,6 +2,7 @@ import { GfBenchmarkComparatorComponent } from '@ghostfolio/client/components/be
 import { GfInvestmentChartComponent } from '@ghostfolio/client/components/investment-chart/investment-chart.component';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config';
 import {
   HistoricalDataItem,
   InvestmentItem,
@@ -94,6 +95,7 @@ export class GfAnalysisPageComponent implements OnDestroy, OnInit {
   public performanceDataItems: HistoricalDataItem[];
   public performanceDataItemsInPercentage: HistoricalDataItem[];
   public portfolioEvolutionDataLabel = $localize`Investment`;
+  public precision = 2;
   public streaks: PortfolioInvestmentsResponse['streaks'];
   public top3: PortfolioPosition[];
   public unitCurrentStreak: string;
@@ -317,12 +319,21 @@ export class GfAnalysisPageComponent implements OnDestroy, OnInit {
                 : valueInPercentage
             });
           }
+
           this.performanceDataItemsInPercentage.push({
             date,
             value: netPerformanceInPercentageWithCurrencyEffect
           });
         }
 
+        if (
+          this.deviceType === 'mobile' &&
+          this.performance.currentValueInBaseCurrency >=
+            NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+        ) {
+          this.precision = 0;
+        }
+
         this.isLoadingInvestmentChart = false;
 
         this.updateBenchmarkDataItems();

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

@@ -74,6 +74,70 @@
       </div>
     </div>
   }
+
+  <div class="mb-5 row">
+    <div class="col-lg-4 mb-3 mb-lg-0">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [isCurrency]="true"
+            [locale]="user?.settings?.locale"
+            [precision]="precision"
+            [unit]="user?.settings?.baseCurrency"
+            [value]="
+              isLoadingInvestmentChart
+                ? undefined
+                : performance?.currentValueInBaseCurrency
+            "
+            >Total amount</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-4 mb-3 mb-lg-0">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [colorizeSign]="true"
+            [isCurrency]="true"
+            [locale]="user?.settings?.locale"
+            [precision]="precision"
+            [unit]="user?.settings?.baseCurrency"
+            [value]="
+              isLoadingInvestmentChart
+                ? undefined
+                : performance?.netPerformanceWithCurrencyEffect
+            "
+            >Change with currency effect</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-4">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [colorizeSign]="true"
+            [isPercent]="true"
+            [locale]="user?.settings?.locale"
+            [value]="
+              isLoadingInvestmentChart
+                ? undefined
+                : performance?.netPerformancePercentageWithCurrencyEffect
+            "
+            >Performance with currency effect</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+
   <div class="mb-5 row">
     <div class="col-lg">
       <gf-benchmark-comparator