@mui/x-charts/ChartsAxisHighlight/ChartsYAxisHighlight.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ChartsYHighlight;
var React = _interopRequireWildcard(require("react"));
var _useScale = require("../hooks/useScale");
var _isBandScale = require("../internals/isBandScale");
var _useSelector = require("../internals/store/useSelector");
var _useStore = require("../internals/store/useStore");
var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
var _hooks = require("../hooks");
var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * @ignore - internal component.
 */function ChartsYHighlight(props) {
  const {
    type,
    classes
  } = props;
  const {
    left,
    width
  } = (0, _hooks.useDrawingArea)();
  const store = (0, _useStore.useStore)();
  const axisYValues = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightYAxisValue);
  const yAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
  if (axisYValues.length === 0) {
    return null;
  }
  return axisYValues.map(({
    axisId,
    value
  }) => {
    const yAxis = yAxes.axis[axisId];
    const yScale = yAxis.scale;
    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
    const isBandScaleY = type === 'band' && value !== null && (0, _isBandScale.isBandScale)(yScale);
    if (process.env.NODE_ENV !== 'production') {
      const isError = isBandScaleY && yScale(value) === 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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
      children: [isBandScaleY && yScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
        d: `M ${left} ${
        // @ts-expect-error, yScale value is checked in the statement above
        yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
        className: classes.root,
        ownerState: {
          axisHighlight: 'band'
        }
      }), type === 'line' && value !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
        d: `M ${left} ${getYPosition(value)} L ${left + width} ${getYPosition(value)}`,
        className: classes.root,
        ownerState: {
          axisHighlight: 'line'
        }
      })]
    }, `${axisId}-${value}`);
  });
}