From e1275c62ccd9e9cea11c96a388a991b03f4a7e0f Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 4 Jan 2022 04:42:19 +0400
Subject: [PATCH] Liquid support to the Graph fee filter dropdown

fixes #1072
---
 .../statistics/statistics.component.html      | 16 +++-----
 .../statistics/statistics.component.ts        | 40 +++++++++++--------
 frontend/src/app/services/state.service.ts    |  4 ++
 3 files changed, 33 insertions(+), 27 deletions(-)

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 @@
                 </button>
                 <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
                   <ul>
-                    <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
-                      <ng-template [ngIf]="fee <= 400">
-                        <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
-                        <ng-template [ngIf]="inverted">
-                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
-                          <span class="fee-text" >{{feeLevels[i]}} - {{ feeLevels[i + 1] }}</span>
-                        </ng-template>
-                        <ng-template [ngIf]="!inverted">
-                          <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
-                          <span class="fee-text" >{{feeLevels[i]}} - {{ feeLevels[i - 1] }}</span>
-                        </ng-template>
+                    <ng-template ngFor let-feeData let-i="index" [ngForOf]="feeLevelDropdownData">
+                      <ng-template [ngIf]="feeData.fee <= 400">
+                        <li (click)="filterFeeIndex = feeData.fee" [class]="filterFeeIndex > feeData.fee ? 'inactive' : ''">
+                          <span class="square" [ngStyle]="{'backgroundColor': feeData.color}"></span>
+                          <span class="fee-text">{{ feeData.range }}</span>
                       </li>
                       </ng-template>
                     </ng-template>
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';
+  }
 }