From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Mon, 3 Oct 2016 23:10:54 +0000 (-0400)
Subject: Display tooltip color boxes for all tooltips. Added a new `displayColors` option... 
X-Git-Tag: v2.4.0~1^2~36
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c15fa9897847c5e6a44377785ffccdbbfdec9145;p=thirdparty%2FChart.js.git

Display tooltip color boxes for all tooltips. Added a new `displayColors` option to turn them off
---

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index 5ed712a97..1aeaab940 100644
--- a/docs/01-Chart-Configuration.md
+++ b/docs/01-Chart-Configuration.md
@@ -238,6 +238,7 @@ yPadding | Number | 6 | Padding to add on top and bottom of tooltip
 caretSize | Number | 5 | Size, in px, of the tooltip arrow
 cornerRadius | Number | 6 | Radius of tooltip corner curves
 multiKeyBackground | Color | "#fff" | Color to draw behind the colored boxes when multiple items are in the tooltip
+displayColors | Boolean | true | if true, color boxes are shown in the tooltip
 callbacks | Object | | See the [callbacks section](#chart-configuration-tooltip-callbacks) below
 
 #### Tooltip Callbacks
diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index 9210ed529..1c9a1fdb1 100755
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -30,6 +30,7 @@ module.exports = function(Chart) {
 		caretSize: 5,
 		cornerRadius: 6,
 		multiKeyBackground: '#fff',
+		displayColors: true,
 		callbacks: {
 			// Args are: (tooltipItems, data)
 			beforeTitle: helpers.noop,
@@ -193,7 +194,8 @@ module.exports = function(Chart) {
 					cornerRadius: tooltipOpts.cornerRadius,
 					backgroundColor: tooltipOpts.backgroundColor,
 					opacity: 0,
-					legendColorBackground: tooltipOpts.multiKeyBackground
+					legendColorBackground: tooltipOpts.multiKeyBackground,
+					displayColors: tooltipOpts.displayColors
 				}
 			});
 		},
@@ -298,12 +300,10 @@ module.exports = function(Chart) {
 					});
 				}
 
-				// If there is more than one item, show color items
-				if (active.length > 1) {
-					helpers.each(tooltipItems, function(tooltipItem) {
-						labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, chartInstance));
-					});
-				}
+				// Determine colors for boxes
+				helpers.each(tooltipItems, function(tooltipItem) {
+					labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, chartInstance));
+				});
 
 				// Build the Text Lines
 				helpers.extend(model, {
@@ -377,7 +377,7 @@ module.exports = function(Chart) {
 			helpers.each(vm.beforeBody.concat(vm.afterBody), maxLineWidth);
 
 			// Body lines may include some extra width due to the color box
-			widthPadding = body.length > 1 ? (bodyFontSize + 2) : 0;
+			widthPadding = vm.displayColors ? (bodyFontSize + 2) : 0;
 			helpers.each(body, function(bodyItem) {
 				helpers.each(bodyItem.before, maxLineWidth);
 				helpers.each(bodyItem.lines, maxLineWidth);
@@ -613,7 +613,7 @@ module.exports = function(Chart) {
 			// Before body lines
 			helpers.each(vm.beforeBody, fillLineOfText);
 
-			var drawColorBoxes = body.length > 1;
+			var drawColorBoxes = vm.displayColors;
 			xLinePadding = drawColorBoxes ? (bodyFontSize + 2) : 0;
 
 			// Draw body lines now
diff --git a/test/core.tooltip.tests.js b/test/core.tooltip.tests.js
index 21d25ebaa..9927debc0 100755
--- a/test/core.tooltip.tests.js
+++ b/test/core.tooltip.tests.js
@@ -85,6 +85,7 @@ describe('tooltip tests', function() {
 			backgroundColor: 'rgba(0,0,0,0.8)',
 			opacity: 1,
 			legendColorBackground: '#fff',
+			displayColors: true,
 
 			// Text
 			title: ['Point 2'],
@@ -199,6 +200,7 @@ describe('tooltip tests', function() {
 			backgroundColor: 'rgba(0,0,0,0.8)',
 			opacity: 1,
 			legendColorBackground: '#fff',
+			displayColors: true,
 
 			// Text
 			title: ['Point 2'],
@@ -211,7 +213,10 @@ describe('tooltip tests', function() {
 			afterBody: [],
 			footer: [],
 			caretPadding: 2,
-			labelColors: []
+			labelColors: [{
+				borderColor: 'rgb(255, 0, 0)',
+				backgroundColor: 'rgb(0, 255, 0)'
+			}]
 		}));
 
 		expect(tooltip._view.x).toBeCloseToPixel(269);