diff --git a/packages/core/src/components/graphs/scatter-stacked.ts b/packages/core/src/components/graphs/scatter-stacked.ts index c788e81672..c06ab10611 100644 --- 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 index 94879bf3d3..2008411c8e 100644 --- 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