Initial support for history over device scenes

This patch will generate html file which contains per-scene graph ofg all device
statistics over all period of time. There are still some possible tweaks to look
and feel of the graphs, but it's good enough for now.

benchmark/website/source/utils.js

@@ -43,21 +43,42 @@ function secondsToHumanReadable(seconds) {
   return result;
 }
 
-function buildChart(ctx, bare_data) {
-  var data = bare_data;
-  var max_value = 0;
+function setDatasetColor(data, is_bar) {
   var index = 0;
   for (dataset of data.datasets) {
     var color = Chart.helpers.color(generateBarColor(index));
     dataset.backgroundColor = color.alpha(0.5).rgbString();
     dataset.borderColor = color.alpha(1.0).rgbString();
-    dataset.borderWidth = 1;
-    for (value of dataset.data) {
-      max_value = Math.max(max_value, value);
+    if (is_bar) {
+      dataset.borderWidth = 1;
+    } else {
+      dataset.fill = false;
     }
     index++;
   }
-  window.myBar = new Chart(
+}
+
+function findDatasetMaxValue(data) {
+  var max_value = 0;
+  for (dataset of data.datasets) {
+    for (value of dataset.data) {
+      if (value === null) {
+        continue;
+      }
+      if (typeof value !== "number") {
+          value = value.y;
+      }
+      max_value = Math.max(max_value, value);
+    }
+  }
+  return max_value;
+}
+
+function buildChart(ctx, bare_data) {
+  var data = bare_data;
+  var max_value = findDatasetMaxValue(data);
+  setDatasetColor(data, true);
+  var my_chart = new Chart(
       ctx,
       {
         type: 'bar',
@@ -99,6 +120,47 @@ function buildChart(ctx, bare_data) {
       });
 }
 
+function historyChartGetSceneStats(bare_data, scene_name) {
+  var datasets = [];
+  for (dataset of bare_data.datasets) {
+    if (dataset.scene_name != scene_name) {
+      continue;
+    }
+    datasets.push({"data": dataset.data,
+                   "label": dataset.device_name});
+  }
+  return {"datasets": datasets};
+}
+
+function buildHistoryChart(ctx, bare_data, scene_name) {
+  var data = historyChartGetSceneStats(bare_data, scene_name);
+  var max_value = findDatasetMaxValue(data);
+  setDatasetColor(data, false);
+  new Chart(
+      ctx,
+      {
+        type: 'line',
+        data: data,
+        options: { responsive: true,
+                   legend: {position: 'top'},
+                   title: {display: true,
+                           text: scene_name + ' benchmark results'},
+                   scales: {xAxes:  [{type: "time",
+                                      time: {format: 'DD/MM/YYYY HH:mm',
+                                             tooltipFormat: 'll HH:mm'},
+                                      scaleLabel: {display: true,
+                                                   labelString: 'Date'}},],
+                            yAxes: [{display: true,
+                                     scaleLabel: {display: true,
+                                                  labelString: 'Render time (sec)'},
+                                     ticks: {min: 0,
+                                             max: Math.ceil((max_value + 99) / 100) * 100}}]},
+
+                            elements: { line: { tension: 0.000001 } },
+                }
+      });
+}
+
 function buildSpreadsheet(ctx, data) {
   // Generate columns for header.
   var columns = [{label: "", name: "", width: 300}];