Add block fee rate percentiles chart
This commit is contained in:
nymkappa
parent
078c7ac228
commit
3ce6e81a39
@ -387,7 +387,9 @@ class BlocksRepository {
|
||||
*/
|
||||
public async $getHistoricalBlockFees(div: number, interval: string | null): Promise<any> {
|
||||
try {
|
||||
let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
|
||||
let query = `SELECT
|
||||
CAST(AVG(height) as INT) as avg_height,
|
||||
CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
|
||||
CAST(AVG(fees) as INT) as avg_fees
|
||||
FROM blocks`;
|
||||
|
||||
@ -410,7 +412,9 @@ class BlocksRepository {
|
||||
*/
|
||||
public async $getHistoricalBlockRewards(div: number, interval: string | null): Promise<any> {
|
||||
try {
|
||||
let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
|
||||
let query = `SELECT
|
||||
CAST(AVG(height) as INT) as avg_height,
|
||||
CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
|
||||
CAST(AVG(reward) as INT) as avg_rewards
|
||||
FROM blocks`;
|
||||
|
||||
@ -436,7 +440,9 @@ class BlocksRepository {
|
||||
try {
|
||||
connection = await DB.getConnection();
|
||||
|
||||
let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
|
||||
let query = `SELECT
|
||||
CAST(AVG(height) as INT) as avg_height,
|
||||
CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp,
|
||||
CAST(AVG(JSON_EXTRACT(fee_span, '$[0]')) as INT) as avg_fee_0,
|
||||
CAST(AVG(JSON_EXTRACT(fee_span, '$[1]')) as INT) as avg_fee_10,
|
||||
CAST(AVG(JSON_EXTRACT(fee_span, '$[2]')) as INT) as avg_fee_25,
|
||||
|
||||
@ -672,14 +672,14 @@ class Routes {
|
||||
|
||||
public async $getHistoricalBlockFeeRates(req: Request, res: Response) {
|
||||
try {
|
||||
const blockFees = await mining.$getHistoricalBlockFeeRates(req.params.interval ?? null);
|
||||
const blockFeeRates = await mining.$getHistoricalBlockFeeRates(req.params.interval ?? null);
|
||||
const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp();
|
||||
res.header('Pragma', 'public');
|
||||
res.header('Cache-control', 'public');
|
||||
res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString());
|
||||
res.json({
|
||||
oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp,
|
||||
blockFees: blockFees,
|
||||
blockFeeRates: blockFeeRates,
|
||||
});
|
||||
} catch (e) {
|
||||
res.status(500).send(e instanceof Error ? e.message : e);
|
||||
|
||||
@ -35,6 +35,7 @@ import { GraphsComponent } from './components/graphs/graphs.component';
|
||||
import { BlocksList } from './components/blocks-list/blocks-list.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';
|
||||
|
||||
let routes: Routes = [
|
||||
{
|
||||
@ -126,7 +127,11 @@ let routes: Routes = [
|
||||
{
|
||||
path: 'mining/block-rewards',
|
||||
component: BlockRewardsGraphComponent,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'mining/block-fee-rates',
|
||||
component: BlockFeeRatesGraphComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -264,7 +269,11 @@ let routes: Routes = [
|
||||
{
|
||||
path: 'mining/block-rewards',
|
||||
component: BlockRewardsGraphComponent,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'mining/block-fee-rates',
|
||||
component: BlockFeeRatesGraphComponent,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -400,7 +409,11 @@ let routes: Routes = [
|
||||
{
|
||||
path: 'mining/block-rewards',
|
||||
component: BlockRewardsGraphComponent,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'mining/block-fee-rates',
|
||||
component: BlockFeeRatesGraphComponent,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@ -83,6 +83,7 @@ import { RewardStatsComponent } from './components/reward-stats/reward-stats.com
|
||||
import { DataCyDirective } from './data-cy.directive';
|
||||
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';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -147,6 +148,7 @@ import { BlockRewardsGraphComponent } from './components/block-rewards-graph/blo
|
||||
RewardStatsComponent,
|
||||
BlockFeesGraphComponent,
|
||||
BlockRewardsGraphComponent,
|
||||
BlockFeeRatesGraphComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({ appId: 'serverApp' }),
|
||||
|
||||
@ -143,8 +143,10 @@ export function selectPowerOfTen(val: number) {
|
||||
};
|
||||
|
||||
let selectedPowerOfTen;
|
||||
if (val < powerOfTen.mega) {
|
||||
if (val < powerOfTen.kilo) {
|
||||
selectedPowerOfTen = { divider: 1, unit: '' }; // no scaling
|
||||
} else if (val < powerOfTen.mega) {
|
||||
selectedPowerOfTen = { divider: powerOfTen.kilo, unit: 'k' };
|
||||
} else if (val < powerOfTen.giga) {
|
||||
selectedPowerOfTen = { divider: powerOfTen.mega, unit: 'M' };
|
||||
} else if (val < powerOfTen.terra) {
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="full-container">
|
||||
<div class="card-header mb-0 mb-md-4">
|
||||
<span i18n="mining.block-fee-rates">Block fee rates</span>
|
||||
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
|
||||
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1">
|
||||
<input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 3">
|
||||
<input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 7">
|
||||
<input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
|
||||
<input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
|
||||
<input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
|
||||
<input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
|
||||
<input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
|
||||
<input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
|
||||
<input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
|
||||
<input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions">
|
||||
</div>
|
||||
<div class="text-center loadingGraphs" *ngIf="isLoading">
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,135 @@
|
||||
.card-header {
|
||||
border-bottom: 0;
|
||||
font-size: 18px;
|
||||
@media (min-width: 465px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
position: relative;
|
||||
color: #ffffff91;
|
||||
margin-top: -13px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.full-container {
|
||||
padding: 0px 15px;
|
||||
width: 100%;
|
||||
min-height: 500px;
|
||||
height: calc(100% - 150px);
|
||||
@media (max-width: 992px) {
|
||||
height: 100%;
|
||||
padding-bottom: 100px;
|
||||
};
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 10px;
|
||||
@media (max-width: 992px) {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
@media (max-width: 829px) {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
@media (max-width: 629px) {
|
||||
padding-bottom: 55px;
|
||||
}
|
||||
@media (max-width: 567px) {
|
||||
padding-bottom: 55px;
|
||||
}
|
||||
}
|
||||
.chart-widget {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 270px;
|
||||
}
|
||||
|
||||
.formRadioGroup {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@media (min-width: 1130px) {
|
||||
position: relative;
|
||||
top: -65px;
|
||||
}
|
||||
@media (min-width: 830px) and (max-width: 1130px) {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
@media (min-width: 830px) {
|
||||
flex-direction: row;
|
||||
float: right;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.btn-sm {
|
||||
font-size: 9px;
|
||||
@media (min-width: 830px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pool-distribution {
|
||||
min-height: 56px;
|
||||
display: block;
|
||||
@media (min-width: 485px) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
margin: 0px auto 20px;
|
||||
&:nth-child(2) {
|
||||
order: 2;
|
||||
@media (min-width: 485px) {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
order: 3;
|
||||
@media (min-width: 485px) {
|
||||
order: 2;
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
color: #4a68b9;
|
||||
}
|
||||
.card-text {
|
||||
font-size: 18px;
|
||||
span {
|
||||
color: #ffffff66;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-loader {
|
||||
width: 100%;
|
||||
display: block;
|
||||
max-width: 80px;
|
||||
margin: 15px auto 3px;
|
||||
}
|
||||
@ -0,0 +1,257 @@
|
||||
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
|
||||
import { EChartsOption } from 'echarts';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
|
||||
import { ApiService } from 'src/app/services/api.service';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { formatNumber } from '@angular/common';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { formatterXAxis } from 'src/app/shared/graphs.utils';
|
||||
import { StorageService } from 'src/app/services/storage.service';
|
||||
import { MiningService } from 'src/app/services/mining.service';
|
||||
import { selectPowerOfTen } from 'src/app/bitcoin.utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-block-fee-rates-graph',
|
||||
templateUrl: './block-fee-rates-graph.component.html',
|
||||
styleUrls: ['./block-fee-rates-graph.component.scss'],
|
||||
styles: [`
|
||||
.loadingGraphs {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(50% - 15px);
|
||||
z-index: 100;
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class BlockFeeRatesGraphComponent implements OnInit {
|
||||
@Input() right: number | string = 45;
|
||||
@Input() left: number | string = 75;
|
||||
|
||||
miningWindowPreference: string;
|
||||
radioGroupForm: FormGroup;
|
||||
|
||||
chartOptions: EChartsOption = {};
|
||||
chartInitOptions = {
|
||||
renderer: 'svg',
|
||||
};
|
||||
|
||||
statsObservable$: Observable<any>;
|
||||
isLoading = true;
|
||||
formatNumber = formatNumber;
|
||||
timespan = '';
|
||||
|
||||
constructor(
|
||||
@Inject(LOCALE_ID) public locale: string,
|
||||
private seoService: SeoService,
|
||||
private apiService: ApiService,
|
||||
private formBuilder: FormBuilder,
|
||||
private storageService: StorageService,
|
||||
private miningService: MiningService
|
||||
) {
|
||||
this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' });
|
||||
this.radioGroupForm.controls.dateSpan.setValue('1y');
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.seoService.setTitle($localize`:@@mining.block-fee-rates:Block Fee Rates`);
|
||||
this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
|
||||
this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
|
||||
this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
|
||||
|
||||
this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
|
||||
.pipe(
|
||||
startWith(this.miningWindowPreference),
|
||||
switchMap((timespan) => {
|
||||
this.storageService.setValue('miningWindowPreference', timespan);
|
||||
this.timespan = timespan;
|
||||
this.isLoading = true;
|
||||
return this.apiService.getHistoricalBlockFeeRates$(timespan)
|
||||
.pipe(
|
||||
tap((data: any) => {
|
||||
// Group by percentile
|
||||
const seriesData = {
|
||||
'Min': [],
|
||||
'10th': [],
|
||||
'25th': [],
|
||||
'Median': [],
|
||||
'75th': [],
|
||||
'90th': [],
|
||||
'Max': []
|
||||
};
|
||||
for (const rate of data.blockFeeRates) {
|
||||
const timestamp = rate.timestamp * 1000;
|
||||
seriesData['Min'].push([timestamp, rate.avg_fee_0, rate.avg_height]);
|
||||
seriesData['10th'].push([timestamp, rate.avg_fee_10, rate.avg_height]);
|
||||
seriesData['25th'].push([timestamp, rate.avg_fee_25, rate.avg_height]);
|
||||
seriesData['Median'].push([timestamp, rate.avg_fee_50, rate.avg_height]);
|
||||
seriesData['75th'].push([timestamp, rate.avg_fee_75, rate.avg_height]);
|
||||
seriesData['90th'].push([timestamp, rate.avg_fee_90, rate.avg_height]);
|
||||
seriesData['Max'].push([timestamp, rate.avg_fee_100, rate.avg_height]);
|
||||
}
|
||||
|
||||
// Prepare chart
|
||||
const series = [];
|
||||
const legends = [];
|
||||
for (const percentile in seriesData) {
|
||||
series.push({
|
||||
zlevel: 0,
|
||||
stack: 'Total',
|
||||
name: percentile,
|
||||
data: seriesData[percentile],
|
||||
type: 'bar',
|
||||
barWidth: '100%',
|
||||
large: true,
|
||||
});
|
||||
|
||||
legends.push({
|
||||
name: percentile,
|
||||
inactiveColor: 'rgb(110, 112, 121)',
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
icon: 'roundRect',
|
||||
enabled: false,
|
||||
selected: false,
|
||||
});
|
||||
}
|
||||
|
||||
this.prepareChartOptions({
|
||||
legends: legends,
|
||||
series: series,
|
||||
});
|
||||
this.isLoading = false;
|
||||
}),
|
||||
map((data: any) => {
|
||||
const availableTimespanDay = (
|
||||
(new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
|
||||
) / 3600 / 24;
|
||||
|
||||
return {
|
||||
availableTimespanDay: availableTimespanDay,
|
||||
};
|
||||
}),
|
||||
);
|
||||
}),
|
||||
share()
|
||||
);
|
||||
}
|
||||
|
||||
prepareChartOptions(data) {
|
||||
this.chartOptions = {
|
||||
color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
|
||||
animation: false,
|
||||
grid: {
|
||||
right: this.right,
|
||||
left: this.left,
|
||||
bottom: 70,
|
||||
top: this.isMobile() ? 10 : 50,
|
||||
},
|
||||
tooltip: {
|
||||
show: !this.isMobile(),
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
},
|
||||
backgroundColor: 'rgba(17, 19, 31, 1)',
|
||||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
align: 'left',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: function (data) {
|
||||
if (data.length <= 0) {
|
||||
return '';
|
||||
}
|
||||
let tooltip = `<b style="color: white; margin-left: 2px">
|
||||
${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
|
||||
|
||||
for (const pool of data.reverse()) {
|
||||
tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]} sats/vByte<br>`;
|
||||
}
|
||||
|
||||
if (['24h', '3d'].includes(this.timespan)) {
|
||||
tooltip += `<small>At block: ${data[0].data[2]}</small>`;
|
||||
} else {
|
||||
tooltip += `<small>Around block ${data[0].data[2]}</small>`;
|
||||
}
|
||||
|
||||
return tooltip;
|
||||
}.bind(this)
|
||||
},
|
||||
xAxis: data.series.length === 0 ? undefined : {
|
||||
type: 'category',
|
||||
splitNumber: this.isMobile() ? 5 : 10,
|
||||
axisLabel: {
|
||||
hideOverlap: true,
|
||||
formatter: val => formatterXAxis(this.locale, this.timespan, parseInt(val, 10)),
|
||||
},
|
||||
},
|
||||
legend: (data.series.length === 0) ? undefined : {
|
||||
data: data.legends,
|
||||
selected: {
|
||||
'Min': true,
|
||||
'10th': true,
|
||||
'25th': true,
|
||||
'Median': true,
|
||||
'75th': true,
|
||||
'90th': true,
|
||||
'Max': false,
|
||||
}
|
||||
},
|
||||
yAxis: data.series.length === 0 ? undefined : {
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
color: 'rgb(110, 112, 121)',
|
||||
formatter: (val) => {
|
||||
const selectedPowerOfTen: any = selectPowerOfTen(val);
|
||||
const newVal = Math.round(val / selectedPowerOfTen.divider);
|
||||
return `${newVal}${selectedPowerOfTen.unit} sats/vB`;
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: '#ffffff66',
|
||||
opacity: 0.25,
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
max: () => this.timespan === 'all' ? 5000 : undefined,
|
||||
},
|
||||
series: data.series,
|
||||
dataZoom: [{
|
||||
type: 'inside',
|
||||
realtime: true,
|
||||
zoomLock: true,
|
||||
maxSpan: 100,
|
||||
minSpan: 10,
|
||||
moveOnMouseMove: false,
|
||||
}, {
|
||||
showDetail: false,
|
||||
show: true,
|
||||
type: 'slider',
|
||||
brushSelect: false,
|
||||
realtime: true,
|
||||
left: 20,
|
||||
right: 15,
|
||||
selectedDataBackground: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
opacity: 0.45,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0,
|
||||
}
|
||||
},
|
||||
}],
|
||||
};
|
||||
}
|
||||
|
||||
isMobile() {
|
||||
return (window.innerWidth <= 767.98);
|
||||
}
|
||||
}
|
||||
@ -44,20 +44,3 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-template #loadingStats>
|
||||
<div class="pool-distribution">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="mining.miners-luck">Hashrate</h5>
|
||||
<p class="card-text">
|
||||
<span class="skeleton-loader skeleton-loader-big"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
|
||||
<p class="card-text">
|
||||
<span class="skeleton-loader skeleton-loader-big"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
@ -25,7 +25,6 @@ import { MiningService } from 'src/app/services/mining.service';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class BlockFeesGraphComponent implements OnInit {
|
||||
@Input() tableOnly = false;
|
||||
@Input() right: number | string = 45;
|
||||
@Input() left: number | string = 75;
|
||||
|
||||
@ -150,8 +149,12 @@ export class BlockFeesGraphComponent implements OnInit {
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: '#ffffff66',
|
||||
opacity: 0.25,
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
||||
@ -44,21 +44,4 @@
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-template #loadingStats>
|
||||
<div class="pool-distribution">
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="mining.miners-luck">Hashrate</h5>
|
||||
<p class="card-text">
|
||||
<span class="skeleton-loader skeleton-loader-big"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="card-title" i18n="master-page.blocks">Difficulty</h5>
|
||||
<p class="card-text">
|
||||
<span class="skeleton-loader skeleton-loader-big"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
@ -149,8 +149,12 @@ export class BlockRewardsGraphComponent implements OnInit {
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: '#ffffff66',
|
||||
opacity: 0.25,
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
||||
@ -16,6 +16,10 @@
|
||||
[routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="mining.hashrate-difficulty">
|
||||
Hashrate & Difficulty
|
||||
</a>
|
||||
<a class="dropdown-item" routerLinkActive="active"
|
||||
[routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" i18n="mining.block-fee-rates">
|
||||
Block Fee Rates
|
||||
</a>
|
||||
<a class="dropdown-item" routerLinkActive="active"
|
||||
[routerLink]="['/graphs/mining/block-fees' | relativeUrl]" i18n="mining.block-fees">
|
||||
Block Fees
|
||||
|
||||
@ -290,8 +290,12 @@ export class HashrateChartComponent implements OnInit {
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: '#ffffff66',
|
||||
opacity: 0.25,
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
series: data.hashrates.length === 0 ? [] : [
|
||||
|
||||
@ -179,7 +179,7 @@ export class StatisticsComponent implements OnInit {
|
||||
}
|
||||
|
||||
// Find median value
|
||||
const vBytes : number[] = [];
|
||||
const vBytes: number[] = [];
|
||||
for (const stat of this.mempoolStats) {
|
||||
vBytes.push(stat.vbytes_per_second);
|
||||
}
|
||||
|
||||
@ -182,6 +182,13 @@ export class ApiService {
|
||||
);
|
||||
}
|
||||
|
||||
getHistoricalBlockFeeRates$(interval: string | undefined) : Observable<any> {
|
||||
return this.httpClient.get<any[]>(
|
||||
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fee-rates` +
|
||||
(interval !== undefined ? `/${interval}` : '')
|
||||
);
|
||||
}
|
||||
|
||||
getRewardStats$(blockCount: number = 144): Observable<RewardStats> {
|
||||
return this.httpClient.get<RewardStats>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/reward-stats/${blockCount}`);
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
export const formatterXAxis = (
|
||||
locale: string,
|
||||
windowPreference: string,
|
||||
value: string
|
||||
value: string | number
|
||||
) => {
|
||||
|
||||
if(value.length === 0){
|
||||
if (typeof value === 'string' && value.length === 0){
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -13,6 +12,7 @@ export const formatterXAxis = (
|
||||
case '2h':
|
||||
return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
|
||||
case '24h':
|
||||
case '3d':
|
||||
return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric', minute: 'numeric' });
|
||||
case '1w':
|
||||
case '1m':
|
||||
@ -22,6 +22,7 @@ export const formatterXAxis = (
|
||||
return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });
|
||||
case '2y':
|
||||
case '3y':
|
||||
case 'all':
|
||||
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user