nitweb/angular: add metrics directives
authorAlexandre Terrasa <alexandre@moz-code.org>
Mon, 4 Jul 2016 23:31:50 +0000 (19:31 -0400)
committerAlexandre Terrasa <alexandre@moz-code.org>
Wed, 20 Jul 2016 16:04:49 +0000 (12:04 -0400)
Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

share/nitweb/directives/metrics/chart_properties.html [new file with mode: 0644]
share/nitweb/directives/metrics/metrics_list.html [new file with mode: 0644]
share/nitweb/index.html
share/nitweb/javascripts/metrics.js [new file with mode: 0644]
share/nitweb/javascripts/nitweb.js
share/nitweb/stylesheets/nitweb.css

diff --git a/share/nitweb/directives/metrics/chart_properties.html b/share/nitweb/directives/metrics/chart_properties.html
new file mode 100644 (file)
index 0000000..5e80e02
--- /dev/null
@@ -0,0 +1 @@
+<div id="{{chartId}}"></div>
diff --git a/share/nitweb/directives/metrics/metrics_list.html b/share/nitweb/directives/metrics/metrics_list.html
new file mode 100644 (file)
index 0000000..2901b5b
--- /dev/null
@@ -0,0 +1,57 @@
+<div class='card'>
+       <div class='card-heading'>
+               <h3 class='card-title'>{{listTitle}}</h3>
+       </div>
+       <div class='card-body'>
+               <table class='table'>
+                       <tr>
+                               <th></th>
+                               <th>avg.</th>
+                               <th>std dev.</th>
+                               <th>min.</th>
+                               <th>max.</th>
+                       </tr>
+                       <tr ng-repeat='metric in listMetricsNames'>
+                               <th>
+                                       <abbr title="{{listMetrics[metric].desc}}">
+                                               {{listMetrics[metric].name.toUpperCase()}}
+                                       </abbr>
+                               </th>
+                               <td ng-if='listMetrics[metric].empty' colspan='5'>No classes in this module</td>
+                               <td>{{listMetrics[metric].avg}}</td>
+                               <td>{{listMetrics[metric].std_dev}}</td>
+                               <td ng-if='!listMetrics[metric].empty'>
+                                       {{listMetrics[metric].values[listMetrics[metric].min.full_name].value}}
+                                       &nbsp;(<entity-link mentity='listMetrics[metric].min' />)
+                               </td>
+                               <td ng-if='!listMetrics[metric].empty'>
+                                       {{listMetrics[metric].values[listMetrics[metric].max.full_name].value}}
+                                       &nbsp;(<entity-link mentity='listMetrics[metric].max' />)
+                               </td>
+                       </tr>
+               </table>
+               <p class='text-center'>
+                       <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#{{listId}}" aria-expanded="false" aria-controls="{{listId}}">
+                               Show all values
+                       </button>
+               </p>
+               <div class="collapse" id="{{listId}}">
+                       <table class='table'>
+                               <tr>
+                                       <th></th>
+                                       <th ng-repeat='metric in listMetricsNames'>
+                                               <abbr title="{{listMetrics[metric].desc}}">
+                                                       {{listMetrics[metric].name.toUpperCase()}}
+                                               </abbr>
+                                       </th>
+                               </tr>
+                               <tr ng-repeat='value in listMetrics[listMetricsDefault].values'>
+                                       <td><entity-link mentity='value.mentity'></td>
+                                       <td ng-repeat='metric in listMetricsNames'>
+                                               {{listMetrics[metric].values[value.mentity.full_name].value}}
+                                       </td>
+                               </tr>
+                       </table>
+               </div>
+       </div>
+</div>
index 5466b9d..b936f1d 100644 (file)
@@ -73,5 +73,6 @@
                <script src='/javascripts/ui.js'></script>
                <script src='/javascripts/index.js'></script>
                <script src='/javascripts/docdown.js'></script>
+               <script src='/javascripts/metrics.js'></script>
        </body>
 </html>
diff --git a/share/nitweb/javascripts/metrics.js b/share/nitweb/javascripts/metrics.js
new file mode 100644 (file)
index 0000000..9698e81
--- /dev/null
@@ -0,0 +1,479 @@
+/*
+ * Copyright 2016 Alexandre Terrasa <alexandre@moz-code.org>.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function() {
+       angular
+               .module('metrics', ['model'])
+
+               .directive('metricsList', function() {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       listId: '@',
+                                       listTitle: '@',
+                                       listMetrics: '=',
+                                       listMetricsNames: '=',
+                                       listMetricsDefault: '='
+                               },
+                               templateUrl: '/directives/metrics/metrics_list.html'
+                       };
+               })
+
+               .directive('chartModuleDefinitionsKind', function() {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       chartId: '@',
+                                       chartMetrics: '='
+                               },
+                               templateUrl: '/directives/metrics/chart_properties.html',
+                               link: function ($scope, element, attrs) {
+                                       $scope.loadChart = function() {
+                                               if($scope.chart) { return; }
+                                               $scope.chart = new d3pie($scope.chartId, {
+                                                       "header": {
+                                                               "title": {
+                                                                       "fontSize": 24,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "subtitle": {
+                                                                       "color": "#999999",
+                                                                       "fontSize": 12,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "titleSubtitlePadding": 9
+                                                       },
+                                                       "size": {
+                                                               "canvasHeight": 200,
+                                                               "canvasWidth": 350,
+                                                               "pieOuterRadius": "80%"
+                                                       },
+                                                       "data": {
+                                                               "sortOrder": "value-asc",
+                                                               "content": [
+                                                                       {
+                                                                               "label": "Concrete classes",
+                                                                               "value": $scope.chartMetrics.mnbcc.avg,
+                                                                               "color": "#228835"
+                                                                       },
+                                                                       {
+                                                                               "label": "Abstract classes",
+                                                                               "value": $scope.chartMetrics.mnbac.avg,
+                                                                               "color": "#103EB8"
+                                                                       },
+                                                                       {
+                                                                               "label": "Interfaces",
+                                                                               "value": $scope.chartMetrics.mnbic.avg,
+                                                                               "color": "#e65314"
+                                                                       }
+                                                               ]
+                                                       },
+                                                       "labels": {
+                                                               "outer": {
+                                                                       "format": "label-value2",
+                                                                       "pieDistance": 20
+                                                               },
+                                                               "inner": {
+                                                                       "hideWhenLessThanPercentage": 3
+                                                               },
+                                                               "mainLabel": {
+                                                                       "fontSize": 11
+                                                               },
+                                                               "percentage": {
+                                                                       "color": "#ffffff",
+                                                                       "decimalPlaces": 0
+                                                               },
+                                                               "value": {
+                                                                       "color": "#adadad",
+                                                                       "fontSize": 11
+                                                               },
+                                                               "lines": {
+                                                                       "enabled": true,
+                                                                       "style": "straight"
+                                                               },
+                                                               "truncation": {
+                                                                       "enabled": true
+                                                               }
+                                                       }
+                                               });
+                                       };
+
+                                       $scope.$watch('chartMetrics', function(nv, ov) {
+                                               if(nv) {
+                                                       setTimeout($scope.loadChart, 100);
+                                               }
+                                       });
+                               }
+                       };
+               })
+
+               .directive('chartModuleDefinitionsInh', function() {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       chartId: '@',
+                                       chartMetrics: '='
+                               },
+                               templateUrl: '/directives/metrics/chart_properties.html',
+                               link: function ($scope, element, attrs) {
+                                       $scope.loadChart = function() {
+                                               if($scope.chart) { return; }
+                                               $scope.chart = new d3pie($scope.chartId, {
+                                                       "header": {
+                                                               "title": {
+                                                                       "fontSize": 24,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "subtitle": {
+                                                                       "color": "#999999",
+                                                                       "fontSize": 12,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "titleSubtitlePadding": 9
+                                                       },
+                                                       "size": {
+                                                               "canvasHeight": 200,
+                                                               "canvasWidth": 350,
+                                                               "pieOuterRadius": "80%"
+                                                       },
+                                                       "data": {
+                                                               "sortOrder": "value-asc",
+                                                               "content": [
+                                                                       {
+                                                                               "label": "Inherited",
+                                                                               "value": $scope.chartMetrics.mnbd.avg - $scope.chartMetrics.mnbr.avg - $scope.chartMetrics.mnbi.avg,
+                                                                               "color": "#999999"
+                                                                       },
+                                                                       {
+                                                                               "label": "Introduced",
+                                                                               "value": $scope.chartMetrics.mnbi.avg,
+                                                                               "color": "#228835"
+                                                                       },
+                                                                       {
+                                                                               "label": "Redefined",
+                                                                               "value": $scope.chartMetrics.mnbr.avg,
+                                                                               "color": "#e65314"
+                                                                       }
+                                                               ]
+                                                       },
+                                                       "labels": {
+                                                               "outer": {
+                                                                       "format": "label-value2",
+                                                                       "pieDistance": 20
+                                                               },
+                                                               "inner": {
+                                                                       "hideWhenLessThanPercentage": 3
+                                                               },
+                                                               "mainLabel": {
+                                                                       "fontSize": 11
+                                                               },
+                                                               "percentage": {
+                                                                       "color": "#ffffff",
+                                                                       "decimalPlaces": 0
+                                                               },
+                                                               "value": {
+                                                                       "color": "#adadad",
+                                                                       "fontSize": 11
+                                                               },
+                                                               "lines": {
+                                                                       "enabled": true,
+                                                                       "style": "straight"
+                                                               },
+                                                               "truncation": {
+                                                                       "enabled": true
+                                                               }
+                                                       }
+                                               });
+                                       };
+
+                                       $scope.$watch('chartMetrics', function(nv, ov) {
+                                               if(nv) {
+                                                       setTimeout($scope.loadChart, 100);
+                                               }
+                                       });
+                               }
+                       };
+               })
+
+               .directive('chartClassPropertiesInh', function() {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       chartId: '@',
+                                       chartMetrics: '='
+                               },
+                               templateUrl: '/directives/metrics/chart_properties.html',
+                               link: function ($scope, element, attrs) {
+                                       $scope.loadChart = function() {
+                                               if($scope.chart) { return; }
+                                               $scope.chart = new d3pie($scope.chartId, {
+                                                       "header": {
+                                                               "title": {
+                                                                       "fontSize": 24,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "subtitle": {
+                                                                       "color": "#999999",
+                                                                       "fontSize": 12,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "titleSubtitlePadding": 9
+                                                       },
+                                                       "size": {
+                                                               "canvasHeight": 200,
+                                                               "canvasWidth": 350,
+                                                               "pieOuterRadius": "80%"
+                                                       },
+                                                       "data": {
+                                                               "sortOrder": "value-asc",
+                                                               "content": [
+                                                                       {
+                                                                               "label": "Inherited",
+                                                                               "value": $scope.chartMetrics.cnbhp.avg - $scope.chartMetrics.cnbrp.avg,
+                                                                               "color": "#999999"
+                                                                       },
+                                                                       {
+                                                                               "label": "Introduced",
+                                                                               "value": $scope.chartMetrics.cnbip.avg,
+                                                                               "color": "#228835"
+                                                                       },
+                                                                       {
+                                                                               "label": "Redefined",
+                                                                               "value": $scope.chartMetrics.cnbrp.avg,
+                                                                               "color": "#e65314"
+                                                                       }
+                                                               ]
+                                                       },
+                                                       "labels": {
+                                                               "outer": {
+                                                                       "format": "label-value2",
+                                                                       "pieDistance": 20
+                                                               },
+                                                               "inner": {
+                                                                       "hideWhenLessThanPercentage": 3
+                                                               },
+                                                               "mainLabel": {
+                                                                       "fontSize": 11
+                                                               },
+                                                               "percentage": {
+                                                                       "color": "#ffffff",
+                                                                       "decimalPlaces": 0
+                                                               },
+                                                               "value": {
+                                                                       "color": "#adadad",
+                                                                       "fontSize": 11
+                                                               },
+                                                               "lines": {
+                                                                       "enabled": true,
+                                                                       "style": "straight"
+                                                               },
+                                                               "truncation": {
+                                                                       "enabled": true
+                                                               }
+                                                       }
+                                               });
+                                       };
+
+                                       $scope.$watch('chartMetrics', function(nv, ov) {
+                                               if(nv) {
+                                                       setTimeout($scope.loadChart, 100);
+                                               }
+                                       });
+                               }
+                       };
+               })
+
+               .directive('chartClassPropertiesKind', function() {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       chartId: '@',
+                                       chartMetrics: '='
+                               },
+                               templateUrl: '/directives/metrics/chart_properties.html',
+                               link: function ($scope, element, attrs) {
+                                       $scope.loadChart = function() {
+                                               if($scope.chart) { return; }
+                                               $scope.chart = new d3pie($scope.chartId, {
+                                                       "header": {
+                                                               "title": {
+                                                                       "fontSize": 24,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "subtitle": {
+                                                                       "color": "#999999",
+                                                                       "fontSize": 12,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "titleSubtitlePadding": 9
+                                                       },
+                                                       "size": {
+                                                               "canvasHeight": 200,
+                                                               "canvasWidth": 350,
+                                                               "pieOuterRadius": "80%"
+                                                       },
+                                                       "data": {
+                                                               "sortOrder": "value-asc",
+                                                               "content": [
+                                                                       {
+                                                                               "label": "Attributes",
+                                                                               "value": $scope.chartMetrics.cnba.avg,
+                                                                               "color": "#228835"
+                                                                       },
+                                                                       {
+                                                                               "label": "Methods",
+                                                                               "value": $scope.chartMetrics.cnbm.avg - $scope.chartMetrics.cnbi.avg,
+                                                                               "color": "#999999"
+                                                                       },
+                                                                       {
+                                                                               "label": "Constructors",
+                                                                               "value": $scope.chartMetrics.cnbi.avg,
+                                                                               "color": "#e65314"
+                                                                       },
+                                                                       {
+                                                                               "label": "Virtual Types",
+                                                                               "value": $scope.chartMetrics.cnbv.avg,
+                                                                               "color": "#103EB8"
+                                                                       }
+                                                               ]
+                                                       },
+                                                       "labels": {
+                                                               "outer": {
+                                                                       "format": "label-value2",
+                                                                       "pieDistance": 20
+                                                               },
+                                                               "inner": {
+                                                                       "hideWhenLessThanPercentage": 3
+                                                               },
+                                                               "mainLabel": {
+                                                                       "fontSize": 11
+                                                               },
+                                                               "percentage": {
+                                                                       "color": "#ffffff",
+                                                                       "decimalPlaces": 0
+                                                               },
+                                                               "value": {
+                                                                       "color": "#adadad",
+                                                                       "fontSize": 11
+                                                               },
+                                                               "lines": {
+                                                                       "enabled": true,
+                                                                       "style": "straight"
+                                                               },
+                                                               "truncation": {
+                                                                       "enabled": true
+                                                               }
+                                                       }
+                                               });
+                                       };
+
+                                       $scope.$watch('chartMetrics', function(nv, ov) {
+                                               if(nv) {
+                                                       setTimeout($scope.loadChart, 100);
+                                               }
+                                       });
+                               }
+                       };
+               })
+
+               .directive('chartClassInheritanceKind', function() {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       chartId: '@',
+                                       chartMetrics: '='
+                               },
+                               templateUrl: '/directives/metrics/chart_properties.html',
+                               link: function ($scope, element, attrs) {
+                                       $scope.loadChart = function() {
+                                               if($scope.chart) { return; }
+                                               $scope.chart = new d3pie($scope.chartId, {
+                                                       "header": {
+                                                               "title": {
+                                                                       "fontSize": 24,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "subtitle": {
+                                                                       "color": "#999999",
+                                                                       "fontSize": 12,
+                                                                       "font": "open sans"
+                                                               },
+                                                               "titleSubtitlePadding": 9
+                                                       },
+                                                       "size": {
+                                                               "canvasHeight": 200,
+                                                               "canvasWidth": 350,
+                                                               "pieOuterRadius": "80%"
+                                                       },
+                                                       "data": {
+                                                               "sortOrder": "value-asc",
+                                                               "content": [
+                                                                       {
+                                                                               "label": "Interfaces",
+                                                                               "value": $scope.chartMetrics.cnoai.avg,
+                                                                               "color": "#228835"
+                                                                       },
+                                                                       {
+                                                                               "label": "Abstract classes",
+                                                                               "value": $scope.chartMetrics.cnoaa.avg,
+                                                                               "color": "#103EB8"
+                                                                       },
+                                                                       {
+                                                                               "label": "Concrete classes",
+                                                                               "value": $scope.chartMetrics.cnoac.avg - $scope.chartMetrics.cnoaa.avg,
+                                                                               "color": "#e65314"
+                                                                       }
+                                                               ]
+                                                       },
+                                                       "labels": {
+                                                               "outer": {
+                                                                       "format": "label-value2",
+                                                                       "pieDistance": 20
+                                                               },
+                                                               "inner": {
+                                                                       "hideWhenLessThanPercentage": 3
+                                                               },
+                                                               "mainLabel": {
+                                                                       "fontSize": 11
+                                                               },
+                                                               "percentage": {
+                                                                       "color": "#ffffff",
+                                                                       "decimalPlaces": 0
+                                                               },
+                                                               "value": {
+                                                                       "color": "#adadad",
+                                                                       "fontSize": 11
+                                                               },
+                                                               "lines": {
+                                                                       "enabled": true,
+                                                                       "style": "straight"
+                                                               },
+                                                               "truncation": {
+                                                                       "enabled": true
+                                                               }
+                                                       }
+                                               });
+                                       };
+
+                                       $scope.$watch('chartMetrics', function(nv, ov) {
+                                               if(nv) {
+                                                       setTimeout($scope.loadChart, 100);
+                                               }
+                                       });
+                               }
+                       };
+               })
+})();
index 7fa1142..9dac463 100644 (file)
@@ -15,7 +15,7 @@
  */
 
 (function() {
-       angular.module('nitweb', ['ngRoute', 'ngSanitize', 'angular-loading-bar', 'entities', 'docdown', 'index'])
+       angular.module('nitweb', ['ngRoute', 'ngSanitize', 'angular-loading-bar', 'entities', 'docdown', 'index', 'metrics'])
        .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
                cfpLoadingBarProvider.includeSpinner = false;
        }])
index db8a03d..0fcff6c 100644 (file)
@@ -75,6 +75,10 @@ a {
        border-top: none;
 }
 
+.card-title {
+    padding-left: 15px;
+}
+
 /* ui */
 
 .btn-bar { margin-top: -5px; float: right }