diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts index 416b8f538..4ab8c33fc 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -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); } diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 2133b2615..172f0e7ea 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -62,7 +62,7 @@