Upgrade Chart.js to version 2

front/src/css/rule.css

@@ -231,7 +231,7 @@
   padding-top: 2.5em;
 }
 .totalWeightPie {
-  max-width: 39em;
+  max-width: 20em;
   margin: 2em auto 4em;
 }
 .totalWeightPie canvas {

front/src/js/controllers/ruleCtrl.js

@@ -45,7 +45,23 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat
             });
 
             $scope.weightOptions = {
-                tooltipTemplate: '<%=label%>: <%=value%> KB'
+                tooltips: {
+                    callbacks: {
+                        label: function(tooltipItem, data) {
+                            var label = data.labels[tooltipItem.index];
+                            var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                            return label + ': ' + value + ' KB';
+                        }
+                    }
+                },
+                legend: {
+                    display: true,
+                    position: 'bottom',
+                    labels: {
+                        boxWidth: 12,
+                        fontSize: 14
+                    }
+                }
             };
         }
 
@@ -87,14 +103,27 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat
             $scope.breakpointsSeries = ['Number of CSS rules per breakpoint'];
             $scope.breakpointsColours = ['#9c4274'];
             $scope.breakpointsOptions = {
-                scaleShowGridLines: false,
-                barShowStroke: false,
-                showTooltips: false,
-                pointDot: false,
-                responsive: true,
-                maintainAspectRatio: true,
-                strokeColor: 'rgba(20, 200, 20, 1)',
-                scaleFontSize: 9
+                scales: {
+                    xAxes: [{
+                        gridLines: {
+                            display:false
+                        }
+                    }],
+                    yAxes: [{
+                        gridLines: {
+                            display:false
+                        }
+                    }]
+                },
+                tooltips: {
+                    enabled: false
+                },
+
+                elements: {
+                    point: {
+                        radius: 0
+                    }
+                }
             };
         }
     }

front/src/main.html

@@ -16,7 +16,6 @@
     <link rel="stylesheet" type="text/css" href="css/screenshot.css">
     <link rel="stylesheet" type="text/css" href="css/timeline.css">
     <link rel="stylesheet" type="text/css" href="css/about.css">
-    <link rel="stylesheet" type="text/css" href="node_modules/angular-chart.js/dist/angular-chart.css">
     <!-- endbuild -->
 
     <link rel="preconnect" href="//www.google-analytics.com">
@@ -39,7 +38,7 @@
 
     <!-- build:js js/all.js -->
     <script src="node_modules/angular/angular.min.js"></script>
-    <script src="node_modules/chart.js/Chart.min.js"></script>
+    <script src="node_modules/chart.js/dist/Chart.min.js"></script>
     <script src="node_modules/angular-route/angular-route.min.js"></script>
     <script src="node_modules/angular-resource/angular-resource.min.js"></script>
     <script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>

front/src/views/rule.html

@@ -248,7 +248,7 @@
     <div ng-if="policyName === 'totalWeight'">
         <h3>Weight by MIME type</h3>
         <div class="totalWeightPie">
-            <canvas class="chart chart-doughnut" data="weightData" labels="weightLabels" options="weightOptions" colours="weightColours" legend="true"></canvas>
+            <canvas class="chart chart-doughnut" chart-data="weightData" chart-labels="weightLabels" chart-options="weightOptions" chart-colors="weightColours"></canvas>
         </div>
         <div ng-repeat="type in weightLabels">
             <h3>{{rule.offendersObj.list.byType[type].totalWeight | bytes}} of {{type}}</h3>
@@ -395,7 +395,7 @@
     <div ng-if="policyName === 'cssBreakpoints'">
         <div ng-if="rule.value > 0" class="cssBreakpointsGraph">
             <h3>Breakpoints distribution graph</h3>
-            <canvas class="chart chart-line" chart-data="breakpointsData" chart-labels="breakpointsLabels" chart-options="breakpointsOptions" chart-legend="true" chart-colours="breakpointsColours" chart-series="breakpointsSeries" width="600" height="250"></canvas>
+            <canvas class="chart chart-line" chart-data="breakpointsData" chart-labels="breakpointsLabels" chart-options="breakpointsOptions" chart-colors="breakpointsColours" chart-series="breakpointsSeries" width="600" height="250"></canvas>
             <h3>Breakpoints list</h3>
             <div class="offendersTable">
                 <div ng-repeat="offender in rule.offendersObj | orderBy:'pixels'">

package.json

@@ -22,14 +22,14 @@
   "dependencies": {
     "angular": "1.5.7",
     "angular-animate": "1.5.7",
-    "angular-chart.js": "0.10.2",
+    "angular-chart.js": "1.1.1",
     "angular-local-storage": "0.2.7",
     "angular-resource": "1.5.7",
     "angular-route": "1.5.7",
     "angular-sanitize": "1.5.7",
     "async": "1.5.2",
     "body-parser": "1.15.2",
-    "chart.js": "1.1.1",
+    "chart.js": "2.4.0",
     "clean-css": "3.4.23",
     "color-diff": "1.0.0",
     "compression": "1.6.2",