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

Rearranged dashboard graphs.

Browse Source
This commit is contained in:
softsimon 2020-09-27 01:31:20 +07:00
parent 677cea329c
commit dbc2f9e2dd
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
1 changed files with 49 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,45 +9,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<table style="width: 100%;">
<tr>
<td>
<h5 class="card-title">Mempool size</h5>
<p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">
{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)
</p>
</td>
<td>
<h5 class="card-title">Unconfirmed</h5>
<p class="card-text" *ngIf="mempoolInfoData.value; else loading">
{{ mempoolInfoData.value.memPoolInfo.size | number }}
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body more-padding">
<h5 class="card-title">Tx weight per second</h5>
<ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
<span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
&nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
</span>
<ng-template #inSync>
<div class="progress sub-text">
<div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s</div>
</div>
</ng-template>
</ng-template>
</div>
</div>
</div>
<div class="col mb-4" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock"> <div class="col mb-4" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
<div class="card text-center"> <div class="card text-center">
<div class="card-body more-padding"> <div class="card-body more-padding">
@ -64,7 +26,27 @@
<div class="col mb-4"> <div class="col mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body pl-0"> <div class="card-body pl-0">
<h5 class="card-title">Mempool by vBytes</h5> <div style="padding-left: 1.25rem;">
<table style="width: 100%;">
<tr>
<td>
<h5 class="card-title">Mempool size</h5>
<p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">
{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)
</p>
</td>
<td>
<h5 class="card-title">Unconfirmed</h5>
<p class="card-text" *ngIf="mempoolInfoData.value; else loading">
{{ mempoolInfoData.value.memPoolInfo.size | number }}
</p>
</td>
</tr>
</table>
</div>
<br>
<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"></app-mempool-graph>
</div> </div>
@ -74,15 +56,28 @@
<div class="col mb-4"> <div class="col mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body more-padding">
<h5 class="card-title">Tx weight per second</h5> <h5 class="card-title">Tx weight per second</h5>
<div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats"> <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
<app-chartist <span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
[data]="mempoolStats.weightPerSecond" &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
[type]="'Line'" </span>
[options]="transactionsWeightPerSecondOptions"> <ng-template #inSync>
</app-chartist> <div class="progress sub-text">
</div> <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s</div>
</div>
</ng-template>
</ng-template>
<br><br>
<div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats">
<app-chartist
[data]="mempoolStats.weightPerSecond"
[type]="'Line'"
[options]="transactionsWeightPerSecondOptions">
</app-chartist>
</div>
</div> </div>
</div> </div>
</div> </div>