From 07abfd8f26796cde19227640e06b04ebdde83590 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Mon, 26 Nov 2018 09:26:18 +0200 Subject: [PATCH] nearest: return all Return all items that are at the nearest distance to the point. --- docs/general/interactions/modes.md | 2 +- src/core/core.interaction.js | 21 +-------- test/specs/core.interaction.tests.js | 64 ++-------------------------- 3 files changed, 5 insertions(+), 82 deletions(-) diff --git a/docs/general/interactions/modes.md b/docs/general/interactions/modes.md index 30c40616887..d6a8c261fba 100644 --- a/docs/general/interactions/modes.md +++ b/docs/general/interactions/modes.md @@ -20,7 +20,7 @@ var chart = new Chart(ctx, { ``` ## nearest -Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars. +Gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the `axis` setting to define which directions are used in distance calculation. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars. ```javascript var chart = new Chart(ctx, { diff --git a/src/core/core.interaction.js b/src/core/core.interaction.js index be85a080f76..9b99e53bb1b 100644 --- a/src/core/core.interaction.js +++ b/src/core/core.interaction.js @@ -243,26 +243,7 @@ module.exports = { var position = getRelativePosition(e, chart); options.axis = options.axis || 'xy'; var distanceMetric = getDistanceMetricForAxis(options.axis); - var nearestItems = getNearestItems(chart, position, options.intersect, distanceMetric); - - // We have multiple items at the same distance from the event. Now sort by smallest - if (nearestItems.length > 1) { - nearestItems.sort(function(a, b) { - var sizeA = a.getArea(); - var sizeB = b.getArea(); - var ret = sizeA - sizeB; - - if (ret === 0) { - // if equal sort by dataset index - ret = a._datasetIndex - b._datasetIndex; - } - - return ret; - }); - } - - // Return only 1 item - return nearestItems.slice(0, 1); + return getNearestItems(chart, position, options.intersect, distanceMetric); }, /** diff --git a/test/specs/core.interaction.tests.js b/test/specs/core.interaction.tests.js index 49cd3bd193d..ca6a4b3834c 100644 --- a/test/specs/core.interaction.tests.js +++ b/test/specs/core.interaction.tests.js @@ -363,37 +363,8 @@ describe('Core.Interaction', function() { expect(elements).toEqual([meta.data[0]]); }); - it ('should return the smallest item if more than 1 are at the same distance', function() { - var chart = this.chart; - var meta0 = chart.getDatasetMeta(0); - var meta1 = chart.getDatasetMeta(1); - - // Halfway between 2 mid points - var pt = { - x: meta0.data[1]._view.x, - y: (meta0.data[1]._view.y + meta1.data[1]._view.y) / 2 - }; - - var evt = { - type: 'click', - chart: chart, - native: true, // needed otherwise things its a DOM event - x: pt.x, - y: pt.y - }; - - // Nearest to 0,0 (top left) will be first point of dataset 2 - var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: false}); - expect(elements).toEqual([meta0.data[1]]); - }); - - it ('should return the lowest dataset index if size and area are the same', function() { + it ('should return all items at the same nearest distance', function() { var chart = this.chart; - // Make equal sized points at index: 1 - chart.data.datasets[0].pointRadius[1] = 10; - chart.update(); - - // Trigger an event over top of the var meta0 = chart.getDatasetMeta(0); var meta1 = chart.getDatasetMeta(1); @@ -411,9 +382,9 @@ describe('Core.Interaction', function() { y: pt.y }; - // Nearest to 0,0 (top left) will be first point of dataset 2 + // Both points are nearest var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: false}); - expect(elements).toEqual([meta0.data[1]]); + expect(elements).toEqual([meta0.data[1], meta1.data[1]]); }); }); @@ -521,35 +492,6 @@ describe('Core.Interaction', function() { var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true}); expect(elements).toEqual([meta0.data[1]]); }); - - it ('should return the item at the lowest dataset index if distance and area are the same', function() { - var chart = this.chart; - chart.data.datasets[0].pointRadius = [5, 10, 5]; - chart.data.datasets[0].data[1] = 40; - - chart.data.datasets[1].pointRadius = [10, 10, 10]; - - // Trigger an event over top of the - var meta0 = chart.getDatasetMeta(0); - - // Halfway between 2 mid points - var pt = { - x: meta0.data[1]._view.x, - y: meta0.data[1]._view.y - }; - - var evt = { - type: 'click', - chart: chart, - native: true, // needed otherwise things its a DOM event - x: pt.x, - y: pt.y - }; - - // Nearest to 0,0 (top left) will be first point of dataset 2 - var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true}); - expect(elements).toEqual([meta0.data[1]]); - }); }); });