diff --git a/bower.json b/bower.json index acfc53c..e5db6d7 100644 --- a/bower.json +++ b/bower.json @@ -1,14 +1,13 @@ { "name": "yellowlabtools", "dependencies": { - "angular": "~1.3.15", - "angular-route": "~1.3.15", - "angular-resource": "~1.3.15", - "angular-sanitize": "~1.3.15", - "angular-animate": "~1.3.15", - "angular-local-storage": "~0.2.0" - }, - "resolutions": { - "angular": "~1.3.8" + "angular": "1.3.15", + "angular-route": "1.3.15", + "angular-resource": "1.3.15", + "angular-sanitize": "1.3.15", + "angular-animate": "1.3.15", + "angular-local-storage": "0.2.0", + "angular-chart.js": "0.7.1", + "Chart.js": "~1.0.2" } } diff --git a/front/src/css/rule.css b/front/src/css/rule.css index 0903840..40f0546 100644 --- a/front/src/css/rule.css +++ b/front/src/css/rule.css @@ -205,3 +205,14 @@ z-index: 2; border: 0.2em solid #f1c40f; } +.totalWeightPie { + max-width: 39em; + margin: 2em auto 4em; +} +.totalWeightPie canvas { + max-width: inherit; +} +.hugeFile { + font-weight: bold; + color: #e74c3c; +} diff --git a/front/src/js/controllers/ruleCtrl.js b/front/src/js/controllers/ruleCtrl.js index 1d4c2c2..2b22bfc 100644 --- a/front/src/js/controllers/ruleCtrl.js +++ b/front/src/js/controllers/ruleCtrl.js @@ -1,4 +1,13 @@ -var ruleCtrl = angular.module('ruleCtrl', []); +var ruleCtrl = angular.module('ruleCtrl', ['chart.js']); + +ruleCtrl.config(['ChartJsProvider', function (ChartJsProvider) { + // Configure all charts + ChartJsProvider.setOptions({ + animation: false, + colours: ['#FF5252', '#FF8A80'], + responsive: true + }); +}]) ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$location', '$sce', 'Menu', 'Results', 'API', function($scope, $rootScope, $routeParams, $location, $sce, Menu, Results, API) { $scope.runId = $routeParams.runId; @@ -22,6 +31,23 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat function init() { $scope.rule = $scope.result.rules[$scope.policyName]; + + // Init "Total Weight" chart + if ($scope.policyName === 'totalWeight') { + $scope.weightLabels = []; + $scope.weightColours = ['#7ECCCC', '#A7E846', '#FF944D', '#FFE74A', '#C2A3FF', '#5A9AED', '#FF6452', '#C1C1C1']; + $scope.weightData = []; + + var types = ['html', 'css', 'js', 'json', 'image', 'video', 'webfont', 'other']; + types.forEach(function(type) { + $scope.weightLabels.push(type); + $scope.weightData.push(Math.round($scope.rule.offendersObj.list.byType[type].totalWeight / 1024)); + }); + + $scope.weightOptions = { + tooltipTemplate: '<%=label%>: <%=value%> KB' + }; + } } $scope.backToDashboard = function() { diff --git a/front/src/js/directives/offendersDirectives.js b/front/src/js/directives/offendersDirectives.js index 0eb0693..e5c0967 100644 --- a/front/src/js/directives/offendersDirectives.js +++ b/front/src/js/directives/offendersDirectives.js @@ -856,4 +856,30 @@ }; }); + offendersDirectives.filter('bytes', function() { + return function(bytes) { + if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) { + return '-'; + } + + var kilo = bytes / 1024; + + if (kilo < 100) { + return kilo.toFixed(1) + ' KB'; + } + + if (kilo < 1024) { + return kilo.toFixed(0) + ' KB'; + } + + var mega = kilo / 1024; + + if (mega < 10) { + return mega.toFixed(2) + ' MB'; + } + + return mega.toFixed(1) + ' MB'; + } + }); + })(); \ No newline at end of file diff --git a/front/src/less/rule.less b/front/src/less/rule.less index b0aa189..db20709 100644 --- a/front/src/less/rule.less +++ b/front/src/less/rule.less @@ -221,4 +221,18 @@ border: 0.2em solid #f1c40f; } } +} + +.totalWeightPie { + max-width: 39em; + margin: 2em auto 4em; + + canvas { + max-width: inherit; + } +} + +.hugeFile { + font-weight: bold; + color: #e74c3c; } \ No newline at end of file diff --git a/front/src/main.html b/front/src/main.html index 357cce5..d5bdd5e 100644 --- a/front/src/main.html +++ b/front/src/main.html @@ -16,15 +16,18 @@ + + + diff --git a/front/src/views/dashboard.html b/front/src/views/dashboard.html index fa97376..5efffa0 100644 --- a/front/src/views/dashboard.html +++ b/front/src/views/dashboard.html @@ -35,7 +35,8 @@
The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is alreay very long to download over a slow connection.
", + "isOkThreshold": 716800, + "isBadThreshold": 2097152, + "isAbnormalThreshold": 3145728, + "hasOffenders": true, + "unit": 'bytes' + }, "requests": { "tool": "phantomas", "label": "Total requests number", diff --git a/lib/metadata/scoreProfileGeneric.json b/lib/metadata/scoreProfileGeneric.json index c5def7f..250a178 100644 --- a/lib/metadata/scoreProfileGeneric.json +++ b/lib/metadata/scoreProfileGeneric.json @@ -3,7 +3,7 @@ "domComplexity": { "label": "DOM complexity", "policies": { - "DOMelementsCount": 1, + "DOMelementsCount": 3, "DOMelementMaxDepth": 1, "iframesCount": 1, "DOMidDuplicated": 1 @@ -69,44 +69,34 @@ "cssRedundantChildNodesSelectors": 1 } }, + "pageWeight": { + "label": "Page weight", + "policies": { + "totalWeight": 5 + } + }, "requests": { - "label": "Requests number", + "label": "Requests", "policies": { "requests": 5, - "htmlCount": 0, - "jsCount": 1, - "cssCount": 1, - "imageCount": 0, - "webfontCount": 2, - "videoCount": 0, - "jsonCount": 0, - "otherCount": 0 - } - }, - "smallRequests": { - "label": "Small requests", - "policies": { - "smallJsFiles": 1, - "smallCssFiles": 1, - "smallImages": 1 - } - }, - "network": { - "label": "Network", - "policies": { - "notFound": 2, - "assetsNotGzipped": 1.5, - "closedConnections": 2, + "domains": 3, + "notFound": 3, "multipleRequests": 2, + "smallRequests": 1 + } + }, + "serverConfig": { + "label": "Server config", + "policies": { + "closedConnections": 2, "cachingNotSpecified": 1, "cachingDisabled": 1, - "cachingTooShort": 1, - "domains": 1 + "cachingTooShort": 1 } } }, "globalScore": { - "domComplexity": 1, + "domComplexity": 2, "domManipulations": 2, "scroll": 1, "badJavascript": 1, @@ -114,8 +104,8 @@ "cssSyntaxError": 1, "cssComplexity": 1, "badCSS": 1, + "pageWeight": 3, "requests": 3, - "smallRequests": 1, - "network": 2 + "serverConfig": 1 } } \ No newline at end of file diff --git a/lib/tools/weightChecker.js b/lib/tools/weightChecker.js index 270517d..df2b6eb 100644 --- a/lib/tools/weightChecker.js +++ b/lib/tools/weightChecker.js @@ -102,7 +102,7 @@ var WeightChecker = function() { }; requests.forEach(function(req) { - var weight = (typeof req.weightCheck.bodySize === 'number') ? req.weightCheck.bodySize + req.weightCheck.headersSize : req.contentLength; + var weight = ((typeof req.weightCheck.bodySize === 'number') ? req.weightCheck.bodySize + req.weightCheck.headersSize : req.contentLength) || 0; var type = req.type || 'other'; results.totalWeight += weight;