Extend market data view

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

@@ -18,8 +18,7 @@
           available:
             marketDataByMonth[itemByMonth.key][
               i + 1 < 10 ? '0' + (i + 1) : i + 1
-            ]?.day ===
+            ]?.marketPrice,
-            i + 1,
           today: isToday(
             itemByMonth.key + '-' + (i + 1 < 10 ? '0' + (i + 1) : i + 1)
           )

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

@@ -12,7 +12,15 @@ import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { DataSource, MarketData } from '@prisma/client';
-import { format, isBefore, isSameDay, isValid, parse } from 'date-fns';
+import {
+  addDays,
+  format,
+  isBefore,
+  isSameDay,
+  isValid,
+  parse,
+  parseISO
+} from 'date-fns';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -26,6 +34,7 @@ import { MarketDataDetailDialog } from './market-data-detail-dialog/market-data-
 })
 export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
   @Input() dataSource: DataSource;
+  @Input() dateOfFirstActivity: string;
   @Input() marketData: MarketData[];
   @Input() symbol: string;
 
@@ -36,7 +45,9 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
   public deviceType: string;
   public historicalDataItems: LineChartItem[];
   public marketDataByMonth: {
-    [yearMonth: string]: { [day: string]: MarketData & { day: number } };
+    [yearMonth: string]: {
+      [day: string]: Pick<MarketData, 'date' | 'marketPrice'> & { day: number };
+    };
   } = {};
 
   private unsubscribeSubject = new Subject<void>();
@@ -57,9 +68,30 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
         value: marketDataItem.marketPrice
       };
     });
+
+    let date = parseISO(this.dateOfFirstActivity);
+
+    const missingMarketData: Partial<MarketData>[] = [];
+
+    if (this.historicalDataItems?.[0]?.date) {
+      while (
+        isBefore(
+          date,
+          parse(this.historicalDataItems[0].date, DATE_FORMAT, new Date())
+        )
+      ) {
+        missingMarketData.push({
+          date,
+          marketPrice: undefined
+        });
+
+        date = addDays(date, 1);
+      }
+    }
+
     this.marketDataByMonth = {};
 
-    for (const marketDataItem of this.marketData) {
+    for (const marketDataItem of [...missingMarketData, ...this.marketData]) {
       const currentDay = parseInt(format(marketDataItem.date, 'd'), 10);
       const key = format(marketDataItem.date, 'yyyy-MM');
 
@@ -70,8 +102,9 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
       this.marketDataByMonth[key][
         currentDay < 10 ? `0${currentDay}` : currentDay
       ] = {
-        ...marketDataItem,
+        date: marketDataItem.date,
-        day: currentDay
+        day: currentDay,
+        marketPrice: marketDataItem.marketPrice
       };
     }
   }

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

@@ -64,6 +64,7 @@
               <td class="p-1" colspan="6">
                 <gf-admin-market-data-detail
                   [dataSource]="item.dataSource"
+                  [dateOfFirstActivity]="item.date"
                   [marketData]="marketDataDetails"
                   [symbol]="item.symbol"
                   (marketDataChanged)="onMarketDataChanged($event)"