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 24d582ff82..de53bf530d 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 @@ -5,7 +5,8 @@ import { UserService } from '@ghostfolio/client/services/user/user.service'; import { DEFAULT_CURRENCY, DEFAULT_DATE_RANGE, - NUMERICAL_PRECISION_THRESHOLD_6_FIGURES + NUMERICAL_PRECISION_THRESHOLD_6_FIGURES, + NUMERICAL_PRECISION_THRESHOLD_7_FIGURES } from '@ghostfolio/common/config'; import { AssetProfileIdentifier, @@ -51,6 +52,7 @@ export class GfHomeOverviewComponent implements OnInit { protected readonly isLoadingPerformance = signal(true); protected readonly performance = signal(null); protected readonly performanceLabel = $localize`Performance`; + protected readonly performanceSize = signal<'large' | 'medium'>('large'); protected readonly precision = signal(2); protected readonly user = signal(null); @@ -143,6 +145,7 @@ export class GfHomeOverviewComponent implements OnInit { ); this.precision.set(2); + this.performanceSize.set('large'); if ( this.deviceType() === 'mobile' && @@ -150,6 +153,13 @@ export class GfHomeOverviewComponent implements OnInit { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES ) { this.precision.set(0); + + if ( + performance.currentValueInBaseCurrency >= + NUMERICAL_PRECISION_THRESHOLD_7_FIGURES + ) { + this.performanceSize.set('medium'); + } } this.isLoadingPerformance.set(false); 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 8de122d145..90b9aafc8e 100644 --- a/apps/client/src/app/components/home-overview/home-overview.html +++ b/apps/client/src/app/components/home-overview/home-overview.html @@ -91,6 +91,7 @@ [performance]="performance()" [precision]="precision()" [showDetails]="showDetails()" + [size]="performanceSize()" [unit]="unit()" /> diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html index e463937334..771e0b805a 100644 --- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html +++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html @@ -24,6 +24,7 @@ }
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss index 6f703255f8..b00f205351 100644 --- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss +++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss @@ -16,6 +16,10 @@ } .value-container { + &.medium { + font-size: 2rem; + } + #value { font-variant-numeric: tabular-nums; } 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 a48d77a2dd..f6d7f0d9c8 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 @@ -44,6 +44,7 @@ export class GfPortfolioPerformanceComponent { } }); public readonly showDetails = input(false); + public readonly size = input<'large' | 'medium'>('large'); public readonly unit = input.required(); private readonly value = diff --git a/libs/common/src/lib/config.ts b/libs/common/src/lib/config.ts index 6b070755f2..7faefd1861 100644 --- a/libs/common/src/lib/config.ts +++ b/libs/common/src/lib/config.ts @@ -233,6 +233,7 @@ export const NUMERICAL_PRECISION_THRESHOLD_3_FIGURES = 100; export const NUMERICAL_PRECISION_THRESHOLD_4_FIGURES = 1000; export const NUMERICAL_PRECISION_THRESHOLD_5_FIGURES = 10000; export const NUMERICAL_PRECISION_THRESHOLD_6_FIGURES = 100000; +export const NUMERICAL_PRECISION_THRESHOLD_7_FIGURES = 1000000; export const PROPERTY_API_KEY_GHOSTFOLIO = 'API_KEY_GHOSTFOLIO'; export const PROPERTY_API_KEY_OPENROUTER = 'API_KEY_OPENROUTER';