Hover styling for dataset in 'dataset' mode (#6527)

* Hover styling for dataset in 'dataset' mode

diff --git a/docs/charts/line.md b/docs/charts/line.md
index 0ad8773018211af65e046618c47d9bcdb4f92020..cca8bb655431aaa673cde6150e0e38c93730b94c 100644 (file)
--- a/docs/charts/line.md
+++ b/docs/charts/line.md
@@ -52,6 +52,13 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
 | [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
 | [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
+| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
+| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
+| [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
+| [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
+| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
 | [`label`](#general) | `string` | - | - | `''`
 | [`lineTension`](#line-styling) | `number` | - | - | `0.4`
 | [`order`](#general) | `number` | - | - | `0`

diff --git a/docs/charts/radar.md b/docs/charts/radar.md
index 942425ed81896001c06deb2148fef98de308f8b3..7ec74026627db80deef2fc049d9005328ee5d9fa 100644 (file)
--- a/docs/charts/radar.md
+++ b/docs/charts/radar.md
@@ -74,6 +74,13 @@ The radar chart allows a number of properties to be specified for each dataset.
 | [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
 | [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
 | [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
+| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
+| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
+| [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
+| [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
+| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
 | [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
 | [`label`](#general) | `string` | - | - | `''`
 | [`order`](#general) | `number` | - | - | `0`

diff --git a/docs/general/options.md b/docs/general/options.md
index a43ad3f191236bea07bdf56ca39806019c8ebfbb..f34789b3d3d385965c02f12e4596b687f6ab3d3a 100644 (file)
--- a/docs/general/options.md
+++ b/docs/general/options.md
@@ -43,5 +43,6 @@ The context object contains the following properties:
 - `dataIndex`: index of the current data
 - `dataset`: dataset at index `datasetIndex`
 - `datasetIndex`: index of the current dataset
+- `hover`: true if hovered
 
 **Important**: since the context can represent different types of entities (dataset, data, etc.), some properties may be `undefined` so be sure to test any context property before using it.

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 32413c3b8ad5d3e6914dabfbed9bec3475632bf2..98cffef2673dbfb5d08feaba328d7a4356b03332 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -989,15 +989,19 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
        },
 
        updateHoverStyle: function(elements, mode, enabled) {
-               var method = enabled ? 'setHoverStyle' : 'removeHoverStyle';
+               var prefix = enabled ? 'set' : 'remove';
                var element, i, ilen;
 
                for (i = 0, ilen = elements.length; i < ilen; ++i) {
                        element = elements[i];
                        if (element) {
-                               this.getDatasetMeta(element._datasetIndex).controller[method](element);
+                               this.getDatasetMeta(element._datasetIndex).controller[prefix + 'HoverStyle'](element);
                        }
                }
+
+               if (mode === 'dataset') {
+                       this.getDatasetMeta(elements[0]._datasetIndex).controller['_' + prefix + 'DatasetHoverStyle']();
+               }
        },
 
        /**

diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
index 0df3ed60206b6b8aaf435e4ac9b17edd853020f0..2d8972e6e2fa4bae1c31931cf1857988d90dd101 100644 (file)
--- a/src/core/core.datasetController.js
+++ b/src/core/core.datasetController.js
@@ -356,7 +356,7 @@ helpers.extend(DatasetController.prototype, {
        /**
         * @private
         */
-       _resolveDatasetElementOptions: function(element) {
+       _resolveDatasetElementOptions: function(element, hover) {
                var me = this;
                var chart = me.chart;
                var datasetOpts = me._config;
@@ -364,21 +364,23 @@ helpers.extend(DatasetController.prototype, {
                var options = chart.options.elements[me.datasetElementType.prototype._type] || {};
                var elementOptions = me._datasetElementOptions;
                var values = {};
-               var i, ilen, key;
+               var i, ilen, key, readKey;
 
                // Scriptable options
                var context = {
                        chart: chart,
                        dataset: me.getDataset(),
-                       datasetIndex: me.index
+                       datasetIndex: me.index,
+                       hover: hover
                };
 
                for (i = 0, ilen = elementOptions.length; i < ilen; ++i) {
                        key = elementOptions[i];
+                       readKey = hover ? 'hover' + key.charAt(0).toUpperCase() + key.slice(1) : key;
                        values[key] = resolve([
-                               custom[key],
-                               datasetOpts[key],
-                               options[key]
+                               custom[readKey],
+                               datasetOpts[readKey],
+                               options[readKey]
                        ], context);
                }
 
@@ -468,6 +470,42 @@ helpers.extend(DatasetController.prototype, {
                model.borderWidth = resolve([custom.hoverBorderWidth, dataset.hoverBorderWidth, model.borderWidth], undefined, index);
        },
 
+       /**
+        * @private
+        */
+       _removeDatasetHoverStyle: function() {
+               var element = this.getMeta().dataset;
+
+               if (element) {
+                       this.removeHoverStyle(element);
+               }
+       },
+
+       /**
+        * @private
+        */
+       _setDatasetHoverStyle: function() {
+               var element = this.getMeta().dataset;
+               var prev = {};
+               var i, ilen, key, keys, hoverOptions, model;
+
+               if (!element) {
+                       return;
+               }
+
+               model = element._model;
+               hoverOptions = this._resolveDatasetElementOptions(element, true);
+
+               keys = Object.keys(hoverOptions);
+               for (i = 0, ilen = keys.length; i < ilen; ++i) {
+                       key = keys[i];
+                       prev[key] = model[key];
+                       model[key] = hoverOptions[key];
+               }
+
+               element.$previousStyle = prev;
+       },
+
        /**
         * @private
         */

diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js
index 953594deac130c72909ed4dc0b3d9566ae85d413..ca792f4e57363cd5e27ec9c80d9ea40630fd9b3e 100644 (file)
--- a/test/specs/controller.line.tests.js
+++ b/test/specs/controller.line.tests.js
@@ -895,6 +895,34 @@ describe('Chart.controllers.line', function() {
                        expect(point._model.borderWidth).toBe(2);
                        expect(point._model.radius).toBe(3);
                });
+
+               it ('should handle dataset hover styles defined via dataset properties', function() {
+                       var chart = this.chart;
+                       var point = chart.getDatasetMeta(0).data[0];
+                       var dataset = chart.getDatasetMeta(0).dataset;
+
+                       Chart.helpers.merge(chart.data.datasets[0], {
+                               backgroundColor: '#AAA',
+                               borderColor: '#BBB',
+                               borderWidth: 6,
+                               hoverBackgroundColor: '#000',
+                               hoverBorderColor: '#111',
+                               hoverBorderWidth: 12
+                       });
+
+                       chart.options.hover = {mode: 'dataset'};
+                       chart.update();
+
+                       jasmine.triggerMouseEvent(chart, 'mousemove', point);
+                       expect(dataset._model.backgroundColor).toBe('#000');
+                       expect(dataset._model.borderColor).toBe('#111');
+                       expect(dataset._model.borderWidth).toBe(12);
+
+                       jasmine.triggerMouseEvent(chart, 'mouseout', point);
+                       expect(dataset._model.backgroundColor).toBe('#AAA');
+                       expect(dataset._model.borderColor).toBe('#BBB');
+                       expect(dataset._model.borderWidth).toBe(6);
+               });
        });
 
        it('should allow 0 as a point border width', function() {