@mui/x-charts/esm/ChartsXAxis/ChartsSingleXAxis.js

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { useIsHydrated } from "../hooks/useIsHydrated.js";
import { getStringSize } from "../internals/domUtils.js";
import { useTicks } from "../hooks/useTicks.js";
import { useMounted } from "../hooks/useMounted.js";
import { useDrawingArea } from "../hooks/useDrawingArea.js";
import { useChartContext } from "../context/ChartProvider/useChartContext.js";
import { shortenLabels } from "./shortenLabels.js";
import { getVisibleLabels } from "./getVisibleLabels.js";
import { AXIS_LABEL_TICK_LABEL_GAP, TICK_LABEL_GAP, XAxisRoot } from "./utilities.js";
import { useAxisProps } from "./useAxisProps.js";

/**
 * @ignore - internal component.
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function ChartsSingleXAxis(inProps) {
  const {
    xScale,
    defaultizedProps,
    tickNumber,
    positionSign,
    skipAxisRendering,
    classes,
    Line,
    Tick,
    TickLabel,
    Label,
    axisTickLabelProps,
    axisLabelProps,
    reverse,
    isRtl
  } = useAxisProps(inProps);
  const isMounted = useMounted();
  const {
    position,
    disableLine,
    disableTicks,
    label,
    tickSize: tickSizeProp,
    valueFormatter,
    slotProps,
    tickInterval,
    tickLabelInterval,
    tickPlacement,
    tickLabelPlacement,
    tickLabelMinGap,
    sx,
    offset,
    height: axisHeight
  } = defaultizedProps;
  const drawingArea = useDrawingArea();
  const {
    left,
    top,
    width,
    height
  } = drawingArea;
  const {
    instance
  } = useChartContext();
  const isHydrated = useIsHydrated();
  const tickSize = disableTicks ? 4 : tickSizeProp;
  const xTicks = useTicks({
    scale: xScale,
    tickNumber,
    valueFormatter,
    tickInterval,
    tickPlacement,
    tickLabelPlacement,
    direction: 'x'
  });
  const visibleLabels = getVisibleLabels(xTicks, {
    tickLabelStyle: axisTickLabelProps.style,
    tickLabelInterval,
    tickLabelMinGap,
    reverse,
    isMounted,
    isXInside: instance.isXInside
  });

  // Skip axis rendering if no data is available
  // - The domain is an empty array for band/point scales.
  // - The domains contains Infinity for continuous scales.
  // - The position is set to 'none'.
  if (skipAxisRendering) {
    return null;
  }
  const labelHeight = label ? getStringSize(label, axisLabelProps.style).height : 0;
  const labelRefPoint = {
    x: left + width / 2,
    y: positionSign * axisHeight
  };

  /* If there's an axis title, the tick labels have less space to render  */
  const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
  const tickLabels = isHydrated ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
  return /*#__PURE__*/_jsxs(XAxisRoot, {
    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
    className: classes.root,
    sx: sx,
    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
      x1: left,
      x2: left + width,
      className: classes.line
    }, slotProps?.axisLine)), xTicks.map((item, index) => {
      const {
        offset: tickOffset,
        labelOffset
      } = item;
      const xTickLabel = labelOffset ?? 0;
      const yTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
      const showTick = instance.isXInside(tickOffset);
      const tickLabel = tickLabels.get(item);
      const showTickLabel = visibleLabels.has(item);
      return /*#__PURE__*/_jsxs("g", {
        transform: `translate(${tickOffset}, 0)`,
        className: classes.tickContainer,
        children: [!disableTicks && showTick && /*#__PURE__*/_jsx(Tick, _extends({
          y2: positionSign * tickSize,
          className: classes.tick
        }, slotProps?.axisTick)), tickLabel !== undefined && showTickLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
          x: xTickLabel,
          y: yTickLabel
        }, axisTickLabelProps, {
          text: tickLabel
        }))]
      }, index);
    }), label && /*#__PURE__*/_jsx("g", {
      className: classes.label,
      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
        text: label
      }))
    })]
  });
}
export { ChartsSingleXAxis };