diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts index 75e177749..d07ca91ce 100644 --- a/apps/client/src/app/components/home-overview/home-overview.component.ts +++ b/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(); diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html index 671e73ef2..8cd317428 100644 --- a/apps/client/src/app/components/home-overview/home-overview.html +++ b/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" /> diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts index f4e49ccaa..3083184bb 100644 --- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts +++ b/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(); diff --git a/libs/ui/src/lib/value/value.component.ts b/libs/ui/src/lib/value/value.component.ts index e1697d482..71bdfc7c3 100644 --- a/libs/ui/src/lib/value/value.component.ts +++ b/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 = '';