Feature/simplify portfolio summary on mobile (#5962)

* Simplify portfolio summary on mobile

* Improve numerical precision
* Hide hints

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the dynamic numerical precision for various values in the portfolio summary tab on the home page
 - Upgraded `yahoo-finance2` from version `3.10.0` to `3.10.1`
 
 ## 2.217.1 - 2025-11-16

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

@@ -18,6 +18,7 @@ import {
 } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -29,6 +30,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './home-summary.html'
 })
 export class GfHomeSummaryComponent implements OnDestroy, OnInit {
+  public deviceType: string;
   public hasImpersonationId: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
@@ -43,6 +45,7 @@ export class GfHomeSummaryComponent implements OnDestroy, OnInit {
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
   ) {
@@ -70,6 +73,8 @@ export class GfHomeSummaryComponent implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
     this.impersonationStorageService
       .onChangeHasImpersonation()
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/components/home-summary/home-summary.html

@@ -6,6 +6,7 @@
         <mat-card-content>
           <gf-portfolio-summary
             [baseCurrency]="user?.settings?.baseCurrency"
+            [deviceType]="deviceType"
             [hasPermissionToUpdateUserSettings]="
               !hasImpersonationId && hasPermissionToUpdateUserSettings
             "

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

@@ -16,7 +16,7 @@
         other {activities}
       }</ng-container>
       <span
-        class="align-items-center d-flex ml-1"
+        class="align-items-center d-none d-sm-flex ml-1"
         matTooltipPosition="above"
         [matTooltip]="buyAndSellActivitiesTooltip"
       >
@@ -34,6 +34,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.totalBuy"
       />
@@ -46,6 +47,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.totalSell"
       />
@@ -61,6 +63,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.committedFunds"
       />
@@ -73,6 +76,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="
           isLoading ? undefined : summary?.grossPerformanceWithCurrencyEffect
@@ -90,6 +94,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.fees"
       />
@@ -105,6 +110,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="
           isLoading ? undefined : summary?.netPerformanceWithCurrencyEffect
@@ -116,7 +122,7 @@
     <div class="flex-grow-1 text-truncate ml-3">
       <ng-container i18n>Net Performance</ng-container>
       <abbr
-        class="initialism ml-2 text-muted"
+        class="d-none d-sm-inline-block initialism ml-2 text-muted"
         title="Return on Average Investment"
         >(ROAI)</abbr
       >
@@ -147,6 +153,7 @@
         position="end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.currentValueInBaseCurrency"
       />
@@ -181,6 +188,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.emergencyFund?.total"
       />
@@ -194,6 +202,7 @@
         position="end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.emergencyFund?.cash"
       />
@@ -207,6 +216,7 @@
         position="end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.emergencyFund?.assets"
       />
@@ -219,6 +229,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.cash"
       />
@@ -231,6 +242,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.excludedAccountsAndActivities"
       />
@@ -252,6 +264,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.liabilitiesInBaseCurrency"
       />
@@ -267,6 +280,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.totalValueInBaseCurrency"
       />
@@ -301,6 +315,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.interestInBaseCurrency"
       />
@@ -313,6 +328,7 @@
         class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
+        [precision]="precision"
         [unit]="baseCurrency"
         [value]="isLoading ? undefined : summary?.dividendInBaseCurrency"
       />

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

@@ -1,4 +1,5 @@
 import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
+import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config';
 import { getDateFnsLocale, getLocale } from '@ghostfolio/common/helper';
 import { PortfolioSummary, User } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
@@ -31,6 +32,7 @@ import {
 })
 export class GfPortfolioSummaryComponent implements OnChanges {
   @Input() baseCurrency: string;
+  @Input() deviceType: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;
   @Input() language: string;
@@ -43,6 +45,8 @@ export class GfPortfolioSummaryComponent implements OnChanges {
   public buyAndSellActivitiesTooltip = translate(
     'BUY_AND_SELL_ACTIVITIES_TOOLTIP'
   );
+
+  public precision = 2;
   public timeInMarket: string;
 
   public constructor(private notificationService: NotificationService) {
@@ -51,6 +55,14 @@ export class GfPortfolioSummaryComponent implements OnChanges {
 
   public ngOnChanges() {
     if (this.summary) {
+      if (
+        this.deviceType === 'mobile' &&
+        this.summary.totalValueInBaseCurrency >=
+          NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+      ) {
+        this.precision = 0;
+      }
+
       if (this.user.dateOfFirstActivity) {
         this.timeInMarket = formatDistanceToNow(this.user.dateOfFirstActivity, {
           locale: getDateFnsLocale(this.language)