feat : Added boxplot stats as tooltip for axis label

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={
                     <VictoryLabel dy={this.yAxisLabelVertOffset} />
                 }
+                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<
                 >
                     <div>
                         {this.props.boxPlotTooltip(
-                            [this.boxPlotTooltipModel.datum],
-                            [
-                                this.props.data[
-                                    this.boxPlotTooltipModel.datum.eventKey
-                                ].label,
-                            ]
+                            [tooltipModel.datum],
+                            [this.props.data[eventKey]?.label]
                         )}
                     </div>
                 </Popover>,
@@ -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 <div className={'alert alert-info'}>No data to plot.</div>;
@@ -999,6 +1054,7 @@ export default class BoxScatterPlot<
                 <Observer>{this.getChart}</Observer>
                 <Observer>{this.getScatterPlotTooltip}</Observer>
                 <Observer>{this.getBoxPlotTooltipComponent}</Observer>
+                <Observer>{this.getAxisLabelTooltipComponent}</Observer>
             </div>
         );
     }