PageRenderTime 39ms CodeModel.GetById 18ms RepoModel.GetById 1ms app.codeStats 0ms

/details/details.js

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