Remove fee tier legends.

Fix tv page css.

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

@@ -31,8 +31,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   hoverIndexSerie = 0;
   feeLimitIndex: number;
   feeLevelsOrdered = [];
-  toggledLegends = [];
-  // feeLevelsFiltered = [];
 
   constructor(
     private vbytesPipe: VbytesPipe,
@@ -64,10 +62,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     myChart.on('mouseover', 'series', (serie: any) => {
       this.hoverIndexSerie = serie.seriesIndex;
     });
-    // myChart.on('legendselectchanged', (params: any) => {
-    //   this.feeLevelsFiltered = params.selected;
-    //   console.log(params.selected, this.feeLevelsOrdered);
-    // });
   }
 
   handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
@@ -146,18 +140,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           opacity: 1,
         }
       },
-      legend: {
-        icon: 'none',
-        align: 'right',
-        inactiveColor: '#212121',
-        orient: 'vertical',
-        height: '650px',
-        selectorPosition: 'auto',
-        right: 0,
-        selectedMode: 'multiple',
-        data: this.feeLevelsOrdered,
-        show: (this.template === 'advanced') ? true : false,
-      },
+      color: chartColors,
       tooltip: {
         show: true,
         trigger: 'axis',
@@ -176,7 +159,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         },
         formatter: (params: any) => {
           const legendName = (index: number) => this.feeLevelsOrdered[index];
-          const colorSpan = (index: number) => `<span class="indicator" style="background-color: ${chartColors[index]}"></span><span>${legendName(index)}</span>`;
+          const colorSpan = (index: number) => `<span class="indicator" style="background-color: ${chartColors[index]}"></span>
+            <span>
+              ${legendName(index)}
+            </span>`;
           const totals = (values: any) => {
             let totalValueTemp = 0;
             const totalValueArrayTemp = [];
@@ -191,8 +177,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
             };
           };
           const { totalValue, totalValueArray } = 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 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 = '';
@@ -210,7 +200,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
                     ${progressPercentage.toFixed(2)}
                     <span class="symbol">%</span>
                   </span>
-                  <span class="total-parcial-vbytes">${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}</span>
+                  <span class="total-parcial-vbytes">
+                    ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}
+                  </span>
                   <div class="total-percentage-bar">
                     <span>
                       <span style="width: ${progressPercentage}%; background: ${chartColors[index]}"></span>
@@ -220,10 +212,16 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
                 activeItemClass = 'active';
               }
               itemFormatted.push(`<tr class="item ${activeItemClass}">
-              <td class="indicator-container">${colorSpan(index)}</td>
-              <td class="value">${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}</td>
+              <td class="indicator-container">
+                ${colorSpan(index)}
+              </td>
+              <td class="value">
+                ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
+              </td>
               <td class="total-progress-sum">
-                <span>${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)}</span>
+                <span>
+                  ${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)}
+                </span>
               </td>
               <td class="total-progress-sum-bar">
                 <div>
@@ -233,7 +231,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
             </tr>`);
             }
           });
-          return `<div class="fees-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : ''}">
+          const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
+          return `<div class="fees-wrapper-tooltip-chart ${classActive}">
             ${title}
             <table>
               <thead>
@@ -244,9 +243,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
                   <th></th>
                 </tr>
               </thead>
-              <tbody>${itemFormatted.reverse().join('')}</tbody>
+              <tbody>
+                ${itemFormatted.reverse().join('')}
+              </tbody>
             </table>
-            <span class="total-value">${progressPercentageText}</span>
+            <span class="total-value">
+              ${progressPercentageText}
+            </span>
           </div>`;
         }
       },

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

@@ -46,7 +46,6 @@
               [limitFee]="500"
               [height]="500"
               [left]="65"
-              [right]="85"
               [data]="mempoolStats"
             ></app-mempool-graph>
           </div>

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

@@ -18,18 +18,15 @@
 .chart-holder {
   height: 650px;
   width: 100%;
-  margin: 30px auto;
+  margin: 30px auto 0;
 }
 
 .blockchain-wrapper {
-  display: flex;
+  display: block;
   height: 100%;
   min-height: 240px;
   position: relative;
-  top: -20px;
-  @media(min-height: 800px) {
-    top: 30px;
-  }
+  top: 30px;
 
   .position-container {
     position: absolute;
@@ -37,10 +34,6 @@
     bottom: 170px;
   }
 
-  .chart-holder {
-    height: calc(100% - 220px);
-  }
-
   #divider {
     width: 3px;
     height: 175px;
@@ -55,27 +48,7 @@
       top: -28px;
     }
   }
-
-  @media (min-width: 1920px) {
-    .position-container {
-      transform: scale(1.3);
-      bottom: 210px;
-    }
-    .chart-holder {
-      height: calc(100% - 280px);
-    }
-  }
-
 }
-:host ::ng-deep .ct-legend {
-  top: 20px !important;
-  display: flex;
-  flex-direction: column-reverse;
-  @media(min-height: 800px){
-    padding-top: 40px !important;
-  }
-}
-
 .tv-container {
   display: flex;
   margin-top: 0px;