Add whitespaces to missing data points.

frontend/src/app/bisq/bisq-api.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpResponse, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { BisqTransaction, BisqBlock, BisqStats, MarketVolume, Trade, Markets, Tickers, Offers, Currencies, HighLowOpenClose } from './bisq.interfaces';
+import { BisqTransaction, BisqBlock, BisqStats, MarketVolume, Trade, Markets, Tickers, Offers, Currencies, HighLowOpenClose, SummarizedInterval } from './bisq.interfaces';
 
 const API_BASE_URL = '/bisq/api';
 
@@ -56,8 +56,8 @@ export class BisqApiService {
   }
 
   getMarketsHloc$(market: string, interval: 'minute' | 'half_hour' | 'hour' | 'half_day' | 'day'
-  | 'week' | 'month' | 'year' | 'auto'): Observable<any[]> {
-    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/hloc?market=' + market + '&interval=' + interval);
+  | 'week' | 'month' | 'year' | 'auto'): Observable<SummarizedInterval[]> {
+    return this.httpClient.get<SummarizedInterval[]>(API_BASE_URL + '/markets/hloc?market=' + market + '&interval=' + interval);
   }
 
   getMarketOffers$(market: string): Observable<Offers> {

frontend/src/app/bisq/bisq-market/bisq-market.component.html

@@ -34,9 +34,6 @@
           <label ngbButtonLabel class="btn-primary btn-sm">
             <input ngbButton type="radio" [value]="'year'" (click)="setFragment('year')"> 1Y
           </label>
-          <label ngbButtonLabel class="btn-primary btn-sm">
-            <input ngbButton type="radio" [value]="'auto'" (click)="setFragment('auto')"> Auto
-          </label>
         </div>
       </form>
 
@@ -58,10 +55,10 @@
         </div>
       </ng-container>
 
-      <br>
+      <br><br>
 
       <ng-container *ngIf="trades$ | async as trades; else loadingSpinner">
-        <h2>Trade History (Last 100 trades)</h2>
+        <h2>Latest trades</h2>
 
         <table class="table table-borderless table-striped">
           <thead>

frontend/src/app/bisq/bisq-market/bisq-market.component.ts

@@ -87,15 +87,44 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
           h.time = h.period_start;
           return h;
         });
+
+        const hlocVolume = hlocData.map((h) => {
+          return {
+            time: h.time,
+            value: h.volume_right,
+            color: h.close > h.avg ? 'rgba(0, 41, 74, 0.7)' : 'rgba(0, 41, 74, 1)',
+          };
+        });
+
+        // Add whitespace
+        if (hlocData.length > 1) {
+          const newHloc = [];
+          newHloc.push(hlocData[0]);
+
+          const period = this.getUnixTimestampFromInterval(this.radioGroupForm.get('interval').value); // temp
+          let periods = 0;
+          const startingDate = hlocData[0].period_start;
+          let index = 1;
+          while (true) {
+            periods++;
+            if (hlocData[index].period_start > startingDate + period * periods) {
+              newHloc.push({
+                time: startingDate + period * periods,
+              });
+            } else {
+              newHloc.push(hlocData[index]);
+              index++;
+              if (!hlocData[index]) {
+                break;
+              }
+            }
+          }
+          hlocData = newHloc;
+        }
+
         return {
           hloc: hlocData,
-          volume: hlocData.map((h) => {
-            return {
-              time: h.time,
-              value: h.volume_right,
-              color: h.close > h.avg ? 'rgba(0, 41, 74, 0.7)' : 'rgba(0, 41, 74, 1)',
-            };
-          })
+          volume: hlocVolume,
         };
       }),
     );
@@ -113,4 +142,17 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
     this.websocketService.stopTrackingBisqMarket();
   }
 
+  getUnixTimestampFromInterval(interval: string): number {
+    switch (interval) {
+      case 'minute': return 60;
+      case 'half_hour': return 1800;
+      case 'hour': return 3600;
+      case 'half_day': return 43200;
+      case 'day': return 86400;
+      case 'week': return 604800;
+      case 'month': return 2592000;
+      case 'year': return 31579200;
+    }
+  }
+
 }

frontend/src/app/bisq/bisq.interfaces.ts

@@ -249,12 +249,13 @@ export type Interval = 'minute' | 'half_hour' | 'hour' | 'half_day' | 'day' | 'w
 
 export interface SummarizedIntervals { [market: string]: SummarizedInterval; }
 export interface SummarizedInterval {
-  'period_start': number;
-  'open': number;
-  'close': number;
-  'high': number;
-  'low': number;
-  'avg': number;
-  'volume_right': number;
-  'volume_left': number;
+  period_start: number;
+  open: number;
+  close: number;
+  high: number;
+  low: number;
+  avg: number;
+  volume_right: number;
+  volume_left: number;
+  time?: number;
 }