Add average fee delta to pool ranking

Co-authored-by: mononaut <83316221+mononaut@users.noreply.github.com>

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

@@ -94,7 +94,8 @@
           <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-table-cell" i18n="mining.empty-blocks">Empty blocks</th>
+          <th *ngIf="auditAvailable" class="d-none d-sm-table-cell" i18n="mining.fees-per-block">Avg Block Fees</th>
+          <th class="d-none d-lg-table-cell" i18n="mining.empty-blocks">Empty blocks</th>
         </tr>
       </thead>
       <tbody [attr.data-cy]="'pools-table'" *ngIf="(miningStatsObservable$ | async) as miningStats">
@@ -121,7 +122,15 @@
               <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
             </ng-template>
           </td>
-          <td class="d-none d-md-table-cell">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
+          <td *ngIf="auditAvailable" class="d-none d-sm-table-cell">
+            <span *ngIf="pool.avgFeeDelta != null; else nullFeeDelta" class="difference" [class.positive]="pool.avgFeeDelta >= 0" [class.negative]="pool.avgFeeDelta < 0">
+              {{ pool.avgFeeDelta > 0 ? '+' : '' }}{{ (pool.avgFeeDelta * 100) | amountShortener: 2 }}%
+            </span>
+            <ng-template #nullFeeDelta>
+              -
+            </ng-template>
+          </td>        
+          <td class="d-none d-lg-table-cell">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
         </tr>
         <tr style="border-top: 1px solid #555">
           <td class="d-none d-md-table-cell"></td>

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

@@ -110,4 +110,15 @@
 .disabled {
   pointer-events: none;
   opacity: 0.5;
-}
+}
+
+td {
+  .difference {
+    &.positive {
+      color: rgb(66, 183, 71);
+    }
+    &.negative {
+      color: rgb(183, 66, 66);
+    }
+  }
+}

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

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