Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hover styling for dataset in 'dataset' mode #6527

Merged
merged 5 commits into from
Oct 25, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/charts/line.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we document hoverCubicInterpolationMode and hoverFill?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neither of those work. We are not going through update on hover, just updating the model with options and then render.
So bezier control points don't get updated.
I did not investigate why hoverFill does not work.

| [`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`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
Expand Down
7 changes: 7 additions & 0 deletions docs/charts/radar.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,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` | - | - | `''`
| [`lineTension`](#line-styling) | `number` | - | - | `0`
Expand Down
1 change: 1 addition & 0 deletions docs/general/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
8 changes: 6 additions & 2 deletions src/core/core.controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -955,15 +955,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']();
}
},

/**
Expand Down
50 changes: 44 additions & 6 deletions src/core/core.datasetController.js
Original file line number Diff line number Diff line change
Expand Up @@ -356,29 +356,31 @@ helpers.extend(DatasetController.prototype, {
/**
* @private
*/
_resolveDatasetElementOptions: function(element) {
_resolveDatasetElementOptions: function(element, hover) {
var me = this;
var chart = me.chart;
var datasetOpts = me._config;
var custom = element.custom || {};
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);
}

Expand Down Expand Up @@ -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
*/
Expand Down
28 changes: 28 additions & 0 deletions test/specs/controller.line.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down