machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nymkappa 2023-11-14 10:51:51 +09:00
parent cbe1ec4e72
commit c393483590
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/components/statistics/statistics.component.html
View File

@ -109,12 +109,20 @@
<div> <div>
<div class="card mb-3"> <div class="card mb-3">
<div class="card-header"> <div class="card-header">
<div class="d-flex d-md-block align-items-baseline"> <div class="vbytes-title">
<span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span> <div>
<button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')"> <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon> <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
</button> <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</div> </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>
<div class="card-body"> <div class="card-body">

9
frontend/src/app/components/statistics/statistics.component.scss
View File

@ -222,4 +222,13 @@
border-top-right-radius: 0; border-top-right-radius: 0;
} }
} }
}
.vbytes-title {
display: flex;
align-items: baseline;
justify-content: space-between;
@media (max-width: 767px) {
display: block;
}
} }

27
frontend/src/app/components/statistics/statistics.component.ts
View File

@ -35,7 +35,7 @@ export class StatisticsComponent implements OnInit {
showCount = false; showCount = false;
maxFeeIndex: number; maxFeeIndex: number;
dropDownOpen = false; dropDownOpen = false;
outlierCappingEnabled = false;
mempoolStats: OptimizedMempoolStats[] = []; mempoolStats: OptimizedMempoolStats[] = [];
mempoolVsizeFeesData: any; mempoolVsizeFeesData: any;
@ -156,12 +156,14 @@ export class StatisticsComponent implements OnInit {
} }
this.maxFeeIndex = maxTier; this.maxFeeIndex = maxTier;
this.capExtremeVbytesValues();
this.mempoolTransactionsWeightPerSecondData = { this.mempoolTransactionsWeightPerSecondData = {
labels: labels, labels: labels,
series: [mempoolStats.map((stats) => [stats.added * 1000, stats.vbytes_per_second])], series: [mempoolStats.map((stats) => [stats.added * 1000, stats.vbytes_per_second])],
}; };
if (this.outlierCappingEnabled) {
this.capExtremeVbytesValues();
}
} }
saveGraphPreference() { saveGraphPreference() {
@ -211,24 +213,25 @@ export class StatisticsComponent implements OnInit {
} }
}); });
} }
/** /**
* All value higher that "median * capRatio" are capped * All value higher that "median * capRatio" are capped
*/ */
onOutlierToggleChange(e) {
this.outlierCappingEnabled = e.target.checked;
this.handleNewMempoolData(this.mempoolStats);
}
capExtremeVbytesValues() { capExtremeVbytesValues() {
if (this.stateService.network.length !== 0) { if (this.stateService.network.length !== 0) {
return; // Only cap on Bitcoin mainnet 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 // Find median value
const vBytes: number[] = []; 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 sorted = vBytes.slice().sort((a, b) => a - b);
const middle = Math.floor(sorted.length / 2); const middle = Math.floor(sorted.length / 2);
@ -238,8 +241,8 @@ export class StatisticsComponent implements OnInit {
} }
// Cap // 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]);
} }
} }