From 8141200a6d8365fc2d8c171f0ff048fcc7fd0aa8 Mon Sep 17 00:00:00 2001 From: apoorvasrinivasan Date: Sat, 29 Apr 2017 14:59:49 +0530 Subject: [PATCH 1/7] issue #4191 --- src/core/core.tooltip.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 3428f4ac9b3..6e5974ad6a5 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -95,7 +95,8 @@ module.exports = function(Chart) { // Args are: (tooltipItems, data) beforeFooter: helpers.noop, footer: helpers.noop, - afterFooter: helpers.noop + afterFooter: helpers.noop, + textLabelColor: helpers.noop } }; @@ -487,6 +488,7 @@ module.exports = function(Chart) { model.opacity = 1; var labelColors = []; + var textLabelColors = []; tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition); var tooltipItems = []; @@ -513,6 +515,11 @@ module.exports = function(Chart) { labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart)); }); + // Determine colors for text + helpers.each(tooltipItems, function(tooltipItem) { + textLabelColors.push(opts.callbacks.textLabelColor.call(me, tooltipItem, me._chart)); + }); + // Build the Text Lines model.title = me.getTitle(tooltipItems, data); model.beforeBody = me.getBeforeBody(tooltipItems, data); @@ -525,6 +532,7 @@ module.exports = function(Chart) { model.y = Math.round(tooltipPosition.y); model.caretPadding = opts.caretPadding; model.labelColors = labelColors; + model.textLabelColors = textLabelColors; // data points model.dataPoints = tooltipItems; @@ -657,9 +665,6 @@ module.exports = function(Chart) { ctx.textAlign = vm._bodyAlign; ctx.textBaseline = 'top'; - - var textColor = mergeOpacity(vm.bodyFontColor, opacity); - ctx.fillStyle = textColor; ctx.font = helpers.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily); // Before Body @@ -693,7 +698,7 @@ module.exports = function(Chart) { // Inner square ctx.fillStyle = mergeOpacity(vm.labelColors[i].backgroundColor, opacity); ctx.fillRect(pt.x + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2); - + var textColor = mergeOpacity(vm.textLabelColors[i] || vm.bodyFontColor, opacity); ctx.fillStyle = textColor; } From 5623320e9d10f50b70091175ec7cceacbf9f6fdf Mon Sep 17 00:00:00 2001 From: apoorvasrinivasan Date: Sat, 29 Apr 2017 15:07:55 +0530 Subject: [PATCH 2/7] mass 50 error --- src/core/core.tooltip.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 6e5974ad6a5..f653724fb40 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -513,13 +513,10 @@ module.exports = function(Chart) { // Determine colors for boxes helpers.each(tooltipItems, function(tooltipItem) { labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart)); - }); - - // Determine colors for text - helpers.each(tooltipItems, function(tooltipItem) { textLabelColors.push(opts.callbacks.textLabelColor.call(me, tooltipItem, me._chart)); }); + // Build the Text Lines model.title = me.getTitle(tooltipItems, data); model.beforeBody = me.getBeforeBody(tooltipItems, data); From 6c0acdd3e34268d557b513553177b4e05a8b83ae Mon Sep 17 00:00:00 2001 From: apoorvasrinivasan Date: Sat, 29 Apr 2017 19:52:46 +0530 Subject: [PATCH 3/7] updated doc, test and default value of tooltip --- docs/configuration/tooltip.md | 4 ++++ src/core/core.tooltip.js | 9 ++++++--- test/specs/core.tooltip.tests.js | 5 +++++ 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 21387f14011..1aa352fcfad 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -74,6 +74,7 @@ All functions are called with the same arguments: a [tooltip item](#chart-config | `beforeLabel` | `tooltipItem, data` | Returns text to render before an individual label. This will be called for each item in the tooltip. | `label` | `tooltipItem, data` | Returns text to render for an individual item in the tooltip. | `labelColor` | `tooltipItem, chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback) +| `textLabelColor` | `tooltipItem, chart` | Returns the colors for the text of the label for the tooltip item. | `afterLabel` | `tooltipItem, data` | Returns text to render after an individual label. | `afterBody` | `Array[tooltipItem], data` | Returns text to render after the body section | `beforeFooter` | `Array[tooltipItem], data` | Returns text to render before the footer section. @@ -95,6 +96,9 @@ var chart = new Chart(ctx, { borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(255, 0, 0)' } + }, + textLabelColor:function(tooltipItem, chart){ + return '#543453'; } } } diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index f653724fb40..a5d83022379 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -87,6 +87,10 @@ module.exports = function(Chart) { backgroundColor: view.backgroundColor }; }, + textLabelColor: function(tooltipItem, chart){ + console.log(chart) + return chart.tooltip._options.bodyFontColor ; + }, afterLabel: helpers.noop, // Args are: (tooltipItems, data) @@ -95,8 +99,7 @@ module.exports = function(Chart) { // Args are: (tooltipItems, data) beforeFooter: helpers.noop, footer: helpers.noop, - afterFooter: helpers.noop, - textLabelColor: helpers.noop + afterFooter: helpers.noop } }; @@ -695,7 +698,7 @@ module.exports = function(Chart) { // Inner square ctx.fillStyle = mergeOpacity(vm.labelColors[i].backgroundColor, opacity); ctx.fillRect(pt.x + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2); - var textColor = mergeOpacity(vm.textLabelColors[i] || vm.bodyFontColor, opacity); + var textColor = mergeOpacity(vm.textLabelColors[i], opacity); ctx.fillStyle = textColor; } diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index 886e43a2fdb..66f03f2d481 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -330,6 +330,7 @@ describe('Core.Tooltip', function() { afterBody: [], footer: [], caretPadding: 2, + textLabelColors: ['#fff'], labelColors: [{ borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(0, 255, 0)' @@ -393,6 +394,9 @@ describe('Core.Tooltip', function() { }, afterFooter: function() { return 'afterFooter'; + }, + textLabelColor:function(){ + return "textLabelColor"; } } } @@ -476,6 +480,7 @@ describe('Core.Tooltip', function() { afterBody: ['afterBody'], footer: ['beforeFooter', 'footer', 'afterFooter'], caretPadding: 2, + textLabelColors: ['textLabelColor','textLabelColor'], labelColors: [{ borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(0, 255, 0)' From 4b044664dd3a78aabd6fb48aa1f93bcd6b73d4b5 Mon Sep 17 00:00:00 2001 From: apoorvasrinivasan Date: Sat, 29 Apr 2017 19:57:55 +0530 Subject: [PATCH 4/7] lint --- src/core/core.tooltip.js | 5 ++--- test/specs/core.tooltip.tests.js | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index a5d83022379..7f8e45d5dfe 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -87,9 +87,8 @@ module.exports = function(Chart) { backgroundColor: view.backgroundColor }; }, - textLabelColor: function(tooltipItem, chart){ - console.log(chart) - return chart.tooltip._options.bodyFontColor ; + textLabelColor: function(tooltipItem, chart) { + return chart.tooltip._options.bodyFontColor; }, afterLabel: helpers.noop, diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index 66f03f2d481..38f3d1d0d1f 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -395,8 +395,8 @@ describe('Core.Tooltip', function() { afterFooter: function() { return 'afterFooter'; }, - textLabelColor:function(){ - return "textLabelColor"; + textLabelColor: function() { + return 'textLabelColor'; } } } @@ -480,7 +480,7 @@ describe('Core.Tooltip', function() { afterBody: ['afterBody'], footer: ['beforeFooter', 'footer', 'afterFooter'], caretPadding: 2, - textLabelColors: ['textLabelColor','textLabelColor'], + textLabelColors: ['textLabelColor', 'textLabelColor'], labelColors: [{ borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(0, 255, 0)' From d91c7595f5e5541b8653048b8892a23f00ad95b1 Mon Sep 17 00:00:00 2001 From: apoorvasrinivasan Date: Sun, 30 Apr 2017 01:40:38 +0530 Subject: [PATCH 5/7] changed dependency to the tooltip obejct --- src/core/core.tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 7f8e45d5dfe..b257d44a6af 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -88,7 +88,7 @@ module.exports = function(Chart) { }; }, textLabelColor: function(tooltipItem, chart) { - return chart.tooltip._options.bodyFontColor; + return this._options.bodyFontColor; }, afterLabel: helpers.noop, From 4d242ac6d9c35ff4d4999109bcabf6e5182ce6e8 Mon Sep 17 00:00:00 2001 From: apoorvasrinivasan Date: Mon, 1 May 2017 03:05:58 +0530 Subject: [PATCH 6/7] removed function params --- src/core/core.tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index b257d44a6af..4f56689b6bb 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -87,7 +87,7 @@ module.exports = function(Chart) { backgroundColor: view.backgroundColor }; }, - textLabelColor: function(tooltipItem, chart) { + textLabelColor: function() { return this._options.bodyFontColor; }, afterLabel: helpers.noop, From 61410dae2c032e39be70cdf53ddc6492a2610213 Mon Sep 17 00:00:00 2001 From: apoorvasrinivasan Date: Tue, 9 May 2017 23:33:55 +0530 Subject: [PATCH 7/7] to labelTextColor --- docs/configuration/tooltip.md | 4 ++-- src/core/core.tooltip.js | 10 +++++----- test/specs/core.tooltip.tests.js | 8 ++++---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 1aa352fcfad..8947d24633b 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -74,7 +74,7 @@ All functions are called with the same arguments: a [tooltip item](#chart-config | `beforeLabel` | `tooltipItem, data` | Returns text to render before an individual label. This will be called for each item in the tooltip. | `label` | `tooltipItem, data` | Returns text to render for an individual item in the tooltip. | `labelColor` | `tooltipItem, chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback) -| `textLabelColor` | `tooltipItem, chart` | Returns the colors for the text of the label for the tooltip item. +| `labelTextColor` | `tooltipItem, chart` | Returns the colors for the text of the label for the tooltip item. | `afterLabel` | `tooltipItem, data` | Returns text to render after an individual label. | `afterBody` | `Array[tooltipItem], data` | Returns text to render after the body section | `beforeFooter` | `Array[tooltipItem], data` | Returns text to render before the footer section. @@ -97,7 +97,7 @@ var chart = new Chart(ctx, { backgroundColor: 'rgb(255, 0, 0)' } }, - textLabelColor:function(tooltipItem, chart){ + labelTextColor:function(tooltipItem, chart){ return '#543453'; } } diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 4f56689b6bb..cb21a9bc97a 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -87,7 +87,7 @@ module.exports = function(Chart) { backgroundColor: view.backgroundColor }; }, - textLabelColor: function() { + labelTextColor: function() { return this._options.bodyFontColor; }, afterLabel: helpers.noop, @@ -490,7 +490,7 @@ module.exports = function(Chart) { model.opacity = 1; var labelColors = []; - var textLabelColors = []; + var labelTextColors = []; tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition); var tooltipItems = []; @@ -515,7 +515,7 @@ module.exports = function(Chart) { // Determine colors for boxes helpers.each(tooltipItems, function(tooltipItem) { labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart)); - textLabelColors.push(opts.callbacks.textLabelColor.call(me, tooltipItem, me._chart)); + labelTextColors.push(opts.callbacks.labelTextColor.call(me, tooltipItem, me._chart)); }); @@ -531,7 +531,7 @@ module.exports = function(Chart) { model.y = Math.round(tooltipPosition.y); model.caretPadding = opts.caretPadding; model.labelColors = labelColors; - model.textLabelColors = textLabelColors; + model.labelTextColors = labelTextColors; // data points model.dataPoints = tooltipItems; @@ -697,7 +697,7 @@ module.exports = function(Chart) { // Inner square ctx.fillStyle = mergeOpacity(vm.labelColors[i].backgroundColor, opacity); ctx.fillRect(pt.x + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2); - var textColor = mergeOpacity(vm.textLabelColors[i], opacity); + var textColor = mergeOpacity(vm.labelTextColors[i], opacity); ctx.fillStyle = textColor; } diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js index 38f3d1d0d1f..0fbc46799b5 100755 --- a/test/specs/core.tooltip.tests.js +++ b/test/specs/core.tooltip.tests.js @@ -330,7 +330,7 @@ describe('Core.Tooltip', function() { afterBody: [], footer: [], caretPadding: 2, - textLabelColors: ['#fff'], + labelTextColors: ['#fff'], labelColors: [{ borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(0, 255, 0)' @@ -395,8 +395,8 @@ describe('Core.Tooltip', function() { afterFooter: function() { return 'afterFooter'; }, - textLabelColor: function() { - return 'textLabelColor'; + labelTextColor: function() { + return 'labelTextColor'; } } } @@ -480,7 +480,7 @@ describe('Core.Tooltip', function() { afterBody: ['afterBody'], footer: ['beforeFooter', 'footer', 'afterFooter'], caretPadding: 2, - textLabelColors: ['textLabelColor', 'textLabelColor'], + labelTextColors: ['labelTextColor', 'labelTextColor'], labelColors: [{ borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(0, 255, 0)'