Merge pull request #1303 from nymkappa/feature/update-mining-dashboard

Mining dashboard polishing
2025-04-15 07:19:21 +02:00 · 2022-03-07 12:03:09 +01:00 · 2022-03-07 12:03:09 +01:00 · 641fa91a48
commit 641fa91a48
parent 16331d1be7 05342079b3
16 changed files with 398 additions and 73 deletions
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@ -1,4 +1,4 @@
-<div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+<div *ngIf="showTitle" class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
 <div class="card-wrapper">
  <div class="card">
    <div class="card-body more-padding">
@ -47,7 +47,7 @@
          </div>
        </div>
        <div class="item" *ngIf="showHalving">
-          <h5 class="card-title" i18n="difficulty-box.next-halving">Next halving</h5>
+          <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
          <div class="card-text">
            <ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
            <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@ -28,8 +28,9 @@ export class DifficultyComponent implements OnInit {
  isLoadingWebSocket$: Observable<boolean>;
  difficultyEpoch$: Observable<EpochProgress>;

-  @Input() showProgress: boolean = true;
-  @Input() showHalving: boolean = false;
+  @Input() showProgress = true;
+  @Input() showHalving = false;
+  @Input() showTitle = true;

  constructor(
    public stateService: StateService,
@ -97,7 +98,7 @@ export class DifficultyComponent implements OnInit {
            colorPreviousAdjustments = '#ffffff66';
          }

-          const blocksUntilHalving = block.height % 210000;
+          const blocksUntilHalving = 210000 - (block.height % 210000);
          const timeUntilHalving = (blocksUntilHalving * timeAvgMins * 60 * 1000) + (now * 1000);

          return {
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@ -1,6 +1,6 @@
 <div [class]="widget === false ? 'full-container' : ''">

-  <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
+  <div *ngIf="!tableOnly" class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
      <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
        <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">
@ -25,34 +25,31 @@
    </form>
  </div>

-  <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
+  <div *ngIf="(hashrateObservable$ | async) && !tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
    echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
  <div class="text-center loadingGraphs" *ngIf="isLoading">
    <div class="spinner-border text-light"></div>
  </div>
  
-  <!-- <div class="mt-3" *ngIf="!widget">
-    <table class="table table-borderless table-sm text-center">
+  <div [class]="!widget ? 'mt-3 p-2' : 'ml-4 mr-4 mt-1'" *ngIf="tableOnly">
+    <table class="table table-borderless table-sm text-left" [class]="widget ? 'compact' : ''">
      <thead>
        <tr>
-          <th i18n="mining.rank">Block</th>
          <th class="d-none d-md-block" i18n="block.timestamp">Timestamp</th>
          <th i18n="mining.adjusted">Adjusted</th>
-          <th i18n="mining.difficulty">Difficulty</th>
-          <th i18n="mining.change">Change</th>
+          <th i18n="mining.difficulty" class="text-right">Difficulty</th>
+          <th i18n="mining.change" class="text-right">Change</th>
        </tr>
      </thead>
      <tbody *ngIf="(hashrateObservable$ | async) as data">
        <tr *ngFor="let diffChange of data.difficulty">
-          <td><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a></td>
          <td class="d-none d-md-block">&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
          <td><app-time-since [time]="diffChange.timestamp" [fastRender]="true"></app-time-since></td>
-          <td class="d-none d-md-block">{{ formatNumber(diffChange.difficulty, locale, '1.2-2') }}</td>
-          <td class="d-block d-md-none">{{ diffChange.difficultyShorten }}</td>
-          <td [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
+          <td class="text-right">{{ diffChange.difficultyShorten }}</td>
+          <td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
        </tr>
      </tbody>
    </table>
-  </div> -->
+  </div>

 </div>
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@ -29,7 +29,7 @@
 .chart-widget {
  width: 100%;
  height: 100%;
-  max-height: 275px;
+  max-height: 293px;
 }

 .formRadioGroup {
@ -48,3 +48,8 @@
    }
  }
 }
+
+.compact td {
+  padding: 0 !important;
+  margin: 0.15rem !important;
+}
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@ -22,7 +22,8 @@ import { selectPowerOfTen } from 'src/app/bitcoin.utils';
  `],
 })
 export class HashrateChartComponent implements OnInit {
-  @Input() widget: boolean = false;
+  @Input() tableOnly = false;
+  @Input() widget = false;
  @Input() right: number | string = 45;
  @Input() left: number | string = 75;

@ -114,7 +115,7 @@ export class HashrateChartComponent implements OnInit {
                }
                return {
                  availableTimespanDay: availableTimespanDay,
-                  difficulty: tableData
+                  difficulty: this.tableOnly ? (this.isMobile() ? tableData.slice(0, 12) : tableData.slice(0, 9)) : tableData
                };
              }),
            );
@ -141,6 +142,7 @@ export class HashrateChartComponent implements OnInit {
        bottom: this.widget ? 30 : 60,
      },
      tooltip: {
+        show: !this.isMobile() || !this.widget,
        trigger: 'axis',
        axisPointer: {
          type: 'line'
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
@ -27,7 +27,7 @@

  <div *ngIf="hashrateObservable$ | async" [class]="!widget ? 'chart' : 'chart-widget'"
    echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
-  <div class="text-center loadingGraphs" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
    <div class="spinner-border text-light"></div>
  </div>

--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@ -29,7 +29,7 @@
 .chart-widget {
  width: 100%;
  height: 100%;
-  max-height: 275px;
+  max-height: 293px;
 }

 .formRadioGroup {
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/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 },
@ -132,6 +132,7 @@ export class HashrateChartPoolsComponent implements OnInit {
        top: this.widget ? 10 : 40,
      },
      tooltip: {
+        show: !this.isMobile() || !this.widget,
        trigger: 'axis',
        axisPointer: {
          type: 'line'
@ -149,7 +150,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;
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@ -3,35 +3,97 @@
  <div class="row row-cols-1 row-cols-md-2">

    <div class="col">
-      <div class="card double">
-        <div class="card-body">
-          <!-- pool distribution -->
-          <h5 class="card-title">
-            <a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="mining.pool-share">
-              Mining Pools Share (1w)
-            </a>
-          </h5>
-          <app-pool-ranking [widget]=true></app-pool-ranking>
+      <div class="main-title">Reward stats</div>
+      <div class="card" style="height: 123px">
+        <div class="card-body more-padding">
+          <div class="difficulty-adjustment-container" *ngIf="$rewardStats | async as rewardStats">
+            <div class="item">
+              <h5 class="card-title" i18n="">Miners Reward</h5>
+              <div class="card-text">
+                <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
+                <div class="symbol">in the last 8 blocks</div>
+              </div>
+            </div>
+            <div class="item">
+              <h5 class="card-title" i18n="">Reward Per Tx</h5>
+              <div class="card-text">
+                {{ rewardStats.rewardPerTx }}
+                <span class="symbol">sats/tx</span>
+                <div class="symbol">in the last 8 blocks</div>
+              </div>
+            </div>
+            <div class="item">
+              <h5 class="card-title" i18n="">Average Fee</h5>
+              <div class="card-text">
+                {{ rewardStats.feePerTx }}
+                <span class="symbol">sats/tx</span>
+                <div class="symbol">in the last 8 blocks</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>

-          <!-- pools hashrate -->
+    <!-- difficulty adjustment -->
+    <div class="col">
+      <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
+      <div class="card" style="height: 123px">
+        <app-difficulty [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty>
+      </div>
+    </div>
+
+    <!-- pool distribution -->
+    <div class="col">
+      <div class="card" style="height: 385px">
+        <div class="card-body">
+          <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>
+      </div>
+    </div>
+
+    <!-- hashrate -->
+    <div class="col">
+      <div class="card" style="height: 385px">
+        <div class="card-body">
+          <h5 class="card-title">
+            Hashrate (1y)
+          </h5>
+          <app-hashrate-chart [widget]=true></app-hashrate-chart>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
+              &raquo;</a></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- pool dominance -->
+    <div class="col">
+      <div class="card" style="height: 385px">
+        <div class="card-body">
+          <h5 class="card-title">
+            Mining Pools Dominance (1y)
+          </h5>
          <app-hashrate-chart-pools [widget]=true></app-hashrate-chart-pools>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate/pools' | relativeUrl]" i18n="dashboard.view-more">View
+              more &raquo;</a></div>
        </div>
      </div>
    </div>

    <div class="col">
-      <div class="card">
+      <div class="card" style="height: 385px">
        <div class="card-body">
-          <!-- hashrate -->
          <h5 class="card-title">
-            <a class="link" href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="mining.hashrate">
-              Hashrate (1y)
-            </a>
+            Adjusments
          </h5>
-          <app-hashrate-chart [widget]=true></app-hashrate-chart>
+          <app-hashrate-chart [tableOnly]=true [widget]=true></app-hashrate-chart>
+          <div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
+              &raquo;</a></div>
        </div>
      </div>
-    </div>  
+    </div>

  </div>
 </div>
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@ -12,14 +12,11 @@

 .card {
  background-color: #1d1f31;
-  height: 340px;
-}
-.card.double {
-  height: 620px;
 }

 .card-title {
  font-size: 1rem;
+  color: #4a68b9;
 }
 .card-title > a {
  color: #4a68b9;
@ -58,3 +55,91 @@
  text-align: center;
  padding-bottom: 3px;
 }
+
+.general-stats {
+  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;
+      }
+    }
+  }
+}
+
+.difficulty-adjustment-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 76px;
+  .shared-block {
+    color: #ffffff66;
+    font-size: 12px;
+  }
+  .item {
+    padding: 0 5px;
+    width: 100%;
+    &:nth-child(1) {
+      display: none;
+      @media (min-width: 485px) {
+        display: table-cell;
+      }
+      @media (min-width: 768px) {
+        display: none;
+      }
+      @media (min-width: 992px) {
+        display: table-cell;
+      }
+    }
+  }
+  .card-text {
+    font-size: 22px;
+    margin-top: -9px;
+    position: relative;
+  }
+}
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@ -1,5 +1,10 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
+import { map } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
+import { formatNumber } from '@angular/common';
+import { WebsocketService } from 'src/app/services/websocket.service';
+import { Observable } from 'rxjs';

@Component({
  selector: 'app-mining-dashboard',
@ -8,12 +13,36 @@ import { SeoService } from 'src/app/services/seo.service';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit {
+  private blocks = [];

-  constructor(private seoService: SeoService) {
+  public $rewardStats: Observable<any>;
+  public totalReward = 0;
+  public rewardPerTx = '~';
+  public feePerTx = '~';
+
+  constructor(private seoService: SeoService,
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+    @Inject(LOCALE_ID) private locale: string,
+  ) {
    this.seoService.setTitle($localize`:@@mining.mining-dashboard:Mining Dashboard`);
  }

  ngOnInit(): void {
-  }
+    this.$rewardStats = this.stateService.blocks$.pipe(
+      map(([block]) => {
+        this.blocks.push(block);
+        this.blocks = this.blocks.slice(0, 8);
+        const totalTx = this.blocks.reduce((acc, block) => acc + block.tx_count, 0);
+        const totalFee = this.blocks.reduce((acc, block) => acc + block.extras?.totalFees ?? 0, 0);
+        const totalReward = this.blocks.reduce((acc, block) => acc + block.extras?.reward ?? 0, 0);

+        return {
+          'totalReward': totalReward,
+          'rewardPerTx': formatNumber(totalReward / totalTx, this.locale, '1.0-0'),
+          'feePerTx': formatNumber(totalFee / totalTx, this.locale, '1.0-0'),
+        }
+      })
+    );
+  }
 }
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@ -1,8 +1,29 @@
 <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" [class]="widget ? 'widget' : ''" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
    <div class="spinner-border text-light"></div>
  </div>

@ -59,7 +80,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>
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@ -1,13 +1,16 @@
 .chart {
  max-height: 400px;
  @media (max-width: 767.98px) {
-    max-height: 300px;
+    max-height: 270px;
  }
 }
 .chart-widget {
  width: 100%;
  height: 100%;
-  max-height: 275px;
+  max-height: 270px;
+  @media (max-width: 767.98px) {
+    max-height: 200px;
+  }
 }

 .formRadioGroup {
@ -44,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;
+      }
+    }
+  }
+}
--- 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);
@ -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 => {
@ -105,24 +106,40 @@ 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 = 35;
+    }

    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}%)`),
+        name: pool.name + ((this.isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
        label: {
+          overflow: 'none',
          color: '#b1b1b1',
-          overflow: 'break',
+          alignTo: 'edge',
+          edgeDistance: edgeDistance,
        },
        tooltip: {
+          show: !this.isMobile() || !this.widget,
          backgroundColor: 'rgba(17, 19, 31, 1)',
          borderRadius: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
@ -144,6 +161,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 +207,22 @@ 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) {
+      top = -30;
+      height = 270;
+      radius = ['10%', '50%'];
+    } else if (this.isMobile() && !this.widget) {
+      top = 0;
+      height = 300;
+      radius = ['10%', '50%'];
+    } else if (this.widget) {
+      radius = ['15%', '60%'];
+      top = -20;
+      height = 330;
+    } else {
+      top = 35;
    }

    this.chartOptions = {
@ -180,14 +246,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 +290,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]);
    });
  }
@ -230,7 +300,7 @@ export class PoolRankingComponent implements OnInit {
  /**
   * Default mining stats if something goes wrong
   */
-  getEmptyMiningStat() {
+  getEmptyMiningStat(): MiningStats {
    return {
      lastEstimatedHashrate: 'Error',
      blockCount: 0,
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/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
--- a/frontend/src/app/services/mining.service.ts
+++ b/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',