Show avg block heath in pool ranking pie chart

backend/src/api/mining/mining.ts

@@ -100,7 +100,7 @@ class Mining {
         rank: rank++,
         emptyBlocks: emptyBlocksCount.length > 0 ? emptyBlocksCount[0]['count'] : 0,
         slug: poolInfo.slug,
-        avgMatchRate: Math.round(100 * poolInfo.avgMatchRate) / 100,
+        avgMatchRate: poolInfo.avgMatchRate !== null ? Math.round(100 * poolInfo.avgMatchRate) / 100 : null,
       };
       poolsStats.push(poolStat);
     });

backend/src/mempool.interfaces.ts

@@ -16,7 +16,7 @@ export interface PoolInfo {
   link: string;
   blockCount: number;
   slug: string;
-  avgMatchRate: number;
+  avgMatchRate: number | null;
 }
 
 export interface PoolStats extends PoolInfo {

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

@@ -92,6 +92,8 @@
           <th class="" i18n="mining.pool-name">Pool</th>
           <th class="" *ngIf="this.miningWindowPreference === '24h'" i18n="mining.hashrate">Hashrate</th>
           <th class="" i18n="master-page.blocks">Blocks</th>
+          <th *ngIf="auditAvailable" class="health text-right widget" i18n="latest-blocks.avg_health"
+            i18n-ngbTooltip="latest-blocks.avg_health" ngbTooltip="Avg Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Avg Health</th>
           <th class="d-none d-md-block" i18n="mining.empty-blocks">Empty blocks</th>
         </tr>
       </thead>
@@ -105,6 +107,18 @@
           <td class="" *ngIf="this.miningWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{
             miningStats.miningUnits.hashrateUnit }}</td>
           <td class="">{{ pool['blockText'] }}</td>
+          <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
+            <a
+              class="health-badge badge"
+              [class.badge-success]="pool.avgMatchRate >= 99"
+              [class.badge-warning]="pool.avgMatchRate >= 75 && pool.avgMatchRate < 99"
+              [class.badge-danger]="pool.avgMatchRate < 75"
+              *ngIf="pool.avgMatchRate != null; else nullHealth"
+            >{{ pool.avgMatchRate }}%</a>
+            <ng-template #nullHealth>
+              <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
+            </ng-template>
+          </td>
           <td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
         </tr>
         <tr style="border-top: 1px solid #555">

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

@@ -26,6 +26,8 @@ export class PoolRankingComponent implements OnInit {
   miningWindowPreference: string;
   radioGroupForm: UntypedFormGroup;
 
+  auditAvailable = false;
+  indexingAvailable = false;
   isLoading = true;
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -60,6 +62,10 @@ export class PoolRankingComponent implements OnInit {
     this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
     this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
 
+    this.indexingAvailable = (this.stateService.env.BASE_MODULE === 'mempool' &&
+      this.stateService.env.MINING_DASHBOARD === true);
+    this.auditAvailable = this.indexingAvailable && this.stateService.env.AUDIT;
+
     this.route
       .fragment
       .subscribe((fragment) => {

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

@@ -73,6 +73,7 @@ export interface SinglePoolStats {
   emptyBlockRatio: string;
   logo: string;
   slug: string;
+  avgMatchRate: number;
 }
 export interface PoolsStats {
   blockCount: number;