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.

Sign up for GitHub

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

Jump to bottom

Hover styling for dataset in 'dataset' mode #6527

Merged
merged 5 commits into from Oct 25, 2019
Merged

Hover styling for dataset in 'dataset' mode #6527

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f71809c
Hover styling for dataset in 'dataset' mode
kurkle Sep 18, 2019
43ea2b4
Review comments, documentation
kurkle Sep 18, 2019
a637ebc
review comments
kurkle Oct 22, 2019
1b747a2
docs, cc
kurkle Oct 22, 2019
b7e92e0
make methods private
kurkle Oct 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/charts/line.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
44 changes: 38 additions & 6 deletions src/core/core.datasetController.js
View file
Open in desktop
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,36 @@ helpers.extend(DatasetController.prototype, {
model.borderWidth = resolve([custom.hoverBorderWidth, dataset.hoverBorderWidth, model.borderWidth], undefined, index);
},

removeDatasetHoverStyle: function() {
var element = this.getMeta().dataset;

if (element) {
this.removeHoverStyle(element);
}
},

setDatasetHoverStyle: function() {
benmccann marked this conversation as resolved.
Show resolved Hide resolved
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
View file
Open in desktop
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