Details:
{{metric.metadata.summary}}
Unit:
{{metric.metadata.unit}}
|
Source:
{{metric.metadata.source}}
|
Supported Browsers:
{{browser}}
,
{{metric.metadata.details}}
{{data}}
Could not plot graph
This could be either due to insufficient data or error in data.
================================================
FILE: www/app/metric-details/metric-detail.less
================================================
.page.metric-detail {
.metric-help {
background: #ccc;
border-radius: 50%;
font-size: 50%;
color: #fff;
padding: 2px 6px;
font-family: courier;
vertical-align: middle;
&:hover{
text-decoration: none;
}
}
.graph-modifiers {
margin: -20px 0 20px 0;
padding: 10px;
height: 3em;
input[type=radio] {
margin-left: -15px;
}
}
.explanation {
margin: -10px 0 20px 0;
border-bottom: SOLID #eee 1px;
em{
font-style: normal;
color: #777;
}
}
.jqplot-highlighter-tooltip{
height: 20px;
}
}
================================================
FILE: www/app/metric-details/metricDetail.js
================================================
angular
.module('metricdetail', ['ngRoute', 'metricsGraphDetails', 'Backend'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/detail', {
templateUrl: 'app/metric-details/metric-detail.html',
controller: 'MetricDetailCtrl',
controllerAs: 'metric',
resolve: {
MetricsList: ['Data',
function(data) {
return data.getAllMetrics();
}
],
Data: ['Data', '$route',
function(Data, $route) {
$route.current.params.limit = $route.current.params.limit || 40;
$route.current.params.stat = $route.current.params.stat || '';
var params = $route.current.params;
return Data.metricsData({
browser: params.browser,
pagename: params.pagename,
metric: params.metric + params.stat,
limit: params.limit === 'all' ? undefined : params.limit
});
}
]
}
});
}
])
.controller('MetricDetailCtrl', ['$routeParams', '$scope', '$location', 'Data', 'MetricsList',
function($routeParams, $scope, $location, data, metricsList) {
this.name = $routeParams.metric;
this.data = data;
for (var i = 0; i < metricsList.length; i++){
if (metricsList[i].name === this.name){
this.metadata = metricsList[i];
break;
}
}
$scope.modifier = {
limit: $routeParams.limit,
stat: $routeParams.stat
};
var pos = $('.graph').position();
// Sets height of graph with a minimum of 500px
this.height = Math.max(window.innerHeight - pos.top - 100, 500);
$scope.$watchCollection('modifier', function(val, old, scope) {
if ($routeParams.stat !== val.stat) {
$location.search('stat', val.stat);
} else if ($routeParams.limit !== val.limit) {
$location.search('limit', val.limit);
}
});
}
]);
================================================
FILE: www/app/metric-details/metricDetailsGraph.js
================================================
angular
.module('metricsGraphDetails', [])
.directive('pjMetricsDetailsGraph', function() {
function prepareData(val) {
var result = {
series: [],
max: [],
min: [],
xaxis: {}
};
for (var i = val.length - 1; i >= 0; i--) {
var p = val[i];
result.series.push([p.key, p.value.sum / p.value.count, p.value.min, p.value.max]);
result.min.push([p.key, p.value.min]);
result.max.push([p.key, p.value.max]);
result.xaxis[p.key] = p.label;
}
return result;
}
function drawGraph(el, data, unit) {
$.jqplot(el, [data.series, data.min, data.max], {
fillBetween: {
series1: 1,
series2: 2,
color: "rgba(67, 142, 185, 0.2)",
baseSeries: 0,
fill: true
},
series: [{
show: true,
shadow: false,
breakOnNull: true,
rendererOptions: {
smooth: false,
},
trendline: {
show: true,
shadow: false,
color: '#666',
lineWidth: 2,
linePattern: 'dashed',
label: 'trend'
}
}],
seriesDefaults: {
show: false,
rendererOptions: {
smooth: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
label: 'Runs',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
rendererOptions: {
sortMergedLabels: false
},
tickOptions: {
mark: 'cross',
showMark: true,
showGridline: true,
markSize: 5,
angle: -90,
show: true,
showLabel: true,
formatter: function(formatString, value) {
return data.xaxis[value];
}
},
showTicks: true, // wether or not to show the tick labels,
showTickMarks: true,
},
yaxis: {
tickOptions: {},
rendererOptions: {
forceTickAt0: false
},
label: unit || 'Y AXIS',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
},
grid: {
shadow: false,
borderWidth: 0
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5,
tooltipLocation: 'ne'
}
});
}
var id = 'metricDetails' + Math.floor(Math.random() * 10000);
function link(scope, element, attrs) {
scope.$watch('data', function(val) {
if (val) {
try {
drawGraph(id, prepareData(val), scope.unit);
} catch (e) {
scope.error = e;
}
}
});
}
return {
link: link,
restrict: 'E',
transclude: true,
scope: {
data: "=",
unit: "="
},
template: '
Select a test case to view metrics
================================================
FILE: www/app/page-select/page-select.less
================================================
.page.page-select{
.suites{
.panel{
.list-group{
.list-group-item{
padding: 0;
a{
display: block;
padding: 10px 15px;
&:hover{
text-decoration: none;
background: #ccc;
}
}
}
}
}
}
}
================================================
FILE: www/app/page-select/pageSelect.js
================================================
angular
.module('pageSelect', ['ngRoute', 'Backend'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/page-select', {
templateUrl: 'app/page-select/page-select.html',
controller: 'PageSelectCtrl',
controllerAs: 'pageselect',
resolve: {
PageList: ['Data',
function(data) {
return data.pagelist();
}
]
}
});
}
])
.controller('PageSelectCtrl', ['PageList',
function(PageList) {
this.pagelist = PageList;
}
]);
================================================
FILE: www/app/summary/networkTimingGraph.js
================================================
angular
.module('networkTiming', [])
.directive('pjNetworkTimingGraph', function() {
var ticks = ['onLoad', 'Processing', 'Response', 'Request', 'TCP', 'DNS', 'AppCache', 'Unload', 'Start/Redirect'];
var events = [
['loadEventStart', 'loadEventEnd'],
['domLoading', 'domComplete'],
['responseStart', 'responseEnd'],
['requestStart', 'responseStart'],
['connectStart', 'connectEnd'],
['domainLookupStart', 'domainLookupEnd'],
['fetchStart', 'domainLookupStart'],
['unloadStart', 'unloadEnd'],
['redirectStart', 'redirectStop'],
];
function prepareData(val) {
var series = [
[],
[]
];
var initial = val['navigationStart'].sum / val['navigationStart'].count;
var prev = initial;
for (var i = 0; i < events.length; i++) {
var start = val[events[i][0]];
var end = val[events[i][1]];
if (start && start.sum > 0) {
start = start.sum / start.count;
} else {
start = (i > 0 ? series[0][i - 1] + initial : initial);
}
if (end && end.sum > 0) {
end = end.sum / end.count;
} else {
end = start;
}
series[0].push(start - initial);
series[1].push(end - initial);
}
return series;
}
function drawGraph(el, series) {
$.jqplot(el, series, {
stackSeries: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barPadding: 0,
barMargin: 0,
shadowDepth: 0,
stacked: true
}
},
series: [{
color: 'rgba(0,0,0,0)'
}],
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickRenderer: $.jqplot.CanvasAxisTickRenderer
},
},
grid: {
shadow: false,
borderWidth: 0
},
});
}
var id = 'networkTimings' + Math.floor(Math.random() * 10000);
function link(scope, element, attrs) {
scope.$watch('data', function(val) {
if (val && !angular.equals(val, {})) {
drawGraph(id, prepareData(val));
}
});
}
return {
restrict: 'E',
transclude: true,
scope: {
data: "="
},
link: link,
template: '