Merge pull request #5222 from mempool/mononaut/partition-pool-pie

Show more detail in acceleration pools pie chart

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss

@@ -55,3 +55,10 @@
     padding-left: 0;
   }
 }
+
+::ng-deep .chart {
+  overflow: visible;
+  & > div, & > div > svg {
+    overflow: visible !important;
+  }
+}

frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.ts

@@ -4,6 +4,17 @@ import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.inte
 import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
 import { MiningStats } from '../../../services/mining.service';
 
+function lighten(color, p): { r, g, b } {
+  return {
+    r: color.r + ((255 - color.r) * p),
+    g: color.g + ((255 - color.g) * p),
+    b: color.b + ((255 - color.b) * p),
+  };
+}
+
+function toRGB({r,g,b}): string {
+  return `rgb(${r},${g},${b})`;
+}
 
 @Component({
   selector: 'app-active-acceleration-box',
@@ -43,57 +54,33 @@ export class ActiveAccelerationBox implements OnChanges {
       pools[pool.poolUniqueId] = pool;
     }
 
-    const getDataItem = (value, color, tooltip) => ({
+    const getDataItem = (value, color, tooltip, emphasis) => ({
       value,
+      name: tooltip,
       itemStyle: {
         color,
-        borderColor: 'rgba(0,0,0,0)',
-        borderWidth: 1,
       },
-      avoidLabelOverlap: false,
-      label: {
-        show: false,
-      },
-      labelLine: {
-        show: false
-      },
-      emphasis: {
-        disabled: true,
-      },
-      tooltip: {
-        show: true,
-        backgroundColor: 'rgba(17, 19, 31, 1)',
-        borderRadius: 4,
-        shadowColor: 'rgba(0, 0, 0, 0.5)',
-        textStyle: {
-          color: 'var(--tooltip-grey)',
-        },
-        borderColor: '#000',
-        formatter: () => {
-          return tooltip;
-        }
-      }
     });
 
-    let totalAcceleratedHashrate = 0;
+    const acceleratingPools = (poolList || []).filter(id => pools[id]).sort((a,b) => pools[a].lastEstimatedHashrate - pools[b].lastEstimatedHashrate);
-    for (const poolId of poolList || []) {
+    const totalAcceleratedHashrate = acceleratingPools.reduce((total, pool) => total + pools[pool].lastEstimatedHashrate, 0);
+    acceleratingPools.forEach((poolId, index) => {
       const pool = pools[poolId];
-      if (!pool) {
+      const poolShare = ((pool.lastEstimatedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1);
-        continue;
-      }
-      totalAcceleratedHashrate += pool.lastEstimatedHashrate;
-    }
-    this.acceleratedByPercentage = ((totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1) + '%';
       data.push(getDataItem(
-      totalAcceleratedHashrate,
+        pool.lastEstimatedHashrate,
-      'var(--mainnet-alt)',
+        toRGB(lighten({ r: 147, g: 57, b: 244 }, index * .08)),
-      `${this.acceleratedByPercentage} accelerating`,
+        `<b style="color: white">${pool.name} (${poolShare}%)</b>`,
+        true,
       ) as PieSeriesOption);
+    })
+    this.acceleratedByPercentage = ((totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate) * 100).toFixed(1) + '%';
     const notAcceleratedByPercentage = ((1 - (totalAcceleratedHashrate / this.miningStats.lastEstimatedHashrate)) * 100).toFixed(1) + '%';
     data.push(getDataItem(
       (this.miningStats.lastEstimatedHashrate - totalAcceleratedHashrate),
       'rgba(127, 127, 127, 0.3)',
-      `${notAcceleratedByPercentage} not accelerating`,
+      `not accelerating (${notAcceleratedByPercentage})`,
+      false,
     ) as PieSeriesOption);
 
     return data;
@@ -111,11 +98,28 @@ export class ActiveAccelerationBox implements OnChanges {
       tooltip: {
         show: true,
         trigger: 'item',
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: 'var(--tooltip-grey)',
+        },
+        borderColor: '#000',
+        formatter: (item) => {
+          return item.name;
+        }
       },
       series: [
         {
           type: 'pie',
           radius: '100%',
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          animationDuration: 0,
           data: this.getChartData(pools),
         }
       ]