Show more stats in pool ranking pie widget

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,