Merge pull request #3732 from mempool/mononaut/more-fee-bands

Increase displayed fee bands

frontend/src/app/app.constants.ts

@@ -29,6 +29,14 @@ export const mempoolFeeColors = [
   'ba3243',
   'b92b48',
   'b9254b',
+  'b8214d',
+  'b71d4f',
+  'b61951',
+  'b41453',
+  'b30e55',
+  'b10857',
+  'b00259',
+  'ae005b',
 ];
 
 export const chartColors = [
@@ -69,6 +77,7 @@ export const chartColors = [
   "#3E2723",
   "#212121",
   "#263238",
+  "#801313",
 ];
 
 export const poolsColor = {

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -23,8 +23,7 @@ import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/grap
 })
 export class MempoolGraphComponent implements OnInit, OnChanges {
   @Input() data: any[];
-  @Input() limitFee = 350;
-  @Input() limitFilterFee = 1;
+  @Input() filterSize = 100000;
   @Input() height: number | string = 200;
   @Input() top: number | string = 20;
   @Input() right: number | string = 10;
@@ -99,16 +98,20 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   }
 
   generateArray(mempoolStats: OptimizedMempoolStats[]) {
-    const finalArray: number[][][] = [];
+    let finalArray: number[][][] = [];
     let feesArray: number[][] = [];
-    const limitFeesTemplate = this.template === 'advanced' ? 26 : 20;
-    for (let index = limitFeesTemplate; index > -1; index--) {
+    let maxTier = 0;
+    for (let index = 37; index > -1; index--) {
       feesArray = [];
       mempoolStats.forEach((stats) => {
+        if (stats.vsizes[index] >= this.filterSize) {
+          maxTier = Math.max(maxTier, index);
+        }
         feesArray.push([stats.added * 1000, stats.vsizes[index] ? stats.vsizes[index] : 0]);
       });
       finalArray.push(feesArray);
     }
+    this.feeLimitIndex = maxTier;
     finalArray.reverse();
     return finalArray;
   }
@@ -121,7 +124,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     const newColors = [];
     for (let index = 0; index < series.length; index++) {
       const value = series[index];
-      if (index >= this.feeLimitIndex) {
+      if (index < this.feeLimitIndex) {
         newColors.push(this.chartColorsOrdered[index]);
         seriesGraph.push({
           zlevel: 0,
@@ -371,17 +374,21 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
 
   orderLevels() {
     this.feeLevelsOrdered = [];
-    for (let i = 0; i < feeLevels.length; i++) {
-      if (feeLevels[i] === this.limitFilterFee) {
-        this.feeLimitIndex = i;
-      }
-      if (feeLevels[i] <= this.limitFee) {
+    let maxIndex = Math.min(feeLevels.length, this.feeLimitIndex);
+    for (let i = 0; i < maxIndex; i++) {
         if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
-          this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)} - ${(feeLevels[i + 1]  / 10).toFixed(1)}`);
+          if (i === maxIndex - 1) {
+            this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)}+`);
+          } else {
+            this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)} - ${(feeLevels[i + 1]  / 10).toFixed(1)}`);
+          }
         } else {
-          this.feeLevelsOrdered.push(`${feeLevels[i]} - ${feeLevels[i + 1]}`);
+          if (i === maxIndex - 1) {
+            this.feeLevelsOrdered.push(`${feeLevels[i]}+`);
+          } else {
+            this.feeLevelsOrdered.push(`${feeLevels[i]} - ${feeLevels[i + 1]}`);
+          }
         }
-      }
     }
     this.chartColorsOrdered =  chartColors.slice(0, this.feeLevelsOrdered.length);
   }

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

@@ -84,8 +84,7 @@
         </div>
         <div class="card-body">
           <div class="incoming-transactions-graph">
-            <app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'" [limitFee]="500"
-              [limitFilterFee]="filterFeeIndex" [height]="500" [left]="65" [right]="10"
+            <app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'" [height]="500" [left]="65" [right]="10"
               [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"></app-mempool-graph>
           </div>
         </div>

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

@@ -3,7 +3,6 @@
     <div class="chart-holder">
       <app-mempool-graph
         [template]="'advanced'"
-        [limitFee]="500"
         [height]="600"
         [left]="60"
         [right]="10"

frontend/src/app/dashboard/dashboard.component.html

@@ -26,8 +26,7 @@
               <div class="mempool-graph">
                 <app-mempool-graph
                 [template]="'widget'"
-                [limitFee]="150"
-                [limitFilterFee]="1"
+                [filterSize]="1000000"
                 [data]="mempoolStats.value?.mempool"
                 [windowPreferenceOverride]="'2h'"
                 ></app-mempool-graph>