@mui/x-charts/esm/ChartsTooltip/utils.js

The community edition of MUI X Charts components.

'use client';

import * as React from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useSvgRef } from "../hooks/index.js";
/**
 * @deprecated We recommend using vanilla JS to let popper track mouse position.
 */
export function useMouseTracker() {
  const svgRef = useSvgRef();

  // Use a ref to avoid rerendering on every mousemove event.
  const [mousePosition, setMousePosition] = React.useState(null);
  React.useEffect(() => {
    const element = svgRef.current;
    if (element === null) {
      return () => {};
    }
    const controller = new AbortController();
    const handleOut = event => {
      if (event.pointerType !== 'mouse') {
        setMousePosition(null);
      }
    };
    const handleMove = event => {
      setMousePosition({
        x: event.clientX,
        y: event.clientY,
        height: event.height,
        pointerType: event.pointerType
      });
    };
    element.addEventListener('pointerdown', handleMove, {
      signal: controller.signal
    });
    element.addEventListener('pointermove', handleMove, {
      signal: controller.signal
    });
    element.addEventListener('pointerup', handleOut, {
      signal: controller.signal
    });
    return () => {
      // Calling `.abort()` removes ALL event listeners
      // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
      controller.abort();
    };
  }, [svgRef]);
  return mousePosition;
}
export function usePointerType() {
  const svgRef = useSvgRef();

  // Use a ref to avoid rerendering on every mousemove event.
  const [pointerType, setPointerType] = React.useState(null);
  React.useEffect(() => {
    const element = svgRef.current;
    if (element === null) {
      return () => {};
    }
    const handleOut = event => {
      if (event.pointerType !== 'mouse') {
        setPointerType(null);
      }
    };
    const handleEnter = event => {
      setPointerType({
        pointerType: event.pointerType
      });
    };
    element.addEventListener('pointerenter', handleEnter);
    element.addEventListener('pointerup', handleOut);
    return () => {
      element.removeEventListener('pointerenter', handleEnter);
      element.removeEventListener('pointerup', handleOut);
    };
  }, [svgRef]);
  return pointerType;
}
export function utcFormatter(v) {
  if (v instanceof Date) {
    return v.toUTCString();
  }
  return v.toLocaleString();
}

// Taken from @mui/x-date-time-pickers
const mainPointerFineMediaQuery = '@media (pointer: fine)';

/**
 * Returns true if the main pointer is fine (e.g. mouse).
 * This is useful for determining how to position tooltips or other UI elements based on the type of input device.
 * @returns true if the main pointer is fine, false otherwise.
 */
export const useIsFineMainPointer = () => {
  return useMediaQuery(mainPointerFineMediaQuery, {
    defaultMatches: true
  });
};