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 7170ecccf7e400e4c9c19f074b56e446b249f253..4039bcf55c30ea9c598f7fdbbf8c1e014336f4bd 100644 (file)
--- 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 7d3983fa8a5acdca8d28aa84fe5bff9033d12b36..3f09d5cfb8db8b4671c3f8845d1327b7f4268e16 100644 (file)
--- 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 1073928442fa6d7efb118e26efc652431ba63f5a..bea31e1ea7753dd5bcdbf6cd1c5a3f3cabbb1c0b 100644 (file)
--- 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);
+               });
+       });
 });