/details/details.js
JavaScript | 254 lines | 226 code | 26 blank | 2 comment | 9 complexity | 73632a46da63cda0b7cdab662f82ec33 MD5 | raw file
1/*jslint browser: true*/ 2/*global Timeplot, YAHOO*/ 3var timeplot; 4 5YAHOO.util.Event.onDOMReady(function() { 6 var eventSource2 = new Timeplot.DefaultEventSource(); // YSlow2 measurements 7 var pagespeed = new Timeplot.DefaultEventSource(); // Page Speed measurements 8 var dynatrace = new Timeplot.DefaultEventSource(); // dynaTrace measurements 9 var showslowevents = new Timeplot.DefaultEventSource(); // ShowSlow Events 10 11 var timeGeometry = new Timeplot.DefaultTimeGeometry({ 12 gridColor: "#000000", 13 axisLabelsPlacement: "bottom" 14 }); 15 16 var valueGeometryGrades = new Timeplot.DefaultValueGeometry({ 17 min: 0, 18 max: 100, 19 gridColor: "#000000", 20 axisLabelsPlacement: "left" 21 }); 22 23 var valueGeometryWeight = new Timeplot.DefaultValueGeometry({ 24 min: 0, 25 gridColor: "#000000", 26 axisLabelsPlacement: "right" 27 }); 28 29 var valueGeometryRequests = new Timeplot.DefaultValueGeometry({ 30 min: 0, 31 gridColor: "#75CF74", 32 axisLabelsPlacement: "left" 33 }); 34 35 var valueGeometryTime = new Timeplot.DefaultValueGeometry({ 36 min: 0, 37 max: 2000, 38 gridColor: "#800080", 39 axisLabelsPlacement: "right" 40 }); 41 42 var plotInfo = [ 43 Timeplot.createPlotInfo({ 44 id: "yslowgrade2", 45 label: "YSlow2 Grade", 46 dataSource: new Timeplot.ColumnSource(eventSource2,2), 47 timeGeometry: timeGeometry, 48 valueGeometry: valueGeometryGrades, 49 lineColor: "#2175D9", 50 showValues: true 51 }), 52 Timeplot.createPlotInfo({ 53 id: "pagespeed", 54 label: "Page Speed Grade", 55 dataSource: new Timeplot.ColumnSource(pagespeed,2), 56 timeGeometry: timeGeometry, 57 valueGeometry: valueGeometryGrades, 58 lineColor: "#6F4428", 59 showValues: true 60 }), 61 Timeplot.createPlotInfo({ 62 id: "dynatrace", 63 label: "dynaTrace rank", 64 dataSource: new Timeplot.ColumnSource(dynatrace,1), 65 timeGeometry: timeGeometry, 66 valueGeometry: valueGeometryGrades, 67 lineColor: "#AB0617", 68 showValues: true 69 }), 70 Timeplot.createPlotInfo({ 71 id: "pageload", 72 label: "Page Load Time (Page Speed)", 73 dataSource: new Timeplot.ColumnSource(pagespeed,3), 74 timeGeometry: timeGeometry, 75 valueGeometry: valueGeometryTime, 76 lineColor: "#EE4F00", 77 showValues: true 78 }), 79 Timeplot.createPlotInfo({ 80 id: "lt", 81 label: "Page Load Time (YSlow)", 82 dataSource: new Timeplot.ColumnSource(eventSource2,4), 83 timeGeometry: timeGeometry, 84 valueGeometry: valueGeometryTime, 85 lineColor: "purple", 86 showValues: true 87 }), 88 Timeplot.createPlotInfo({ 89 id: "pageweight2", 90 label: "Page Size (bytes)", 91 dataSource: new Timeplot.ColumnSource(eventSource2,1), 92 timeGeometry: timeGeometry, 93 valueGeometry: valueGeometryWeight, 94 lineColor: "#D0A825", 95 showValues: true 96 }), 97 Timeplot.createPlotInfo({ 98 id: "requests2", 99 label: "Total Requests", 100 dataSource: new Timeplot.ColumnSource(eventSource2,3), 101 timeGeometry: timeGeometry, 102 valueGeometry: valueGeometryRequests, 103 lineColor: "#75CF74", 104 showValues: true 105 }), 106 Timeplot.createPlotInfo({ 107 id: "showslowevents", 108 timeGeometry: timeGeometry, 109 eventSource: showslowevents, 110 lineColor: "#3638AF" 111 }) 112 ]; 113 114 for (var name in metrics) { 115 var metric = metrics[name]; 116 117 metric['source'] = new Timeplot.DefaultEventSource(); 118 119 var config = {}; 120 if (typeof(metric.min) !== 'undefined') { 121 config.min = metric.min; 122 } 123 if (typeof(metric.max) !== 'undefined') { 124 config.max = metric.max; 125 } 126 127 plotInfo[plotInfo.length] = Timeplot.createPlotInfo({ 128 id: "showslowmetric"+name, 129 label: metric.title, 130 dataSource: new Timeplot.ColumnSource(metric.source,1), 131 timeGeometry: timeGeometry, 132 valueGeometry: new Timeplot.DefaultValueGeometry(config), 133 lineColor: metric.color, 134 showValues: true 135 }); 136 } 137 138 timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo); 139 timeplot.loadXML('events.php?url=' + url + '&ver=' + eventversion, showslowevents); 140 timeplot.loadText('data.php?smooth=yes&subset=graph&profile=ydefault&url=' + url + '&ver=' + ydataversion, ",", eventSource2); 141 timeplot.loadText('data_pagespeed.php?smooth=yes&subset=graph&url=' + url + '&ver=' + psdataversion, ",", pagespeed); 142 timeplot.loadText('data_dynatrace.php?smooth=yes&subset=graph&url=' + url + '&ver=' + dtdataversion, ",", dynatrace); 143 144 for (var name in metrics) { 145 timeplot.loadText('data_metric.php?smooth=yes&metric=' + name + '&url=' + url, ",", metrics[name].source); 146 } 147 148 var loader = new YAHOO.util.YUILoader({ 149 require: ["dom", "container", "datatable", "datasource"], 150 loadOptional: true, 151 timeout: 10000, 152 combine: true, 153 onSuccess: function() { 154 if (typeof(details) !== 'undefined' ) { 155 for (name in details) { 156 if (details.hasOwnProperty(name)) { 157 var el = YAHOO.util.Dom.get('details_'+name); 158 159 if (!el) { 160 continue; 161 } 162 163 el.innerHTML='<div class="moreinfo"></div>'; 164 165 new YAHOO.widget.Tooltip("tt_"+name, 166 { 167 context: el, 168 text: decodeURIComponent(details[name].join('<br/>')) 169 }); 170 } 171 } 172 } 173 174 var yColumnDefs = [ 175 {key:"timestamp", label:"Timestamp", sortable:true, formatter:"date"}, 176 {key:"w", label:"Page Size (bytes)", sortable:true}, 177 {key:"r", label:"Total Requests", sortable:true}, 178 {key:"o", label:"Grade (0-100)", sortable:true}, 179 {key:"profile", label:"Profile used", sortable:true} 180 ]; 181 182 var psColumnDefs = [ 183 {key:"timestamp", label:"Timestamp", sortable:true, formatter:"date"}, 184 {key:"w", label:"Page Size (bytes)", sortable:true}, 185 {key:"r", label:"Total Requests", sortable:true}, 186 {key:"o", label:"Grade (0-100)", sortable:true}, 187 {key:"l", label:"Load Time (ms)", sortable:true} 188 ]; 189 190 var dtColumnDefs = [ 191 {key:"timestamp", label:"Timestamp", sortable:true, formatter:"date"}, 192 {key:"size", label:"Page Size (bytes)", sortable:true}, 193 {key:"numreq", label:"Total Requests", sortable:true}, 194 {key:"rank", label:"Overall Rank (0-100)", sortable:true}, 195 {key:"timetoimp", label:"Time to First Impression (ms)", sortable:true}, 196 ]; 197 var yDataSource = new YAHOO.util.DataSource("data.php?subset=table&"); 198 yDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; 199 yDataSource.responseSchema = { 200 recordDelim : "\n", 201 fieldDelim : "," , 202 resultsList: "records", 203 fields: ["timestamp", "w", "o", "r", "lt", "profile"] 204 }; 205 206 var psDataSource = new YAHOO.util.DataSource("data_pagespeed.php?subset=table&"); 207 psDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; 208 psDataSource.responseSchema = { 209 recordDelim : "\n", 210 fieldDelim : "," , 211 resultsList: "records", 212 fields: ["timestamp", "w", "o", "l", "r"] 213 }; 214 215 var dtDataSource = new YAHOO.util.DataSource("data_dynatrace.php?subset=table&"); 216 dtDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT; 217 dtDataSource.responseSchema = { 218 recordDelim : "\n", 219 fieldDelim : "," , 220 resultsList: "records", 221 fields: ["timestamp", "size", "numreq", "rank", "timetoimp"] 222 }; 223 224 var yDataTable = new YAHOO.widget.ScrollingDataTable("measurementstable", yColumnDefs, yDataSource, 225 { 226 height: "15em", 227 initialRequest: "url=" + url + "&ver=" + ydataversion 228 }); 229 230 var psDataTable = new YAHOO.widget.ScrollingDataTable("ps_measurementstable", psColumnDefs, psDataSource, 231 { 232 height: "15em", 233 initialRequest: "url=" + url + "&ver=" + psdataversion 234 }); 235 236 var dtDataTable = new YAHOO.widget.ScrollingDataTable("dt_measurementstable", dtColumnDefs, dtDataSource, 237 { 238 height: "15em", 239 initialRequest: "url=" + url + "&ver=" + dtdataversion 240 }); 241 } 242 }); 243 loader.insert(); 244}) 245 246var resizeTimerID = null; 247YAHOO.util.Event.addListener(window, 'resize', function() { 248 if (resizeTimerID === null) { 249 resizeTimerID = window.setTimeout(function() { 250 resizeTimerID = null; 251 timeplot.repaint(); 252 }, 100); 253 } 254});