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

Show more stats in pool ranking pie widget

Browse Source
This commit is contained in:
nymkappa 2022-03-05 18:47:21 +01:00
parent f9e361a9c0
commit d45f3c32cf
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
8 changed files with 83 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
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,
showSymbol: false,
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',
lineStyle: { width: 0 },
areaStyle: { opacity: 1 },
@ -149,7 +149,7 @@ export class HashrateChartPoolsComponent implements OnInit {
data.sort((a, b) => b.data[1] - a.data[1]);
for (const pool of data) {
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;

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

@ -20,27 +20,6 @@
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<div class="pool-distribution">
<div class="item">
<h5 class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Blocks (1w)</h5>
<p class="card-text">
1082
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Miners luck (1w)</h5>
<p class="card-text">
107.25%
</p>
</div>
<div class="item">
<h5 class="card-title" i18n="dashboard.minimum-fee|Minimum mempool fee">Miners Gini (1w)</h5>
<p class="card-text">
0.123
</p>
</div>
</div>
<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>

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

@ -55,55 +55,3 @@
text-align: center;
padding-bottom: 3px;
}
.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-text {
font-size: 18px;
span {
color: #ffffff66;
font-size: 12px;
}
}
}
}

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

@ -1,5 +1,26 @@
<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'"
echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">

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

@ -47,3 +47,59 @@
.loadingGraphs.widget {
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;
}
}
}
}

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

@ -85,6 +85,7 @@ export class PoolRankingComponent implements OnInit {
}),
map(data => {
data.pools = data.pools.map((pool: SinglePoolStats) => this.formatPoolUI(pool));
data['minersLuck'] = (100 * (data.blockCount / 1008)).toFixed(2); // luck 1w
return data;
}),
tap(data => {
@ -298,7 +299,7 @@ export class PoolRankingComponent implements OnInit {
/**
* Default mining stats if something goes wrong
*/
getEmptyMiningStat() {
getEmptyMiningStat(): MiningStats {
return {
lastEstimatedHashrate: 'Error',
blockCount: 0,

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

@ -64,7 +64,7 @@ export interface SinglePoolStats {
blockCount: number;
emptyBlocks: number;
rank: number;
share: string;
share: number;
lastEstimatedHashrate: string;
emptyBlockRatio: string;
logo: string;
@ -75,13 +75,6 @@ export interface PoolsStats {
oldestIndexedBlockTimestamp: number;
pools: SinglePoolStats[];
}
export interface MiningStats {
lastEstimatedHashrate: string;
blockCount: number;
totalEmptyBlock: number;
totalEmptyBlockRatio: string;
pools: SinglePoolStats[];
}
/**
* 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 poolsStats = stats.pools.map((poolStat) => {
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),
emptyBlockRatio: (poolStat.emptyBlocks / poolStat.blockCount * 100).toFixed(2),
logo: `./resources/mining-pools/` + poolStat.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg',