Fix rendering issue #65 with Chart.js 1.1.1 and provide backward comp…

…atibility as requested by @carlcraig (#72)
carlcraig · Jun 4, 2016 · 8e193ab · 8e193ab
1 parent 37edd47
commit 8e193ab
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 22 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "tc-angular-chartjs",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Add Chart.js charts to your angular application",
   "homepage": "http://carlcraig.github.io/tc-angular-chartjs/",
   "author": "Carl Craig <[email protected]>",

diff --git a/dist/tc-angular-chartjs.js b/dist/tc-angular-chartjs.js
@@ -1,5 +1,5 @@
 /**
- * tc-angular-chartjs - v1.0.15 - 2016-02-15
+ * tc-angular-chartjs - v1.0.16 - 2016-06-03
  * Copyright (c) 2016 Carl Craig <[email protected]>
  * Dual licensed with the Apache-2.0 or MIT license.
  */
@@ -111,7 +111,11 @@
                         if (exposeChart) {
                             $scope.chart = chartObj;
                         }
-                        chartObj.resize();
+                        if (angular.isFunction(chartObj.update)) {
+                            chartObj.update();
+                        } else {
+                            chartObj.resize();
+                        }
                     }
                 }, true);
             }

diff --git a/dist/tc-angular-chartjs.min.js b/dist/tc-angular-chartjs.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tc-angular-chartjs",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Add Chart.js charts to your angular application",
   "homepage": "http://carlcraig.github.io/tc-angular-chartjs/",
   "author": "Carl Craig <[email protected]>",

diff --git a/src/tc-angular-chartjs.js b/src/tc-angular-chartjs.js
@@ -135,7 +135,12 @@
               if ( exposeChart ) {
                 $scope.chart = chartObj;
               }
-              chartObj.resize();
+
+              if (angular.isFunction(chartObj.update)) {
+                chartObj.update();
+              } else {
+                chartObj.resize();
+              }
             }
 
           },

diff --git a/test/unit/tc-angular-chartjs.spec.js b/test/unit/tc-angular-chartjs.spec.js
@@ -3,22 +3,22 @@ describe('tc-chartjs directive', function () {
 
   var $compile, $scope, element, chartInstance,
 
-    ChartMock = function () {
-      this.Line = makeSpy('Line');
-      this.Bar = makeSpy('Bar');
-      this.Radar = makeSpy('Radar');
-      this.PolarArea = makeSpy('PolarArea');
-      this.Pie = makeSpy('Pie');
-      this.Doughnut = makeSpy('Doughnut');
-      this.CustomType = makeSpy('customType');
-    };
+  ChartMock = function () {
+    this.Line = makeSpy('Line');
+    this.Bar = makeSpy('Bar');
+    this.Radar = makeSpy('Radar');
+    this.PolarArea = makeSpy('PolarArea');
+    this.Pie = makeSpy('Pie');
+    this.Doughnut = makeSpy('Doughnut');
+    this.CustomType = makeSpy('customType');
+  };
 
   var makeSpy = function (name) {
-    var resize = jasmine.createSpy('resize');
+    var update = jasmine.createSpy('update');
     var generateLegend = jasmine.createSpy('generateLegend');
     return jasmine.createSpy(name).and.callFake(function () {
       return {
-        resize: resize,
+        update: update,
         generateLegend: generateLegend
       };
     });
@@ -85,21 +85,21 @@ describe('tc-chartjs directive', function () {
       element = $compile('<canvas tc-chartjs-line chart-data="data" chart-options="options" width="300" height="300"></canvas>')($scope);
       $scope.$digest();
       expect(chartInstance.Line).toHaveBeenCalledWith($scope.data, $scope.options);
-      expect(chartInstance.Line().resize).toHaveBeenCalled();
+      expect(chartInstance.Line().update).toHaveBeenCalled();
     });
 
     it('should normalise chart type values', function () {
       element = $compile('<canvas tc-chartjs chart-type="pOlArArEa" chart-data="data" chart-options="options" width="300" height="300"></canvas>')($scope);
       $scope.$digest();
       expect(chartInstance.PolarArea).toHaveBeenCalledWith($scope.data, $scope.options);
-      expect(chartInstance.PolarArea().resize).toHaveBeenCalled();
+      expect(chartInstance.PolarArea().update).toHaveBeenCalled();
     });
 
     it('should pass through unknown types as-is', function () {
       element = $compile('<canvas tc-chartjs chart-type="CustomType" chart-data="data" chart-options="options" width="300" height="300"></canvas>')($scope);
       $scope.$digest();
       expect(chartInstance.CustomType).toHaveBeenCalledWith($scope.data, $scope.options);
-      expect(chartInstance.CustomType().resize).toHaveBeenCalled();
+      expect(chartInstance.CustomType().update).toHaveBeenCalled();
     });
 
     it('should throw an error if no chart type is supplied', function () {
@@ -110,7 +110,27 @@ describe('tc-chartjs directive', function () {
 
       expect(testChartTypeRequiredException).toThrow('Error creating chart: Chart type required.');
     });
-
   });
 
+  describe('Chart.js resize() backward compatibility', function() {
+    beforeEach(function() {
+      makeSpy = function (name) {
+        var resize = jasmine.createSpy('resize');
+        var generateLegend = jasmine.createSpy('generateLegend');
+        return jasmine.createSpy(name).and.callFake(function () {
+          return {
+            resize: resize,
+            generateLegend: generateLegend
+          };
+        });
+      };
+    });
+
+    it('tc-chartjs directive should call Chart.js resize() if update() is not available', function() {
+      element = $compile('<canvas tc-chartjs-line chart-data="data" chart-options="options" width="300" height="300"></canvas>')($scope);
+      $scope.$digest();
+      expect(chartInstance.Line).toHaveBeenCalledWith($scope.data, $scope.options);
+      expect(chartInstance.Line().resize).toHaveBeenCalled();
+    });
+  });
 });