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

Dashboard ux fixes.

Browse Source
This commit is contained in:
softsimon 2020-09-28 23:05:42 +07:00
parent da5556e3dc
commit 64244228ea
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/dashboard/dashboard.component.html
View File

@ -22,7 +22,7 @@
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card text-center graph-card">
<div class="card-body pl-0">
<div style="padding-left: 1.25rem;">
<table style="width: 100%;">
@ -50,8 +50,8 @@
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body more-padding">
<div class="card text-center graph-card">
<div class="card-body ">
<h5 class="card-title">Tx weight per second</h5>
<ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
<span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
@ -112,14 +112,14 @@
<thead>
<th style="width: 20%;">TXID</th>
<th style="width: 35%;" class="text-right d-none d-lg-table-cell">Amount</th>
<th *ngIf="(network$ | async) !== 'liquid'" style="width: 20%;" class="text-right d-none d-lg-table-cell">USD</th>
<th *ngIf="(network$ | async) === ''" style="width: 20%;" class="text-right d-none d-lg-table-cell">USD</th>
<th style="width: 25%;" class="text-right">Fee</th>
</thead>
<tbody>
<tr *ngFor="let transaction of transactions$ | async; let i = index;">
<td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
<td class="text-right d-none d-lg-table-cell"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
<td *ngIf="(network$ | async) !== 'liquid'" class="text-right d-none d-lg-table-cell"><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
<td *ngIf="(network$ | async) === ''" class="text-right d-none d-lg-table-cell"><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
<td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB</td>
</tr>
</tbody>

4
frontend/src/app/dashboard/dashboard.component.scss
View File

@ -30,3 +30,7 @@
.more-padding {
padding: 1.25rem 2rem 1.25rem 2rem;
}
.graph-card {
height: 385px;
}

49
frontend/src/app/dashboard/dashboard.component.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
import { combineLatest, merge, Observable, of } from 'rxjs';
import { map, scan, share, switchMap, tap } from 'rxjs/operators';
import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
import { Block } from '../interfaces/electrs.interface';
import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
@ -158,29 +158,30 @@ export class DashboardComponent implements OnInit {
map((txs) => txs.slice(0, 6)),
);
this.mempoolStats$ = this.apiService.list2HStatistics$()
.pipe(
switchMap((mempoolStats) => {
return merge(
this.stateService.live2Chart$
.pipe(
scan((acc, stats) => {
acc.unshift(stats);
acc = acc.slice(0, acc.length - 1);
return acc;
}, mempoolStats)
),
of(mempoolStats)
);
}),
map((mempoolStats) => {
return {
mempool: mempoolStats,
weightPerSecond: this.handleNewMempoolData(mempoolStats.concat([])),
};
}),
share(),
);
this.mempoolStats$ = this.stateService.connectionState$.pipe(
filter((state) => state === 2),
switchMap(() => this.apiService.list2HStatistics$()),
switchMap((mempoolStats) => {
return merge(
this.stateService.live2Chart$
.pipe(
scan((acc, stats) => {
acc.unshift(stats);
acc = acc.slice(0, acc.length - 1);
return acc;
}, mempoolStats)
),
of(mempoolStats)
);
}),
map((mempoolStats) => {
return {
mempool: mempoolStats,
weightPerSecond: this.handleNewMempoolData(mempoolStats.concat([])),
};
}),
share(),
);
this.transactionsWeightPerSecondOptions = {
showArea: false,