From c745d405c8ac5a39c4ede5ccafe3445878b3767b Mon Sep 17 00:00:00 2001 From: "ernstm@chromium.org" Date: Mon, 7 Oct 2013 19:41:45 +0000 Subject: [PATCH] telemetry: Add large line plots to results page. 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 --- .../support/html_output/results-template.html | 164 +++++++++++++----- 1 file changed, 120 insertions(+), 44 deletions(-) diff --git a/tools/telemetry/support/html_output/results-template.html b/tools/telemetry/support/html_output/results-template.html index 63619c48a91f28..71ef142d1c53d6 100644 --- a/tools/telemetry/support/html_output/results-template.html +++ b/tools/telemetry/support/html_output/results-template.html @@ -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; @@ -165,6 +186,7 @@
Result TimeMemory Reference +Style ScatterLine Undelete
@@ -335,7 +357,7 @@ } }; -var timePlotOptions = { +var linePlotOptions = { yaxis: { show: false }, xaxis: { show: false }, lines: { show: true }, @@ -343,44 +365,75 @@ colors: [ plotColor ] }; -function createPlot(container, test) { - var 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 = $('
' + + '
' + + '
'); + $(container).append(section); + attachLinePlots(test, section.children('.large-line-plots'), useLargeLinePlots); + attachLinePlotLabels(test, section.children('.large-line-plot-labels')); + } else { + var 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('
'); var values = results[i].values(); @@ -388,14 +441,31 @@ 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('
' + results[i].run().label() + '
'); + } +} + function attachPlot(test, plotContainer, minIsZero) { var results = test.results(); @@ -430,7 +500,7 @@ return (fraction * 100).toFixed(2) + '%'; } -function createTable(tests, runs, shouldIgnoreMemory, referenceIndex) { +function createTable(tests, runs, shouldIgnoreMemory, referenceIndex, useLargeLinePlots) { $('#container').html('TestUnit' + runs.map(function (run, index) { return '' + run.label() + '
x
'; }).reduce(function (markup, cell) { return markup + cell; }, '') + ' '); @@ -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) { @@ -527,7 +597,7 @@ + '' + ''; -function createTableRow(runs, test, referenceIndex) { +function createTableRow(runs, test, referenceIndex, useLargeLinePlots) { var tableRow = $('' + test.name() + '' + test.unit() + ''); function markupForRun(result, referenceResult) { @@ -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; @@ -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) { @@ -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) {