@mui/x-charts 8.11.0 → 8.11.2

package/ChartsYAxis/utilities.js

@@ -4,11 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUtilityClasses = exports.defaultProps = exports.YAxisRoot = exports.TICK_LABEL_GAP = exports.AXIS_LABEL_TICK_LABEL_GAP = void 0;
+exports.useUtilityClasses = exports.defaultProps = exports.TICK_LABEL_GAP = exports.AXIS_LABEL_TICK_LABEL_GAP = void 0;
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styles = require("@mui/material/styles");
 var _axisClasses = require("../ChartsAxis/axisClasses");
-var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -31,10 +29,6 @@ exports.useUtilityClasses = useUtilityClasses;
 const TICK_LABEL_GAP = exports.TICK_LABEL_GAP = 2;
 /* Gap between the axis label and tick labels. */
 const AXIS_LABEL_TICK_LABEL_GAP = exports.AXIS_LABEL_TICK_LABEL_GAP = 2;
-const YAxisRoot = exports.YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
-  name: 'MuiChartsYAxis',
-  slot: 'Root'
-})({});
 const defaultProps = exports.defaultProps = {
   disableLine: false,
   disableTicks: false,

package/RadarChart/RadarAxis/RadarAxis.d.ts

@@ -12,11 +12,11 @@ export interface RadarAxisProps extends UseRadarAxisParams {
   /**
    * The labels text anchor or a function returning the text anchor for a given axis angle (in degree).
    */
-  textAnchor?: string | ((angle: number) => string);
+  textAnchor?: React.SVGProps<SVGTextElement>['textAnchor'] | ((angle: number) => React.SVGProps<SVGTextElement>['textAnchor']);
   /**
    * The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).
    */
-  dominantBaseline?: string | ((angle: number) => string);
+  dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'] | ((angle: number) => React.SVGProps<SVGTextElement>['dominantBaseline']);
   /**
    * Override or extend the styles applied to the component.
    */

package/RadarChart/RadarAxis/RadarAxis.js

@@ -81,7 +81,7 @@ process.env.NODE_ENV !== "production" ? RadarAxis.propTypes = {
   /**
    * The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).
    */
-  dominantBaseline: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  dominantBaseline: _propTypes.default.oneOfType([_propTypes.default.oneOf(['alphabetic', 'auto', 'central', 'hanging', 'ideographic', 'inherit', 'mathematical', 'middle', 'no-change', 'reset-size', 'text-after-edge', 'text-before-edge', 'use-script']), _propTypes.default.func]),
   /**
    * Defines how label align with the axis.
    * - 'horizontal': labels stay horizontal and their placement change with the axis angle.
@@ -97,5 +97,5 @@ process.env.NODE_ENV !== "production" ? RadarAxis.propTypes = {
   /**
    * The labels text anchor or a function returning the text anchor for a given axis angle (in degree).
    */
-  textAnchor: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
+  textAnchor: _propTypes.default.oneOfType([_propTypes.default.oneOf(['end', 'inherit', 'middle', 'start']), _propTypes.default.func])
 } : void 0;

package/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -7,14 +7,14 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
   x: number;
   y: number;
-  textAnchor: string;
-  dominantBaseline: string;
+  textAnchor: "inherit" | "end" | "start" | "middle" | undefined;
+  dominantBaseline: "inherit" | "auto" | "middle" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "text-before-edge" | "central" | "text-after-edge" | "use-script" | "no-change" | "reset-size" | undefined;
   transform?: undefined;
 } | {
   x: number;
   y: number;
-  textAnchor: string;
-  dominantBaseline: string;
+  textAnchor: "inherit" | "end" | "start" | "middle" | undefined;
+  dominantBaseline: "inherit" | "auto" | "middle" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "text-before-edge" | "central" | "text-after-edge" | "use-script" | "no-change" | "reset-size" | undefined;
   transform: string;
 };
 export {};

package/RadarChart/RadarAxis/RadarAxis.utils.js

@@ -25,12 +25,12 @@ function getTextAnchor(angle) {
 }
 function getDominantBaseline(angle) {
   if (angle < 160) {
-    return 'baseline';
+    return 'auto';
   }
   if (angle < 360 - 20) {
     return 'hanging';
   }
-  return 'baseline';
+  return 'auto';
 }
 const LABEL_MARGIN = 2;
 function getLabelAttributes(params) {
@@ -43,7 +43,7 @@ function getLabelAttributes(params) {
     const textAnchor = typeof params.textAnchor === 'function' ? params.textAnchor(angle) : params.textAnchor ?? getTextAnchor(angle);
     const dominantBaseline = typeof params.dominantBaseline === 'function' ? params.dominantBaseline(angle) : params.dominantBaseline ?? getDominantBaseline(angle);
     const marginX = textAnchor === 'start' ? LABEL_MARGIN : -LABEL_MARGIN;
-    const marginY = dominantBaseline === 'baseline' ? -LABEL_MARGIN : LABEL_MARGIN;
+    const marginY = dominantBaseline === 'auto' ? -LABEL_MARGIN : LABEL_MARGIN;
     return {
       x: x + marginX,
       y: y + marginY,
@@ -55,7 +55,7 @@ function getLabelAttributes(params) {
   // orientation='rotated'
 
   const textAnchor = typeof params.textAnchor === 'function' ? params.textAnchor(angle) : params.textAnchor ?? 'start';
-  const dominantBaseline = typeof params.dominantBaseline === 'function' ? params.dominantBaseline(angle) : params.dominantBaseline ?? 'baseline';
+  const dominantBaseline = typeof params.dominantBaseline === 'function' ? params.dominantBaseline(angle) : params.dominantBaseline ?? 'auto';
   return {
     x,
     y,

package/esm/ChartsXAxis/ChartsGroupedXAxisTicks.d.ts

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

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 { 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);
+    axisTickLabelProps
+  } = useAxisTicksProps(inProps);
   if (!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
+    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.d.ts

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

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -3,9 +3,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 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:
@@ -23,10 +23,13 @@ function ChartsXAxis(inProps) {
     xAxisIds
   } = useXAxes();
   const axis = xAxis[inProps.axisId ?? xAxisIds[0]];
-  if ('groups' in axis && Array.isArray(axis.groups)) {
-    return /*#__PURE__*/_jsx(ChartsGroupedXAxis, _extends({}, inProps));
+  if (!axis) {
+    warnOnce(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
+    return null;
   }
-  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 { isBandScale } from "../internals/isBandScale.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 isScaleBand = isBandScale(xScale);
+  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && 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
+      }))
+    })]
+  });
+}