mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Tooltip fixes (getLabelAndValue on null controller, null getParsed) (#11596)
* Fix for getLabelAndValue on null controller I encountered #11315 under the following circumstances: 1. Position the cursor over the chart area, such that it causes a tooltip to be shown. 2. Move the cursor out of the chart area, such that the tooltip remains visible. 3. Cause the chart contents to be changed, such that the dataset referenced by the active tooltip element is no longer valid. 4. Move the mouse again. This triggers an `inChartArea = false` event, so it reuses the previous, now invalid, active elements. This fixes #11315 under the circumstances for which I've reproduced it, but there may be others. * Further fixes for elements added / changed This possibly fixes #11365.
This commit is contained in:
parent
e92d10445b
commit
429d99dbc2
@ -1182,7 +1182,11 @@ export class Tooltip extends Element {
|
||||
|
||||
if (!inChartArea) {
|
||||
// Let user control the active elements outside chartArea. Eg. using Legend.
|
||||
return lastActive;
|
||||
// But make sure that active elements are still valid.
|
||||
return lastActive.filter(i =>
|
||||
this.chart.data.datasets[i.datasetIndex] &&
|
||||
this.chart.getDatasetMeta(i.datasetIndex).controller.getParsed(i.index) !== undefined
|
||||
);
|
||||
}
|
||||
|
||||
// Find Active Elements for tooltips
|
||||
|
@ -1667,6 +1667,91 @@ describe('Plugin.Tooltip', function() {
|
||||
});
|
||||
});
|
||||
|
||||
it('should tolerate datasets removed on events outside chartArea', async function() {
|
||||
const dataset1 = {
|
||||
label: 'Dataset 1',
|
||||
data: [10, 20, 30],
|
||||
};
|
||||
const dataset2 = {
|
||||
label: 'Dataset 2',
|
||||
data: [10, 25, 35],
|
||||
};
|
||||
const chart = window.acquireChart({
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [dataset1, dataset2],
|
||||
labels: ['Point 1', 'Point 2', 'Point 3']
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const meta = chart.getDatasetMeta(0);
|
||||
const point = meta.data[1];
|
||||
const expectedPoints = [jasmine.objectContaining({datasetIndex: 0, index: 1}), jasmine.objectContaining({datasetIndex: 1, index: 1})];
|
||||
|
||||
await jasmine.triggerMouseEvent(chart, 'mousemove', point);
|
||||
await jasmine.triggerMouseEvent(chart, 'mousemove', {x: chart.chartArea.left - 5, y: point.y});
|
||||
|
||||
expect(chart.tooltip.getActiveElements()).toEqual(expectedPoints);
|
||||
|
||||
chart.data.datasets = [dataset1];
|
||||
chart.update();
|
||||
|
||||
await jasmine.triggerMouseEvent(chart, 'mousemove', {x: 2, y: 1});
|
||||
|
||||
expect(chart.tooltip.getActiveElements()).toEqual([expectedPoints[0]]);
|
||||
});
|
||||
|
||||
it('should tolerate elements removed on events outside chartArea', async function() {
|
||||
const dataset1 = {
|
||||
label: 'Dataset 1',
|
||||
data: [10, 20, 30],
|
||||
};
|
||||
const dataset2 = {
|
||||
label: 'Dataset 2',
|
||||
data: [10, 25, 35],
|
||||
};
|
||||
const chart = window.acquireChart({
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [dataset1, dataset2],
|
||||
labels: ['Point 1', 'Point 2', 'Point 3']
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const meta = chart.getDatasetMeta(0);
|
||||
const point = meta.data[1];
|
||||
const expectedPoints = [jasmine.objectContaining({datasetIndex: 0, index: 1}), jasmine.objectContaining({datasetIndex: 1, index: 1})];
|
||||
|
||||
await jasmine.triggerMouseEvent(chart, 'mousemove', point);
|
||||
await jasmine.triggerMouseEvent(chart, 'mousemove', {x: chart.chartArea.left - 5, y: point.y});
|
||||
|
||||
expect(chart.tooltip.getActiveElements()).toEqual(expectedPoints);
|
||||
|
||||
dataset1.data = dataset1.data.slice(0, 1);
|
||||
chart.data.datasets = [dataset1];
|
||||
chart.update();
|
||||
|
||||
await jasmine.triggerMouseEvent(chart, 'mousemove', {x: 2, y: 1});
|
||||
|
||||
expect(chart.tooltip.getActiveElements()).toEqual([]);
|
||||
});
|
||||
|
||||
describe('events', function() {
|
||||
it('should not be called on events not in plugin events array', async function() {
|
||||
var chart = window.acquireChart({
|
||||
|
Loading…
Reference in New Issue
Block a user