mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 02:11:49 +01:00
Code Issues 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',
},
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: 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">
@ -197,7 +198,8 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
progressPercentage = (item.value / totalValue) * 100;
progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
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">
<span class="progress-percentage">
${progressPercentage.toFixed(2)}
@ -216,16 +218,16 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
}
itemFormatted.push(`<tr class="item ${activeItemClass}">
<td class="indicator-container">
${colorSpan(item)}
${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">