94 lines
3.4 KiB
JavaScript
94 lines
3.4 KiB
JavaScript
// Generate unique looking color for a given bar index.
|
|
function generateBarColor(index) {
|
|
var builtin_colors = [[255, 99, 132],
|
|
[255, 159, 64],
|
|
[255, 205, 86],
|
|
[75, 192, 192],
|
|
[54, 162, 235],
|
|
[153, 102, 255],
|
|
[201, 203, 207],
|
|
[48, 103, 204],
|
|
[220, 56, 18],
|
|
[254, 155, 0],
|
|
[15, 147, 25]];
|
|
var color = [0, 0, 0];
|
|
if (index >= 0 && index < builtin_colors.length) {
|
|
color = builtin_colors[index];
|
|
}
|
|
return "rgb(" + color[0].toString() + ", " +
|
|
color[1].toString() + ", " +
|
|
color[2].toString() + ")";
|
|
}
|
|
|
|
function padValue(value, size) {
|
|
var s = String(value);
|
|
while (s.length < (size || 2)) {
|
|
s = "0" + s;
|
|
}
|
|
return s;
|
|
}
|
|
|
|
function secondsToHumanReadable(seconds) {
|
|
var h = Math.floor((seconds %= 86400) / 3600);
|
|
var m = Math.floor((seconds %= 3600) / 60);
|
|
var s = Math.floor(seconds % 60);
|
|
var msec = Math.floor((seconds % 60) % 1 * 100);
|
|
var result = "";
|
|
if (h != 0) {
|
|
result += h + ":";
|
|
}
|
|
result += padValue(m, 2) + ":";
|
|
result += padValue(s, 2) + ".";
|
|
result += padValue(msec, 2);
|
|
return result;
|
|
}
|
|
|
|
function buildChart(ctx, bare_data) {
|
|
var data = bare_data;
|
|
var max_value = 0;
|
|
var index = 0;
|
|
for (dataset of data.datasets) {
|
|
var color = Chart.helpers.color(generateBarColor(index));
|
|
dataset.backgroundColor = color.alpha(0.5).rgbString();
|
|
dataset.borderColor = color.alpha(1.0).rgbString();
|
|
dataset.borderWidth = 1;
|
|
for (value of dataset.data) {
|
|
max_value = Math.max(max_value, value);
|
|
}
|
|
index++;
|
|
}
|
|
window.myBar = new Chart(
|
|
ctx,
|
|
{
|
|
type: 'bar',
|
|
data: data,
|
|
options: { responsive: true,
|
|
legend: {position: 'top'},
|
|
title: {display: true,
|
|
text: 'Benchmark Results'},
|
|
scales: {xAxes: [{display: true,
|
|
scaleLabel: {display: true,
|
|
labelString: 'Scene'}}],
|
|
yAxes: [{display: true,
|
|
scaleLabel: {display: true,
|
|
labelString: 'Render time (sec)'},
|
|
ticks: {min: 0,
|
|
max: Math.ceil((max_value + 99) / 100) * 100}}]},
|
|
tooltips: {// mode: 'index',
|
|
callbacks: {
|
|
footer: function(tooltipItems, data) {
|
|
var human_time = "";
|
|
tooltipItems.forEach(
|
|
function(tooltipItem) {
|
|
var render_time = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
|
|
human_time = secondsToHumanReadable(render_time);
|
|
}
|
|
);
|
|
return "Render Time: " + human_time;
|
|
},
|
|
},
|
|
footerFontStyle: 'normal'},
|
|
}
|
|
});
|
|
}
|