fix: cursor bubble alignment

Author: tannerlinsley

src/components/Cursor.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
+import React from 'react';
 //
-import { translate } from '../utils/Utils'
+import { translate } from '../utils/Utils';
 
-import useChartContext from '../hooks/useChartContext'
-import useLatest from '../hooks/useLatest'
+import useChartContext from '../hooks/useChartContext';
+import useLatest from '../hooks/useLatest';
 
 const getLineBackgroundColor = dark =>
-  dark ? 'rgba(255,255,255,.3)' : 'rgba(0, 26, 39, 0.3)'
+  dark ? 'rgba(255,255,255,.3)' : 'rgba(0, 26, 39, 0.3)';
 
 const getBackgroundColor = dark =>
-  dark ? 'rgba(255,255,255,.9)' : 'rgba(0, 26, 39, 0.9)'
+  dark ? 'rgba(255,255,255,.9)' : 'rgba(0, 26, 39, 0.9)';
 
 export default function Cursor({ primary }) {
   const {
@@ -20,10 +20,10 @@ export default function Cursor({ primary }) {
     gridX,
     gridY,
     dark,
-  } = useChartContext()
+  } = useChartContext();
 
-  const resolvedFocused = focused || latestFocused
-  const cursor = primary ? primaryCursor : secondaryCursor
+  const resolvedFocused = focused || latestFocused;
+  const cursor = primary ? primaryCursor : secondaryCursor;
 
   const {
     showLine,
@@ -34,67 +34,71 @@ export default function Cursor({ primary }) {
     axis,
     siblingAxis,
     resolvedShow,
-  } = cursor || {}
+  } = cursor || {};
 
   const latestValue = useLatest(
     resolvedValue,
     typeof resolvedValue !== 'undefined'
-  )
+  );
 
-  const previousShowRef = React.useRef()
+  const previousShowRef = React.useRef();
   React.useEffect(() => {
-    previousShowRef.current = resolvedShow
-  }, [resolvedShow])
+    previousShowRef.current = resolvedShow;
+  }, [resolvedShow]);
 
   if (!cursor) {
-    return null
+    return null;
   }
 
   // Should we animate?
-  const animated = snap || axis.type === 'ordinal'
+  const animated = snap || axis.type === 'ordinal';
 
   // Get the sibling range
-  const siblingRange = siblingAxis.scale.range()
+  const siblingRange = siblingAxis.scale.range();
 
-  let x
-  let y
-  let x1
-  let x2
-  let y1
-  let y2
-  let alignPctX
-  let alignPctY
+  let x;
+  let y;
+  let x1;
+  let x2;
+  let y1;
+  let y2;
+  let alignPctX;
+  let alignPctY;
 
   // Vertical alignment
   if (axis.vertical) {
-    y = axis.scale(latestValue)
-    x1 = siblingRange[0]
-    x2 = siblingRange[1]
-    y1 = y - 1
-    y2 = y + axis.cursorSize + 1
+    y = axis.scale(latestValue);
+    y1 = y - 1;
+    y2 = y + axis.cursorSize + 1;
     if (axis.position === 'left') {
-      alignPctX = -100
-      alignPctY = -50
+      x1 = siblingRange[0];
+      x2 = siblingRange[1];
+      alignPctX = -100;
+      alignPctY = -50;
     } else {
-      alignPctX = 0
-      alignPctY = -50
+      x1 = siblingRange[1];
+      x2 = siblingRange[0];
+      alignPctX = 0;
+      alignPctY = -50;
     }
   } else {
-    x = axis.scale(latestValue)
-    x1 = x - 1
-    x2 = x + axis.cursorSize + 1
-    y1 = siblingRange[0]
-    y2 = siblingRange[1]
+    x = axis.scale(latestValue);
+    x1 = x - 1;
+    x2 = x + axis.cursorSize + 1;
     if (axis.position === 'top') {
-      alignPctX = -500
-      alignPctY = -100
+      y1 = siblingRange[0];
+      y2 = siblingRange[1];
+      alignPctX = -500;
+      alignPctY = -100;
     } else {
-      alignPctX = -50
-      alignPctY = 0
+      y1 = siblingRange[1];
+      y2 = siblingRange[0];
+      alignPctX = -50;
+      alignPctY = 0;
     }
   }
 
-  const renderProps = { ...cursor }
+  const renderProps = { ...cursor };
 
   renderProps.formattedValue = String(
     axis.vertical
@@ -112,30 +116,34 @@ export default function Cursor({ primary }) {
             : latestValue
         )
       : ''
-  )
+  );
 
-  const lineStartX = Math.min(x1, x2)
-  const lineStartY = Math.min(y1, y2)
-  const lineEndX = Math.max(x1, x2)
-  const lineEndY = Math.max(y1, y2)
+  const lineStartX = Math.min(x1, x2);
+  const lineStartY = Math.min(y1, y2);
+  const lineEndX = Math.max(x1, x2);
+  const lineEndY = Math.max(y1, y2);
   const bubbleX =
     axis.vertical && axis.RTL
       ? lineEndX
-      : x1 + (!axis.vertical ? (x2 - x1) / 2 : 0) + (!axis.vertical ? 1 : 0)
+      : x1 + (!axis.vertical ? (x2 - x1) / 2 : 0) + (!axis.vertical ? 1 : 0);
   const bubbleY =
     !axis.vertical && axis.RTL
       ? lineStartY
-      : y1 + (axis.vertical ? (y2 - y1) / 2 : 0) + (axis.vertical ? 1 : 0)
+      : y1 + (axis.vertical ? (y2 - y1) / 2 : 0) + (axis.vertical ? 1 : 0);
 
-  const lineHeight = Math.max(lineEndY - lineStartY, 0)
-  const lineWidth = Math.max(lineEndX - lineStartX, 0)
+  // if (!axis.vertical) {
+  // console.log({ bubbleX, bubbleY });
+  // }
 
-  let animateCoords
+  const lineHeight = Math.max(lineEndY - lineStartY, 0);
+  const lineWidth = Math.max(lineEndX - lineStartX, 0);
+
+  let animateCoords;
   if (previousShowRef.current === resolvedShow) {
-    animateCoords = true
+    animateCoords = true;
   }
 
-  let renderedChildren = render(renderProps)
+  let renderedChildren = render(renderProps);
 
   return (
     <div
@@ -196,5 +204,5 @@ export default function Cursor({ primary }) {
         </div>
       ) : null}
     </div>
-  )
+  );
 }