Fix mempool graph fee filtering

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

@@ -24,6 +24,7 @@ import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/grap
 export class MempoolGraphComponent implements OnInit, OnChanges {
   @Input() data: any[];
   @Input() filterSize = 100000;
+  @Input() limitFilterFee = 1;
   @Input() height: number | string = 200;
   @Input() top: number | string = 20;
   @Input() right: number | string = 10;
@@ -40,7 +41,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   };
   windowPreference: string;
   hoverIndexSerie = 0;
+  maxFee: number;
   feeLimitIndex: number;
+  maxFeeIndex: number;
   feeLevelsOrdered = [];
   chartColorsOrdered = chartColors;
   inverted: boolean;
@@ -98,8 +101,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   }
 
   generateArray(mempoolStats: OptimizedMempoolStats[]) {
-    let finalArray: number[][][] = [];
+    const finalArray: number[][][] = [];
     let feesArray: number[][] = [];
+
     let maxTier = 0;
     for (let index = 37; index > -1; index--) {
       feesArray = [];
@@ -111,7 +115,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       });
       finalArray.push(feesArray);
     }
-    this.feeLimitIndex = maxTier;
+    this.maxFeeIndex = maxTier;
+
     finalArray.reverse();
     return finalArray;
   }
@@ -124,7 +129,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 && index <= this.maxFeeIndex) {
         newColors.push(this.chartColorsOrdered[index]);
         seriesGraph.push({
           zlevel: 0,
@@ -383,21 +388,26 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
 
   orderLevels() {
     this.feeLevelsOrdered = [];
-    let maxIndex = Math.min(feeLevels.length, this.feeLimitIndex);
-    for (let i = 0; i < maxIndex; i++) {
+    const maxIndex = Math.min(feeLevels.length, this.maxFeeIndex);
+    for (let i = 0; i < feeLevels.length; i++) {
+      if (feeLevels[i] === this.limitFilterFee) {
+        this.feeLimitIndex = i;
+      }
+      if (feeLevels[i] <= feeLevels[this.maxFeeIndex]) {
         if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
-          if (i === maxIndex - 1) {
+          if (i === maxIndex || feeLevels[i] == null) {
             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) {
+          if (i === maxIndex || feeLevels[i] == null) {
             this.feeLevelsOrdered.push(`${feeLevels[i]}+`);
           } else {
             this.feeLevelsOrdered.push(`${feeLevels[i]} - ${feeLevels[i + 1]}`);
           }
         }
+      }
     }
     this.chartColorsOrdered =  chartColors.slice(0, this.feeLevelsOrdered.length);
   }