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

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChartsGroupedXAxis = ChartsGroupedXAxis;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _useDrawingArea = require("../hooks/useDrawingArea");
var _isBandScale = require("../internals/isBandScale");
var _useChartContext = require("../context/ChartProvider/useChartContext");
var _utilities = require("./utilities");
var _useTicksGrouped = require("../hooks/useTicksGrouped");
var _useAxisProps = require("./useAxisProps");
var _jsxRuntime = require("react/jsx-runtime");
const DEFAULT_GROUPING_CONFIG = {
  tickSize: 6
};
const getGroupingConfig = (groups, groupIndex, tickSize) => {
  const config = groups[groupIndex] ?? {};
  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
  return (0, _extends2.default)({}, DEFAULT_GROUPING_CONFIG, config, {
    tickSize: config.tickSize ?? calculatedTickSize
  });
};

/**
 * @ignore - internal component.
 */
function ChartsGroupedXAxis(inProps) {
  const {
    xScale,
    defaultizedProps,
    tickNumber,
    positionSign,
    skipAxisRendering,
    classes,
    Line,
    Tick,
    TickLabel,
    Label,
    axisTickLabelProps,
    axisLabelProps
  } = (0, _useAxisProps.useAxisProps)(inProps);
  if (!(0, _isBandScale.isBandScale)(xScale)) {
    throw new Error('MUI X Charts: ChartsGroupedXAxis only supports the `band` and `point` scale types.');
  }
  const {
    position,
    disableLine,
    disableTicks,
    label,
    tickSize,
    valueFormatter,
    slotProps,
    tickInterval,
    tickPlacement,
    tickLabelPlacement,
    sx,
    offset,
    height: axisHeight
  } = defaultizedProps;
  const groups = defaultizedProps.groups;
  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
  const {
    left,
    top,
    width,
    height
  } = drawingArea;
  const {
    instance
  } = (0, _useChartContext.useChartContext)();
  const labelRefPoint = {
    x: left + width / 2,
    y: positionSign * axisHeight
  };
  const xTicks = (0, _useTicksGrouped.useTicksGrouped)({
    scale: xScale,
    tickNumber,
    valueFormatter,
    tickInterval,
    tickPlacement,
    tickLabelPlacement,
    direction: 'x',
    groups
  });

  // 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;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.XAxisRoot, {
    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
    className: classes.root,
    sx: sx,
    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
      x1: left,
      x2: left + width,
      className: classes.line
    }, slotProps?.axisLine)), xTicks.map((item, index) => {
      const {
        offset: tickOffset,
        labelOffset
      } = item;
      const xTickLabel = labelOffset ?? 0;
      const showTick = instance.isXInside(tickOffset);
      const tickLabel = item.formattedValue;
      const ignoreTick = item.ignoreTick ?? false;
      const groupIndex = item.groupIndex ?? 0;
      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
      const tickYSize = positionSign * groupConfig.tickSize;
      const labelPositionY = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
        transform: `translate(${tickOffset}, 0)`,
        className: classes.tickContainer,
        "data-group-index": groupIndex,
        children: [!disableTicks && !ignoreTick && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
          y2: tickYSize,
          className: classes.tick
        }, slotProps?.axisTick)), tickLabel !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
          x: xTickLabel,
          y: labelPositionY
        }, axisTickLabelProps, {
          style: (0, _extends2.default)({}, axisTickLabelProps.style, groupConfig.tickLabelStyle),
          text: tickLabel
        }))]
      }, index);
    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
      className: classes.label,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
        text: label
      }))
    })]
  });
}