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 @@
-
- Transaction vBytes per second (vB/s) - -
+
+
+ Transaction vBytes per second (vB/s) + +
+
+ + +
+
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]); } }