Dynamic fee ranges & legend in mempool graph

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,13 +374,17 @@ 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') {
+          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 {
+          if (i === maxIndex - 1) {
+            this.feeLevelsOrdered.push(`${feeLevels[i]}+`);
           } else {
             this.feeLevelsOrdered.push(`${feeLevels[i]} - ${feeLevels[i + 1]}`);
           }

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>