feat: axis formatters

Author: tannerlinsley

src/components/AxisLinear.tsx

@@ -1,7 +1,7 @@
 import { ScaleLinear, ScaleTime } from 'd3-scale'
 import React from 'react'
 
-import { Axis } from '../types'
+import { Axis, AxisTime } from '../types'
 import { getTickPx, translate } from '../utils/Utils'
 import useChartContext from '../utils/chartContext'
 //
@@ -187,7 +187,7 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
                     isRotated ? (axis.position === 'top' ? 60 : -60) : 0
                   })`}
                 >
-                  {axis.format(tick as any)}
+                  {(axis as AxisTime<any>).formatters.scale(tick as Date)}
                 </text>
               </g>
             )

src/components/AxisLinear.useMeasure.ts

@@ -230,9 +230,9 @@ export default function useMeasure<TDatum>({
   // Measure after if needed
   useIsomorphicLayoutEffect(() => {
     measureRotation()
-  })
+  }, [measureRotation])
 
   useIsomorphicLayoutEffect(() => {
     measureDimensions()
-  })
+  }, [measureRotation])
 }

src/components/Chart.tsx

@@ -87,7 +87,19 @@ export function Chart<TDatum>({
     containerElement,
     setContainerElement,
   ] = React.useState<HTMLDivElement | null>(null)
-  const { width, height } = useRect(containerElement?.parentElement, options)
+  const parentElement = containerElement?.parentElement
+
+  const { width, height } = useRect(parentElement, options)
+
+  useIsomorphicLayoutEffect(() => {
+    if (parentElement) {
+      const computed = window.getComputedStyle(parentElement)
+
+      if (!['relative', 'absolute', 'fixed'].includes(computed.display)) {
+        parentElement.style.position = 'relative'
+      }
+    }
+  }, [parentElement])
 
   return (
     <div

src/components/Cursors.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import * as TSTB from 'ts-toolbelt'
 
 import { animated, config, useSpring } from '@react-spring/web'
 
+// import useIsScrolling from '../hooks/useIsScrolling'
 import useLatestWhen from '../hooks/useLatestWhen'
-import { CursorOptions, Datum } from '../types'
+import usePortalElement from '../hooks/usePortalElement'
+import { AxisTime, CursorOptions, Datum } from '../types'
 import { translate } from '../utils/Utils'
 //
 import useChartContext from '../utils/chartContext'
@@ -75,6 +78,7 @@ function Cursor<TDatum>(props: {
 }) {
   const {
     getOptions,
+    svgRect,
     gridDimensions,
     useFocusedDatumAtom,
     primaryAxis,
@@ -192,72 +196,84 @@ function Cursor<TDatum>(props: {
     }
   }
 
-  const formattedValue = axis.format(latestValue)
+  const formattedValue = (axis as AxisTime<any>).formatters.cursor(latestValue)
+
+  // const isScrolling = useIsScrolling(200)
 
   const lineSpring = useSpring({
     transform: translate(lineStartX, lineStartY),
     width: `${lineWidth}px`,
     height: `${lineHeight}px`,
     config: config.stiff,
+    // immediate: isScrolling,
   })
 
   const bubbleSpring = useSpring({
     transform: translate(bubbleX, bubbleY),
     config: config.stiff,
+    // immediate: isScrolling,
   })
 
-  return (
-    <div
-      style={{
-        pointerEvents: 'none',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        transform: translate(gridDimensions.gridX, gridDimensions.gridY),
-        opacity: show ? 1 : 0,
-        transition: 'all .3s ease',
-      }}
-      className="Cursor"
-    >
-      {/* Render the cursor line */}
-      {props.options.showLine ? (
-        <animated.div
-          style={{
-            ...lineSpring,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            background: getLineBackgroundColor(getOptions().dark),
-          }}
-        />
-      ) : null}
-      {/* Render the cursor bubble */}
-      {props.options.showLabel ? (
-        <animated.div
+  const portalEl = usePortalElement()
+
+  return portalEl
+    ? ReactDOM.createPortal(
+        <div
           style={{
-            ...bubbleSpring,
+            pointerEvents: 'none',
             position: 'absolute',
             top: 0,
             left: 0,
+            transform: translate(
+              svgRect.left + gridDimensions.gridX,
+              svgRect.top + gridDimensions.gridY
+            ),
+            opacity: show ? 1 : 0,
+            transition: 'all .3s ease',
           }}
+          className="Cursor"
         >
-          {/* Render the cursor label */}
-          <div
-            style={{
-              padding: '5px',
-              fontSize: '10px',
-              background: getBackgroundColor(getOptions().dark),
-              color: getBackgroundColor(!getOptions().dark),
-              borderRadius: '3px',
-              position: 'relative',
-              transform: `translate3d(${alignPctX}%, ${alignPctY}%, 0)`,
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {formattedValue}
-          </div>
-        </animated.div>
-      ) : null}
-    </div>
-  )
+          {/* Render the cursor line */}
+          {props.options.showLine ? (
+            <animated.div
+              style={{
+                ...lineSpring,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                background: getLineBackgroundColor(getOptions().dark),
+              }}
+            />
+          ) : null}
+          {/* Render the cursor bubble */}
+          {props.options.showLabel ? (
+            <animated.div
+              style={{
+                ...bubbleSpring,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+              }}
+            >
+              {/* Render the cursor label */}
+              <div
+                style={{
+                  padding: '5px',
+                  fontSize: '10px',
+                  background: getBackgroundColor(getOptions().dark),
+                  color: getBackgroundColor(!getOptions().dark),
+                  borderRadius: '3px',
+                  position: 'relative',
+                  transform: `translate3d(${alignPctX}%, ${alignPctY}%, 0)`,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {formattedValue}
+              </div>
+            </animated.div>
+          ) : null}
+        </div>,
+        portalEl
+      )
+    : null
 }

src/components/Tooltip.tsx

@@ -4,8 +4,9 @@ import ReactDOM from 'react-dom'
 import { useSpring, animated } from '@react-spring/web'
 
 import { useAnchor } from '../hooks/useAnchor'
-import useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'
+// 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'
 //
@@ -70,36 +71,9 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
     anchorRect = latestFocusedDatum.element?.getBoundingClientRect() ?? null
   }
 
-  const [portalEl, setPortalEl] = React.useState<HTMLDivElement | null>()
-  const [tooltipEl, setTooltipEl] = React.useState<HTMLDivElement | null>()
-
-  useIsomorphicLayoutEffect(() => {
-    if (!portalEl) {
-      let element = document.getElementById(
-        'react-charts-portal'
-      ) as HTMLDivElement
-
-      if (!element) {
-        element = document.createElement('div')
-
-        element.setAttribute('id', 'react-charts-portal')
-
-        Object.assign(element.style, {
-          pointerEvents: 'none',
-          position: 'fixed',
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0,
-          'z-index': 99999999999,
-        })
+  const portalEl = usePortalElement()
 
-        document.body.append(element)
-      }
-
-      setPortalEl(element)
-    }
-  })
+  const [tooltipEl, setTooltipEl] = React.useState<HTMLDivElement | null>()
 
   const translateX = anchorRect?.left ?? 0
   const translateY = anchorRect?.top ?? 0
@@ -133,6 +107,8 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
     [boundingBox]
   )
 
+  // const isScrolling = useIsScrolling(200)
+
   const anchorFit = useAnchor({
     show: !!focusedDatum,
     portalEl,
@@ -154,6 +130,7 @@ export default function Tooltip<TDatum>(): React.ReactPortal | null {
     config: { mass: 1, tension: 210, friction: 30 },
     immediate: key => {
       return (
+        // isScrolling ||
         wasZero ||
         (['left', 'top'].includes(key) &&
           !previousFocusedDatum &&

src/components/TooltipRenderer.tsx

@@ -2,7 +2,7 @@ import { sum } from 'd3-array'
 import React, { CSSProperties } from 'react'
 
 import { useAnchor } from '../hooks/useAnchor'
-import { Axis, Datum, RequiredChartOptions } from '../types'
+import { Axis, AxisTime, Datum, RequiredChartOptions } from '../types'
 
 //
 //
@@ -193,13 +193,13 @@ export default function TooltipRenderer<TDatum>(
             <strong>{focusedDatum.seriesLabel}</strong>
           ) : groupingMode === 'secondary' ? (
             <strong>
-              {secondaryAxis.format(
+              {(secondaryAxis as AxisTime<any>).formatters.tooltip(
                 secondaryAxis.getValue(focusedDatum.originalDatum)
               )}
             </strong>
           ) : (
             <strong>
-              {primaryAxis.format(
+              {(primaryAxis as AxisTime<any>).formatters.tooltip(
                 primaryAxis.getValue(focusedDatum.originalDatum)
               )}
             </strong>
@@ -256,7 +256,7 @@ export default function TooltipRenderer<TDatum>(
                   {groupingMode === 'series' ? (
                     <React.Fragment>
                       <td>
-                        {primaryAxis.format(
+                        {(primaryAxis as AxisTime<any>).formatters.tooltip(
                           primaryAxis.getValue(sortedDatum.originalDatum)
                         )}
                         : &nbsp;
@@ -266,7 +266,7 @@ export default function TooltipRenderer<TDatum>(
                           textAlign: 'right',
                         }}
                       >
-                        {secondaryAxis.format(
+                        {(secondaryAxis as AxisTime<any>).formatters.tooltip(
                           secondaryAxis.getValue(sortedDatum.originalDatum)
                         )}
                       </td>
@@ -279,7 +279,7 @@ export default function TooltipRenderer<TDatum>(
                           textAlign: 'right',
                         }}
                       >
-                        {primaryAxis.format(
+                        {(primaryAxis as AxisTime<any>).formatters.tooltip(
                           primaryAxis.getValue(sortedDatum.originalDatum)
                         )}
                       </td>
@@ -292,7 +292,7 @@ export default function TooltipRenderer<TDatum>(
                           textAlign: 'right',
                         }}
                       >
-                        {secondaryAxis.format(
+                        {(secondaryAxis as AxisTime<any>).formatters.tooltip(
                           secondaryAxis.getValue(sortedDatum.originalDatum)
                         )}
                       </td>

src/hooks/useIsScrolling.ts

@@ -0,0 +1,32 @@
+import * as React from 'react'
+
+export default function useIsScrolling(debounce: number) {
+  const [scrolling, setScrolling] = React.useState(false)
+
+  const ref = React.useRef(scrolling)
+  ref.current = scrolling
+
+  React.useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>
+
+    const cb = () => {
+      clearTimeout(timeout)
+
+      if (!ref.current) {
+        setScrolling(true)
+        timeout = setTimeout(() => {
+          setScrolling(false)
+        }, debounce)
+      }
+    }
+
+    document.addEventListener('scroll', cb, true)
+
+    return () => {
+      clearTimeout(timeout)
+      document.removeEventListener('scroll', cb)
+    }
+  }, [debounce])
+
+  return scrolling
+}