Add comparison line

Author: apata

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

@@ -227,19 +227,36 @@ export const MainGraph = ({
     drawLine({
       svg,
       datum: remappedData,
-      isDefined: (d) => d.timeLabel !== null,
+      isDefined: (d) => d.timeLabel !== null && !d.isPartial,
       xAccessor: (_d, index) => x(index),
       yAccessor: (d) => y(d.value!),
-      className: mainPathClass
+      className: classNames(mainPathClass, roundedPathClass)
     })
 
+    const firstPartialIndex = remappedData.findIndex(
+      (d) => d.timeLabel !== null && d.isPartial
+    )
+    if (firstPartialIndex > 1) {
+      const partialPathStartIndex = firstPartialIndex - 1
+      drawLine({
+        svg,
+        datum: remappedData,
+        isDefined: (d, index) =>
+          d.timeLabel !== null &&
+          (!!d.isPartial || index === partialPathStartIndex),
+        xAccessor: (_d, index) => x(index),
+        yAccessor: (d) => y(d.value!),
+        className: classNames(mainPathClass, dashedPathClass)
+      })
+    }
+
     drawLine({
       svg,
       datum: remappedData,
       isDefined: (d) => d.comparisonTimeLabel !== null,
       xAccessor: (_d, index) => x(index),
       yAccessor: (d) => y(d.comparisonValue!),
-      className: comparisonPathClass
+      className: classNames(comparisonPathClass, roundedPathClass)
     })
 
     const dot = drawDot({ svg, className: mainDotClass })
@@ -283,8 +300,8 @@ export const MainGraph = ({
           }
           setTooltip({
             selectedIndex: closestIndexToPointer,
-            x: xPointer,
-            y: yPointer
+            x: Math.floor(xPointer),
+            y: Math.floor(yPointer)
           })
         }
       })
@@ -400,16 +417,12 @@ const GraphTooltip = ({
     <div
       style={{
         left: x,
-        top: y
+        top: y,
+        transform: `translateY(-100%) translateY(-4px) translateX(${{ right: '0%', left: '-100%' }[position]}) translateX(${{ right: '4px', left: '-4px' }[position]})`
       }}
       className={classNames(
         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-0': position === 'right',
-          '-translate-x-full': position === 'left'
-        }
+        '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'
       )}
     >
       <aside className="text-sm font-normal text-gray-100 flex flex-col gap-1.5">
@@ -757,9 +770,11 @@ const tickClass = 'fill-gray-500 dark:fill-gray-400 text-xs'
 const mainDotClass = 'fill-indigo-500 dark:fill-indigo-400'
 const comparisonDotClass = 'fill-indigo-500/20 dark:fill-indigo-400/20'
 
-const sharedPathClass = 'stroke-2'
+const sharedPathClass = 'fill-none stroke-2'
 const mainPathClass = 'stroke-indigo-500 dark:stroke-indigo-400 z-2'
 const comparisonPathClass = 'stroke-indigo-500/20 dark:stroke-indigo-400/20 z-1'
+const roundedPathClass = '[stroke-linecap:round] [stroke-linejoin:round]'
+const dashedPathClass = '[stroke-dasharray:3,3]'
 
 const METRIC_LABELS = {
   visitors: 'Visitors',
@@ -822,7 +837,7 @@ const drawAreaUnderLine = ({
 }: {
   svg: SelectedSVG
   gradientId: string
-  isDefined: (d: GraphDatum) => boolean
+  isDefined: (d: GraphDatum, index: number) => boolean
   xAccessor: (d: GraphDatum, index: number) => number
   y0Accessor: number
   y1Accessor: (d: GraphDatum, index: number) => number
@@ -853,7 +868,7 @@ const drawLine = ({
 }: {
   svg: SelectedSVG
   datum: GraphDatum[]
-  isDefined: (d: GraphDatum) => boolean
+  isDefined: (d: GraphDatum, index: number) => boolean
   xAccessor: (d: GraphDatum, index: number) => number
   yAccessor: (d: GraphDatum, index: number) => number
   className?: string
@@ -866,10 +881,7 @@ const drawLine = ({
 
   svg
     .append('path')
-    .attr('fill', 'none')
     .attr('class', classNames(sharedPathClass, className))
-    .attr('stroke-linejoin', 'round')
-    .attr('stroke-linecap', 'round')
     .datum(datum)
     .attr('d', line)
 }