diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index f7d758a3f..3afa8a32c 100644
--- a/frontend/src/app/app.module.ts
+++ b/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);
}
}
diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
index 25381ef08..f41a9ddd7 100644
--- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
+++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
@@ -20,14 +20,14 @@
- Currency |
+ Currency |
Price |
- Volume (7d) |
- Trades (7d) |
+ Volume (7d) |
+ Trades (7d) |
- {{ ticker.market.rtype === 'crypto' ? ticker.market.lname : ticker.market.rname }} ({{ ticker.market.rtype === 'crypto' ? ticker.market.lsymbol : ticker.market.rsymbol }}) |
+ {{ ticker.name }}) |
diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts
index 52e1a9393..bbecbd246 100644
--- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts
+++ b/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;
volumes$: Observable;
trades$: Observable;
+ sort$ = new BehaviorSubject('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);
+ }
+
}
|