Bisq markets: General trading volume graph.

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

@@ -1,21 +1,28 @@
-<div class="container-xl">  
+<div class="container-xl">
+
+  <h1>Trading volume</h1>
+
+  <div id="volumeHolder">
+    <ng-container *ngIf="volumes$ | async as volumes">
+      <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>Rank</th>
       <th>Currency</th>
-      <th>Pair</th>
       <th>Price</th>
       <th>Volume (7d)</th>
       <th>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.rtype === 'crypto' ? ticker.market.lname : ticker.market.rname }}</td>
-        <td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.pair }}</a></td>
+      <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn;">
+        <td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.market.rtype === 'crypto' ? ticker.market.lname : ticker.market.rname }} ({{ ticker.market.rtype === 'crypto' ? ticker.market.lsymbol : ticker.market.rsymbol }})</a></td>
         <td>
           <app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
           <ng-template #fiat>

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

@@ -0,0 +1,4 @@
+#volumeHolder {
+    height: 500px;
+    background-color: #000;
+}

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

@@ -14,6 +14,8 @@ import { BisqApiService } from '../bisq-api.service';
 })
 export class BisqDashboardComponent implements OnInit {
   tickers$: Observable<any>;
+  volumes$: Observable<any>;
+
   allowCryptoCoins = ['usdc', 'l-btc', 'bsq'];
 
   constructor(
@@ -27,6 +29,30 @@ export class BisqDashboardComponent implements OnInit {
     this.seoService.setTitle(`Markets`);
     this.websocketService.want(['blocks']);
 
+    this.volumes$ = this.bisqApiService.getAllVolumesDay$()
+      .pipe(
+        map((volumes) => {
+          const data = volumes.map((volume) => {
+            return {
+              time: volume.period_start,
+              value: volume.volume,
+            };
+          });
+
+          const linesData = volumes.map((volume) => {
+            return {
+              time: volume.period_start,
+              value: volume.num_trades,
+            };
+          });
+
+          return {
+            data: data,
+            linesData: linesData,
+          };
+        })
+      );
+
     this.tickers$ = combineLatest([
       this.bisqApiService.getMarketsTicker$(),
       this.bisqApiService.getMarkets$(),