| OLD | NEW |
| (Empty) |
| 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> | |
| OLD | NEW |