Make animation options consistent for polar area and doughnut charts (#2342)

* Make animation options consistent and fix an issue when `animateRotate === false` in the polar area chart

* Update docs for moved options

* Fix typo

docs/05-Polar-Area-Chart.md

@@ -79,8 +79,8 @@ Name | Type | Default | Description
 scale | Object | [See Scales](#scales) and [Defaults for Radial Linear Scale](#scales-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid.
 *scale*.type | String |"radialLinear" | As defined in ["Radial Linear"](#scales-radial-linear-scale).
 *scale*.lineArc | Boolean | true | When true, lines are circular.
-animateRotate | Boolean |true | If true, will animate the rotation of the chart.
-animateScale | Boolean | true | If true, will animate scaling the chart.
+*animation*.animateRotate | Boolean |true | If true, will animate the rotation of the chart.
+*animation*.animateScale | Boolean | true | If true, will animate scaling the chart.
 *legend*.*labels*.generateLabels | Function | `function(data) {} ` | Returns labels for each the legend
 *legend*.onClick | Function | function(event, legendItem) {} ` | Handles clicking an individual legend item
 legendCallback | Function | `function(chart) ` | Generates the HTML legend via calls to `generateLegend`

samples/doughnut.html

@@ -103,6 +103,10 @@
             title: {
                 display: true,
                 text: 'Chart.js Doughnut Chart'
+            },
+            animation: {
+                animateScale: true,
+                animateRotate: true
             }
         }
     };

samples/polar-area.html

@@ -74,7 +74,9 @@
               },
               reverse: false
             },
-            animateRotate:false
+            animation: {
+                animateRotate: false
+            }
         }
     };
 

src/controllers/controller.doughnut.js

@@ -225,7 +225,7 @@ module.exports = function(Chart) {
 			});
 
 			// Set correct angles if not resetting
-			if (!reset) {
+			if (!reset || !this.chart.options.animation.animateRotate) {
 
 				if (index === 0) {
 					arc._model.startAngle = this.chart.options.rotation;

src/controllers/controller.polarArea.js

@@ -12,8 +12,10 @@ module.exports = function(Chart) {
 		},
 
 		//Boolean - Whether to animate the rotation of the chart
-		animateRotate: true,
-		animateScale: true,
+		animation: {
+			animateRotate: true,
+			animateScale: true
+		},
 
 		aspectRatio: 1,
 		legendCallback: function(chart) {
@@ -158,9 +160,9 @@ module.exports = function(Chart) {
 				x: centerX,
 				y: centerY,
 				innerRadius: 0,
-				outerRadius: this.chart.options.animateScale ? 0 : distance,
-				startAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : startAngle,
-				endAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : endAngle,
+				outerRadius: this.chart.options.animation.animateScale ? 0 : this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]),
+				startAngle: this.chart.options.animation.animateRotate ? Math.PI * -0.5 : startAngle,
+				endAngle: this.chart.options.animation.animateRotate ? Math.PI * -0.5 : endAngle,
 
 				backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
 				borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),

test/controller.doughnut.tests.js

@@ -64,6 +64,10 @@ describe('Doughnut controller tests', function() {
 				labels: ['label0', 'label1', 'label2', 'label3']
 			},
 			options: {
+				animation: {
+					animateRotate: true,
+					animateScale: false
+				},
 				cutoutPercentage: 50,
 				rotation: Math.PI * -0.5,
 				circumference: Math.PI * 2.0,

test/scale.time.tests.js

@@ -368,7 +368,7 @@ describe('Time scale tests', function() {
 		var mockData = {
 			labels: ["2015-01-01T20:00:00", "2015-01-02T21:00:00", "2015-01-03T22:00:00", "2015-01-05T23:00:00", "2015-01-07T03:00", "2015-01-08T10:00", "2015-01-10T12:00"], // days
 			datasets: [{
-				data: [],
+				data: []
 			}]
 		};