From 5ae268e94236b921d6cc966c580cd4984d5f4f94 Mon Sep 17 00:00:00 2001
From: etimberg <evert.timberg@gmail.com>
Date: Thu, 20 Oct 2016 21:49:13 -0400
Subject: [PATCH] Add a way to filter items in the tooltip

---
 docs/01-Chart-Configuration.md |  1 +
 src/core/core.tooltip.js       |  7 ++++
 test/core.tooltip.tests.js     | 72 ++++++++++++++++++++++++++++++++++
 3 files changed, 80 insertions(+)

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index bf9eb5baa61..912d826eb73 100644
--- a/docs/01-Chart-Configuration.md
+++ b/docs/01-Chart-Configuration.md
@@ -225,6 +225,7 @@ mode | String | 'nearest' | Sets which elements appear in the tooltip. See [Inte
 intersect | Boolean | true | if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
 position | String | 'average' | The mode for positioning the tooltip. 'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position. New modes can be defined by adding functions to the Chart.Tooltip.positioners map.
 itemSort | Function | undefined | Allows sorting of [tooltip items](#chart-configuration-tooltip-item-interface). Must implement at minimum a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort).  This function can also accept a third parameter that is the data object passed to the chart.
+filter | Function | undefined | Allows filtering of [tooltip items](#chart-configuration-tooltip-item-interface). Must implement at minimum a function that can be passed to [Array.prototype.filter](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). This function can also accept a second parameter that is the data object passed to the chart.
 backgroundColor | Color | 'rgba(0,0,0,0.8)' | Background color of the tooltip
 titleFontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family for tooltip title inherited from global font family
 titleFontSize | Number | 12 | Font size for tooltip title inherited from global font size
diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index fca8a581ec4..ecf7ce646cd 100755
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -485,6 +485,13 @@ module.exports = function(Chart) {
 					tooltipItems.push(createTooltipItem(active[i]));
 				}
 
+				// If the user provided a filter function, use it to modify the tooltip items
+				if (opts.filter) {
+					tooltipItems = tooltipItems.filter(function(a) {
+						return opts.filter(a, data);
+					});
+				}
+
 				// If the user provided a sorting function, use it to modify the tooltip items
 				if (opts.itemSort) {
 					tooltipItems = tooltipItems.sort(function(a, b) {
diff --git a/test/core.tooltip.tests.js b/test/core.tooltip.tests.js
index 5890e79e036..0c13707aef9 100755
--- a/test/core.tooltip.tests.js
+++ b/test/core.tooltip.tests.js
@@ -543,6 +543,78 @@ describe('Core.Tooltip', function() {
 		expect(tooltip._view.y).toBeCloseToPixel(155);
 	});
 
+	it('should filter items from the tooltip using the callback', function() {
+		var chartInstance = window.acquireChart({
+			type: 'line',
+			data: {
+				datasets: [{
+					label: 'Dataset 1',
+					data: [10, 20, 30],
+					pointHoverBorderColor: 'rgb(255, 0, 0)',
+					pointHoverBackgroundColor: 'rgb(0, 255, 0)',
+					tooltipHidden: true
+				}, {
+					label: 'Dataset 2',
+					data: [40, 40, 40],
+					pointHoverBorderColor: 'rgb(0, 0, 255)',
+					pointHoverBackgroundColor: 'rgb(0, 255, 255)'
+				}],
+				labels: ['Point 1', 'Point 2', 'Point 3']
+			},
+			options: {
+				tooltips: {
+					mode: 'label',
+					filter: function(tooltipItem, data) {
+						// For testing purposes remove the first dataset that has a tooltipHidden property
+						return !data.datasets[tooltipItem.datasetIndex].tooltipHidden;
+					}
+				}
+			}
+		});
+
+		// Trigger an event over top of the
+		var meta0 = chartInstance.getDatasetMeta(0);
+		var point0 = meta0.data[1];
+
+		var node = chartInstance.chart.canvas;
+		var rect = node.getBoundingClientRect();
+
+		var evt = new MouseEvent('mousemove', {
+			view: window,
+			bubbles: true,
+			cancelable: true,
+			clientX: rect.left + point0._model.x,
+			clientY: rect.top + point0._model.y
+		});
+
+		// Manully trigger rather than having an async test
+		node.dispatchEvent(evt);
+
+		// Check and see if tooltip was displayed
+		var tooltip = chartInstance.tooltip;
+
+		expect(tooltip._view).toEqual(jasmine.objectContaining({
+			// Positioning
+			xAlign: 'left',
+			yAlign: 'center',
+
+			// Text
+			title: ['Point 2'],
+			beforeBody: [],
+			body: [{
+				before: [],
+				lines: ['Dataset 2: 40'],
+				after: []
+			}],
+			afterBody: [],
+			footer: [],
+			labelColors: [{
+				borderColor: 'rgb(0, 0, 255)',
+				backgroundColor: 'rgb(0, 255, 255)'
+			}]
+		}));
+	});
+
 	it('Should have dataPoints', function() {
 		var chartInstance = window.acquireChart({
 			type: 'line',