diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts index 53c9a0251..68d1744e3 100644 --- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts +++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts @@ -99,7 +99,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { }, xAxis: { type: 'category', - data: this.data.labels.map((value: any) => formatDate(value, 'MM/dd - HH:mm', this.locale)), + data: this.data.labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`), }, yAxis: { type: 'value', @@ -115,7 +115,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { { data: this.data.series[0], type: 'line', - smooth: true, + smooth: (this.template === 'advanced') ? false : true, showSymbol: false, lineStyle: { width: 3, 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 42321c5e9..eeaa0b00a 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -28,8 +28,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges { renderer: 'svg', }; windowPreference: string; - hoverIndexSerie: -1; + hoverIndexSerie = 0; feeLimitIndex: number; + feeLevelsOrdered = []; + toggledLegends = []; + // feeLevelsFiltered = []; constructor( private vbytesPipe: VbytesPipe, @@ -39,6 +42,15 @@ export class MempoolGraphComponent implements OnInit, OnChanges { ) { } ngOnInit(): void { + this.feeLevelsOrdered = feeLevels.map((sat, i, arr) => { + if (arr[i] === this.limitFee) { this.feeLimitIndex = i; } + if (arr[i] < this.limitFee) { + if (i === 0) { return '0 - 1'; } + return `${arr[i - 1]} - ${arr[i]}`; + } else { + return `${this.limitFee}+`; + } + }); this.mountFeeChart(); } @@ -52,6 +64,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges { myChart.on('mouseover', 'series', (serie: any) => { this.hoverIndexSerie = serie.seriesIndex; }); + // myChart.on('legendselectchanged', (params: any) => { + // this.feeLevelsFiltered = params.selected; + // console.log(params.selected, this.feeLevelsOrdered); + // }); } handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) { @@ -84,22 +100,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges { return finalArray; } - mountFeeChart(){ + mountFeeChart() { const { labels, series } = this.mempoolVsizeFeesData; - const feeLevelsOrdered = feeLevels.map((sat, i, arr) => { - if (arr[i] === this.limitFee) { this.feeLimitIndex = i; } - if (arr[i] < this.limitFee) { - if (i === 0) { return '0 - 1'; } - return `${arr[i - 1]} - ${arr[i]}`; - } else { - return `${this.limitFee}+`; - } - }); - const seriesGraph = series.map((value: Array, index: number) => { if (index <= this.feeLimitIndex){ return { + name: this.feeLevelsOrdered[index], type: 'line', stack: 'total', smooth: false, @@ -110,7 +117,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { width: 0, opacity: 0, }, - symbolSize: (this.template === 'advanced') ? 20 : 10, + symbolSize: (this.template === 'advanced') ? 10 : 10, showSymbol: false, areaStyle: { opacity: 1, @@ -118,14 +125,15 @@ export class MempoolGraphComponent implements OnInit, OnChanges { }, emphasis: { focus: 'series', - select: { - areaStyle: { - opacity: 1, - } + areaStyle: { + opacity: 1, + }, + itemStyle: { + opacity: 0.2, }, }, itemStyle: { - borderWidth: 30, + opacity: 0, }, data: this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true) }; @@ -133,15 +141,33 @@ export class MempoolGraphComponent implements OnInit, OnChanges { }); this.mempoolVsizeFeesOptions = { - color: chartColors, + emphasis: { + areaStyle: { + opacity: 1, + } + }, + legend: { + icon: 'none', + align: 'right', + inactiveColor: '#212121', + orient: 'vertical', + height: '650px', + selectorPosition: 'auto', + right: 0, + selectedMode: 'multiple', + data: this.feeLevelsOrdered, + show: (this.template === 'advanced') ? true : false, + }, tooltip: { + show: true, trigger: 'axis', + alwaysShowContent: false, position: (pos, params, el, elRect, size) => { const positions = { top: (this.template === 'advanced') ? 30 : -30 }; positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60; return positions; }, - extraCssText: `width: ${(this.template === 'advanced') ? '210px' : '200px'}; + extraCssText: `width: ${(this.template === 'advanced') ? '275px' : '200px'}; background: transparent; border: none; box-shadow: none;`, @@ -149,22 +175,31 @@ export class MempoolGraphComponent implements OnInit, OnChanges { type: 'line', }, formatter: (params: any) => { - const legendName = (index: number) => feeLevelsOrdered[index]; + const legendName = (index: number) => this.feeLevelsOrdered[index]; const colorSpan = (index: number) => `${legendName(index)}`; - let total = 0; - params.map((item: any) => { - total += item.value; - }); + const totals = (values: any) => { + let totalValue = 0; + const totalValueArray = []; + const valuesInverted = values.slice(0).reverse(); + for (const item of valuesInverted) { + totalValue += item.value; + totalValueArray.push(totalValue); + } + return { totalValue, totalValueArray: totalValueArray.reverse() }; + }; + const { totalValue, totalValueArray } = totals(params); const title = `
${params[0].axisValue} - ${this.vbytesPipe.transform(total, 2, 'vB', 'MvB', false)}
`; + ${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}`; const itemFormatted = []; let totalParcial = 0; let progressPercentageText = ''; params.map((item: any, index: number) => { totalParcial += item.value; let progressPercentage = 0; + let progressPercentageSum = 0; if (index <= this.feeLimitIndex) { - progressPercentage = (item.value / total) * 100; + progressPercentage = (item.value / totalValue) * 100; + progressPercentageSum = (totalValueArray[index] / totalValue) * 100; let activeItemClass = ''; if (this.hoverIndexSerie === index) { progressPercentageText = `
@@ -176,25 +211,31 @@ export class MempoolGraphComponent implements OnInit, OnChanges { itemFormatted.push(` ${colorSpan(index)} ${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)} - ${progressPercentage.toFixed(1)} % + + ${this.vbytesPipe.transform(totalValueArray[index], 2, 'vB', 'MvB', false)} + + +
+ +
+ `); } }); - const progressActiveDiv = `${progressPercentageText}`; - const advancedClass = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : ''; - return `
+ return `
${title} - + + ${itemFormatted.reverse().join('')}
Range Size%Sum
- ${progressActiveDiv} + ${progressPercentageText}
`; } }, @@ -209,6 +250,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { type: 'slider', brushSelect: false, realtime: true, + bottom: 0, selectedDataBackground: { lineStyle: { color: '#fff', @@ -231,7 +273,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { type: 'category', boundaryGap: false, axisLine: { onZero: false }, - data: labels.map((value: any) => formatDate(value, 'MM/dd - HH:mm', this.locale)), + data: labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`), } ], yAxis: { @@ -252,3 +294,4 @@ export class MempoolGraphComponent implements OnInit, OnChanges { }; } } + diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index c06ef4b37..29a10b0b3 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -46,6 +46,7 @@ [limitFee]="500" [height]="500" [left]="65" + [right]="85" [data]="mempoolStats" >
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 9fb38711d..4722feabb 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -277,6 +277,7 @@ html:lang(ru) .card-title { justify-content: space-between; padding: 10px 15px; text-align: left; + width: 200px; thead { th { font-size: 9px; @@ -287,6 +288,9 @@ html:lang(ru) .card-title { left: -1px; position: relative; } + &:nth-child(4){ + display: none; + } } } .title { @@ -327,15 +331,25 @@ html:lang(ru) .card-title { font-size: 9px !important; } } + .symbol { + font-size: 9px; + } .total-partial { - text-align: right; font-size: 10px; - width: 70px; + width: 58px; + text-align: right; } .total-percentage-bar { padding-left: 8px; } .total-progress-percentage { + width: 45px; + height: 5px; + text-align: right; + display: none; + } + .total-progress-sum { + width: 58px; text-align: right; } } @@ -355,6 +369,24 @@ html:lang(ru) .card-title { top: 2px; } } + thead { + th { + font-size: 9px; + color: #b1b1b1; + text-align: right; + &:first-child { + text-align: left; + left: -1px; + position: relative; + } + &:nth-child(4){ + display: none; + } + &:nth-child(5){ + display: none; + } + } + } .total-percentage-bar { margin: auto; width: 35px; @@ -389,6 +421,7 @@ html:lang(ru) .card-title { } .tx-wrapper-tooltip-chart { + width: 115px; .item { display: flex; } @@ -417,19 +450,65 @@ html:lang(ru) .card-title { } } -.fees-wrapper-tooltip-chart-big, -.tx-wrapper-tooltip-chart-big { +.fees-wrapper-tooltip-chart-advanced, +.tx-wrapper-tooltip-chart-advanced { background: rgba(#1d1f31, 0.98); + width: 250px; + + thead { + th { + &:nth-child(4){ + display: table-cell; + } + &:nth-child(5){ + display: table-cell; + } + } + } .title { font-size: 15px; margin-bottom: 5px; } .item { - font-size: 12px; line-height: 1; .value { + width: 60px; .symbol { - font-size: 12px !important; + font-size: 10px !important; + } + } + .total-partial { + font-size: 10px; + width: 58px; + text-align: right; + } + .total-progress-percentage { + width: 65px; + height: 4px; + padding: 0px 5px; + display: table-cell !important; + border-radius: 4px; + } + .total-progress-sum { + width: 65px; + height: 4px; + padding: 0px 5px; + border-radius: 4px; + } + .total-progress-percentage-bar, + .total-progress-sum-bar { + width: 35px; + height: 4px; + div { + width: 100%; + border-radius: 4px; + display: block; + background: #29324c94; + } + span { + height: 4px; + border-radius: 4px; + display: block; } } } @@ -456,7 +535,8 @@ html:lang(ru) .card-title { } } -.tx-wrapper-tooltip-chart-big { +.tx-wrapper-tooltip-chart-advanced { + width: 115px; .indicator-container { .indicator { margin-right: 5px;