PageRenderTime 179ms CodeModel.GetById 74ms app.highlight 20ms RepoModel.GetById 81ms 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*/
  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});