From acbd7f0bdecd67d657d77242e27599a81bba3d75 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Sun, 26 Sep 2021 15:17:29 -0300
Subject: [PATCH 1/4] Fix inverted tooltip when invert chart.

---
 .../mempool-graph/mempool-graph.component.ts         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

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 ed6282e1d..f7ced356d 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -162,21 +162,21 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
-          const colorSpan = (item: any) => `<span class="indicator" style="background-color: ${this.chartColorsOrdered[item.seriesIndex]}"></span>
+          const colorSpan = (index: any) => `<span class="indicator" style="background-color: ${this.chartColorsOrdered[index]}"></span>
             <span>
-              ${this.feeLevelsOrdered[item.seriesIndex]}
+              ${this.feeLevelsOrdered[index]}
             </span>`;
           const totals = (values: any) => {
             let totalValueTemp = 0;
             const totalValueArrayTemp = [];
-            const valuesInverted = [...values].reverse();
+            const valuesInverted = this.inverted ? values : [...values].reverse();
             for (const item of valuesInverted) {
               totalValueTemp += item.value;
               totalValueArrayTemp.push(totalValueTemp);
             }
             return {
               totalValue: totalValueTemp,
-              totalValueArray: totalValueArrayTemp.reverse()
+              totalValueArray: this.inverted ? totalValueArrayTemp.reverse() : totalValueArrayTemp.reverse(),
             };
           };
           const { totalValue, totalValueArray } = totals(params);
@@ -197,7 +197,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
               progressPercentage = (item.value / totalValue) * 100;
               progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
               let activeItemClass = '';
-              if (this.hoverIndexSerie === index) {
+              if (this.hoverIndexSerie === item.seriesIndex) {
                 progressPercentageText = `<div class="total-parcial-active">
                   <span class="progress-percentage">
                     ${progressPercentage.toFixed(2)}
@@ -216,7 +216,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
               }
               itemFormatted.push(`<tr class="item ${activeItemClass}">
               <td class="indicator-container">
-                ${colorSpan(item)}
+                ${colorSpan(index)}
               </td>
               <td class="total-progress-sum">
                 <span>

From b0e54818aeafc800d44a8807f0d75274cabe23a3 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Sun, 26 Sep 2021 15:24:29 -0300
Subject: [PATCH 2/4] Fix mempool chart tooltip hover selection.

---
 .../app/components/mempool-graph/mempool-graph.component.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 f7ced356d..bb141b19b 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -197,7 +197,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
               progressPercentage = (item.value / totalValue) * 100;
               progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
               let activeItemClass = '';
-              if (this.hoverIndexSerie === item.seriesIndex) {
+              const hoverActive = (this.inverted) ? Math.abs(item.seriesIndex - params.length + 1) : item.seriesIndex;
+              if (this.hoverIndexSerie === hoverActive) {
                 progressPercentageText = `<div class="total-parcial-active">
                   <span class="progress-percentage">
                     ${progressPercentage.toFixed(2)}

From 80fcceef7343c2289b02e60740c164c2de260e3a Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Sun, 26 Sep 2021 15:39:37 -0300
Subject: [PATCH 3/4] Fix size column order when invert mempool chart.

---
 .../components/mempool-graph/mempool-graph.component.ts  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

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 bb141b19b..5c06fc11f 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -177,9 +177,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
             return {
               totalValue: totalValueTemp,
               totalValueArray: this.inverted ? totalValueArrayTemp.reverse() : totalValueArrayTemp.reverse(),
+              values: this.inverted ? [...values].reverse() : values,
             };
           };
-          const { totalValue, totalValueArray } = totals(params);
+          const { totalValue, totalValueArray, values } = totals(params);
           const title = `<div class="title">
             ${params[0].axisValue}
             <span class="total-value">
@@ -217,16 +218,16 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
               }
               itemFormatted.push(`<tr class="item ${activeItemClass}">
               <td class="indicator-container">
-                ${colorSpan(index)}
+                ${colorSpan(item.seriesIndex)}
               </td>
               <td class="total-progress-sum">
                 <span>
-                  ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
+                  ${this.vbytesPipe.transform(values[item.seriesIndex].value, 2, 'vB', 'MvB', false)}
                 </span>
               </td>
               <td class="total-progress-sum">
                 <span>
-                  ${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)}
+                  ${this.vbytesPipe.transform(totalValueArray[item.seriesIndex], 2, 'vB', 'MvB', false)}
                 </span>
               </td>
               <td class="total-progress-sum-bar">

From 461296e002dafaaf57942898b06479b55b7d11ac Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Sun, 26 Sep 2021 15:47:08 -0300
Subject: [PATCH 4/4] Remove uncessary variable check.

---
 .../src/app/components/mempool-graph/mempool-graph.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 5c06fc11f..440e56af6 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -176,7 +176,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
             }
             return {
               totalValue: totalValueTemp,
-              totalValueArray: this.inverted ? totalValueArrayTemp.reverse() : totalValueArrayTemp.reverse(),
+              totalValueArray: totalValueArrayTemp.reverse(),
               values: this.inverted ? [...values].reverse() : values,
             };
           };