From 961774ce9ff85db38e6283a6af200a72c54b7403 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 3 Dec 2021 21:24:05 +0100
Subject: [PATCH] Feature/improve market data detail (#511)

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

* Update changelog
---
 CHANGELOG.md                                             | 4 ++++
 .../admin-market-data-detail.component.html              | 7 +++++--
 .../admin-market-data-detail.component.scss              | 5 ++++-
 .../admin-market-data-detail.component.ts                | 9 ++++++++-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a69ce88..6a39613f 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html
index 66c3388d..2c67da93 100644
--- a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html
+++ b/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] &&
diff --git a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.scss b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.scss
index d16aec1d..b5dabd46 100644
--- a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.scss
+++ b/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);
     }
diff --git a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts b/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts
index 8c297a36..83f4d65a 100644
--- a/apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts
+++ b/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: {