From 3ee694dc18218a113ea1bfb4b296dcfe334e4202 Mon Sep 17 00:00:00 2001
From: Jae Sung Park <alberto.park@gmail.com>
Date: Wed, 29 Aug 2018 15:36:05 +0900
Subject: [PATCH] fix(tooltip): Enhancement for overlapped points

Show overlapped data points tooltip as grouped even tooltip.grouped=false is set.

Fix #568
Close #569
---
 spec/internals/tooltip-spec.js  | 22 ++++++++++++++++++++--
 src/config/Options.js           |  1 +
 src/interactions/interaction.js | 18 ++++++++++--------
 src/shape/line.js               |  2 +-
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/spec/internals/tooltip-spec.js b/spec/internals/tooltip-spec.js
index 52f3df667..92dc9317b 100644
--- a/spec/internals/tooltip-spec.js
+++ b/spec/internals/tooltip-spec.js
@@ -39,9 +39,9 @@ describe("TOOLTIP", function() {
 	const spy2 = sinon.spy();
 
 	// hover chart
-	const hoverChart = (hoverChart, eventName = "mousemove", pos = {clientX: 100, clientY: 100}) => {
+	const hoverChart = (hoverChart, eventName = "mousemove", pos = {clientX: 100, clientY: 100}, dataIndex = 2) => {
 		const eventRect = hoverChart.$.main
-			.select(`.${CLASS.eventRect}-2`)
+			.select(`.${CLASS.eventRect}-${dataIndex}`)
 			.node();
 
 		util.fireEvent(eventRect, eventName, pos, hoverChart);
@@ -615,5 +615,23 @@ describe("TOOLTIP", function() {
 
 			expect(value).to.be.equal(1000);
 		});
+
+		it("check for overlapped data points", () => {
+			const expectedData = {
+				data1: 500,
+				data3: 500
+			};
+
+			// check for custom point shape
+			hoverChart(chart, undefined, {clientX: 581, clientY: 214}, 4);
+
+			chart.$.tooltip.selectAll(".name")
+				.each(function() {
+					const name = this.textContent;
+
+					expect(name in expectedData).to.be.true;
+					expect(+this.nextSibling.textContent).to.be.equal(expectedData[name]);
+				});
+		});
 	});
 });
diff --git a/src/config/Options.js b/src/config/Options.js
index 577ef044d..3d45a982a 100644
--- a/src/config/Options.js
+++ b/src/config/Options.js
@@ -2715,6 +2715,7 @@ export default class Options {
 			 * @type {Object}
 			 * @property {Boolean} [tooltip.show=true] Show or hide tooltip.<br>
 			 * @property {Boolean} [tooltip.grouped=true] Set if tooltip is grouped or not for the data points.
+			 *   - **NOTE:** The overlapped data points will be displayed as grouped even if set false.
 			 * @property {Boolean} [tooltip.linked=false] Set if tooltips on all visible charts with like x points are shown together when one is shown.
 			 * @property {String} [tooltip.linked.name=""] Groping name for linked tooltip.<br>If specified, linked tooltip will be groped interacting to be worked only with the same name.
 			 * @property {Function} [tooltip.format.title] Set format for the title of tooltip.<br>
diff --git a/src/interactions/interaction.js b/src/interactions/interaction.js
index 2507dfde6..c6de1019d 100644
--- a/src/interactions/interaction.js
+++ b/src/interactions/interaction.js
@@ -309,17 +309,19 @@ extend(ChartInternal.prototype, {
 			.filter(function(d) {
 				return $$.isWithinShape(this, d);
 			})
-			.each(function(d) {
-				if (isSelectionEnabled) {
-					if (isSelectionGrouped || config.data_selection_isselectable(d)) {
-						eventRect.style("cursor", "pointer");
-					}
+			.call(selected => {
+				const d = selected.data();
+
+				if (isSelectionEnabled && (isSelectionGrouped || config.data_selection_isselectable(d))) {
+					eventRect.style("cursor", "pointer");
 				}
 
 				if (!isTooltipGrouped) {
-					$$.showTooltip([d], this);
-					$$.showXGridFocus([d]);
-					$$.expandCirclesBars(index, d.id, true);
+					$$.showTooltip(d, context);
+					$$.showXGridFocus(d);
+
+					$$.unexpandCircles();
+					selected.each(d => $$.expandCirclesBars(index, d.id));
 				}
 			});
 	},
diff --git a/src/shape/line.js b/src/shape/line.js
index edc401230..69a7e6a19 100644
--- a/src/shape/line.js
+++ b/src/shape/line.js
@@ -576,7 +576,7 @@ extend(ChartInternal.prototype, {
 			circles.attr("r", r);
 		} else {
 			// transform must be applied to each node individually
-			circles.each(function(d) {
+			circles.each(function() {
 				const point = d3Select(this);
 
 				const box = this.getBBox();