Rename window.internals.fastMallocStatistics to mallocStatistics
[WebKit-https.git] / PerformanceTests / resources / results-template.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>WebKit Performance Test Results</title>
5 <script src="%AbsolutePathToWebKitTrunk%/PerformanceTests/Dromaeo/resources/dromaeo/web/lib/jquery-1.6.4.js"></script>
6 <script src="https://trac.webkit.org/browser/trunk/PerformanceTests/Dromaeo/resources/dromaeo/web/lib/jquery-1.6.4.js?format=txt"></script>
7 <script src="%AbsolutePathToWebKitTrunk%/PerformanceTests/resources/jquery.flot.min.js"></script>
8 <script src="https://trac.webkit.org/browser/trunk/PerformanceTests/resources/jquery.flot.min.js?format=txt"></script>
9 <script id="json" type="application/json">%PeformanceTestsResultsJSON%</script>
10 <style type="text/css">
11
12 section {
13     display: inline-block;
14     padding: 0 10px;
15 }
16
17 section h1 {
18     text-align: center;
19     font-size: 1em;
20 }
21
22 section .tooltip {
23     position: absolute;
24     text-align: center;
25     background: #ffcc66;
26     border-radius: 5px;
27     padding: 0px 5px;
28 }
29
30 </style>
31 </head>
32 <body>
33 <div id="container"></div>
34 <script>
35
36 function createPlot(testName) {
37     var section = $('<section><h1></h1><div class="plot"></div>'
38         + '<span class="tooltip"></span><section>');
39     var unit = testUnits[testName];
40     section.children('.plot').css({'width': 100 * maxLength + 'px', 'height': '300px'});
41     section.children('h1').html(testName + (unit ? ' (' + unit + ')' : ''));
42     $('#container').append(section);
43     
44     attachPlot(testName, section);
45 }
46
47 function attachPlot(testName, section, minIsZero) {
48     var averages = testResults[testName];
49     var color = 'rgb(230,50,50)';
50
51     var minMaxOptions = {lines: {show:true, lineWidth: 0},
52         color: color,
53         points: {show: true, radius: 1},
54         bars: {show: false}};
55
56     function makeLowPlot(id, data) { return $.extend(true, {}, minMaxOptions, {id: id, data: data}); }    
57     function makeHighPlot(from, to, fill, data) { return $.extend(true, {}, minMaxOptions,
58         {id: to, data: data}); }
59
60     var plotData = [
61         makeLowPlot('min', testResultsMin[testName]),
62         makeHighPlot('min', 'max', 0.2, testResultsMax[testName]),
63         makeLowPlot('-&#963;', testResultsStdevLow[testName]), // small letter sgima.
64         makeHighPlot('-&#963;', '+&#963;', 0.4, testResultsStdevHigh[testName]),
65         {data: averages, color: color}];
66
67     var plotContainer = section.children('.plot');
68     $.plot(plotContainer, plotData, {
69         xaxis: {
70             min: averages[0][0] - 0.5,
71             max: averages[averages.length - 1][0] + 0.5,
72             tickSize: 1,
73             ticks: averages.map(function (value, index) {
74                 var label = 'r' + webkitRevisions[index];
75                 if (descriptions[index])
76                     label += ' &dash; ' + descriptions[index]
77                 return [index, label];
78             }),
79         },
80         yaxis: {
81             min: minIsZero ? 0 : Math.min.apply(Math, $.map(testResultsMin[testName], function (entry) { return entry[1]; })) * 0.98,
82             max: Math.max.apply(Math, $.map(testResultsMax[testName], function (entry) { return entry[1]; })) * (minIsZero ? 1.1 : 1.01),
83         },
84         crosshair: { mode: 'y' },
85         series: { shadowSize: 0 },
86         bars: {show: true, align: 'center', barWidth: 0.5},
87         lines: { show: false },
88         points: { show: true },
89         grid: {
90             borderWidth: 2,
91             backgroundColor: '#fff',
92             hoverable: true,
93             autoHighlight: false,
94         }
95     });
96
97     var tooltip = section.children('.tooltip');
98     plotContainer.bind('plothover', function (event, position, item) {
99         if (item) {
100             var postfix = item.series.id ? ' (' + item.series.id + ')' : '';
101             tooltip.html(item.datapoint[1].toPrecision(4) + postfix);
102             tooltip.css({left: item.pageX - tooltip.outerWidth() / 2, top: item.pageY + 10});
103             tooltip.fadeIn(200);
104         } else
105             tooltip.hide();
106     });
107     plotContainer.mouseout(function () {
108         tooltip.hide();
109     });
110
111     plotContainer.click(function (event) {
112         event.preventDefault();
113         attachPlot(testName, section, !minIsZero);
114     });
115 }
116
117 var results = JSON.parse(document.getElementById('json').textContent);
118 var tests = [];
119 var testResults = {}, testResultsMin = {}, testResultsMax = {}, testResultsStdevLow = {}, testResultsStdevHigh = {};
120 var testUnits = {};
121 var webkitRevisions = [];
122 var descriptions = [];
123 var maxLength = 0;
124 $.each(results, function (index, entry) {
125     webkitRevisions.push(entry['webkit-revision']);
126     descriptions.push(entry['description']);
127     $.each(entry.results, function (test, result) {
128         if (tests.indexOf(test) < 0)
129             tests.push(test);
130         if (!testResults[test]) {
131             testResults[test] = [];
132             testResultsMin[test] = [];
133             testResultsMax[test] = [];
134             testResultsStdevLow[test] = [];
135             testResultsStdevHigh[test] = [];
136         }
137         if (typeof result == 'number')
138             testResults[test].push([index, result]);
139         else {
140             testResults[test].push([index, result['avg']]);
141             if ('min' in result)
142                 testResultsMin[test].push([index, result['min']]);
143             if ('max' in result)
144                 testResultsMax[test].push([index, result['max']]);
145             if ('stdev' in result) {
146                 testResultsStdevLow[test].push([index, result['avg'] - result['stdev']]);
147                 testResultsStdevHigh[test].push([index, result['avg'] + result['stdev']]);
148             }
149         }
150         maxLength = Math.max(maxLength, testResults[test].length);
151         testUnits[test] = result.unit;
152     });
153 });
154 $.each(tests.sort(), function (index, test) { createPlot(test); });
155
156 </script>
157 </body>
158 </html>