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

Merge branch 'master' into nymkappa/bufix/blocks-list-skeleton

Browse Source
This commit is contained in:
wiz
2022-04-24 03:52:18 +00:00
committed by GitHub
parent 606477e1a9 528d9b798b
commit b540c7ddbc
40 changed files with 836 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/app/app-routing.module.ts
View File

@@ -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,
},
]
},
{

2
frontend/src/app/app.module.ts
View File

@@ -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' }),

4
frontend/src/app/bitcoin.utils.ts
View File

@@ -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) {

4
frontend/src/app/components/about/about.component.html
View File

@@ -226,6 +226,10 @@
<img class="image" src="/resources/profile/phoenix.jpg" />
<span>Phoenix</span>
</a>
<a href="https://github.com/layer2tech/mercury-wallet" target="_blank" title="Mercury Wallet">
<img class="image" src="/resources/profile/mercury.svg" />
<span>Mercury</span>
</a>
<a href="https://github.com/muun/apollo" target="_blank" title="Muun Wallet">
<img class="image" src="/resources/profile/muun.png" />
<span>Muun</span>

2
frontend/src/app/components/about/about.component.scss
View File

@@ -185,6 +185,6 @@
}
.community-integrations-sponsor {
max-width: 750px;
max-width: 830px;
margin: auto;
}

2
frontend/src/app/components/asset/asset.component.html
View File

@@ -64,7 +64,7 @@
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col icon-holder">
<img *ngIf="!imageError; else defaultIcon" class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'" (error)="imageError = true">
<img *ngIf="!imageError; else defaultIcon" class="assetIcon" [src]="'/api/v1/asset/' + asset.asset_id + '/icon'" (error)="imageError = true">
<ng-template #defaultIcon>
<fa-icon class="defaultIcon" [icon]="['fas', 'database']" [fixedWidth]="true" size="8x"></fa-icon>
</ng-template>

2
frontend/src/app/components/assets/asset-group/asset-group.component.html
View File

@@ -15,7 +15,7 @@
<div *ngFor="let asset of group.assets">
<div class="card">
<a [routerLink]="['/assets/asset' | relativeUrl, asset.asset_id]">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'">
<img class="assetIcon" [src]="'/api/v1/asset/' + asset.asset_id + '/icon'">
</a>
<div class="title">
<a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a>

4
frontend/src/app/components/assets/assets-featured/assets-featured.component.html
View File

@@ -3,14 +3,14 @@
<div class="card" *ngFor="let group of featured">
<ng-template [ngIf]="group.assets" [ngIfElse]="singleAsset">
<a [routerLink]="['/assets/group' | relativeUrl, group.id]">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.assets[0] + '/icon'">
<img class="assetIcon" [src]="'/api/v1/asset/' + group.assets[0] + '/icon'">
</a>
<div class="title"><a [routerLink]="['/assets/group' | relativeUrl, group.id]">{{ group.name }}</a></div>
<div class="sub-title" i18n>Group of {{ group.assets.length | number }} assets</div>
</ng-template>
<ng-template #singleAsset>
<a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
<img class="assetIcon" [src]="'/api/v1/asset/' + group.asset + '/icon'">
</a>
<div class="title">
<a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>

47
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html Normal file
View File

@@ -0,0 +1,47 @@
<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"
(chartInit)="onChartInit($event)">
</div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
</div>

135
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss Normal file
View File

@@ -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;
}

300
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts Normal file
View File

@@ -0,0 +1,300 @@
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, 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, formatterXAxisLabel, formatterXAxisTimeCategory } 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';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
@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 = '';
chartInstance: any = undefined;
constructor(
@Inject(LOCALE_ID) public locale: string,
private seoService: SeoService,
private apiService: ApiService,
private formBuilder: FormBuilder,
private storageService: StorageService,
private miningService: MiningService,
private stateService: StateService,
private router: Router,
private zone: NgZone,
) {
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: 80,
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 :
{
name: formatterXAxisLabel(this.locale, this.timespan),
nameLocation: 'middle',
nameTextStyle: {
padding: [10, 0, 0, 0],
},
type: 'category',
boundaryGap: false,
axisLine: { onZero: true },
axisLabel: {
formatter: val => formatterXAxisTimeCategory(this.locale, this.timespan, parseInt(val, 10)),
align: 'center',
fontSize: 11,
lineHeight: 12,
hideOverlap: true,
padding: [0, 5],
},
},
legend: (data.series.length === 0) ? undefined : {
data: data.legends,
selected: JSON.parse(this.storageService.getValue('fee_rates_legend')) ?? {
'Min': true,
'10th': true,
'25th': true,
'Median': true,
'75th': true,
'90th': true,
'Max': false,
},
id: 4242,
},
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} s/vB`;
},
},
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
opacity: 0.25,
}
},
type: 'value',
max: (val) => this.timespan === 'all' ? Math.min(val.max, 5000) : undefined,
},
series: data.series,
dataZoom: [{
type: 'inside',
realtime: true,
zoomLock: true,
maxSpan: 100,
minSpan: 5,
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,
}
},
}],
};
}
onChartInit(ec) {
if (this.chartInstance !== undefined) {
return;
}
this.chartInstance = ec;
this.chartInstance.on('click', (e) => {
if (e.data.data === 9999) { // "Other"
return;
}
this.zone.run(() => {
if (['24h', '3d'].includes(this.timespan)) {
const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.data[2]}`);
this.router.navigate([url]);
}
});
});
this.chartInstance.on('legendselectchanged', (e) => {
this.storageService.setValue('fee_rates_legend', JSON.stringify(e.selected));
});
}
isMobile() {
return (window.innerWidth <= 767.98);
}
}

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

@@ -3,34 +3,34 @@
<span i18n="mining.block-fees">Block fees</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">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
<input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 3">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 432">
<input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 7">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 1008">
<input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
<input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 12960">
<input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
<input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 52560">
<input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 105120">
<input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 157680">
<input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount > 157680">
<input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
</label>
</div>
@@ -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>

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

@@ -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;
@@ -69,19 +68,15 @@ export class BlockFeesGraphComponent implements OnInit {
this.isLoading = true;
return this.apiService.getHistoricalBlockFees$(timespan)
.pipe(
tap((data: any) => {
tap((response) => {
this.prepareChartOptions({
blockFees: data.blockFees.map(val => [val.timestamp * 1000, val.avg_fees / 100000000]),
blockFees: response.body.map(val => [val.timestamp * 1000, val.avg_fees / 100000000]),
});
this.isLoading = false;
}),
map((data: any) => {
const availableTimespanDay = (
(new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
) / 3600 / 24;
map((response) => {
return {
availableTimespanDay: availableTimespanDay,
blockCount: parseInt(response.headers.get('x-total-count'), 10),
};
}),
);
@@ -150,8 +145,12 @@ export class BlockFeesGraphComponent implements OnInit {
}
},
splitLine: {
show: false,
}
lineStyle: {
type: 'dotted',
color: '#ffffff66',
opacity: 0.25,
}
},
},
],
series: [
@@ -172,7 +171,7 @@ export class BlockFeesGraphComponent implements OnInit {
realtime: true,
zoomLock: true,
maxSpan: 100,
minSpan: 10,
minSpan: 5,
moveOnMouseMove: false,
}, {
showDetail: false,

39
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
View File

@@ -4,34 +4,34 @@
<span i18n="mining.block-rewards">Block rewards</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">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
<input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 3">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 432">
<input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 7">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 1008">
<input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 30">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
<input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 12960">
<input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
<input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 52560">
<input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 105120">
<input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 157680">
<input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount > 157680">
<input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
</label>
</div>
@@ -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>

22
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
View File

@@ -66,19 +66,15 @@ export class BlockRewardsGraphComponent implements OnInit {
this.isLoading = true;
return this.apiService.getHistoricalBlockRewards$(timespan)
.pipe(
tap((data: any) => {
tap((response) => {
this.prepareChartOptions({
blockRewards: data.blockRewards.map(val => [val.timestamp * 1000, val.avg_rewards / 100000000]),
blockRewards: response.body.map(val => [val.timestamp * 1000, val.avg_rewards / 100000000]),
});
this.isLoading = false;
}),
map((data: any) => {
const availableTimespanDay = (
(new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
) / 3600 / 24;
map((response) => {
return {
availableTimespanDay: availableTimespanDay,
blockCount: parseInt(response.headers.get('x-total-count'), 10),
};
}),
);
@@ -149,8 +145,12 @@ export class BlockRewardsGraphComponent implements OnInit {
}
},
splitLine: {
show: false,
}
lineStyle: {
type: 'dotted',
color: '#ffffff66',
opacity: 0.25,
}
},
},
],
series: [
@@ -171,7 +171,7 @@ export class BlockRewardsGraphComponent implements OnInit {
realtime: true,
zoomLock: true,
maxSpan: 100,
minSpan: 10,
minSpan: 5,
moveOnMouseMove: false,
}, {
showDetail: false,

3
frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.components.ts
View File

@@ -32,7 +32,8 @@ export class DifficultyAdjustmentsTable implements OnInit {
ngOnInit(): void {
this.hashrateObservable$ = this.apiService.getHistoricalHashrate$('1y')
.pipe(
map((data: any) => {
map((response) => {
const data = response.body;
const availableTimespanDay = (
(new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
) / 3600 / 24;

4
frontend/src/app/components/graphs/graphs.component.html
View File

@@ -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

14
frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
View File

@@ -22,25 +22,25 @@
<span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | 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 >= 30">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
<input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 12960">
<input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
<input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 52560">
<input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 105120">
<input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 157680">
<input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount > 157680">
<input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
</label>
</div>

23
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View File

@@ -79,7 +79,8 @@ export class HashrateChartComponent implements OnInit {
this.isLoading = true;
return this.apiService.getHistoricalHashrate$(timespan)
.pipe(
tap((data: any) => {
tap((response) => {
const data = response.body;
// We generate duplicated data point so the tooltip works nicely
const diffFixed = [];
let diffIndex = 1;
@@ -111,7 +112,6 @@ export class HashrateChartComponent implements OnInit {
this.prepareChartOptions({
hashrates: data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]),
difficulty: diffFixed.map(val => [val.timestamp * 1000, val.difficulty]),
timestamp: data.oldestIndexedBlockTimestamp,
});
this.isLoading = false;
@@ -120,13 +120,10 @@ export class HashrateChartComponent implements OnInit {
throw new Error();
}
}),
map((data: any) => {
const availableTimespanDay = (
(new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
) / 3600 / 24;
map((response) => {
const data = response.body;
return {
availableTimespanDay: availableTimespanDay,
blockCount: parseInt(response.headers.get('x-total-count'), 10),
currentDifficulty: Math.round(data.difficulty[data.difficulty.length - 1].difficulty * 100) / 100,
currentHashrate: data.hashrates[data.hashrates.length - 1].avgHashrate,
};
@@ -290,8 +287,12 @@ export class HashrateChartComponent implements OnInit {
}
},
splitLine: {
show: false,
}
lineStyle: {
type: 'dotted',
color: '#ffffff66',
opacity: 0.25,
}
},
}
],
series: data.hashrates.length === 0 ? [] : [
@@ -324,7 +325,7 @@ export class HashrateChartComponent implements OnInit {
realtime: true,
zoomLock: true,
maxSpan: 100,
minSpan: 10,
minSpan: 5,
moveOnMouseMove: false,
}, {
showDetail: false,

14
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
View File

@@ -4,25 +4,25 @@
<span i18n="mining.pools-dominance">Mining pools dominance</span>
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | 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 >= 30">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
<input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 90">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 12960">
<input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 180">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
<input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 365">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 52560">
<input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 730">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 105120">
<input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay >= 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 157680">
<input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.availableTimespanDay > 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount > 157680">
<input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
</label>
</div>

15
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
View File

@@ -72,10 +72,11 @@ export class HashrateChartPoolsComponent implements OnInit {
this.isLoading = true;
return this.apiService.getHistoricalPoolsHashrate$(timespan)
.pipe(
tap((data: any) => {
tap((response) => {
const hashrates = response.body;
// Prepare series (group all hashrates data point by pool)
const grouped = {};
for (const hashrate of data.hashrates) {
for (const hashrate of hashrates) {
if (!grouped.hasOwnProperty(hashrate.poolName)) {
grouped[hashrate.poolName] = [];
}
@@ -119,7 +120,6 @@ export class HashrateChartPoolsComponent implements OnInit {
this.prepareChartOptions({
legends: legends,
series: series,
timestamp: data.oldestIndexedBlockTimestamp,
});
this.isLoading = false;
@@ -128,13 +128,10 @@ export class HashrateChartPoolsComponent implements OnInit {
throw new Error();
}
}),
map((data: any) => {
const availableTimespanDay = (
(new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
) / 3600 / 24;
map((response) => {
return {
availableTimespanDay: availableTimespanDay,
};
blockCount: parseInt(response.headers.get('x-total-count'), 10),
}
}),
retryWhen((errors) => errors.pipe(
delay(60000)

22
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

@@ -26,36 +26,36 @@
<div class="card-header" *ngIf="!widget">
<span i18n="mining.mining-pool-share">Mining pools share</span>
<form [formGroup]="radioGroupForm" class="formRadioGroup"
*ngIf="!widget && (miningStatsObservable$ | async) as miningStats">
*ngIf="!widget && (miningStatsObservable$ | async) as stats">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 144">
<input ngbButton type="radio" [value]="'24h'" fragment="24h"> 24h
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 3">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 432">
<input ngbButton type="radio" [value]="'3d'" fragment="3d"> 3D
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 7">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 1008">
<input ngbButton type="radio" [value]="'1w'" fragment="1w"> 1W
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 30">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 4320">
<input ngbButton type="radio" [value]="'1m'" fragment="1m"> 1M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 90">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 12960">
<input ngbButton type="radio" [value]="'3m'" fragment="3m"> 3M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 180">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 25920">
<input ngbButton type="radio" [value]="'6m'" fragment="6m"> 6M
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 365">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 52560">
<input ngbButton type="radio" [value]="'1y'" fragment="1y"> 1Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 730">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 105120">
<input ngbButton type="radio" [value]="'2y'" fragment="2y"> 2Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay >= 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 157680">
<input ngbButton type="radio" [value]="'3y'" fragment="3y"> 3Y
</label>
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="miningStats.availableTimespanDay > 1095">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.totalBlockCount > 157680">
<input ngbButton type="radio" [value]="'all'" fragment="all"> ALL
</label>
</div>

2
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View File

@@ -276,7 +276,7 @@ export class PoolRankingComponent implements OnInit {
totalEmptyBlock: 0,
totalEmptyBlockRatio: '',
pools: [],
availableTimespanDay: 0,
totalBlockCount: 0,
miningUnits: {
hashrateDivider: 1,
hashrateUnit: '',

2
frontend/src/app/components/pool/pool.component.ts
View File

@@ -56,7 +56,7 @@ export class PoolComponent implements OnInit {
.pipe(
switchMap((data) => {
this.isLoading = false;
this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]));
this.prepareChartOptions(data.map(val => [val.timestamp * 1000, val.avgHashrate]));
return [slug];
}),
);

2
frontend/src/app/components/statistics/statistics.component.ts
View File

@@ -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);
}

2
frontend/src/app/dashboard/dashboard.component.html
View File

@@ -79,7 +79,7 @@
<tr *ngFor="let group of featuredAssets">
<td class="asset-icon">
<a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
<img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
<img class="assetIcon" [src]="'/api/v1/asset/' + group.asset + '/icon'">
</a>
</td>
<td class="asset-title">

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

@@ -125,10 +125,10 @@ export class ApiService {
return this.httpClient.post<any>(this.apiBaseUrl + this.apiBasePath + '/api/tx', hexPayload, { responseType: 'text' as 'json'});
}
listPools$(interval: string | undefined) : Observable<PoolsStats> {
return this.httpClient.get<PoolsStats>(
listPools$(interval: string | undefined) : Observable<any> {
return this.httpClient.get<any>(
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pools` +
(interval !== undefined ? `/${interval}` : '')
(interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
);
}
@@ -157,27 +157,34 @@ export class ApiService {
getHistoricalHashrate$(interval: string | undefined): Observable<any> {
return this.httpClient.get<any[]>(
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/hashrate` +
(interval !== undefined ? `/${interval}` : '')
(interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
);
}
getHistoricalPoolsHashrate$(interval: string | undefined): Observable<any> {
return this.httpClient.get<any[]>(
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/hashrate/pools` +
(interval !== undefined ? `/${interval}` : '')
(interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
);
}
getHistoricalBlockFees$(interval: string | undefined) : Observable<any> {
return this.httpClient.get<any[]>(
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fees` +
(interval !== undefined ? `/${interval}` : '')
(interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
);
}
getHistoricalBlockRewards$(interval: string | undefined) : Observable<any> {
return this.httpClient.get<any[]>(
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/rewards` +
(interval !== undefined ? `/${interval}` : ''), { observe: 'response' }
);
}
getHistoricalBlockFeeRates$(interval: string | undefined) : Observable<any> {
return this.httpClient.get<any[]>(
this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fee-rates` +
(interval !== undefined ? `/${interval}` : '')
);
}

13
frontend/src/app/services/mining.service.ts
View File

@@ -18,7 +18,7 @@ export interface MiningStats {
totalEmptyBlockRatio: string;
pools: SinglePoolStats[];
miningUnits: MiningUnits;
availableTimespanDay: number;
totalBlockCount: number;
}
@Injectable({
@@ -37,7 +37,7 @@ export class MiningService {
*/
public getMiningStats(interval: string): Observable<MiningStats> {
return this.apiService.listPools$(interval).pipe(
map(pools => this.generateMiningStats(pools))
map(response => this.generateMiningStats(response))
);
}
@@ -82,7 +82,8 @@ export class MiningService {
return preference;
}
private generateMiningStats(stats: PoolsStats): MiningStats {
private generateMiningStats(response): MiningStats {
const stats: PoolsStats = response.body;
const miningUnits = this.getMiningUnits();
const hashrateDivider = miningUnits.hashrateDivider;
@@ -100,10 +101,6 @@ export class MiningService {
};
});
const availableTimespanDay = (
(new Date().getTime() / 1000) - (stats.oldestIndexedBlockTimestamp)
) / 3600 / 24;
return {
lastEstimatedHashrate: (stats.lastEstimatedHashrate / hashrateDivider).toFixed(2),
blockCount: stats.blockCount,
@@ -111,7 +108,7 @@ export class MiningService {
totalEmptyBlockRatio: totalEmptyBlockRatio,
pools: poolsStats,
miningUnits: miningUnits,
availableTimespanDay: availableTimespanDay,
totalBlockCount: parseInt(response.headers.get('x-total-count'), 10),
};
}
}

36
frontend/src/app/shared/graphs.utils.ts
View File

@@ -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':
@@ -23,6 +23,8 @@ export const formatterXAxis = (
case '2y':
case '3y':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
case 'all':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short' });
}
};
@@ -35,6 +37,7 @@ export const formatterXAxisLabel = (
case '2h':
case '24h':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
case '3d':
case '1w':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
case '1m':
@@ -47,3 +50,30 @@ export const formatterXAxisLabel = (
return null;
}
};
export const formatterXAxisTimeCategory = (
locale: string,
windowPreference: string,
value: number
) => {
const date = new Date(value);
switch (windowPreference) {
case '2h':
return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
case '24h':
return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric' });
case '3d':
case '1w':
return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric' });
case '1m':
case '3m':
return date.toLocaleDateString(locale, { month: 'long', day: 'numeric' });
case '6m':
case '1y':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
case '2y':
case '3y':
case 'all':
return date.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
}
};