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(` - ${colorSpan(index)} + ${colorSpan(item)} - - ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)} + + + ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)} + @@ -224,9 +229,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges { -
- -
+ + + `); } @@ -244,7 +249,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { - ${itemFormatted.reverse().join('')} + ${this.inverted ? itemFormatted.join('') : itemFormatted.reverse().join('')} @@ -310,7 +315,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges { } } }, - series: seriesGraph }; } } diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index c06ef4b37..9f80de314 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -36,6 +36,7 @@ 1Y +
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts index c7f0042d9..bd05dc6a1 100644 --- a/frontend/src/app/components/statistics/statistics.component.ts +++ b/frontend/src/app/components/statistics/statistics.component.ts @@ -31,6 +31,7 @@ export class StatisticsComponent implements OnInit { radioGroupForm: FormGroup; graphWindowPreference: String; + inverted: boolean; constructor( @Inject(LOCALE_ID) private locale: string, @@ -44,6 +45,7 @@ export class StatisticsComponent implements OnInit { ) { } ngOnInit() { + this.inverted = this.storageService.getValue('inverted-graph') === 'true'; this.seoService.setTitle($localize`:@@5d4f792f048fcaa6df5948575d7cb325c9393383:Graphs`); this.stateService.networkChanged$.subscribe((network) => this.network = network); this.graphWindowPreference = this.storageService.getValue('graphWindowPreference') ? this.storageService.getValue('graphWindowPreference').trim() : '2h'; @@ -124,4 +126,9 @@ export class StatisticsComponent implements OnInit { saveGraphPreference() { this.storageService.setValue('graphWindowPreference', this.radioGroupForm.controls.dateSpan.value); } + + invertGraph() { + this.storageService.setValue('inverted-graph', !this.inverted); + document.location.reload(); + } }