Change filters to dropdown selection menu.

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<number>, 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);
+  }
 }
 

frontend/src/app/components/statistics/statistics.component.html

@@ -36,6 +36,38 @@
                 <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
               </label>
             </div>
+
+            <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
+              <button class="btn btn-primary btn-sm ml-2" id="dropdownFees" ngbDropdownAnchor (focus)="myDrop.open()">Fee Ranges</button>
+              <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
+                <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
+                  <ng-template [ngIf]="fee === 1">
+                    <li (click)="filterFees(fee)" [class]="filterFeeIndex < fee ? 'inactive' : ''">
+                      <ng-template [ngIf]="inverted">
+                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
+                      </ng-template>
+                      <ng-template [ngIf]="!inverted">
+                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
+                      </ng-template>
+                      <span class="fee-text" >0 - {{ fee }}</span>
+                    </li>
+                  </ng-template>
+                  <ng-template [ngIf]="fee <= 200 && fee !== 1">
+                    <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 - 1]}} - {{ fee }}</span>
+                    </ng-template>
+                    <ng-template [ngIf]="!inverted">
+                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
+                        <span class="fee-text" >{{feeLevels[i + 1]}} - {{ fee }}</span>
+                    </ng-template>
+                  </li>
+                  </ng-template>
+                </ng-template>
+              </div>
+            </div>
+
             <button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
           </form>
         </div>
@@ -44,9 +76,9 @@
             <app-mempool-graph
               dir="ltr"
               [template]="'advanced'"
-              [limitFee]="500"
+              [limitFee]="filterFeeIndex"
               [height]="500"
-              [left]="155"
+              [left]="65"
               [right]="10"
               [data]="mempoolStats"
             ></app-mempool-graph>

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;
+    }
+  }
+}

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;
+  }
 }

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"
       ></app-mempool-graph>