machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move total MvB to the top.

Browse Source 
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.
This commit is contained in:
Miguel Medeiros 2021-09-13 11:07:17 -03:00
parent 388aa7fbe3
commit d376ba1c61
No known key found for this signature in database
GPG Key ID: 819EDEE4673F3EBB
4 changed files with 167 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
View File

@ -99,7 +99,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
}, },
xAxis: { xAxis: {
type: 'category', 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: { yAxis: {
type: 'value', type: 'value',
@ -115,7 +115,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
{ {
data: this.data.series[0], data: this.data.series[0],
type: 'line', type: 'line',
smooth: true, smooth: (this.template === 'advanced') ? false : true,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
width: 3, width: 3,

111
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -28,8 +28,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
renderer: 'svg', renderer: 'svg',
}; };
windowPreference: string; windowPreference: string;
hoverIndexSerie: -1; hoverIndexSerie = 0;
feeLimitIndex: number; feeLimitIndex: number;
feeLevelsOrdered = [];
toggledLegends = [];
// feeLevelsFiltered = [];
constructor( constructor(
private vbytesPipe: VbytesPipe, private vbytesPipe: VbytesPipe,
@ -39,6 +42,15 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
) { } ) { }
ngOnInit(): void { 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(); this.mountFeeChart();
} }
@ -52,6 +64,10 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
myChart.on('mouseover', 'series', (serie: any) => { myChart.on('mouseover', 'series', (serie: any) => {
this.hoverIndexSerie = serie.seriesIndex; this.hoverIndexSerie = serie.seriesIndex;
}); });
// myChart.on('legendselectchanged', (params: any) => {
// this.feeLevelsFiltered = params.selected;
// console.log(params.selected, this.feeLevelsOrdered);
// });
} }
handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) { handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {
@ -84,22 +100,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
return finalArray; return finalArray;
} }
mountFeeChart(){ mountFeeChart() {
const { labels, series } = this.mempoolVsizeFeesData; 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<number>, index: number) => { const seriesGraph = series.map((value: Array<number>, index: number) => {
if (index <= this.feeLimitIndex){ if (index <= this.feeLimitIndex){
return { return {
name: this.feeLevelsOrdered[index],
type: 'line', type: 'line',
stack: 'total', stack: 'total',
smooth: false, smooth: false,
@ -110,7 +117,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
width: 0, width: 0,
opacity: 0, opacity: 0,
}, },
symbolSize: (this.template === 'advanced') ? 20 : 10, symbolSize: (this.template === 'advanced') ? 10 : 10,
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 1, opacity: 1,
@ -118,14 +125,15 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
}, },
emphasis: { emphasis: {
focus: 'series', focus: 'series',
select: { areaStyle: {
areaStyle: { opacity: 1,
opacity: 1, },
} itemStyle: {
opacity: 0.2,
}, },
}, },
itemStyle: { itemStyle: {
borderWidth: 30, opacity: 0,
}, },
data: this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true) data: this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true)
}; };
@ -133,15 +141,33 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
}); });
this.mempoolVsizeFeesOptions = { 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: { tooltip: {
show: true,
trigger: 'axis', trigger: 'axis',
alwaysShowContent: false,
position: (pos, params, el, elRect, size) => { position: (pos, params, el, elRect, size) => {
const positions = { top: (this.template === 'advanced') ? 30 : -30 }; const positions = { top: (this.template === 'advanced') ? 30 : -30 };
positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60; positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60;
return positions; return positions;
}, },
extraCssText: `width: ${(this.template === 'advanced') ? '210px' : '200px'}; extraCssText: `width: ${(this.template === 'advanced') ? '275px' : '200px'};
background: transparent; background: transparent;
border: none; border: none;
box-shadow: none;`, box-shadow: none;`,
@ -149,22 +175,31 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
type: 'line', type: 'line',
}, },
formatter: (params: any) => { formatter: (params: any) => {
const legendName = (index: number) => feeLevelsOrdered[index]; const legendName = (index: number) => this.feeLevelsOrdered[index];
const colorSpan = (index: number) => `<span class="indicator" style="background-color: ${chartColors[index]}"></span><span>${legendName(index)}`; const colorSpan = (index: number) => `<span class="indicator" style="background-color: ${chartColors[index]}"></span><span>${legendName(index)}`;
let total = 0; const totals = (values: any) => {
params.map((item: any) => { let totalValue = 0;
total += item.value; 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 = `<div class="title">${params[0].axisValue} const title = `<div class="title">${params[0].axisValue}
<span class="total-value">${this.vbytesPipe.transform(total, 2, 'vB', 'MvB', false)}</span></div>`; <span class="total-value">${this.vbytesPipe.transform(totalValue, 2, 'vB', 'MvB', false)}</span></div>`;
const itemFormatted = []; const itemFormatted = [];
let totalParcial = 0; let totalParcial = 0;
let progressPercentageText = ''; let progressPercentageText = '';
params.map((item: any, index: number) => { params.map((item: any, index: number) => {
totalParcial += item.value; totalParcial += item.value;
let progressPercentage = 0; let progressPercentage = 0;
let progressPercentageSum = 0;
if (index <= this.feeLimitIndex) { if (index <= this.feeLimitIndex) {
progressPercentage = (item.value / total) * 100; progressPercentage = (item.value / totalValue) * 100;
progressPercentageSum = (totalValueArray[index] / totalValue) * 100;
let activeItemClass = ''; let activeItemClass = '';
if (this.hoverIndexSerie === index) { if (this.hoverIndexSerie === index) {
progressPercentageText = `<div class="total-parcial-active"> progressPercentageText = `<div class="total-parcial-active">
@ -176,25 +211,31 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
itemFormatted.push(`<tr class="item ${activeItemClass}"> itemFormatted.push(`<tr class="item ${activeItemClass}">
<td class="indicator-container">${colorSpan(index)}</td> <td class="indicator-container">${colorSpan(index)}</td>
<td class="value">${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}</td> <td class="value">${this.vbytesPipe.transform(item.value, 2, 'vB', 'MvB', false)}</td>
<td class="total-progress-percentage"><span color: ${chartColors[index]}">${progressPercentage.toFixed(1)} <span class="symbol">%</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">
<div>
<span style="width: ${progressPercentageSum.toFixed(2)}%; background-color: ${chartColors[index]}"></span>
</div>
</td>
</tr>`); </tr>`);
} }
}); });
const progressActiveDiv = `<span class="total-value">${progressPercentageText}</span>`; return `<div class="fees-wrapper-tooltip-chart ${(this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : ''}">
const advancedClass = (this.template === 'advanced') ? 'fees-wrapper-tooltip-chart-advanced' : '';
return `<div class="fees-wrapper-tooltip-chart ${advancedClass}">
${title} ${title}
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Range</th> <th>Range</th>
<th>Size</th> <th>Size</th>
<th>%</th> <th>Sum</th>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody>${itemFormatted.reverse().join('')}</tbody> <tbody>${itemFormatted.reverse().join('')}</tbody>
</table> </table>
${progressActiveDiv} <span class="total-value">${progressPercentageText}</span>
</div>`; </div>`;
} }
}, },
@ -209,6 +250,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
type: 'slider', type: 'slider',
brushSelect: false, brushSelect: false,
realtime: true, realtime: true,
bottom: 0,
selectedDataBackground: { selectedDataBackground: {
lineStyle: { lineStyle: {
color: '#fff', color: '#fff',
@ -231,7 +273,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLine: { onZero: 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: { yAxis: {
@ -252,3 +294,4 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
}; };
} }
} }

1
frontend/src/app/components/statistics/statistics.component.html
View File

@ -46,6 +46,7 @@
[limitFee]="500" [limitFee]="500"
[height]="500" [height]="500"
[left]="65" [left]="65"
[right]="85"
[data]="mempoolStats" [data]="mempoolStats"
></app-mempool-graph> ></app-mempool-graph>
</div> </div>

94
frontend/src/styles.scss
View File

@ -277,6 +277,7 @@ html:lang(ru) .card-title {
justify-content: space-between; justify-content: space-between;
padding: 10px 15px; padding: 10px 15px;
text-align: left; text-align: left;
width: 200px;
thead { thead {
th { th {
font-size: 9px; font-size: 9px;
@ -287,6 +288,9 @@ html:lang(ru) .card-title {
left: -1px; left: -1px;
position: relative; position: relative;
} }
&:nth-child(4){
display: none;
}
} }
} }
.title { .title {
@ -327,15 +331,25 @@ html:lang(ru) .card-title {
font-size: 9px !important; font-size: 9px !important;
} }
} }
.symbol {
font-size: 9px;
}
.total-partial { .total-partial {
text-align: right;
font-size: 10px; font-size: 10px;
width: 70px; width: 58px;
text-align: right;
} }
.total-percentage-bar { .total-percentage-bar {
padding-left: 8px; padding-left: 8px;
} }
.total-progress-percentage { .total-progress-percentage {
width: 45px;
height: 5px;
text-align: right;
display: none;
}
.total-progress-sum {
width: 58px;
text-align: right; text-align: right;
} }
} }
@ -355,6 +369,24 @@ html:lang(ru) .card-title {
top: 2px; 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 { .total-percentage-bar {
margin: auto; margin: auto;
width: 35px; width: 35px;
@ -389,6 +421,7 @@ html:lang(ru) .card-title {
} }
.tx-wrapper-tooltip-chart { .tx-wrapper-tooltip-chart {
width: 115px;
.item { .item {
display: flex; display: flex;
} }
@ -417,19 +450,65 @@ html:lang(ru) .card-title {
} }
} }
.fees-wrapper-tooltip-chart-big, .fees-wrapper-tooltip-chart-advanced,
.tx-wrapper-tooltip-chart-big { .tx-wrapper-tooltip-chart-advanced {
background: rgba(#1d1f31, 0.98); background: rgba(#1d1f31, 0.98);
width: 250px;
thead {
th {
&:nth-child(4){
display: table-cell;
}
&:nth-child(5){
display: table-cell;
}
}
}
.title { .title {
font-size: 15px; font-size: 15px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.item { .item {
font-size: 12px;
line-height: 1; line-height: 1;
.value { .value {
width: 60px;
.symbol { .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-container {
.indicator { .indicator {
margin-right: 5px; margin-right: 5px;