@mui/x-charts 8.11.1 → 8.11.3

package/esm/ChartsYAxis/{ChartsGroupedYAxis.js → ChartsGroupedYAxisTicks.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, YAxisRoot } 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
@@ -24,55 +23,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
-  } = useAxisProps(inProps);
-  if (!isBandScale(yScale)) {
+    axisTickLabelProps
+  } = useAxisTicksProps(inProps);
+  if (!isOrdinalScale(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 = useDrawingArea();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = useChartContext();
-  const labelRefPoint = {
-    x: positionSign * axisWidth,
-    y: top + height / 2
-  };
   const yTicks = useTicksGrouped({
     scale: yScale,
     tickNumber,
@@ -83,23 +60,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__*/_jsxs(YAxisRoot, {
-    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
-      y1: top,
-      y2: top + height,
-      className: classes.line
-    }, lineProps)), yTicks.map((item, index) => {
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: yTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset
@@ -127,12 +89,7 @@ function ChartsGroupedYAxis(inProps) {
           text: tickLabel
         }))]
       }, index);
-    }), label && /*#__PURE__*/_jsx("g", {
-      className: classes.label,
-      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
+    })
   });
 }
-export { ChartsGroupedYAxis };
+export { ChartsGroupedYAxisTicks };

package/esm/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/esm/ChartsYAxis/{ChartsSingleYAxis.js → ChartsSingleYAxisTicks.js}

@@ -2,41 +2,35 @@
 
 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 { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { shortenLabels } from "./shortenLabels.js";
-import { AXIS_LABEL_TICK_LABEL_GAP, TICK_LABEL_GAP, YAxisRoot } 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 ChartsSingleYAxis(inProps) {
+function ChartsSingleYAxisTicks(inProps) {
+  const {
+    axisLabelHeight
+  } = inProps;
   const {
     yScale,
     defaultizedProps,
     tickNumber,
     positionSign,
-    skipAxisRendering,
     classes,
-    Line,
     Tick,
     TickLabel,
-    Label,
-    axisTickLabelProps,
-    axisLabelProps,
-    lineProps,
-    isRtl
-  } = useAxisProps(inProps);
+    axisTickLabelProps
+  } = useAxisTicksProps(inProps);
+  const isRtl = useRtl();
   const {
-    position,
-    disableLine,
     disableTicks,
-    label,
     tickSize: tickSizeProp,
     valueFormatter,
     slotProps,
@@ -44,17 +38,9 @@ function ChartsSingleYAxis(inProps) {
     tickLabelPlacement,
     tickInterval,
     tickLabelInterval,
-    sx,
-    offset,
     width: axisWidth
   } = defaultizedProps;
   const drawingArea = useDrawingArea();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = useChartContext();
@@ -70,29 +56,11 @@ function ChartsSingleYAxis(inProps) {
     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 ? getStringSize(label, axisLabelProps.style).height + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
+  const tickLabelsMaxWidth = Math.max(0, axisWidth - (axisLabelHeight > 0 ? axisLabelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
   const tickLabels = isHydrated ? shortenLabels(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
-  return /*#__PURE__*/_jsxs(YAxisRoot, {
-    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
-      y1: top,
-      y2: top + height,
-      className: classes.line
-    }, lineProps)), yTicks.map((item, index) => {
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: yTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset,
@@ -118,12 +86,7 @@ function ChartsSingleYAxis(inProps) {
           text: tickLabel
         }, axisTickLabelProps))]
       }, index);
-    }), label && isHydrated && /*#__PURE__*/_jsx("g", {
-      className: classes.label,
-      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
+    })
   });
 }
-export { ChartsSingleYAxis };
+export { ChartsSingleYAxisTicks };

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -4,9 +4,8 @@ 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 { useYAxes } from "../hooks/useAxis.js";
-import { ChartsSingleYAxis } from "./ChartsSingleYAxis.js";
-import { ChartsGroupedYAxis } from "./ChartsGroupedYAxis.js";
+import { useYAxes } from "../hooks/index.js";
+import { ChartsYAxisImpl } from "./ChartsYAxisImpl.js";
 
 /**
  * Demos:
@@ -28,10 +27,9 @@ function ChartsYAxis(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(ChartsGroupedYAxis, _extends({}, inProps));
-  }
-  return /*#__PURE__*/_jsx(ChartsSingleYAxis, _extends({}, inProps));
+  return /*#__PURE__*/_jsx(ChartsYAxisImpl, _extends({}, inProps, {
+    axis: axis
+  }));
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/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/esm/ChartsYAxis/ChartsYAxisImpl.js

@@ -0,0 +1,126 @@
+'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 { useThemeProps, useTheme, styled } from '@mui/material/styles';
+import { ChartsSingleYAxisTicks } from "./ChartsSingleYAxisTicks.js";
+import { ChartsGroupedYAxisTicks } from "./ChartsGroupedYAxisTicks.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { defaultProps, useUtilityClasses } from "./utilities.js";
+import { isInfinity } from "../internals/isInfinity.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { useIsHydrated } from "../hooks/useIsHydrated.js";
+import { isOrdinalScale } from "../internals/scaleGuards.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 YAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsYAxis',
+  slot: 'Root'
+})({});
+/**
+ * @ignore - internal component. Use `ChartsYAxis` instead.
+ */
+export function ChartsYAxisImpl(_ref) {
+  let {
+      axis
+    } = _ref,
+    inProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+      scale: yScale
+    } = axis,
+    settings = _objectWithoutPropertiesLoose(axis, _excluded2);
+  const isHydrated = useIsHydrated();
+
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const themedProps = useThemeProps({
+    props: _extends({}, settings, inProps),
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  const {
+    position,
+    disableLine,
+    label,
+    labelStyle,
+    offset,
+    width: axisWidth,
+    sx,
+    slots,
+    slotProps
+  } = defaultizedProps;
+  const theme = useTheme();
+  const classes = useUtilityClasses(defaultizedProps);
+  const {
+    left,
+    top,
+    width,
+    height
+  } = useDrawingArea();
+  const positionSign = position === 'right' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Label = slots?.axisLabel ?? ChartsText;
+  const lineProps = useSlotProps({
+    elementType: Line,
+    externalSlotProps: slotProps?.axisLine,
+    additionalProps: {
+      strokeLinecap: 'square'
+    },
+    ownerState: {}
+  });
+  const axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: _extends({}, 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 : getStringSize(label, axisLabelProps.style).height;
+  const domain = yScale.domain();
+  const isScaleOrdinal = isOrdinalScale(yScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(isInfinity);
+  let children = null;
+  if (!skipTickRendering) {
+    children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/_jsx(ChartsGroupedYAxisTicks, _extends({}, inProps)) : /*#__PURE__*/_jsx(ChartsSingleYAxisTicks, _extends({}, inProps, {
+      axisLabelHeight: axisLabelHeight
+    }));
+  }
+  return /*#__PURE__*/_jsxs(YAxisRoot, {
+    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
+    className: classes.root,
+    sx: sx,
+    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
+      y1: top,
+      y2: top + height,
+      className: classes.line
+    }, lineProps)), children, label && isHydrated && /*#__PURE__*/_jsx("g", {
+      className: classes.label,
+      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}