mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
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.
This commit is contained in:
parent
7eb47313e4
commit
5866f73562
@ -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);
|
||||
},
|
||||
|
@ -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();
|
||||
};
|
||||
};
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user