lukechilds
/
btc-rpc-explorer
mirror of https://github.com/lukechilds/btc-rpc-explorer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

frontend tweaks to /mempool-summary 

- when max tx age is over 10 mins, use minutes on chart labels instead of seconds
- card ui around different sections for better visual separation
fix-133-memory-crash
Dan Janosik 5 years ago
parent
7d8a99868b
commit
f5fb54df08
No known key found for this signature in database GPG Key ID: C6F8CE9FFDB2CED2
2 changed files with 180 additions and 161 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      app/api/coreApi.js
  2. 326
      views/mempool-summary.pug

15
app/api/coreApi.js
View File

@ -9,6 +9,7 @@ var utils = require("../utils.js");
var config = require("../config.js"); var config = require("../config.js");
var coins = require("../coins.js"); var coins = require("../coins.js");
var redisCache = require("../redisCache.js"); var redisCache = require("../redisCache.js");
var Decimal = require("decimal.js");
// choose one of the below: RPC to a node, or mock data while testing // choose one of the below: RPC to a node, or mock data while testing
var rpcApi = require("./rpcApi.js"); var rpcApi = require("./rpcApi.js");
@ -461,8 +462,20 @@ function getMempoolStats() {
var sizeBucketLabels = []; var sizeBucketLabels = [];
for (var i = 0; i < ageBucketCount; i++) { for (var i = 0; i < ageBucketCount; i++) {
var rangeMin = i * maxAge / ageBucketCount;
var rangeMax = (i + 1) * maxAge / ageBucketCount;
ageBucketTxCounts.push(0); ageBucketTxCounts.push(0);
ageBucketLabels.push(parseInt(i * maxAge / ageBucketCount) + " - " + parseInt((i + 1) * maxAge / ageBucketCount));
if (maxAge > 600) {
var rangeMinutesMin = new Decimal(rangeMin / 60).toFixed(1);
var rangeMinutesMax = new Decimal(rangeMax / 60).toFixed(1);
ageBucketLabels.push(rangeMinutesMin + " - " + rangeMinutesMax + " min");
} else {
ageBucketLabels.push(parseInt(rangeMin) + " - " + parseInt(rangeMax) + " sec");
}
} }
for (var i = 0; i < sizeBucketCount; i++) { for (var i = 0; i < sizeBucketCount; i++) {

326
views/mempool-summary.pug
View File

@ -49,168 +49,174 @@ block content
td(class="monospace") #{utils.formatCurrencyAmountInSmallestUnits(mempoolstats["averageFeePerByte"], 2)}/vB td(class="monospace") #{utils.formatCurrencyAmountInSmallestUnits(mempoolstats["averageFeePerByte"], 2)}/vB
if (getmempoolinfo.size > 0) if (getmempoolinfo.size > 0)
h2(class="h5") Transactions by fee rate div.card.mb-3.shadow-sm
hr div.card-header
span.h6 Transactions by fee rate
if (false) div.card-body
#{JSON.stringify(mempoolstats)}
if (true)
- var feeBucketLabels = [("[0 - " + mempoolstats["satoshiPerByteBucketMaxima"][0] + ")")];
each item, index in mempoolstats["satoshiPerByteBuckets"]
if (index > 0 && index < mempoolstats["satoshiPerByteBuckets"].length - 1)
- feeBucketLabels.push(("[" + mempoolstats["satoshiPerByteBucketMaxima"][index - 1] + " - " + mempoolstats["satoshiPerByteBucketMaxima"][index] + ")"));
- feeBucketLabels.push((mempoolstats.satoshiPerByteBucketMaxima[mempoolstats.satoshiPerByteBucketMaxima.length - 1] + "+"));
- var feeBucketTxCounts = mempoolstats["satoshiPerByteBucketCounts"];
- var totalfeeBuckets = mempoolstats["satoshiPerByteBucketTotalFees"];
canvas(id="mempoolBarChart", height="100", class="mb-4")
script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js")
script var feeBucketLabels = [];
script var bgColors = [];
each feeBucketLabel, index in feeBucketLabels
- var percentTx = Math.round(100 * feeBucketTxCounts[index] / getmempoolinfo.size).toLocaleString();
script feeBucketLabels.push(["#{feeBucketLabel}","#{feeBucketTxCounts[index]} tx (#{percentTx}%)"]);
script bgColors.push("hsl(#{(333 * index / feeBucketLabels.length)}, 100%, 50%)");
script var feeBucketTxCounts = [#{feeBucketTxCounts}];
script.
var ctx = document.getElementById("mempoolBarChart").getContext('2d');
var mempoolBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: feeBucketLabels,
datasets: [{
data: feeBucketTxCounts,
backgroundColor: bgColors
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
div(class="table-responsive") if (false)
table(class="table table-striped mb-4") #{JSON.stringify(mempoolstats)}
thead
tr if (true)
th Fee Rate - var feeBucketLabels = [("[0 - " + mempoolstats["satoshiPerByteBucketMaxima"][0] + ")")];
th(class="text-right") Tx Count
th(class="text-right") Total Fees
th(class="text-right") Average Fee
th(class="text-right") Average Fee Rate
tbody
each item, index in mempoolstats["satoshiPerByteBuckets"] each item, index in mempoolstats["satoshiPerByteBuckets"]
tr if (index > 0 && index < mempoolstats["satoshiPerByteBuckets"].length - 1)
td #{mempoolstats["satoshiPerByteBucketLabels"][index]} - feeBucketLabels.push(("[" + mempoolstats["satoshiPerByteBucketMaxima"][index - 1] + " - " + mempoolstats["satoshiPerByteBucketMaxima"][index] + ")"));
td(class="text-right monospace") #{item["count"].toLocaleString()}
td(class="text-right monospace") - feeBucketLabels.push((mempoolstats.satoshiPerByteBucketMaxima[mempoolstats.satoshiPerByteBucketMaxima.length - 1] + "+"));
- var currencyValue = item["totalFees"];
include ./includes/value-display.pug - var feeBucketTxCounts = mempoolstats["satoshiPerByteBucketCounts"];
- var totalfeeBuckets = mempoolstats["satoshiPerByteBucketTotalFees"];
if (item["totalBytes"] > 0)
- var avgFee = item["totalFees"] / item["count"]; canvas(id="mempoolBarChart", height="100", class="mb-4")
- var avgFeeRate = item["totalFees"] / item["totalBytes"];
script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js")
td(class="text-right monospace")
- var currencyValue = avgFee; script var feeBucketLabels = [];
include ./includes/value-display.pug script var bgColors = [];
each feeBucketLabel, index in feeBucketLabels
td(class="text-right monospace") #{utils.formatCurrencyAmountInSmallestUnits(avgFeeRate, 2)}/B - var percentTx = Math.round(100 * feeBucketTxCounts[index] / getmempoolinfo.size).toLocaleString();
else script feeBucketLabels.push(["#{feeBucketLabel}","#{feeBucketTxCounts[index]} tx (#{percentTx}%)"]);
td(class="text-right monospace") - script bgColors.push("hsl(#{(333 * index / feeBucketLabels.length)}, 100%, 50%)");
td(class="text-right monospace") -
script var feeBucketTxCounts = [#{feeBucketTxCounts}];
h2(class="h5") Transactions by size script.
hr var ctx = document.getElementById("mempoolBarChart").getContext('2d');
var mempoolBarChart = new Chart(ctx, {
canvas(id="txSizesBarChart", height="100", class="mb-4") type: 'bar',
data: {
script var sizeBucketLabels = []; labels: feeBucketLabels,
script var bgColors = []; datasets: [{
each sizeBucketLabel, index in mempoolstats["sizeBucketLabels"] data: feeBucketTxCounts,
- var percentTx = Math.round(100 * mempoolstats["sizeBucketTxCounts"][index] / getmempoolinfo.size).toLocaleString(); backgroundColor: bgColors
script sizeBucketLabels.push(["#{sizeBucketLabel} bytes","#{mempoolstats["sizeBucketTxCounts"][index]} tx (#{percentTx}%)"]); }]
script bgColors.push("hsl(#{(333 * index / mempoolstats["sizeBucketLabels"].length)}, 100%, 50%)"); },
options: {
script var sizeBucketTxCounts = [#{mempoolstats["sizeBucketTxCounts"]}]; legend: {
display: false
script. },
var ctx = document.getElementById("txSizesBarChart").getContext('2d'); scales: {
var txSizesBarChart = new Chart(ctx, { yAxes: [{
type: 'bar', ticks: {
data: { beginAtZero:true
labels: sizeBucketLabels, }
datasets: [{ }]
data: sizeBucketTxCounts, }
backgroundColor: bgColors
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
} }
}] });
}
} div(class="table-responsive")
}); table(class="table table-striped mb-4")
thead
h2(class="h5") Transactions by age tr
hr th Fee Rate
th(class="text-right") Tx Count
canvas(id="txAgesBarChart", height="100", class="mb-4") th(class="text-right") Total Fees
th(class="text-right") Average Fee
script var ageBucketLabels = []; th(class="text-right") Average Fee Rate
script var bgColors = []; tbody
each ageBucketLabel, index in mempoolstats["ageBucketLabels"] each item, index in mempoolstats["satoshiPerByteBuckets"]
- var percentTx = Math.round(100 * mempoolstats["ageBucketTxCounts"][index] / getmempoolinfo.size).toLocaleString(); tr
script ageBucketLabels.push(["#{ageBucketLabel} sec","#{mempoolstats["ageBucketTxCounts"][index]} tx (#{percentTx}%)"]); td #{mempoolstats["satoshiPerByteBucketLabels"][index]}
script bgColors.push("hsl(#{(333 * index / mempoolstats["ageBucketLabels"].length)}, 100%, 50%)"); td(class="text-right monospace") #{item["count"].toLocaleString()}
td(class="text-right monospace")
script var ageBucketTxCounts = [#{mempoolstats["ageBucketTxCounts"]}]; - var currencyValue = item["totalFees"];
include ./includes/value-display.pug
script.
var ctx = document.getElementById("txAgesBarChart").getContext('2d'); if (item["totalBytes"] > 0)
var txAgesBarChart = new Chart(ctx, { - var avgFee = item["totalFees"] / item["count"];
type: 'bar', - var avgFeeRate = item["totalFees"] / item["totalBytes"];
data: {
labels: ageBucketLabels, td(class="text-right monospace")
datasets: [{ - var currencyValue = avgFee;
data: ageBucketTxCounts, include ./includes/value-display.pug
backgroundColor: bgColors
}] td(class="text-right monospace") #{utils.formatCurrencyAmountInSmallestUnits(avgFeeRate, 2)}/B
}, else
options: { td(class="text-right monospace") -
legend: { td(class="text-right monospace") -
display: false
}, div.card.mb-3.shadow-sm
scales: { div.card-header
yAxes: [{ span.h6 Transactions by size
ticks: { div.card-body
beginAtZero:true
canvas(id="txSizesBarChart", height="100", class="mb-4")
script var sizeBucketLabels = [];
script var bgColors = [];
each sizeBucketLabel, index in mempoolstats["sizeBucketLabels"]
- var percentTx = Math.round(100 * mempoolstats["sizeBucketTxCounts"][index] / getmempoolinfo.size).toLocaleString();
script sizeBucketLabels.push(["#{sizeBucketLabel} bytes","#{mempoolstats["sizeBucketTxCounts"][index]} tx (#{percentTx}%)"]);
script bgColors.push("hsl(#{(333 * index / mempoolstats["sizeBucketLabels"].length)}, 100%, 50%)");
script var sizeBucketTxCounts = [#{mempoolstats["sizeBucketTxCounts"]}];
script.
var ctx = document.getElementById("txSizesBarChart").getContext('2d');
var txSizesBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: sizeBucketLabels,
datasets: [{
data: sizeBucketTxCounts,
backgroundColor: bgColors
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
} }
}] }
} });
}
});
div.card.mb-3.shadow-sm
div.card-header
span.h6 Transactions by age
div.card-body
canvas(id="txAgesBarChart", height="100", class="mb-4")
script var ageBucketLabels = [];
script var bgColors = [];
each ageBucketLabel, index in mempoolstats["ageBucketLabels"]
- var percentTx = Math.round(100 * mempoolstats["ageBucketTxCounts"][index] / getmempoolinfo.size).toLocaleString();
script ageBucketLabels.push(["#{ageBucketLabel}","#{mempoolstats["ageBucketTxCounts"][index]} tx (#{percentTx}%)"]);
script bgColors.push("hsl(#{(333 * index / mempoolstats["ageBucketLabels"].length)}, 100%, 50%)");
script var ageBucketTxCounts = [#{mempoolstats["ageBucketTxCounts"]}];
script.
var ctx = document.getElementById("txAgesBarChart").getContext('2d');
var txAgesBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ageBucketLabels,
datasets: [{
data: ageBucketTxCounts,
backgroundColor: bgColors
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
Write Preview
Loading…
Cancel
Save