Fix inverted tooltip when invert chart.

This commit is contained in:
Miguel Medeiros 2021-09-26 15:17:29 -03:00
parent 9a6efceb34
commit acbd7f0bde
No known key found for this signature in database
GPG Key ID: 819EDEE4673F3EBB

View File

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