feat: Shift HoverAnnotationDot to top when needed

Author: bprusinowski

app/charts/shared/interaction/hover-annotation-dot.tsx

@@ -1,6 +1,7 @@
 import { AreasState } from "@/charts/area/areas-state";
 import { StackedBarsState } from "@/charts/bar/bars-stacked-state";
 import { StackedColumnsState } from "@/charts/column/columns-stacked-state";
+import { ColumnsState } from "@/charts/column/columns-state";
 import { LinesState } from "@/charts/line/lines-state";
 import { PieState } from "@/charts/pie/pie-state";
 import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
@@ -13,6 +14,7 @@ export const HoverAnnotationDot = () => {
   const [interaction] = useInteraction();
   const {
     chartType,
+    segments,
     getTooltipInfo,
     bounds: { margins },
     getSegmentLabel,
@@ -22,6 +24,7 @@ export const HoverAnnotationDot = () => {
     | PieState
     | ScatterplotState
     | StackedBarsState
+    | ColumnsState
     | StackedColumnsState;
 
   if (
@@ -42,7 +45,13 @@ export const HoverAnnotationDot = () => {
   }
 
   const value = values?.find((v) => v.label === segmentLabel) ?? datum;
-  const { x, y } = getPosition({ chartType, xAnchor, yAnchor, value });
+  const { x, y } = getPosition({
+    chartType,
+    shiftToTop: segments.length <= 1,
+    xAnchor,
+    yAnchor,
+    value,
+  });
 
   if (!value || value.hide || x === undefined || y === undefined) {
     return null;
@@ -60,25 +69,41 @@ export const HoverAnnotationDot = () => {
 
 const getPosition = ({
   chartType,
+  shiftToTop,
   xAnchor,
   yAnchor,
   value,
 }: {
   chartType: "area" | "bar" | "column" | "line" | "pie" | "scatterplot";
+  shiftToTop?: boolean;
   xAnchor: number;
   yAnchor: number | undefined;
   value: TooltipValue | undefined;
 }) => {
+  const axisOffset = shiftToTop ? -16 : 0;
+
   switch (chartType) {
     case "area":
     case "column":
-    case "line":
-      return { x: xAnchor, y: value?.axisOffset };
+    case "line": {
+      const y = value?.axisOffset ?? yAnchor;
+
+      return {
+        x: xAnchor,
+        y: y !== undefined ? y + axisOffset : y,
+      };
+    }
     case "bar":
-      return { x: value?.axisOffset, y: yAnchor };
+      return {
+        x: (value?.axisOffset ?? xAnchor) + axisOffset,
+        y: yAnchor,
+      };
     case "pie":
     case "scatterplot":
-      return { x: xAnchor, y: yAnchor };
+      return {
+        x: xAnchor,
+        y: yAnchor,
+      };
     default:
       const _exhaustiveCheck: never = chartType;
       return _exhaustiveCheck;