machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bisq markets dashboard: 24H Volume. WIP.

Browse Source
This commit is contained in:
softsimon
2021-02-28 17:18:29 +07:00
parent eeb7447988
commit 38e866995f
7 changed files with 63 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
View File

@@ -4,20 +4,28 @@
<table class="table table-borderless table-striped">
<thead>
<th style="width: 20%;" i18n>Coin</th>
<th class="d-none d-md-block" style="width: 100%;" i18n>Pair</th>
<th style="width: 20%;" i18n>Price</th>
<th style="width: 20%;" i18n>24h volume</th>
<th class="d-none d-md-block" i18n>Volume %</th>
<th i18n>Rank</th>
<th i18n>Currency</th>
<th i18n>Pair</th>
<th i18n>Price</th>
<th i18n>Volume (24h)</th>
<th i18n>Trades (24h)</th>
</thead>
<tbody *ngIf="tickers.value; else loadingTmpl">
<tr *ngFor="let ticker of tickers.value; trackBy: trackByFn">
<tr *ngFor="let ticker of tickers.value; trackBy: trackByFn; let i = index">
<td>{{ i + 1 }}</td>
<td>{{ ticker.market.lname }}</td>
<td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.pair }}</a></td>
<td>
<app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
<ng-template #fiat><span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span></ng-template>
<ng-template #fiat>
<span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span>
</ng-template>
</td>
<td>
<app-fiat [value]="ticker.volume?.volume"></app-fiat>
</td>
<td>{{ ticker.volume?.num_trades }}</td>
</tr>
</tbody>
</table>
@@ -29,6 +37,6 @@
<ng-template #loadingTmpl>
<tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
<td *ngFor="let j of [1, 2, 3, 4, 5]"><span class="skeleton-loader"></span></td>
<td *ngFor="let j of [1, 2, 3, 4, 5, 6]"><span class="skeleton-loader"></span></td>
</tr>
</ng-template>

9
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts
View File

@@ -19,18 +19,23 @@ export class BisqDashboardComponent implements OnInit {
ngOnInit(): void {
this.tickers$ = combineLatest([
this.bisqApiService.getMarketsTicker$(),
this.bisqApiService.getMarkets$()
this.bisqApiService.getMarkets$(),
this.bisqApiService.getMarket24hVolumes$(),
])
.pipe(
map(([tickers, markets]) => {
map(([tickers, markets, volumes]) => {
const newTickers = [];
for (const t in tickers) {
tickers[t].pair_url = t;
tickers[t].pair = t.replace('_', '/').toUpperCase();
tickers[t].market = markets[t];
tickers[t].volume = volumes[t];
newTickers.push(tickers[t]);
}
console.log(newTickers);
newTickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0));
return newTickers;
})
);