@mui/x-charts/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

The community edition of MUI X Charts components.

'use client';

import * as React from 'react';
import { getValueToPositionMapper, useXScale } from "../hooks/useScale.js";
import { isBandScale } from "../internals/isBandScale.js";
import { useSelector } from "../internals/store/useSelector.js";
import { useStore } from "../internals/store/useStore.js";
import { selectorChartsInteractionXAxisValue } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
import { useDrawingArea } from "../hooks/index.js";
import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";

/**
 * @ignore - internal component.
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function ChartsXHighlight(props) {
  const {
    type,
    classes
  } = props;
  const {
    top,
    height
  } = useDrawingArea();
  const xScale = useXScale();
  const store = useStore();
  const axisXValue = useSelector(store, selectorChartsInteractionXAxisValue);
  const getXPosition = getValueToPositionMapper(xScale);
  const isBandScaleX = type === 'band' && axisXValue !== null && isBandScale(xScale);
  if (process.env.NODE_ENV !== 'production') {
    const isError = isBandScaleX && xScale(axisXValue) === undefined;
    if (isError) {
      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
    }
  }
  return /*#__PURE__*/_jsxs(React.Fragment, {
    children: [isBandScaleX && xScale(axisXValue) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
    // @ts-expect-error, xScale value is checked in the statement above
    , {
      d: `M ${xScale(axisXValue) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
      className: classes.root,
      ownerState: {
        axisHighlight: 'band'
      }
    }), type === 'line' && axisXValue !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
      d: `M ${getXPosition(axisXValue)} ${top} L ${getXPosition(axisXValue)} ${top + height}`,
      className: classes.root,
      ownerState: {
        axisHighlight: 'line'
      }
    })]
  });
}