<!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>