@mui/x-charts 8.9.2 → 8.10.1

package/ChartsYAxis/ChartsYAxis.js

@@ -1,67 +1,19 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsYAxis = ChartsYAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styles = require("@mui/material/styles");
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _useIsHydrated = require("../hooks/useIsHydrated");
-var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
-var _domUtils = require("../internals/domUtils");
-var _useTicks = require("../hooks/useTicks");
-var _useDrawingArea = require("../hooks/useDrawingArea");
-var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
-var _ChartsText = require("../ChartsText");
-var _axisClasses = require("../ChartsAxis/axisClasses");
-var _isInfinity = require("../internals/isInfinity");
-var _isBandScale = require("../internals/isBandScale");
-var _ChartProvider = require("../context/ChartProvider");
-var _hooks = require("../hooks");
-var _invertTextAnchor = require("../internals/invertTextAnchor");
-var _shortenLabels = require("./shortenLabels");
+var _useAxis = require("../hooks/useAxis");
+var _ChartsSingleYAxis = require("./ChartsSingleYAxis");
+var _ChartsGroupedYAxis = require("./ChartsGroupedYAxis");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "tickNumber"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    position,
-    id
-  } = ownerState;
-  const slots = {
-    root: ['root', 'directionY', position, `id-${id}`],
-    line: ['line'],
-    tickContainer: ['tickContainer'],
-    tick: ['tick'],
-    tickLabel: ['tickLabel'],
-    label: ['label']
-  };
-  return (0, _composeClasses.default)(slots, _axisClasses.getAxisUtilityClass, classes);
-};
-
-/* Gap between a tick and its label. */
-const TICK_LABEL_GAP = 2;
-/* Gap between the axis label and tick labels. */
-const AXIS_LABEL_TICK_LABEL_GAP = 2;
-const YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
-  name: 'MuiChartsYAxis',
-  slot: 'Root'
-})({});
-const defaultProps = {
-  disableLine: false,
-  disableTicks: false,
-  tickSize: 6
-};
-
 /**
  * Demos:
  *
@@ -70,167 +22,16 @@ const defaultProps = {
  * API:
  *
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
- */
-function ChartsYAxis(inProps) {
+ */function ChartsYAxis(inProps) {
   const {
-    yAxisIds,
-    yAxis
-  } = (0, _hooks.useYAxes)();
-  const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
-    {
-      scale: yScale,
-      tickNumber
-    } = _yAxis,
-    settings = (0, _objectWithoutPropertiesLoose2.default)(_yAxis, _excluded);
-  const themedProps = (0, _styles.useThemeProps)({
-    props: (0, _extends2.default)({}, settings, inProps),
-    name: 'MuiChartsYAxis'
-  });
-  const defaultizedProps = (0, _extends2.default)({}, defaultProps, themedProps);
-  const {
-    position,
-    disableLine,
-    disableTicks,
-    label,
-    labelStyle,
-    tickLabelStyle,
-    tickSize: tickSizeProp,
-    valueFormatter,
-    slots,
-    slotProps,
-    tickPlacement,
-    tickLabelPlacement,
-    tickInterval,
-    tickLabelInterval,
-    sx,
-    offset,
-    width: axisWidth
-  } = defaultizedProps;
-  const theme = (0, _styles.useTheme)();
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const isHydrated = (0, _useIsHydrated.useIsHydrated)();
-  const classes = useUtilityClasses(defaultizedProps);
-  const {
-    instance
-  } = (0, _ChartProvider.useChartContext)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
-  const tickSize = disableTicks ? 4 : tickSizeProp;
-  const yTicks = (0, _useTicks.useTicks)({
-    scale: yScale,
-    tickNumber,
-    valueFormatter,
-    tickPlacement,
-    tickLabelPlacement,
-    tickInterval,
-    direction: 'y'
-  });
-  const positionSign = position === 'right' ? 1 : -1;
-  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
-  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 === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
-  const defaultDominantBaseline = (0, _defaultTextPlacement.getDefaultBaseline)((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
-  const axisTickLabelProps = (0, _useSlotProps.default)({
-    elementType: TickLabel,
-    externalSlotProps: slotProps?.axisTickLabel,
-    additionalProps: {
-      style: (0, _extends2.default)({}, theme.typography.caption, {
-        fontSize: tickFontSize,
-        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,
-        angle: positionSign * 90,
-        textAnchor: 'middle',
-        dominantBaseline: 'text-before-edge'
-      }, labelStyle)
-    },
-    ownerState: {}
-  });
-  const lineSlotProps = (0, _useSlotProps.default)({
-    elementType: Line,
-    externalSlotProps: slotProps?.axisLine,
-    additionalProps: {
-      strokeLinecap: 'square'
-    },
-    ownerState: {}
-  });
-  const domain = yScale.domain();
-  const ordinalAxis = (0, _isBandScale.isBandScale)(yScale);
-
-  // 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 'none'.
-  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity) || position === 'none') {
-    return null;
+    yAxis,
+    yAxisIds
+  } = (0, _useAxis.useYAxes)();
+  const axis = yAxis[inProps.axisId ?? yAxisIds[0]];
+  if ('groups' in axis && Array.isArray(axis.groups)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedYAxis.ChartsGroupedYAxis, (0, _extends2.default)({}, inProps));
   }
-  const labelRefPoint = {
-    x: positionSign * axisWidth,
-    y: top + height / 2
-  };
-  /* If there's an axis title, the tick labels have less space to render  */
-  const tickLabelsMaxWidth = Math.max(0, axisWidth - (label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
-  const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(YAxisRoot, {
-    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
-      y1: top,
-      y2: top + height,
-      className: classes.line
-    }, lineSlotProps)), yTicks.map((item, index) => {
-      const {
-        offset: tickOffset,
-        labelOffset,
-        value
-      } = item;
-      const xTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
-      const yTickLabel = labelOffset;
-      const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = instance.isYInside(tickOffset);
-      const tickLabel = tickLabels.get(item);
-      if (!showLabel) {
-        return null;
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-        transform: `translate(0, ${tickOffset})`,
-        className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
-          x2: positionSign * tickSize,
-          className: classes.tick
-        }, slotProps?.axisTick)), tickLabel !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
-          x: xTickLabel,
-          y: yTickLabel,
-          text: tickLabel
-        }, axisTickLabelProps))]
-      }, index);
-    }), label && isHydrated && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      className: classes.label,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
-  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleYAxis.ChartsSingleYAxis, (0, _extends2.default)({}, inProps));
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // ----------------------------- Warning --------------------------------