Merge 613cfa6901 into 90c90e179e

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Extended the account detail dialog to include the change and the performance
 - Improved the market price in the benchmark detail dialog by adding the currency and reducing the precision on mobile
 - Improved the style of the close button in the dialog footer component
 - Improved the style of the close button in the dialog header component

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -2,6 +2,7 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   DEFAULT_DATE_RANGE,
   DEFAULT_PAGE_SIZE,
+  NUMERICAL_PRECISION_THRESHOLD_3_FIGURES,
   NUMERICAL_PRECISION_THRESHOLD_4_FIGURES
 } from '@ghostfolio/common/config';
 import { CreateAccountBalanceDto } from '@ghostfolio/common/dtos';
@@ -104,6 +105,10 @@ export class GfAccountDetailDialogComponent implements OnInit {
   protected isLoading = true;
   protected isLoadingChart: boolean;
   protected name: string | null;
+  protected netPerformancePercentageWithCurrencyEffect: number;
+  protected netPerformancePercentageWithCurrencyEffectPrecision = 2;
+  protected netPerformanceWithCurrencyEffect: number;
+  protected netPerformanceWithCurrencyEffectPrecision = 2;
   protected pageIndex = 0;
   protected pageSize = DEFAULT_PAGE_SIZE;
   protected platformName: string;
@@ -358,6 +363,33 @@ export class GfAccountDetailDialogComponent implements OnInit {
       next: ({ accountBalances, portfolioPerformance }) => {
         this.accountBalances = accountBalances.balances;
 
+        const {
+          netPerformancePercentageWithCurrencyEffect,
+          netPerformanceWithCurrencyEffect
+        } = portfolioPerformance.performance;
+
+        this.netPerformancePercentageWithCurrencyEffect =
+          netPerformancePercentageWithCurrencyEffect;
+
+        if (
+          this.data.deviceType === 'mobile' &&
+          this.netPerformancePercentageWithCurrencyEffect >=
+            NUMERICAL_PRECISION_THRESHOLD_3_FIGURES
+        ) {
+          this.netPerformancePercentageWithCurrencyEffectPrecision = 0;
+        }
+
+        this.netPerformanceWithCurrencyEffect =
+          netPerformanceWithCurrencyEffect;
+
+        if (
+          this.data.deviceType === 'mobile' &&
+          this.netPerformanceWithCurrencyEffect >=
+            NUMERICAL_PRECISION_THRESHOLD_4_FIGURES
+        ) {
+          this.netPerformanceWithCurrencyEffectPrecision = 0;
+        }
+
         if (
           portfolioPerformance.chart &&
           portfolioPerformance.chart.length > 0

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -45,6 +45,35 @@
         </ng-template>
         <div class="container mt-3 p-0">
           <div class="row w-100">
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [colorizeSign]="true"
+                [isCurrency]="true"
+                [isLoading]="isLoadingChart"
+                [locale]="user?.settings?.locale"
+                [precision]="netPerformanceWithCurrencyEffectPrecision"
+                [unit]="user?.settings?.baseCurrency"
+                [value]="netPerformanceWithCurrencyEffect"
+                >Change</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [colorizeSign]="true"
+                [isLoading]="isLoadingChart"
+                [isPercent]="true"
+                [locale]="user?.settings?.locale"
+                [precision]="
+                  netPerformancePercentageWithCurrencyEffectPrecision
+                "
+                [value]="netPerformancePercentageWithCurrencyEffect"
+                >Performance</gf-value
+              >
+            </div>
             <div class="col-6 mb-3">
               <gf-value
                 i18n