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

Merge pull request #1303 from nymkappa/feature/update-mining-dashboard

Browse Source 
Mining dashboard polishing
This commit is contained in:
softsimon 2022-03-07 12:03:09 +01:00 committed by GitHub
commit 641fa91a48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 398 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div> <div *ngIf="showTitle" class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
<div class="card-wrapper"> <div class="card-wrapper">
<div class="card"> <div class="card">
<div class="card-body more-padding"> <div class="card-body more-padding">
@ -47,7 +47,7 @@
</div> </div>
</div> </div>
<div class="item" *ngIf="showHalving"> <div class="item" *ngIf="showHalving">
<h5 class="card-title" i18n="difficulty-box.next-halving">Next halving</h5> <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
<div class="card-text"> <div class="card-text">
<ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container> <ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template> <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>

7
frontend/src/app/components/difficulty/difficulty.component.ts
View File

@ -28,8 +28,9 @@ export class DifficultyComponent implements OnInit {
isLoadingWebSocket$: Observable<boolean>; isLoadingWebSocket$: Observable<boolean>;
difficultyEpoch$: Observable<EpochProgress>; difficultyEpoch$: Observable<EpochProgress>;
@Input() showProgress: boolean = true; @Input() showProgress = true;
@Input() showHalving: boolean = false; @Input() showHalving = false;
@Input() showTitle = true;
constructor( constructor(
public stateService: StateService, public stateService: StateService,
@ -97,7 +98,7 @@ export class DifficultyComponent implements OnInit {
colorPreviousAdjustments = '#ffffff66'; colorPreviousAdjustments = '#ffffff66';
} }
const blocksUntilHalving = block.height % 210000; const blocksUntilHalving = 210000 - (block.height % 210000);
const timeUntilHalving = (blocksUntilHalving * timeAvgMins * 60 * 1000) + (now * 1000); const timeUntilHalving = (blocksUntilHalving * timeAvgMins * 60 * 1000) + (now * 1000);
return { return {

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

@ -1,6 +1,6 @@
<div [class]="widget === false ? 'full-container' : ''"> <div [class]="widget === false ? 'full-container' : ''">
<div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''"> <div *ngIf="!tableOnly" class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
<form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates"> <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan"> <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90"> <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">
@ -25,34 +25,31 @@
</form> </form>
</div> </div>
<div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'" <div *ngIf="(hashrateObservable$ | async) && !tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div> echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading"> <div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
<!-- <div class="mt-3" *ngIf="!widget"> <div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly">
<table class="table table-borderless table-sm text-center"> <table class="table table-borderless table-sm text-left" [class]="widget ? 'compact' : ''">
<thead> <thead>
<tr> <tr>
<th i18n="mining.rank">Block</th>
<th class="d-none d-md-block" i18n="block.timestamp">Timestamp</th> <th class="d-none d-md-block" i18n="block.timestamp">Timestamp</th>
<th i18n="mining.adjusted">Adjusted</th> <th i18n="mining.adjusted">Adjusted</th>
<th i18n="mining.difficulty">Difficulty</th> <th i18n="mining.difficulty" class="text-right">Difficulty</th>
<th i18n="mining.change">Change</th> <th i18n="mining.change" class="text-right">Change</th>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="(hashrateObservable$ | async) as data"> <tbody *ngIf="(hashrateObservable$ | async) as data">
<tr *ngFor="let diffChange of data.difficulty"> <tr *ngFor="let diffChange of data.difficulty">
<td><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a></td>
<td class="d-none d-md-block">&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td> <td class="d-none d-md-block">&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
<td><app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since></td> <td><app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since></td>
<td class="d-none d-md-block">{{ formatNumber(diffChange.difficulty, locale, '1.2-2') }}</td> <td class="text-right">{{ diffChange.difficultyShorten }}</td>
<td class="d-block d-md-none">{{ diffChange.difficultyShorten }}</td> <td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
<td [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> --> </div>
</div> </div>

7
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

@ -29,7 +29,7 @@
.chart-widget { .chart-widget {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 275px; max-height: 293px;
} }
.formRadioGroup { .formRadioGroup {
@ -48,3 +48,8 @@
} }
} }
} }
.compact td {
padding: 0 !important;
margin: 0.15rem !important;
}

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

@ -22,7 +22,8 @@ import { selectPowerOfTen } from 'src/app/bitcoin.utils';
`], `],
}) })
export class HashrateChartComponent implements OnInit { export class HashrateChartComponent implements OnInit {
@Input() widget: boolean = false; @Input() tableOnly = false;
@Input() widget = false;
@Input() right: number | string = 45; @Input() right: number | string = 45;
@Input() left: number | string = 75; @Input() left: number | string = 75;
@ -114,7 +115,7 @@ export class HashrateChartComponent implements OnInit {
} }
return { return {
availableTimespanDay: availableTimespanDay, availableTimespanDay: availableTimespanDay,
difficulty: tableData difficulty: this.tableOnly ? (this.isMobile() ? tableData.slice(0, 12) : tableData.slice(0, 9)) : tableData
}; };
}), }),
); );
@ -141,6 +142,7 @@ export class HashrateChartComponent implements OnInit {
bottom: this.widget ? 30 : 60, bottom: this.widget ? 30 : 60,
}, },
tooltip: { tooltip: {
show: !this.isMobile() || !this.widget,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'line' type: 'line'

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

@ -27,7 +27,7 @@
<div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'" <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div> echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading"> <div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>

2
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
View File

@ -29,7 +29,7 @@
.chart-widget { .chart-widget {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 275px; max-height: 293px;
} }
.formRadioGroup { .formRadioGroup {

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

@ -78,7 +78,7 @@ export class HashrateChartPoolsComponent implements OnInit {
name: name, name: name,
showSymbol: false, showSymbol: false,
symbol: 'none', symbol: 'none',
data: grouped[name].map((val) => [val.timestamp * 1000, (val.share * 100).toFixed(2)]), data: grouped[name].map((val) => [val.timestamp * 1000, val.share * 100]),
type: 'line', type: 'line',
lineStyle: { width: 0 }, lineStyle: { width: 0 },
areaStyle: { opacity: 1 }, areaStyle: { opacity: 1 },
@ -132,6 +132,7 @@ export class HashrateChartPoolsComponent implements OnInit {
top: this.widget ? 10 : 40, top: this.widget ? 10 : 40,
}, },
tooltip: { tooltip: {
show: !this.isMobile() || !this.widget,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'line' type: 'line'
@ -149,7 +150,7 @@ export class HashrateChartPoolsComponent implements OnInit {
data.sort((a, b) => b.data[1] - a.data[1]); data.sort((a, b) => b.data[1] - a.data[1]);
for (const pool of data) { for (const pool of data) {
if (pool.data[1] > 0) { if (pool.data[1] > 0) {
tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]}%<br>` tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1].toFixed(2)}%<br>`;
} }
} }
return tooltip; return tooltip;

94
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View File

@ -3,32 +3,94 @@
<div class="row row-cols-1 row-cols-md-2"> <div class="row row-cols-1 row-cols-md-2">
<div class="col"> <div class="col">
<div class="card double"> <div class="main-title">Reward stats</div>
<div class="card-body"> <div class="card" style="height: 123px">
<!-- pool distribution --> <div class="card-body more-padding">
<h5 class="card-title"> <div class="difficulty-adjustment-container" *ngIf="$rewardStats | async as rewardStats">
<a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share"> <div class="item">
Mining Pools Share (1w) <h5 class="card-title" i18n="">Miners Reward</h5>
</a> <div class="card-text">
</h5> <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
<app-pool-ranking [widget]=true></app-pool-ranking> <div class="symbol">in the last 8 blocks</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="">Reward Per Tx</h5>
<div class="card-text">
{{ rewardStats.rewardPerTx }}
<span class="symbol">sats/tx</span>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="">Average Fee</h5>
<div class="card-text">
{{ rewardStats.feePerTx }}
<span class="symbol">sats/tx</span>
<div class="symbol">in the last 8 blocks</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- pools hashrate --> <!-- difficulty adjustment -->
<div class="col">
<div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
<div class="card" style="height: 123px">
<app-difficulty [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty>
</div>
</div>
<!-- pool distribution -->
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<app-pool-ranking [widget]=true></app-pool-ranking>
<div class="mt-1"><a [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>
<!-- hashrate -->
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
Hashrate (1y)
</h5>
<app-hashrate-chart [widget]=true></app-hashrate-chart>
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>
</div>
<!-- pool dominance -->
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
Mining Pools Dominance (1y)
</h5>
<app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools> <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
<div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View
more &raquo;</a></div>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> <div class="card" style="height: 385px">
<div class="card-body"> <div class="card-body">
<!-- hashrate -->
<h5 class="card-title"> <h5 class="card-title">
<a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate"> Adjusments
Hashrate (1y)
</a>
</h5> </h5>
<app-hashrate-chart [widget]=true></app-hashrate-chart> <app-hashrate-chart [tableOnly]=true [widget]=true></app-hashrate-chart>
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div> </div>
</div> </div>
</div> </div>

93
frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
View File

@ -12,14 +12,11 @@
.card { .card {
background-color: #1d1f31; background-color: #1d1f31;
height: 340px;
}
.card.double {
height: 620px;
} }
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9;
} }
.card-title > a { .card-title > a {
color: #4a68b9; color: #4a68b9;
@ -58,3 +55,91 @@
text-align: center; text-align: center;
padding-bottom: 3px; padding-bottom: 3px;
} }
.general-stats {
min-height: 56px;
display: block;
@media (min-width: 485px) {
display: flex;
flex-direction: row;
}
h5 {
margin-bottom: 10px;
}
.item {
width: 50%;
margin: 0px auto 10px;
display: inline-block;
@media (min-width: 485px) {
margin: 0px auto 10px;
}
@media (min-width: 785px) {
margin: 0px auto 0px;
}
&:last-child {
margin: 0px auto 0px;
}
&: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;
}
}
}
}
.difficulty-adjustment-container {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 76px;
.shared-block {
color: #ffffff66;
font-size: 12px;
}
.item {
padding: 0 5px;
width: 100%;
&:nth-child(1) {
display: none;
@media (min-width: 485px) {
display: table-cell;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: table-cell;
}
}
}
.card-text {
font-size: 22px;
margin-top: -9px;
position: relative;
}
}

35
frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
View File

@ -1,5 +1,10 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service'; import { SeoService } from 'src/app/services/seo.service';
import { StateService } from 'src/app/services/state.service';
import { formatNumber } from '@angular/common';
import { WebsocketService } from 'src/app/services/websocket.service';
import { Observable } from 'rxjs';
@Component({ @Component({
selector: 'app-mining-dashboard', selector: 'app-mining-dashboard',
@ -8,12 +13,36 @@ import { SeoService } from 'src/app/services/seo.service';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class MiningDashboardComponent implements OnInit { export class MiningDashboardComponent implements OnInit {
private blocks = [];
constructor(private seoService: SeoService) { public $rewardStats: Observable<any>;
public totalReward = 0;
public rewardPerTx = '~';
public feePerTx = '~';
constructor(private seoService: SeoService,
public stateService: StateService,
private websocketService: WebsocketService,
@Inject(LOCALE_ID) private locale: string,
) {
this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`); this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`);
} }
ngOnInit(): void { ngOnInit(): void {
} this.$rewardStats = this.stateService.blocks$.pipe(
map(([block]) => {
this.blocks.push(block);
this.blocks = this.blocks.slice(0, 8);
const totalTx = this.blocks.reduce((acc, block) => acc + block.tx_count, 0);
const totalFee = this.blocks.reduce((acc, block) => acc + block.extras?.totalFees ?? 0, 0);
const totalReward = this.blocks.reduce((acc, block) => acc + block.extras?.reward ?? 0, 0);
return {
'totalReward': totalReward,
'rewardPerTx': formatNumber(totalReward / totalTx, this.locale, '1.0-0'),
'feePerTx': formatNumber(totalFee / totalTx, this.locale, '1.0-0'),
}
})
);
}
} }

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

@ -1,8 +1,29 @@
<div [class]="widget === false ? 'container-xl' : ''"> <div [class]="widget === false ? 'container-xl' : ''">
<div class="pool-distribution" *ngIf="widget && (miningStatsObservable$ | async) as miningStats">
<div class="item">
<h5 class="card-title" i18n="mining.miners-luck">Pools luck (1w)</h5>
<p class="card-text">
{{ miningStats['minersLuck'] }}%
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
<p class="card-text">
{{ miningStats.blockCount }}
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.miners-count">Pools count (1w)</h5>
<p class="card-text">
{{ miningStats.pools.length }}
</p>
</div>
</div>
<div [class]="widget ? 'chart-widget' : 'chart'" <div [class]="widget ? 'chart-widget' : 'chart'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div> echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
<div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading"> <div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
@ -59,7 +80,7 @@
<td class="d-none d-md-block">{{ pool.rank }}</td> <td class="d-none d-md-block">{{ pool.rank }}</td>
<td class="text-right"><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td> <td class="text-right"><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td>
<td class=""><a [routerLink]="[('/mining/pool/' + pool.poolId) | relativeUrl]">{{ pool.name }}</a></td> <td class=""><a [routerLink]="[('/mining/pool/' + pool.poolId) | relativeUrl]">{{ pool.name }}</a></td>
<td class="" *ngIf="this.poolsWindowPreference === '24h'">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td> <td class="" *ngIf="this.poolsWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
<td class="">{{ pool['blockText'] }}</td> <td class="">{{ pool['blockText'] }}</td>
<td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td> <td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
</tr> </tr>

63
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@ -1,13 +1,16 @@
.chart { .chart {
max-height: 400px; max-height: 400px;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
max-height: 300px; max-height: 270px;
} }
} }
.chart-widget { .chart-widget {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 275px; max-height: 270px;
@media (max-width: 767.98px) {
max-height: 200px;
}
} }
.formRadioGroup { .formRadioGroup {
@ -44,3 +47,59 @@
.loadingGraphs.widget { .loadingGraphs.widget {
top: 25%; top: 25%;
} }
.pool-distribution {
min-height: 56px;
display: block;
@media (min-width: 485px) {
display: flex;
flex-direction: row;
}
h5 {
margin-bottom: 10px;
}
.item {
width: 50%;
margin: 0px auto 10px;
display: inline-block;
@media (min-width: 485px) {
margin: 0px auto 10px;
}
@media (min-width: 785px) {
margin: 0px auto 0px;
}
&:last-child {
margin: 0px auto 0px;
}
&: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;
}
}
}
}

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

@ -85,6 +85,7 @@ export class PoolRankingComponent implements OnInit {
}), }),
map(data => { map(data => {
data.pools = data.pools.map((pool: SinglePoolStats) => this.formatPoolUI(pool)); data.pools = data.pools.map((pool: SinglePoolStats) => this.formatPoolUI(pool));
data['minersLuck'] = (100 * (data.blockCount / 1008)).toFixed(2); // luck 1w
return data; return data;
}), }),
tap(data => { tap(data => {
@ -105,24 +106,40 @@ export class PoolRankingComponent implements OnInit {
} }
generatePoolsChartSerieData(miningStats) { generatePoolsChartSerieData(miningStats) {
const poolShareThreshold = this.isMobile() ? 1 : 0.5; // Do not draw pools which hashrate share is lower than that const poolShareThreshold = this.isMobile() ? 2 : 1; // Do not draw pools which hashrate share is lower than that
const data: object[] = []; const data: object[] = [];
let totalShareOther = 0;
let totalBlockOther = 0;
let totalEstimatedHashrateOther = 0;
let edgeDistance: any = '20%';
if (this.isMobile() && this.widget) {
edgeDistance = 0;
} else if (this.isMobile() && !this.widget || this.widget) {
edgeDistance = 35;
}
miningStats.pools.forEach((pool) => { miningStats.pools.forEach((pool) => {
if (parseFloat(pool.share) < poolShareThreshold) { if (parseFloat(pool.share) < poolShareThreshold) {
totalShareOther += parseFloat(pool.share);
totalBlockOther += pool.blockCount;
totalEstimatedHashrateOther += pool.lastEstimatedHashrate;
return; return;
} }
data.push({ data.push({
itemStyle: { itemStyle: {
color: poolsColor[pool.name.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()], color: poolsColor[pool.name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()],
}, },
value: pool.share, value: pool.share,
name: pool.name + (this.isMobile() ? `` : ` (${pool.share}%)`), name: pool.name + ((this.isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
label: { label: {
overflow: 'none',
color: '#b1b1b1', color: '#b1b1b1',
overflow: 'break', alignTo: 'edge',
edgeDistance: edgeDistance,
}, },
tooltip: { tooltip: {
show: !this.isMobile() || !this.widget,
backgroundColor: 'rgba(17, 19, 31, 1)', backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
@ -144,6 +161,42 @@ export class PoolRankingComponent implements OnInit {
data: pool.poolId, data: pool.poolId,
} as PieSeriesOption); } as PieSeriesOption);
}); });
// 'Other'
data.push({
itemStyle: {
color: 'grey',
},
value: totalShareOther,
name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
label: {
overflow: 'none',
color: '#b1b1b1',
alignTo: 'edge',
edgeDistance: edgeDistance
},
tooltip: {
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
},
borderColor: '#000',
formatter: () => {
if (this.poolsWindowPreference === '24h') {
return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
totalEstimatedHashrateOther.toString() + ' PH/s' +
`<br>` + totalBlockOther.toString() + ` blocks`;
} else {
return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
totalBlockOther.toString() + ` blocks`;
}
}
},
data: 9999 as any,
} as PieSeriesOption);
return data; return data;
} }
@ -154,9 +207,22 @@ export class PoolRankingComponent implements OnInit {
} }
network = network.charAt(0).toUpperCase() + network.slice(1); network = network.charAt(0).toUpperCase() + network.slice(1);
let radius: any[] = ['20%', '70%']; let radius: any[] = ['20%', '80%'];
if (this.isMobile() || this.widget) { let top: any = undefined; let bottom = undefined; let height = undefined;
radius = ['20%', '60%']; if (this.isMobile() && this.widget) {
top = -30;
height = 270;
radius = ['10%', '50%'];
} else if (this.isMobile() && !this.widget) {
top = 0;
height = 300;
radius = ['10%', '50%'];
} else if (this.widget) {
radius = ['15%', '60%'];
top = -20;
height = 330;
} else {
top = 35;
} }
this.chartOptions = { this.chartOptions = {
@ -180,14 +246,15 @@ export class PoolRankingComponent implements OnInit {
}, },
series: [ series: [
{ {
top: this.widget ? 0 : 35, minShowLabelAngle: 3.6,
top: top,
bottom: bottom,
height: height,
name: 'Mining pool', name: 'Mining pool',
type: 'pie', type: 'pie',
radius: radius, radius: radius,
data: this.generatePoolsChartSerieData(miningStats), data: this.generatePoolsChartSerieData(miningStats),
labelLine: { labelLine: {
length: this.isMobile() ? 10 : 15,
length2: this.isMobile() ? 0 : 15,
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
@ -223,6 +290,9 @@ export class PoolRankingComponent implements OnInit {
this.chartInstance = ec; this.chartInstance = ec;
this.chartInstance.on('click', (e) => { this.chartInstance.on('click', (e) => {
if (e.data.data === 9999) { // "Other"
return;
}
this.router.navigate(['/mining/pool/', e.data.data]); this.router.navigate(['/mining/pool/', e.data.data]);
}); });
} }
@ -230,7 +300,7 @@ export class PoolRankingComponent implements OnInit {
/** /**
* Default mining stats if something goes wrong * Default mining stats if something goes wrong
*/ */
getEmptyMiningStat() { getEmptyMiningStat(): MiningStats {
return { return {
lastEstimatedHashrate: 'Error', lastEstimatedHashrate: 'Error',
blockCount: 0, blockCount: 0,

9
frontend/src/app/interfaces/node-api.interface.ts
View File

@ -64,7 +64,7 @@ export interface SinglePoolStats {
blockCount: number; blockCount: number;
emptyBlocks: number; emptyBlocks: number;
rank: number; rank: number;
share: string; share: number;
lastEstimatedHashrate: string; lastEstimatedHashrate: string;
emptyBlockRatio: string; emptyBlockRatio: string;
logo: string; logo: string;
@ -75,13 +75,6 @@ export interface PoolsStats {
oldestIndexedBlockTimestamp: number; oldestIndexedBlockTimestamp: number;
pools: SinglePoolStats[]; pools: SinglePoolStats[];
} }
export interface MiningStats {
lastEstimatedHashrate: string;
blockCount: number;
totalEmptyBlock: number;
totalEmptyBlockRatio: string;
pools: SinglePoolStats[];
}
/** /**
* Pool component * Pool component

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

@ -73,7 +73,7 @@ export class MiningService {
const totalEmptyBlockRatio = (totalEmptyBlock / stats.blockCount * 100).toFixed(2); const totalEmptyBlockRatio = (totalEmptyBlock / stats.blockCount * 100).toFixed(2);
const poolsStats = stats.pools.map((poolStat) => { const poolsStats = stats.pools.map((poolStat) => {
return { return {
share: (poolStat.blockCount / stats.blockCount * 100).toFixed(2), share: parseFloat((poolStat.blockCount / stats.blockCount * 100).toFixed(2)),
lastEstimatedHashrate: (poolStat.blockCount / stats.blockCount * stats.lastEstimatedHashrate / hashrateDivider).toFixed(2), lastEstimatedHashrate: (poolStat.blockCount / stats.blockCount * stats.lastEstimatedHashrate / hashrateDivider).toFixed(2),
emptyBlockRatio: (poolStat.emptyBlocks / poolStat.blockCount * 100).toFixed(2), emptyBlockRatio: (poolStat.emptyBlocks / poolStat.blockCount * 100).toFixed(2),
logo: `./resources/mining-pools/` + poolStat.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg', logo: `./resources/mining-pools/` + poolStat.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg',