Merge pull request #2067 from nnnick/fix/animations

Fix bar chart and doughnut chart animations

src/controllers/controller.bar.js

@@ -113,7 +113,7 @@ module.exports = function(Chart) {
 					datasetLabel: this.getDataset().label,
 
 					// Appearance
-					base: this.calculateBarBase(this.index, index),
+					base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
 					width: this.calculateBarWidth(numBars),
 					backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
 					borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),

src/controllers/controller.doughnut.js

@@ -163,16 +163,11 @@ module.exports = function(Chart) {
 		updateElement: function(arc, index, reset) {
 			var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
 			var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
-
+			var startAngle = Math.PI * -0.5; // non reset case handled later
-			var resetModel = {
+			var endAngle = Math.PI * -0.5; // non reset case handled later
-				x: centerX,
+			var circumference = reset && this.chart.options.animation.animateRotate ? 0 : this.calculateCircumference(this.getDataset().data[index]);
-				y: centerY,
+			var innerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.innerRadius;
-				startAngle: Math.PI * -0.5, // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
+			var outerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.outerRadius;
-				endAngle: Math.PI * -0.5,
-				circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
-				outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
-				innerRadius: (this.chart.options.animation.animateScale) ? 0 : this.innerRadius
-			};
 
 			helpers.extend(arc, {
 				// Utility
@@ -181,12 +176,14 @@ module.exports = function(Chart) {
 				_index: index,
 
 				// Desired view properties
-				_model: reset ? resetModel : {
+				_model: {
 					x: centerX,
 					y: centerY,
-					circumference: this.calculateCircumference(this.getDataset().data[index]),
+					startAngle: startAngle,
-					outerRadius: this.outerRadius,
+					endAngle: endAngle,
-					innerRadius: this.innerRadius,
+					circumference: circumference,
+					outerRadius: outerRadius,
+					innerRadius: innerRadius,
 
 					backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
 					hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
@@ -197,6 +194,7 @@ module.exports = function(Chart) {
 				}
 			});
 
+			// Set correct angles if not resetting
 			if (!reset) {
 
 				if (index === 0) {
@@ -206,12 +204,6 @@ module.exports = function(Chart) {
 				}
 
 				arc._model.endAngle = arc._model.startAngle + arc._model.circumference;
-
-
-				//Check to see if it's the last arc, if not get the next and update its start angle
-				if (index < this.getDataset().data.length - 1) {
-					this.getDataset().metaData[index + 1]._model.startAngle = arc._model.endAngle;
-				}
 			}
 
 			arc.pivot();

src/core/core.controller.js

@@ -58,7 +58,6 @@ module.exports = function(Chart) {
 			this.updateLayout();
 			this.resetElements();
 			this.initToolTip();
-			this.draw();
 			this.update();
 
 			// TODO

test/controller.doughnut.tests.js

@@ -82,7 +82,7 @@ describe('Doughnut controller tests', function() {
 		var controller = new Chart.controllers.doughnut(chart, 1);
 		controller.reset(); // reset first
 
-		expect(chart.data.datasets[1].metaData[0]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -90,9 +90,9 @@ describe('Doughnut controller tests', function() {
 			circumference: 2.166614539857563,
 			outerRadius: 49,
 			innerRadius: 36.75
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[1]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -100,9 +100,9 @@ describe('Doughnut controller tests', function() {
 			circumference: 3.2499218097863447,
 			outerRadius: 49,
 			innerRadius: 36.75
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[2]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -110,9 +110,9 @@ describe('Doughnut controller tests', function() {
 			circumference: 0,
 			outerRadius: 49,
 			innerRadius: 36.75
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[3]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -120,11 +120,11 @@ describe('Doughnut controller tests', function() {
 			circumference: 0.8666458159430251,
 			outerRadius: 49,
 			innerRadius: 36.75
-		});
+		}));
 
 		controller.update();
 
-		expect(chart.data.datasets[1].metaData[0]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -139,9 +139,9 @@ describe('Doughnut controller tests', function() {
 			hoverBackgroundColor: 'rgb(255, 255, 255)',
 
 			label: 'label0',
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[1]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: 0.5958182130626666,
@@ -156,9 +156,9 @@ describe('Doughnut controller tests', function() {
 			hoverBackgroundColor: 'rgb(255, 255, 255)',
 
 			label: 'label1'
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[2]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: 3.8457400228490113,
@@ -173,9 +173,9 @@ describe('Doughnut controller tests', function() {
 			hoverBackgroundColor: 'rgb(255, 255, 255)',
 
 			label: 'label2'
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[3]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: 3.8457400228490113,
@@ -190,7 +190,7 @@ describe('Doughnut controller tests', function() {
 			hoverBackgroundColor: 'rgb(255, 255, 255)',
 			
 			label: 'label3'
-		});
+		}));
 
 		// Change the amount of data and ensure that arcs are updated accordingly
 		chart.data.datasets[1].data = [1, 2]; // remove 2 elements from dataset 0