mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-01 03:04:27 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1281 from mempool/simon/footer-transactions-bar-fix

Browse Source
This commit is contained in:
wiz 2022-02-23 03:35:54 +00:00 committed by GitHub
commit b2d591b5bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/app/components/footer/footer.component.html
View File

@ -2,15 +2,18 @@
<div class="container-xl"> <div class="container-xl">
<div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData"> <div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
<div class="col d-none d-sm-block"> <div class="col d-none d-sm-block">
<span class="txPerSecond" i18n="footer.tx-vbytes-per-second">Tx vBytes per second:</span> <span class="txPerSecond" i18n="dashboard.incoming-transactions">Incoming transactions</span>&nbsp;
<span *ngIf="mempoolInfoData.vBytesPerSecond === 0; else inSync"> <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData" [ngIfElse]="loadingTransactions">
&nbsp;<span class="badge badge-pill badge-warning" i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</span> <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
</span> &nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>
<ng-template #inSync> </span>
<div class="progress sub-text"> <ng-template #inSync>
<div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div> <div class="progress inc-tx-progress-bar">
</div> <div class="progress-bar" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth, 'background-color': mempoolInfoData.progressColor}">&nbsp;</div>
</ng-template> <div class="progress-text">&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
</div>
</ng-template>
</ng-template>
</div> </div>
<div class="col"> <div class="col">
<span class="unconfirmedTx"><ng-container i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</ng-container>:</span> <span class="unconfirmedTx"><ng-container i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</ng-container>:</span>
@ -25,3 +28,7 @@
</div> </div>
</div> </div>
</footer> </footer>
<ng-template #loadingTransactions>
<div class="skeleton-loader skeleton-loader-transactions"></div>
</ng-template>

73
frontend/src/app/components/footer/footer.component.ts
View File

@ -13,7 +13,7 @@ interface MempoolInfoData {
memPoolInfo: MempoolInfo; memPoolInfo: MempoolInfo;
vBytesPerSecond: number; vBytesPerSecond: number;
progressWidth: string; progressWidth: string;
progressClass: string; progressColor: string;
} }
@Component({ @Component({
@ -26,35 +26,62 @@ export class FooterComponent implements OnInit {
mempoolBlocksData$: Observable<MempoolBlocksData>; mempoolBlocksData$: Observable<MempoolBlocksData>;
mempoolInfoData$: Observable<MempoolInfoData>; mempoolInfoData$: Observable<MempoolInfoData>;
vBytesPerSecondLimit = 1667; vBytesPerSecondLimit = 1667;
isLoadingWebSocket$: Observable<boolean>;
mempoolLoadingStatus$: Observable<number>;
constructor( constructor(
private stateService: StateService, private stateService: StateService,
) { } ) { }
ngOnInit() { ngOnInit() {
this.mempoolInfoData$ = combineLatest([ this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
this.stateService.mempoolInfo$, this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$
this.stateService.vbytesPerSecond$ .pipe(
]) map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
.pipe( );
map(([mempoolInfo, vbytesPerSecond]) => {
const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
let progressClass = 'bg-danger'; this.mempoolInfoData$ = combineLatest([
if (percent <= 75) { this.stateService.mempoolInfo$,
progressClass = 'bg-success'; this.stateService.vbytesPerSecond$
} else if (percent <= 99) { ])
progressClass = 'bg-warning'; .pipe(
} map(([mempoolInfo, vbytesPerSecond]) => {
const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
return {
memPoolInfo: mempoolInfo, let progressColor = '#7CB342';
vBytesPerSecond: vbytesPerSecond, if (vbytesPerSecond > 1667) {
progressWidth: percent + '%', progressColor = '#FDD835';
progressClass: progressClass, }
}; if (vbytesPerSecond > 2000) {
}) progressColor = '#FFB300';
); }
if (vbytesPerSecond > 2500) {
progressColor = '#FB8C00';
}
if (vbytesPerSecond > 3000) {
progressColor = '#F4511E';
}
if (vbytesPerSecond > 3500) {
progressColor = '#D81B60';
}
const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
let mempoolSizeProgress = 'bg-danger';
if (mempoolSizePercentage <= 50) {
mempoolSizeProgress = 'bg-success';
} else if (mempoolSizePercentage <= 75) {
mempoolSizeProgress = 'bg-warning';
}
return {
memPoolInfo: mempoolInfo,
vBytesPerSecond: vbytesPerSecond,
progressWidth: percent + '%',
progressColor: progressColor,
mempoolSizeProgress: mempoolSizeProgress,
};
})
);
this.mempoolBlocksData$ = this.stateService.mempoolBlocks$ this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
.pipe( .pipe(