Improve numerical precision in holding detail dialog

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

@@ -3,6 +3,7 @@ import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { NUMERICAL_PRECISION_THRESHOLD } from '@ghostfolio/common/config';
 import {
   LineChartItem,
   PortfolioPerformance,
@@ -34,6 +35,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
   public isAllTimeLow: boolean;
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
+  public precision = 2;
   public showDetails = false;
   public unit: string;
   public user: User;
@@ -67,6 +69,12 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 
+    this.showDetails =
+      !this.user.settings.isRestrictedView &&
+      this.user.settings.viewMode !== 'ZEN';
+
+    this.unit = this.showDetails ? this.user.settings.baseCurrency : '%';
+
     this.impersonationStorageService
       .onChangeHasImpersonation()
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -81,12 +89,6 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
       .subscribe(() => {
         this.update();
       });
-
-    this.showDetails =
-      !this.user.settings.isRestrictedView &&
-      this.user.settings.viewMode !== 'ZEN';
-
-    this.unit = this.showDetails ? this.user.settings.baseCurrency : '%';
   }
 
   public onChangeDateRange(dateRange: DateRange) {
@@ -134,6 +136,14 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
           }
         );
 
+        if (
+          this.deviceType === 'mobile' &&
+          this.performance.currentValueInBaseCurrency >=
+            NUMERICAL_PRECISION_THRESHOLD
+        ) {
+          this.precision = 0;
+        }
+
         this.isLoadingPerformance = false;
 
         this.changeDetectorRef.markForCheck();

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

@@ -88,6 +88,7 @@
           [isLoading]="isLoadingPerformance"
           [locale]="user?.settings?.locale"
           [performance]="performance"
+          [precision]="precision"
           [showDetails]="showDetails"
           [unit]="unit"
         />

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

@@ -1,4 +1,3 @@
-import { NUMERICAL_PRECISION_THRESHOLD } from '@ghostfolio/common/config';
 import {
   getLocale,
   getNumberFormatDecimal,
@@ -15,7 +14,6 @@ import {
   ElementRef,
   Input,
   OnChanges,
-  OnInit,
   ViewChild
 } from '@angular/core';
 import { CountUp } from 'countup.js';
@@ -27,7 +25,7 @@ import { isNumber } from 'lodash';
   templateUrl: './portfolio-performance.component.html',
   styleUrls: ['./portfolio-performance.component.scss']
 })
-export class PortfolioPerformanceComponent implements OnChanges, OnInit {
+export class PortfolioPerformanceComponent implements OnChanges {
   @Input() deviceType: string;
   @Input() errors: ResponseError['errors'];
   @Input() isAllTimeHigh: boolean;
@@ -35,6 +33,7 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
   @Input() isLoading: boolean;
   @Input() locale = getLocale();
   @Input() performance: PortfolioPerformance;
+  @Input() precision: number;
   @Input() showDetails: boolean;
   @Input() unit: string;
 
@@ -42,9 +41,9 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
 
   public constructor() {}
 
-  public ngOnInit() {}
-
   public ngOnChanges() {
+    this.precision = this.precision >= 0 ? this.precision : 2;
+
     if (this.isLoading) {
       if (this.value?.nativeElement) {
         this.value.nativeElement.innerHTML = '';
@@ -53,12 +52,7 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
       if (isNumber(this.performance?.currentValueInBaseCurrency)) {
         new CountUp('value', this.performance?.currentValueInBaseCurrency, {
           decimal: getNumberFormatDecimal(this.locale),
-          decimalPlaces:
-            this.deviceType === 'mobile' &&
-            this.performance?.currentValueInBaseCurrency >=
-              NUMERICAL_PRECISION_THRESHOLD
-              ? 0
-              : 2,
+          decimalPlaces: this.precision,
           duration: 1,
           separator: getNumberFormatGroup(this.locale)
         }).start();

libs/ui/src/lib/value/value.component.ts

@@ -29,7 +29,7 @@ export class GfValueComponent implements OnChanges {
   @Input() isPercent = false;
   @Input() locale: string;
   @Input() position = '';
-  @Input() precision: number | undefined;
+  @Input() precision: number;
   @Input() size: 'large' | 'medium' | 'small' = 'small';
   @Input() subLabel = '';
   @Input() unit = '';