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

Tidy acceleration dashboard, add missing fields

Browse Source
This commit is contained in:
Mononaut 2023-08-30 22:25:33 +09:00
parent f26b630aab
commit 472a76560f
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
4 changed files with 97 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html
View File

@ -28,17 +28,17 @@
</div> </div>
<div *ngIf="widget"> <div *ngIf="widget">
<div class="acceleration-fees" *ngIf="(statsObservable$ | async) as stats; else loadingStats"> <div class="acceleration-fees">
<div class="item"> <div class="item" *ngIf="(hrStatsObservable$ | async) as stats; else loadingHrStats">
<h5 class="card-title" i18n="mining.???">???</h5> <h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
<p class="card-text"> <p class="card-text">
??? {{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</p> </p>
</div> </div>
<div class="item"> <div class="item" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
<h5 class="card-title" i18n="block.???">???</h5> <h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
<p class="card-text"> <p class="card-text">
??? {{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</p> </p>
</div> </div>
</div> </div>
@ -53,19 +53,19 @@
</div> </div>
<ng-template #loadingStats> <ng-template #loadingHrStats>
<div class="acceleration-fees"> <div class="item">
<div class="item"> <h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
<h5 class="card-title" i18n="mining.???">???</h5> <p class="card-text">
<p class="card-text"> <span class="skeleton-loader skeleton-loader-big"></span>
<span class="skeleton-loader skeleton-loader-big"></span> </p>
</p> </div>
</div> </ng-template>
<div class="item"> <ng-template #loadingStats>
<h5 class="card-title" i18n="block.???">???</h5> <div class="item">
<p class="card-text"> <h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
<span class="skeleton-loader skeleton-loader-big"></span> <p class="card-text">
</p> <span class="skeleton-loader skeleton-loader-big"></span>
</div> </p>
</div> </div>
</ng-template> </ng-template>

70
frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts
View File

@ -38,6 +38,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
renderer: 'svg', renderer: 'svg',
}; };
hrStatsObservable$: Observable<any>;
statsObservable$: Observable<any>; statsObservable$: Observable<any>;
isLoading = true; isLoading = true;
formatNumber = formatNumber; formatNumber = formatNumber;
@ -67,18 +68,26 @@ export class AccelerationFeesGraphComponent implements OnInit {
this.miningWindowPreference = '1w'; this.miningWindowPreference = '1w';
this.isLoading = true; this.isLoading = true;
this.timespan = this.miningWindowPreference; this.timespan = this.miningWindowPreference;
this.hrStatsObservable$ = this.apiService.getAccelerationHistory$('24h').pipe(
map((accelerations) => {
return {
avgFeeDelta: accelerations.filter(acc => acc.status === 'mined' || acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
};
})
);
this.statsObservable$ = combineLatest([ this.statsObservable$ = combineLatest([
this.apiService.getAccelerationHistory$(this.miningWindowPreference), this.apiService.getAccelerationHistory$(this.miningWindowPreference),
this.apiService.getHistoricalBlockFees$(this.miningWindowPreference), this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
]).pipe( ]).pipe(
tap(([accelerations, blockFeesResponse]) => { tap(([accelerations, blockFeesResponse]) => {
console.log(accelerations, blockFeesResponse.body);
this.prepareChartOptions(accelerations, blockFeesResponse.body); this.prepareChartOptions(accelerations, blockFeesResponse.body);
this.isLoading = false; this.isLoading = false;
}), }),
map(([accelerations, blockFeesResponse]) => { map(([accelerations, blockFeesResponse]) => {
return { return {
avgFeeDelta: accelerations.filter(acc => acc.status === 'mined' || acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
}; };
}), }),
); );
@ -112,12 +121,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
this.prepareChartOptions(accelerations, blockFeesResponse.body); this.prepareChartOptions(accelerations, blockFeesResponse.body);
this.isLoading = false; this.isLoading = false;
this.cd.markForCheck(); this.cd.markForCheck();
}), })
map(([accelerations, blockFeesResponse]) => {
return {
};
}),
); );
} }
} }
@ -159,6 +163,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
this.chartOptions = { this.chartOptions = {
title: title, title: title,
color: [ color: [
'#1E88E5',
new graphic.LinearGradient(0, 0, 0, 0.65, [ new graphic.LinearGradient(0, 0, 0, 0.65, [
{ offset: 0, color: '#F4511E' }, { offset: 0, color: '#F4511E' },
{ offset: 0.25, color: '#FB8C00' }, { offset: 0.25, color: '#FB8C00' },
@ -166,7 +171,6 @@ export class AccelerationFeesGraphComponent implements OnInit {
{ offset: 0.75, color: '#FDD835' }, { offset: 0.75, color: '#FDD835' },
{ offset: 1, color: '#7CB342' } { offset: 1, color: '#7CB342' }
]), ]),
'#1E88E5',
], ],
animation: false, animation: false,
grid: { grid: {
@ -197,9 +201,9 @@ export class AccelerationFeesGraphComponent implements OnInit {
${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`; ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
for (const tick of data) { for (const tick of data) {
if (tick.seriesIndex === 0) { if (tick.seriesIndex === 1) {
tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')} sats<br>`; tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')} sats<br>`;
} else if (tick.seriesIndex === 1) { } else if (tick.seriesIndex === 0) {
tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}<br>`; tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}<br>`;
} }
} }
@ -224,17 +228,17 @@ export class AccelerationFeesGraphComponent implements OnInit {
legend: (this.widget || data.length === 0) ? undefined : { legend: (this.widget || data.length === 0) ? undefined : {
data: [ data: [
{ {
name: 'Total fee delta', name: 'Total accelerations',
inactiveColor: 'rgb(110, 112, 121)', inactiveColor: 'rgb(110, 112, 121)',
textStyle: { textStyle: {
color: 'white', color: 'white',
}, },
icon: 'roundRect', icon: 'roundRect',
}, },
{ {
name: 'Total accelerations', name: 'Total fee delta',
inactiveColor: 'rgb(110, 112, 121)', inactiveColor: 'rgb(110, 112, 121)',
textStyle: { textStyle: {
color: 'white', color: 'white',
}, },
icon: 'roundRect', icon: 'roundRect',
@ -247,7 +251,11 @@ export class AccelerationFeesGraphComponent implements OnInit {
axisLabel: { axisLabel: {
color: 'rgb(110, 112, 121)', color: 'rgb(110, 112, 121)',
formatter: (val) => { formatter: (val) => {
return `${val / 100_000_000} BTC`; if (val >= 1_000_000) {
return `${(val / 100_000_000).toPrecision(5)} BTC`;
} else {
return `${val} sats`;
}
} }
}, },
splitLine: { splitLine: {
@ -273,6 +281,24 @@ export class AccelerationFeesGraphComponent implements OnInit {
}, },
], ],
series: data.length === 0 ? undefined : [ series: data.length === 0 ? undefined : [
{
legendHoverLink: false,
zlevel: 0,
yAxisIndex: 1,
name: 'Total accelerations',
data: data.map(block => [block.timestamp * 1000, block.accelerations, block.avgHeight]),
type: 'line',
symbol: 'none',
areaStyle: {
color: '#1E88E5',
opacity: 0.5
},
lineStyle: {
width: 1,
opacity: 1,
},
step: 'middle',
},
{ {
legendHoverLink: false, legendHoverLink: false,
zlevel: 1, zlevel: 1,
@ -283,20 +309,10 @@ export class AccelerationFeesGraphComponent implements OnInit {
smooth: 0.25, smooth: 0.25,
symbol: 'none', symbol: 'none',
lineStyle: { lineStyle: {
width: 1, width: 2,
opacity: 1, opacity: 1,
} }
}, },
{
legendHoverLink: false,
zlevel: 0,
yAxisIndex: 1,
name: 'Total accelerations',
data: data.map(block => [block.timestamp * 1000, block.accelerations, block.avgHeight]),
type: 'bar',
barWidth: '100%',
large: true,
},
], ],
dataZoom: (this.widget || data.length === 0 )? undefined : [{ dataZoom: (this.widget || data.length === 0 )? undefined : [{
type: 'inside', type: 'inside',

38
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
View File

@ -46,17 +46,17 @@
</div> </div>
<div *ngIf="widget"> <div *ngIf="widget">
<div class="block-fee-rates" *ngIf="(statsObservable$ | async) as stats; else loadingStats"> <div class="block-fee-rates">
<div class="item"> <div class="item" *ngIf="(hrStatsObservable$ | async) as stats; else loadingHrStats">
<h5 class="card-title" i18n="mining.avg-block-fee-1m">Avg Block Fee (1m)</h5> <h5 class="card-title" i18n="mining.avg-block-fee-24h">Avg Block Fee (24h)</h5>
<p class="card-text"> <p class="card-text">
<app-fee-rate [fee]="stats.avgMedianRate"></app-fee-rate> <app-fee-rate [fee]="stats.avgMedianRate"></app-fee-rate>
</p> </p>
</div> </div>
<div class="item"> <div class="item" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
<h5 class="card-title" i18n="block.???">???</h5> <h5 class="card-title" i18n="mining.avg-block-fee-1m">Avg Block Fee (1m)</h5>
<p class="card-text"> <p class="card-text">
??? <app-fee-rate [fee]="stats.avgMedianRate"></app-fee-rate>
</p> </p>
</div> </div>
</div> </div>
@ -71,19 +71,19 @@
</div> </div>
<ng-template #loadingHrStats>
<div class="item">
<h5 class="card-title" i18n="mining.avg-block-fee-24h">Avg Block Fee (24h)</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
</ng-template>
<ng-template #loadingStats> <ng-template #loadingStats>
<div class="block-fee-rates"> <div class="item">
<div class="item"> <h5 class="card-title" i18n="mining.avg-block-fee-1m">Avg Block Fee (1m)</h5>
<h5 class="card-title" i18n="mining.avg-block-fee">Avg Block Fee</h5> <p class="card-text">
<p class="card-text"> <span class="skeleton-loader skeleton-loader-big"></span>
<span class="skeleton-loader skeleton-loader-big"></span> </p>
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="block.???">???</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
</div> </div>
</ng-template> </ng-template>

14
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
View File

@ -41,6 +41,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
renderer: 'svg', renderer: 'svg',
}; };
hrStatsObservable$: Observable<any>;
statsObservable$: Observable<any>; statsObservable$: Observable<any>;
isLoading = true; isLoading = true;
formatNumber = formatNumber; formatNumber = formatNumber;
@ -85,6 +86,19 @@ export class BlockFeeRatesGraphComponent implements OnInit {
}); });
} }
this.hrStatsObservable$ = combineLatest([
this.apiService.getHistoricalBlockFeeRates$('24h'),
this.stateService.rateUnits$
]).pipe(
map(([response, rateUnits]) => {
return {
blockCount: parseInt(response.headers.get('x-total-count'), 10),
avgMedianRate: response.body.length ? response.body.reduce((acc, rate) => acc + rate.avgFee_50, 0) / response.body.length : 0,
};
}),
share(),
);
this.statsObservable$ = combineLatest([ this.statsObservable$ = combineLatest([
this.widget ? of(this.miningWindowPreference) : this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith(this.radioGroupForm.controls.dateSpan.value)), this.widget ? of(this.miningWindowPreference) : this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith(this.radioGroupForm.controls.dateSpan.value)),
this.stateService.rateUnits$ this.stateService.rateUnits$