Reset tooltip when calling Chart.update (#4840)

This commit is contained in:
Evert Timberg
2017-10-28 04:20:34 -04:00
committed by Simon Brunel
parent 26c1936dee
commit 13e9676625
3 changed files with 57 additions and 0 deletions

View File

@@ -371,6 +371,14 @@ module.exports = function(Chart) {
me.updateDatasets();
// Need to reset tooltip in case it is displayed with elements that are removed
// after update.
me.tooltip.initialize();
// Last active contains items that were previously in the tooltip.
// When we reset the tooltip, we need to clear it
me.lastActive = [];
// Do this before render so that any plugins that need final scale updates can use it
plugins.notify(me, 'afterUpdate');

View File

@@ -384,6 +384,7 @@ module.exports = function(Chart) {
Chart.Tooltip = Element.extend({
initialize: function() {
this._model = getBaseModel(this._options);
this._lastActive = [];
},
// Get the title

View File

@@ -822,6 +822,54 @@ describe('Chart', function() {
expect(chart.tooltip._options).toEqual(jasmine.objectContaining(newTooltipConfig));
});
it ('should reset the tooltip on update', function() {
var chart = acquireChart({
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
data: [10, 20, 30, 100]
}]
},
options: {
responsive: true,
tooltip: {
mode: 'nearest'
}
}
});
// Trigger an event over top of a point to
// put an item into the tooltip
var meta = chart.getDatasetMeta(0);
var point = meta.data[1];
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: 0
});
// Manually trigger rather than having an async test
node.dispatchEvent(evt);
// Check and see if tooltip was displayed
var tooltip = chart.tooltip;
expect(chart.lastActive).toEqual([point]);
expect(tooltip._lastActive).toEqual([]);
// Update and confirm tooltip is reset
chart.update();
expect(chart.lastActive).toEqual([]);
expect(tooltip._lastActive).toEqual([]);
});
it ('should update the metadata', function() {
var cfg = {
data: {