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

The community edition of the charts components (MUI X).

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import composeClasses from '@mui/utils/composeClasses';
import { styled, useThemeProps } from '@mui/material/styles';
import { Popper } from '@mui/base/Popper';
import { NoSsr } from '@mui/base/NoSsr';
import { useSlotProps } from '@mui/base/utils';
import { InteractionContext } from '../context/InteractionProvider';
import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
import { jsx as _jsx } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
  const {
    classes
  } = ownerState;
  const slots = {
    root: ['root'],
    table: ['table'],
    row: ['row'],
    cell: ['cell'],
    mark: ['mark'],
    markCell: ['markCell'],
    labelCell: ['labelCell'],
    valueCell: ['valueCell']
  };
  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
};
const ChartsTooltipRoot = styled(Popper, {
  name: 'MuiChartsTooltip',
  slot: 'Root',
  overridesResolver: (_, styles) => styles.root
})(({
  theme
}) => ({
  pointerEvents: 'none',
  zIndex: theme.zIndex.modal
}));

/**
 * Demos:
 *
 * - [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
 *
 * API:
 *
 * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
 */
function ChartsTooltip(props) {
  var _slots$popper, _slots$itemContent, _slots$axisContent;
  const themeProps = useThemeProps({
    props,
    name: 'MuiChartsTooltip'
  });
  const {
    trigger = 'axis',
    itemContent,
    axisContent,
    slots,
    slotProps
  } = themeProps;
  const mousePosition = useMouseTracker();
  const {
    item,
    axis
  } = React.useContext(InteractionContext);
  const displayedData = trigger === 'item' ? item : axis;
  const tooltipHasData = getTooltipHasData(trigger, displayedData);
  const popperOpen = mousePosition !== null && tooltipHasData;
  const classes = useUtilityClasses({
    classes: themeProps.classes
  });
  const PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
  const popperProps = useSlotProps({
    elementType: PopperComponent,
    externalSlotProps: slotProps == null ? void 0 : slotProps.popper,
    additionalProps: {
      open: popperOpen,
      placement: 'right-start',
      anchorEl: generateVirtualElement(mousePosition)
    },
    ownerState: {}
  });
  if (trigger === 'none') {
    return null;
  }
  return /*#__PURE__*/_jsx(NoSsr, {
    children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
      children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
        itemData: displayedData,
        content: (_slots$itemContent = slots == null ? void 0 : slots.itemContent) != null ? _slots$itemContent : itemContent,
        contentProps: slotProps == null ? void 0 : slotProps.itemContent,
        sx: {
          mx: 2
        },
        classes: classes
      }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
        axisData: displayedData,
        content: (_slots$axisContent = slots == null ? void 0 : slots.axisContent) != null ? _slots$axisContent : axisContent,
        contentProps: slotProps == null ? void 0 : slotProps.axisContent,
        sx: {
          mx: 2
        },
        classes: classes
      })
    }))
  });
}
process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "yarn proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * Component to override the tooltip content when triger is set to 'axis'.
   * @deprecated Use slots.axisContent instead
   */
  axisContent: PropTypes.elementType,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: PropTypes.object,
  /**
   * Component to override the tooltip content when triger is set to 'item'.
   * @deprecated Use slots.itemContent instead
   */
  itemContent: PropTypes.elementType,
  /**
   * The props used for each component slot.
   * @default {}
   */
  slotProps: PropTypes.object,
  /**
   * Overridable component slots.
   * @default {}
   */
  slots: PropTypes.object,
  /**
   * Select the kind of tooltip to display
   * - 'item': Shows data about the item below the mouse.
   * - 'axis': Shows values associated with the hovered x value
   * - 'none': Does not display tooltip
   * @default 'item'
   */
  trigger: PropTypes.oneOf(['axis', 'item', 'none'])
} : void 0;
export { ChartsTooltip };