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