@mui/x-charts/ChartsXAxis/useAxisProps.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useAxisProps = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
var _styles = require("@mui/material/styles");
var _RtlProvider = require("@mui/system/RtlProvider");
var _ChartsText = require("../ChartsText");
var _useAxis = require("../hooks/useAxis");
var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
var _invertTextAnchor = require("../internals/invertTextAnchor");
var _utilities = require("./utilities");
var _isBandScale = require("../internals/isBandScale");
var _isInfinity = require("../internals/isInfinity");
const _excluded = ["scale", "tickNumber", "reverse"];
const useAxisProps = inProps => {
  const {
    xAxis,
    xAxisIds
  } = (0, _useAxis.useXAxes)();
  const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
    {
      scale: xScale,
      tickNumber,
      reverse
    } = _xAxis,
    settings = (0, _objectWithoutPropertiesLoose2.default)(_xAxis, _excluded);

  // eslint-disable-next-line material-ui/mui-name-matches-component-name
  const themedProps = (0, _styles.useThemeProps)({
    props: (0, _extends2.default)({}, settings, inProps),
    name: 'MuiChartsXAxis'
  });
  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
  const {
    position,
    tickLabelStyle,
    labelStyle,
    slots,
    slotProps
  } = defaultizedProps;
  const theme = (0, _styles.useTheme)();
  const isRtl = (0, _RtlProvider.useRtl)();
  const classes = (0, _utilities.useUtilityClasses)(defaultizedProps);
  const positionSign = position === 'bottom' ? 1 : -1;
  const Line = slots?.axisLine ?? 'line';
  const Tick = slots?.axisTick ?? 'line';
  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
  const defaultTextAnchor = (0, _defaultTextPlacement.getDefaultTextAnchor)((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
  const defaultDominantBaseline = (0, _defaultTextPlacement.getDefaultBaseline)((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
  const axisTickLabelProps = (0, _useSlotProps.default)({
    elementType: TickLabel,
    externalSlotProps: slotProps?.axisTickLabel,
    additionalProps: {
      style: (0, _extends2.default)({}, theme.typography.caption, {
        fontSize: 12,
        lineHeight: 1.25,
        textAnchor: isRtl ? (0, _invertTextAnchor.invertTextAnchor)(defaultTextAnchor) : defaultTextAnchor,
        dominantBaseline: defaultDominantBaseline
      }, tickLabelStyle)
    },
    className: classes.tickLabel,
    ownerState: {}
  });
  const axisLabelProps = (0, _useSlotProps.default)({
    elementType: Label,
    externalSlotProps: slotProps?.axisLabel,
    additionalProps: {
      style: (0, _extends2.default)({}, theme.typography.body1, {
        lineHeight: 1,
        fontSize: 14,
        textAnchor: 'middle',
        dominantBaseline: position === 'bottom' ? 'text-after-edge' : 'text-before-edge'
      }, labelStyle)
    },
    ownerState: {}
  });
  const domain = xScale.domain();
  const isScaleBand = (0, _isBandScale.isBandScale)(xScale);
  const skipAxisRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(_isInfinity.isInfinity) || position === 'none';
  return {
    xScale,
    defaultizedProps,
    tickNumber,
    positionSign,
    skipAxisRendering,
    classes,
    Line,
    Tick,
    TickLabel,
    Label,
    axisTickLabelProps,
    axisLabelProps,
    reverse,
    isRtl
  };
};
exports.useAxisProps = useAxisProps;