Bisq markets: Volume and other fixes.

backend/src/api/bisq/markets-api.ts

@@ -457,8 +457,8 @@ class BisqMarketsApi {
     }
   }
 
-  get24hVolumes(): MarketVolume[] {
+  getVolumesByTime(time: number): MarketVolume[] {
-    const timestamp_from = new Date().getTime() / 1000 - 86400;
+    const timestamp_from = new Date().getTime() / 1000 - time;
     const timestamp_to = new Date().getTime() / 1000;
 
     const trades = this.getTradesByCriteria(undefined, timestamp_to, timestamp_from,

backend/src/index.ts

@@ -203,7 +203,7 @@ class Server {
         .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/ticker', routes.getBisqMarketTicker.bind(routes))
         .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/trades', routes.getBisqMarketTrades.bind(routes))
         .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/volumes', routes.getBisqMarketVolumes.bind(routes))
-        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/24hvolumes', routes.getBisqMarket24hVolumes.bind(routes))
+        .get(config.MEMPOOL.API_URL_PREFIX + 'bisq/markets/volumes/7d', routes.getBisqMarketVolumes7d.bind(routes))
         ;
     }
 

backend/src/routes.ts

@@ -401,12 +401,12 @@ class Routes {
     }
   }
 
-  public getBisqMarket24hVolumes(req: Request, res: Response) {
+  public getBisqMarketVolumes7d(req: Request, res: Response) {
-    const result = bisqMarket.get24hVolumes();
+    const result = bisqMarket.getVolumesByTime(604800);
     if (result) {
       res.json(result);
     } else {
-      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarket24hVolumes error'));
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarketVolumes7d error'));
     }
   }
 

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

@@ -64,7 +64,7 @@ export class BisqApiService {
     return this.httpClient.get<any[]>(API_BASE_URL + '/markets/offers?market=' + market);
   }
 
-  getMarket24hVolumes$(): Observable<any[]> {
+  getMarketVolumesByTime$(period: string): Observable<any[]> {
-    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/24hvolumes');
+    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/volumes/' + period);
   }
 }

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

@@ -8,13 +8,13 @@
       <th i18n>Currency</th>
       <th i18n>Pair</th>
       <th i18n>Price</th>
-      <th i18n>Volume (24h)</th>
+      <th i18n>Volume (7d)</th>
-      <th i18n>Trades (24h)</th>
+      <th i18n>Trades (7d)</th>
     </thead>
     <tbody *ngIf="tickers.value; else loadingTmpl">
       <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn; let i = index">
         <td>{{ i + 1 }}</td>
-        <td>{{ ticker.market.lname }}</td>
+        <td>{{ ticker.market.rtype === 'crypto' ? ticker.market.lname : ticker.market.rname }}</td>
         <td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.pair }}</a></td>
         <td>
           <app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>

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

@@ -24,7 +24,7 @@ export class BisqDashboardComponent implements OnInit {
     this.tickers$ = combineLatest([
       this.bisqApiService.getMarketsTicker$(),
       this.bisqApiService.getMarkets$(),
-      this.bisqApiService.getMarket24hVolumes$(),
+      this.bisqApiService.getMarketVolumesByTime$('7d'),
     ])
     .pipe(
       map(([tickers, markets, volumes]) => {
@@ -37,7 +37,7 @@ export class BisqDashboardComponent implements OnInit {
           newTickers.push(tickers[t]);
         }
 
-        newTickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0));
+        newTickers.sort((a, b) => (b.volume && b.volume.num_trades || 0) - (a.volume && a.volume.num_trades || 0));
 
         return newTickers;
       })

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

@@ -6,16 +6,13 @@
       <h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
       <div class="float-left">
         <span class="priceheader">
-          <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
+          <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
-          <ng-template #headerPriceCrypto>{{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
+          <ng-template #headerPriceCrypto>{{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
         </span> 
       </div>
   
       <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>
@@ -43,7 +40,9 @@
         </div>
       </form>
 
-      <app-lightweight-charts [data]="hlocData"></app-lightweight-charts>
+      <app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>
+      
+      <div class="float-right small mt-2">Powered by <a href="https://www.tradingview.com/" target="_blank">Tradingview</a></div>
       
       <br>
 

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

@@ -46,11 +46,8 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
     this.offers$ = this.route.paramMap
       .pipe(
         map(routeParams => routeParams.get('pair')),
-        tap((marketPair) => this.websocketService.startTrackBisqMarket(marketPair)),
         switchMap((marketPair) => this.bisqApiService.getMarketOffers$(marketPair)),
-        map((offers) => {
+        map((offers) => offers[Object.keys(offers)[0]])
-          return offers[Object.keys(offers)[0]];
-        })
       );
 
     this.hlocData$ = combineLatest([
@@ -62,11 +59,21 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
         const pair = routeParams.get('pair');
         return this.bisqApiService.getMarketsHloc$(pair, interval);
       }),
-      map((hloc) => {
+      map((hlocData) => {
-        return hloc.map((h) => {
+        hlocData = hlocData.map((h) => {
           h.time = h.period_start;
           return h;
         });
+        return {
+          hloc: hlocData,
+          volume: hlocData.map((h) => {
+            return {
+              time: h.time,
+              value: h.volume_right,
+              color: h.close > h.avg ? 'rgba(0, 150, 136, 0.8)' : 'rgba(255,82,82, 0.8)',
+            };
+          })
+        };
       }),
     );
   }

frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts

@@ -9,7 +9,11 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, O
 })
 export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() data: any;
+  @Input() volumeData: any;
+  @Input() precision: number;
+
   lineSeries: any;
+  volumeSeries: any;
   chart: any;
 
   constructor(
@@ -36,6 +40,18 @@ export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnD
       },
     });
     this.lineSeries = this.chart.addCandlestickSeries();
+
+    this.volumeSeries = this.chart.addHistogramSeries({
+      color: '#26a69a',
+      priceFormat: {
+        type: 'volume',
+      },
+      priceScaleId: '',
+      scaleMargins: {
+        top: 0.8,
+        bottom: 0,
+      },
+    });
   }
 
   ngAfterViewInit(): void {
@@ -60,6 +76,15 @@ export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnD
       return;
     }
     this.lineSeries.setData(this.data);
+    this.volumeSeries.setData(this.volumeData);
+
+    this.lineSeries.applyOptions({
+      priceFormat: {
+          type: 'price',
+          precision: this.precision,
+          minMove: 0.0000001,
+      },
+    });
   }
 
   ngOnDestroy() {