blob: db81d1f7cb50b7ec63f09090d4f8648204a37367 [file] [log] [blame]
<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.
-->
<!--
A brief note on terminology as used here: a "graph" is a plotted screenful
of data, showing the results of one type of test: for example, the
page-load-time graph. A "trace" is a single line on a graph, showing one
one for the test: for example, the reference build trace on the
page-load-time graph.
This page plots arbitrary numerical data loaded from files in a specific
format. It uses two or more data files, all JSON-encoded:
graphs.dat: a list of objects, each with these properties: name (the name
of a graph) and units (the units for the data to be read by humans).
Schematically:
[{'name': graph_name, 'important': important,
'units': units},
...,]
<graphname>-summary.dat: for each of the graphs listed in graphs.dat, the
corresponding summary file holds rows of data. Each row of data is an
object with several properties:
"rev": the revision number for this row of data
"traces": an object with several properties of its own. The name of
the property corresponds to a trace name, used only as an
internal identifier, and the property's value is an array of
its measurement and that measurement's standard deviation (or
other measurement error).
Schematically:
{"traces": {<trace_name1>: [<value1>, <stddev1>],
<trace_name2>: [<value2>, <stddev2>], ...},
"rev": <rev>,
"ver": <ver>,
"chan": <chan>,
}
-->
<head>
<style type="text/css">
body {
font-family: sans-serif;
}
div.plot {
cursor: pointer;
}
div.switcher * {
border: 1px solid black;
border-radius: 4px 4px 0 0;
padding-left: 0.5em;
padding-right: 0.5em;
}
div.switcher .select {
background: #ddd;
cursor: pointer;
}
canvas.plot {
border: 1px solid black;
cursor: pointer;
}
div.plot-coordinates {
font-family: monospace;
}
iframe.detail {
display: none;
width: 100%;
height: 100%;
border: none;
}
div.selector {
border: solid 1px black;
cursor: pointer;
padding-left: 0.3em;
background-color: white;
}
div.selector:hover {
background-color: rgb(200,200,250);
}
div.selected {
border-left: none;
}
div.selectors {
width: 80px;
display: none;
}
#explain {
font-size: 0.75em;
font-style: italic;
color: rgb(100,100,100);
}
</style>
<script src="js/common.js"></script>
<script src="js/plotter.js"></script>
<script src="js/coordinates.js"></script>
<script src="config.js"></script>
<script src="js/graph.js"></script>
<script>
document.title = Config.title + ' - ' + Config.buildslave;
var params = ParseParams();
var CHANNELS = ['canary', 'dev', 'beta', 'stable'];
function init() {
Fetch('graphs.dat', onGraphListReceived);
}
function onGraphListReceived(data, error) {
if (error) {
reportError(error);
return;
}
var graphList = JsonToJs(data);
// Add a graph for defined params.
if (params['channel'] != undefined && params['graph'] != undefined) {
var channels = params['channel'].split(',');
for (var i = 0; i < graphList.length; i++) {
if (graphList[i].name == params['graph']) {
graphList[i].loc = graphList[i].name + '-summary.dat';
var options = {
width: window.innerWidth - 56,
showDetail: false,
channels: channels,
history: params['history'],
enableMouseScroll: true,
};
var graph = new Graph('output', [graphList[i]], options);
graph.setTitle('<h3>' + params['channel'] + '</h3>');
graph.graph();
return;
}
}
} else {
// Set summary path.
for (var j = 0; j < graphList.length; j++) {
graphList[j].loc = graphList[j].name + '-summary.dat';
}
// Add channel comparison graph.
var options = {
width: window.innerWidth - 56,
showDetail: false,
channels: CHANNELS,
enableMouseScroll: true,
showTabs: true,
};
var graph = new Graph('output', graphList, options);
graph.setTitle('<h3>Channel Comparison</h3>');
graph.graph();
// Add graph for each channel.
for (var i = 0; i < CHANNELS.length; i++) {
var channel = CHANNELS[i];
var options = {
width: window.innerWidth - 56,
showDetail: false,
channels: [channel],
enableMouseScroll: true,
showTabs: true,
};
var graph = new Graph('output', graphList, options)
graph.setTitle('<h3>' + channel + '</h3>');
graph.graph();
}
}
}
function reportError(error) {
document.getElementById('output').innerHTML = "<p>" + error + "</p>";
}
window.addEventListener('load', init, false);
</script>
</head>
<body>
<div id="header_text">
Builds generated by the <a href="#">Chrome Buildbot</a>
are run through <b>
<script>
document.write(Config.title);
</script>
</b>and the results of that test are charted here.
</div>
<div id="explain">
The vertical axis is measured values, and the horizontal
axis is the version number for the build being tested.
Shift-click to place baseline. Shift-scroll to zoom slowly.
</div>
<p></p>
<div id="output"></div>
<pre id="log"></pre>
</body>
</html>