Refactoring

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

@@ -9,11 +9,7 @@
     [showYAxis]="true"
     [symbol]="symbol"
   />
-  <div
+  <div *ngFor="let itemByMonth of marketDataByMonth | keyvalue" class="d-flex">
-    *ngFor="let itemByMonth of marketDataByMonth | keyvalue"
-    class="d-flex"
-    [hidden]="!marketData.length > 0"
-  >
     <div class="date px-1 text-nowrap">{{ itemByMonth.key }}</div>
     <div class="align-items-center d-flex flex-grow-1 px-1">
       <div

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

@@ -21,15 +21,15 @@ import {
   addDays,
   addMonths,
   format,
-  isAfter,
   isBefore,
   isSameDay,
   isToday,
   isValid,
+  min,
   parse,
   parseISO
 } from 'date-fns';
-import { last } from 'lodash';
+import { first, last } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -138,19 +138,27 @@ export class AdminMarketDataDetailComponent implements OnChanges, OnInit {
       };
     }
 
+    if (this.dateOfFirstActivity) {
+      // Fill up missing gaps
       const dates = Object.keys(this.marketDataByMonth).sort();
-    const startDate = parseISO(dates[0]);
+      const startDate = min([
+        parseISO(this.dateOfFirstActivity),
+        parseISO(first(dates))
+      ]);
       const endDate = parseISO(last(dates));
 
       let currentDate = startDate;
-    while (!isAfter(currentDate, endDate)) {
+
+      while (isBefore(currentDate, endDate)) {
         const key = format(currentDate, 'yyyy-MM');
         if (!this.marketDataByMonth[key]) {
           this.marketDataByMonth[key] = {};
         }
+
         currentDate = addMonths(currentDate, 1);
       }
     }
+  }
 
   public isDateOfInterest(aDateString: string) {
     // Date is valid and in the past