Fix block link in pool page - Click on chart slice open pool page

backend/src/api/mining.ts

@@ -2,7 +2,6 @@ import { PoolInfo, PoolStats } from '../mempool.interfaces';
 import BlocksRepository, { EmptyBlocks } from '../repositories/BlocksRepository';
 import PoolsRepository from '../repositories/PoolsRepository';
 import bitcoinClient from './bitcoin/bitcoin-client';
-import { Common } from './common';
 
 class Mining {
   constructor() {

backend/src/repositories/BlocksRepository.ts

@@ -172,7 +172,7 @@ class BlocksRepository {
     startHeight: number | null = null
   ): Promise<object[]> {
     const params: any[] = [];
-    let query = `SELECT height, hash, tx_count, size, weight, pool_id, UNIX_TIMESTAMP(blockTimestamp) as timestamp, 0 as reward
+    let query = `SELECT height, hash as id, tx_count, size, weight, pool_id, UNIX_TIMESTAMP(blockTimestamp) as timestamp, 0 as reward
       FROM blocks
       WHERE pool_id = ?`;
     params.push(poolId);

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

@@ -1,7 +1,7 @@
 <div class="container-xl">
   <!-- <app-difficulty [showProgress]=false [showHalving]=true></app-difficulty>  -->
 
-  <div class="hashrate-pie" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div class="hashrate-pie" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>

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

@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { EChartsOption } from 'echarts';
+import { Router } from '@angular/router';
+import { EChartsOption, PieSeriesOption } from 'echarts';
 import { combineLatest, Observable, of } from 'rxjs';
 import { catchError, map, share, skip, startWith, switchMap, tap } from 'rxjs/operators';
 import { SinglePoolStats } from 'src/app/interfaces/node-api.interface';
@@ -31,6 +32,7 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
   chartInitOptions = {
     renderer: 'svg'
   };
+  chartInstance: any = undefined;
 
   miningStatsObservable$: Observable<MiningStats>;
 
@@ -40,6 +42,7 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
     private formBuilder: FormBuilder,
     private miningService: MiningService,
     private seoService: SeoService,
+    private router: Router,
   ) {
     this.seoService.setTitle($localize`:@@mining.mining-pools:Mining Pools`);
     this.poolsWindowPreference = this.storageService.getValue('poolsWindowPreference') ? this.storageService.getValue('poolsWindowPreference') : '1w';
@@ -107,7 +110,7 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
       if (parseFloat(pool.share) < poolShareThreshold) {
         return;
       }
-      data.push({
+      data.push(<PieSeriesOption>{
         value: pool.share,
         name: pool.name + (this.isMobile() ? `` : ` (${pool.share}%)`),
         label: {
@@ -129,7 +132,8 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
                 pool.blockCount.toString() + ` blocks`;
             }
           }
-        }
+        },
+        data: pool.poolId,
       });
     });
     return data;
@@ -197,6 +201,17 @@ export class PoolRankingComponent implements OnInit, OnDestroy {
     };
   }
 
+  onChartInit(ec) {
+    if (this.chartInstance !== undefined) {
+      return;
+    }
+
+    this.chartInstance = ec;
+    this.chartInstance.on('click', (e) => {
+      this.router.navigate(['/mining/pool/', e.data.data]); 
+    })
+  }
+  
   /**
    * Default mining stats if something goes wrong
    */

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

@@ -47,11 +47,11 @@
 
     <div class="box">
       <div class="row">
-        <div class="col-md-8">
+        <div class="col-lg-9">
           <table class="table table-borderless table-striped" style="table-layout: fixed;">
             <tbody>
               <tr>
-                <td class="col-4 col-lg-3">Addresses</td>
+                <td class="col-3 col-lg-3">Addresses</td>
                 <td class="text-truncate" *ngIf="poolStats.pool.addresses.length else noaddress">
                   <div class="scrollable">
                     <a *ngFor="let address of poolStats.pool.addresses" [routerLink]="['/address' | relativeUrl, address]">{{ address }}<br></a>
@@ -60,22 +60,22 @@
                 <ng-template #noaddress><td>~</td></ng-template>
               </tr>
               <tr>
-                <td class="col-4 col-lg-3">Coinbase Tags</td>
+                <td class="col-3 col-lg-3">Coinbase Tags</td>
                 <td class="text-truncate">{{ poolStats.pool.regexes }}</td>
               </tr>
             </tbody>
           </table>
         </div>
-        <div class="col-md-4">
+        <div class="col-lg-3">
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td>Mined Blocks</td>
+                <td class="col-3 col-lg-8">Mined Blocks</td>
-                <td>{{ poolStats.blockCount }}</td>
+                <td class="text-left">{{ poolStats.blockCount }}</td>
               </tr>
               <tr>
-                <td>Empty Blocks</td>
+                <td class="col-3 col-lg-8">Empty Blocks</td>
-                <td>{{ poolStats.emptyBlocks.length }}</td>
+                <td class="text-left">{{ poolStats.emptyBlocks.length }}</td>
               </tr>
             </tbody>
           </table>

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

@@ -106,6 +106,10 @@ export interface BlockExtension {
   reward?: number;
   coinbaseTx?: Transaction;
   matchRate?: number;
+  pool?: {
+    id: number;
+    name: string;
+  }
 
   stage?: number; // Frontend only
 }