Adjust tooltip structure and position

Author: apata

assets/js/dashboard/stats/graph/main-graph.tsx

@@ -349,7 +349,7 @@ export const MainGraph = ({
       />
       {selectedIndex !== null && remappedData[selectedIndex] && (
         <GraphTooltip
-          width={width}
+          maxX={width}
           showZoomToPeriod={showZoomToPeriod}
           shouldShowYear={hasMultipleYears}
           period={period}
@@ -371,7 +371,7 @@ const GraphTooltip = ({
   interval,
   period,
   shouldShowYear,
-  width,
+  maxX,
   x,
   y,
   datum,
@@ -389,22 +389,26 @@ const GraphTooltip = ({
   showZoomToPeriod?: boolean
   bucketIndex: number
   totalBuckets: number
-  width: number
+  maxX: number
 }) => {
   const formatter = MetricFormatterShort[metric]
-  const isLeftOfCursor = width - x < 200
+  const tooltipWidth = 200
+  const tooltipWidthClass = 'w-[200px]'
+  const buffer = 16
+  const position = maxX - x < tooltipWidth - buffer ? 'left' : 'right'
   return (
     <div
       style={{
         left: x,
         top: y
       }}
       className={classNames(
-        'absolute bg-gray-800 py-3 px-4 rounded-md z-[100] min-w-[180px] pointer-events-none shadow shadow-gray-200 dark:shadow-gray-850',
+        tooltipWidthClass,
+        'absolute bg-gray-800 dark:bg-gray-950 py-3 px-4 rounded-md z-[100] pointer-events-none shadow shadow-gray-200 dark:shadow-gray-850',
         '-translate-y-full',
         {
-          'translate-x-2': !isLeftOfCursor,
-          '-translate-x-full': isLeftOfCursor
+          'translate-x-0': position === 'right',
+          '-translate-x-full': position === 'left'
         }
       )}
     >
@@ -427,9 +431,9 @@ const GraphTooltip = ({
         <div className="flex flex-col">
           {typeof datum.timeLabel === 'string' && (
             <div className="flex flex-row justify-between items-center">
-              <span className="flex items-center mr-4">
-                <div className="size-2 mr-2 rounded-full bg-indigo-400"></div>
-                <span>
+              <div className="flex items-center mr-4">
+                <div className="size-2 flex-none mr-2 rounded-full bg-indigo-400" />
+                <div>
                   {getFullBucketLabel(datum.timeLabel, {
                     period,
                     interval,
@@ -438,17 +442,17 @@ const GraphTooltip = ({
                     totalBuckets,
                     isPartial: datum.isPartial!
                   })}
-                </span>
-              </span>
-              <span className="font-bold">{formatter(datum.value)}</span>
+                </div>
+              </div>
+              <div className="font-bold">{formatter(datum.value)}</div>
             </div>
           )}
 
           {typeof datum.comparisonTimeLabel === 'string' && (
             <div className="flex flex-row justify-between items-center">
-              <span className="flex items-center mr-4">
-                <div className="size-2 mr-2 rounded-full bg-gray-500"></div>
-                <span>
+              <div className="flex items-center mr-4">
+                <div className="size-2 flex-none mr-2 rounded-full bg-gray-500"></div>
+                <div>
                   {getFullBucketLabel(datum.comparisonTimeLabel, {
                     period,
                     interval,
@@ -457,11 +461,11 @@ const GraphTooltip = ({
                     totalBuckets,
                     isPartial: false
                   })}
-                </span>
-              </span>
-              <span className="font-bold">
+                </div>
+              </div>
+              <div className="font-bold">
                 {formatter(datum.comparisonValue)}
-              </span>
+              </div>
             </div>
           )}
         </div>