btc-rpc-explorer/views/mempool-summary.pug

extends layout

block headContent
	title Mempool Summary
	
block content
	h1.h3 Mempool Summary
	hr

	if (false)
		pre
			code.json.bg-light #{JSON.stringify(mempoolstats, null, 4)}

	if (true)
		div.card.shadow-sm.mb-3
			div.card-body.px-2.px-md-3
				h3.h6 Summary
				hr

				table.table.details-table.mb-0
					tr
						td.properties-header Transaction Count
						td.text-monospace #{getmempoolinfo.size.toLocaleString()}

					tr
						- var mem1Data = utils.formatLargeNumber(getmempoolinfo.usage, 2);
						- var mem2Data = utils.formatLargeNumber(getmempoolinfo.bytes, 2);

						td.properties-header Memory Usage
						td.text-monospace
							span #{mem1Data[0]} #{mem1Data[1].abbreviation}B
							span.text-muted  (#{mem2Data[0]} v#{mem2Data[1].abbreviation}B)

					tr
						td.properties-header Total Fees
						td.text-monospace
							- var currencyValue = mempoolstats["totalFees"];
							include includes/value-display.pug
							
					if (getmempoolinfo.size > 0)
						tr
							td.properties-header Avg Fee
							td.text-monospace
								- var currencyValue = mempoolstats["averageFee"];
								include ./includes/value-display.pug

						tr
							td.properties-header Avg Fee per vB
							td.text-monospace
								- var feeRateData = utils.formatCurrencyAmountInSmallestUnits(mempoolstats["averageFeePerByte"], 2);
								span #{feeRateData.val} #{feeRateData.currencyUnit}/vB

		if (getmempoolinfo.size > 0)
			div.card.shadow-sm.mb-3
				div.card-body.px-2.px-md-3
					h3.h6 Transactions by fee rate
					hr

					if (false)
						#{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.mb-4(id="mempoolBarChart", height="100")

						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")
						table(class="table table-striped mb-4")
							thead
								tr
									th Fee Rate
									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"]
									tr
										td.text-monospace #{mempoolstats["satoshiPerByteBucketLabels"][index]}
										td.text-monospace.text-right #{item["count"].toLocaleString()}
										td.text-monospace.text-right
											- var currencyValue = item["totalFees"];
											include ./includes/value-display.pug

										if (item["totalBytes"] > 0)
											- var avgFee = item["totalFees"] / item["count"];
											- var avgFeeRate = item["totalFees"] / item["totalBytes"];

											td.text-monospace.text-right
												- var currencyValue = avgFee;
												include ./includes/value-display.pug
															
											td.text-monospace.text-right
												- var feeRateData = utils.formatCurrencyAmountInSmallestUnits(avgFeeRate, 2);
												span #{feeRateData.val} #{feeRateData.currencyUnit}/vB
										else
											td.text-monospace.text-right -
											td.text-monospace.text-right -

			div.card.shadow-sm.mb-3
				div.card-body.px-2.px-md-3
					h3.h6 Transactions by size
					hr

					canvas.mb-4(id="txSizesBarChart", height="100")

					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.shadow-sm.mb-3
				div.card-body.px-2.px-md-3
					h3.h6 Transactions by age
					hr

					canvas.mb-4(id="txAgesBarChart", height="100")

					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
										}
									}]
								}
							}
						});