Home | History | Annotate | Download | only in pylib
      1 <!DOCTYPE html>
      2 <!--
      3  * Copyright (c) 2012 The Chromium Authors. All rights reserved.  Use of this
      4  * source code is governed by a BSD-style license that can be found in the
      5  * LICENSE file.
      6 -->
      7 <html>
      8 <head>
      9   <title>Device Stats Monitor</title>
     10   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
     11   <style>
     12   body {
     13     font-family: sans-serif
     14   }
     15   </style>
     16 </head>
     17 <body>
     18 <h2>Device Stats Monitor</h2>
     19 <ul>
     20 <li>Pass path to trace data via the <code>results</code> querystring param.
     21 <li>Combine charts with the <code>combine</code> querystring param (e.g. <code>&combine=sectors_read,sectors_written</code>).
     22 <li>Use <code>stacked=true</code> to stack combined charts instead of overlaying (default).
     23 </ul>
     24 </body>
     25 <script>
     26 google.load("visualization", "1", {packages:["corechart"]});
     27 
     28 /**
     29  * @returns The querystring param value for |name| or an empty string.
     30  */
     31 function getQuerystringParam(name) {
     32   name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
     33   var regexS = "[\\?&]" + name + "=([^&#]*)";
     34   var regex = new RegExp(regexS);
     35   var results = regex.exec(window.location.search);
     36   if (results == null)
     37     return "";
     38   else
     39     return decodeURIComponent(results[1].replace(/\+/g, " "));
     40 }
     41 
     42 /**
     43  * @returns An array of keys in |obj| sorted by value.
     44  */
     45 function sortedKeys(obj) {
     46   var keys = [];
     47   for (var key in obj) {
     48     keys.push(key);
     49   }
     50   keys.sort();
     51   return keys;
     52 }
     53 
     54 /**
     55  * Removes by value all params from array.
     56  */
     57 Array.prototype.remove = function() {
     58   var what, a = arguments, l = a.length, ax;
     59   while (l && this.length) {
     60     what = a[--l];
     61     while ((ax = this.indexOf(what)) != -1) {
     62       this.splice(ax, 1);
     63     }
     64   }
     65   return this;
     66 }
     67 
     68 /**
     69  * Displays a new chart.
     70  *
     71  * @param {Number} hz Number of sample per second of the data.
     72  * @param {String} name Name to display on top of chart.
     73  * @param {Number[][]} values Array of value arrays to display.
     74  * @param {Boolean} stacked Whether to display values as stacked.
     75  */
     76 function displayChart(hz, name, values, units, stacked) {
     77   var data = new google.visualization.DataTable();
     78   data.addColumn('number', 'ms');
     79   var names = name.split(',');
     80   for (var i = 0; i < names.length; i++) {
     81     data.addColumn('number', names[i]);
     82   }
     83 
     84   var rows = [];
     85   var interval = 1000.0 / hz;
     86   for (var i = 0; i < values[0].length; i++) {
     87     var row = [i*interval];
     88     for (var j = 0; j < values.length; j++) {
     89       row.push(values[j][i]);
     90     }
     91     rows.push(row);
     92   }
     93   data.addRows(rows);
     94 
     95   var options = {
     96     hAxis: {title: 'ms (' + hz + 'hz)'},
     97     isStacked: stacked,
     98     legend: {position: 'top'},
     99     vAxis: {title: units},
    100   };
    101 
    102   var elem = document.createElement('DIV');
    103   elem.style = 'width:100%;height:500px';
    104   document.body.appendChild(elem);
    105   var chart = new google.visualization.AreaChart(elem);
    106   chart.draw(data, options);
    107 }
    108 
    109 /**
    110  * Displays all charts.
    111  *
    112  * Invoked by the results script. JSONP is used to avoid security
    113  * restrictions on XHRs for file:// URLs.
    114  */
    115 function display(hz, results, units) {
    116   var combine = getQuerystringParam('combine');
    117   var keys = sortedKeys(results);
    118   for (var i = 0; i < keys.length; i++) {
    119     var key = keys[i];
    120     var name = key;
    121     var values = [results[key]];
    122     var unit = units[key];
    123     if (combine.indexOf(key) >= 0) {
    124       i--;
    125       name = combine;
    126       values = [];
    127       var combined_keys = combine.split(',');
    128       for (var j = 0; j < combined_keys.length; j++) {
    129         values.push(results[combined_keys[j]]);
    130         keys.remove(combined_keys[j]);
    131       }
    132     }
    133     displayChart(hz, name, values, unit, !!getQuerystringParam('stacked'));
    134   }
    135 }
    136 
    137 var resultsPath = getQuerystringParam('results');
    138 if (resultsPath)
    139   document.write("<script src='" + resultsPath + "'></"+"script>");
    140 else
    141   document.write("Please specify results querystring param.");
    142 </script>
    143 </html>
    144