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

4
frontend/src/app/bisq/bisq-api.service.ts
View File

@@ -59,4 +59,8 @@ export class BisqApiService {
| 'week' | 'month' | 'year' | 'auto'): Observable<any[]> {
return this.httpClient.get<any[]>(API_BASE_URL + '/markets/hloc?market=' + market + '&interval=' + interval);
}
getMarket24hVolumes$(): Observable<any[]> {
return this.httpClient.get<any[]>(API_BASE_URL + '/markets/24hvolumes');
}
}

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;
})
);

5
frontend/src/app/bisq/bisq-market/bisq-market.component.html
View File

@@ -5,18 +5,17 @@
<ng-container *ngIf="currency$ | async as currency">
<h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
<div class="float-left">
<b>{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</b>
<ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</ng-container>
<ng-template #headerPriceCrypto>{{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
</div>
</ng-container>
<form [formGroup]="radioGroupForm" class="mb-3 float-right">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
<!--
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'minute'"> 1M
</label>
-->
<label ngbButtonLabel class="btn-primary btn-sm">
<input ngbButton type="radio" [value]="'half_hour'"> 30M
</label>