mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 06:47:52 +01:00
Code Issues 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 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">

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

@ -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;
}
}

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

@ -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]);
}
}