Bisq markets dashboard. Base views. WIP.

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

@@ -0,0 +1,49 @@
+<div class="container-xl">
+
+  <ng-container *ngIf="hlocData$ | async as hlocData">
+
+    <ng-container *ngIf="currency$ | async as currency">
+      <h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
+      <div class="float-left">
+        <b>{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</b>
+      </div>
+
+    </ng-container>
+  
+    <form [formGroup]="radioGroupForm" class="mb-3 float-right">
+      <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
+        <!--
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'minute'"> 1M
+        </label>
+        -->
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'half_hour'"> 30M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'hour'"> 1H
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'half_day'"> 12H
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'day'"> 1D
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'week'"> 1W
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'month'"> 1M
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'year'"> 1Y
+        </label>
+        <label ngbButtonLabel class="btn-primary btn-sm">
+          <input ngbButton type="radio" [value]="'auto'" fragment="auto"> Auto
+        </label>
+      </div>
+    </form>
+
+    <app-lightweight-charts [data]="hlocData"></app-lightweight-charts>
+  </ng-container>
+</div>

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

@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { combineLatest, merge, Observable, of } from 'rxjs';
+import { filter, map, mergeAll, switchMap, tap } from 'rxjs/operators';
+import { BisqApiService } from '../bisq-api.service';
+
+@Component({
+  selector: 'app-bisq-market',
+  templateUrl: './bisq-market.component.html',
+  styleUrls: ['./bisq-market.component.scss']
+})
+export class BisqMarketComponent implements OnInit {
+  hlocData$: Observable<any>;
+  currency$: Observable<any>;
+  radioGroupForm: FormGroup;
+  defaultInterval = 'half_hour';
+
+  constructor(
+    private route: ActivatedRoute,
+    private bisqApiService: BisqApiService,
+    private formBuilder: FormBuilder,
+  ) { }
+
+  ngOnInit(): void {
+    this.radioGroupForm = this.formBuilder.group({
+      interval: [this.defaultInterval],
+    });
+
+    this.currency$ = this.bisqApiService.getMarkets$()
+      .pipe(
+        switchMap((markets) => combineLatest([of(markets), this.route.paramMap])),
+        map(([markets, routeParams]) => {
+          const pair = routeParams.get('pair');
+          console.log(markets);
+          return {
+            pair: pair.replace('_', '/').toUpperCase(),
+            market: markets[pair],
+          };
+        })
+      );
+
+    this.hlocData$ = combineLatest([
+      this.route.paramMap,
+      merge(this.radioGroupForm.get('interval').valueChanges, of(this.defaultInterval)),
+    ])
+    .pipe(
+      switchMap(([routeParams, interval]) => {
+        const pair = routeParams.get('pair');
+        return this.bisqApiService.getMarketsHloc$(pair, interval);
+      }),
+      map((hloc) => {
+        return hloc.map((h) => {
+          h.time = h.period_start;
+          return h;
+        });
+      }),
+      tap((data) => {
+        console.log(data);
+      }),
+    );
+  }
+
+}