@mui/x-charts 8.11.1 → 8.11.3

package/ChartsXAxis/{ChartsGroupedXAxis.js → ChartsGroupedXAxisTicks.js}

@@ -6,15 +6,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsGroupedXAxis = ChartsGroupedXAxis;
+exports.ChartsGroupedXAxisTicks = ChartsGroupedXAxisTicks;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useDrawingArea = require("../hooks/useDrawingArea");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 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
@@ -27,58 +26,36 @@ const getGroupingConfig = (groups, groupIndex, tickSize) => {
     tickSize: config.tickSize ?? calculatedTickSize
   });
 };
-
 /**
  * @ignore - internal component.
  */
-function ChartsGroupedXAxis(inProps) {
+function ChartsGroupedXAxisTicks(inProps) {
   const {
     xScale,
     defaultizedProps,
     tickNumber,
     positionSign,
-    skipAxisRendering,
     classes,
-    Line,
     Tick,
     TickLabel,
-    Label,
-    axisTickLabelProps,
-    axisLabelProps
-  } = (0, _useAxisProps.useAxisProps)(inProps);
-  if (!(0, _isBandScale.isBandScale)(xScale)) {
+    axisTickLabelProps
+  } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
+  if (!(0, _scaleGuards.isOrdinalScale)(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
+    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: left + width / 2,
-    y: positionSign * axisHeight
-  };
   const xTicks = (0, _useTicksGrouped.useTicksGrouped)({
     scale: xScale,
     tickNumber,
@@ -89,23 +66,8 @@ function ChartsGroupedXAxis(inProps) {
     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) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: xTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset
@@ -133,11 +95,6 @@ function ChartsGroupedXAxis(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/ChartsXAxis/ChartsSingleXAxisTicks.d.ts

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

package/ChartsXAxis/{ChartsSingleXAxis.js → ChartsSingleXAxisTicks.js}

@@ -6,11 +6,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsSingleXAxis = ChartsSingleXAxis;
+exports.ChartsSingleXAxisTicks = ChartsSingleXAxisTicks;
 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 _useMounted = require("../hooks/useMounted");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -18,33 +18,30 @@ var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _shortenLabels = require("./shortenLabels");
 var _getVisibleLabels = require("./getVisibleLabels");
 var _utilities = require("./utilities");
-var _useAxisProps = require("./useAxisProps");
+var _useAxisTicksProps = require("./useAxisTicksProps");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
- */function ChartsSingleXAxis(inProps) {
+ */
+function ChartsSingleXAxisTicks(inProps) {
+  const {
+    axisLabelHeight
+  } = inProps;
   const {
     xScale,
     defaultizedProps,
     tickNumber,
     positionSign,
-    skipAxisRendering,
     classes,
-    Line,
     Tick,
     TickLabel,
-    Label,
     axisTickLabelProps,
-    axisLabelProps,
-    reverse,
-    isRtl
-  } = (0, _useAxisProps.useAxisProps)(inProps);
+    reverse
+  } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
+  const isRtl = (0, _RtlProvider.useRtl)();
   const isMounted = (0, _useMounted.useMounted)();
   const {
-    position,
-    disableLine,
     disableTicks,
-    label,
     tickSize: tickSizeProp,
     valueFormatter,
     slotProps,
@@ -53,17 +50,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     tickPlacement,
     tickLabelPlacement,
     tickLabelMinGap,
-    sx,
-    offset,
     height: axisHeight
   } = defaultizedProps;
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = (0, _useChartContext.useChartContext)();
@@ -87,31 +76,11 @@ var _jsxRuntime = require("react/jsx-runtime");
     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 ? (0, _domUtils.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 + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.TICK_LABEL_GAP);
+  const tickLabelsMaxHeight = Math.max(0, axisHeight - (axisLabelHeight > 0 ? axisLabelHeight + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.TICK_LABEL_GAP);
   const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
-  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) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: xTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset
@@ -134,11 +103,6 @@ var _jsxRuntime = require("react/jsx-runtime");
           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/ChartsXAxis/ChartsXAxis.js

@@ -12,8 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _warning = require("@mui/x-internals/warning");
 var _useAxis = require("../hooks/useAxis");
-var _ChartsSingleXAxis = require("./ChartsSingleXAxis");
-var _ChartsGroupedXAxis = require("./ChartsGroupedXAxis");
+var _ChartsXAxisImpl = require("./ChartsXAxisImpl");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -33,10 +32,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
     return null;
   }
-  if ('groups' in axis && Array.isArray(axis.groups)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedXAxis.ChartsGroupedXAxis, (0, _extends2.default)({}, inProps));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleXAxis.ChartsSingleXAxis, (0, _extends2.default)({}, inProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxisImpl.ChartsXAxisImpl, (0, _extends2.default)({}, inProps, {
+    axis: axis
+  }));
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // ----------------------------- Warning --------------------------------

package/ChartsXAxis/ChartsXAxisImpl.d.ts

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

package/ChartsXAxis/ChartsXAxisImpl.js

@@ -0,0 +1,117 @@
+"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.ChartsXAxisImpl = ChartsXAxisImpl;
+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 _ChartsSingleXAxisTicks = require("./ChartsSingleXAxisTicks");
+var _ChartsGroupedXAxisTicks = require("./ChartsGroupedXAxisTicks");
+var _ChartsText = require("../ChartsText");
+var _scaleGuards = require("../internals/scaleGuards");
+var _isInfinity = require("../internals/isInfinity");
+var _utilities = require("./utilities");
+var _hooks = require("../hooks");
+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 XAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
+  name: 'MuiChartsXAxis',
+  slot: 'Root'
+})({});
+/**
+ * @ignore - internal component. Use `ChartsXAxis` instead.
+ */
+function ChartsXAxisImpl(_ref) {
+  let {
+      axis
+    } = _ref,
+    inProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const {
+      scale: xScale
+    } = axis,
+    settings = (0, _objectWithoutPropertiesLoose2.default)(axis, _excluded2);
+
+  // 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,
+    labelStyle,
+    offset,
+    slots,
+    slotProps,
+    sx,
+    disableLine,
+    label,
+    height: axisHeight
+  } = defaultizedProps;
+  const theme = (0, _styles.useTheme)();
+  const classes = (0, _utilities.useUtilityClasses)(defaultizedProps);
+  const {
+    left,
+    top,
+    width,
+    height
+  } = (0, _hooks.useDrawingArea)();
+  const positionSign = position === 'bottom' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  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: {}
+  });
+  if (position === 'none') {
+    return null;
+  }
+  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
+  const domain = xScale.domain();
+  const isScaleOrdinal = (0, _scaleGuards.isOrdinalScale)(xScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(_isInfinity.isInfinity);
+  let children = null;
+  if (!skipTickRendering) {
+    children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedXAxisTicks.ChartsGroupedXAxisTicks, (0, _extends2.default)({}, inProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleXAxisTicks.ChartsSingleXAxisTicks, (0, _extends2.default)({}, inProps, {
+      axisLabelHeight: labelHeight
+    }));
+  }
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * axisHeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(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)), children, label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}

package/ChartsXAxis/getVisibleLabels.js

@@ -43,8 +43,12 @@ function getVisibleLabels(xTicks, {
   return new Set(xTicks.filter((item, labelIndex) => {
     const {
       offset,
-      labelOffset
+      labelOffset,
+      formattedValue
     } = item;
+    if (formattedValue === '') {
+      return false;
+    }
     const textPosition = offset + labelOffset;
     if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
       return false;