Mobile graphs no longer show the zoom function.

web/components/charts/helpers.tsx

@@ -9,6 +9,7 @@ import clsx from 'clsx'
 
 import { Contract } from 'common/contract'
 import { useMeasureSize } from 'web/hooks/use-measure-size'
+import { useIsMobile } from 'web/hooks/use-is-mobile'
 
 export type Point<X, Y, T = unknown> = { x: X; y: Y; obj?: T }
 
@@ -168,6 +169,7 @@ export const SVGChart = <X, TT>(props: {
   const innerW = w - (margin.left + margin.right)
   const innerH = h - (margin.top + margin.bottom)
   const clipPathId = useMemo(() => nanoid(), [])
+  const isMobile = useIsMobile()
 
   const justSelected = useRef(false)
   useEffect(() => {
@@ -207,6 +209,15 @@ export const SVGChart = <X, TT>(props: {
     }
   }
 
+  const onTouchMove = (ev: React.TouchEvent) => {
+    if (onMouseOver) {
+      const touch = ev.touches[0]
+      const x = touch.pageX - ev.currentTarget.getBoundingClientRect().left
+      const y = touch.pageY - ev.currentTarget.getBoundingClientRect().top
+      onMouseOver(x, y)
+    }
+  }
+
   const onPointerLeave = () => {
     onMouseLeave?.()
   }
@@ -242,18 +253,30 @@ export const SVGChart = <X, TT>(props: {
           <XAxis axis={xAxis} w={innerW} h={innerH} />
           <YAxis axis={yAxis} w={innerW} h={innerH} />
           <g clipPath={`url(#${clipPathId})`}>{children}</g>
-          <g
+          {!isMobile ? (
-            ref={overlayRef}
+            <g
-            x="0"
+              ref={overlayRef}
-            y="0"
+              x="0"
-            width={innerW}
+              y="0"
-            height={innerH}
+              width={innerW}
-            fill="none"
+              height={innerH}
-            pointerEvents="all"
+              fill="none"
-            onPointerEnter={onPointerMove}
+              pointerEvents="all"
-            onPointerMove={onPointerMove}
+              onPointerEnter={onPointerMove}
-            onPointerLeave={onPointerLeave}
+              onPointerMove={onPointerMove}
-          />
+              onPointerLeave={onPointerLeave}
+            />
+          ) : (
+            <rect
+              x="0"
+              y="0"
+              width={innerW}
+              height={innerH}
+              fill="transparent"
+              onTouchMove={onTouchMove}
+              onTouchEnd={onPointerLeave}
+            />
+          )}
         </g>
       </svg>
     </div>