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

Block subsidy graph back to timespan selection mode

Browse Source
This commit is contained in:
natsoni
2024-05-11 14:36:17 +02:00
parent 53a493c233
commit 0ef76f3e64
7 changed files with 93 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html
View File

@@ -9,18 +9,31 @@
</button>
</div>
<ng-container *ngIf="(statsObservable$ | async) as stats">
<div class="formRadioGroup" ngbDropdown *ngIf="stats.indexedBlocksInterval.end !== -1">
<button class="btn btn-primary btn-sm dropdown-toggle" id="endBlockDropdown" ngbDropdownToggle>
Blocks {{ lowerBound }} - {{ upperBound }}
</button>
<div ngbDropdownMenu class="scrollable-dropdown">
<button [ngClass]="{'selected': option === endBlock}" class="dropdown-item" *ngFor="let option of dropdownOptions" (click)="selectBlockSpan(option)">
{{ endBlockToSelector(option) }}
</button>
</div>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
<input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1M
</label>
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 12960" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
<input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3M
</label>
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 25920" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
<input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 6M
</label>
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 52560" [class.active]="radioGroupForm.get('dateSpan').value === '1y'">
<input type="radio" [value]="'1y'" fragment="1y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1Y
</label>
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 105120" [class.active]="radioGroupForm.get('dateSpan').value === '2y'">
<input type="radio" [value]="'2y'" fragment="2y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 2Y
</label>
<label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 157680" [class.active]="radioGroupForm.get('dateSpan').value === '3y'">
<input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3Y
</label>
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
<input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> ALL
</label>
</div>
</ng-container>
</form>
</div>
<div class="chart" *browserOnly echarts [initOpts]="chartInitOptions" [options]="chartOptions"

10
frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.scss
View File

@@ -64,13 +64,3 @@
pointer-events: none;
opacity: 0.5;
}
.scrollable-dropdown {
max-height: 500px;
overflow-y: auto;
}
.selected {
background-color: var(--active-bg);
color: #fff;
}

203
frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
View File

@@ -7,10 +7,12 @@ 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 { ActivatedRoute, Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { FiatShortenerPipe } from '../../shared/pipes/fiat-shortener.pipe';
import { FiatCurrencyPipe } from '../../shared/pipes/fiat-currency.pipe';
import { StateService } from '../../services/state.service';
import { MiningService } from '../../services/mining.service';
import { StorageService } from '../../services/storage.service';
@Component({
selector: 'app-block-fees-subsidy-graph',
@@ -30,6 +32,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
@Input() right: number | string = 45;
@Input() left: number | string = 75;
miningWindowPreference: string;
radioGroupForm: UntypedFormGroup;
chartOptions: EChartsOption = {};
@@ -40,15 +43,9 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
statsObservable$: Observable<any>;
isLoading = true;
formatNumber = formatNumber;
endBlock = '';
indexedBlocksInterval = { start: 0, end: 0 };
lowerBound = 0;
upperBound = 0;
timespan = '';
chartInstance: any = undefined;
showFiat = false;
dropdownOptions = [];
step = 10000;
includeAccelerations = false;
constructor(
@Inject(LOCALE_ID) public locale: string,
@@ -56,40 +53,43 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
private apiService: ApiService,
private formBuilder: UntypedFormBuilder,
public stateService: StateService,
private storageService: StorageService,
private miningService: MiningService,
private route: ActivatedRoute,
private router: Router,
private fiatShortenerPipe: FiatShortenerPipe,
private fiatCurrencyPipe: FiatCurrencyPipe,
) {
this.radioGroupForm = this.formBuilder.group({ endBlock: '' });
this.radioGroupForm.controls.endBlock.setValue('');
this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
this.radioGroupForm.controls.dateSpan.setValue('1y');
}
ngOnInit(): void {
this.seoService.setTitle($localize`:@@mining.block-fees-subsidy:Block Fees Vs Subsidy`);
this.seoService.setDescription($localize`:@@meta.description.bitcoin.graphs.block-fees-subsidy:See the mining fees earned per Bitcoin block compared to the Bitcoin block subsidy, visualized in BTC and USD over time.`);
this.route.queryParams.subscribe((params) => {
if (/^(0|[1-9]\d{0,9})$/.test(params['height'])) {
this.radioGroupForm.controls.endBlock.setValue(params['height'], { emitEvent: false });
this.miningWindowPreference = this.miningService.getDefaultTimespan('1m');
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
this.route
.fragment
.subscribe((fragment) => {
if (['1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
}
});
this.includeAccelerations = this.stateService.env.ACCELERATOR;
this.statsObservable$ = this.radioGroupForm.get('endBlock').valueChanges
this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
.pipe(
startWith(this.radioGroupForm.controls.endBlock.value),
switchMap((endBlock) => {
startWith(this.radioGroupForm.controls.dateSpan.value),
switchMap((timespan) => {
this.isLoading = true;
this.endBlock = endBlock;
return this.apiService.getHistoricalExactBlockFees$(endBlock === '' ? undefined : endBlock)
this.storageService.setValue('miningWindowPreference', timespan);
this.timespan = timespan;
this.isLoading = true;
return this.apiService.getHistoricalBlockFees$(timespan)
.pipe(
tap((response) => {
if (response.body.length === 0) {
this.isLoading = false;
return;
}
let blockReward = 50 * 100_000_000;
const subsidies = {};
for (let i = 0; i <= 33; i++) {
@@ -97,55 +97,21 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
blockReward = Math.floor(blockReward / 2);
}
const existingHeights = new Set(response.body.map(val => val.height));
for (let i = response.body[0].height; i <= response.body[response.body.length - 1].height; i++) {
if (!existingHeights.has(i)) {
response.body.push({ height: i, fees: 0, missing: true });
}
}
response.body.sort((a, b) => a.height - b.height);
const data = {
blockHeight: response.body.map(val => val.height),
blockSubsidy: response.body.map(val => val?.missing ? 0 : subsidies[Math.floor(Math.min(val.height / 210000, 33))] / 100_000_000),
blockSubsidyFiat: response.body.map(val => val?.missing ? 0 : subsidies[Math.floor(Math.min(val.height / 210000, 33))] / 100_000_000 * val.USD),
blockFees: response.body.map(val => val.fees / 100_000_000),
blockFeesFiat: response.body.map(val => val.fees / 100_000_000 * val.USD),
}
let accelerationData = {};
if (this.includeAccelerations) {
accelerationData = {
blockAccelerations: response.body.map(val => val?.accelerations ? val.accelerations / 100_000_000 : 0),
blockAccelerationsFiat: response.body.map(val => val?.accelerations ? val.accelerations / 100_000_000 * val.USD : 0),
}
}
this.prepareChartOptions(data, accelerationData);
timestamp: response.body.map(val => val.timestamp * 1000),
blockHeight: response.body.map(val => val.avgHeight),
blockFees: response.body.map(val => val.avgFees / 100_000_000),
blockFeesFiat: response.body.filter(val => val['USD'] > 0).map(val => val.avgFees / 100_000_000 * val['USD']),
blockSubsidy: response.body.map(val => subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000),
blockSubsidyFiat: response.body.filter(val => val['USD'] > 0).map(val => subsidies[Math.floor(Math.min(val.avgHeight / 210000, 33))] / 100_000_000 * val['USD']),
};
this.prepareChartOptions(data);
this.isLoading = false;
}),
map((response) => {
const blockCount = parseInt(response.headers.get('x-total-count'), 10);
const chainTip = this.stateService.latestBlockHeight;
this.indexedBlocksInterval = {
start: chainTip - blockCount,
end: chainTip,
};
if (this.radioGroupForm.controls.endBlock.value === '') this.radioGroupForm.controls.endBlock.setValue((this.indexedBlocksInterval.end).toString(), { emitEvent: false });
this.dropdownOptions = [(this.indexedBlocksInterval.end).toString()];
if (this.indexedBlocksInterval.end - this.step > this.indexedBlocksInterval.start) {
let newEndBlock = this.indexedBlocksInterval.end - this.step;
while (newEndBlock > this.indexedBlocksInterval.start) {
this.dropdownOptions.push(newEndBlock.toString());
newEndBlock -= this.step;
}
}
return {
indexedBlocksInterval: this.indexedBlocksInterval,
blockCount: parseInt(response.headers.get('x-total-count'), 10),
};
}),
);
@@ -154,7 +120,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
);
}
prepareChartOptions(data, accelerationData) {
prepareChartOptions(data) {
let title: object;
if (data.blockFees.length === 0) {
title = {
@@ -168,15 +134,11 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
};
}
this.lowerBound = data.blockHeight[0];
this.upperBound = data.blockHeight[data.blockHeight.length - 1];
this.chartOptions = {
title: title,
color: [
'var(--orange)',
'var(--success)',
'var(--tertiary)'
],
animation: false,
grid: {
@@ -204,10 +166,9 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
return '';
}
let tooltip = `Block <b style="color: white; margin-left: 2px">${data[0].axisValue}</b><br>`;
let tooltip = `Around block <b style="color: white; margin-left: 2px">${data[0].axisValue}</b><br>`;
for (let i = data.length - 1; i >= 0; i--) {
const tick = data[i];
if (tick.seriesName.includes('Accelerations') && tick.data === 0) continue;
if (!this.showFiat) tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data, this.locale, '1.0-3')} BTC<br>`;
else tooltip += `${tick.marker} ${tick.seriesName}: ${this.fiatCurrencyPipe.transform(tick.data, null, 'USD') }<br>`;
}
@@ -216,15 +177,37 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
return tooltip;
}.bind(this)
},
xAxis: data.blockFees.length === 0 ? undefined :
{
type: 'category',
data: data.blockHeight,
axisLabel: {
hideOverlap: true,
color: 'var(--grey)',
xAxis: data.blockFees.length === 0 ? undefined : [
{
type: 'category',
data: data.blockHeight,
show: false,
axisLabel: {
hideOverlap: true,
}
},
{
type: 'category',
data: data.timestamp,
show: true,
position: 'bottom',
axisLabel: {
color: 'var(--grey)',
formatter: (val) => {
return formatterXAxis(this.locale, this.timespan, parseInt(val, 10));
}
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
}
},
],
legend: data.blockFees.length === 0 ? undefined : {
data: [
{
@@ -243,14 +226,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
},
icon: 'roundRect',
},
this.includeAccelerations ? {
name: 'Accelerations',
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
},
icon: 'roundRect',
} : null,
{
name: 'Subsidy (USD)',
inactiveColor: 'var(--grey)',
@@ -267,22 +242,12 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
},
icon: 'roundRect',
},
this.includeAccelerations ? {
name: 'Accelerations (USD)',
inactiveColor: 'var(--grey)',
textStyle: {
color: 'white',
},
icon: 'roundRect',
} : null
].filter(legend => legend !== null),
],
selected: {
'Subsidy (USD)': this.showFiat,
'Fees (USD)': this.showFiat,
'Accelerations (USD)': this.showFiat,
'Subsidy': !this.showFiat,
'Fees': !this.showFiat,
'Accelerations': !this.showFiat,
},
},
yAxis: data.blockFees.length === 0 ? undefined : [
@@ -332,13 +297,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
stack: 'total',
data: data.blockFees,
},
{
name: 'Accelerations',
yAxisIndex: 0,
type: 'bar',
stack: 'total',
data: accelerationData.blockAccelerations,
},
{
name: 'Subsidy (USD)',
yAxisIndex: 1,
@@ -353,13 +311,6 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
stack: 'total',
data: data.blockFeesFiat,
},
{
name: 'Accelerations (USD)',
yAxisIndex: 1,
type: 'bar',
stack: 'total',
data: accelerationData.blockAccelerationsFiat,
},
],
dataZoom: data.blockFees.length === 0 ? undefined : [{
type: 'inside',
@@ -398,18 +349,14 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
this.showFiat = true;
this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy' });
this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees' });
this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Accelerations' });
this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Subsidy (USD)' });
this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Fees (USD)' });
this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Accelerations (USD)' });
} else {
this.showFiat = false;
this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Subsidy' });
this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Fees' });
this.chartInstance.dispatchAction({ type: 'legendSelect', name: 'Accelerations' });
this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Subsidy (USD)' });
this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Fees (USD)' });
this.chartInstance.dispatchAction({ type: 'legendUnSelect', name: 'Accelerations (USD)' });
}
});
}
@@ -429,23 +376,11 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
download(this.chartInstance.getDataURL({
pixelRatio: 2,
excludeComponents: ['dataZoom'],
}), `block-fees-subsidy-${this.endBlock}-${Math.round(now.getTime() / 1000)}.svg`);
}), `block-fees-subsidy-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
// @ts-ignore
this.chartOptions.grid.bottom = prevBottom;
this.chartOptions.backgroundColor = 'none';
this.chartInstance.setOption(this.chartOptions);
}
selectBlockSpan(value: string) {
this.radioGroupForm.controls.endBlock.setValue(value);
this.router.navigate([], { queryParams: { height: value }, queryParamsHandling: 'merge' });
}
endBlockToSelector(value: string): string {
let upperBound = Math.min(this.indexedBlocksInterval.end, parseInt(value, 10));
let lowerBound = Math.max(0, parseInt(value, 10) - this.step);
if (lowerBound < this.indexedBlocksInterval.start) lowerBound = this.indexedBlocksInterval.start + 1;
if (lowerBound > upperBound) lowerBound = upperBound;
return `Blocks ${lowerBound} - ${upperBound}`;
}
}

7
frontend/src/app/services/api.service.ts
View File

@@ -333,13 +333,6 @@ export class ApiService {
);
}
getHistoricalExactBlockFees$(height: string | undefined) : Observable<any> {
return this.httpClient.get<any[]>(
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/exact-fees` +
(height !== undefined ? `/${height}` : ''), { observe: 'response' }
);
}
getHistoricalBlockRewards$(interval: string | undefined) : Observable<any> {
return this.httpClient.get<any[]>(
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/rewards` +