@mui/x-charts 8.11.1 → 8.11.3

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

@@ -2,12 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useChartContext } from "../context/ChartProvider/useChartContext.js";
-import { TICK_LABEL_GAP, XAxisRoot } from "./utilities.js";
+import { TICK_LABEL_GAP } from "./utilities.js";
 import { useTicksGrouped } from "../hooks/useTicksGrouped.js";
-import { useAxisProps } from "./useAxisProps.js";
+import { useAxisTicksProps } from "./useAxisTicksProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_GROUPING_CONFIG = {
   tickSize: 6
@@ -20,58 +19,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
-  } = useAxisProps(inProps);
-  if (!isBandScale(xScale)) {
+    axisTickLabelProps
+  } = useAxisTicksProps(inProps);
+  if (!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 = useDrawingArea();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = useChartContext();
-  const labelRefPoint = {
-    x: left + width / 2,
-    y: positionSign * axisHeight
-  };
   const xTicks = useTicksGrouped({
     scale: xScale,
     tickNumber,
@@ -82,23 +59,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__*/_jsxs(XAxisRoot, {
-    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
-      x1: left,
-      x2: left + width,
-      className: classes.line
-    }, slotProps?.axisLine)), xTicks.map((item, index) => {
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: xTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset
@@ -126,12 +88,7 @@ function ChartsGroupedXAxis(inProps) {
           text: tickLabel
         }))]
       }, index);
-    }), label && /*#__PURE__*/_jsx("g", {
-      className: classes.label,
-      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
+    })
   });
 }
-export { ChartsGroupedXAxis };
+export { ChartsGroupedXAxisTicks };

package/esm/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/esm/ChartsXAxis/{ChartsSingleXAxis.js → ChartsSingleXAxisTicks.js}

@@ -2,44 +2,39 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useIsHydrated } from "../hooks/useIsHydrated.js";
-import { getStringSize } from "../internals/domUtils.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { useMounted } from "../hooks/useMounted.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useChartContext } from "../context/ChartProvider/useChartContext.js";
 import { shortenLabels } from "./shortenLabels.js";
 import { getVisibleLabels } from "./getVisibleLabels.js";
-import { AXIS_LABEL_TICK_LABEL_GAP, TICK_LABEL_GAP, XAxisRoot } from "./utilities.js";
-import { useAxisProps } from "./useAxisProps.js";
-
+import { AXIS_LABEL_TICK_LABEL_GAP, TICK_LABEL_GAP } from "./utilities.js";
+import { useAxisTicksProps } from "./useAxisTicksProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ChartsSingleXAxis(inProps) {
+function ChartsSingleXAxisTicks(inProps) {
+  const {
+    axisLabelHeight
+  } = inProps;
   const {
     xScale,
     defaultizedProps,
     tickNumber,
     positionSign,
-    skipAxisRendering,
     classes,
-    Line,
     Tick,
     TickLabel,
-    Label,
     axisTickLabelProps,
-    axisLabelProps,
-    reverse,
-    isRtl
-  } = useAxisProps(inProps);
+    reverse
+  } = useAxisTicksProps(inProps);
+  const isRtl = useRtl();
   const isMounted = useMounted();
   const {
-    position,
-    disableLine,
     disableTicks,
-    label,
     tickSize: tickSizeProp,
     valueFormatter,
     slotProps,
@@ -48,17 +43,9 @@ function ChartsSingleXAxis(inProps) {
     tickPlacement,
     tickLabelPlacement,
     tickLabelMinGap,
-    sx,
-    offset,
     height: axisHeight
   } = defaultizedProps;
   const drawingArea = useDrawingArea();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = useChartContext();
@@ -82,31 +69,11 @@ function ChartsSingleXAxis(inProps) {
     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 ? 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 + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
+  const tickLabelsMaxHeight = Math.max(0, axisHeight - (axisLabelHeight > 0 ? axisLabelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
   const tickLabels = isHydrated ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
-  return /*#__PURE__*/_jsxs(XAxisRoot, {
-    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
-      x1: left,
-      x2: left + width,
-      className: classes.line
-    }, slotProps?.axisLine)), xTicks.map((item, index) => {
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: xTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset
@@ -129,12 +96,7 @@ function ChartsSingleXAxis(inProps) {
           text: tickLabel
         }))]
       }, index);
-    }), label && /*#__PURE__*/_jsx("g", {
-      className: classes.label,
-      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
+    })
   });
 }
-export { ChartsSingleXAxis };
+export { ChartsSingleXAxisTicks };

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -5,8 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useXAxes } from "../hooks/useAxis.js";
-import { ChartsSingleXAxis } from "./ChartsSingleXAxis.js";
-import { ChartsGroupedXAxis } from "./ChartsGroupedXAxis.js";
+import { ChartsXAxisImpl } from "./ChartsXAxisImpl.js";
 
 /**
  * Demos:
@@ -28,10 +27,9 @@ function ChartsXAxis(inProps) {
     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__*/_jsx(ChartsGroupedXAxis, _extends({}, inProps));
-  }
-  return /*#__PURE__*/_jsx(ChartsSingleXAxis, _extends({}, inProps));
+  return /*#__PURE__*/_jsx(ChartsXAxisImpl, _extends({}, inProps, {
+    axis: axis
+  }));
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/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/esm/ChartsXAxis/ChartsXAxisImpl.js

@@ -0,0 +1,110 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["axis"],
+  _excluded2 = ["scale", "tickNumber", "reverse"];
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import { ChartsSingleXAxisTicks } from "./ChartsSingleXAxisTicks.js";
+import { ChartsGroupedXAxisTicks } from "./ChartsGroupedXAxisTicks.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
+import { isInfinity } from "../internals/isInfinity.js";
+import { defaultProps, useUtilityClasses } from "./utilities.js";
+import { useDrawingArea } from "../hooks/index.js";
+import { getStringSize } from "../internals/domUtils.js";
+import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const XAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsXAxis',
+  slot: 'Root'
+})({});
+/**
+ * @ignore - internal component. Use `ChartsXAxis` instead.
+ */
+export function ChartsXAxisImpl(_ref) {
+  let {
+      axis
+    } = _ref,
+    inProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+      scale: xScale
+    } = axis,
+    settings = _objectWithoutPropertiesLoose(axis, _excluded2);
+
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const themedProps = useThemeProps({
+    props: _extends({}, settings, inProps),
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  const {
+    position,
+    labelStyle,
+    offset,
+    slots,
+    slotProps,
+    sx,
+    disableLine,
+    label,
+    height: axisHeight
+  } = defaultizedProps;
+  const theme = useTheme();
+  const classes = useUtilityClasses(defaultizedProps);
+  const {
+    left,
+    top,
+    width,
+    height
+  } = useDrawingArea();
+  const positionSign = position === 'bottom' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Label = slots?.axisLabel ?? ChartsText;
+  const axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: _extends({}, 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 ? getStringSize(label, axisLabelProps.style).height : 0;
+  const domain = xScale.domain();
+  const isScaleOrdinal = isOrdinalScale(xScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(isInfinity);
+  let children = null;
+  if (!skipTickRendering) {
+    children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/_jsx(ChartsGroupedXAxisTicks, _extends({}, inProps)) : /*#__PURE__*/_jsx(ChartsSingleXAxisTicks, _extends({}, inProps, {
+      axisLabelHeight: labelHeight
+    }));
+  }
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * axisHeight
+  };
+  return /*#__PURE__*/_jsxs(XAxisRoot, {
+    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
+    className: classes.root,
+    sx: sx,
+    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
+      x1: left,
+      x2: left + width,
+      className: classes.line
+    }, slotProps?.axisLine)), children, label && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}

package/esm/ChartsXAxis/getVisibleLabels.js

@@ -39,8 +39,12 @@ export 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;