@mui/x-charts/esm/ChartsGrid/ChartsHorizontalGrid.js

The community edition of MUI X Charts components.

import * as React from 'react';
import { useTicks } from "../hooks/useTicks.js";
import { GridLine } from "./styledComponents.js";
import { useChartContext } from "../context/ChartProvider/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * @ignore - internal component.
 */
export function ChartsGridHorizontal(props) {
  const {
    instance
  } = useChartContext();
  const {
    axis,
    start,
    end,
    classes
  } = props;
  const {
    scale,
    tickNumber,
    tickInterval,
    tickSpacing
  } = axis;
  const yTicks = useTicks({
    scale,
    tickNumber,
    tickInterval,
    tickSpacing,
    direction: 'y',
    ordinalTimeTicks: 'ordinalTimeTicks' in axis ? axis.ordinalTimeTicks : undefined
  });
  return /*#__PURE__*/_jsx(React.Fragment, {
    children: yTicks.map(({
      value,
      offset
    }) => !instance.isYInside(offset) ? null : /*#__PURE__*/_jsx(GridLine, {
      y1: offset,
      y2: offset,
      x1: start,
      x2: end,
      className: classes.horizontalLine
    }, `horizontal-${value?.getTime?.() ?? value}`))
  });
}