Show more stats in pool ranking pie widget

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -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;

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -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>

frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss

@@ -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;
-      }
-    }
-  }
-}

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

@@ -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">

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

@@ -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;
+      }
+    }
+  }
+}

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

@@ -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,

frontend/src/app/interfaces/node-api.interface.ts

@@ -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

frontend/src/app/services/mining.service.ts

@@ -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',