Add mempool chart filtering.
This commit is contained in:
Miguel Medeiros
parent
e1c943d0a7
commit
c2f288a861
@ -68,9 +68,39 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
}
|
||||
|
||||
onChartReady(myChart: any) {
|
||||
myChart.getZr().on('mousemove', e => {
|
||||
if (e.target !== undefined) {
|
||||
this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index;
|
||||
myChart.getZr().on('mousemove', (e: any) => {
|
||||
if (e.target !== undefined &&
|
||||
e.target.parent !== undefined &&
|
||||
e.target.parent.parent !== null &&
|
||||
e.target.parent.parent.__ecComponentInfo !== undefined) {
|
||||
this.hoverIndexSerie = e.target.parent.parent.__ecComponentInfo.index;
|
||||
}
|
||||
});
|
||||
|
||||
myChart.on('legendselectchanged', (params) => {
|
||||
let control = false;
|
||||
Object.entries(params.selected).forEach(([key]) => {
|
||||
if (control) {
|
||||
myChart.dispatchAction({
|
||||
type: 'legendUnSelect',
|
||||
name: key
|
||||
});
|
||||
} else {
|
||||
myChart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: key
|
||||
});
|
||||
}
|
||||
if (params.name === key) {
|
||||
control = true;
|
||||
}
|
||||
});
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
if (i === 0) {
|
||||
this.feeLevelsOrdered.push('0 - 1');
|
||||
} else {
|
||||
this.feeLevelsOrdered.push(`${params[i - 1]} - ${params[i]}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -158,6 +188,26 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
series: this.inverted ? [...seriesGraph].reverse() : seriesGraph,
|
||||
hover: true,
|
||||
color: this.inverted ? [...this.chartColorsOrdered].reverse() : this.chartColorsOrdered,
|
||||
legend: {
|
||||
bottom: 20,
|
||||
data: this.inverted ? this.feeLevelsOrdered : [...this.feeLevelsOrdered].reverse(),
|
||||
left: 0,
|
||||
icon: 'square',
|
||||
inactiveColor: '#444',
|
||||
orient: 'vertical',
|
||||
pageIconSize: 12,
|
||||
pageIconColor: '#fff',
|
||||
pageIconInactiveColor: '#444',
|
||||
pageTextStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
show: (this.template === 'advanced') ? true : false,
|
||||
textStyle: {
|
||||
color: '#888',
|
||||
},
|
||||
top: 20,
|
||||
type: 'scroll',
|
||||
},
|
||||
tooltip: {
|
||||
show: (window.innerWidth >= 768) ? true : false,
|
||||
trigger: 'axis',
|
||||
@ -175,85 +225,81 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
type: 'line',
|
||||
},
|
||||
formatter: (params: any) => {
|
||||
const colorSpan = (index: any) => `<span class="indicator" style="background-color: ${this.chartColorsOrdered[index]}"></span>
|
||||
<span>
|
||||
${this.feeLevelsOrdered[index]}
|
||||
</span>`;
|
||||
const totals = (values: any) => {
|
||||
let totalValueTemp = 0;
|
||||
const totalValueArrayTemp = [];
|
||||
const valuesInverted = this.inverted ? values : [...values].reverse();
|
||||
for (const item of valuesInverted) {
|
||||
totalValueTemp += item.value;
|
||||
totalValueArrayTemp.push(totalValueTemp);
|
||||
}
|
||||
return {
|
||||
totalValue: totalValueTemp,
|
||||
totalValueArray: totalValueArrayTemp.reverse(),
|
||||
valuesOrdered: this.inverted ? [...values].reverse() : values,
|
||||
};
|
||||
};
|
||||
const { totalValue, totalValueArray, valuesOrdered } = totals(params);
|
||||
const title = `<div class="title">
|
||||
${params[0].axisValue}
|
||||
<span class="total-value">
|
||||
${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
|
||||
</span>
|
||||
</div>`;
|
||||
const { totalValue, totalValueArray } = this.getTotalValues(params);
|
||||
const itemFormatted = [];
|
||||
let totalParcial = 0;
|
||||
let progressPercentageText = '';
|
||||
params.map((item: any, index: number) => {
|
||||
const items = this.inverted ? [...params].reverse() : params;
|
||||
items.map((item: any, index: number) => {
|
||||
totalParcial += item.value;
|
||||
let progressPercentage = 0;
|
||||
let progressPercentageSum = 0;
|
||||
if (index <= this.feeLimitIndex) {
|
||||
progressPercentage = (item.value / totalValue) * 100;
|
||||
progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
|
||||
let activeItemClass = '';
|
||||
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">
|
||||
${formatNumber(progressPercentage, this.locale, '1.2-2')}
|
||||
<span class="symbol">%</span>
|
||||
progressPercentage = (item.value / totalValue) * 100;
|
||||
progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
|
||||
let activeItemClass = '';
|
||||
let hoverActive: number;
|
||||
if (this.inverted) {
|
||||
hoverActive = Math.abs(this.feeLevelsOrdered.length - item.seriesIndex - this.feeLevelsOrdered.length);
|
||||
} else {
|
||||
hoverActive = item.seriesIndex;
|
||||
}
|
||||
if (this.hoverIndexSerie === hoverActive) {
|
||||
progressPercentageText = `<div class="total-parcial-active">
|
||||
<span class="progress-percentage">
|
||||
${formatNumber(progressPercentage, this.locale, '1.2-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 class="total-percentage-bar-background">
|
||||
<span style="
|
||||
width: ${progressPercentage}%;
|
||||
background: ${this.inverted ? this.chartColorsOrdered[index] : item.color}
|
||||
"></span>
|
||||
</span>
|
||||
<span class="total-parcial-vbytes">
|
||||
${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)}
|
||||
</span>
|
||||
<div class="total-percentage-bar">
|
||||
<span class="total-percentage-bar-background">
|
||||
<span style="width: ${progressPercentage}%; background: ${this.chartColorsOrdered[index]}"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>`;
|
||||
activeItemClass = 'active';
|
||||
}
|
||||
itemFormatted.push(`<tr class="item ${activeItemClass}">
|
||||
</div>
|
||||
</div>`;
|
||||
activeItemClass = 'active';
|
||||
}
|
||||
itemFormatted.push(`<tr class="item ${activeItemClass}">
|
||||
<td class="indicator-container">
|
||||
${colorSpan(item.seriesIndex)}
|
||||
</td>
|
||||
<td class="total-progress-sum">
|
||||
<span class="indicator" style="
|
||||
background-color: ${this.inverted ? this.chartColorsOrdered[index] : item.color}
|
||||
"></span>
|
||||
<span>
|
||||
${this.vbytesPipe.transform(valuesOrdered[item.seriesIndex].value, 2, 'vB', 'MvB', false)}
|
||||
${this.inverted ? this.feeLevelsOrdered[index] : item.seriesName}
|
||||
</span>
|
||||
</td>
|
||||
<td class="total-progress-sum">
|
||||
<span>
|
||||
${this.vbytesPipe.transform(totalValueArray[item.seriesIndex], 2, 'vB', 'MvB', false)}
|
||||
${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="total-progress-sum">
|
||||
<span>
|
||||
${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="total-progress-sum-bar">
|
||||
<span class="total-percentage-bar-background">
|
||||
<span style="width: ${progressPercentageSum.toFixed(2)}%; background-color: ${this.chartColorsOrdered[3]}"></span>
|
||||
<span style="
|
||||
width: ${progressPercentageSum.toFixed(2)}%;
|
||||
background-color: ${this.chartColorsOrdered[3]}
|
||||
"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>`);
|
||||
}
|
||||
});
|
||||
const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
|
||||
return `<div class="fees-wrapper-tooltip-chart ${classActive}">
|
||||
${title}
|
||||
<div class="title">
|
||||
${params[0].axisValue}
|
||||
<span class="total-value">
|
||||
${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}
|
||||
</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -332,5 +378,19 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
getTotalValues = (values: any) => {
|
||||
let totalValueTemp = 0;
|
||||
const totalValueArray = [];
|
||||
const valuesInverted = this.inverted ? values : [...values].reverse();
|
||||
for (const item of valuesInverted) {
|
||||
totalValueTemp += item.value;
|
||||
totalValueArray.push(totalValueTemp);
|
||||
}
|
||||
return {
|
||||
totalValue: totalValueTemp,
|
||||
totalValueArray: totalValueArray.reverse(),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -46,7 +46,8 @@
|
||||
[template]="'advanced'"
|
||||
[limitFee]="500"
|
||||
[height]="500"
|
||||
[left]="65"
|
||||
[left]="155"
|
||||
[right]="10"
|
||||
[data]="mempoolStats"
|
||||
></app-mempool-graph>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
[template]="'advanced'"
|
||||
[limitFee]="500"
|
||||
[height]="600"
|
||||
[left]="60"
|
||||
[left]="150"
|
||||
[data]="mempoolStats"
|
||||
[showZoom]="false"
|
||||
></app-mempool-graph>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user