@mui/x-charts/ChartsAxisHighlightValue/ChartsAxisHighlightValueItem.mjs

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { styled } from '@mui/material/styles';
import { shouldForwardProp } from '@mui/system/createStyled';
import { useUtilityClasses } from "./chartsAxisHighlightValueClasses.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
const ChartsAxisHighlightValueText = styled('div', {
  name: 'MuiChartsAxisHighlightValue',
  slot: 'Root',
  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'position'
})(({
  theme
}) => _extends({}, theme.typography.caption, {
  padding: theme.spacing(0.5, 1),
  border: `solid ${theme.palette.divider} 1px`,
  backgroundColor: theme.palette.background.paper,
  '--clamped-offset': 'calc(-1*min(var(--min),max(calc(100% - var(--max)),50%)))',
  variants: [{
    props: {
      position: 'top'
    },
    style: {
      translate: 'var(--clamped-offset) -100%'
    }
  }, {
    props: {
      position: 'bottom'
    },
    style: {
      translate: 'var(--clamped-offset) 0'
    }
  }, {
    props: {
      position: 'left'
    },
    style: {
      translate: '-100% var(--clamped-offset)'
    }
  }, {
    props: {
      position: 'right'
    },
    style: {
      translate: '0 var(--clamped-offset)'
    }
  }]
}));
function ChartsAxisHighlightValueItem(props) {
  const {
    x,
    y,
    position,
    formattedValue,
    minCoord,
    maxCoord,
    space,
    sx
  } = props;
  const classes = useUtilityClasses({
    position
  });
  const isXAxis = position === 'top' || position === 'bottom';
  return /*#__PURE__*/_jsx(ChartsAxisHighlightValueText, {
    className: classes.root,
    position: position,
    style: {
      position: 'absolute',
      top: y,
      left: x,
      '--min': `${isXAxis ? x - minCoord : y - minCoord}px`,
      '--max': `${isXAxis ? maxCoord - x : maxCoord - y}px`,
      '--space': `${space}px`
    },
    sx: sx,
    children: formattedValue
  });
}
export { ChartsAxisHighlightValueItem };