diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx index bc225b5b..edeccebb 100644 --- a/web/components/charts/helpers.tsx +++ b/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: X; y: Y; obj?: T } @@ -168,6 +169,7 @@ export const SVGChart = (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 = (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 = (props: { {children} - + {!isMobile ? ( + + ) : ( + + )}