<!DOCTYPE html>
<!--
 * Copyright (c) 2012 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html>
<head>
  <title>Device Stats Monitor</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <style>
  body {
    font-family: sans-serif
  }
  </style>
</head>
<body>
<h2>Device Stats Monitor</h2>
<ul>
<li>Pass path to trace data via the <code>results</code> querystring param.
<li>Combine charts with the <code>combine</code> querystring param (e.g. <code>&combine=sectors_read,sectors_written</code>).
<li>Use <code>stacked=true</code> to stack combined charts instead of overlaying (default).
</ul>
</body>
<script>
google.load("visualization", "1", {packages:["corechart"]});

/**
 * @returns The querystring param value for |name| or an empty string.
 */
function getQuerystringParam(name) {
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if (results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

/**
 * @returns An array of keys in |obj| sorted by value.
 */
function sortedKeys(obj) {
  var keys = [];
  for (var key in obj) {
    keys.push(key);
  }
  keys.sort();
  return keys;
}

/**
 * Removes by value all params from array.
 */
Array.prototype.remove = function() {
  var what, a = arguments, l = a.length, ax;
  while (l && this.length) {
    what = a[--l];
    while ((ax = this.indexOf(what)) != -1) {
      this.splice(ax, 1);
    }
  }
  return this;
}

/**
 * Displays a new chart.
 *
 * @param {Number} hz Number of sample per second of the data.
 * @param {String} name Name to display on top of chart.
 * @param {Number[][]} values Array of value arrays to display.
 * @param {Boolean} stacked Whether to display values as stacked.
 */
function displayChart(hz, name, values, units, stacked) {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'ms');
  var names = name.split(',');
  for (var i = 0; i < names.length; i++) {
    data.addColumn('number', names[i]);
  }

  var rows = [];
  var interval = 1000.0 / hz;
  for (var i = 0; i < values[0].length; i++) {
    var row = [i*interval];
    for (var j = 0; j < values.length; j++) {
      row.push(values[j][i]);
    }
    rows.push(row);
  }
  data.addRows(rows);

  var options = {
    hAxis: {title: 'ms (' + hz + 'hz)'},
    isStacked: stacked,
    legend: {position: 'top'},
    vAxis: {title: units},
  };

  var elem = document.createElement('DIV');
  elem.style = 'width:100%;height:500px';
  document.body.appendChild(elem);
  var chart = new google.visualization.AreaChart(elem);
  chart.draw(data, options);
}

/**
 * Displays all charts.
 *
 * Invoked by the results script. JSONP is used to avoid security
 * restrictions on XHRs for file:// URLs.
 */
function display(hz, results, units) {
  var combine = getQuerystringParam('combine');
  var keys = sortedKeys(results);
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    var name = key;
    var values = [results[key]];
    var unit = units[key];
    if (combine.indexOf(key) >= 0) {
      i--;
      name = combine;
      values = [];
      var combined_keys = combine.split(',');
      for (var j = 0; j < combined_keys.length; j++) {
        values.push(results[combined_keys[j]]);
        keys.remove(combined_keys[j]);
      }
    }
    displayChart(hz, name, values, unit, !!getQuerystringParam('stacked'));
  }
}

var resultsPath = getQuerystringParam('results');
if (resultsPath)
  document.write("<script src='" + resultsPath + "'></"+"script>");
else
  document.write("Please specify results querystring param.");
</script>
</html>