Misc UX improvements and cleanup/consistency fixes:

- /block-stats: more stats (totalfee, mediantime, txs, utxo_increase), 2-col layout, graphs in cards, checkboxes for toggling, reset checkbox state on page refresh, +-100 blocks instead of 70 for preconfigureds
- /tx-stats: graphs in cards, graph style/color consistency improvements
- /mining-summary: +-100 blocks instead of 70 for preconfigureds
- /rpc-browser: styling consistency/cleanup fixes
- /mempool-summary: getmempoolinfo data is made available but currently unused
- testnet: manual blockstats for genesis block (rpc returns error)
- couple of roadmap items

app/coins/btc.js

@@ -217,6 +217,43 @@ module.exports = {
 			"txs": 1,
 			"utxo_increase": 1,
 			"utxo_size_inc": 117
+		},
+		"test": {
+			"avgfee": 0,
+			"avgfeerate": 0,
+			"avgtxsize": 0,
+			"blockhash": "000000000933ea01ad0ee984209779baaec3ced90fa3f408719526f8d77f4943",
+			"feerate_percentiles": [
+				0,
+				0,
+				0,
+				0,
+				0
+			],
+			"height": 0,
+			"ins": 0,
+			"maxfee": 0,
+			"maxfeerate": 0,
+			"maxtxsize": 0,
+			"medianfee": 0,
+			"mediantime": 1296688602,
+			"mediantxsize": 0,
+			"minfee": 0,
+			"minfeerate": 0,
+			"mintxsize": 0,
+			"outs": 1,
+			"subsidy": 5000000000,
+			"swtotal_size": 0,
+			"swtotal_weight": 0,
+			"swtxs": 0,
+			"time": 1296688602,
+			"total_out": 0,
+			"total_size": 0,
+			"total_weight": 0,
+			"totalfee": 0,
+			"txs": 1,
+			"utxo_increase": 1,
+			"utxo_size_inc": 117
 		}
 	},
 	genesisCoinbaseOutputAddressScripthash:"8b01df4e368ea28f8dc0423bcf7a4923e3a12d307c875e47a0cfbf90b5c39161",

roadmap.md

@@ -1,6 +1,8 @@
 * Tool for analyzing block details
 	* fee graphs
 	* value graphs
+	* number of each output type: p2sh, etc
 * Homepage:
 	* Summary table item for 24hr volume (pulled via blockstats.total_output)
-* New page for 24hr volume for last ~30days
+* New page for 24hr volume for last ~30days
+* Privacy analysis

routes/baseActionsRouter.js

@@ -224,25 +224,29 @@ router.get("/node-status", function(req, res, next) {
 router.get("/mempool-summary", function(req, res, next) {
 	res.locals.satoshiPerByteBucketMaxima = coinConfig.feeSatoshiPerByteBucketMaxima;
 
-	coreApi.getMempoolTxids().then(function(mempooltxids) {
-		var debugMaxCount = 0;
+	coreApi.getMempoolInfo().then(function(mempoolinfo) {
+		res.locals.mempoolinfo = mempoolinfo;
 
-		if (debugMaxCount > 0) {
-			var debugtxids = [];
-			for (var i = 0; i < Math.min(10000, mempooltxids.length); i++) {
-				debugtxids.push(mempooltxids[i]);
-			}
+		coreApi.getMempoolTxids().then(function(mempooltxids) {
+			var debugMaxCount = 0;
 
-			res.locals.mempooltxidChunks = utils.splitArrayIntoChunks(debugtxids, 25);
+			if (debugMaxCount > 0) {
+				var debugtxids = [];
+				for (var i = 0; i < Math.min(debugMaxCount, mempooltxids.length); i++) {
+					debugtxids.push(mempooltxids[i]);
+				}
 
-		} else {
-			res.locals.mempooltxidChunks = utils.splitArrayIntoChunks(mempooltxids, 25);
-		}
-		
+				res.locals.mempooltxidChunks = utils.splitArrayIntoChunks(debugtxids, 25);
 
-		res.render("mempool-summary");
+			} else {
+				res.locals.mempooltxidChunks = utils.splitArrayIntoChunks(mempooltxids, 25);
+			}
+			
 
-		next();
+			res.render("mempool-summary");
+
+			next();
+		});
 
 	}).catch(function(err) {
 		res.locals.userMessage = "Error: " + err;

views/block-stats.pug

@@ -19,7 +19,7 @@ block content
 
 		div.card.shadow-sm.mb-3
 			div.card-body
-				h3.h6.mb-0 Selected Blocks
+				h3.h6.mb-0 Block Range
 				hr
 
 				div.clearfix
@@ -44,9 +44,9 @@ block content
 								button.btn.btn-outline-primary.dropdown-toggle(type="button", id="preconfigured-dropdown", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") Selections
 								div.dropdown-menu(aria-labelledby="preconfigured-dropdown")
 									a.dropdown-item(href="javascript:void(0)", data-blocks="0-199") First 200 Blocks
-									a.dropdown-item(href="javascript:void(0)", data-blocks="209900-210100") First Halving
-									a.dropdown-item(href="javascript:void(0)", data-blocks="419900-420100") Second Halving
-									a.dropdown-item(href="javascript:void(0)", data-blocks="481724-481924") SegWit Activation Window
+									a.dropdown-item(href="javascript:void(0)", data-blocks="209900-210100") First Halving ±100
+									a.dropdown-item(href="javascript:void(0)", data-blocks="419900-420100") Second Halving ±100
+									a.dropdown-item(href="javascript:void(0)", data-blocks="481724-481924") SegWit Activation ±100
 
 					div.float-left
 						div(id="time-range-buttons")
@@ -68,52 +68,33 @@ block content
 						div.progress-bar(id="data-progress", role="progressbar", aria-valuenow="0", aria-valuemin="0" ,aria-valuemax="100")
 	
 
-	div(id="main-content", style="display: none;")
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="fee-rates", height="100")
-
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="max-fee-rates", height="100")
-
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="min-fees", height="100")
-		
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="max-fees", height="100")
-
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="inputs-outputs", height="100")
-
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="tx-sizes", height="100")
-		
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="max-tx-sizes", height="100")
-
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="volumes", height="100")
+	- var graphIds = ["fee-rates", "max-fee-rates", "total-fee", "min-fees", "max-fees", "inputs-outputs", "tx-sizes", "max-tx-sizes", "volumes", "weights-sizes", "sw-txs", "subsidy", "mediantime", "txs", "utxo_increase"];
+	
+	- var graphTitles = ["Fee Rates (avg, median, min)", "Maximum Fee Rate", "Total Fees", "Minimum Tx Fee", "Maximum Tx Fee", "Input / Output Count", "Tx Sizes (avg, median, min)", "Maximum Tx Size", "Output Volume", "Block Weight and Size", "SegWit Tx Count", "Subsidy", "Timestamp", "Tx Count", "UTXO Δ"];
 
+	div(id="main-content", style="display: none;")
 		div.card.shadow-sm.mb-3
 			div.card-body
-				canvas.mb-3(id="weights-sizes", height="100")
+				div.clearfix
+					each graphId, graphIndex in graphIds
+						div.float-left.mr-3.mb-1
+							div.form-check
+								input.form-check-input.graph-toggle-checkbox(type="checkbox", id=("checkbox-" + graphId) checked="checked", data-graphId=graphId, autocomplete="off")
+								label.form-check-label(for=("checkbox-" + graphId)) #{graphTitles[graphIndex]}
 
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="sw-txs", height="100")
+					div.float-left.mr-3.mb-1
+						a.mr-3(id="link-show-all", href="javascript:void(0)") show all
+						a(id="link-hide-all", href="javascript:void(0)") hide all
 
-		div.card.shadow-sm.mb-3
-			div.card-body
-				canvas.mb-3(id="subsidy", height="100")
+		div.row.clearfix
+			each graphId, graphIndex in graphIds
+				div.col-lg-6.float-left
+					div.card.shadow-sm.mb-3.graph-wrapper(id=`graph-wrapper-${graphId}`)
+						div.card-body
+							h3.h6.mb-0 #{graphTitles[graphIndex]}
+							hr
 
-		
+							canvas.mb-3(id=graphId)
 
 
 block endOfBody
@@ -179,7 +160,31 @@ block endOfBody
 				return false;
 			});
 
-			getData(currentBlockHeight, 144, 15);
+			$(".graph-toggle-checkbox").change(function() {
+				var graphId = $(this).attr("data-graphId");
+
+				$("#graph-wrapper-" + graphId).toggle();
+			});
+
+			$("#link-show-all").on("click", function() {
+				$(".graph-toggle-checkbox").each(function() {
+					$(this).prop("checked", true);
+				});
+
+				$(".graph-wrapper").each(function() {
+					$(this).show();
+				});
+			});
+
+			$("#link-hide-all").on("click", function() {
+				$(".graph-toggle-checkbox").each(function() {
+					$(this).prop("checked", false);
+				});
+
+				$(".graph-wrapper").each(function() {
+					$(this).hide();
+				});
+			});
 		});
 
 		function getData(blockStart, count, chunkSize) {
@@ -226,6 +231,8 @@ block endOfBody
 				
 				createGraph("max-fee-rates", ["max-fee-rate"], [summary.maxfeerate], [blue]);
 
+				createGraph("total-fee", ["total-fee"], [summary.totalfee], [blue]);
+
 				createGraph("min-fees", ["min-fee"], [summary.minfee], [blue]);
 				createGraph("max-fees", ["max-fee"], [summary.maxfee], [blue]);
 
@@ -243,6 +250,12 @@ block endOfBody
 
 				createGraph("subsidy", ["subsidy"], [summary.subsidy], [blue]);
 
+				createGraph("mediantime", ["mediantime"], [summary.mediantime], [blue]);
+
+				createGraph("txs", ["txs"], [summary.txs], [blue]);
+
+				createGraph("utxo_increase", ["utxo_increase"], [summary.utxo_increase], [blue]);
+
 				
 
 
@@ -287,6 +300,8 @@ block endOfBody
 
 			summary.maxfeerate = [];
 
+			summary.totalfee = [];
+
 			summary.minfee = [];
 			summary.maxfee = [];
 
@@ -308,12 +323,20 @@ block endOfBody
 
 			summary.subsidy = [];
 
+			summary.mediantime = [];
+
+			summary.txs = [];
+
+			summary.utxo_increase = [];
+
 			for (var i = results.length - 1; i >= 0; i--) {
 				summary.avgfeerate.push({x:results[i].height, y:results[i].avgfeerate});
 				summary.medianfeerate.push({x:results[i].height, y:results[i].feerate_percentiles[2]});
 				summary.minfeerate.push({x:results[i].height, y:results[i].minfeerate});
 				
 				summary.maxfeerate.push({x:results[i].height, y:results[i].maxfeerate});
+
+				summary.totalfee.push({x:results[i].height, y:new Decimal(results[i].totalfee).dividedBy(100000000)});
 				
 				summary.minfee.push({x:results[i].height, y:results[i].minfee});
 				summary.maxfee.push({x:results[i].height, y:results[i].maxfee});
@@ -335,11 +358,18 @@ block endOfBody
 				summary.swtxs.push({x:results[i].height, y:results[i].swtxs});
 
 				summary.subsidy.push({x:results[i].height, y:results[i].subsidy});
+
+				summary.mediantime.push({x:results[i].height, y:results[i].mediantime});
+
+				summary.txs.push({x:results[i].height, y:results[i].txs});
+
+				summary.utxo_increase.push({x:results[i].height, y:results[i].utxo_increase});
 			}
 
 			return summary;
 		}
 
+		var graphsById = {};
 		function createGraph(chartid, names, datas, colors) {
 			var datasets = [];
 			var yaxes = [];
@@ -350,47 +380,54 @@ block endOfBody
 					data: datas[i],
 					borderWidth: 2,
 					borderColor: colors[i],
-					backgroundColor: 'rgba(0, 0, 0, 0)'
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 				});
 
 				yaxes.push({
 					scaleLabel: {
-						display: true,
-						labelString: names[i]
+						display: false,
+						//labelString: names[i]
 					}
 				});
 			}
 
-			var ctx = document.getElementById(chartid).getContext('2d');
-			var myChart = new Chart(ctx, {
-				type: 'line',
-				data: {
-					datasets: datasets
-				},
-				options: {
-					animation:{
-						duration:0
+			// update data in graph if we already created, otherwise create anew
+			if (graphsById[chartid]) {
+				graph = graphsById[chartid];
+				graph.data = { datasets: datasets };
+				graph.update();
+
+			} else {
+				var ctx = document.getElementById(chartid).getContext('2d');
+				var graph = new Chart(ctx, {
+					type: 'line',
+					data: {
+						datasets: datasets
 					},
-					title: {
-						display: true,
-						text: chartid
-					},
-					legend: {
-						display: true
-					},
-					scales: {
-						xAxes: [{
-							type: 'linear',
-							position: 'bottom',
-							scaleLabel: {
-								display: true,
-								labelString: 'Block'
-							},
-						}],
-						//yAxes: yaxes
+					options: {
+						// disable all animations
+						animation: { duration: 0 },
+						hover: { animationDuration: 0 },
+						responsiveAnimationDuration: 0,
+
+						legend: {
+							display: (datasets.length > 1)
+						},
+						scales: {
+							xAxes: [{
+								type: 'linear',
+								position: 'bottom',
+								scaleLabel: {
+									display: true,
+									labelString: 'Block'
+								},
+							}],
+						}
 					}
-				}
-			});
+				});
+
+				graphsById[chartid] = graph;
+			}
 		}
 
 	if (rpcApiUnsupportedError == null)

views/browser.pug

@@ -10,98 +10,99 @@ block headContent
 		}
 
 block content
-	h1.h3 RPC Browser
+	h1.h3.mb-0 RPC Browser
 	hr
 
 	if (gethelp)
 		div.row
-			div(class="col-md-9")
+			div.col-md-9
 				if (methodhelp)
-					div.row
-						div.col
-							h4(style="display: inline-block;")
-								span Command: 
-								span.font-weight-light.text-monospace #{method}
-						div.col
-							a(href=("https://bitcoin.org/en/developer-reference#" + method), class="btn btn-primary float-md-right") See developer docs »
-								
-					
-					hr
-
-					ul.nav.nav-tabs.mb-3
-						li.nav-item
-							a.nav-link.active(data-toggle="tab", href="#tab-execute", role="tab") Execute
-						li.nav-item
-							a.nav-link(data-toggle="tab", href="#tab-help-content", role="tab") Help Content
-
-						if (methodhelp.args && methodhelp.args.length > 0)
-							li.nav-item
-								a(data-toggle="tab", href="#tab-parsed-args", class="nav-link", role="tab") Arguments Details
-
-					div.tab-content
-						div(id="tab-execute", class="tab-pane active pb-3", role="tabpanel")
-							if (methodResult)
-								div(class="mt-4")
-									h5(class="mt-3") Result
-
-									pre(style="border: solid 1px #ccc;")
-										code(class="json bg-light", data-lang="json") #{JSON.stringify(methodResult, null, 4)}
-
-								hr
-
-							form(method="get")
-								input(type="hidden", name="_csrf", value=csrfToken)
-								input(type="hidden", name="method", value=method)
-
-								div(class="h5 mb-3") Arguments
-
-								if (false)
-									pre
-										code.json #{JSON.stringify(argValues, null, 4)}
-								
-								div(class="ml-3")
-									each argX, index in methodhelp.args
-										div(class="form-group")
-											label(for=("arg_" + argX.name))
-												strong #{argX.name}
-												span  (#{argX.properties.join(", ")})
-												if (argX.description)
-													span  - #{argX.description}
-												if (false && argX.detailsLines && argX.detailsLines.length > 0)
-													- var detailsLines = "";
-													each detailsLine in argX.detailsLines
-														- detailsLines = (detailsLines + "<br/>" + detailsLine);
-													i(class="fas fa-info-circle", data-toggle="tooltip", title=detailsLines)
-														
-
-
-											- var valX = false;
-											if (argValues != null)
-												if (argValues[index] != null)
-													if (("" + argValues[index]) != "NaN")
-														- valX = JSON.stringify(argValues[index]);
-														if (valX.substring(0, 1) == "\"")
-															- valX = valX.substring(1);
-														if (valX.substring(valX.length - 1, valX.length) == "\"")
-															- valX = valX.substring(0, valX.length - 1);
-
-											input(id=("arg_" + argX.name), type="text", name=("args[" + index + "]"), placeholder=argX.name, class="form-control", value=(valX ? valX : ""))
-
-									if (!methodhelp.args || methodhelp.args.length == 0)
-										span.text-muted None
-
-								hr
-
-								input(type="submit", name="execute", value="Execute", class="btn btn-primary btn-block")
-
-						div(id="tab-help-content", class="tab-pane", role="tabpanel")
-							pre
-								code(data-lang="txt", class="json bg-light") #{methodhelp.string}
-
-						if (methodhelp.args && methodhelp.args.length > 0)
-							div(id="tab-parsed-args", class="tab-pane", role="tabpanel")
-								pre
-									code(data-lang="json", class="json bg-light") #{JSON.stringify(methodhelp.args, null, 4)}
+					div.card.shadow-sm.mb-3
+						div.card-body
+							div.clearfix
+								div.float-left
+									h3.h6.mb-0
+										span.font-weight-bold #{method}
+										span  Command
+
+								div.float-right
+									a(href=("https://bitcoin.org/en/developer-reference#" + method)) Docs for #{method} &raquo;
+							hr
+
+							ul.nav.nav-tabs.mb-3
+								li.nav-item
+									a.nav-link.active(data-toggle="tab", href="#tab-execute", role="tab") Execute
+								li.nav-item
+									a.nav-link(data-toggle="tab", href="#tab-help-content", role="tab") Help Content
+
+								if (methodhelp.args && methodhelp.args.length > 0)
+									li.nav-item
+										a.nav-link(data-toggle="tab", href="#tab-parsed-args", role="tab") Arguments Details
+
+							div.tab-content
+								div.tab-pane.active(id="tab-execute", role="tabpanel")
+									if (methodResult)
+										div.mt-4
+											h3.h6.mt-3.mb-0 Result
+
+											pre.border
+												code.json.bg-light(data-lang="json") #{JSON.stringify(methodResult, null, 4)}
+
+										hr
+
+									form(method="get")
+										input(type="hidden", name="_csrf", value=csrfToken)
+										input(type="hidden", name="method", value=method)
+
+										div.h6.mb-3 Arguments
+
+										if (false)
+											pre
+												code.json #{JSON.stringify(argValues, null, 4)}
+										
+										div.ml-3
+											each argX, index in methodhelp.args
+												div.form-group
+													label(for=("arg_" + argX.name))
+														strong #{argX.name}
+														span  (#{argX.properties.join(", ")})
+														if (argX.description)
+															span  - #{argX.description}
+														if (false && argX.detailsLines && argX.detailsLines.length > 0)
+															- var detailsLines = "";
+															each detailsLine in argX.detailsLines
+																- detailsLines = (detailsLines + "<br/>" + detailsLine);
+															i.fas.fa-info-circle(data-toggle="tooltip", title=detailsLines)
+																
+
+
+													- var valX = false;
+													if (argValues != null)
+														if (argValues[index] != null)
+															if (("" + argValues[index]) != "NaN")
+																- valX = JSON.stringify(argValues[index]);
+																if (valX.substring(0, 1) == "\"")
+																	- valX = valX.substring(1);
+																if (valX.substring(valX.length - 1, valX.length) == "\"")
+																	- valX = valX.substring(0, valX.length - 1);
+
+													input.form-control(id=("arg_" + argX.name), type="text", name=("args[" + index + "]"), placeholder=argX.name, value=(valX ? valX : ""))
+
+											if (!methodhelp.args || methodhelp.args.length == 0)
+												span.text-muted None
+
+										hr
+
+										input.btn.btn-primary.px-3(type="submit", name="execute", value="Execute")
+
+								div.tab-pane(id="tab-help-content", role="tabpanel")
+									pre.border
+										code.json.bg-light(data-lang="txt") #{methodhelp.string}
+
+								if (methodhelp.args && methodhelp.args.length > 0)
+									div.tab-pane(id="tab-parsed-args", role="tabpanel")
+										pre.border
+											code.json.bg-light(data-lang="json") #{JSON.stringify(methodhelp.args, null, 4)}
 
 					
 							
@@ -110,15 +111,16 @@ block content
 					:markdown-it
 						Browse RPC commands from the list. The list is built from the results of the `help` command and organized into sections accordingly.
 
-			div(class="col-md-3")
+			div.col-md-3
 				each section, sectionIndex in gethelp
-					h4 #{section.name}
-						small  (#{section.methods.length})
-					hr
-					
-					div(class="mb-4")
-						ol(style="padding-left: 30px;")
-							each methodX, methodIndex in section.methods
-								li
-									a(href=("/rpc-browser?method=" + methodX.name), style=(methodX.name == method ? "font-weight: bold; font-style: italic;" : false), class="text-monospace") #{methodX.name}
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h4.h6.mb-0 #{section.name}
+								small  (#{section.methods.length})
+							hr
+							
+							ol(style="padding-left: 30px;")
+								each methodX, methodIndex in section.methods
+									li
+										a.text-monospace(href=("/rpc-browser?method=" + methodX.name), style=(methodX.name == method ? "font-weight: bold; font-style: italic;" : false)) #{methodX.name}
 

views/includes/line-graph.pug

@@ -18,10 +18,10 @@ script.
 		labels: [#{graphData.labels}],
 		data: {
 			datasets: [{
-				borderColor: '#36a2eb',
-				borderWidth: 1,
-				backgroundColor: '#84CBFA',
-				data: #{graphData.dataVar}
+				borderColor: '#007bff',
+				borderWidth: 2,
+				backgroundColor: 'rgba(0,0,0,0)',
+				data: #{graphData.dataVar},
 			}]
 		},
 		options: {
@@ -29,7 +29,7 @@ script.
 				duration:0
 			},
 			title: {
-				display: true,
+				display: false,
 				text: '#{graphData.title}'
 			},
 			legend: {

views/index.pug

@@ -165,6 +165,8 @@ block content
 
 
 								div.col-lg-6
+									h4.h6.text-center Tx Rate, 24hr
+									
 									script var txRateDataDay = [];
 									each item, index in txStats.txCountStats.txRates
 										script txRateDataDay.push({x:#{item.x}, y:#{item.y}});

views/mining-summary.pug

@@ -9,7 +9,7 @@ block content
 
 	div.card.shadow-sm.mb-3
 		div.card-body
-			h3.h6.mb-0 Selected Blocks
+			h3.h6.mb-0 Block Range
 			hr
 
 			div.clearfix
@@ -34,9 +34,9 @@ block content
 							button.btn.btn-outline-primary.dropdown-toggle(type="button", id="preconfigured-dropdown", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false") Selections
 							div.dropdown-menu(aria-labelledby="preconfigured-dropdown")
 								a.dropdown-item(href="javascript:void(0)", data-blocks="0-199") First 200 Blocks
-								a.dropdown-item(href="javascript:void(0)", data-blocks="209900-210100") First Halving
-								a.dropdown-item(href="javascript:void(0)", data-blocks="419900-420100") Second Halving
-								a.dropdown-item(href="javascript:void(0)", data-blocks="481724-481924") SegWit Activation Window
+								a.dropdown-item(href="javascript:void(0)", data-blocks="209900-210100") First Halving ±100
+								a.dropdown-item(href="javascript:void(0)", data-blocks="419900-420100") Second Halving ±100
+								a.dropdown-item(href="javascript:void(0)", data-blocks="481724-481924") SegWit Activation ±100
 
 				div.float-left
 					div(id="time-range-buttons")

views/tx-stats.pug

@@ -17,70 +17,110 @@ block content
 
 		if (true)
 			div.row
-				div(class="col-lg-6")
-					script var txCountDataDay = [];
-					each item, index in txStatsDay.txCounts
-						script txCountDataDay.push({x:#{item.x}, y:#{item.y}});
+				div.col-lg-6
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h3.h6.mb-0 Transactions, 24hr
+							hr
 
-					- var graphData = {id:"graphDay", dataVar:"txCountDataDay", labels:txStatsDay.txLabels, title:"Transactions, 24hr", xaxisTitle:"Block", xaxisStep:5, yaxisTitle:"Tx Count"};
-					include ./includes/line-graph.pug
+							script var txCountDataDay = [];
+							each item, index in txStatsDay.txCounts
+								script txCountDataDay.push({x:#{item.x}, y:#{item.y}});
 
-				div(class="col-lg-6")
-					script var txCountDataWeek = [];
-					each item, index in txStatsWeek.txCounts
-						script txCountDataWeek.push({x:#{item.x}, y:#{item.y}});
+							- var graphData = {id:"graphDay", dataVar:"txCountDataDay", labels:txStatsDay.txLabels, title:"Transactions, 24hr", xaxisTitle:"Block", xaxisStep:5, yaxisTitle:"Tx Count"};
+							include ./includes/line-graph.pug
 
-					- var graphData = {id:"graphWeek", dataVar:"txCountDataWeek", labels:txStatsWeek.txLabels, title:"Transactions, 7day", xaxisTitle:"Block", xaxisStep:100, yaxisTitle:"Tx Count"};
-					include ./includes/line-graph.pug
+				div.col-lg-6
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h3.h6.mb-0 Transactions, 7day
+							hr
 
-				div(class="col-lg-6")
-					script var txCountDataMonth = [];
-					each item, index in txStatsMonth.txCounts
-						script txCountDataMonth.push({x:#{item.x}, y:#{item.y}});
+							script var txCountDataWeek = [];
+							each item, index in txStatsWeek.txCounts
+								script txCountDataWeek.push({x:#{item.x}, y:#{item.y}});
 
-					- var graphData = {id:"graphMonth", dataVar:"txCountDataMonth", labels:txStatsMonth.txLabels, title:"Transactions, 30day", xaxisTitle:"Block", xaxisStep:500, yaxisTitle:"Tx Count"};
-					include ./includes/line-graph.pug
+							- var graphData = {id:"graphWeek", dataVar:"txCountDataWeek", labels:txStatsWeek.txLabels, title:"Transactions, 7day", xaxisTitle:"Block", xaxisStep:100, yaxisTitle:"Tx Count"};
+							include ./includes/line-graph.pug
 
-				div(class="col-lg-6")
-					script var txCountDataAlltime = [];
-					each item, index in txStats.txCounts
-						script txCountDataAlltime.push({x:#{item.x}, y:#{item.y}});
+				div.col-lg-6
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h3.h6.mb-0 Transactions, 30day
+							hr
 
-					- var graphData = {id:"graphAlltime", dataVar:"txCountDataAlltime", labels:txStatsMonth.txLabels, title:"Transactions, All time", xaxisTitle:"Block", xaxisStep:500, yaxisTitle:"Tx Count"};
-					include ./includes/line-graph.pug
+							script var txCountDataMonth = [];
+							each item, index in txStatsMonth.txCounts
+								script txCountDataMonth.push({x:#{item.x}, y:#{item.y}});
 
+							- var graphData = {id:"graphMonth", dataVar:"txCountDataMonth", labels:txStatsMonth.txLabels, title:"Transactions, 30day", xaxisTitle:"Block", xaxisStep:500, yaxisTitle:"Tx Count"};
+							include ./includes/line-graph.pug
 
-			div.row
-				div(class="col-lg-6")
-					script var txRateDataDay = [];
-					each item, index in txStatsDay.txRates
-						script txRateDataDay.push({x:#{item.x}, y:#{item.y}});
-
-					- var graphData = {id:"graphRateDay", dataVar:"txRateDataDay", labels:txStatsDay.txLabels, title:"Tx Rate, 24hr", xaxisTitle:"Block", xaxisStep:5, yaxisTitle:"Tx Per Sec"};
-					include ./includes/line-graph.pug
-
-				div(class="col-lg-6")
-					script var txRateDataWeek = [];
-					each item, index in txStatsWeek.txRates
-						script txRateDataWeek.push({x:#{item.x}, y:#{item.y}});
+				div.col-lg-6
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h3.h6.mb-0 Transactions, All time
+							hr
 
-					- var graphData = {id:"graphRateWeek", dataVar:"txRateDataWeek", labels:txStatsWeek.txLabels, title:"Tx Rate, 7day", xaxisTitle:"Block", xaxisStep:100, yaxisTitle:"Tx Per Sec"};
-					include ./includes/line-graph.pug
+							script var txCountDataAlltime = [];
+							each item, index in txStats.txCounts
+								script txCountDataAlltime.push({x:#{item.x}, y:#{item.y}});
 
-				div(class="col-lg-6")
-					script var txRateDataMonth = [];
-					each item, index in txStatsMonth.txRates
-						script txRateDataMonth.push({x:#{item.x}, y:#{item.y}});
+							- var graphData = {id:"graphAlltime", dataVar:"txCountDataAlltime", labels:txStatsMonth.txLabels, title:"Transactions, All time", xaxisTitle:"Block", xaxisStep:500, yaxisTitle:"Tx Count"};
+							include ./includes/line-graph.pug
 
-					- var graphData = {id:"graphRateMonth", dataVar:"txRateDataMonth", labels:txStatsMonth.txLabels, title:"Tx Rate, 30day", xaxisTitle:"Block", xaxisStep:500, yaxisTitle:"Tx Per Sec"};
-					include ./includes/line-graph.pug
 
-				div(class="col-lg-6")
-					script var txRateDataAlltime = [];
-					each item, index in txStats.txRates
-						script txRateDataAlltime.push({x:#{item.x}, y:#{item.y}});
-
-					- var graphData = {id:"graphRateAlltime", dataVar:"txRateDataAlltime", labels:txStatsMonth.txLabels, title:"Tx Rate, All time", xaxisTitle:"Block", xaxisStep:500, yaxisTitle:"Tx Per Sec"};
-					include ./includes/line-graph.pug
+			div.row
+				div.col-lg-6
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h3.h6.mb-0 Tx Rate, 24hr
+							hr
+
+							script var txRateDataDay = [];
+							each item, index in txStatsDay.txRates
+								script txRateDataDay.push({x:#{item.x}, y:#{item.y}});
+
+							- var graphData = {id:"graphRateDay", dataVar:"txRateDataDay", labels:txStatsDay.txLabels, title:"Tx Rate, 24hr", xaxisTitle:"Block", xaxisStep:5, yaxisTitle:"Tx Per Sec"};
+							include ./includes/line-graph.pug
+
+				div.col-lg-6
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h3.h6.mb-0 Tx Rate, 7day
+							hr
+
+							script var txRateDataWeek = [];
+							each item, index in txStatsWeek.txRates
+								script txRateDataWeek.push({x:#{item.x}, y:#{item.y}});
+
+							- var graphData = {id:"graphRateWeek", dataVar:"txRateDataWeek", labels:txStatsWeek.txLabels, title:"Tx Rate, 7day", xaxisTitle:"Block", xaxisStep:100, yaxisTitle:"Tx Per Sec"};
+							include ./includes/line-graph.pug
+
+				div.col-lg-6
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h3.h6.mb-0 Tx Rate, 30day
+							hr
+
+							script var txRateDataMonth = [];
+							each item, index in txStatsMonth.txRates
+								script txRateDataMonth.push({x:#{item.x}, y:#{item.y}});
+
+							- var graphData = {id:"graphRateMonth", dataVar:"txRateDataMonth", labels:txStatsMonth.txLabels, title:"Tx Rate, 30day", xaxisTitle:"Block", xaxisStep:500, yaxisTitle:"Tx Per Sec"};
+							include ./includes/line-graph.pug
+
+				div.col-lg-6
+					div.card.shadow-sm.mb-3
+						div.card-body
+							h3.h6.mb-0 Tx Rate, All time
+							hr
+								
+							script var txRateDataAlltime = [];
+							each item, index in txStats.txRates
+								script txRateDataAlltime.push({x:#{item.x}, y:#{item.y}});
+
+							- var graphData = {id:"graphRateAlltime", dataVar:"txRateDataAlltime", labels:txStatsMonth.txLabels, title:"Tx Rate, All time", xaxisTitle:"Block", xaxisStep:500, yaxisTitle:"Tx Per Sec"};
+							include ./includes/line-graph.pug