Improve core and polar area

chartjs · May 31, 2016 · 600f5b9 · 600f5b9
1 parent 11345b6
commit 600f5b9
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 44 deletions.
diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
@@ -109,7 +109,7 @@ module.exports = function(Chart) {
 			var _this = this;
 			var chart = _this.chart;
 			var chartArea = chart.chartArea;
-			var meta = this.getMeta();
+			var meta = _this.getMeta();
 			var opts = chart.options;
 			var arcOpts = opts.elements.arc;
 			var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
@@ -154,24 +154,12 @@ module.exports = function(Chart) {
 				}
 			}
 
-			var distance = arc.hidden? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
-			var startAngle = (-0.5 * Math.PI) + (circumference * visibleCount);
-			var endAngle = startAngle + (arc.hidden? 0 : circumference);
-
-			var resetModel = {
-				x: centerX,
-				y: centerY,
-				innerRadius: 0,
-				outerRadius: animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]),
-				startAngle: animationOpts.animateRotate ? Math.PI * -0.5 : startAngle,
-				endAngle: animationOpts.animateRotate ? Math.PI * -0.5 : endAngle,
-
-				backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
-				borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
-				borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
+			var negHalfPI = -0.5 * Math.PI;
+			var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
+			var startAngle = (negHalfPI) + (circumference * visibleCount);
+			var endAngle = startAngle + (arc.hidden ? 0 : circumference);
 
-				label: getValueAtIndexOrDefault(labels, index, labels[index])
-			};
+			var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
 
 			helpers.extend(arc, {
 				// Utility
@@ -180,22 +168,20 @@ module.exports = function(Chart) {
 				_scale: scale,
 
 				// Desired view properties
-				_model: reset ? resetModel : {
+				_model: {
 					x: centerX,
 					y: centerY,
 					innerRadius: 0,
-					outerRadius: distance,
-					startAngle: startAngle,
-					endAngle: endAngle,
-
-					backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
-					borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
-					borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
-
+					outerRadius: reset ? resetRadius : distance,
+					startAngle: reset && animationOpts.animateRotate ? negHalfPI : startAngle,
+					endAngle: reset && animationOpts.animateRotate ? negHalfPI : endAngle,
 					label: getValueAtIndexOrDefault(labels, index, labels[index])
 				}
 			});
 
+			// Apply border and fill style
+			_this.removeHoverStyle(arc);
+
 			arc.pivot();
 		},
 

diff --git a/src/core/core.js b/src/core/core.js
@@ -4,7 +4,9 @@ module.exports = function() {
 
 	//Occupy the global variable of Chart, and create a simple base class
 	var Chart = function(context, config) {
-		this.config = config;
+		var me = this;
+		var helpers = Chart.helpers;
+		me.config = config;
 
 		// Support a jQuery'd canvas element
 		if (context.length && context[0].getContext) {
@@ -16,45 +18,44 @@ module.exports = function() {
 			context = context.getContext("2d");
 		}
 
-		this.ctx = context;
-		this.canvas = context.canvas;
+		me.ctx = context;
+		me.canvas = context.canvas;
 
 		// Figure out what the size of the chart will be.
 		// If the canvas has a specified width and height, we use those else
 		// we look to see if the canvas node has a CSS width and height.
 		// If there is still no height, fill the parent container
-		this.width = context.canvas.width || parseInt(Chart.helpers.getStyle(context.canvas, 'width')) || Chart.helpers.getMaximumWidth(context.canvas);
-		this.height = context.canvas.height || parseInt(Chart.helpers.getStyle(context.canvas, 'height')) || Chart.helpers.getMaximumHeight(context.canvas);
+		me.width = context.canvas.width || parseInt(helpers.getStyle(context.canvas, 'width'), 10) || helpers.getMaximumWidth(context.canvas);
+		me.height = context.canvas.height || parseInt(helpers.getStyle(context.canvas, 'height'), 10) || helpers.getMaximumHeight(context.canvas);
 
-		this.aspectRatio = this.width / this.height;
+		me.aspectRatio = me.width / me.height;
 
-		if (isNaN(this.aspectRatio) || isFinite(this.aspectRatio) === false) {
+		if (isNaN(me.aspectRatio) || isFinite(me.aspectRatio) === false) {
 			// If the canvas has no size, try and figure out what the aspect ratio will be.
 			// Some charts prefer square canvases (pie, radar, etc). If that is specified, use that
 			// else use the canvas default ratio of 2
-			this.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
+			me.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
 		}
 
 		// Store the original style of the element so we can set it back
-		this.originalCanvasStyleWidth = context.canvas.style.width;
-		this.originalCanvasStyleHeight = context.canvas.style.height;
+		me.originalCanvasStyleWidth = context.canvas.style.width;
+		me.originalCanvasStyleHeight = context.canvas.style.height;
 
 		// High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
-		Chart.helpers.retinaScale(this);
+		helpers.retinaScale(me);
 
 		if (config) {
-			this.controller = new Chart.Controller(this);
+			me.controller = new Chart.Controller(me);
 		}
 
 		// Always bind this so that if the responsive state changes we still work
-		var _this = this;
-		Chart.helpers.addResizeListener(context.canvas.parentNode, function() {
-			if (_this.controller && _this.controller.config.options.responsive) {
-				_this.controller.resize();
+		helpers.addResizeListener(context.canvas.parentNode, function() {
+			if (me.controller && me.controller.config.options.responsive) {
+				me.controller.resize();
 			}
 		});
 
-		return this.controller ? this.controller : this;
+		return me.controller ? me.controller : me;
 
 	};