[graph] add toggle to show/hide outliers in transaction vBytes per second graph

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

@@ -109,12 +109,20 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <div class="d-flex d-md-block align-items-baseline">
+          <div class="vbytes-title">
+            <div>
               <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
               <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
                 <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
               </button>
             </div>
+            <div class="form-check">
+              <input style="margin-top: 9px" class="form-check-input" type="checkbox" value="" id="hide-outliers" (change)="onOutlierToggleChange($event)">
+              <label class="form-check-label" for="hide-outliers">
+                <small i18n="statistics.cap-outliers">Cap outliers</small>
+              </label>
+            </div>
+          </div>
         </div>
 
         <div class="card-body">

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

@@ -223,3 +223,12 @@
     }
   }
 }
+
+.vbytes-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  @media (max-width: 767px) {
+    display: block;
+  }
+}

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

@@ -35,7 +35,7 @@ export class StatisticsComponent implements OnInit {
   showCount = false;
   maxFeeIndex: number;
   dropDownOpen = false;
-
+  outlierCappingEnabled = false;
   mempoolStats: OptimizedMempoolStats[] = [];
 
   mempoolVsizeFeesData: any;
@@ -156,12 +156,14 @@ export class StatisticsComponent implements OnInit {
     }
     this.maxFeeIndex = maxTier;
 
-    this.capExtremeVbytesValues();
-
     this.mempoolTransactionsWeightPerSecondData = {
       labels: labels,
       series: [mempoolStats.map((stats) => [stats.added * 1000, stats.vbytes_per_second])],
     };
+
+    if (this.outlierCappingEnabled) {
+      this.capExtremeVbytesValues();
+    }
   }
 
   saveGraphPreference() {
@@ -215,20 +217,21 @@ export class StatisticsComponent implements OnInit {
   /**
    * All value higher that "median * capRatio" are capped
    */
+  onOutlierToggleChange(e) {
+    this.outlierCappingEnabled = e.target.checked;
+    this.handleNewMempoolData(this.mempoolStats);
+  }
   capExtremeVbytesValues() {
     if (this.stateService.network.length !== 0) {
       return; // Only cap on Bitcoin mainnet
     }
 
-    let capRatio = 10;
+    let capRatio = 4;
-    if (['1m', '3m',  '6m', '1y', '2y', '3y', '4y'].includes(this.graphWindowPreference)) {
-      capRatio = 4;
-    }
 
     // Find median value
     const vBytes: number[] = [];
-    for (const stat of this.mempoolStats) {
+    for (const stat of this.mempoolTransactionsWeightPerSecondData.series[0]) {
-      vBytes.push(stat.vbytes_per_second);
+      vBytes.push(stat[1]);
     }
     const sorted = vBytes.slice().sort((a, b) => a - b);
     const middle = Math.floor(sorted.length / 2);
@@ -238,8 +241,8 @@ export class StatisticsComponent implements OnInit {
     }
 
     // Cap
-    for (const stat of this.mempoolStats) {
+    for (const stat of this.mempoolTransactionsWeightPerSecondData.series[0]) {
-      stat.vbytes_per_second = Math.min(median * capRatio, stat.vbytes_per_second);
+      stat[1] = Math.min(median * capRatio, stat[1]);
     }
   }