diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html index 5e6068866..43b71d4c9 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html @@ -59,7 +59,7 @@ {{ pool.rank }} {{ pool.name }} - {{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }} + {{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }} {{ pool['blockText'] }} {{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%) diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss index 470eaa112..4ba007598 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss @@ -1,7 +1,7 @@ .chart { max-height: 400px; @media (max-width: 767.98px) { - max-height: 300px; + max-height: 270px; } } .chart-widget { diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index cef04cca5..cd2970660 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -49,7 +49,7 @@ export class PoolRankingComponent implements OnInit { this.poolsWindowPreference = '1w'; } else { this.seoService.setTitle($localize`:@@mining.mining-pools:Mining Pools`); - this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w'; + this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w'; } this.radioGroupForm = this.formBuilder.group({ dateSpan: this.poolsWindowPreference }); this.radioGroupForm.controls.dateSpan.setValue(this.poolsWindowPreference); @@ -105,22 +105,37 @@ export class PoolRankingComponent implements OnInit { } 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[] = []; + 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 = 20; + } miningStats.pools.forEach((pool) => { if (parseFloat(pool.share) < poolShareThreshold) { + totalShareOther += parseFloat(pool.share); + totalBlockOther += pool.blockCount; + totalEstimatedHashrateOther += pool.lastEstimatedHashrate; return; } data.push({ 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, name: pool.name + (this.isMobile() ? `` : ` (${pool.share}%)`), label: { + overflow: 'none', color: '#b1b1b1', - overflow: 'break', + alignTo: 'edge', + edgeDistance: edgeDistance, }, tooltip: { backgroundColor: 'rgba(17, 19, 31, 1)', @@ -144,6 +159,42 @@ export class PoolRankingComponent implements OnInit { data: pool.poolId, } 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 `${'Other'} (${totalShareOther.toFixed(2)}%)
` + + totalEstimatedHashrateOther.toString() + ' PH/s' + + `
` + totalBlockOther.toString() + ` blocks`; + } else { + return `${'Other'} (${totalShareOther.toFixed(2)}%)
` + + totalBlockOther.toString() + ` blocks`; + } + } + }, + data: 9999 as any, + } as PieSeriesOption); + return data; } @@ -154,9 +205,18 @@ export class PoolRankingComponent implements OnInit { } network = network.charAt(0).toUpperCase() + network.slice(1); - let radius: any[] = ['20%', '70%']; - if (this.isMobile() || this.widget) { - radius = ['20%', '60%']; + let radius: any[] = ['20%', '80%']; + let top: any = undefined; let bottom = undefined; let height = undefined; + if (this.isMobile() && this.widget) { + radius = ['10%', '50%']; + } else if (this.isMobile() && !this.widget) { + top = 0; + height = 300; + radius = ['10%', '50%']; + } else if (this.widget) { + radius = ['15%', '60%']; + } else { + top = 35; } this.chartOptions = { @@ -180,14 +240,15 @@ export class PoolRankingComponent implements OnInit { }, series: [ { - top: this.widget ? 0 : 35, + minShowLabelAngle: 3.6, + top: top, + bottom: bottom, + height: height, name: 'Mining pool', type: 'pie', radius: radius, data: this.generatePoolsChartSerieData(miningStats), labelLine: { - length: this.isMobile() ? 10 : 15, - length2: this.isMobile() ? 0 : 15, lineStyle: { width: 2, }, @@ -223,6 +284,9 @@ export class PoolRankingComponent implements OnInit { this.chartInstance = ec; this.chartInstance.on('click', (e) => { + if (e.data.data === 9999) { // "Other" + return; + } this.router.navigate(['/mining/pool/', e.data.data]); }); }