@mui/x-charts/ChartsAxisHighlightValue/ChartsAxisHighlightValue.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.ChartsAxisHighlightValue = ChartsAxisHighlightValue;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var ReactDOM = _interopRequireWildcard(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _useChartsLayerContainerRef = require("../hooks/useChartsLayerContainerRef");
var _useAxisHighlightValue = require("./useAxisHighlightValue");
var _ChartsAxisHighlightValueItem = require("./ChartsAxisHighlightValueItem");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * A component that displays the axis value at the edge of the drawing area,
 * aligned with the current axis highlight position.
 *
 * Renders as a portal into the ChartsLayerContainer, appearing as the last child.
 *
 * Demos:
 *
 * - [Custom components](https://mui.com/x/react-charts/components/)
 *
 * API:
 *
 * - [ChartsAxisHighlightValue API](https://mui.com/x/api/charts/charts-axis-highlight-value/)
 */
function ChartsAxisHighlightValue(props) {
  const {
    axisDirection,
    axisId,
    labelPosition,
    value,
    valueFormatter,
    sx
  } = props;
  const chartsLayerContainerRef = (0, _useChartsLayerContainerRef.useChartsLayerContainerRef)();
  const items = (0, _useAxisHighlightValue.useAxisHighlightValue)({
    axisDirection,
    axisId,
    labelPosition,
    value,
    valueFormatter
  });
  if (items.length === 0) {
    return null;
  }
  const content = items.map(itemProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightValueItem.ChartsAxisHighlightValueItem, (0, _extends2.default)({}, itemProps, {
    sx: sx
  })));
  if (!chartsLayerContainerRef.current) {
    return content;
  }
  return /*#__PURE__*/ReactDOM.createPortal(content, chartsLayerContainerRef.current);
}
ChartsAxisHighlightValue.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * The axis direction.
   */
  axisDirection: _propTypes.default.oneOf(['x', 'y']).isRequired,
  /**
   * The id of the axis.
   * If not provided, defaults to the first axis.
   */
  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  /**
   * The position of the label relative to the drawing area.
   * - `'start'`: at the beginning of the drawing area (top for x-axis, left for y-axis).
   * - `'end'`: at the end of the drawing area (bottom for x-axis, right for y-axis).
   * - `'both'`: at both positions.
   * - `'none'`: no label is displayed.
   * @default 'end'
   */
  labelPosition: _propTypes.default.oneOf(['both', 'end', 'none', 'start']),
  /**
   * The value to display.
   * If not defined, tracks the axis highlight value from user interaction.
   */
  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
  /**
   * A function to format the displayed value.
   * If not provided, uses the axis `valueFormatter`, or falls back to a default formatter.
   * @param {number | Date | string} value The value to format.
   * @returns {string} The formatted string.
   */
  valueFormatter: _propTypes.default.func
};