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

Fixes #4772: added scope for tooltip position mode call and added docs #4784

Merged
merged 4 commits into from
Oct 10, 2017
Merged
Show file tree
Hide file tree
Changes from 3 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
22 changes: 22 additions & 0 deletions docs/configuration/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,28 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g

New modes can be defined by adding functions to the Chart.Tooltip.positioners map.

Example:
```javascript
/**
* Custom positioner
* @function Chart.Tooltip.positioners.custom
* @param elements {Chart.Element[]} the tooltip elements
* @param eventPosition {Point} the position of the event in canvas coordinates
* @returns {Point} the tooltip position
*/
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
/** @type {Chart.Tooltip} */
var tooltip = this;

/* ... */

return {
x: 0,
y: 0
};
}
```

### Sort Callback

Allows sorting of [tooltip items](#tooltip-item-interface). Must implement at minimum a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). This function can also accept a third parameter that is the data object passed to the chart.
Expand Down
2 changes: 1 addition & 1 deletion src/core/core.tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ module.exports = function(Chart) {

var labelColors = [];
var labelTextColors = [];
tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);
tooltipPosition = Chart.Tooltip.positioners[opts.position].call(me, active, me._eventPosition);

var tooltipItems = [];
for (i = 0, len = active.length; i < len; ++i) {
Expand Down
59 changes: 59 additions & 0 deletions test/specs/core.tooltip.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -822,4 +822,63 @@ describe('Core.Tooltip', function() {
node.dispatchEvent(firstEvent);
expect(tooltip.update).not.toHaveBeenCalled();
});

describe('positioners', function() {
it('Should call custom positioner with correct parameters and scope', function() {

Chart.Tooltip.positioners.test = function(elements, eventPosition) {

expect(this instanceof Chart.Tooltip).toBe(true);
expect(elements instanceof Array).toBe(true);
expect(eventPosition.hasOwnProperty('x') && eventPosition.hasOwnProperty('y')).toBe(true);
Copy link
Member

Choose a reason for hiding this comment

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

It doesn't work because if the method is not called, then expectations are not evaluated. We could use spyOn instead to be sure that the method is actually called, something like that:

var scope = null;

Chart.Tooltip.positioners.test = function() {
    scope = this;
    return {x: 0, y: 0};
};

spyOn(Chart.Tooltip.positioners, 'test');

// {...}

node.dispatchEvent(evt);

var fn = Chart.Tooltip.positioners.test;
expect(fn.calls.count()).toBe(1);
expect(fn.calls.first().args[0] instanceof Array).toBe(true);
expect(fn.calls.first().args[1].hasOwnProperty('x')).toBe(true);
expect(fn.calls.first().args[1].hasOwnProperty('y')).toBe(true);
expect(scope instanceof Chart.Tooltip).toBe(true);


return {
x: 0,
y: 0
};
};

var chart = 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: 'nearest',
position: 'test'
}
}
});

// Trigger an event over top of the
var pointIndex = 1;
var datasetIndex = 0;
var meta = chart.getDatasetMeta(datasetIndex);
var point = meta.data[pointIndex];
var node = chart.canvas;
var rect = node.getBoundingClientRect();
var evt = new MouseEvent('mousemove', {
view: window,
bubbles: true,
cancelable: true,
clientX: rect.left + point._model.x,
clientY: rect.top + point._model.y
});

// Manually trigger rather than having an async test
node.dispatchEvent(evt);
});
});
});