mirror of
https://github.com/mempool/mempool.git
synced 2025-02-23 14:40:38 +01:00
Refactor accelerator dashboard
This commit is contained in:
Mononaut
parent
e34ee3a34d
commit
8599876b26
22 changed files with 373 additions and 142 deletions
|
|
@ -1,64 +0,0 @@
|
|||
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-acceleration-stats',
|
||||
templateUrl: './acceleration-stats.component.html',
|
||||
styleUrls: ['./acceleration-stats.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AccelerationStatsComponent implements OnInit {
|
||||
@Input() timespan: 'now' | '24h' | '1w' = '24h';
|
||||
public accelerationStats$: Observable<any>;
|
||||
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
if (this.timespan === 'now') {
|
||||
this.accelerationStats$ = this.apiService.getAccelerations$().pipe(
|
||||
switchMap(accelerations => {
|
||||
let totalAccelerations = 0;
|
||||
let totalFeeDelta = 0;
|
||||
let totalVsize = 0;
|
||||
for (const acceleration of accelerations) {
|
||||
totalAccelerations++;
|
||||
totalFeeDelta += acceleration.feeDelta || 0;
|
||||
totalVsize += acceleration.effectiveVsize || 0;
|
||||
}
|
||||
return of({
|
||||
count: totalAccelerations,
|
||||
totalFeeDelta,
|
||||
totalVsize,
|
||||
});
|
||||
})
|
||||
);
|
||||
} else {
|
||||
this.accelerationStats$ = this.apiService.getAccelerationHistory$(this.timespan).pipe(
|
||||
switchMap(accelerations => {
|
||||
let totalFeeDelta = 0;
|
||||
let totalMined = 0;
|
||||
let totalCanceled = 0;
|
||||
for (const acceleration of accelerations) {
|
||||
if (acceleration.status === 'completed') {
|
||||
totalMined++;
|
||||
totalFeeDelta += acceleration.feeDelta || 0;
|
||||
} else if (acceleration.status === 'failed') {
|
||||
totalCanceled++;
|
||||
}
|
||||
}
|
||||
return of({
|
||||
count: totalMined,
|
||||
totalFeeDelta,
|
||||
successRate: (totalMined + totalCanceled > 0) ? ((totalMined / (totalMined + totalCanceled)) * 100) : 0.0,
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -30,15 +30,15 @@
|
|||
<div *ngIf="widget">
|
||||
<div class="acceleration-fees">
|
||||
<div class="item" *ngIf="(hrStatsObservable$ | async) as stats; else loadingHrStats">
|
||||
<h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
|
||||
<h5 class="card-title" i18n="mining.avg-oob-fees-24h">Avg Out-of-band Fees (24h)</h5>
|
||||
<p class="card-text">
|
||||
{{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
|
||||
<app-btc [satoshis]="stats.avgFeesPaid"></app-btc>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
|
||||
<h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
|
||||
<h5 class="card-title" i18n="mining.avg-oob-fees-1w">Avg Out-of-band Fees (1w)</h5>
|
||||
<p class="card-text">
|
||||
{{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
|
||||
<app-btc [satoshis]="stats.avgFeesPaid"></app-btc>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
<ng-template #loadingHrStats>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
|
||||
<h5 class="card-title" i18n="mining.avg-oob-fees-24h">Avg Out-of-band Fees (24h)</h5>
|
||||
<p class="card-text">
|
||||
<span class="skeleton-loader skeleton-loader-big"></span>
|
||||
</p>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
</ng-template>
|
||||
<ng-template #loadingStats>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
|
||||
<h5 class="card-title" i18n="mining.avg-oob-fees-1w">Avg Out-of-band Fees (1w)</h5>
|
||||
<p class="card-text">
|
||||
<span class="skeleton-loader skeleton-loader-big"></span>
|
||||
</p>
|
||||
|
|
@ -2,14 +2,15 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, L
|
|||
import { EChartsOption, graphic } from 'echarts';
|
||||
import { Observable, combineLatest } from 'rxjs';
|
||||
import { map, startWith, switchMap, tap } from 'rxjs/operators';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { SeoService } from '../../services/seo.service';
|
||||
import { ApiService } from '../../../services/api.service';
|
||||
import { SeoService } from '../../../services/seo.service';
|
||||
import { formatNumber } from '@angular/common';
|
||||
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
|
||||
import { download, formatterXAxis } from '../../shared/graphs.utils';
|
||||
import { StorageService } from '../../services/storage.service';
|
||||
import { MiningService } from '../../services/mining.service';
|
||||
import { download, formatterXAxis } from '../../../shared/graphs.utils';
|
||||
import { StorageService } from '../../../services/storage.service';
|
||||
import { MiningService } from '../../../services/mining.service';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Acceleration } from '../../../interfaces/node-api.interface';
|
||||
|
||||
@Component({
|
||||
selector: 'app-acceleration-fees-graph',
|
||||
|
|
@ -29,6 +30,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
|
|||
@Input() widget: boolean = false;
|
||||
@Input() right: number | string = 45;
|
||||
@Input() left: number | string = 75;
|
||||
@Input() accelerations$: Observable<Acceleration[]>;
|
||||
|
||||
miningWindowPreference: string;
|
||||
radioGroupForm: UntypedFormGroup;
|
||||
|
|
@ -69,16 +71,16 @@ export class AccelerationFeesGraphComponent implements OnInit {
|
|||
this.isLoading = true;
|
||||
this.timespan = this.miningWindowPreference;
|
||||
|
||||
this.hrStatsObservable$ = this.apiService.getAccelerationHistory$('24h').pipe(
|
||||
this.hrStatsObservable$ = (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: '24h' })).pipe(
|
||||
map((accelerations) => {
|
||||
return {
|
||||
avgFeeDelta: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
|
||||
avgFeesPaid: accelerations.filter(acc => acc.status === 'completed' && acc.lastUpdated < (Date.now() - (24 * 60 * 60 * 1000))).reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
this.statsObservable$ = combineLatest([
|
||||
this.apiService.getAccelerationHistory$(this.miningWindowPreference),
|
||||
(this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
|
||||
this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
|
||||
]).pipe(
|
||||
tap(([accelerations, blockFeesResponse]) => {
|
||||
|
|
@ -87,7 +89,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
|
|||
}),
|
||||
map(([accelerations, blockFeesResponse]) => {
|
||||
return {
|
||||
avgFeeDelta: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
|
||||
avgFeesPaid: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
|
@ -107,7 +109,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
|
|||
this.isLoading = true;
|
||||
this.storageService.setValue('miningWindowPreference', timespan);
|
||||
this.timespan = timespan;
|
||||
return this.apiService.getAccelerationHistory$();
|
||||
return this.apiService.getAccelerationHistory$({});
|
||||
})
|
||||
),
|
||||
this.radioGroupForm.get('dateSpan').valueChanges.pipe(
|
||||
|
|
@ -147,15 +149,18 @@ export class AccelerationFeesGraphComponent implements OnInit {
|
|||
last = val.avgHeight;
|
||||
}
|
||||
let totalFeeDelta = 0;
|
||||
let totalFeePaid = 0;
|
||||
let totalCount = 0;
|
||||
while (last <= val.avgHeight) {
|
||||
totalFeeDelta += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feeDelta, 0);
|
||||
totalFeePaid += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feePaid, 0);
|
||||
totalCount += (blockAccelerations[last] || []).length;
|
||||
last++;
|
||||
}
|
||||
data.push({
|
||||
...val,
|
||||
feeDelta: totalFeeDelta,
|
||||
feePaid: totalFeePaid,
|
||||
accelerations: totalCount,
|
||||
});
|
||||
}
|
||||
|
|
@ -236,7 +241,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
|
|||
icon: 'roundRect',
|
||||
},
|
||||
{
|
||||
name: 'Total fee delta',
|
||||
name: 'Out-of-band fees paid',
|
||||
inactiveColor: 'rgb(110, 112, 121)',
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
|
|
@ -251,8 +256,8 @@ export class AccelerationFeesGraphComponent implements OnInit {
|
|||
axisLabel: {
|
||||
color: 'rgb(110, 112, 121)',
|
||||
formatter: (val) => {
|
||||
if (val >= 1_000_000) {
|
||||
return `${(val / 100_000_000).toPrecision(5)} BTC`;
|
||||
if (val >= 100_000) {
|
||||
return `${(val / 100_000_000).toFixed(3)} BTC`;
|
||||
} else {
|
||||
return `${val} sats`;
|
||||
}
|
||||
|
|
@ -303,8 +308,8 @@ export class AccelerationFeesGraphComponent implements OnInit {
|
|||
legendHoverLink: false,
|
||||
zlevel: 1,
|
||||
yAxisIndex: 0,
|
||||
name: 'Total fee delta',
|
||||
data: data.map(block => [block.timestamp * 1000, block.feeDelta, block.avgHeight]),
|
||||
name: 'Out-of-band fees paid',
|
||||
data: data.map(block => [block.timestamp * 1000, block.feePaid, block.avgHeight]),
|
||||
type: 'line',
|
||||
smooth: 0.25,
|
||||
symbol: 'none',
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<div class="stats-wrapper" *ngIf="accelerationStats$ | async as stats; else loading">
|
||||
<div class="stats-container">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="address.transactions">Transactions</h5>
|
||||
<div class="card-text">
|
||||
<div>{{ stats.count }}</div>
|
||||
<div class="symbol" i18n="accelerator.total-accelerated">accelerated</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.out-of-band-fees">Out-of-band Fees</h5>
|
||||
<div class="card-text">
|
||||
<div>{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
|
||||
<span class="fiat">
|
||||
<app-fiat [value]="stats.totalFeesPaid"></app-fiat>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
|
||||
<div class="card-text">
|
||||
<div>{{ stats.successRate.toFixed(2) }} %</div>
|
||||
<div class="symbol" i18n="accelerator.mined-next-block">mined</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #loading>
|
||||
<div class="stats-container loading-container">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="address.transactions">Transactions</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
<div class="skeleton-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.out-of-band-fees">Out-of-band Fees</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
<div class="skeleton-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
<div class="skeleton-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
import { ApiService } from '../../../services/api.service';
|
||||
import { StateService } from '../../../services/state.service';
|
||||
import { Acceleration } from '../../../interfaces/node-api.interface';
|
||||
|
||||
@Component({
|
||||
selector: 'app-acceleration-stats',
|
||||
templateUrl: './acceleration-stats.component.html',
|
||||
styleUrls: ['./acceleration-stats.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AccelerationStatsComponent implements OnInit {
|
||||
@Input() timespan: '24h' | '1w' = '24h';
|
||||
@Input() accelerations$: Observable<Acceleration[]>;
|
||||
public accelerationStats$: Observable<any>;
|
||||
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
private stateService: StateService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.accelerationStats$ = this.accelerations$.pipe(
|
||||
switchMap(accelerations => {
|
||||
let totalFeesPaid = 0;
|
||||
let totalSucceeded = 0;
|
||||
let totalCanceled = 0;
|
||||
for (const acceleration of accelerations) {
|
||||
if (acceleration.status === 'completed') {
|
||||
totalSucceeded++;
|
||||
totalFeesPaid += acceleration.feePaid || 0;
|
||||
} else if (acceleration.status === 'failed') {
|
||||
totalCanceled++;
|
||||
}
|
||||
}
|
||||
return of({
|
||||
count: totalSucceeded,
|
||||
totalFeesPaid,
|
||||
successRate: (totalSucceeded + totalCanceled > 0) ? ((totalSucceeded / (totalSucceeded + totalCanceled)) * 100) : 0.0,
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,19 +10,22 @@
|
|||
<table class="table table-borderless table-fixed">
|
||||
<thead>
|
||||
<th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
|
||||
<th class="fee" i18n="transaction.fee|Transaction fee">Fee</th>
|
||||
<th class="fee-delta text-right" i18n="accelerator.fee-delta">Fee delta</th>
|
||||
<th class="fee text-right" i18n="transaction.fee|Transaction fee">Final Fee</th>
|
||||
<th class="fee-delta text-right" i18n="accelerator.fee-delta">Max Bid</th>
|
||||
<th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
|
||||
</thead>
|
||||
<tbody *ngIf="accelerations$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
|
||||
<tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
|
||||
<tr *ngFor="let acceleration of accelerations; let i= index;">
|
||||
<td class="txid text-left">
|
||||
<a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
|
||||
<app-truncate [text]="acceleration.txid" [lastChars]="5"></app-truncate>
|
||||
</a>
|
||||
</td>
|
||||
<td class="fee text-right">
|
||||
{{ acceleration.feePaid | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
|
||||
<td *ngIf="acceleration.feePaid" class="fee text-right">
|
||||
{{ (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
|
||||
</td>
|
||||
<td *ngIf="!acceleration.feePaid" class="fee text-right">
|
||||
~
|
||||
</td>
|
||||
<td class="fee-delta text-right">
|
||||
{{ acceleration.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
|
||||
import { Observable, catchError, of, switchMap } from 'rxjs';
|
||||
import { Acceleration, BlockExtended } from '../../interfaces/node-api.interface';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
import { Observable, catchError, of, switchMap, tap } from 'rxjs';
|
||||
import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
|
||||
import { ApiService } from '../../../services/api.service';
|
||||
import { StateService } from '../../../services/state.service';
|
||||
import { WebsocketService } from '../../../services/websocket.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-accelerations-list',
|
||||
|
|
@ -13,8 +13,9 @@ import { WebsocketService } from '../../services/websocket.service';
|
|||
})
|
||||
export class AccelerationsListComponent implements OnInit {
|
||||
@Input() widget: boolean = false;
|
||||
@Input() accelerations$: Observable<Acceleration[]>;
|
||||
|
||||
accelerations$: Observable<Acceleration[]> = undefined;
|
||||
accelerationList$: Observable<Acceleration[]> = undefined;
|
||||
|
||||
isLoading = true;
|
||||
paginationMaxSize: number;
|
||||
|
|
@ -39,7 +40,7 @@ export class AccelerationsListComponent implements OnInit {
|
|||
this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
|
||||
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
|
||||
|
||||
this.accelerations$ = this.apiService.getAccelerationHistory$().pipe(
|
||||
this.accelerationList$ = (this.apiService.getAccelerationHistory$({ timeframe: '1m' }) || this.accelerations$).pipe(
|
||||
switchMap(accelerations => {
|
||||
if (this.widget) {
|
||||
return of(accelerations.slice(-6).reverse());
|
||||
|
|
@ -50,6 +51,9 @@ export class AccelerationsListComponent implements OnInit {
|
|||
catchError((err) => {
|
||||
this.isLoading = false;
|
||||
return of([]);
|
||||
}),
|
||||
tap(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<div class="row row-cols-1 row-cols-md-2">
|
||||
|
||||
<!-- 24h stats -->
|
||||
<!-- pending stats -->
|
||||
<div class="col">
|
||||
<div class="main-title">
|
||||
<span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Pending accelerations</span>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="card-wrapper">
|
||||
<div class="card">
|
||||
<div class="card-body more-padding">
|
||||
<app-acceleration-stats timespan="now"></app-acceleration-stats>
|
||||
<app-pending-stats></app-pending-stats>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<div class="card-wrapper">
|
||||
<div class="card">
|
||||
<div class="card-body more-padding">
|
||||
<app-acceleration-stats timespan="1w"></app-acceleration-stats>
|
||||
<app-acceleration-stats timespan="1w" [accelerations$]="accelerations$"></app-acceleration-stats>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<div class="col" style="margin-bottom: 1.47rem">
|
||||
<div class="card graph-card">
|
||||
<div class="card-body pl-2 pr-2">
|
||||
<app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true></app-acceleration-fees-graph>
|
||||
<app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true [accelerations$]="accelerations$"></app-acceleration-fees-graph>
|
||||
<div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more »</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<span> </span>
|
||||
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
|
||||
</a>
|
||||
<app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true></app-accelerations-list>
|
||||
<app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="accelerations$"></app-accelerations-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,6 +120,10 @@
|
|||
text-align: left;
|
||||
width: 30%;
|
||||
|
||||
@media (max-width: 875px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pool-name {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
|
||||
import { SeoService } from '../../services/seo.service';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
import { Acceleration, BlockExtended } from '../../interfaces/node-api.interface';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { Observable, catchError, combineLatest, of, switchMap } from 'rxjs';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { SeoService } from '../../../services/seo.service';
|
||||
import { WebsocketService } from '../../../services/websocket.service';
|
||||
import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
|
||||
import { StateService } from '../../../services/state.service';
|
||||
import { Observable, Subject, catchError, combineLatest, distinctUntilChanged, of, share, switchMap, tap } from 'rxjs';
|
||||
import { ApiService } from '../../../services/api.service';
|
||||
|
||||
interface AccelerationBlock extends BlockExtended {
|
||||
accelerationCount: number,
|
||||
|
|
@ -18,7 +18,7 @@ interface AccelerationBlock extends BlockExtended {
|
|||
})
|
||||
export class AcceleratorDashboardComponent implements OnInit {
|
||||
blocks$: Observable<AccelerationBlock[]>;
|
||||
|
||||
accelerations$: Observable<Acceleration[]>;
|
||||
loadingBlocks: boolean = true;
|
||||
|
||||
constructor(
|
||||
|
|
@ -33,7 +33,19 @@ export class AcceleratorDashboardComponent implements OnInit {
|
|||
ngOnInit(): void {
|
||||
this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
|
||||
|
||||
this.accelerations$ = this.stateService.chainTip$.pipe(
|
||||
distinctUntilChanged(),
|
||||
switchMap((chainTip) => {
|
||||
return this.apiService.getAccelerationHistory$({ timeframe: '1w' });
|
||||
}),
|
||||
catchError((e) => {
|
||||
return of([]);
|
||||
}),
|
||||
share(),
|
||||
);
|
||||
|
||||
this.blocks$ = combineLatest([
|
||||
this.accelerations$,
|
||||
this.stateService.blocks$.pipe(
|
||||
switchMap((blocks) => {
|
||||
if (this.stateService.env.MINING_DASHBOARD === true) {
|
||||
|
|
@ -44,16 +56,13 @@ export class AcceleratorDashboardComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
return of(blocks as AccelerationBlock[]);
|
||||
})
|
||||
),
|
||||
this.apiService.getAccelerationHistory$('24h').pipe(
|
||||
catchError((err) => {
|
||||
}),
|
||||
tap(() => {
|
||||
this.loadingBlocks = false;
|
||||
return of([]);
|
||||
})
|
||||
)
|
||||
]).pipe(
|
||||
switchMap(([blocks, accelerations]) => {
|
||||
switchMap(([accelerations, blocks]) => {
|
||||
const blockMap = {};
|
||||
for (const block of blocks) {
|
||||
blockMap[block.id] = block;
|
||||
|
|
@ -8,22 +8,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.fee-delta">Fee delta</h5>
|
||||
<h5 class="card-title" i18n="accelerator.average-max-bid">Avg Max Bid</h5>
|
||||
<div class="card-text">
|
||||
<div>{{ stats.totalFeeDelta / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
|
||||
<div>{{ stats.avgFeeDelta / 100_000_000 | amountShortener: 4 }} <span class="symbol" i18n="shared.btc|BTC">BTC</span></div>
|
||||
<span class="fiat">
|
||||
<app-fiat [value]="stats.totalFeeDelta"></app-fiat>
|
||||
<app-fiat [value]="stats.avgFeeDelta"></app-fiat>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" *ngIf="timespan !== 'now'">
|
||||
<h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
|
||||
<div class="card-text">
|
||||
<div>{{ stats.successRate.toFixed(2) }} %</div>
|
||||
<div class="symbol" i18n="accelerator.mined-next-block">mined in the next block</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" *ngIf="timespan === 'now'">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
|
||||
<div class="card-text">
|
||||
<div [innerHTML]="'‎' + (stats.totalVsize * 4 | vbytes: 2)"></div>
|
||||
|
|
@ -43,20 +36,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.fee-delta">Fee delta</h5>
|
||||
<h5 class="card-title" i18n="accelerator.average-max-bid">Avg Max Bid</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
<div class="skeleton-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" *ngIf="timespan !== 'now'">
|
||||
<h5 class="card-title" i18n="accelerator.success-rate">Success rate</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
<div class="skeleton-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" *ngIf="timespan === 'now'">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
|
||||
<div class="card-text">
|
||||
<div class="skeleton-loader"></div>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
.card-title {
|
||||
color: #4a68b9;
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 22px;
|
||||
span {
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
display: inline-flex;
|
||||
}
|
||||
.green-color {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@media (min-width: 376px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.item {
|
||||
max-width: 150px;
|
||||
margin: 0;
|
||||
width: -webkit-fill-available;
|
||||
@media (min-width: 376px) {
|
||||
margin: 0 auto 0px;
|
||||
}
|
||||
&:first-child{
|
||||
display: none;
|
||||
@media (min-width: 485px) {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card-text span {
|
||||
color: #ffffff66;
|
||||
font-size: 12px;
|
||||
top: 0px;
|
||||
}
|
||||
.fee-text{
|
||||
border-bottom: 1px solid #ffffff1c;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
line-height: 1.45;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
.fiat {
|
||||
display: block;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container{
|
||||
min-height: 76px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
.skeleton-loader {
|
||||
width: 100%;
|
||||
display: block;
|
||||
&:first-child {
|
||||
max-width: 90px;
|
||||
margin: 15px auto 3px;
|
||||
}
|
||||
&:last-child {
|
||||
margin: 10px auto 3px;
|
||||
max-width: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
import { ApiService } from '../../../services/api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pending-stats',
|
||||
templateUrl: './pending-stats.component.html',
|
||||
styleUrls: ['./pending-stats.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class PendingStatsComponent implements OnInit {
|
||||
public accelerationStats$: Observable<any>;
|
||||
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.accelerationStats$ = this.apiService.getAccelerations$().pipe(
|
||||
switchMap(accelerations => {
|
||||
let totalAccelerations = 0;
|
||||
let totalFeeDelta = 0;
|
||||
let totalVsize = 0;
|
||||
for (const acceleration of accelerations) {
|
||||
totalAccelerations++;
|
||||
totalFeeDelta += acceleration.feeDelta || 0;
|
||||
totalVsize += acceleration.effectiveVsize || 0;
|
||||
}
|
||||
return of({
|
||||
count: totalAccelerations,
|
||||
totalFeeDelta,
|
||||
avgFeeDelta: totalAccelerations ? totalFeeDelta / totalAccelerations : 0,
|
||||
totalVsize,
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { NgxEchartsModule } from 'ngx-echarts';
|
|||
import { GraphsRoutingModule } from './graphs.routing.module';
|
||||
import { SharedModule } from '../shared/shared.module';
|
||||
|
||||
import { AccelerationFeesGraphComponent } from '../components/acceleration-fees-graph/acceleration-fees-graph.component';
|
||||
import { AccelerationFeesGraphComponent } from '../components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component';
|
||||
import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component';
|
||||
import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component';
|
||||
import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component';
|
||||
|
|
@ -20,7 +20,7 @@ import { PoolComponent } from '../components/pool/pool.component';
|
|||
import { TelevisionComponent } from '../components/television/television.component';
|
||||
import { DashboardComponent } from '../dashboard/dashboard.component';
|
||||
import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
|
||||
import { AcceleratorDashboardComponent } from '../components/accelerator-dashboard/accelerator-dashboard.component';
|
||||
import { AcceleratorDashboardComponent } from '../components/acceleration/accelerator-dashboard/accelerator-dashboard.component';
|
||||
import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component';
|
||||
import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
|
||||
import { BlockHealthGraphComponent } from '../components/block-health-graph/block-health-graph.component';
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@ import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-ch
|
|||
import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component';
|
||||
import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
|
||||
import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component';
|
||||
import { AcceleratorDashboardComponent } from '../components/accelerator-dashboard/accelerator-dashboard.component';
|
||||
import { AcceleratorDashboardComponent } from '../components/acceleration/accelerator-dashboard/accelerator-dashboard.component';
|
||||
import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component';
|
||||
import { PoolComponent } from '../components/pool/pool.component';
|
||||
import { StartComponent } from '../components/start/start.component';
|
||||
import { StatisticsComponent } from '../components/statistics/statistics.component';
|
||||
import { TelevisionComponent } from '../components/television/television.component';
|
||||
import { DashboardComponent } from '../dashboard/dashboard.component';
|
||||
import { AccelerationFeesGraphComponent } from '../components/acceleration-fees-graph/acceleration-fees-graph.component';
|
||||
import { AccelerationsListComponent } from '../components/accelerations-list/accelerations-list.component';
|
||||
import { AccelerationFeesGraphComponent } from '../components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component';
|
||||
import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<span *ngIf="valueOverride !== undefined">{{ valueOverride }}</span>
|
||||
<span *ngIf="valueOverride === undefined">‎{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ value | number }} </span>
|
||||
<span class="symbol">
|
||||
<ng-template [ngIf]="network === 'liquid'">L-</ng-template>
|
||||
<ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
|
||||
<ng-template [ngIf]="network === 'testnet'">t-</ng-template>
|
||||
<ng-template [ngIf]="network === 'signet'">s-</ng-template>{{ unit }}
|
||||
</span>
|
||||
44
frontend/src/app/shared/components/btc/btc.component.ts
Normal file
44
frontend/src/app/shared/components/btc/btc.component.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { StateService } from '../../../services/state.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-btc',
|
||||
templateUrl: './btc.component.html',
|
||||
styleUrls: ['./btc.component.scss']
|
||||
})
|
||||
export class BtcComponent implements OnInit, OnChanges {
|
||||
@Input() satoshis: number;
|
||||
@Input() addPlus = false;
|
||||
@Input() valueOverride: string | undefined = undefined;
|
||||
|
||||
value: number;
|
||||
unit: string;
|
||||
|
||||
network = '';
|
||||
stateSubscription: Subscription;
|
||||
|
||||
constructor(
|
||||
private stateService: StateService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.stateSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.stateSubscription) {
|
||||
this.stateSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (this.satoshis >= 1_000_000) {
|
||||
this.value = (this.satoshis / 100_000_000);
|
||||
this.unit = 'BTC'
|
||||
} else {
|
||||
this.value = Math.round(this.satoshis);
|
||||
this.unit = 'sats'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -73,6 +73,7 @@ import { IndexingProgressComponent } from '../components/indexing-progress/index
|
|||
import { SvgImagesComponent } from '../components/svg-images/svg-images.component';
|
||||
import { ChangeComponent } from '../components/change/change.component';
|
||||
import { SatsComponent } from './components/sats/sats.component';
|
||||
import { BtcComponent } from './components/btc/btc.component';
|
||||
import { FeeRateComponent } from './components/fee-rate/fee-rate.component';
|
||||
import { TruncateComponent } from './components/truncate/truncate.component';
|
||||
import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
|
||||
|
|
@ -85,8 +86,9 @@ import { GlobalFooterComponent } from './components/global-footer/global-footer.
|
|||
import { AcceleratePreviewComponent } from '../components/accelerate-preview/accelerate-preview.component';
|
||||
import { AccelerateFeeGraphComponent } from '../components/accelerate-preview/accelerate-fee-graph.component';
|
||||
import { MempoolErrorComponent } from './components/mempool-error/mempool-error.component';
|
||||
import { AccelerationsListComponent } from '../components/accelerations-list/accelerations-list.component';
|
||||
import { AccelerationStatsComponent } from '../components/acceleration-stats/acceleration-stats.component';
|
||||
import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component';
|
||||
import { PendingStatsComponent } from '../components/acceleration/pending-stats/pending-stats.component';
|
||||
import { AccelerationStatsComponent } from '../components/acceleration/acceleration-stats/acceleration-stats.component';
|
||||
|
||||
import { BlockViewComponent } from '../components/block-view/block-view.component';
|
||||
import { EightBlocksComponent } from '../components/eight-blocks/eight-blocks.component';
|
||||
|
|
@ -169,6 +171,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
|||
SvgImagesComponent,
|
||||
ChangeComponent,
|
||||
SatsComponent,
|
||||
BtcComponent,
|
||||
FeeRateComponent,
|
||||
TruncateComponent,
|
||||
SearchResultsComponent,
|
||||
|
|
@ -194,6 +197,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
|||
MempoolErrorComponent,
|
||||
AccelerationsListComponent,
|
||||
AccelerationStatsComponent,
|
||||
PendingStatsComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
|
@ -291,6 +295,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
|||
SvgImagesComponent,
|
||||
ChangeComponent,
|
||||
SatsComponent,
|
||||
BtcComponent,
|
||||
FeeRateComponent,
|
||||
TruncateComponent,
|
||||
SearchResultsComponent,
|
||||
|
|
@ -306,6 +311,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
|||
MempoolErrorComponent,
|
||||
AccelerationsListComponent,
|
||||
AccelerationStatsComponent,
|
||||
PendingStatsComponent,
|
||||
|
||||
MempoolBlockOverviewComponent,
|
||||
ClockchainComponent,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue