Merge pull request #820 from MiguelMedeiros/add-inverted-button

UI/UX: Add inverted feature to mempool fee chart.

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) => {
+    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
-      if (arr[i] === this.limitFee) { this.feeLimitIndex = i; }
+    for (let i = 0; i < feeLevels.length; i++) {
-      if (arr[i] < this.limitFee) {
+      if (feeLevels[i] === this.limitFee) {
-        if (i === 0) { return '0 - 1'; }
+        this.feeLimitIndex = i;
-        return `${arr[i - 1]} - ${arr[i]}`;
-      } else {
-        return `${this.limitFee}+`;
       }
-    });
+      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: {
+      series: this.inverted ? [...seriesGraph].reverse() : seriesGraph,
-        areaStyle: {
+      hover: true,
-          opacity: 1,
+      color: this.inverted ? [...this.chartColorsOrdered].reverse() : this.chartColorsOrdered,
-        }
-      },
-      color: chartColors,
       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 = (item: any) => `<span class="indicator" style="background-color: ${this.chartColorsOrdered[item.seriesIndex]}"></span>
-          const colorSpan = (index: number) => `<span class="indicator" style="background-color: ${chartColors[index]}"></span>
             <span>
-              ${legendName(index)}
+              ${this.feeLevelsOrdered[item.seriesIndex]}
             </span>`;
           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)}
                   </span>
                   <div class="total-percentage-bar">
-                    <span>
+                    <span class="total-percentage-bar-background">
-                      <span style="width: ${progressPercentage}%; background: ${chartColors[index]}"></span>
+                      <span style="width: ${progressPercentage}%; background: ${this.chartColorsOrdered[index]}"></span>
                     </span>
                   </div>
                 </div>`;
@@ -213,10 +216,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
               }
               itemFormatted.push(`<tr class="item ${activeItemClass}">
               <td class="indicator-container">
-                ${colorSpan(index)}
+                ${colorSpan(item)}
               </td>
-              <td class="value">
+              <td class="total-progress-sum">
-                ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
+                <span>
+                  ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
+                </span>
               </td>
               <td class="total-progress-sum">
                 <span>
@@ -224,9 +229,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
                 </span>
               </td>
               <td class="total-progress-sum-bar">
-                <div>
+                <span class="total-percentage-bar-background">
-                  <span style="width: ${progressPercentageSum.toFixed(2)}%; background-color: ${chartColors[index]}"></span>
+                  <span style="width: ${progressPercentageSum.toFixed(2)}%; background-color: ${this.chartColorsOrdered[index]}"></span>
-                </div>
+                </span>
               </td>
             </tr>`);
             }
@@ -244,7 +249,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
                 </tr>
               </thead>
               <tbody>
-                ${itemFormatted.reverse().join('')}
+                ${this.inverted ? itemFormatted.join('') : itemFormatted.reverse().join('')}
               </tbody>
             </table>
             <span class="total-value">
@@ -310,7 +315,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           }
         }
       },
-      series: seriesGraph
     };
   }
 }

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

@@ -36,6 +36,7 @@
                 <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
               </label>
             </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>
         <div class="card-body">

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