Move small pie share into "other" - align labels

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -59,7 +59,7 @@
         <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=""><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="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
       </tr>

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 {

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -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 `<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;
   }
 
@@ -154,9 +205,18 @@ export class PoolRankingComponent implements OnInit {
     }
     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) {
+      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]);
     });
   }