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

app/api/coreApi.js

@@ -9,6 +9,7 @@ var utils = require("../utils.js");
 var config = require("../config.js");
 var coins = require("../coins.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
 var rpcApi = require("./rpcApi.js");
@@ -461,8 +462,20 @@ function getMempoolStats() {
 			var sizeBucketLabels = [];
 
 			for (var i = 0; i < ageBucketCount; i++) {
+				var rangeMin = i * maxAge / ageBucketCount;
+				var rangeMax = (i + 1) * maxAge / ageBucketCount;
+
 				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++) {

views/mempool-summary.pug

@@ -49,8 +49,10 @@ block content
 							td(class="monospace") #{utils.formatCurrencyAmountInSmallestUnits(mempoolstats["averageFeePerByte"], 2)}/vB
 
 		if (getmempoolinfo.size > 0)
-			h2(class="h5") Transactions by fee rate
-			hr
+			div.card.mb-3.shadow-sm
+				div.card-header
+					span.h6 Transactions by fee rate
+				div.card-body
 
 					if (false)
 						#{JSON.stringify(mempoolstats)}
@@ -135,9 +137,10 @@ block content
 											td(class="text-right monospace") -
 											td(class="text-right monospace") -
 
-
-			h2(class="h5") Transactions by size
-			hr
+			div.card.mb-3.shadow-sm
+				div.card-header
+					span.h6 Transactions by size
+				div.card-body
 
 					canvas(id="txSizesBarChart", height="100", class="mb-4")
 
@@ -175,8 +178,11 @@ block content
 							}
 						});
 
-			h2(class="h5") Transactions by age
-			hr
+
+			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")
 
@@ -184,7 +190,7 @@ block content
 					script var bgColors = [];
 					each ageBucketLabel, index in mempoolstats["ageBucketLabels"]
 						- var percentTx = Math.round(100 * mempoolstats["ageBucketTxCounts"][index] / getmempoolinfo.size).toLocaleString();
-				script ageBucketLabels.push(["#{ageBucketLabel} sec","#{mempoolstats["ageBucketTxCounts"][index]} tx (#{percentTx}%)"]);
+						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"]}];