Merge pull request #764 from hlyang397/fix-scatter-stacked-tooltip

* fix: stacked scatter tooltip not show - abstract getTooltipData function to allow override - implement getTooltipData function in scatter-stacked with stacked data * refactor: change variable name from data to datum
carbon-design-system · Sep 1, 2020 · 577dc4e · 577dc4e
1 parent 2366835
commit 577dc4e
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 14 deletions.
diff --git a/packages/core/src/components/graphs/scatter-stacked.ts b/packages/core/src/components/graphs/scatter-stacked.ts
@@ -66,4 +66,48 @@ export class StackedScatter extends Scatter {
 		// Add event listeners to elements drawn
 		this.addEventListeners();
 	}
+
+	getTooltipData(hoveredX, hoveredY) {
+		const domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
+		const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
+		const options = this.model.getOptions();
+		const { groupMapsTo } = options.data;
+		const percentage = Object.keys(options.axes).some(
+			(axis) => options.axes[axis].percentage
+		);
+		const stackedData = this.model.getStackedData({ percentage });
+		const tooltipData = [];
+		stackedData.forEach((groupData, groupDataIndex) => {
+			groupData.forEach((datum, dataIndex) => {
+				const group = datum[groupMapsTo];
+				const domainValue = datum["data"]["sharedStackKey"];
+				let rangeValue = datum["data"][group];
+				const stackedRangeValue = datum[1];
+				if (
+					rangeValue &&
+					hoveredX ===
+						this.services.cartesianScales.getDomainValue(
+							domainValue
+						) &&
+					hoveredY ===
+						this.services.cartesianScales.getRangeValue(
+							stackedRangeValue
+						)
+				) {
+					if (percentage) {
+						rangeValue = this.model.getStackedData()[
+							groupDataIndex
+						][dataIndex]["data"][group];
+					}
+
+					tooltipData.push({
+						[groupMapsTo]: group,
+						[domainIdentifier]: domainValue,
+						[rangeIdentifier]: rangeValue
+					});
+				}
+			});
+		});
+		return tooltipData;
+	}
 }
diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts
@@ -292,6 +292,15 @@ export class Scatter extends Component {
 			.attr("opacity", 1);
 	}
 
+	getTooltipData(hoveredX, hoveredY) {
+		return this.model.getDisplayData().filter((d) => {
+			return (
+				hoveredX === this.services.cartesianScales.getDomainValue(d) &&
+				hoveredY === this.services.cartesianScales.getRangeValue(d)
+			);
+		});
+	}
+
 	addEventListeners() {
 		const self = this;
 		const { groupMapsTo } = this.model.getOptions().data;
@@ -318,23 +327,11 @@ export class Scatter extends Component {
 				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)
-						);
-					});
-
+				const tooltipData = self.getTooltipData(hoveredX, hoveredY);
 				// Show tooltip
 				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
 					hoveredElement,
-					data: overlappingData
+					data: tooltipData
 				});
 
 				// Dispatch mouse event