Merge pull request #3780 from mempool/mononaut/fix-graph-filter

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,22 +388,27 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
 
   orderLevels() {
     this.feeLevelsOrdered = [];
-    let maxIndex = Math.min(feeLevels.length, this.feeLimitIndex);
+    const maxIndex = Math.min(feeLevels.length, this.maxFeeIndex);
-    for (let i = 0; i < maxIndex; i++) {
+    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);
   }
 

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

@@ -62,7 +62,7 @@
                 <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
                   <ul>
                     <ng-template ngFor let-feeData let-i="index" [ngForOf]="feeLevelDropdownData">
-                      <ng-template [ngIf]="feeData.fee <= 400">
+                      <ng-template [ngIf]="feeData.fee <= (feeLevels[maxFeeIndex])">
                         <li (click)="filterFeeIndex = feeData.fee"
                           [class]="filterFeeIndex > feeData.fee ? 'inactive' : ''">
                           <span class="square" [ngStyle]="{'backgroundColor': feeData.color}"></span>
@@ -84,7 +84,8 @@
         </div>
         <div class="card-body">
           <div class="incoming-transactions-graph">
-            <app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'" [height]="500" [left]="65" [right]="10"
+            <app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'"
+              [limitFilterFee]="filterFeeIndex" [height]="500" [left]="65" [right]="10"
               [data]="mempoolStats && mempoolStats.length ? mempoolStats : null"></app-mempool-graph>
           </div>
         </div>

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

@@ -30,7 +30,9 @@ export class StatisticsComponent implements OnInit {
   spinnerLoading = false;
   feeLevels = feeLevels;
   chartColors = chartColors;
+  filterSize = 100000;
   filterFeeIndex = 1;
+  maxFeeIndex: number;
   dropDownOpen = false;
 
   mempoolStats: OptimizedMempoolStats[] = [];
@@ -134,6 +136,16 @@ export class StatisticsComponent implements OnInit {
     mempoolStats.reverse();
     const labels = mempoolStats.map(stats => stats.added);
 
+    let maxTier = 0;
+    for (let index = 37; index > -1; index--) {
+      mempoolStats.forEach((stats) => {
+        if (stats.vsizes[index] >= this.filterSize) {
+          maxTier = Math.max(maxTier, index);
+        }
+      });
+    }
+    this.maxFeeIndex = maxTier;
+
     this.capExtremeVbytesValues();
 
     this.mempoolTransactionsWeightPerSecondData = {
@@ -152,27 +164,42 @@ export class StatisticsComponent implements OnInit {
   }
 
   setFeeLevelDropdownData() {
-    let _feeLevels = feeLevels
+    let _feeLevels = feeLevels;
     let _chartColors = chartColors;
     if (!this.inverted) {
       _feeLevels = [...feeLevels].reverse();
       _chartColors = [...chartColors].reverse();
     }
     _feeLevels.forEach((fee, i) => {
+      let range;
+      const nextIndex = this.inverted ? i + 1 : i - 1;
+      if (this.stateService.isLiquid()) {
+        if (_feeLevels[nextIndex] == null) {
+          range = `${(_feeLevels[i] / 10).toFixed(1)}+`;
+        } else {
+          range = `${(_feeLevels[i] / 10).toFixed(1)} - ${(_feeLevels[nextIndex] / 10).toFixed(1)}`;
+        }
+      } else {
+        if (_feeLevels[nextIndex] == null) {
+          range = `${_feeLevels[i]}+`;
+        } else {
+          range = `${_feeLevels[i]} - ${_feeLevels[nextIndex]}`;
+        }
+      }
       if (this.inverted) {
         this.feeLevelDropdownData.push({
           fee: fee,
-          range: this.stateService.isLiquid() ? `${(_feeLevels[i] / 10).toFixed(1)} - ${(_feeLevels[i + 1] / 10).toFixed(1)}` : `${_feeLevels[i]} - ${_feeLevels[i + 1]}`,
+          range,
           color: _chartColors[i],
         });
       } else {
         this.feeLevelDropdownData.push({
           fee: fee,
-          range: this.stateService.isLiquid() ? `${(_feeLevels[i] / 10).toFixed(1)} - ${(_feeLevels[i - 1] / 10).toFixed(1)}` : `${_feeLevels[i]} - ${_feeLevels[i - 1]}`,
+          range,
           color: _chartColors[i - 1],
         });
       }
-    })
+    });
   }
 
   /**

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

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