Bisq markets dashboard: 24H Volume. WIP.

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

@@ -457,6 +457,30 @@ class BisqMarketsApi {
     }
   }
 
+  get24hVolumes(): MarketVolume[] {
+    const timestamp_from = new Date().getTime() / 1000 - 86400;
+    const timestamp_to = new Date().getTime() / 1000;
+
+    const trades = this.getTradesByCriteria(undefined, timestamp_to, timestamp_from,
+      undefined, undefined, undefined, 'asc', Number.MAX_SAFE_INTEGER);
+
+    const markets: any = {};
+
+    for (const trade of trades) {
+      if (!markets[trade._market]) {
+        markets[trade._market] = {
+          'volume': 0,
+          'num_trades': 0,
+        };
+      }
+
+      markets[trade._market]['volume'] += this.fiatCurrenciesIndexed[trade.currency] ? trade._tradeAmount : trade._tradeVolume;
+      markets[trade._market]['num_trades']++;
+    }
+
+    return markets;
+  }
+
   private getTradesSummarized(trades: TradesData[], timestamp_from: number, interval?: string): SummarizedIntervals {
     const intervals: any = {};
     const intervals_prices: any = {};

backend/src/index.ts

@@ -203,6 +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))
         ;
     }
 

backend/src/routes.ts

@@ -401,6 +401,15 @@ class Routes {
     }
   }
 
+  public getBisqMarket24hVolumes(req: Request, res: Response) {
+    const result = bisqMarket.get24hVolumes();
+    if (result) {
+      res.json(result);
+    } else {
+      res.status(500).json(this.getBisqMarketErrorResponse('getBisqMarket24hVolumes error'));
+    }
+  }
+
   private parseRequestParameters(requestParams: object, params: RequiredSpec): { [name: string]: any; } {
     const final = {};
     for (const i in params) {

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

@@ -59,4 +59,8 @@ export class BisqApiService {
   | 'week' | 'month' | 'year' | 'auto'): Observable<any[]> {
     return this.httpClient.get<any[]>(API_BASE_URL + '/markets/hloc?market=' + market + '&interval=' + interval);
   }
+
+  getMarket24hVolumes$(): Observable<any[]> {
+    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/24hvolumes');
+  }
 }

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

@@ -4,20 +4,28 @@
 
   <table class="table table-borderless table-striped">
     <thead>
-      <th style="width: 20%;" i18n>Coin</th>
-      <th class="d-none d-md-block" style="width: 100%;" i18n>Pair</th>
-      <th style="width: 20%;" i18n>Price</th>
-      <th style="width: 20%;" i18n>24h volume</th>
-      <th class="d-none d-md-block" i18n>Volume %</th>
+      <th i18n>Rank</th>
+      <th i18n>Currency</th>
+      <th i18n>Pair</th>
+      <th i18n>Price</th>
+      <th i18n>Volume (24h)</th>
+      <th i18n>Trades (24h)</th>
     </thead>
     <tbody *ngIf="tickers.value; else loadingTmpl">
-      <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn">
+      <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn; let i = index">
+        <td>{{ i + 1 }}</td>
         <td>{{ ticker.market.lname }}</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>
-          <ng-template #fiat><span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span></ng-template>
+          <ng-template #fiat>
+            <span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span>
+          </ng-template>
         </td>
+        <td>
+          <app-fiat [value]="ticker.volume?.volume"></app-fiat>
+        </td>
+        <td>{{ ticker.volume?.num_trades }}</td>
       </tr> 
     </tbody>
   </table>
@@ -29,6 +37,6 @@
 
 <ng-template #loadingTmpl>
   <tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
-    <td *ngFor="let j of [1, 2, 3, 4, 5]"><span class="skeleton-loader"></span></td>
+    <td *ngFor="let j of [1, 2, 3, 4, 5, 6]"><span class="skeleton-loader"></span></td>
   </tr>
 </ng-template>

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

@@ -19,18 +19,23 @@ export class BisqDashboardComponent implements OnInit {
   ngOnInit(): void {
     this.tickers$ = combineLatest([
       this.bisqApiService.getMarketsTicker$(),
-      this.bisqApiService.getMarkets$()
+      this.bisqApiService.getMarkets$(),
+      this.bisqApiService.getMarket24hVolumes$(),
     ])
     .pipe(
-      map(([tickers, markets]) => {
+      map(([tickers, markets, volumes]) => {
         const newTickers = [];
         for (const t in tickers) {
           tickers[t].pair_url = t;
           tickers[t].pair = t.replace('_', '/').toUpperCase();
           tickers[t].market = markets[t];
+          tickers[t].volume = volumes[t];
           newTickers.push(tickers[t]);
         }
         console.log(newTickers);
+
+        newTickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0));
+
         return newTickers;
       })
     );

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

@@ -5,18 +5,17 @@
     <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>
+        <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</ng-container>
+        <ng-template #headerPriceCrypto>{{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
       </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>