Feature/improve market data detail (#511)

* Improve historical data view (hide invalid and future dates)

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Improved the historical data view in the admin control panel (hide invalid and future dates)
+
 ### Fixed
 
 - Improved the allocations by currency in combination with cash balances

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html

@@ -6,12 +6,15 @@
         *ngFor="let dayItem of days; let i = index"
         class="day"
         [title]="
-          (marketDataByMonth[itemByMonth.key][i + 1]?.date
+          (itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
             | date: defaultDateFormat) ?? ''
         "
         [ngClass]="{
+          valid: isDateOfInterest(
+            itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
+          ),
           'available cursor-pointer':
-            marketDataByMonth[itemByMonth.key][i + 1]?.day == i + 1
+            marketDataByMonth[itemByMonth.key][i + 1]?.day === i + 1
         }"
         (click)="
           marketDataByMonth[itemByMonth.key][i + 1] &&

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.scss

@@ -10,11 +10,14 @@
   }
 
   .day {
-    background-color: var(--danger);
     height: 0.5rem;
     margin-right: 0.25rem;
     width: 0.5rem;
 
+    &.valid {
+      background-color: var(--danger);
+    }
+
     &.available {
       background-color: var(--success);
     }

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts

@@ -7,8 +7,9 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import { MarketData } from '@prisma/client';
-import { format } from 'date-fns';
+import { format, isBefore, isValid, parse } from 'date-fns';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -59,6 +60,12 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
     }
   }
 
+  public isDateOfInterest(aDateString: string) {
+    // Date is valid and in the past
+    const date = parse(aDateString, DATE_FORMAT, new Date());
+    return isValid(date) && isBefore(date, new Date());
+  }
+
   public onOpenMarketDataDetail({ date, marketPrice, symbol }: MarketData) {
     const dialogRef = this.dialog.open(MarketDataDetailDialog, {
       data: {