Skip to content

Commit

Permalink
telemetry: Add large line plots to results page.
Browse files Browse the repository at this point in the history 
R=tonyg@chromium.org
BUG=279745

Review URL: https://codereview.chromium.org/24492002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@227317 0039d316-1c4b-4281-b951-d872f2087c98
  • Loading branch information
ernstm@chromium.org committed Oct 7, 2013
1 parent 04f25e4 commit c745d40
Showing 1 changed file with 120 additions and 44 deletions.
164 changes: 120 additions & 44 deletions tools/telemetry/support/html_output/results-template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,38 @@
content: '\25BE\00A0';
}

.time-plots {
.line-plots {
padding-left: 25px;
}

.time-plots > div {
.line-plots > div {
display: inline-block;
width: 90px;
height: 40px;
margin-right: 10px;
}

.lage-line-plots {
padding-left: 25px;
}

.large-line-plots > div {
display: inline-block;
width: 400px;
height: 200px;
margin-right: 10px;
}

.large-line-plot-labels > div {
display: inline-block;
width: 400px;
height: 11px;
margin-right: 10px;
color: #545454;
text-align: center;
font-size: 11px;
}

.closeButton {
background: #fff;
border: 1px solid black;
Expand Down Expand Up @@ -165,6 +186,7 @@
<div style="padding: 0 10px; white-space: nowrap;">
Result <span id="time-memory" class="checkbox"><span class="checked">Time</span><span>Memory</span></span>
Reference <span id="reference" class="checkbox"></span>
Style <span id="scatter-line" class="checkbox"><span class="checked">Scatter</span><span>Line</span></span>
<span class="checkbox"><span class="checked" id="undelete">Undelete</span></span>
</div>
<table id="container"></table>
Expand Down Expand Up @@ -335,67 +357,115 @@
}
};

var timePlotOptions = {
var linePlotOptions = {
yaxis: { show: false },
xaxis: { show: false },
lines: { show: true },
grid: { borderWidth: 1, borderColor: '#ccc' },
colors: [ plotColor ]
};

function createPlot(container, test) {
var section = $('<section><div class="plot"></div><div class="time-plots"></div>'
+ '<span class="tooltip"></span></section>');
section.children('.plot').css({'width': (100 * test.results().length + 25) + 'px', 'height': '300px'});
$(container).append(section);

var plotContainer = section.children('.plot');
var minIsZero = true;
attachPlot(test, plotContainer, minIsZero);

attachTimePlots(test, section.children('.time-plots'));

var tooltip = section.children('.tooltip');
plotContainer.bind('plothover', function (event, position, item) {
if (item) {
var postfix = item.series.id ? ' (' + item.series.id + ')' : '';
tooltip.html(item.datapoint[1].toPrecision(4) + postfix);
var sectionOffset = $(section).offset();
tooltip.css({left: item.pageX - sectionOffset.left - tooltip.outerWidth() / 2, top: item.pageY - sectionOffset.top + 10});
tooltip.fadeIn(200);
} else
tooltip.hide();
});
plotContainer.mouseout(function () {
tooltip.hide();
});
plotContainer.click(function (event) {
event.preventDefault();
minIsZero = !minIsZero;
var largeLinePlotOptions = {
xaxis: {
show: true,
tickDecimals: 0,
},
lines: { show: true },
grid: { borderWidth: 1, borderColor: '#ccc' },
colors: [ plotColor ]
};

function createPlot(container, test, useLargeLinePlots) {
if (useLargeLinePlots) {
var section = $('<section><div class="large-line-plots"></div>'
+ '<div class="large-line-plot-labels"></div>'
+ '<span class="tooltip"></span></section>');
$(container).append(section);
attachLinePlots(test, section.children('.large-line-plots'), useLargeLinePlots);
attachLinePlotLabels(test, section.children('.large-line-plot-labels'));
} else {
var section = $('<section><div class="plot"></div><div class="line-plots"></div>'
+ '<span class="tooltip"></span></section>');
section.children('.plot').css({'width': (100 * test.results().length + 25) + 'px', 'height': '300px'});
$(container).append(section);

var plotContainer = section.children('.plot');
var minIsZero = true;
attachPlot(test, plotContainer, minIsZero);
});

attachLinePlots(test, section.children('.line-plots'), useLargeLinePlots);

var tooltip = section.children('.tooltip');
plotContainer.bind('plothover', function (event, position, item) {
if (item) {
var postfix = item.series.id ? ' (' + item.series.id + ')' : '';
tooltip.html(item.datapoint[1].toPrecision(4) + postfix);
var sectionOffset = $(section).offset();
tooltip.css({left: item.pageX - sectionOffset.left - tooltip.outerWidth() / 2, top: item.pageY - sectionOffset.top + 10});
tooltip.fadeIn(200);
} else
tooltip.hide();
});
plotContainer.mouseout(function () {
tooltip.hide();
});
plotContainer.click(function (event) {
event.preventDefault();
minIsZero = !minIsZero;
attachPlot(test, plotContainer, minIsZero);
});
}
return section;
}

function attachTimePlots(test, container) {
function attachLinePlots(test, container, useLargeLinePlots) {
var results = test.results();
var attachedPlot = false;

if (useLargeLinePlots) {
var maximum = 0;
for (var i = 0; i < results.length; i++) {
var values = results[i].values();
if (!values)
continue;
var local_max = Math.max.apply(Math, values);
if (local_max > maximum)
maximum = local_max;
}
}

for (var i = 0; i < results.length; i++) {
container.append('<div></div>');
var values = results[i].values();
if (!values)
continue;
attachedPlot = true;

$.plot(container.children().last(), [values.map(function (value, index) { return [index, value]; })],
$.extend(true, {}, timePlotOptions, {yaxis: {min: Math.min.apply(Math, values) * 0.9, max: Math.max.apply(Math, values) * 1.1},
xaxis: {min: -0.5, max: values.length - 0.5}}));
if (useLargeLinePlots) {
var options = $.extend(true, {}, largeLinePlotOptions,
{yaxis: {min: 0.0, max: maximum},
xaxis: {min: 0.0, max: values.length - 1},
points: {show: (values.length < 2) ? true : false}});
} else {
var options = $.extend(true, {}, linePlotOptions,
{yaxis: {min: Math.min.apply(Math, values) * 0.9, max: Math.max.apply(Math, values) * 1.1},
xaxis: {min: -0.5, max: values.length - 0.5},
points: {show: (values.length < 2) ? true : false}});
}
$.plot(container.children().last(), [values.map(function (value, index) { return [index, value]; })], options);
}
if (!attachedPlot)
container.children().remove();
}

function attachLinePlotLabels(test, container) {
var results = test.results();
var attachedPlot = false;
for (var i = 0; i < results.length; i++) {
container.append('<div>' + results[i].run().label() + '</div>');
}
}

function attachPlot(test, plotContainer, minIsZero) {
var results = test.results();

Expand Down Expand Up @@ -430,7 +500,7 @@
return (fraction * 100).toFixed(2) + '%';
}

function createTable(tests, runs, shouldIgnoreMemory, referenceIndex) {
function createTable(tests, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots) {
$('#container').html('<thead><tr><th class="headerSortDown">Test</th><th>Unit</th>' + runs.map(function (run, index) {
return '<th colspan="' + (index == referenceIndex ? 2 : 3) + '" class="{sorter: \'comparison\'}" id="' + run.id() + '" title="' + run.description() + '"><span class="label" title="Edit run label">' + run.label() + '</span><div class="closeButton" title="Delete run">x</div></th>';
}).reduce(function (markup, cell) { return markup + cell; }, '') + '</tr></head><tbody></tbody>');
Expand All @@ -444,7 +514,7 @@
testNames.sort().map(function (testName) {
var test = tests[testName];
if (test.isMemoryTest() != shouldIgnoreMemory)
createTableRow(runs, test, referenceIndex);
createTableRow(runs, test, referenceIndex, useLargeLinePlots);
});

$('.closeButton').click(function(event) {
Expand Down Expand Up @@ -527,7 +597,7 @@
+ '<circle cx="50" cy="73" r="6" fill="white" />'
+ '</svg>';

function createTableRow(runs, test, referenceIndex) {
function createTableRow(runs, test, referenceIndex, useLargeLinePlots) {
var tableRow = $('<tr><td class="test collapsed"' + (test.isImportant ? ' style="font-weight:bold"' : '') + '>' + test.name() + '</td><td class="unit">' + test.unit() + '</td></tr>');

function markupForRun(result, referenceResult) {
Expand Down Expand Up @@ -602,7 +672,7 @@
tableRow.children('td').first().addClass('collapsed');
tableRow.children('td').first().removeClass('expanded');
} else {
var plot = createPlot(firstCell, test);
var plot = createPlot(firstCell, test, useLargeLinePlots);
plot.css({'position': 'absolute', 'z-index': 2});
var offset = tableRow.offset();
offset.left += 1;
Expand Down Expand Up @@ -675,14 +745,20 @@
addTests(entry.tests);
});

var useLargeLinePlots = false;
var shouldIgnoreMemory= true;
var referenceIndex = 0;

createTable(metrics, runs, shouldIgnoreMemory, referenceIndex);
createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots);

$('#time-memory').bind('change', function (event, checkedElement) {
shouldIgnoreMemory = checkedElement.textContent == 'Time';
createTable(metrics, runs, shouldIgnoreMemory, referenceIndex);
createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots);
});

$('#scatter-line').bind('change', function (event, checkedElement) {
useLargeLinePlots = checkedElement.textContent == 'Line';
createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots);
});

runs.map(function (run, index) {
Expand All @@ -691,7 +767,7 @@

$('#reference').bind('change', function (event, checkedElement) {
referenceIndex = parseInt(checkedElement.getAttribute('value'));
createTable(metrics, runs, shouldIgnoreMemory, referenceIndex);
createTable(metrics, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots);
});

$('.checkbox').each(function (index, checkbox) {
Expand Down

0 comments on commit c745d40

Please sign in to comment.