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 c02e8d3f7..1dab981ed 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -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) => ` - - ${this.feeLevelsOrdered[index]} - `; - 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 = `
- ${params[0].axisValue} - - ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)} - -
`; + 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 = `
- - ${formatNumber(progressPercentage, this.locale, '1.2-2')} - % + 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 = `
+ + ${formatNumber(progressPercentage, this.locale, '1.2-2')} + % + + + ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)} + +
+ + - - ${this.vbytesPipe.transform(totalParcial, 2, 'vB', 'MvB', false)} - -
- - - -
-
`; - activeItemClass = 'active'; - } - itemFormatted.push(` +
+
`; + activeItemClass = 'active'; + } + itemFormatted.push(` - ${colorSpan(item.seriesIndex)} - - + - ${this.vbytesPipe.transform(valuesOrdered[item.seriesIndex].value, 2, 'vB', 'MvB', false)} + ${this.inverted ? this.feeLevelsOrdered[index] : item.seriesName} - ${this.vbytesPipe.transform(totalValueArray[item.seriesIndex], 2, 'vB', 'MvB', false)} + ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)} + + + + + ${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)} - + `); - } }); const classActive = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : ''; return `
- ${title} +
+ ${params[0].axisValue} + + ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)} + +
@@ -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(), + }; + } } diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 9f80de314..1d11e8e8e 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -46,7 +46,8 @@ [template]="'advanced'" [limitFee]="500" [height]="500" - [left]="65" + [left]="155" + [right]="10" [data]="mempoolStats" > diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html index e5134c9bd..0143d530d 100644 --- a/frontend/src/app/components/television/television.component.html +++ b/frontend/src/app/components/television/television.component.html @@ -10,7 +10,7 @@ [template]="'advanced'" [limitFee]="500" [height]="600" - [left]="60" + [left]="150" [data]="mempoolStats" [showZoom]="false" >