144 lines
3.8 KiB
HTML
144 lines
3.8 KiB
HTML
|
<!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>
|