diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 1da075a2f..0d2276e98 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -41,17 +41,11 @@
-
-
- - fee ? 'inactive' : ''">
-
-
- {{feeLevels[i]}} - {{ feeLevels[i + 1] }}
-
-
-
- {{feeLevels[i]}} - {{ feeLevels[i - 1] }}
-
+
+
+
- feeData.fee ? 'inactive' : ''">
+
+ {{ feeData.range }}
diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts
index 84513fd3f..6245264ea 100644
--- a/frontend/src/app/components/statistics/statistics.component.ts
+++ b/frontend/src/app/components/statistics/statistics.component.ts
@@ -37,6 +37,7 @@ export class StatisticsComponent implements OnInit {
radioGroupForm: FormGroup;
graphWindowPreference: string;
inverted: boolean;
+ feeLevelDropdownData = [];
constructor(
@Inject(LOCALE_ID) private locale: string,
@@ -51,19 +52,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.setFeeLevelDropdownData();
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';
- const isMobile = window.innerWidth <= 767.98;
- let labelHops = isMobile ? 48 : 24;
-
- if (isMobile) {
- labelHops = 96;
- }
this.radioGroupForm = this.formBuilder.group({
dateSpan: this.graphWindowPreference
@@ -147,11 +139,27 @@ export class StatisticsComponent implements OnInit {
document.location.reload();
}
- filterFees(index: number) {
- this.filterFeeIndex = index;
- }
-
- filterClick() {
- this.dropDownOpen = !this.dropDownOpen;
+ setFeeLevelDropdownData() {
+ let _feeLevels = feeLevels
+ let _chartColors = chartColors;
+ if (!this.inverted) {
+ _feeLevels = [...feeLevels].reverse();
+ _chartColors = [...chartColors].reverse();
+ }
+ _feeLevels.forEach((fee, i) => {
+ 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]}`,
+ 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]}`,
+ color: _chartColors[i - 1],
+ });
+ }
+ })
}
}
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 8d2ee33e6..172c082f6 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -200,4 +200,8 @@ export class StateService {
setBlockScrollingInProgress(value: boolean) {
this.blockScrolling$.next(value);
}
+
+ isLiquid() {
+ return this.network === 'liquid' || this.network === 'liquidtestnet';
+ }
}