diff --git a/CHANGELOG.md b/CHANGELOG.md index 839d69cccd..01ef6fd637 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## Unreleased + +### Changed + +- Improved the styling of the portfolio performance on the overview tab of the home page + ## 3.34.0 - 2026-07-25 ### Changed 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 90a628a170..90b9aafc8e 100644 --- a/apps/client/src/app/components/home-overview/home-overview.html +++ b/apps/client/src/app/components/home-overview/home-overview.html @@ -82,16 +82,16 @@ -
+
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 7b95229568..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 @@ -1,6 +1,6 @@
-
+
@if (errors()?.length > 0 && !isLoading()) {
-
+
{{ unit() }}
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';