@mui/x-charts 8.11.0 → 8.11.2

package/{esm/ChartsYAxis/ChartsGroupedYAxis.d.ts → ChartsYAxis/ChartsGroupedYAxisTicks.d.ts}

@@ -3,5 +3,5 @@ import { ChartsYAxisProps } from "../models/axis.js";
 /**
  * @ignore - internal component.
  */
-declare function ChartsGroupedYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
-export { ChartsGroupedYAxis };
+declare function ChartsGroupedYAxisTicks(inProps: ChartsYAxisProps): React.JSX.Element;
+export { ChartsGroupedYAxisTicks };

package/ChartsYAxis/{ChartsGroupedYAxis.js → ChartsGroupedYAxisTicks.js}

@@ -6,15 +6,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsGroupedYAxis = ChartsGroupedYAxis;
+exports.ChartsGroupedYAxisTicks = ChartsGroupedYAxisTicks;
 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 _useAxisTicksProps = require("./useAxisTicksProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_GROUPING_CONFIG = {
   tickSize: 6
@@ -31,55 +30,33 @@ const getGroupingConfig = (groups, groupIndex, tickSize) => {
 /**
  * @ignore - internal component.
  */
-function ChartsGroupedYAxis(inProps) {
+function ChartsGroupedYAxisTicks(inProps) {
   const {
     yScale,
     defaultizedProps,
     tickNumber,
     positionSign,
-    skipAxisRendering,
     classes,
-    Line,
     Tick,
     TickLabel,
-    Label,
-    axisTickLabelProps,
-    axisLabelProps,
-    lineProps
-  } = (0, _useAxisProps.useAxisProps)(inProps);
+    axisTickLabelProps
+  } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
   if (!(0, _isBandScale.isBandScale)(yScale)) {
     throw new Error('MUI X Charts: ChartsGroupedYAxis only supports the `band` and `point` scale types.');
   }
   const {
-    position,
-    disableLine,
     disableTicks,
-    label,
     tickSize,
     valueFormatter,
     slotProps,
     tickInterval,
     tickPlacement,
-    tickLabelPlacement,
-    sx,
-    offset,
-    width: axisWidth
+    tickLabelPlacement
   } = defaultizedProps;
   const groups = defaultizedProps.groups;
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = (0, _useChartContext.useChartContext)();
-  const labelRefPoint = {
-    x: positionSign * axisWidth,
-    y: top + height / 2
-  };
   const yTicks = (0, _useTicksGrouped.useTicksGrouped)({
     scale: yScale,
     tickNumber,
@@ -90,23 +67,8 @@ function ChartsGroupedYAxis(inProps) {
     direction: 'y',
     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.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
-    }, lineProps)), yTicks.map((item, index) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: yTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset
@@ -134,11 +96,6 @@ function ChartsGroupedYAxis(inProps) {
           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
-      }))
-    })]
+    })
   });
 }

package/ChartsYAxis/ChartsSingleYAxisTicks.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsYAxisProps } from "../models/axis.js";
+interface ChartsSingleYAxisProps extends ChartsYAxisProps {
+  axisLabelHeight: number;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsSingleYAxisTicks(inProps: ChartsSingleYAxisProps): React.JSX.Element;
+export { ChartsSingleYAxisTicks };

package/ChartsYAxis/{ChartsSingleYAxis.js → ChartsSingleYAxisTicks.js}

@@ -6,42 +6,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsSingleYAxis = ChartsSingleYAxis;
+exports.ChartsSingleYAxisTicks = ChartsSingleYAxisTicks;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useIsHydrated = require("../hooks/useIsHydrated");
-var _domUtils = require("../internals/domUtils");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _ChartProvider = require("../context/ChartProvider");
 var _shortenLabels = require("./shortenLabels");
 var _utilities = require("./utilities");
-var _useAxisProps = require("./useAxisProps");
+var _useAxisTicksProps = require("./useAxisTicksProps");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
- */function ChartsSingleYAxis(inProps) {
+ */
+function ChartsSingleYAxisTicks(inProps) {
+  const {
+    axisLabelHeight
+  } = inProps;
   const {
     yScale,
     defaultizedProps,
     tickNumber,
     positionSign,
-    skipAxisRendering,
     classes,
-    Line,
     Tick,
     TickLabel,
-    Label,
-    axisTickLabelProps,
-    axisLabelProps,
-    lineProps,
-    isRtl
-  } = (0, _useAxisProps.useAxisProps)(inProps);
+    axisTickLabelProps
+  } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
+  const isRtl = (0, _RtlProvider.useRtl)();
   const {
-    position,
-    disableLine,
     disableTicks,
-    label,
     tickSize: tickSizeProp,
     valueFormatter,
     slotProps,
@@ -49,17 +45,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     tickLabelPlacement,
     tickInterval,
     tickLabelInterval,
-    sx,
-    offset,
     width: axisWidth
   } = defaultizedProps;
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = (0, _ChartProvider.useChartContext)();
@@ -75,29 +63,11 @@ var _jsxRuntime = require("react/jsx-runtime");
     direction: 'y'
   });
 
-  // 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 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 + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.TICK_LABEL_GAP);
+  const tickLabelsMaxWidth = Math.max(0, axisWidth - (axisLabelHeight > 0 ? axisLabelHeight + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.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)(_utilities.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
-    }, lineProps)), yTicks.map((item, index) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: yTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset,
@@ -123,11 +93,6 @@ var _jsxRuntime = require("react/jsx-runtime");
           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
-      }))
-    })]
+    })
   });
 }

package/ChartsYAxis/ChartsYAxis.d.ts

@@ -9,7 +9,7 @@ import { ChartsYAxisProps } from "../models/axis.js";
  *
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
  */
-declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element;
+declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
 declare namespace ChartsYAxis {
   var propTypes: any;
 }

package/ChartsYAxis/ChartsYAxis.js

@@ -10,9 +10,9 @@ exports.ChartsYAxis = ChartsYAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useAxis = require("../hooks/useAxis");
-var _ChartsSingleYAxis = require("./ChartsSingleYAxis");
-var _ChartsGroupedYAxis = require("./ChartsGroupedYAxis");
+var _warning = require("@mui/x-internals/warning");
+var _hooks = require("../hooks");
+var _ChartsYAxisImpl = require("./ChartsYAxisImpl");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -26,12 +26,15 @@ var _jsxRuntime = require("react/jsx-runtime");
   const {
     yAxis,
     yAxisIds
-  } = (0, _useAxis.useYAxes)();
+  } = (0, _hooks.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));
+  if (!axis) {
+    (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleYAxis.ChartsSingleYAxis, (0, _extends2.default)({}, inProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxisImpl.ChartsYAxisImpl, (0, _extends2.default)({}, inProps, {
+    axis: axis
+  }));
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // ----------------------------- Warning --------------------------------

package/ChartsYAxis/ChartsYAxisImpl.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AxisScaleConfig, ChartsYAxisProps, ComputedAxis } from "../models/axis.js";
+interface ChartsYAxisImplProps extends Omit<ChartsYAxisProps, 'axis'> {
+  axis: ComputedAxis<keyof AxisScaleConfig, any, ChartsYAxisProps>;
+}
+/**
+ * @ignore - internal component. Use `ChartsYAxis` instead.
+ */
+export declare function ChartsYAxisImpl({
+  axis,
+  ...inProps
+}: ChartsYAxisImplProps): React.JSX.Element | null;
+export {};

package/ChartsYAxis/ChartsYAxisImpl.js

@@ -0,0 +1,133 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsYAxisImpl = ChartsYAxisImpl;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _styles = require("@mui/material/styles");
+var _ChartsSingleYAxisTicks = require("./ChartsSingleYAxisTicks");
+var _ChartsGroupedYAxisTicks = require("./ChartsGroupedYAxisTicks");
+var _ChartsText = require("../ChartsText");
+var _utilities = require("./utilities");
+var _isInfinity = require("../internals/isInfinity");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useIsHydrated = require("../hooks/useIsHydrated");
+var _isBandScale = require("../internals/isBandScale");
+var _domUtils = require("../internals/domUtils");
+var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["axis"],
+  _excluded2 = ["scale", "tickNumber", "reverse"];
+const YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
+  name: 'MuiChartsYAxis',
+  slot: 'Root'
+})({});
+/**
+ * @ignore - internal component. Use `ChartsYAxis` instead.
+ */
+function ChartsYAxisImpl(_ref) {
+  let {
+      axis
+    } = _ref,
+    inProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const {
+      scale: yScale
+    } = axis,
+    settings = (0, _objectWithoutPropertiesLoose2.default)(axis, _excluded2);
+  const isHydrated = (0, _useIsHydrated.useIsHydrated)();
+
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({}, settings, inProps),
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  const {
+    position,
+    disableLine,
+    label,
+    labelStyle,
+    offset,
+    width: axisWidth,
+    sx,
+    slots,
+    slotProps
+  } = defaultizedProps;
+  const theme = (0, _styles.useTheme)();
+  const classes = (0, _utilities.useUtilityClasses)(defaultizedProps);
+  const {
+    left,
+    top,
+    width,
+    height
+  } = (0, _useDrawingArea.useDrawingArea)();
+  const positionSign = position === 'right' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const lineProps = (0, _useSlotProps.default)({
+    elementType: Line,
+    externalSlotProps: slotProps?.axisLine,
+    additionalProps: {
+      strokeLinecap: 'square'
+    },
+    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: {}
+  });
+
+  // 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 (position === 'none') {
+    return null;
+  }
+  const labelRefPoint = {
+    x: positionSign * axisWidth,
+    y: top + height / 2
+  };
+  const axisLabelHeight = label == null ? 0 : (0, _domUtils.getStringSize)(label, axisLabelProps.style).height;
+  const domain = yScale.domain();
+  const isScaleBand = (0, _isBandScale.isBandScale)(yScale);
+  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(_isInfinity.isInfinity);
+  let children = null;
+  if (!skipTickRendering) {
+    children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedYAxisTicks.ChartsGroupedYAxisTicks, (0, _extends2.default)({}, inProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleYAxisTicks.ChartsSingleYAxisTicks, (0, _extends2.default)({}, inProps, {
+      axisLabelHeight: axisLabelHeight
+    }));
+  }
+  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
+    }, lineProps)), children, label && isHydrated && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}