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 56aa12a92..ed6282e1d 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -31,6 +31,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges { hoverIndexSerie = 0; feeLimitIndex: number; feeLevelsOrdered = []; + chartColorsOrdered = []; + inverted: boolean; constructor( private vbytesPipe: VbytesPipe, @@ -40,15 +42,20 @@ export class MempoolGraphComponent implements OnInit, OnChanges { ) { } ngOnInit(): void { - this.feeLevelsOrdered = feeLevels.map((sat, i, arr) => { - if (arr[i] === this.limitFee) { this.feeLimitIndex = i; } - if (arr[i] < this.limitFee) { - if (i === 0) { return '0 - 1'; } - return `${arr[i - 1]} - ${arr[i]}`; - } else { - return `${this.limitFee}+`; + this.inverted = this.storageService.getValue('inverted-graph') === 'true'; + for (let i = 0; i < feeLevels.length; i++) { + if (feeLevels[i] === this.limitFee) { + this.feeLimitIndex = i; } - }); + if (feeLevels[i] <= this.limitFee) { + if (i === 0) { + this.feeLevelsOrdered.push('0 - 1'); + } else { + this.feeLevelsOrdered.push(`${feeLevels[i - 1]} - ${feeLevels[i]}`); + } + } + } + this.chartColorsOrdered = chartColors.slice(0, this.feeLevelsOrdered.length); this.mountFeeChart(); } @@ -135,12 +142,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges { }); this.mempoolVsizeFeesOptions = { - emphasis: { - areaStyle: { - opacity: 1, - } - }, - color: chartColors, + series: this.inverted ? [...seriesGraph].reverse() : seriesGraph, + hover: true, + color: this.inverted ? [...this.chartColorsOrdered].reverse() : this.chartColorsOrdered, tooltip: { show: (window.innerWidth >= 768) ? true : false, trigger: 'axis', @@ -158,15 +162,14 @@ export class MempoolGraphComponent implements OnInit, OnChanges { type: 'line', }, formatter: (params: any) => { - const legendName = (index: number) => this.feeLevelsOrdered[index]; - const colorSpan = (index: number) => ` + const colorSpan = (item: any) => ` - ${legendName(index)} + ${this.feeLevelsOrdered[item.seriesIndex]} `; const totals = (values: any) => { let totalValueTemp = 0; const totalValueArrayTemp = []; - const valuesInverted = values.slice(0).reverse(); + const valuesInverted = [...values].reverse(); for (const item of valuesInverted) { totalValueTemp += item.value; totalValueArrayTemp.push(totalValueTemp); @@ -204,8 +207,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges { ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}
`; @@ -213,10 +216,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges { } itemFormatted.push(`