From 03fb66751f25c727dfdc3abaf9e2de98232c18c7 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Wed, 27 Apr 2016 17:07:21 -0400 Subject: [PATCH] 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 | 4 ++-- samples/doughnut.html | 4 ++++ samples/polar-area.html | 4 +++- src/controllers/controller.doughnut.js | 2 +- src/controllers/controller.polarArea.js | 12 +++++++----- test/controller.doughnut.tests.js | 4 ++++ test/scale.time.tests.js | 2 +- 7 files changed, 22 insertions(+), 10 deletions(-) diff --git a/docs/05-Polar-Area-Chart.md b/docs/05-Polar-Area-Chart.md index a08d3f362..4ad0def91 100644 --- 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 475499d5d..73c96ad80 100644 --- 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 8a69f5a85..f51664e5e 100644 --- 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 cb428548a..7170ecccf 100644 --- 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 1882ffca5..0b64c9248 100644 --- 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 c9885fdbf..db3e18c56 100644 --- 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 b123b16a1..6320c4782 100644 --- 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: [] }] }; -- 2.47.3