Fix mempool graph fee filtering
This commit is contained in:
Mononaut
parent
2156fb2a83
commit
7ab05d815d
@ -24,6 +24,7 @@ import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/grap
|
||||
export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
@Input() data: any[];
|
||||
@Input() filterSize = 100000;
|
||||
@Input() limitFilterFee = 1;
|
||||
@Input() height: number | string = 200;
|
||||
@Input() top: number | string = 20;
|
||||
@Input() right: number | string = 10;
|
||||
@ -40,7 +41,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
};
|
||||
windowPreference: string;
|
||||
hoverIndexSerie = 0;
|
||||
maxFee: number;
|
||||
feeLimitIndex: number;
|
||||
maxFeeIndex: number;
|
||||
feeLevelsOrdered = [];
|
||||
chartColorsOrdered = chartColors;
|
||||
inverted: boolean;
|
||||
@ -98,8 +101,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
}
|
||||
|
||||
generateArray(mempoolStats: OptimizedMempoolStats[]) {
|
||||
let finalArray: number[][][] = [];
|
||||
const finalArray: number[][][] = [];
|
||||
let feesArray: number[][] = [];
|
||||
|
||||
let maxTier = 0;
|
||||
for (let index = 37; index > -1; index--) {
|
||||
feesArray = [];
|
||||
@ -111,7 +115,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
});
|
||||
finalArray.push(feesArray);
|
||||
}
|
||||
this.feeLimitIndex = maxTier;
|
||||
this.maxFeeIndex = maxTier;
|
||||
|
||||
finalArray.reverse();
|
||||
return finalArray;
|
||||
}
|
||||
@ -124,7 +129,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
const newColors = [];
|
||||
for (let index = 0; index < series.length; index++) {
|
||||
const value = series[index];
|
||||
if (index < this.feeLimitIndex) {
|
||||
if (index >= this.feeLimitIndex && index <= this.maxFeeIndex) {
|
||||
newColors.push(this.chartColorsOrdered[index]);
|
||||
seriesGraph.push({
|
||||
zlevel: 0,
|
||||
@ -383,21 +388,26 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
|
||||
orderLevels() {
|
||||
this.feeLevelsOrdered = [];
|
||||
let maxIndex = Math.min(feeLevels.length, this.feeLimitIndex);
|
||||
for (let i = 0; i < maxIndex; i++) {
|
||||
const maxIndex = Math.min(feeLevels.length, this.maxFeeIndex);
|
||||
for (let i = 0; i < feeLevels.length; i++) {
|
||||
if (feeLevels[i] === this.limitFilterFee) {
|
||||
this.feeLimitIndex = i;
|
||||
}
|
||||
if (feeLevels[i] <= feeLevels[this.maxFeeIndex]) {
|
||||
if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
|
||||
if (i === maxIndex - 1) {
|
||||
if (i === maxIndex || feeLevels[i] == null) {
|
||||
this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)}+`);
|
||||
} else {
|
||||
this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)} - ${(feeLevels[i + 1] / 10).toFixed(1)}`);
|
||||
}
|
||||
} else {
|
||||
if (i === maxIndex - 1) {
|
||||
if (i === maxIndex || feeLevels[i] == null) {
|
||||
this.feeLevelsOrdered.push(`${feeLevels[i]}+`);
|
||||
} else {
|
||||
this.feeLevelsOrdered.push(`${feeLevels[i]} - ${feeLevels[i + 1]}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.chartColorsOrdered = chartColors.slice(0, this.feeLevelsOrdered.length);
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
<div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
|
||||
<ul>
|
||||
<ng-template ngFor let-feeData let-i="index" [ngForOf]="feeLevelDropdownData">
|
||||
<ng-template [ngIf]="feeData.fee <= 400">
|
||||
<ng-template [ngIf]="feeData.fee <= (feeLevels[maxFeeIndex])">
|
||||
<li (click)="filterFeeIndex = feeData.fee"
|
||||
[class]="filterFeeIndex > feeData.fee ? 'inactive' : ''">
|
||||
<span class="square" [ngStyle]="{'backgroundColor': feeData.color}"></span>
|
||||
@ -84,7 +84,8 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="incoming-transactions-graph">
|
||||
<app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'" [height]="500" [left]="65" [right]="10"
|
||||
<app-mempool-graph #mempoolgraph dir="ltr" [template]="'advanced'"
|
||||
[limitFilterFee]="filterFeeIndex" [height]="500" [left]="65" [right]="10"
|
||||
[data]="mempoolStats && mempoolStats.length ? mempoolStats : null"></app-mempool-graph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -30,7 +30,9 @@ export class StatisticsComponent implements OnInit {
|
||||
spinnerLoading = false;
|
||||
feeLevels = feeLevels;
|
||||
chartColors = chartColors;
|
||||
filterSize = 100000;
|
||||
filterFeeIndex = 1;
|
||||
maxFeeIndex: number;
|
||||
dropDownOpen = false;
|
||||
|
||||
mempoolStats: OptimizedMempoolStats[] = [];
|
||||
@ -134,6 +136,16 @@ export class StatisticsComponent implements OnInit {
|
||||
mempoolStats.reverse();
|
||||
const labels = mempoolStats.map(stats => stats.added);
|
||||
|
||||
let maxTier = 0;
|
||||
for (let index = 37; index > -1; index--) {
|
||||
mempoolStats.forEach((stats) => {
|
||||
if (stats.vsizes[index] >= this.filterSize) {
|
||||
maxTier = Math.max(maxTier, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.maxFeeIndex = maxTier;
|
||||
|
||||
this.capExtremeVbytesValues();
|
||||
|
||||
this.mempoolTransactionsWeightPerSecondData = {
|
||||
@ -152,27 +164,42 @@ export class StatisticsComponent implements OnInit {
|
||||
}
|
||||
|
||||
setFeeLevelDropdownData() {
|
||||
let _feeLevels = feeLevels
|
||||
let _feeLevels = feeLevels;
|
||||
let _chartColors = chartColors;
|
||||
if (!this.inverted) {
|
||||
_feeLevels = [...feeLevels].reverse();
|
||||
_chartColors = [...chartColors].reverse();
|
||||
}
|
||||
_feeLevels.forEach((fee, i) => {
|
||||
let range;
|
||||
const nextIndex = this.inverted ? i + 1 : i - 1;
|
||||
if (this.stateService.isLiquid()) {
|
||||
if (_feeLevels[nextIndex] == null) {
|
||||
range = `${(_feeLevels[i] / 10).toFixed(1)}+`;
|
||||
} else {
|
||||
range = `${(_feeLevels[i] / 10).toFixed(1)} - ${(_feeLevels[nextIndex] / 10).toFixed(1)}`;
|
||||
}
|
||||
} else {
|
||||
if (_feeLevels[nextIndex] == null) {
|
||||
range = `${_feeLevels[i]}+`;
|
||||
} else {
|
||||
range = `${_feeLevels[i]} - ${_feeLevels[nextIndex]}`;
|
||||
}
|
||||
}
|
||||
if (this.inverted) {
|
||||
this.feeLevelDropdownData.push({
|
||||
fee: fee,
|
||||
range: this.stateService.isLiquid() ? `${(_feeLevels[i] / 10).toFixed(1)} - ${(_feeLevels[i + 1] / 10).toFixed(1)}` : `${_feeLevels[i]} - ${_feeLevels[i + 1]}`,
|
||||
range,
|
||||
color: _chartColors[i],
|
||||
});
|
||||
} else {
|
||||
this.feeLevelDropdownData.push({
|
||||
fee: fee,
|
||||
range: this.stateService.isLiquid() ? `${(_feeLevels[i] / 10).toFixed(1)} - ${(_feeLevels[i - 1] / 10).toFixed(1)}` : `${_feeLevels[i]} - ${_feeLevels[i - 1]}`,
|
||||
range,
|
||||
color: _chartColors[i - 1],
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -26,7 +26,6 @@
|
||||
<div class="mempool-graph">
|
||||
<app-mempool-graph
|
||||
[template]="'widget'"
|
||||
[filterSize]="1000000"
|
||||
[data]="mempoolStats.value?.mempool"
|
||||
[windowPreferenceOverride]="'2h'"
|
||||
></app-mempool-graph>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user