machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #823 from MiguelMedeiros/fix-tooltip-inverted-chart

Browse Source 
Fix tooltip mempool chart hover selection.
This commit is contained in:
wiz 2021-09-27 04:03:34 +09:00 committed by GitHub
commit d9ec0c1a36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -162,24 +162,25 @@ 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: totalValueArrayTemp.reverse(),
values: this.inverted ? [...values].reverse() : values,
}; };
}; };
const { totalValue, totalValueArray } = totals(params); const { totalValue, totalValueArray, values } = totals(params);
const title = `<div class="title"> const title = `<div class="title">
${params[0].axisValue} ${params[0].axisValue}
<span class="total-value"> <span class="total-value">
@ -197,7 +198,8 @@ 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) { const hoverActive = (this.inverted) ? Math.abs(item.seriesIndex - params.length + 1) : item.seriesIndex;
if (this.hoverIndexSerie === hoverActive) {
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,16 +218,16 @@ 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(item.seriesIndex)}
</td> </td>
<td class="total-progress-sum"> <td class="total-progress-sum">
<span> <span>
${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)} ${this.vbytesPipe.transform(values[item.seriesIndex].value, 2, 'vB', 'MvB', false)}
</span> </span>
</td> </td>
<td class="total-progress-sum"> <td class="total-progress-sum">
<span> <span>
${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)} ${this.vbytesPipe.transform(totalValueArray[item.seriesIndex], 2, 'vB', 'MvB', false)}
</span> </span>
</td> </td>
<td class="total-progress-sum-bar"> <td class="total-progress-sum-bar">