extends layout

block headContent
	title Transaction Stats
	
block content
	h1(class="h3") Transaction Stats
	hr

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

	if (true)
		if (false)
			#{JSON.stringify(txStats.txCounts.length)}

		if (true)
			canvas(id="graph1", class="mb-4")

			canvas(id="graph2", class="mb-4")

			script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js")

			script var txCountData = [];
			each item, index in txStats.txCounts
				script txCountData.push({x:#{item.x}, y:#{item.y}});

			script var txRateData = [];
			each item, index in txStats.txRates
				script txRateData.push({x:#{item.x}, y:#{item.y}});
				
			script.
				var ctx1 = document.getElementById("graph1").getContext('2d');
				var graph1 = new Chart(ctx1, {
					type: 'line',
					labels: [#{txStats.txLabels}],
					data: {
						datasets: [{
							borderColor: '#36a2eb',
							backgroundColor: '#84CBFA',
							data: txCountData
						}]
					},
					options: {
						title: {
							display: true,
							text: 'Cumulative Transactions'
						},
						legend: {
							display: false
						},
						scales: {
							xAxes: [{
								type: 'linear',
								position: 'bottom',
								scaleLabel: {
									display: true,
									labelString: 'Block'
								},
								ticks: {
									min: 0,
									stepSize: 25000,
									callback: function(value, index, values) {
										if (value > 1000000) {
											return (value / 1000000).toLocaleString() + "M";

										} else if (value > 1000) {
											return (value / 1000).toLocaleString() + "k";

										} else {
											return value;
										}
									}
								}
							}],
							yAxes: [{
								scaleLabel: {
									display: true,
									labelString: 'Tx Count'
								},
								ticks: {
									beginAtZero:true,
									min: 0,
									callback: function(value, index, values) {
										return (value / 1000000).toLocaleString() + "M";
									}
								}
							}]
						}
					}
				});



				var ctx2 = document.getElementById("graph2").getContext('2d');
				var graph2 = new Chart(ctx2, {
					type: 'line',
					labels: [#{txStats.txLabels}],
					data: {
						datasets: [{
							borderColor: '#36a2eb',
							backgroundColor: '#84CBFA',
							data: txRateData
						}]
					},
					options: {
						title: {
							display: true,
							text: 'Average Transactions Per Second'
						},
						legend: {
							display: false
						},
						scales: {
							xAxes: [{
								type: 'linear',
								position: 'bottom',
								scaleLabel: {
									display: true,
									labelString: 'Block'
								},
								ticks: {
									min: 0,
									stepSize: 25000,
									callback: function(value, index, values) {
										if (value > 1000000) {
											return (value / 1000000).toLocaleString() + "M";

										} else if (value > 1000) {
											return (value / 1000).toLocaleString() + "k";

										} else {
											return value;
										}
									}
								}
							}],
							yAxes: [{
								scaleLabel: {
									display: true,
									labelString: 'Tx Per Sec'
								},
								ticks: {
									beginAtZero:true,
									min: 0
								}
							}]
						}
					}
				});