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>