From 5866f73562519906567add54f89cf5c8a9b1fe14 Mon Sep 17 00:00:00 2001 From: Tom Loudon Date: Sat, 7 May 2016 22:24:00 +0100 Subject: [PATCH 1/5] 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. --- src/controllers/controller.doughnut.js | 2 +- src/core/core.helpers.js | 6 +++++- test/core.helpers.tests.js | 25 +++++++++++++++++++++++++ 3 files changed, 31 insertions(+), 2 deletions(-) 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); + }); + }); }); From 170fdab6a608b69594b60fa1fde3e3afc8b0ff2b Mon Sep 17 00:00:00 2001 From: Tom Loudon Date: Mon, 9 May 2016 07:24:32 +0100 Subject: [PATCH 2/5] Removed 'background' from hover color helper name. Patterns could be used for style attributes other than background e.g. stroke. Updates chartjs/Chart.js#1323 --- src/controllers/controller.doughnut.js | 2 +- src/core/core.helpers.js | 8 ++++---- test/core.helpers.tests.js | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 4039bcf55..ede9d9ba9 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.getHoverBackgroundColor(arc._model.backgroundColor)); + arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(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 3f09d5cfb..60673d8fa 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -943,9 +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(); + helpers.getHoverColor = function(color) { + return (color instanceof CanvasPattern) ? + color : + helpers.color(color).saturate(0.5).darken(0.1).rgbString(); }; }; diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js index bea31e1ea..2aa6c37e1 100644 --- a/test/core.helpers.tests.js +++ b/test/core.helpers.tests.js @@ -684,8 +684,8 @@ describe('Core helper tests', function() { }); }); - describe('Background canvas hover helper', function() { - it('should return a CanvasPattern backgroundColor when called with a CanvasPattern', function(done) { + describe('Background hover color helper', function() { + it('should return a CanvasPattern when called with a CanvasPattern', function(done) { var dots = new Image(); dots.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAD1BMVEUAAAD///////////////+PQt5oAAAABXRSTlMAHlFhZsfk/BEAAAAqSURBVHgBY2BgZGJmYmSAAUYWEIDzmcBcJhiXGcxlRpPFrhdmMiqgvX0AcGIBEUAo6UAAAAAASUVORK5CYII='; dots.onload = function() { @@ -695,7 +695,7 @@ describe('Core helper tests', function() { var pattern = patternContext.createPattern(dots, 'repeat'); patternContext.fillStyle = pattern; - var backgroundColor = helpers.getHoverBackgroundColor(chartContext.createPattern(patternCanvas, 'repeat')); + var backgroundColor = helpers.getHoverColor(chartContext.createPattern(patternCanvas, 'repeat')); expect(backgroundColor instanceof CanvasPattern).toBe(true); @@ -703,10 +703,10 @@ describe('Core helper tests', function() { } }); - it('should return a modified version of backgroundColor when called with a color', function() { + it('should return a modified version of color when called with a color', function() { var originalColorRGB = 'rgb(70, 191, 189)'; - expect(helpers.getHoverBackgroundColor('#46BFBD')).not.toEqual(originalColorRGB); + expect(helpers.getHoverColor('#46BFBD')).not.toEqual(originalColorRGB); }); }); }); From 04d4adda05d0a923e4b320fd0a5ef62940693050 Mon Sep 17 00:00:00 2001 From: Tom Loudon Date: Tue, 10 May 2016 17:25:24 +0100 Subject: [PATCH 3/5] Allow pattern hover state in all chart types Updated all chart types to use the helper.getHoverColor. Pattern fills can now be specified for both fill and line portions of a chart. Updates chartjs/Chart.js#1323 --- src/controllers/controller.bar.js | 4 ++-- src/controllers/controller.bubble.js | 6 +++--- src/controllers/controller.doughnut.js | 2 +- src/controllers/controller.line.js | 4 ++-- src/controllers/controller.polarArea.js | 4 ++-- src/controllers/controller.radar.js | 6 +++--- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 0af546767..ffb0d4a6e 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -299,8 +299,8 @@ module.exports = function(Chart) { var dataset = this.chart.data.datasets[rectangle._datasetIndex]; var index = rectangle._index; - rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(rectangle._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(rectangle._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(rectangle._model.backgroundColor)); + rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(rectangle._model.borderColor)); rectangle._model.borderWidth = rectangle.custom && rectangle.custom.hoverBorderWidth ? rectangle.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, rectangle._model.borderWidth); }, diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js index 82ff94bc1..23500c29f 100644 --- a/src/controllers/controller.bubble.js +++ b/src/controllers/controller.bubble.js @@ -146,8 +146,8 @@ module.exports = function(Chart) { var index = point._index; point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); + point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, point._model.borderWidth); }, @@ -161,4 +161,4 @@ module.exports = function(Chart) { point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth); } }); -}; \ No newline at end of file +}; diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index ede9d9ba9..347386b66 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -251,7 +251,7 @@ module.exports = function(Chart) { var index = arc._index; arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(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.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(arc._model.borderColor)); arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth); }, diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index ed480f4a0..5607c7b58 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -290,8 +290,8 @@ module.exports = function(Chart) { var index = point._index; point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); + point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth); }, diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 0b64c9248..e08365add 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -209,8 +209,8 @@ 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.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.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(arc._model.backgroundColor)); + arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(arc._model.borderColor)); arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth); }, diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index 2c13fa817..423c3ed97 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -191,8 +191,8 @@ module.exports = function(Chart) { var index = point._index; point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); + point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth); }, @@ -206,4 +206,4 @@ module.exports = function(Chart) { point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth); } }); -}; \ No newline at end of file +}; From 44cc68d0ae72a88d9644af4a0be102aa39a521c8 Mon Sep 17 00:00:00 2001 From: Tom Loudon Date: Thu, 12 May 2016 22:24:20 +0100 Subject: [PATCH 4/5] Added CanvasPattern global flag for jshint The core.helpers file was failing linting checks as the global CanvasPattern was not defined. Added the `/* global CanvasGradient */` statement to make linting pass. Updates chartjs/Chart.js#1323 --- src/core/core.helpers.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 60673d8fa..632883f8d 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -944,6 +944,7 @@ module.exports = function(Chart) { } }; helpers.getHoverColor = function(color) { + /* global CanvasGradient */ return (color instanceof CanvasPattern) ? color : helpers.color(color).saturate(0.5).darken(0.1).rgbString(); From 05bfb7e964c9de92d050a016d8e1f09dc1c55a4f Mon Sep 17 00:00:00 2001 From: Tom Loudon Date: Thu, 12 May 2016 22:24:20 +0100 Subject: [PATCH 5/5] Added CanvasPattern global flag for jshint The core.helpers file was failing linting checks as the global CanvasPattern was not defined. Added the `/* global CanvasGradient */` statement to make linting pass. Updates chartjs/Chart.js#1323 --- src/core/core.helpers.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 60673d8fa..5d4094713 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -944,6 +944,7 @@ module.exports = function(Chart) { } }; helpers.getHoverColor = function(color) { + /* global CanvasPattern */ return (color instanceof CanvasPattern) ? color : helpers.color(color).saturate(0.5).darken(0.1).rgbString();