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

diff --git a/docs/05-Polar-Area-Chart.md b/docs/05-Polar-Area-Chart.md
index a08d3f36267299a8535fb583a1b913e7b9412e4c..4ad0def914dc60015314888cd85ac79889f62a71 100644 (file)
--- a/docs/05-Polar-Area-Chart.md
+++ b/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`

diff --git a/samples/doughnut.html b/samples/doughnut.html
index 475499d5da6b10f62d07d26afd28eb8284016de1..73c96ad802d228400d10e2dcbc4a837e1f4dd8b7 100644 (file)
--- a/samples/doughnut.html
+++ b/samples/doughnut.html
@@ -103,6 +103,10 @@
             title: {
                 display: true,
                 text: 'Chart.js Doughnut Chart'
+            },
+            animation: {
+                animateScale: true,
+                animateRotate: true
             }
         }
     };

diff --git a/samples/polar-area.html b/samples/polar-area.html
index 8a69f5a858a97ac24a524f2cfd590744328378b5..f51664e5ed98f52832d8f5971d38ff6d6d63d392 100644 (file)
--- a/samples/polar-area.html
+++ b/samples/polar-area.html
@@ -74,7 +74,9 @@
               },
               reverse: false
             },
-            animateRotate:false
+            animation: {
+                animateRotate: false
+            }
         }
     };
 

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index cb428548a1c0b5bd18373b92431af1ab73ad761c..7170ecccf7e400e4c9c19f074b56e446b249f253 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/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;

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 1882ffca5c1fa004ea22569e55d7a4e94caf112c..0b64c9248ebdbb2cc8547466d6b3be64f6cb1298 100644 (file)
--- a/src/controllers/controller.polarArea.js
+++ b/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),

diff --git a/test/controller.doughnut.tests.js b/test/controller.doughnut.tests.js
index c9885fdbf0fb5774aeba760225ef96881fe8b074..db3e18c565a337f2d04dd4873d53f6c4b3779a18 100644 (file)
--- a/test/controller.doughnut.tests.js
+++ b/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,

diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js
index b123b16a105843b3c53e9da2713040e8d5c42c54..6320c47829bc407dc534e270f1a29ea496af8bc3 100644 (file)
--- a/test/scale.time.tests.js
+++ b/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: []
                        }]
                };