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

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChartsAxisHighlightValueItem = ChartsAxisHighlightValueItem;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _createStyled = require("@mui/system/createStyled");
var _chartsAxisHighlightValueClasses = require("./chartsAxisHighlightValueClasses");
var _jsxRuntime = require("react/jsx-runtime");
const ChartsAxisHighlightValueText = (0, _styles.styled)('div', {
  name: 'MuiChartsAxisHighlightValue',
  slot: 'Root',
  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'position'
})(({
  theme
}) => (0, _extends2.default)({}, 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 = (0, _chartsAxisHighlightValueClasses.useUtilityClasses)({
    position
  });
  const isXAxis = position === 'top' || position === 'bottom';
  return /*#__PURE__*/(0, _jsxRuntime.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
  });
}