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

Refactor footer component to using OnPush.

Browse Source
This commit is contained in:
softsimon 2020-07-30 13:50:21 +07:00
parent d1c786e2f6
commit c1caaa37aa
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 56 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,24 @@
<footer class="footer">
<div class="container-xl">
<div class="row text-center" *ngIf="memPoolInfo">
<div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
<div class="col d-none d-sm-block">
<span class="txPerSecond">Tx weight per second:</span>
<span class="" *ngIf="memPoolInfo?.vBytesPerSecond === 0; else inSync">
<span *ngIf="mempoolInfoData.memPoolInfo.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 {{ progressClass }}" role="progressbar" [ngStyle]="{'width': progressWidth}">{{ memPoolInfo?.vBytesPerSecond | ceil | number }} vBytes/s</div>
<div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.memPoolInfo.vBytesPerSecond | ceil | number }} vBytes/s</div>
</div>
</ng-template>
</div>
<div class="col">
<span class="unconfirmedTx">Unconfirmed<span class="extra-text"> transactions</span>:</span>
<div class="sub-text">{{ memPoolInfo?.memPoolInfo?.size | number }}</div>
<div class="sub-text">{{ mempoolInfoData.memPoolInfo.memPoolInfo.size | number }}</div>
</div>
<div class="col">
<span class="mempoolSize">Mempool size:</span>
<div class="sub-text">{{ mempoolSize | bytes }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</div>
<div class="sub-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</div>
</div>
</div>
</div>

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

@ -1,61 +1,72 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { StateService } from 'src/app/services/state.service';
import { MemPoolState } from 'src/app/interfaces/websocket.interface';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
interface MempoolBlocksData {
blocks: number;
size: number;
}
interface MempoolInfoData {
memPoolInfo: MemPoolState;
progressWidth: string;
progressClass: string;
}
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
styleUrls: ['./footer.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FooterComponent implements OnInit {
memPoolInfo: MemPoolState | undefined;
mempoolBlocks = 0;
progressWidth = '';
progressClass: string;
mempoolSize = 0;
mempoolBlocksData$: Observable<MempoolBlocksData>;
mempoolInfoData$: Observable<MempoolInfoData>;
constructor(
private stateService: StateService,
) { }
ngOnInit() {
this.stateService.mempoolStats$
.subscribe((mempoolState) => {
this.memPoolInfo = mempoolState;
this.updateProgress();
});
this.mempoolInfoData$ = this.stateService.mempoolStats$
.pipe(
map((mempoolState) => {
const vBytesPerSecondLimit = 1667;
let vBytesPerSecond = mempoolState.vBytesPerSecond;
if (vBytesPerSecond > 1667) {
vBytesPerSecond = 1667;
}
this.stateService.mempoolBlocks$
.subscribe((mempoolBlocks) => {
if (!mempoolBlocks.length) { return; }
const size = mempoolBlocks.map((m) => m.blockSize).reduce((a, b) => a + b);
const vsize = mempoolBlocks.map((m) => m.blockVSize).reduce((a, b) => a + b);
this.mempoolSize = size;
this.mempoolBlocks = Math.ceil(vsize / 1000000);
});
}
const percent = Math.round((vBytesPerSecond / vBytesPerSecondLimit) * 100);
updateProgress() {
if (!this.memPoolInfo) {
return;
}
let progressClass = 'bg-danger';
if (percent <= 75) {
progressClass = 'bg-success';
} else if (percent <= 99) {
progressClass = 'bg-warning';
}
const vBytesPerSecondLimit = 1667;
return {
memPoolInfo: mempoolState,
progressWidth: percent + '%',
progressClass: progressClass,
};
})
);
let vBytesPerSecond = this.memPoolInfo.vBytesPerSecond;
if (vBytesPerSecond > 1667) {
vBytesPerSecond = 1667;
}
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);
const percent = Math.round((vBytesPerSecond / vBytesPerSecondLimit) * 100);
this.progressWidth = percent + '%';
if (percent <= 75) {
this.progressClass = 'bg-success';
} else if (percent <= 99) {
this.progressClass = 'bg-warning';
} else {
this.progressClass = 'bg-danger';
}
return {
size: size,
blocks: Math.ceil(vsize / 1000000)
};
})
);
}
}