diff --git a/src/shared/components/plots/BoxScatterPlot.tsx b/src/shared/components/plots/BoxScatterPlot.tsx index 49b987763cb..0c9b217969b 100644 --- a/src/shared/components/plots/BoxScatterPlot.tsx +++ b/src/shared/components/plots/BoxScatterPlot.tsx @@ -102,6 +102,7 @@ export type BoxModel = { q3: number; x?: number; y?: number; + eventkey?: number; sortedVector: number[]; }; @@ -168,6 +169,7 @@ export default class BoxScatterPlot< @observable.ref private container: HTMLDivElement; @observable.ref private boxPlotTooltipModel: any | null; @observable private mousePosition = { x: 0, y: 0 }; + @observable.ref private axisLabelTooltipModel: any | null; private scatterPlotTooltipHelper: ScatterPlotTooltipHelper = new ScatterPlotTooltipHelper(); @@ -224,6 +226,41 @@ export default class BoxScatterPlot< } return []; } + private get axisLabelEvents() { + if (this.props.boxPlotTooltip) { + const self = this; + return [ + { + target: 'tickLabels', + eventHandlers: { + onMouseEnter: (event: any, props: any) => { + const groupIndex = props.index; + if ( + groupIndex !== undefined && + self.boxPlotData[groupIndex] + ) { + self.axisLabelTooltipModel = { + datum: self.boxPlotData[groupIndex], + eventkey: groupIndex, + }; + self.mousePosition = { + x: event.pageX, + y: event.pageY, + }; + } + return []; + }, + + onMouseLeave: () => { + self.axisLabelTooltipModel = null; + return []; + }, + }, + }, + ]; + } + return []; + } private get title() { if (this.props.title) { @@ -641,6 +678,7 @@ export default class BoxScatterPlot< } /> } + events={this.axisLabelEvents} /> ); } @@ -687,6 +725,7 @@ export default class BoxScatterPlot< axisLabelComponent={ } + events={this.axisLabelEvents} /> ); } @@ -800,6 +839,7 @@ export default class BoxScatterPlot< } else { box.x = this.categoryCoord(i); } + box.eventkey = i; }; return toBoxPlotData( @@ -941,13 +981,14 @@ export default class BoxScatterPlot< } @autobind - private getBoxPlotTooltipComponent() { - if ( - this.container && - this.boxPlotTooltipModel && - this.props.boxPlotTooltip - ) { + private getTooltipComponent( + tooltipModel: any, + verticalOffsetAdjustment: number + ) { + if (this.container && tooltipModel && this.props.boxPlotTooltip) { const maxWidth = 400; + const eventKey = + tooltipModel.datum.eventKey ?? tooltipModel.datum.eventkey; let tooltipPlacement = this.mousePosition.x > WindowStore.size.width - maxWidth ? 'left' @@ -962,7 +1003,9 @@ export default class BoxScatterPlot< ? -HORIZONTAL_OFFSET : HORIZONTAL_OFFSET) } - positionTop={this.mousePosition.y - VERTICAL_OFFSET} + positionTop={ + this.mousePosition.y + verticalOffsetAdjustment + } style={{ transform: tooltipPlacement === 'left' @@ -974,12 +1017,8 @@ export default class BoxScatterPlot< >
{this.props.boxPlotTooltip( - [this.boxPlotTooltipModel.datum], - [ - this.props.data[ - this.boxPlotTooltipModel.datum.eventKey - ].label, - ] + [tooltipModel.datum], + [this.props.data[eventKey]?.label] )}
, @@ -990,6 +1029,22 @@ export default class BoxScatterPlot< } } + @autobind + private getBoxPlotTooltipComponent() { + return this.getTooltipComponent( + this.boxPlotTooltipModel, + -VERTICAL_OFFSET + ); + } + + @autobind + private getAxisLabelTooltipComponent() { + return this.getTooltipComponent( + this.axisLabelTooltipModel, + VERTICAL_OFFSET + ); + } + render() { if (!this.props.data.length) { return
No data to plot.
; @@ -999,6 +1054,7 @@ export default class BoxScatterPlot< {this.getChart} {this.getScatterPlotTooltip} {this.getBoxPlotTooltipComponent} + {this.getAxisLabelTooltipComponent} ); }