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 c7b880efce..fc33a10d0d 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 @@ -38,6 +38,8 @@ import { MatCardModule } from '@angular/material/card'; import { Router, RouterModule } from '@angular/router'; import { DeviceDetectorService } from 'ngx-device-detector'; +const MINIMUM_CHART_ITEMS = 3; + @Component({ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ @@ -56,6 +58,12 @@ export class GfHomeOverviewComponent implements OnInit { protected readonly errors = signal([]); protected readonly hasImpersonationId = signal(false); protected readonly historicalDataItems = signal(null); + + // A line through only two points (e.g. the close of the previous day and + // now) is drawn as a misleading slope across the whole width + protected readonly hasEnoughChartData = computed(() => { + return (this.historicalDataItems()?.length ?? 0) >= MINIMUM_CHART_ITEMS; + }); protected readonly holdings = signal( undefined ); 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 64789ddc7d..1d1110dc9e 100644 --- a/apps/client/src/app/components/home-overview/home-overview.html +++ b/apps/client/src/app/components/home-overview/home-overview.html @@ -72,7 +72,7 @@ unit="%" [class.pe-3]="deviceType() === 'mobile'" [colorScheme]="user()?.settings?.colorScheme" - [hidden]="historicalDataItems()?.length === 0" + [hidden]="!hasEnoughChartData()" [historicalDataItems]="historicalDataItems()" [isAnimated]="user()?.settings?.dateRange === '1d' ? false : true" [label]="performanceLabel"