Basic block indexing WIP - Default mining pool icon - Only show mining hashrate on 1d scale

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

@@ -50,7 +50,7 @@
       <th class="d-none d-md-block" i18n="latest-blocks.height">Rank</th>
       <th><!-- LOGO --></th>
       <th i18n="latest-blocks.timestamp">Name</th>
-      <th i18n="latest-blocks.timestamp">Hashrate</th>
+      <th *ngIf="this.poolsWindowPreference === '1d'" i18n="latest-blocks.timestamp">Hashrate</th>
       <th i18n="latest-blocks.mined">Block Count (%)</th>
       <th class="d-none d-md-block" i18n="latest-blocks.transactions">Empty Blocks (%)</th>
     </thead>
@@ -59,15 +59,15 @@
         <td class="d-none d-md-block">-</td>
         <td><!-- LOGO --></td>
         <td>All miners</td>
-        <td>{{ miningStats.lastEstimatedHashrate}} PH/s</td>
+        <td *ngIf="this.poolsWindowPreference === '1d'">{{ miningStats.lastEstimatedHashrate}} {{ miningStats.miningUnits.hashrateUnit }}</td>
         <td>{{ miningStats.blockCount }}</td>
         <td class="d-none d-md-block">{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio }}%)</td>
       </tr>
       <tr *ngFor="let pool of miningStats.pools">
         <td class="d-none d-md-block">{{ pool.rank }}</td>
-        <td><img width="25" height="25" src="{{ pool.logo }}"></td>
+        <td><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td>
         <td><a target="#" href="{{ pool.link }}">{{ pool.name }}</a></td>
-        <td>{{ pool.lastEstimatedHashrate }} PH/s</td>
+        <td *ngIf="this.poolsWindowPreference === '1d'">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
         <td>{{ pool.blockCount }} ({{ pool.share }}%)</td>
         <td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
       </tr>

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

@@ -2,10 +2,9 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { EChartsOption } from 'echarts';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { MiningStats } from 'src/app/interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
 import { StorageService } from 'src/app/services/storage.service';
-import { MiningService } from '../../services/mining.service';
+import { MiningService, MiningStats } from '../../services/mining.service';
 
 @Component({
   selector: 'app-pool-ranking',
@@ -70,7 +69,7 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
 
   watchBlocks() {
     this.blocksSubscription = this.stateService.blocks$
-      .subscribe(([block]) => {
+      .subscribe(() => {
         if (!this.miningStats) {
           return;
         }
@@ -98,9 +97,14 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
         label: { color: '#FFFFFF' },
         tooltip: {
           formatter: () => {
-            return `<u><b>${pool.name}</b></u><br>` +
-              pool.lastEstimatedHashrate.toString() + ' PH/s (' + pool.share + `%)
-              <br>(` + pool.blockCount.toString() + ` blocks)`;
+            if (this.poolsWindowPreference === '1d') {
+              return `<u><b>${pool.name}</b></u><br>` +
+                pool.lastEstimatedHashrate.toString() + ' PH/s (' + pool.share + `%)
+                <br>(` + pool.blockCount.toString() + ` blocks)`;
+            } else {
+              return `<u><b>${pool.name}</b></u><br>` +
+                pool.blockCount.toString() + ` blocks`;
+            }
           }
         }
       });
@@ -111,8 +115,8 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
   prepareChartOptions() {
     this.chartOptions = {
       title: {
-        text: 'Hashrate distribution',
-        subtext: 'Estimated from the # of blocks mined',
+        text: (this.poolsWindowPreference === '1d') ? 'Hashrate distribution' : 'Block distribution',
+        subtext: (this.poolsWindowPreference === '1d') ? 'Estimated from the # of blocks mined' : null,
         left: 'center',
         textStyle: {
           color: '#FFFFFF',

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

@@ -71,6 +71,8 @@ export interface PoolsStats {
   pools: SinglePoolStats[],
 }
 
+export interface ITranslators { [language: string]: string; }
+
 export interface MiningStats {
   lastEstimatedHashrate: string,
   blockCount: number,

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

@@ -1,8 +1,23 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { MiningStats, PoolsStats } from '../interfaces/node-api.interface';
+import { PoolsStats, SinglePoolStats } from '../interfaces/node-api.interface';
 import { ApiService } from '../services/api.service';
+import { StateService } from './state.service';
+
+export interface MiningUnits {
+  hashrateDivider: number,
+  hashrateUnit: string,
+}
+
+export interface MiningStats {
+  lastEstimatedHashrate: string,
+  blockCount: number,
+  totalEmptyBlock: number,
+  totalEmptyBlockRatio: string,
+  pools: SinglePoolStats[],
+  miningUnits: MiningUnits,
+}
 
 @Injectable({
   providedIn: 'root'
@@ -10,6 +25,7 @@ import { ApiService } from '../services/api.service';
 export class MiningService {
 
   constructor(
+    private stateService: StateService,
     private apiService: ApiService,
   ) { }
 
@@ -19,7 +35,37 @@ export class MiningService {
     );
   }
 
+  /**
+   * Set the hashrate power of ten we want to display
+   */
+  public getMiningUnits() : MiningUnits {
+    const powerTable = {
+      0: "H/s",
+      3: "kH/s",
+      6: "MH/s",
+      9: "GH/s",
+      12: "TH/s",
+      15: "PH/s",
+      18: "EH/s",
+    };
+
+    // I think it's fine to hardcode this since we don't have x1000 hashrate jump everyday
+    // If we want to support the mining dashboard for testnet, we can hardcode it too
+    let selectedPower = 15;
+    if (this.stateService.network === 'testnet') {
+      selectedPower = 12;
+    }
+
+    return {
+      hashrateDivider: Math.pow(10, selectedPower),
+      hashrateUnit: powerTable[selectedPower],
+    };
+  }
+
   private generateMiningStats(stats: PoolsStats) : MiningStats {
+    const miningUnits = this.getMiningUnits();
+    const hashrateDivider = miningUnits.hashrateDivider;
+
     const totalEmptyBlock = Object.values(stats.pools).reduce((prev, cur) => {
       return prev + cur.emptyBlocks;
     }, 0);
@@ -27,7 +73,7 @@ export class MiningService {
     const poolsStats = stats.pools.map((poolStat) => {
       return {
         share: (poolStat.blockCount / stats.blockCount * 100).toFixed(2),
-        lastEstimatedHashrate: (poolStat.blockCount / stats.blockCount * stats.lastEstimatedHashrate / Math.pow(10, 15)).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',
         ...poolStat
@@ -35,11 +81,12 @@ export class MiningService {
     });
 
     return {
-      lastEstimatedHashrate: (stats.lastEstimatedHashrate / Math.pow(10, 15)).toFixed(2),
+      lastEstimatedHashrate: (stats.lastEstimatedHashrate / hashrateDivider).toFixed(2),
       blockCount: stats.blockCount,
       totalEmptyBlock: totalEmptyBlock,
       totalEmptyBlockRatio: totalEmptyBlockRatio,
       pools: poolsStats,
+      miningUnits: miningUnits,
     };
   }
 }