From d376ba1c61927597dbcb1d9a608c96b0c705ae0d Mon Sep 17 00:00:00 2001 From: Miguel Medeiros Date: Mon, 13 Sep 2021 11:07:17 -0300 Subject: [PATCH] Move total MvB to the top. Fix yAxis value. Fix yAxis value. Make disks smaller and transparent. Change opacity on mouseover stack bars. Add 4th column "sum of vsize" to tooltips table. Add toggle show/hide tier fees. Make progress active bar inline with text value. Add a break line to the timestamp text. Add colored progress bar with number. --- .../incoming-transactions-graph.component.ts | 4 +- .../mempool-graph/mempool-graph.component.ts | 111 ++++++++++++------ .../statistics/statistics.component.html | 1 + frontend/src/styles.scss | 94 +++++++++++++-- 4 files changed, 167 insertions(+), 43 deletions(-) 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;