Add a way of sorting tooltip items with a custom sort function

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index cbb92879cf4ef91479fb44a4793ff45a5498e5d9..d88ddc7369899848f10961737ab7f9184b528937 100644 (file)
--- a/docs/01-Chart-Configuration.md
+++ b/docs/01-Chart-Configuration.md
@@ -195,6 +195,7 @@ Name | Type | Default | Description
 enabled | Boolean | true | Are tooltips 
 custom | Function | null | See [section](#chart-configuration-custom-tooltips) below
 mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are `'single'` or `'label'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value.
+itemSort | Function | undefined | Allows sorting of [tooltip items](#chart-configuration-tooltip-item-interface). Must implement a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
 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 61c3e9a0b3f189b60da441b6012b2313ef2e4f91..e56ff0ec3f24a53bc1db49a2bcbb02ef3b96e06b 100644 (file)
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -272,6 +272,7 @@ module.exports = function(Chart) {
                        var opts = me._options;
                        var model = me._model;
                        var active = me._active;
+
                        var data = me._data;
                        var chartInstance = me._chartInstance;
 
@@ -280,8 +281,7 @@ module.exports = function(Chart) {
                        if (active.length) {
                                model.opacity = 1;
 
-                               var element = active[0],
-                                       labelColors = [],
+                               var labelColors = [],
                                        tooltipPosition = tooltipPosition = getAveragePosition(active);
 
                                var tooltipItems = [];
@@ -289,6 +289,11 @@ module.exports = function(Chart) {
                                        tooltipItems.push(createTooltipItem(active[i]));
                                }
 
+                               // If the user provided a sorting function, use it to modify the tooltip items
+                               if (opts.itemSort) {
+                                       tooltipItems = tooltipItems.sort(opts.itemSort);
+                               }
+
                                // If there is more than one item, show color items
                                if (active.length > 1) {
                                        helpers.each(tooltipItems, function(tooltipItem) {

diff --git a/test/core.tooltip.tests.js b/test/core.tooltip.tests.js
index 2141973afa32679dad18c2930d189920b4c5b71f..334fdf653e50400bed211f7becc80d0ed47d9bf3 100644 (file)
--- a/test/core.tooltip.tests.js
+++ b/test/core.tooltip.tests.js
@@ -372,4 +372,86 @@ describe('tooltip tests', function() {
                        }]
                }));
        });
+
+       it('Should display information from user callbacks', 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)'
+                               }, {
+                                       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',
+                                       itemSort: function(a, b) {
+                                               return a.datasetIndex > b.datasetIndex ? -1 : 1;
+                                       }
+                               }
+                       }
+               });
+
+               // Trigger an event over top of the 
+               var meta0 = chartInstance.getDatasetMeta(0);
+               var point0 = meta0.data[1];
+
+               var meta1 = chartInstance.getDatasetMeta(1);
+               var point1 = meta1.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: []
+                       }, {
+                               before: [],
+                               lines: ['Dataset 1: 20'],
+                               after: []
+                       }],
+                       afterBody: [],
+                       footer: [],
+                       x: 269,
+                       y: 155,
+                       labelColors: [{
+                               borderColor: 'rgb(0, 0, 255)',
+                               backgroundColor: 'rgb(0, 255, 255)'
+                       }, {
+                               borderColor: 'rgb(255, 0, 0)',
+                               backgroundColor: 'rgb(0, 255, 0)'
+                       }]
+               }));
+       });
 });