Merge pull request carbon-design-system#652 from navjeets/master

* fix(scatter): multi-tooltip doesn't show on hover over data points carbon-design-system#650 * fix(scatter): multi-tooltip doesn't show on hover over data points * fix(scatter): multi-tooltip doesn't show on hover over data points carbon-design-system#650 * Changelog * fix(scatter): multi-tooltip doesn't show on hover over data points carbon-design-system#650 * Update scatter.ts * fix(scatter): multi-tooltip doesn't show on hover over data points carbon-design-system#650 * fix(scatter): multi-tooltip doesn't show on hover over data points carbon-design-system#650 * Update scatter.ts * fix(scatter): multi-tooltip doesn't show on hover over data points carbon-design-system#650 * Update scatter.ts * resolved conflicts with master Co-authored-by: NAVJEET SANDHU <nsandhu@us.ibm.com> Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>
theiliad · Jun 12, 2020 · f826be7 · f826be7
1 parent 9f7a47c
commit f826be7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/packages/core/demo/data/line.ts b/packages/core/demo/data/line.ts
@@ -1,7 +1,7 @@
 import { timeFormat } from "d3";
 
 export const lineData = [
-	{ group: "Dataset 1", key: "Qty", value: 32100 },
+	{ group: "Dataset 1", key: "Qty", value: 34200 },
 	{ group: "Dataset 1", key: "More", value: 23500 },
 	{ group: "Dataset 1", key: "Sold", value: 53100 },
 	{ group: "Dataset 1", key: "Restocking", value: 42300 },
@@ -44,7 +44,7 @@ export const lineOptions = {
 };
 
 export const lineTimeSeriesData = [
-	{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 10000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 50000 },
 	{ group: "Dataset 1", date: new Date(2019, 0, 5), value: 65000 },
 	{ group: "Dataset 1", date: new Date(2019, 0, 8), value: null },
 	{ group: "Dataset 1", date: new Date(2019, 0, 13), value: 49213 },

diff --git a/packages/core/demo/data/scatter.ts b/packages/core/demo/data/scatter.ts
@@ -5,6 +5,7 @@ export const doubleLinearScatterData = [
 	{ group: "Dataset 1", employees: 3000, sales: 25100 },
 	{ group: "Dataset 1", employees: 8000, sales: 12100 },
 	{ group: "Dataset 1", employees: 4000, sales: 53100 },
+	{ group: "Dataset 2", employees: 5000, sales: 32100 },
 	{ group: "Dataset 2", employees: 2000, sales: 34100 },
 	{ group: "Dataset 2", employees: 4000, sales: 23100 },
 	{ group: "Dataset 2", employees: 7000, sales: 14100 },
@@ -28,7 +29,7 @@ export const doubleLinearScatterOptions = {
 };
 
 export const scatterDiscreteData = [
-	{ group: "Dataset 1", key: "Qty", value: 32100 },
+	{ group: "Dataset 1", key: "Qty", value: 34200 },
 	{ group: "Dataset 1", key: "More", value: 23500 },
 	{ group: "Dataset 1", key: "Sold", value: 53100 },
 	{ group: "Dataset 1", key: "Restocking", value: 42300 },

diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts
@@ -295,6 +295,33 @@ export class Scatter extends Component {
 						)
 					);
 
+				const hoveredX = self.services.cartesianScales.getDomainValue(
+					datum
+				);
+				const hoveredY = self.services.cartesianScales.getRangeValue(
+					datum
+				);
+				const overlappingData = self.model
+					.getDisplayData()
+					.filter((d) => {
+						return (
+							hoveredX ===
+								self.services.cartesianScales.getDomainValue(
+									d
+								) &&
+							hoveredY ===
+								self.services.cartesianScales.getRangeValue(d)
+						);
+					});
+
+				// Show tooltip
+				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+					hoveredElement,
+					multidata:
+						overlappingData.length > 1 ? overlappingData : null,
+					type: TooltipTypes.DATAPOINT,
+				});
+
 				const eventNameToDispatch =
 					d3Event.type === "mouseover"
 						? Events.Scatter.SCATTER_MOUSEOVER
@@ -304,12 +331,6 @@ export class Scatter extends Component {
 					element: hoveredElement,
 					datum,
 				});
-
-				// Show tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-					hoveredElement,
-					type: TooltipTypes.DATAPOINT,
-				});
 			})
 			.on("click", function (datum) {
 				// Dispatch mouse event