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 1dab981ed..4e50f4af2 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -45,19 +45,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges { ngOnInit(): void { 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(); } @@ -136,6 +123,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { } mountFeeChart() { + this.orderLevels(); const { labels, series } = this.mempoolVsizeFeesData; const seriesGraph = series.map((value: Array, index: number) => { @@ -201,7 +189,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { pageTextStyle: { color: '#666', }, - show: (this.template === 'advanced') ? true : false, + show: false, textStyle: { color: '#888', }, @@ -392,5 +380,21 @@ export class MempoolGraphComponent implements OnInit, OnChanges { totalValueArray: totalValueArray.reverse(), }; } + + orderLevels() { + 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); + } } diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 1d11e8e8e..395f37a13 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -36,6 +36,38 @@ 1Y + +
+ + +
+ @@ -44,9 +76,9 @@ diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss index 31eecb8c3..39d5de1b1 100644 --- a/frontend/src/app/components/statistics/statistics.component.scss +++ b/frontend/src/app/components/statistics/statistics.component.scss @@ -61,3 +61,39 @@ .incoming-transactions-graph { height: 600px; } + + +.dropdown-fees { + padding: 10px 0px; + min-width: 130px; + padding: 2px ​20px 0px; + li { + width: 100%; + font-size: 14px; + padding: 0px 0px; + padding-left: 20px; + transition: 200ms all ease-in-out; + &:hover { + background-color: #10121e; + cursor: pointer; + } + } + .square { + transition: 200ms all ease-in-out; + height: 12px; + width: 12px; + margin-right: 10px; + border-radius: 1px; + display: inline-block; + position: relative; + top: 1px; + } + .inactive { + .square { + background-color: #aaa !important; + } + .fee-text { + text-decoration: line-through; + } + } +} diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts index bd05dc6a1..9302d8d0d 100644 --- a/frontend/src/app/components/statistics/statistics.component.ts +++ b/frontend/src/app/components/statistics/statistics.component.ts @@ -11,6 +11,7 @@ import { ApiService } from '../../services/api.service'; import { StateService } from 'src/app/services/state.service'; import { SeoService } from 'src/app/services/seo.service'; import { StorageService } from 'src/app/services/storage.service'; +import { feeLevels, chartColors } from 'src/app/app.constants'; @Component({ selector: 'app-statistics', @@ -22,6 +23,9 @@ export class StatisticsComponent implements OnInit { loading = true; spinnerLoading = false; + feeLevels = feeLevels; + chartColors = chartColors; + filterFeeIndex = 200; mempoolStats: OptimizedMempoolStats[] = []; @@ -30,7 +34,7 @@ export class StatisticsComponent implements OnInit { mempoolTransactionsWeightPerSecondData: any; radioGroupForm: FormGroup; - graphWindowPreference: String; + graphWindowPreference: string; inverted: boolean; constructor( @@ -46,6 +50,10 @@ export class StatisticsComponent implements OnInit { ngOnInit() { this.inverted = this.storageService.getValue('inverted-graph') === 'true'; + if (!this.inverted) { + this.feeLevels = [...feeLevels].reverse(); + this.chartColors = [...chartColors].reverse(); + } 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'; @@ -131,4 +139,8 @@ export class StatisticsComponent implements OnInit { this.storageService.setValue('inverted-graph', !this.inverted); document.location.reload(); } + + filterFees(index: number) { + this.filterFeeIndex = index; + } } diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html index 0143d530d..4e1a588cc 100644 --- a/frontend/src/app/components/television/television.component.html +++ b/frontend/src/app/components/television/television.component.html @@ -10,7 +10,8 @@ [template]="'advanced'" [limitFee]="500" [height]="600" - [left]="150" + [left]="75" + [right]="10" [data]="mempoolStats" [showZoom]="false" >