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 |