You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
3.2 KiB
151 lines
3.2 KiB
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
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|