Dan Janosik
7 years ago
3 changed files with 211 additions and 1 deletions
@ -0,0 +1,151 @@ |
|||
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 |
|||
} |
|||
}] |
|||
} |
|||
} |
|||
}); |
Loading…
Reference in new issue