Improve layout

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,8 +74,9 @@
       </div>
     </div>
   }
+
   <div class="mb-5 row">
-    <div class="col-md-4 mb-3 mb-md-0">
+    <div class="col-lg-4 mb-3 mb-lg-0">
       <mat-card appearance="outlined">
         <mat-card-content>
           <gf-value
@@ -83,18 +84,19 @@
             size="large"
             [isCurrency]="true"
             [locale]="user?.settings?.locale"
+            [precision]="precision"
             [unit]="user?.settings?.baseCurrency"
             [value]="
               isLoadingInvestmentChart
                 ? undefined
                 : performance?.currentValueInBaseCurrency
             "
-            >Value</gf-value
+            >Total amount</gf-value
           >
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-4 mb-3 mb-md-0">
+    <div class="col-lg-4 mb-3 mb-lg-0">
       <mat-card appearance="outlined">
         <mat-card-content>
           <gf-value
@@ -103,18 +105,19 @@
             [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
+            >Change with currency effect</gf-value
           >
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-4">
+    <div class="col-lg-4">
       <mat-card appearance="outlined">
         <mat-card-content>
           <gf-value
@@ -128,7 +131,7 @@
                 ? undefined
                 : performance?.netPerformancePercentageWithCurrencyEffect
             "
-            >Performance with Currency Effect</gf-value
+            >Performance with currency effect</gf-value
           >
         </mat-card-content>
       </mat-card>