From: Evert Timberg <evert.timberg@gmail.com>
Date: Sat, 5 Dec 2015 00:22:48 +0000 (-0500)
Subject: Doughnut controller needs to obey chart area size
X-Git-Tag: 2.0.0-beta2~25^2~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=38afefde25cf84a3718c1dd8a3caca0c2fef5073;p=thirdparty%2FChart.js.git

Doughnut controller needs to obey chart area size
---

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index e6992814d..0efb57fbb 100644
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -129,8 +129,9 @@
 		},
 
 		update: function update(reset) {
+			var minSize = Math.min(this.chart.chartArea.right - this.chart.chartArea.left, this.chart.chartArea.bottom - this.chart.chartArea.top);
 
-			this.chart.outerRadius = Math.max((helpers.min([this.chart.chart.width, this.chart.chart.height]) / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
+			this.chart.outerRadius = Math.max((minSize / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
 			this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
 			this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.getVisibleDatasetCount();
 
@@ -147,9 +148,12 @@
 			}, this);
 		},
 		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 resetModel = {
-				x: this.chart.chart.width / 2,
-				y: this.chart.chart.height / 2,
+				x: centerX,
+				y: centerY,
 				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
 				circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
 				outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
@@ -164,8 +168,8 @@
 
 				// Desired view properties
 				_model: reset ? resetModel : {
-					x: this.chart.chart.width / 2,
-					y: this.chart.chart.height / 2,
+					x: centerX,
+					y: centerY,
 					circumference: this.calculateCircumference(this.getDataset().data[index]),
 					outerRadius: this.outerRadius,
 					innerRadius: this.innerRadius,
diff --git a/test/controller.doughnut.tests.js b/test/controller.doughnut.tests.js
index 29811e111..34ecd1949 100644
--- a/test/controller.doughnut.tests.js
+++ b/test/controller.doughnut.tests.js
@@ -62,9 +62,11 @@ describe('Doughnut controller tests', function() {
 
 	it ('Should reset and update elements', function() {
 		var chart = {
-			chart: {
-				width: 100,
-				height: 200,
+			chartArea: {
+				left: 0,
+				top: 0,
+				right: 100,
+				bottom: 200,
 			},
 			data: {
 				datasets: [{
@@ -228,9 +230,11 @@ describe('Doughnut controller tests', function() {
 
 	it ('should draw all arcs', function() {
 		var chart = {
-			chart: {
-				width: 100,
-				height: 200,
+			chartArea: {
+				left: 0,
+				top: 0,
+				right: 100,
+				bottom: 200,
 			},
 			data: {
 				datasets: [{
@@ -275,9 +279,11 @@ describe('Doughnut controller tests', function() {
 
 	it ('should set the hover style of an arc', function() {
 		var chart = {
-			chart: {
-				width: 100,
-				height: 200,
+			chartArea: {
+				left: 0,
+				top: 0,
+				right: 100,
+				bottom: 200,
 			},
 			data: {
 				datasets: [{
@@ -354,9 +360,11 @@ describe('Doughnut controller tests', function() {
 
 	it ('should unset the hover style of an arc', function() {
 		var chart = {
-			chart: {
-				width: 100,
-				height: 200,
+			chartArea: {
+				left: 0,
+				top: 0,
+				right: 100,
+				bottom: 200,
 			},
 			data: {
 				datasets: [{