From c393483590266295c1029e9a4d4f422de53ec91d Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Tue, 14 Nov 2023 10:51:51 +0900
Subject: [PATCH] [graph] add toggle to show/hide outliers in transaction
 vBytes per second graph

---
 .../statistics/statistics.component.html      | 20 +++++++++-----
 .../statistics/statistics.component.scss      |  9 +++++++
 .../statistics/statistics.component.ts        | 27 ++++++++++---------
 3 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 02a26ed52..3f0ea61f5 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/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">
-            <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="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">
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index d883e48c3..3d4813fb5 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -222,4 +222,13 @@
       border-top-right-radius: 0;
     }
   }
+}
+
+.vbytes-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  @media (max-width: 767px) {
+    display: block;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts
index 6bc58b6d7..e80ab83ad 100644
--- a/frontend/src/app/components/statistics/statistics.component.ts
+++ b/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() {
@@ -211,24 +213,25 @@ 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;
-    if (['1m', '3m',  '6m', '1y', '2y', '3y', '4y'].includes(this.graphWindowPreference)) {
-      capRatio = 4;
-    }
+    let capRatio = 4;
 
     // Find median value
     const vBytes: number[] = [];
-    for (const stat of this.mempoolStats) {
-      vBytes.push(stat.vbytes_per_second);
+    for (const stat of this.mempoolTransactionsWeightPerSecondData.series[0]) {
+      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) {
-      stat.vbytes_per_second = Math.min(median * capRatio, stat.vbytes_per_second);
+    for (const stat of this.mempoolTransactionsWeightPerSecondData.series[0]) {
+      stat[1] = Math.min(median * capRatio, stat[1]);
     }
   }