Add a way to filter items in the tooltip

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index bf9eb5baa61707917e0150a9dae7e423ebadd2a5..912d826eb7349c7e9db5d7eb9aa8290c0ae8a95b 100644 (file)
--- 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 fca8a581ec4de02ac4681bfab32d0be35e64a6f9..ecf7ce646cd04cf992b2c7a7579091dbdad6150e 100755 (executable)
--- 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 5890e79e036628b8653b0c9ff4086beba2584969..0c13707aef9db1c71433f4971e0292c39629eef9 100755 (executable)
--- 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',