mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-29 09:44:26 +01:00
Code Issues Projects Releases Wiki Activity

Dashboard ux fixes.

Browse Source
This commit is contained in:
softsimon 2020-09-28 02:51:01 +07:00
parent 3e3dd83243
commit 7848481d8f
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -15,7 +15,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
@Input() dateSpan = '2h'; @Input() dateSpan = '2h';
@Input() showLegend = true; @Input() showLegend = true;
@Input() offsetX = 40; @Input() offsetX = 40;
@Input() offsetY = 40; @Input() small = false;
mempoolVsizeFeesOptions: any; mempoolVsizeFeesOptions: any;
mempoolVsizeFeesData: any; mempoolVsizeFeesData: any;
@ -30,7 +30,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
ngOnInit(): void { ngOnInit(): void {
const showLegend = !this.isMobile && this.showLegend; const showLegend = !this.isMobile && this.showLegend;
const labelHops = this.isMobile || !this.showLegend ? 12 : 6; let labelHops = !this.showLegend ? 12 : 6;
if (this.small) {
labelHops = labelHops * 2;
}
const labelInterpolationFnc = (value: any, index: any) => { const labelInterpolationFnc = (value: any, index: any) => {
switch (this.dateSpan) { switch (this.dateSpan) {
@ -61,9 +64,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
offset: this.offsetX, offset: this.offsetX,
}, },
axisY: { axisY: {
labelInterpolationFnc: (value: number): any => { labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
return this.vbytesPipe.transform(value, 2);
},
offset: showLegend ? 160 : 80, offset: showLegend ? 160 : 80,
}, },
plugins: [ plugins: [

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

@ -36,7 +36,7 @@
<td> <td>
<h5 class="card-title">Unconfirmed</h5> <h5 class="card-title">Unconfirmed</h5>
<p class="card-text" *ngIf="mempoolInfoData.value; else loading"> <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
{{ mempoolInfoData.value.memPoolInfo.size | number }} txs {{ mempoolInfoData.value.memPoolInfo.size | number }} TXs
</p> </p>
</td> </td>
</tr> </tr>
@ -44,7 +44,7 @@
<hr> <hr>
</div> </div>
<div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats"> <div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats">
<app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="10"></app-mempool-graph> <app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="10" [small]="true"></app-mempool-graph>
</div> </div>
</div> </div>
</div> </div>
@ -110,14 +110,16 @@
<h5 class="card-title">Latest transactions</h5> <h5 class="card-title">Latest transactions</h5>
<table class="table table-borderless text-left"> <table class="table table-borderless text-left">
<thead> <thead>
<th style="width: 25%;">TXID</th> <th style="width: 20%;">TXID</th>
<th style="width: 50%;" class="text-right d-none d-lg-table-cell">Amount (BTC)</th> <th style="width: 35%;" class="text-right d-none d-lg-table-cell">Amount (BTC)</th>
<th style="width: 20%;" class="text-right d-none d-lg-table-cell">USD</th>
<th style="width: 25%;" class="text-right">Fee</th> <th style="width: 25%;" class="text-right">Fee</th>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let transaction of transactions$ | async; let i = index;"> <tr *ngFor="let transaction of transactions$ | async; let i = index;">
<td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 12 }}</a></td> <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.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat>)</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 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> <td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB</td>
</tr> </tr>
</tbody> </tbody>

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

@ -189,7 +189,7 @@ export class DashboardComponent implements OnInit {
offset: 40 offset: 40
}, },
axisX: { axisX: {
labelInterpolationFnc: (value: any, index: any) => index % 12 === 0 ? formatDate(value, 'HH:mm', this.locale) : null, labelInterpolationFnc: (value: any, index: any) => index % 24 === 0 ? formatDate(value, 'HH:mm', this.locale) : null,
offset: 10 offset: 10
}, },
plugins: [ plugins: [