Add isTouchDevice state and touch-device specific zoom instructions

Author: apata

assets/js/dashboard/components/graph-tooltip.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react'
+import { Transition } from '@headlessui/react'
 
 export const GraphTooltipWrapper = ({
   x,
@@ -9,7 +10,8 @@ export const GraphTooltipWrapper = ({
   totalBuckets,
   children,
   className,
-  onClick
+  onClick,
+  isTouchDevice
 }: {
   x: number
   y: number
@@ -20,6 +22,7 @@ export const GraphTooltipWrapper = ({
   children: ReactNode
   className?: string
   onClick?: () => void
+  isTouchDevice?: boolean
 }) => {
   const ref = useRef<HTMLDivElement>(null)
   // distance from cursor to tooltip edge
@@ -65,18 +68,29 @@ export const GraphTooltipWrapper = ({
   }, [x, maxX, bucketIndex])
 
   return (
-    <div
-      ref={ref}
-      className={className}
-      onClick={onClick}
-      style={{
-        minWidth,
-        left: tooltipLeft,
-        top: y,
-        transform: `translateY(-100%) translateY(-${offsetFromCursor}px)`
-      }}
+    <Transition
+      as={React.Fragment}
+      appear
+      show
+      // enter delay on mobile is needed to prevent the tooltip from entering when the user starts to y-pan
+      // but the y-pan is not yet certain
+      enter={isTouchDevice ? 'transition-opacity duration-0 delay-150' : ''}
+      enterFrom={isTouchDevice ? 'opacity-0' : ''}
+      enterTo={isTouchDevice ? 'opacity-100' : ''}
     >
-      {children}
-    </div>
+      <div
+        ref={ref}
+        className={className}
+        onClick={onClick}
+        style={{
+          minWidth,
+          left: tooltipLeft,
+          top: y,
+          transform: `translateY(-100%) translateY(-${offsetFromCursor}px)`
+        }}
+      >
+        {children}
+      </div>
+    </Transition>
   )
 }

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

@@ -62,6 +62,7 @@ export const MainGraph = ({
   const { mode } = useTheme()
   const navigate = useAppNavigate()
   const { primaryGradient, secondaryGradient } = paletteByTheme[mode]
+  const [isTouchDevice, setIsTouchDevice] = useState(false)
   const [tooltip, setTooltip] = useState<{
     x: number
     y: number
@@ -190,7 +191,10 @@ export const MainGraph = ({
   )
 
   const onPointerMove = useCallback<PointerHandler>(
-    ({ inHoverableArea, closestIndex, x, y }) => {
+    ({ inHoverableArea, closestIndex, x, y, event }) => {
+      if (event instanceof PointerEvent) {
+        setIsTouchDevice(event.pointerType === 'touch')
+      }
       if (!inHoverableArea) {
         setTooltip({ selectedIndex: null, x: 0, y: 0 })
       } else {
@@ -265,6 +269,7 @@ export const MainGraph = ({
           datum={remappedData[selectedIndex]}
           bucketIndex={selectedIndex}
           totalBuckets={remappedData.length}
+          isTouchDevice={isTouchDevice}
         />
       )}
     </Graph>
@@ -283,7 +288,8 @@ const MainGraphTooltip = ({
   datum,
   showZoomToPeriod,
   bucketIndex,
-  totalBuckets
+  totalBuckets,
+  isTouchDevice
 }: {
   metric: FormattableMetric
   interval: string
@@ -297,8 +303,10 @@ const MainGraphTooltip = ({
   bucketIndex: number
   totalBuckets: number
   maxX: number
+  isTouchDevice: boolean
 }) => {
   const formatter = MetricFormatterShort[metric]
+
   return (
     <GraphTooltipWrapper
       x={x}
@@ -307,6 +315,7 @@ const MainGraphTooltip = ({
       maxX={maxX}
       bucketIndex={bucketIndex}
       totalBuckets={totalBuckets}
+      isTouchDevice={isTouchDevice}
       className={
         'absolute select-none pointer-events-none bg-gray-800 dark:bg-gray-950 py-3 px-4 rounded-md z-[100] shadow shadow-gray-200 dark:shadow-gray-850'
       }
@@ -378,7 +387,9 @@ const MainGraphTooltip = ({
           <>
             <hr className="border-gray-600 dark:border-gray-800 my-1" />
             <span className="text-gray-300 dark:text-gray-400 text-xs">
-              Click to view {interval}
+              {isTouchDevice
+                ? `Release to view ${interval}`
+                : `Click to view ${interval}`}
             </span>
           </>
         )}
@@ -610,7 +621,7 @@ const remapAndFillData = (
         if (isPartial) {
           startOfLastPartialSlice = index
         } else {
-          // if there is a full period after a partial slice, 
+          // if there is a full period after a partial slice,
           // it's not a partial slice anchored at the end of the series
           startOfLastPartialSlice = null
         }

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

@@ -140,12 +140,11 @@ export default function VisitorGraph({
     ] as const,
     queryFn: async ({ queryKey }) => {
       const [_, opts] = queryKey
-      const oldDataSource =
-        window.location.hostname === 'localhost'
-          ? 'http://localhost:8000'
-          : window.location.hostname.match(/pr-\d+\.review\.plausible\.io/)
-            ? 'https://staging.plausible.io'
-            : ''
+      const oldDataSource = window.location.hostname.match(
+        /pr-\d+\.review\.plausible\.io/
+      )
+        ? 'https://staging.plausible.io'
+        : `http://${window.location.hostname}:8000`
       const [dataOld, dataNew] = await Promise.all([
         api
           .get(
@@ -157,7 +156,7 @@ export default function VisitorGraph({
             }
           )
           .then((res) => ({ ...res, interval: opts.interval }))
-          .catch(() => undefined),
+          .catch(console.error),
         fetchMainGraph(site, opts.dashboardState, opts.metric, opts.interval)
           .then((res) => ({
             ...res,