mirror of
https://github.com/mempool/mempool.git
synced 2025-02-24 14:50:52 +01:00
[graph] add toggle to show/hide outliers in transaction vBytes per second graph
This commit is contained in:
parent
cbe1ec4e72
commit
c393483590
3 changed files with 38 additions and 18 deletions
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -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]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue