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

extends layout

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

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

	if (true)
		table(class="table")
			tr
				th(class="table-active properties-header") Transaction Count
				td #{getmempoolinfo.size.toLocaleString()}
			tr
				th(class="table-active properties-header") Memory Usage
				td(class="monospace")
					span #{utils.formatBytes(getmempoolinfo.usage)}
					span(class="text-muted")  (virtual size: #{utils.formatBytes(getmempoolinfo.bytes)})
			tr
				th(class="table-active properties-header") Total Fees
				td(class="monospace")
					- var currencyValue = mempoolstats["totalFees"];
					include includes/value-display.pug
					
			if (getmempoolinfo.size > 0)
				tr
					th(class="table-active properties-header") Average Fee
					td(class="monospace") #{utils.formatCurrencyAmount(mempoolstats["averageFee"], currencyFormatType)}
						if (global.exchangeRate)
							span  
							span(data-toggle="tooltip", title=utils.formatExchangedCurrency(mempoolstats["averageFee"]))
								i(class="fas fa-exchange-alt")

				tr
					th(class="table-active properties-header") Average Fee per Byte
					td(class="monospace") #{utils.formatCurrencyAmountInSmallestUnits(mempoolstats["averageFeePerByte"])}/B

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

			table(class="table table-striped table-responsive-sm 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") #{utils.formatCurrencyAmount(item["totalFees"], currencyFormatType)}

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

								td(class="text-right monospace") #{utils.formatCurrencyAmount(avgFee, currencyFormatType)}
									if (global.exchangeRate)
										span  
										span(data-toggle="tooltip", title=utils.formatExchangedCurrency(avgFee))
											i(class="fas fa-exchange-alt")
												
								td(class="text-right monospace") #{utils.formatCurrencyAmountInSmallestUnits(avgFeeRate)}/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
								}
							}]
						}
					}
				});