fix: better scroll/anchor perf, default intersectionObserve

Author: tannerlinsley

src/components/Chart.tsx

@@ -5,7 +5,6 @@ import React, { ComponentPropsWithoutRef } from 'react'
 
 import useGetLatest from '../hooks/useGetLatest'
 import useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'
-import useRect from '../hooks/useRect'
 import Area from '../seriesTypes/Area'
 import Bar from '../seriesTypes/Bar'
 import Line from '../seriesTypes/Line'
@@ -35,7 +34,6 @@ import AxisLinear from './AxisLinear'
 import Cursors from './Cursors'
 import Tooltip from './Tooltip'
 import Voronoi from './Voronoi'
-import useIsScrolling from '../hooks/useIsScrolling'
 
 //
 
@@ -74,6 +72,9 @@ function defaultChartOptions<TDatum>(
     groupingMode: options.groupingMode ?? 'primary',
     showVoronoi: options.showVoronoi ?? false,
     defaultColors: options.defaultColors ?? defaultColorScheme,
+    useIntersectionObserver: options.useIntersectionObserver ?? true,
+    intersectionObserverRootMargin:
+      options.intersectionObserverRootMargin ?? '1000px',
   }
 }
 
@@ -84,28 +85,107 @@ export function Chart<TDatum>({
   ...rest
 }: ComponentPropsWithoutRef<'div'> & { options: ChartOptions<TDatum> }) {
   const options = defaultChartOptions(userOptions)
-  const [containerElement, setContainerElement] =
+  const [chartElement, setContainerElement] =
     React.useState<HTMLDivElement | null>(null)
-  const parentElement = containerElement?.parentElement
 
-  const isScrolling = useIsScrolling(200)
+  const containerEl = chartElement?.parentElement
 
-  const { width, height } = useRect(parentElement, {
-    enabled: !isScrolling,
-    initialWidth: options.initialWidth,
-    initialHeight: options.initialHeight,
-    dimsOnly: true,
+  const nearestScrollableParent = React.useMemo(() => {
+    const run = (el?: Element | null): Element | null => {
+      if (!el) {
+        return null
+      }
+
+      const grandParent = el.parentElement
+
+      if (!grandParent) {
+        return null
+      }
+
+      if (grandParent.scrollHeight > grandParent.clientHeight) {
+        const { overflow } = window.getComputedStyle(grandParent)
+
+        if (overflow.includes('scroll') || overflow.includes('auto')) {
+          return grandParent
+        }
+      }
+
+      return run(grandParent)
+    }
+
+    return run(containerEl)
+  }, [containerEl])
+
+  const [{ width, height }, setDims] = React.useState({
+    width: options.initialWidth,
+    height: options.initialHeight,
   })
 
   useIsomorphicLayoutEffect(() => {
-    if (parentElement) {
-      const computed = window.getComputedStyle(parentElement)
+    if (containerEl) {
+      const computed = window.getComputedStyle(containerEl)
 
       if (!['relative', 'absolute', 'fixed'].includes(computed.position)) {
-        parentElement.style.position = 'relative'
+        containerEl.style.position = 'relative'
       }
     }
-  }, [parentElement])
+  }, [containerEl])
+
+  React.useEffect(() => {
+    if (!containerEl) {
+      return
+    }
+
+    const observer = new ResizeObserver(() => {
+      const rect = containerEl?.getBoundingClientRect()
+
+      if (rect) {
+        setDims({
+          width: rect.width,
+          height: rect.height,
+        })
+      }
+    })
+
+    observer.observe(containerEl)
+
+    return () => {
+      observer.unobserve(containerEl)
+    }
+  }, [containerEl])
+
+  const [isIntersecting, setIsIntersecting] = React.useState(true)
+
+  React.useEffect(() => {
+    if (!containerEl || !options.useIntersectionObserver) return
+
+    let observer = new IntersectionObserver(
+      entries => {
+        for (let entry of entries) {
+          if (entry.isIntersecting) {
+            setIsIntersecting(true)
+          } else {
+            setIsIntersecting(false)
+          }
+        }
+      },
+      {
+        root: nearestScrollableParent,
+        rootMargin: options.intersectionObserverRootMargin,
+      }
+    )
+
+    observer.observe(containerEl)
+
+    return () => {
+      observer.unobserve(containerEl)
+    }
+  }, [
+    containerEl,
+    nearestScrollableParent,
+    options.intersectionObserverRootMargin,
+    options.useIntersectionObserver,
+  ])
 
   return (
     <div
@@ -119,7 +199,9 @@ export function Chart<TDatum>({
         height,
       }}
     >
-      <ChartInner options={options} {...{ width, height }} />
+      {isIntersecting ? (
+        <ChartInner options={options} {...{ width, height }} />
+      ) : null}
     </div>
   )
 }

src/components/Cursors.tsx

@@ -199,9 +199,7 @@ function Cursor<TDatum>(props: {
 
   const formattedValue = (axis as AxisTime<any>).formatters.cursor(latestValue)
 
-  const svgRect = useRect(svgRef.current, {
-    enabled: show,
-  })
+  const svgRect = useRect(svgRef.current, show)
 
   const immediatePos = !axis.isVertical ? lineStartX : lineStartY
   const immediate = usePrevious(immediatePos) === -1 && immediatePos > -1

src/components/Tooltip.tsx

@@ -4,14 +4,14 @@ import ReactDOM from 'react-dom'
 import { useSpring, animated } from '@react-spring/web'
 
 import { useAnchor } from '../hooks/useAnchor'
-// import useIsScrolling from '../hooks/useIsScrolling'
 import useLatestWhen from '../hooks/useLatestWhen'
 import usePortalElement from '../hooks/usePortalElement'
 import usePrevious from '../hooks/usePrevious'
 import { Datum, ResolvedTooltipOptions, TooltipOptions } from '../types'
 //
 import useChartContext from '../utils/chartContext'
 import TooltipRenderer from './TooltipRenderer'
+import useRect from '../hooks/useRect'
 
 //
 
@@ -45,7 +45,7 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
     primaryAxis,
     secondaryAxes,
     getDatumStatusStyle,
-    // getSeriesStatusStyle,
+    svgRef,
   } = useChartContext<TDatum>()
 
   const [focusedDatum] = useFocusedDatumAtom()
@@ -69,6 +69,8 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
 
   const [tooltipEl, setTooltipEl] = React.useState<HTMLDivElement | null>()
 
+  const svgRect = useRect(svgRef.current, !!focusedDatum?.element)
+
   const anchorEl = React.useMemo(() => {
     const anchorRect =
       latestFocusedDatum?.element?.getBoundingClientRect() ?? null
@@ -77,6 +79,8 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
       return null
     }
 
+    if (!svgRect) return
+
     const translateX = anchorRect.left ?? 0
     const translateY = anchorRect.top ?? 0
     const width = anchorRect.width ?? 0
@@ -101,9 +105,7 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
         return box
       },
     }
-  }, [latestFocusedDatum?.element])
-
-  // const isScrolling = useIsScrolling(200)
+  }, [latestFocusedDatum?.element, svgRect])
 
   const anchor = useAnchor({
     show: !!focusedDatum,

src/hooks/useAnchor.tsx

@@ -80,11 +80,9 @@ export function useAnchor(options: {
   anchorEl: HasBoundingClientRect | null | undefined
   tooltipEl: HasBoundingClientRect | null | undefined
 }) {
-  const portalDims = useRect(options.portalEl, { enabled: options.show })
-  const anchorDims = useRect(options.anchorEl, { enabled: options.show })
-  const tooltipDims = useRect(options.tooltipEl, {
-    enabled: options.show,
-  })
+  const portalDims = useRect(options.portalEl, options.show)
+  const anchorDims = useRect(options.anchorEl, options.show)
+  const tooltipDims = useRect(options.tooltipEl, options.show)
 
   const sides = React.useMemo(() => {
     const preSides = Array.isArray(options.side) ? options.side : [options.side]

src/hooks/useRect.ts

@@ -10,18 +10,13 @@ export type HasBoundingClientRect = {
 
 export default function useRect(
   node: HasBoundingClientRect | null | undefined,
-  options: {
-    enabled: boolean
-    initialWidth?: number
-    initialHeight?: number
-    dimsOnly?: boolean
-  }
+  enabled: boolean
 ) {
   const [element, setElement] = React.useState(node)
 
   let [rect, setRect] = React.useState<DOMRect>({
-    width: options.initialWidth ?? 0,
-    height: options.initialHeight ?? 0,
+    width: 0,
+    height: 0,
   } as DOMRect)
 
   const rectRef = React.useRef(rect)
@@ -37,36 +32,27 @@ export default function useRect(
   const initialRectSet = React.useRef(false)
 
   useIsomorphicLayoutEffect(() => {
-    if (options.enabled && element && !initialRectSet.current) {
+    if (enabled && element && !initialRectSet.current) {
       initialRectSet.current = true
       setRect(element.getBoundingClientRect())
     }
-  }, [element, options.enabled])
+  }, [element, enabled])
 
   React.useEffect(() => {
-    if (!element || !options.enabled) {
+    if (!element || !enabled) {
       return
     }
 
     const observer = observeRect(element as Element, (newRect: DOMRect) => {
-      if (options.dimsOnly) {
-        if (
-          rectRef.current.width !== newRect.width ||
-          rectRef.current.height !== newRect.height
-        ) {
-          setRect(newRect)
-        }
-      } else {
-        setRect(newRect)
-      }
+      setRect(newRect)
     })
 
     observer.observe()
 
     return () => {
       observer.unobserve()
     }
-  }, [element, options.dimsOnly, options.enabled])
+  }, [element, enabled])
 
   // const resolvedRect = React.useMemo(() => {
   //   if (!element || !(element as Element).tagName) {

src/types.ts

@@ -44,6 +44,11 @@ export type ChartOptions<TDatum> = {
   primaryCursor?: boolean | CursorOptions
   secondaryCursor?: boolean | CursorOptions
   tooltip?: boolean | TooltipOptions<TDatum>
+  useIntersectionObserver?: boolean
+  intersectionObserverRootMargin?:
+    | `${number}px`
+    | `${number}px ${number}px`
+    | `${number}px ${number}px ${number}px ${number}px`
 }
 
 export type RequiredChartOptions<TDatum> = TSTB.Object.Required<
@@ -56,6 +61,8 @@ export type RequiredChartOptions<TDatum> = TSTB.Object.Required<
   | 'defaultColors'
   | 'initialWidth'
   | 'initialHeight'
+  | 'useIntersectionObserver'
+  | 'intersectionObserverThreshold'
 >
 
 export type ChartContextValue<TDatum> = {