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 @@ - + - - + + - +
CurrencyCurrency PriceVolume (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); + } + }