Add mempool chart filtering.

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -68,9 +68,39 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   }
 
   onChartReady(myChart: any) {
-    myChart.getZr().on('mousemove', e => {
+    myChart.getZr().on('mousemove', (e: any) => {
-      if (e.target !== undefined) {
+      if (e.target !== undefined &&
-        this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index;
+        e.target.parent !== undefined &&
+        e.target.parent.parent !== null &&
+        e.target.parent.parent.__ecComponentInfo !== undefined) {
+          this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index;
+      }
+    });
+
+    myChart.on('legendselectchanged', (params) => {
+      let control = false;
+      Object.entries(params.selected).forEach(([key]) => {
+        if (control) {
+          myChart.dispatchAction({
+            type: 'legendUnSelect',
+            name: key
+          });
+        } else {
+          myChart.dispatchAction({
+            type: 'legendSelect',
+            name: key
+          });
+        }
+        if (params.name === key) {
+          control = true;
+        }
+      });
+      for (let i = 0; i < params.length; i++) {
+        if (i === 0) {
+          this.feeLevelsOrdered.push('0 - 1');
+        } else {
+          this.feeLevelsOrdered.push(`${params[i - 1]} - ${params[i]}`);
+        }
       }
     });
   }
@@ -158,6 +188,26 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       series: this.inverted ? [...seriesGraph].reverse() : seriesGraph,
       hover: true,
       color: this.inverted ? [...this.chartColorsOrdered].reverse() : this.chartColorsOrdered,
+      legend: {
+        bottom: 20,
+        data: this.inverted ? this.feeLevelsOrdered : [...this.feeLevelsOrdered].reverse(),
+        left: 0,
+        icon: 'square',
+        inactiveColor: '#444',
+        orient: 'vertical',
+        pageIconSize: 12,
+        pageIconColor: '#fff',
+        pageIconInactiveColor: '#444',
+        pageTextStyle: {
+          color: '#666',
+        },
+        show: (this.template === 'advanced') ? true : false,
+        textStyle: {
+          color: '#888',
+        },
+        top: 20,
+        type: 'scroll',
+      },
       tooltip: {
         show: (window.innerWidth >= 768) ? true : false,
         trigger: 'axis',
@@ -175,85 +225,81 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
-          const colorSpan = (index: any) => `<span class="indicator" style="background-color: ${this.chartColorsOrdered[index]}"></span>
+          const { totalValue, totalValueArray } = this.getTotalValues(params);
-            <span>
-              ${this.feeLevelsOrdered[index]}
-            </span>`;
-          const totals = (values: any) => {
-            let totalValueTemp = 0;
-            const totalValueArrayTemp = [];
-            const valuesInverted = this.inverted ? values : [...values].reverse();
-            for (const item of valuesInverted) {
-              totalValueTemp += item.value;
-              totalValueArrayTemp.push(totalValueTemp);
-            }
-            return {
-              totalValue: totalValueTemp,
-              totalValueArray: totalValueArrayTemp.reverse(),
-              valuesOrdered: this.inverted ? [...values].reverse() : values,
-            };
-          };
-          const { totalValue, totalValueArray, valuesOrdered } = totals(params);
-          const title = `<div class="title">
-            ${params[0].axisValue}
-            <span class="total-value">
-              ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
-            </span>
-          </div>`;
           const itemFormatted = [];
           let totalParcial = 0;
           let progressPercentageText = '';
-          params.map((item: any, index: number) => {
+          const items = this.inverted ? [...params].reverse() : params;
+          items.map((item: any, index: number) => {
             totalParcial += item.value;
             let progressPercentage = 0;
             let progressPercentageSum = 0;
-            if (index <= this.feeLimitIndex) {
+            progressPercentage = (item.value / totalValue) * 100;
-              progressPercentage = (item.value / totalValue) * 100;
+            progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
-              progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
+            let activeItemClass = '';
-              let activeItemClass = '';
+            let hoverActive: number;
-              const hoverActive = (this.inverted) ? Math.abs(item.seriesIndex - params.length + 1) : item.seriesIndex;
+            if (this.inverted) {
-              if (this.hoverIndexSerie === hoverActive) {
+              hoverActive = Math.abs(this.feeLevelsOrdered.length - item.seriesIndex - this.feeLevelsOrdered.length);
-                progressPercentageText = `<div class="total-parcial-active">
+            } else {
-                  <span class="progress-percentage">
+              hoverActive = item.seriesIndex;
-                    ${formatNumber(progressPercentage, this.locale, '1.2-2')}
+            }
-                    <span class="symbol">%</span>
+            if (this.hoverIndexSerie === hoverActive) {
+              progressPercentageText = `<div class="total-parcial-active">
+                <span class="progress-percentage">
+                  ${formatNumber(progressPercentage, this.locale, '1.2-2')}
+                  <span class="symbol">%</span>
+                </span>
+                <span class="total-parcial-vbytes">
+                  ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}
+                </span>
+                <div class="total-percentage-bar">
+                  <span class="total-percentage-bar-background">
+                    <span style="
+                      width: ${progressPercentage}%;
+                      background: ${this.inverted ? this.chartColorsOrdered[index] : item.color}
+                    "></span>
                   </span>
-                  <span class="total-parcial-vbytes">
+                </div>
-                    ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}
+              </div>`;
-                  </span>
+              activeItemClass = 'active';
-                  <div class="total-percentage-bar">
+            }
-                    <span class="total-percentage-bar-background">
+            itemFormatted.push(`<tr class="item ${activeItemClass}">
-                      <span style="width: ${progressPercentage}%; background: ${this.chartColorsOrdered[index]}"></span>
-                    </span>
-                  </div>
-                </div>`;
-                activeItemClass = 'active';
-              }
-              itemFormatted.push(`<tr class="item ${activeItemClass}">
               <td class="indicator-container">
-                ${colorSpan(item.seriesIndex)}
+                <span class="indicator" style="
-              </td>
+                  background-color: ${this.inverted ? this.chartColorsOrdered[index] : item.color}
-              <td class="total-progress-sum">
+                "></span>
                 <span>
-                  ${this.vbytesPipe.transform(valuesOrdered[item.seriesIndex].value, 2, 'vB', 'MvB', false)}
+                  ${this.inverted ? this.feeLevelsOrdered[index] : item.seriesName}
                 </span>
               </td>
               <td class="total-progress-sum">
                 <span>
-                  ${this.vbytesPipe.transform(totalValueArray[item.seriesIndex], 2, 'vB', 'MvB', false)}
+                  ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
+                </span>
+              </td>
+              <td class="total-progress-sum">
+                <span>
+                  ${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)}
                 </span>
               </td>
               <td class="total-progress-sum-bar">
                 <span class="total-percentage-bar-background">
-                  <span style="width: ${progressPercentageSum.toFixed(2)}%; background-color: ${this.chartColorsOrdered[3]}"></span>
+                  <span style="
+                    width: ${progressPercentageSum.toFixed(2)}%;
+                    background-color: ${this.chartColorsOrdered[3]}
+                  "></span>
                 </span>
               </td>
             </tr>`);
-            }
           });
           const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
           return `<div class="fees-wrapper-tooltip-chart ${classActive}">
-            ${title}
+            <div class="title">
+              ${params[0].axisValue}
+              <span class="total-value">
+                ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
+              </span>
+            </div>
             <table>
               <thead>
                 <tr>
@@ -332,5 +378,19 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       },
     };
   }
+
+  getTotalValues = (values: any) => {
+    let totalValueTemp = 0;
+    const totalValueArray = [];
+    const valuesInverted = this.inverted ? values : [...values].reverse();
+    for (const item of valuesInverted) {
+      totalValueTemp += item.value;
+      totalValueArray.push(totalValueTemp);
+    }
+    return {
+      totalValue: totalValueTemp,
+      totalValueArray: totalValueArray.reverse(),
+    };
+  }
 }
 

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

@@ -46,7 +46,8 @@
               [template]="'advanced'"
               [limitFee]="500"
               [height]="500"
-              [left]="65"
+              [left]="155"
+              [right]="10"
               [data]="mempoolStats"
             ></app-mempool-graph>
           </div>

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

@@ -10,7 +10,7 @@
         [template]="'advanced'"
         [limitFee]="500"
         [height]="600"
-        [left]="60"
+        [left]="150"
         [data]="mempoolStats"
         [showZoom]="false"
       ></app-mempool-graph>