Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Tom Loudon 2016-05-07 22:24:00 +01:00
parent 7eb47313e4
commit 5866f73562
3 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/controllers/controller.doughnut.js
View File

@ -250,7 +250,7 @@ module.exports = function(Chart) {
var dataset = this.chart.data.datasets[arc._datasetIndex]; var dataset = this.chart.data.datasets[arc._datasetIndex];
var index = arc._index; 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.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); arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth);
}, },

6
src/core/core.helpers.js
View File

@ -943,5 +943,9 @@ module.exports = function(Chart) {
fn.apply(_tArg, args); fn.apply(_tArg, args);
} }
}; };
helpers.getHoverBackgroundColor = function(backgroundColor) {
return (backgroundColor instanceof CanvasPattern) ?
backgroundColor :
helpers.color(backgroundColor).saturate(0.5).darken(0.1).rgbString();
};
}; };

25
test/core.helpers.tests.js
View File

@ -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);
});
});
}); });