Add toggle to sort entries in html generated report

In some cases, specially in the bar graph summary view when many
benchmarks are present, it can be useful to sort benchmarks based on
their results.  This commit adds a checkbox labeled `sorted` to the top
bar --where the plot chooser is-- that enables sorting the benchmarks by
order.

Note that sorting the benchmarks changes the color and checkmarks of the
traces.  It might be better to preserve the initial ones, but I was too
lazy to do so--I believe that we would need to manually asign colors and
markers instead of relying on plotly auto-asigning them.

Here is an example of the results:

    https://sinusoid.es/misc/nonius/sorting-example8.html

Author: arximboldi

tpl/report.css

@@ -74,6 +74,7 @@ body {
     display: block;
     padding: 0 3em 0 1.5em;
     margin: 0.3em;
+    height: 2em;
 
     transition: border-color 0.2s;
     border: 2px solid #aaa;
@@ -92,6 +93,18 @@ body {
     color: white;
 }
 
+div.is-sorted {
+    position: absolute;
+    top: 0em;
+    right: 1em;
+    line-height: 2.8em;
+}
+
+div.is-sorted input {
+    position: relative;
+    top: 3px;
+}
+
 #plot {
     position: absolute;
     min-width: 300px;

tpl/report.tpl.js

@@ -25,7 +25,8 @@
             },{% endfor %}
         ]
     };
-
+    var origOrder = data.runs[0].benchmarks.map(function (_, i) { return i; })
+    var sortOrder = computeSortedOrder();
     var plotdiv = document.getElementById("plot");
     window.addEventListener("resize", function() {
         Plotly.Plots.resize(plotdiv);
@@ -36,28 +37,65 @@
     chooser.addEventListener("blur", chooser.focus.bind(chooser));
     chooser.focus();
 
+    var isSortedBox = document.getElementById("is-sorted");
+    isSortedBox.addEventListener("change", choosePlot);
+
     var legendStyle = {
         font: { family: 'monospace' },
         borderwidth: 2,
         bordercolor: 'black'
     }
 
+    function zeroes(count) {
+        var arr = []
+        while (count --> 0) arr.push(0)
+        return arr
+    }
+
+    function computeSortedOrder() {
+        // We sort each run.  Then we compute the "points" of each
+        // benchmark as the sum of the positions of this benchmkark on
+        // each run.  This gives us a rough indication of which
+        // benchmark is best -- the lower the points, the better.
+        var runsOrder = data.runs.map(function (r) {
+            order = r.benchmarks.map(function (_, i) { return i; })
+            order.sort(function (a, b) {
+                return r.benchmarks[a].mean - r.benchmarks[b].mean
+            })
+            return order
+        })
+        var length = data.runs[0].benchmarks.length
+        var points = runsOrder.reduce(function (acc, r) {
+            r.forEach(function (elem, idx) {
+                acc[elem] += idx
+            })
+            return acc
+        }, zeroes(length))
+        var order = data.runs[0].benchmarks.map(function (_, i) { return i; })
+        order.sort(function (a, b) {
+            return points[a] - points[b]
+        })
+        return order
+    }
+
     function choosePlot() {
-        var plot = chooser.options[chooser.selectedIndex].value;
+        var plot = chooser.options[chooser.selectedIndex].value
+        var order = isSortedBox.checked ? sortOrder : origOrder
         if (plot == 'summary') {
             if (data.runs.length > 1) {
-                plotSummary();
+                plotSummary(order);
             } else {
-                plotSingleSummary();
+                plotSingleSummary(order);
             }
         } else {
-            plotSamples(plot);
+            plotSamples(plot, order);
         }
     }
 
-    function plotSamples(plot) {
+    function plotSamples(plot, order) {
         var run = data.runs[plot];
-        var traces = run.benchmarks.map(function (b, i) {
+        var traces = order.map(function (i) {
+            var b = run.benchmarks[i]
             return {
                 name: b.name,
                 type: 'scatter',
@@ -81,10 +119,10 @@
         Plotly.newPlot(plotdiv, traces, layout);
     }
 
-    function plotSummary() {
-        var traces = data.runs[0].benchmarks.map(function (b, i) {
+    function plotSummary(order) {
+        var traces = order.map(function (i) {
             return {
-                name: b.name,
+                name: data.runs[0].benchmarks[i].name,
                 type: 'scatter',
                 marker: { symbol: i },
                 x: data.runs.map(function (r) { return r.params[data.param]; }),
@@ -114,12 +152,13 @@
         Plotly.newPlot(plotdiv, traces, layout);
     }
 
-    function plotSingleSummary() {
-        var traces = data.runs[0].benchmarks.map(function (b, i) {
+    function plotSingleSummary(order) {
+        var traces = order.map(function (i) {
+            var b = data.runs[0].benchmarks[i]
             return {
                 type: 'bar',
                 name: b.name,
-                x: [ 0 ],
+                x: [ data.title ],
                 y: [ b.mean ],
                 error_y: {
                     type: 'data',