Sort table by number of trades as default sort option, make other columns sortable

frontend/src/app/app.module.ts

@@ -45,7 +45,7 @@ import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp } from '@fortawesome/free-solid-svg-icons';
+  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp, faSort, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { StorageService } from './services/storage.service';
@@ -129,5 +129,6 @@ export class AppModule {
     library.addIcons(faExchangeAlt);
     library.addIcons(faAngleDoubleUp);
     library.addIcons(faAngleDoubleDown);
+    library.addIcons(faChevronDown);
   }
 }

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

@@ -20,14 +20,14 @@
 
   <table class="table table-borderless table-striped">
     <thead>
-      <th>Currency</th>
+      <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)</th>
-      <th>Trades (7d)</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.market.rtype === 'crypto' ? ticker.market.lname : ticker.market.rname }} ({{ ticker.market.rtype === 'crypto' ? ticker.market.lsymbol : ticker.market.rsymbol }})</a></td>
+        <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>

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { Observable, combineLatest } from 'rxjs';
-import { map, share } from 'rxjs/operators';
+import { Observable, combineLatest, BehaviorSubject, of } from 'rxjs';
+import { map, share, switchMap } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
 import { WebsocketService } from 'src/app/services/websocket.service';
@@ -17,6 +17,7 @@ export class BisqDashboardComponent implements OnInit {
   tickers$: Observable<any>;
   volumes$: Observable<any>;
   trades$: Observable<Trade[]>;
+  sort$ = new BehaviorSubject<string>('trades');
 
   allowCryptoCoins = ['usdc', 'l-btc', 'bsq'];
 
@@ -81,12 +82,21 @@ export class BisqDashboardComponent implements OnInit {
           mappedTicker.pair = t.replace('_', '/').toUpperCase();
           mappedTicker.market = markets[t];
           mappedTicker.volume = volumes[t];
+          mappedTicker.name = `${mappedTicker.market.rtype === 'crypto' ? mappedTicker.market.lname : mappedTicker.market.rname} (${mappedTicker.market.rtype === 'crypto' ? mappedTicker.market.lsymbol : mappedTicker.market.rsymbol}`;
           newTickers.push(mappedTicker);
         }
-
-        newTickers.sort((a, b) => (b.volume && b.volume.num_trades || 0) - (a.volume && a.volume.num_trades || 0));
-
         return newTickers;
+      }),
+      switchMap((tickers) => combineLatest([this.sort$, of(tickers)])),
+      map(([sort, tickers]) => {
+        if (sort === 'trades') {
+          tickers.sort((a, b) => (b.volume && b.volume.num_trades || 0) - (a.volume && a.volume.num_trades || 0));
+        } else if (sort === 'volumes') {
+          tickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0));
+        } else if (sort === 'name') {
+          tickers.sort((a, b) => a.name.localeCompare(b.name));
+        }
+        return tickers;
       })
     );
 
@@ -96,15 +106,20 @@ export class BisqDashboardComponent implements OnInit {
     ])
     .pipe(
       map(([trades, markets]) => {
-      return trades.map((trade => {
-        trade._market = markets[trade.market];
-        return trade;
-      }));
-    }));
+        return trades.map((trade => {
+          trade._market = markets[trade.market];
+          return trade;
+        }));
+      })
+    );
   }
 
   trackByFn(index: number) {
     return index;
   }
 
+  sort(by: string) {
+    this.sort$.next(by);
+  }
+
 }