[chromeos] Add an about:power UI.

chrome/browser/resources/chromeos/power.js

+// Copyright 2014 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.
+
+/**
+  * Plot a line graph of data versus time on a HTML canvas element.
+  *
+  * @param {DOMElement} canvas The canvas on which the line graph is drawn.
+  * @param {Array.Integer} tdata The time (in seconds) in the past when the
+  *     corresponding data in plots was sampled.

[Daniel Erat, 2014/01/03 16:40:47]

can you just store the timestamps in |plots| as well? why not just pass in
|power_supply_array| directly?

does the "in the past" here mean that these numbers are all negative relative to
the current time?

[Siva Chandra, 2014/01/03 23:34:59]

Do you mean like this:

  plots = {
    tdata, // Array of time stamps
    plot_data // Array of objects = { color, ydata // Array of values }
  };

The way it is currently, |plots| is equal to |plot_data| above.
Passing |power_supply_array| directly would tie this function to battery charge
info. I want to keep this function generic enough so that it will be used by
future metrics (which would also be sampled over time).
 
The values are not negative as the name has 'past' in it. So, it is N (+ve
number) seconds in the past.

[Daniel Erat, 2014/01/04 00:02:17]

no, i meant something more like:

lines = [
  {
    data: [
      [ <time as milliseconds since the epoch, e.g. Date.ToUTC()>, <y-value> ],
      [ <time>, <y-value> ],
      etc.
    ],
    color: "#456"
  },
  {
    data: [
      [ <time>, <y-value> ],
      [ <time>, <y-value> ]
    ],
    color: "#856"
  },
  etc.
]

several points:
- avoids the possibility of |tdata| and |plots| being different sizes
- not restricted to only graphing lines that were sampled at the same times
- can later display timestamps on the graphs if you choose to
- absolute timestamps also mean that you can display old data later without
needing to track what the timestamps were relative to

[Siva Chandra, 2014/01/06 22:36:57]

Discussion about this is present elsewhere.

+  * @param {Array.<Object>} plots An array of objects with fields 'data' and
+  *     'color'. The field 'data' is an array of samples to be plotted as a
+  *     line graph with 'color'.

[Daniel Erat, 2014/01/03 16:40:47]

document that this is ordered by ascending time

[Siva Chandra, 2014/01/03 23:34:59]

Done.

+  * @param {number} ymin A number representing the minimum of the values to

[Daniel Erat, 2014/01/03 16:40:47]

instead of passing in the min and max values, can this function just find them
from |plots|?

[Siva Chandra, 2014/01/03 23:34:59]

I agree. But the purpose here is to have the flexibility to show more range when
desired than to just show the min and max found in the data. For battery charge
for example, I think is better to show the range 0-100 than just what is in the
data.

[Daniel Erat, 2014/01/04 00:02:17]

sure, makes sense. can you update the comments to make it more clear that these
hold the bounds of the graph? "the minimum of the values" made me think that it
refers to the values that are being graphed. how about, "Minimum bound of the
y-axis" and "Maximum bound of the y-axis"?

[Siva Chandra, 2014/01/06 22:36:57]

Done.

+  *     to be shown on the y-axis.
+  * @param {number} ymax A number representing the maximum of the values to
+  *     to be shown on the y-axis.
+  * @param {integer} yprecision An integer value representing the number of
+  *     digits of precision the y-axis data should be printed with.
+  */
+function plotLineGraph(canvas, tdata, plots, ymin, ymax, yprecision) {
+  var indexFont = '12px Arial';
+  var indexHeight = 12;
+  var padding = 5;  // Pixels
+  var rectColor = '#888888';  //  A darker shade of grey

[Daniel Erat, 2014/01/03 16:40:47]

nit: '#888', '#ccc'. don't think the comments are needed either

[Siva Chandra, 2014/01/03 23:34:59]

Done.

+  var gridColor = '#CCCCCC'; //  A lighter shade of grey
+  var ctx = canvas.getContext('2d');
+  var size = tdata.length;
+
+  if (size < 2) {
+    ctx.clearRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);
+    ctx.font = indexFont;
+    ctx.fillText('Enough data not available yet.', 15, 15);

[Daniel Erat, 2014/01/03 16:40:47]

shouldn't this be a string resource?

also, "Not enough data available yet." is better

[Siva Chandra, 2014/01/03 23:34:59]

Done.

+    return;
+  }
+
+  function yDataToString(index) {

[Daniel Erat, 2014/01/04 00:02:17]

i don't understand the use of the word "index" in this method and some of the
following ones. it usually refers to e.g. an index into an array, but it seems
like that's not the case here. would something like "value" be more appropriate,
like:

  function valueToString(value) {
    return Number(value).toPrecision(yprecision);
  }

?

[Siva Chandra, 2014/01/06 22:36:57]

Done.

+    var indexNum = Number(index);
+    return indexNum.toPrecision(yprecision);
+  }
+
+  function getIndexWidth(index) {
+    ctx.font = indexFont;
+    return ctx.measureText(index).width + 2;
+  }
+
+  function drawIndex(index, x, y) {
+    ctx.font = indexFont;
+    ctx.fillStyle = '#000000';  // Black
+    ctx.fillText(index, x, y);
+  }
+
+  function getTimeString(timePast) {
+    var d = new Date();
+    d.setSeconds(-timePast);
+    return d.toLocaleTimeString();
+  }
+
+  function drawLine(x1, y1, x2, y2, color) {
+    var colorBackup = ctx.strokeStyle;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.strokeStyle = color;
+    ctx.stroke();
+    ctx.strokeStyle = colorBackup;
+  }
+
+  var yminStr = yDataToString(ymin);
+  var ymaxStr = yDataToString(ymax);
+  var yhalfStr = yDataToString((ymax + ymin) / 2);
+  var yminWidth = getIndexWidth(yminStr);
+  var ymaxWidth = getIndexWidth(ymaxStr);
+  var yhalfWidth = getIndexWidth(yhalfStr);
+
+  var xminStr = getTimeString(tdata[0]);
+  var xmaxStr = getTimeString(tdata[size - 1]);
+  var xminWidth = getIndexWidth(xminStr);
+  var xmaxWidth = getIndexWidth(xmaxStr);
+
+  var xorigin = padding + Math.max(yminWidth, ymaxWidth, xminWidth / 2);
+  var yorigin = padding + indexHeight / 2;
+  var width = canvas.scrollWidth - xorigin - xmaxWidth / 2 - padding;
+  var height = canvas.scrollHeight - yorigin - indexHeight - padding;
+
+  // Start fresh.
+  ctx.clearRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);
+
+  // Draw the bounding rectangle.
+  ctx.strokeStyle = rectColor;
+  ctx.strokeRect(xorigin, yorigin, width, height);
+
+  // Draw the x and y bound values.
+  drawIndex(ymaxStr, xorigin - ymaxWidth, yorigin + indexHeight / 2);
+  drawIndex(yminStr, xorigin - yminWidth, yorigin + height);
+  drawIndex(xminStr, xorigin - xminWidth / 2, yorigin + height + indexHeight);
+  drawIndex(xmaxStr,
+            xorigin + width - xmaxWidth / 2,
+            yorigin + height + indexHeight);
+
+  // Draw y-level (horizontal) lines.
+  drawLine(xorigin, yorigin + height / 4,
+           xorigin + width, yorigin + height / 4,
+           gridColor);
+  drawLine(xorigin, yorigin + height / 2,
+           xorigin + width, yorigin + height / 2, gridColor);
+  drawLine(xorigin, yorigin + 3 * height / 4,
+           xorigin + width, yorigin + 3 * height / 4,
+           gridColor);
+
+  // Draw half-level value.
+  drawIndex(yhalfStr,
+            xorigin - yhalfWidth,
+            yorigin + height / 2 + indexHeight / 2);
+
+  // Draw the plots.
+  for (var count in plots) {
+    var plot = plots[count];
+    var ydata = plot.data;
+    ctx.strokeStyle = plot.color;
+    ctx.beginPath();
+    if (width < size) {
+      for (var i = 0; i < width; ++i) {
+        var xindex = i / (width - 1) * size;
+        var val = ydata[xindex];
+        if (i == 0) {
+          ctx.moveTo(xorigin + i, yorigin + height - val / ymax * height);
+        } else {
+          ctx.lineTo(xorigin + i, yorigin + height - val / ymax * height);
+        }
+      }
+    } else {
+      for (var i = 0; i < size; ++i) {
+        var xpos = xorigin + i / (size - 1) * width;
+        var val = ydata[i];
+        if (i == 0) {
+          ctx.moveTo(xpos, yorigin + height - val / ymax * height);
+        } else {
+          ctx.lineTo(xpos, yorigin + height - val / ymax * height);
+        }
+      }
+    }
+  }
+  ctx.stroke();
+}
+
+/**
+ * Display the battery charge vs time on a line graph.
+ *
+ * @param {Array.<Object>} power_supply_array An array of objects with fields
+ *     representing the battery charge, time when the charge measurement was
+ *     taken, and whether there was external power connected at that time.
+ */
+function showBatteryChargeData(power_supply_array) {
+  canvas = $('battery-charge-canvas');
+  tdata = new Array();
+  plot = new Array();
+  for (var i in power_supply_array) {
+    tdata[i] = power_supply_array[i].time_past;
+    plot[i] = power_supply_array[i].battery_percent;
+  }
+
+  plots = new Array();
+  plots[0] = {
+      color: '#0000FF',  // Blue color.

[Daniel Erat, 2014/01/04 00:02:17]

nit: indent two spaces instead of 4

[Siva Chandra, 2014/01/06 22:36:57]

Done.

+      data: plot
+  };
+  plotLineGraph(canvas, tdata, plots, 0.00, 100.00, 3);
+}
+
+function requestBatteryChargeData() {
+  chrome.send('requestBatteryChargeData');
+}
+
+var PowerUI = {
+  showBatteryChargeData: showBatteryChargeData
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  requestBatteryChargeData();
+  $('battery-charge-reload-button').onclick = requestBatteryChargeData;
+});