query param toggle for clock stats
This commit is contained in:
parent
056d61a28d
commit
fdb0cf509d
@ -31,35 +31,37 @@
|
||||
</div>
|
||||
</app-clock-face>
|
||||
</div>
|
||||
<div class="stats top left">
|
||||
<p i18n="clock.fiat-price">fiat price</p>
|
||||
<p>
|
||||
<app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat>
|
||||
</p>
|
||||
</div>
|
||||
<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>
|
||||
<ng-container *ngIf="!hideStats">
|
||||
<div class="stats top left">
|
||||
<p i18n="clock.fiat-price">fiat price</p>
|
||||
<p>
|
||||
<app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat>
|
||||
</p>
|
||||
</div>
|
||||
<div *ngIf="mode === 'mempool'" class="stats bottom right">
|
||||
<p>{{ mempoolInfo.size | number }}</p>
|
||||
<p i18n="dashboard.unconfirmed|Unconfirmed count">unconfirmed</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 *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>
|
||||
</div>
|
@ -4,6 +4,7 @@ import { StateService } from '../../services/state.service';
|
||||
import { BlockExtended } from '../../interfaces/node-api.interface';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-clock',
|
||||
@ -13,6 +14,7 @@ import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interfa
|
||||
})
|
||||
export class ClockComponent implements OnInit {
|
||||
@Input() mode: 'block' | 'mempool' = 'block';
|
||||
hideStats: boolean = false;
|
||||
blocksSubscription: Subscription;
|
||||
recommendedFees$: Observable<Recommendedfees>;
|
||||
mempoolInfo$: Observable<MempoolInfo>;
|
||||
@ -36,12 +38,18 @@ export class ClockComponent implements OnInit {
|
||||
constructor(
|
||||
public stateService: StateService,
|
||||
private websocketService: WebsocketService,
|
||||
private route: ActivatedRoute,
|
||||
private cd: ChangeDetectorRef,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.resizeCanvas();
|
||||
this.websocketService.want(['blocks']);
|
||||
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
this.hideStats = params && params.stats === 'false';
|
||||
});
|
||||
|
||||
this.blocksSubscription = this.stateService.blocks$
|
||||
.subscribe(([block]) => {
|
||||
if (block) {
|
||||
@ -50,6 +58,7 @@ export class ClockComponent implements OnInit {
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
});
|
||||
|
||||
this.recommendedFees$ = this.stateService.recommendedFees$;
|
||||
this.mempoolInfo$ = this.stateService.mempoolInfo$;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user