mirror of
https://github.com/mempool/mempool.git
synced 2024-12-27 16:54:28 +01:00
Show more stats in pool ranking pie widget
This commit is contained in:
nymkappa
parent
f9e361a9c0
commit
d45f3c32cf
@ -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;
|
||||
|
||||
@ -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 »</a></div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user