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

Replacing footer and latest blocks with a stats dashboard.

Browse Source
This commit is contained in:
softsimon
2020-09-21 19:41:12 +07:00
parent 64705a9e9c
commit d915edd3de
18 changed files with 235 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/app/dashboard/dashboard.component.html Normal file
View File

@@ -0,0 +1,51 @@
<app-fees-box *ngIf="(network$ | async) === ''" class="d-block mr-2 ml-2 mb-5"></app-fees-box>
<div class="container-xl">
<div class="row row-cols-1 row-cols-md-2" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title mempoolSize">Mempool size</h5>
<p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title unconfirmedTx">Unconfirmed transactions</h5>
<p class="card-text">{{ mempoolInfoData.memPoolInfo.size | number }}</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title txWeightPerSecond">Tx weight per second</h5>
<span *ngIf="mempoolInfoData.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.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} vB/s</div>
</div>
</ng-template>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title txPerSecond">Difficulty Epoch</h5>
<div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData">
<div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 1%; background-color: #f14d80;" [ngStyle]="{'width': epochData.red}"></div>
</div>
</div>
</div>
</div>
</div>
</div>

36
frontend/src/app/dashboard/dashboard.component.scss Normal file
View File

@@ -0,0 +1,36 @@
.card {
background-color: #1d1f31;
}
.txWeightPerSecond {
color: #4a9ff4;
}
.mempoolSize {
color: #4a68b9;
}
.txPerSecond {
color: #f4bb4a;;
}
.unconfirmedTx {
color: #f14d80;
}
.info-block {
float: left;
width: 350px;
line-height: 25px;
}
.progress {
display: inline-flex;
width: 250px;
background-color: #2d3348;
height: 1.1rem;
}
.bg-warning {
background-color: #b58800 !important;
}

114
frontend/src/app/dashboard/dashboard.component.ts Normal file
View File

@@ -0,0 +1,114 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { combineLatest, merge, Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { MempoolInfo } from '../interfaces/websocket.interface';
import { StateService } from '../services/state.service';
interface MempoolBlocksData {
blocks: number;
size: number;
}
interface EpochProgress {
base: string;
green: string;
red: string;
}
interface MempoolInfoData {
memPoolInfo: MempoolInfo;
vBytesPerSecond: number;
progressWidth: string;
progressClass: string;
}
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent implements OnInit {
network$: Observable<string>;
mempoolBlocksData$: Observable<MempoolBlocksData>;
latestBlockHeight$: Observable<number>;
mempoolInfoData$: Observable<MempoolInfoData>;
difficultyEpoch$: Observable<EpochProgress>;
vBytesPerSecondLimit = 1667;
constructor(
private stateService: StateService,
) { }
ngOnInit(): void {
this.network$ = merge(of(''), this.stateService.networkChanged$);
this.mempoolInfoData$ = combineLatest([
this.stateService.mempoolInfo$,
this.stateService.vbytesPerSecond$
])
.pipe(
map(([mempoolInfo, vbytesPerSecond]) => {
const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
let progressClass = 'bg-danger';
if (percent <= 75) {
progressClass = 'bg-success';
} else if (percent <= 99) {
progressClass = 'bg-warning';
}
return {
memPoolInfo: mempoolInfo,
vBytesPerSecond: vbytesPerSecond,
progressWidth: percent + '%',
progressClass: progressClass,
};
})
);
this.difficultyEpoch$ = combineLatest([
this.stateService.blocks$.pipe(map(([block]) => block)),
this.stateService.lastDifficultyAdjustment$
])
.pipe(
map(([block, DATime]) => {
const now = new Date().getTime() / 1000;
const diff = now - DATime;
const blocksInEpoch = block.height % 2016;
const estimatedBlocks = Math.round(diff / 60 / 10);
let base = 0;
let green = 0;
let red = 0;
if (blocksInEpoch >= estimatedBlocks) {
base = estimatedBlocks / 2016 * 100;
green = (blocksInEpoch - estimatedBlocks) / 2016 * 100;
} else {
base = blocksInEpoch / 2016 * 100;
red = (estimatedBlocks - blocksInEpoch) / 2016 * 100;
}
return {
base: base + '%',
green: green + '%',
red: red + '%',
};
})
);
this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
.pipe(
map((mempoolBlocks) => {
const size = mempoolBlocks.map((m) => m.blockSize).reduce((a, b) => a + b, 0);
const vsize = mempoolBlocks.map((m) => m.blockVSize).reduce((a, b) => a + b, 0);
return {
size: size,
blocks: Math.ceil(vsize / 1000000)
};
})
);
}
}