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

query param toggle for clock stats

Browse Source
This commit is contained in:
Mononaut 2023-04-20 00:30:55 +09:00
parent 056d61a28d
commit fdb0cf509d
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 39 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/app/components/clock/clock.component.html
View File

@ -31,35 +31,37 @@
</div> </div>
</app-clock-face> </app-clock-face>
</div> </div>
<div class="stats top left"> <ng-container *ngIf="!hideStats">
<p i18n="clock.fiat-price">fiat price</p> <div class="stats top left">
<p> <p i18n="clock.fiat-price">fiat price</p>
<app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat> <p>
</p> <app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat>
</div> </p>
<div class="stats top right">
<p i18n="clock.priority-rate|priority fee rate">priority rate</p>
<p *ngIf="recommendedFees$ | async as recommendedFees;" i18n="shared.sat-vbyte|sat/vB">{{ recommendedFees.fastestFee }} sat/vB</p>
</div>
<div *ngIf="mode !== 'mempool'" class="stats bottom left">
<p [innerHTML]="block.size | bytes: 2"></p>
<p i18n="clock.block-size">block size</p>
</div>
<div *ngIf="mode !== 'mempool'" class="stats bottom right">
<p class="force-wrap">
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</p>
</div>
<ng-container *ngIf="mempoolInfo$ | async as mempoolInfo;">
<div *ngIf="mode === 'mempool'" class="stats bottom left">
<p [innerHTML]="mempoolInfo.usage | bytes: 0"></p>
<p i18n="dashboard.memory-usage|Memory usage">memory usage</p>
</div> </div>
<div *ngIf="mode === 'mempool'" class="stats bottom right"> <div class="stats top right">
<p>{{ mempoolInfo.size | number }}</p> <p i18n="clock.priority-rate|priority fee rate">priority rate</p>
<p i18n="dashboard.unconfirmed|Unconfirmed count">unconfirmed</p> <p *ngIf="recommendedFees$ | async as recommendedFees;" i18n="shared.sat-vbyte|sat/vB">{{ recommendedFees.fastestFee }} sat/vB</p>
</div> </div>
<div *ngIf="mode !== 'mempool'" class="stats bottom left">
<p [innerHTML]="block.size | bytes: 2"></p>
<p i18n="clock.block-size">block size</p>
</div>
<div *ngIf="mode !== 'mempool'" class="stats bottom right">
<p class="force-wrap">
<ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</p>
</div>
<ng-container *ngIf="mempoolInfo$ | async as mempoolInfo;">
<div *ngIf="mode === 'mempool'" class="stats bottom left">
<p [innerHTML]="mempoolInfo.usage | bytes: 0"></p>
<p i18n="dashboard.memory-usage|Memory usage">memory usage</p>
</div>
<div *ngIf="mode === 'mempool'" class="stats bottom right">
<p>{{ mempoolInfo.size | number }}</p>
<p i18n="dashboard.unconfirmed|Unconfirmed count">unconfirmed</p>
</div>
</ng-container>
</ng-container> </ng-container>
</div> </div>

9
frontend/src/app/components/clock/clock.component.ts
View File

@ -4,6 +4,7 @@ import { StateService } from '../../services/state.service';
import { BlockExtended } from '../../interfaces/node-api.interface'; import { BlockExtended } from '../../interfaces/node-api.interface';
import { WebsocketService } from '../../services/websocket.service'; import { WebsocketService } from '../../services/websocket.service';
import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface'; import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface';
import { ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-clock', selector: 'app-clock',
@ -13,6 +14,7 @@ import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interfa
}) })
export class ClockComponent implements OnInit { export class ClockComponent implements OnInit {
@Input() mode: 'block' | 'mempool' = 'block'; @Input() mode: 'block' | 'mempool' = 'block';
hideStats: boolean = false;
blocksSubscription: Subscription; blocksSubscription: Subscription;
recommendedFees$: Observable<Recommendedfees>; recommendedFees$: Observable<Recommendedfees>;
mempoolInfo$: Observable<MempoolInfo>; mempoolInfo$: Observable<MempoolInfo>;
@ -36,12 +38,18 @@ export class ClockComponent implements OnInit {
constructor( constructor(
public stateService: StateService, public stateService: StateService,
private websocketService: WebsocketService, private websocketService: WebsocketService,
private route: ActivatedRoute,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
this.resizeCanvas(); this.resizeCanvas();
this.websocketService.want(['blocks']); this.websocketService.want(['blocks']);
this.route.queryParams.subscribe((params) => {
this.hideStats = params && params.stats === 'false';
});
this.blocksSubscription = this.stateService.blocks$ this.blocksSubscription = this.stateService.blocks$
.subscribe(([block]) => { .subscribe(([block]) => {
if (block) { if (block) {
@ -50,6 +58,7 @@ export class ClockComponent implements OnInit {
this.cd.markForCheck(); this.cd.markForCheck();
} }
}); });
this.recommendedFees$ = this.stateService.recommendedFees$; this.recommendedFees$ = this.stateService.recommendedFees$;
this.mempoolInfo$ = this.stateService.mempoolInfo$; this.mempoolInfo$ = this.stateService.mempoolInfo$;
} }