<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<select id="graphs"></select>
<script>
function transformData(data, path) {
console.log(path);
var pathParts = path.split('!');
var name = pathParts[pathParts.length - 1];
var transformed = [];
for (const report of data.map(d => d.report)) {
var subData = findData(report, path);
transformed.push(subData.amount);
}
console.log(transformed);
return [{
label: 'Usage in MiB',
data: transformed,
fill: false,
}];
}
function findData(data, parent) {
parent = parent.split('!');
parent.reverse();
while (parent.length) {
var next = parent.pop();
console.log(next);
if ('children' in data) {
data = data.children;
}
data = data[next];
}
return data;
}
function makeOptions(data, initial) {
var sel = document.querySelector('#graphs');
sel.innerHTML = '';
// TODO: add support for labels that are not present in initial report.
var rootData = data[0].report;
console.log(Object.keys(rootData));
var remaining = Object.keys(rootData).map(k => [k, rootData[k], k]);
remaining.reverse();
while (remaining.length) {
var next = remaining.pop();
var children = Object.keys(next[1].children).map(k => [k, next[1].children[k], next[2] + '!' + k]);
children.reverse();
remaining.push.apply(remaining, children);
var opt = sel.appendChild(document.createElement('option'));
opt.innerText = '-'.repeat((next[2].match(/!/g) || []).length) + next[0];
opt.fullPath = next[2];
}
sel.onchange = function() {
var title = sel.value;
while (title[0] == '-') {
title = title.slice(1);
}
makeChart({
'labels': data.map(d => d.seconds + 's'),
'datasets': transformData(data, sel.selectedOptions[0].fullPath),
}, title);
};
sel.value = initial;
sel.onchange();
}
function makeChart(data, title) {
var canvas = document.querySelector('#myChart');
if (canvas) {
canvas.remove();
}
canvas = document.body.appendChild(document.createElement('canvas'));
canvas.id = 'myChart';
canvas.width = 800;
canvas.height = 600;
var ctx = canvas.getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: data['labels'],
datasets: data['datasets']
},
options: {
title: {
display: true,
text: title,
},
responsive: false,
animation: {
duration: 0
},
elements: {
line: {
tension: 0
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
var data = [/* json data */];
var initialGraph = "explicit";
makeOptions(data, initialGraph);
</script>