From: Tom Loudon <tomloudon@gmail.com>
Date: Sat, 7 May 2016 21:24:00 +0000 (+0100)
Subject: Added helper to allow a CanvasPattern for hover. Updates chartjs/Chart.js#1323
X-Git-Tag: v2.1.3~3^2^2~4
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=5866f73562519906567add54f89cf5c8a9b1fe14;p=thirdparty%2FChart.js.git

Added helper to allow a CanvasPattern for hover. Updates chartjs/Chart.js#1323

When a hover background isn't specified in the config for a chart a modified version of the default color is used. If the background color is a CanvasPattern object an error is triggered.

With this change the default background color will no longer be modified if it is a CanvasPattern.
---

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index 7170ecccf..4039bcf55 100644
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -250,7 +250,7 @@ module.exports = function(Chart) {
 			var dataset = this.chart.data.datasets[arc._datasetIndex];
 			var index = arc._index;
 
-			arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(arc._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
+			arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverBackgroundColor(arc._model.backgroundColor));
 			arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(arc._model.borderColor).saturate(0.5).darken(0.1).rgbString());
 			arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth);
 		},
diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 7d3983fa8..3f09d5cfb 100644
--- a/src/core/core.helpers.js
+++ b/src/core/core.helpers.js
@@ -943,5 +943,9 @@ module.exports = function(Chart) {
 			fn.apply(_tArg, args);
 		}
 	};
-
+	helpers.getHoverBackgroundColor = function(backgroundColor) {
+		return (backgroundColor instanceof CanvasPattern) ?
+			backgroundColor :
+			helpers.color(backgroundColor).saturate(0.5).darken(0.1).rgbString();
+	};
 };
diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js
index 107392844..bea31e1ea 100644
--- a/test/core.helpers.tests.js
+++ b/test/core.helpers.tests.js
@@ -684,4 +684,29 @@ describe('Core helper tests', function() {
 		});
 	});
 
+	describe('Background canvas hover helper', function() {
+		it('should return a CanvasPattern backgroundColor when called with a CanvasPattern', function(done) {
+			var dots = new Image();
+			dots.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAD1BMVEUAAAD///////////////+PQt5oAAAABXRSTlMAHlFhZsfk/BEAAAAqSURBVHgBY2BgZGJmYmSAAUYWEIDzmcBcJhiXGcxlRpPFrhdmMiqgvX0AcGIBEUAo6UAAAAAASUVORK5CYII=';
+			dots.onload = function() {
+				var chartContext = document.createElement('canvas').getContext('2d');
+				var patternCanvas = document.createElement('canvas');
+				var patternContext = patternCanvas.getContext('2d');
+				var pattern = patternContext.createPattern(dots, 'repeat');
+				patternContext.fillStyle = pattern;
+
+				var backgroundColor = helpers.getHoverBackgroundColor(chartContext.createPattern(patternCanvas, 'repeat'));
+
+				expect(backgroundColor instanceof CanvasPattern).toBe(true);
+
+				done();
+			}
+		});
+
+		it('should return a modified version of backgroundColor when called with a color', function() {
+			var originalColorRGB = 'rgb(70, 191, 189)';
+
+			expect(helpers.getHoverBackgroundColor('#46BFBD')).not.toEqual(originalColorRGB);
+		});
+	});
 });