// Generate unique looking color for a given bar index.
function generateBarColor(index) {
  var builtin_colors = [[255, 99, 132],
                        [255, 159, 64],
                        [255, 205, 86],
                        [75, 192, 192],
                        [54, 162, 235],
                        [153, 102, 255],
                        [201, 203, 207],
                        [48, 103, 204],
                        [220, 56, 18],
                        [254, 155, 0],
                        [15, 147, 25]];
  var color = [0, 0, 0];
  if (index >= 0 && index < builtin_colors.length) {
    color = builtin_colors[index];
  }
  return "rgb(" + color[0].toString() + ", " +
                  color[1].toString() + ", " +
                  color[2].toString() + ")";
}

function padValue(value, size) {
  var s = String(value);
  while (s.length < (size || 2)) {
    s = "0" + s;
  }
  return s;
}

function secondsToHumanReadable(seconds) {
  var h = Math.floor((seconds %= 86400) / 3600);
  var m = Math.floor((seconds %= 3600) / 60);
  var s = Math.floor(seconds % 60);
  var msec = Math.floor((seconds % 60) % 1 * 100);
  var result = "";
  if  (h != 0) {
    result += h + ":";
  }
  result += padValue(m, 2) + ":";
  result += padValue(s, 2) + ".";
  result += padValue(msec, 2);
  return result;
}

function buildChart(ctx, bare_data) {
  var data = bare_data;
  var max_value = 0;
  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);
    }
    index++;
  }
  window.myBar = new Chart(
      ctx,
      {
        type: 'bar',
        data: data,
        options: { responsive: true,
                   legend: {position: 'top'},
                   title: {display: true,
                           text: 'Benchmark Results'},
                   scales: {xAxes: [{display: true,
                                     scaleLabel: {display: true,
                                                  labelString: 'Scene'}}],
                            yAxes: [{display: true,
                                     scaleLabel: {display: true,
                                                  labelString: 'Render time (sec)'},
                                     ticks: {min: 0,
                                             max: Math.ceil((max_value + 99) / 100) * 100}}]},
                   tooltips: {// mode: 'index',
                              callbacks: {
                                footer: function(tooltipItems, data) {
                                  var human_time = "";
                                  tooltipItems.forEach(
                                      function(tooltipItem) {
                                        var render_time = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                                        human_time = secondsToHumanReadable(render_time);
                                      }
                                  );
                                  return "Render Time: " + human_time;
                                  },
                                },
                              footerFontStyle: 'normal'},
                }
      });
}