mempool-summary.pug

extends layout

block headContent
	title Mempool Summary
	
block content
	h1(class="h3") Mempool Summary
	hr

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

	if (true)
		div(class="card mb-3 shadow-sm")
			div(class="card-header")
				span(class="h6") Summary
			div(class="card-body")
				table(class="table details-table mb-0")
					tr
						td(class="properties-header") Transaction Count
						td #{getmempoolinfo.size.toLocaleString()}

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

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

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

						tr
							td(class="properties-header") Avg Fee per 
								span.border-dotted(title="Virtual bytes", data-toggle="tooltip") vByte
							td(class="monospace") #{utils.formatCurrencyAmountInSmallestUnits(mempoolstats["averageFeePerByte"], 2)}/vB

		if (getmempoolinfo.size > 0)
			h2(class="h5") 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(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")
				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 #{mempoolstats["satoshiPerByteBucketLabels"][index]}
								td(class="text-right monospace") #{item["count"].toLocaleString()}
								td(class="text-right monospace")
									- 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(class="text-right monospace")
										- var currencyValue = avgFee;
										include ./includes/value-display.pug
													
									td(class="text-right monospace") #{utils.formatCurrencyAmountInSmallestUnits(avgFeeRate, 2)}/B
								else
									td(class="text-right monospace") -
									td(class="text-right monospace") -


			h2(class="h5") Transactions by size
			hr

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

			h2(class="h5") Transactions by age
			hr

			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} sec","#{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
								}
							}]
						}
					}
				});