зеркало из https://github.com/mozilla/gecko-dev.git
113 строки
3.5 KiB
HTML
113 строки
3.5 KiB
HTML
<!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>
|