From 9020c618f034e0ca9384377e29a2bf23beb22ed9 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Tue, 7 Sep 2021 17:48:43 -0300
Subject: [PATCH] Change renderer to svg. Fix data structure of mempool graph.
 Change tooltip total position (top). Change tooltip visual of partial
 porcentage.

---
 .../mempool-graph.component.html              |  2 +-
 .../mempool-graph/mempool-graph.component.ts  | 41 +++++++------------
 .../src/app/interfaces/node-api.interface.ts  |  2 +-
 frontend/src/styles.scss                      |  9 ++++
 4 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.html b/frontend/src/app/components/mempool-graph/mempool-graph.component.html
index a4cac25b7..ac67c6e9e 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.html
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.html
@@ -1 +1 @@
-<div echarts class="echarts" (chartInit)="onChartReady($event)" [options]="mempoolVsizeFeesOptions"></div>
+<div echarts class="echarts" (chartInit)="onChartReady($event)" [initOpts]="mempoolVsizeFeesInitOptions" [options]="mempoolVsizeFeesOptions"></div>
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 25d0371bc..42321c5e9 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -24,6 +24,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
 
   mempoolVsizeFeesData: any;
   mempoolVsizeFeesOptions: EChartsOption;
+  mempoolVsizeFeesInitOptions = {
+    renderer: 'svg',
+  };
   windowPreference: string;
   hoverIndexSerie: -1;
   feeLimitIndex: number;
@@ -70,20 +73,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   generateArray(mempoolStats: OptimizedMempoolStats[]) {
     const finalArray: number[][] = [];
     let feesArray: number[] = [];
-
     for (let index = 37; index > -1; index--) {
       feesArray = [];
       mempoolStats.forEach((stats) => {
-        const theFee = stats.vsizes[index].toString();
-        if (theFee) {
-          feesArray.push(parseInt(theFee, 10));
-        } else {
-          feesArray.push(0);
-        }
+        feesArray.push(stats.vsizes[index] ? stats.vsizes[index] : 0);
       });
-      if (finalArray.length) {
-        feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
-      }
       finalArray.push(feesArray);
     }
     finalArray.reverse();
@@ -103,10 +97,9 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       }
     });
 
-    const yAxisSeries = series.map((value: Array<number>, index: number) => {
+    const seriesGraph = series.map((value: Array<number>, index: number) => {
       if (index <= this.feeLimitIndex){
         return {
-          name: feeLevelsOrdered[index],
           type: 'line',
           stack: 'total',
           smooth: false,
@@ -157,42 +150,37 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         },
         formatter: (params: any) => {
           const legendName = (index: number) => feeLevelsOrdered[index];
-          const colorSpan = (index: number) => `<span class="indicator" style="background-color: ${chartColors[index]}"></span><span>${legendName(index)}</span>`;
-          const title = `<div class="title">${params[0].axisValue}</div>`;
-          const rangeLines = params;
+          const colorSpan = (index: number) => `<span class="indicator" style="background-color: ${chartColors[index]}"></span><span>${legendName(index)}`;
           let total = 0;
-          rangeLines.map((item: any) => {
+          params.map((item: any) => {
             total += item.value;
           });
+          const title = `<div class="title">${params[0].axisValue}
+          <span class="total-value">${this.vbytesPipe.transform(total, 2, 'vB', 'MvB', false)}</span></div>`;
           const itemFormatted = [];
           let totalParcial = 0;
           let progressPercentageText = '';
-          rangeLines.map((item: any, index: number) => {
+          params.map((item: any, index: number) => {
             totalParcial += item.value;
             let progressPercentage = 0;
-            let progressPercentageTotalParcial = 0;
             if (index <= this.feeLimitIndex) {
               progressPercentage = (item.value / total) * 100;
-              progressPercentageTotalParcial = (totalParcial / total) * 100;
               let activeItemClass = '';
               if (this.hoverIndexSerie === index) {
                 progressPercentageText = `<div class="total-parcial-active">
-                  <span>${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}</span>
-                  <div class="total-percentage-bar"><span><span style="width: ${progressPercentageTotalParcial}%; background: ${chartColors[index]}"></span></span></div>
+                  <span class="progress-percentage">${progressPercentage.toFixed(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><span style="width: ${progressPercentage}%; background: ${chartColors[index]}"></span></span></div>
                 </div>`;
                 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="total-percentage-bar"><span><span style="width: ${progressPercentage}%; background: ${chartColors[index]}"></span></span></td>
+              <td class="total-progress-percentage"><span color: ${chartColors[index]}">${progressPercentage.toFixed(1)} <span class="symbol">%</span></td>
             </tr>`);
             }
           });
           const progressActiveDiv = `<span class="total-value">${progressPercentageText}</span>`;
-          const totalDiv = `<div class="total-label">Total
-            <span class="total-value">${this.vbytesPipe.transform(total, 2, 'vB', 'MvB', false)}</span>
-          </div>`;
           const advancedClass = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
           return `<div class="fees-wrapper-tooltip-chart ${advancedClass}">
             ${title}
@@ -207,7 +195,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
               <tbody>${itemFormatted.reverse().join('')}</tbody>
             </table>
             ${progressActiveDiv}
-            ${totalDiv}
           </div>`;
         }
       },
@@ -261,7 +248,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           }
         }
       },
-      series: yAxisSeries
+      series: seriesGraph
     };
   }
 }
diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts
index 2a4bce0e8..d73c12d4e 100644
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@@ -6,7 +6,7 @@ export interface OptimizedMempoolStats {
   vbytes_per_second: number;
   total_fee: number;
   mempool_byte_weight: number;
-  vsizes: number[] | string[];
+  vsizes: number[];
 }
 
 interface Ancestor {
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 8f94c8742..9fb38711d 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -294,6 +294,9 @@ html:lang(ru) .card-title {
     font-weight: 700;
     margin-bottom: 2px;
     color: #fff;
+    .total-value {
+      float: right;
+    }
   }
   .active {
     color: yellow !important;
@@ -332,6 +335,9 @@ html:lang(ru) .card-title {
     .total-percentage-bar {
       padding-left: 8px;
     }
+    .total-progress-percentage {
+      text-align: right;
+    }
   }
   .total-label {
     width: 100%;
@@ -376,6 +382,9 @@ html:lang(ru) .card-title {
         transition: 1000 all ease-in-out;
       }
     }
+    .progress-percentage {
+      float: left;
+    }
   }
 }