visualize.html 2.99 KB
Newer Older
Zixian Cai's avatar
Zixian Cai committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
{% extends 'base.html' %}
{% block body %}
    <div class="panel panel-info">
        <div class="panel-heading">Platform information</div>
        <div class="panel-body">
            <ul>
                <li>CPU: {{ result["cpu"] }}</li>
                <li>uname: {{ result["uname"] }}</li>
                <li>Hostname: {{ result["hostname"] }}</li>
            </ul>
        </div>
    </div>
    {% for ts in result["ts"] %}
        <div class="panel panel-primary">
            <div class="panel-heading">TaskSet {{ ts["name"] }}</div>
            <div class="panel-body">
                <ul>
                    <li>Iteration: {{ ts["iterations"] }}</li>
                    <li>Benchmark: {{ ts["benchmark"]["name"] }}
                        <code>{{ ts["benchmark"]["args"] }}</code>
                    </li>
                    <li>Callback: {{ ts["callback"]["name"] }}
                        <code>{{ ts["callback"]["param"] }}</code>
                    </li>
                </ul>
                <div id="plot_ts_{{ ts["name"] }}"></div>
            </div>
        </div>
        <script>
            (function () {
                var d3 = Plotly.d3;

                var WIDTH_IN_PERCENT_OF_PARENT = 100,
                    HEIGHT_IN_PERCENT_OF_PARENT = 100;

                var gd3 = d3.select('#plot_ts_{{ ts["name"] }}')
                    .style({
                        width: WIDTH_IN_PERCENT_OF_PARENT + '%',
                        'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

                        height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
                        'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
                    });

                var gd = gd3.node();
                var data = [];
                {% for metric in ts["metrics"] %}
                    var temp_x = [];
                    var temp_y = [];
                    var temp_yerr = [];

                    {% for task in ts["datapoints_grouped"] %}
                        temp_x.push("{{ task }}");
                        temp_y.push({{ ts["datapoints_grouped"][task][metric].mean }});
                        temp_yerr.push({{ ts["datapoints_grouped"][task][metric].std }});
                    {% endfor %}
                    var trace_{{ metric }} = {
                        x: temp_x,
                        y: temp_y,
                        name: '{{ metric }}',
                        error_y: {
                            type: 'data',
                            array: temp_yerr,
                            visible: true
                        },
                        type: 'bar'
                    };
                    data.push(trace_{{ metric }});
                {% endfor %}
                var layout = {barmode: 'group'};
                Plotly.newPlot('plot_ts_{{ ts["name"] }}', data, layout);
                window.onresize = function () {
                    Plotly.Plots.resize(gd);
                };
            })();
        </script>
    {% endfor %}
{% endblock %}