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

<div class="container-xl">

  <h1>Trading volume</h1>

  <div id="volumeHolder">
    <ng-template #loadingVolumes>
      <div class="text-center loadingVolumes">
        <div class="spinner-border text-light"></div>
      </div>  
    </ng-template>
    <ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes">
      <app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
    </ng-container>
  </div>

  <br>

  <h1>Markets</h1>
  <ng-container *ngIf="{ value: (tickers$ | async) } as tickers">

  <table class="table table-borderless table-striped">
    <thead>
      <th>Currency <button [disabled]="(sort$ | async) === 'name'" class="btn btn-link btn-sm" (click)="sort('name')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
      <th>Price</th>
      <th>Volume (7d) <button [disabled]="(sort$ | async) === 'volumes'" class="btn btn-link btn-sm" (click)="sort('volumes')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
      <th>Trades (7d) <button [disabled]="(sort$ | async) === 'trades'" class="btn btn-link btn-sm" (click)="sort('trades')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
    </thead>
    <tbody *ngIf="tickers.value; else loadingTmpl">
      <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn;">
        <td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.name }})</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>
        </td>
        <td>
          <app-fiat [value]="ticker.volume?.volume"></app-fiat>
        </td>
        <td>{{ ticker.volume?.num_trades }}</td>
      </tr> 
    </tbody>
  </table>

  <br><br>

  <h2>Latest trades</h2>
  <table class="table table-borderless table-striped">
    <thead>
      <th>Date</th>
      <th>Price</th>
      <th>Trade amount</th>
      <th>Trade amount</th>
    </thead>
    <tbody *ngIf="trades$ | async as trades; else loadingTmpl">
      <tr *ngFor="let trade of trades">
        <td>
          {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
        </td>
        <td>
          <ng-container *ngIf="trade._market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: trade._market.rsymbol }}</span></ng-container>
          <ng-template #priceCrypto>{{ trade.price | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }}</ng-template>
        </td>
        <td>
          <ng-container *ngIf="trade._market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: trade._market.rsymbol }}</span></ng-container>
          <ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }}</ng-template>
        </td>
        <td>
          <ng-container *ngIf="trade._market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: trade._market.rsymbol }}</span></ng-container>
          <ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + trade._market.lprecision }} {{ trade._market.lsymbol }}</ng-template>
        </td>
      </tr> 
    </tbody>
  </table>

  </ng-container>
</div>

<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]"><span class="skeleton-loader"></span></td>
  </tr>
</ng-template>