Fix 3267 Add "onHover" functionality for legend (#3271)

Add "onHover" to the legend options that will hold a user defined function (default is null) and called when a "mousemove" event is registered on top of a label item, with same parameters as the "onClick" option.

Also introduced logic that determines if the type of event passed to the legend "handleEvent" function is one we can handle. Currently allowing "click" and "mousemove" events. If the event is not one of those we stop the function execution (this is for the sake of reusing the legend hitbox calculations).

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index 3b1a9d6a1a0fc63e6823e994df59b66859b71449..d4af29593573700b0a894c5e5a0a3b44aa520a60 100644 (file)
--- a/docs/01-Chart-Configuration.md
+++ b/docs/01-Chart-Configuration.md
@@ -127,7 +127,8 @@ Name | Type | Default | Description
 display | Boolean | true | Is the legend displayed
 position | String | 'top' | Position of the legend. Possible values are 'top', 'left', 'bottom' and 'right'.
 fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes)
-onClick | Function | `function(event, legendItem) {}` | A callback that is called when a click is registered on top of a label item
+onClick | Function | `function(event, legendItem) {}` | A callback that is called when a 'click' event is registered on top of a label item
+onHover | Function | `function(event, legendItem) {}` | A callback that is called when a 'mousemove' event is registered on top of a label item
 labels |Object|-| See the [Legend Label Configuration](#chart-configuration-legend-label-configuration) section below.
 
 #### Legend Label Configuration

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 2ee3712baf6bf74338712d3e35b2358f9923f17a..dc99400763ec3fcb3e9be706f3458c03014840ec 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -631,13 +631,14 @@ module.exports = function(Chart) {
                                hoverOptions.onHover.call(me, me.active);
                        }
 
+                       if (me.legend && me.legend.handleEvent) {
+                               me.legend.handleEvent(e);
+                       }
+
                        if (e.type === 'mouseup' || e.type === 'click') {
                                if (options.onClick) {
                                        options.onClick.call(me, e, me.active);
                                }
-                               if (me.legend && me.legend.handleEvent) {
-                                       me.legend.handleEvent(e);
-                               }
                        }
 
                        // Remove styling for last active (even if it may still be active)

diff --git a/src/core/core.legend.js b/src/core/core.legend.js
index 8d3ce3c099391cf33bbdd690d9fb2004976eb6bb..7691cab225c3e5bc0d3f52611362b24277a837b2 100644 (file)
--- a/src/core/core.legend.js
+++ b/src/core/core.legend.js
@@ -25,6 +25,8 @@ module.exports = function(Chart) {
                        ci.update();
                },
 
+               onHover: null,
+
                labels: {
                        boxWidth: 40,
                        padding: 10,
@@ -424,10 +426,24 @@ module.exports = function(Chart) {
                // Handle an event
                handleEvent: function(e) {
                        var me = this;
+                       var opts = me.options;
+                       var type = e.type === 'mouseup' ? 'click' : e.type;
+
+                       if (type === 'mousemove') {
+                               if (!opts.onHover) {
+                                       return;
+                               }
+                       } else if (type === 'click') {
+                               if (!opts.onClick) {
+                                       return;
+                               }
+                       } else {
+                               return;
+                       }
+
                        var position = helpers.getRelativePosition(e, me.chart.chart),
                                x = position.x,
-                               y = position.y,
-                               opts = me.options;
+                               y = position.y;
 
                        if (x >= me.left && x <= me.right && y >= me.top && y <= me.bottom) {
                                // See if we are touching one of the dataset boxes
@@ -437,10 +453,13 @@ module.exports = function(Chart) {
 
                                        if (x >= hitBox.left && x <= hitBox.left + hitBox.width && y >= hitBox.top && y <= hitBox.top + hitBox.height) {
                                                // Touching an element
-                                               if (opts.onClick) {
+                                               if (type === 'click') {
                                                        opts.onClick.call(me, e, me.legendItems[i]);
+                                                       break;
+                                               } else if (type === 'mousemove') {
+                                                       opts.onHover.call(me, e, me.legendItems[i]);
+                                                       break;
                                                }
-                                               break;
                                        }
                                }
                        }

diff --git a/test/core.legend.tests.js b/test/core.legend.tests.js
index 2db970f3f0f9658172c64a41f625fe1846425c4c..5b81898e03627040689ce84e3f96d1f77605c814 100644 (file)
--- a/test/core.legend.tests.js
+++ b/test/core.legend.tests.js
@@ -23,6 +23,7 @@ describe('Legend block tests', function() {
 
                        // a callback that will handle
                        onClick: jasmine.any(Function),
+                       onHover: null,
 
                        labels: {
                                boxWidth: 40,