@mui/x-charts 9.0.0-alpha.3 → 9.0.0-beta.0

package/ChartsYAxis/ChartsGroupedYAxisTicks.js

@@ -11,20 +11,22 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _scaleGuards = require("../internals/scaleGuards");
-var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
 var _utilities = require("./utilities");
 var _useTicksGrouped = require("../hooks/useTicksGrouped");
 var _useAxisTicksProps = require("./useAxisTicksProps");
+var _useStore = require("../internals/store/useStore");
+var _useChartAxisAutoSize = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_GROUPING_CONFIG = {
   tickSize: 6
 };
-const getGroupingConfig = (groups, groupIndex, tickSize) => {
+const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
   const config = groups[groupIndex] ?? {};
   const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
   const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
   return (0, _extends2.default)({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: config.tickSize ?? calculatedTickSize
+    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
   });
 };
 
@@ -55,9 +57,16 @@ function ChartsGroupedYAxisTicks(inProps) {
     tickLabelPlacement
   } = defaultizedProps;
   const groups = defaultizedProps.groups;
+  const axisId = defaultizedProps.id;
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
+  const store = (0, _useStore.useStore)();
+
+  // Get computed group tick sizes from auto-sizing (if available)
+  const autoSizeResults = store.use(_useChartAxisAutoSize.selectorChartYAxisAutoSizeResults);
+  const axisAutoSizeResult = axisId ? autoSizeResults[axisId] : undefined;
+  const computedGroupTickSizes = axisAutoSizeResult?.groupTickSizes;
   const yTicks = (0, _useTicksGrouped.useTicksGrouped)({
     scale: yScale,
     tickNumber,
@@ -79,7 +88,7 @@ function ChartsGroupedYAxisTicks(inProps) {
       const tickLabel = item.formattedValue;
       const ignoreTick = item.ignoreTick ?? false;
       const groupIndex = item.groupIndex ?? 0;
-      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
+      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize, computedGroupTickSizes);
       const tickXSize = positionSign * groupConfig.tickSize;
       const labelPositionX = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {

package/ChartsYAxis/ChartsGroupedYAxisTicks.mjs

@@ -4,20 +4,22 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
-import { useChartContext } from "../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../context/ChartsProvider/useChartsContext.mjs";
 import { TICK_LABEL_GAP } from "./utilities.mjs";
 import { useTicksGrouped } from "../hooks/useTicksGrouped.mjs";
 import { useAxisTicksProps } from "./useAxisTicksProps.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartYAxisAutoSizeResults } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_GROUPING_CONFIG = {
   tickSize: 6
 };
-const getGroupingConfig = (groups, groupIndex, tickSize) => {
+const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
   const config = groups[groupIndex] ?? {};
   const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
   const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
   return _extends({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: config.tickSize ?? calculatedTickSize
+    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
   });
 };
 
@@ -48,9 +50,16 @@ function ChartsGroupedYAxisTicks(inProps) {
     tickLabelPlacement
   } = defaultizedProps;
   const groups = defaultizedProps.groups;
+  const axisId = defaultizedProps.id;
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
+  const store = useStore();
+
+  // Get computed group tick sizes from auto-sizing (if available)
+  const autoSizeResults = store.use(selectorChartYAxisAutoSizeResults);
+  const axisAutoSizeResult = axisId ? autoSizeResults[axisId] : undefined;
+  const computedGroupTickSizes = axisAutoSizeResult?.groupTickSizes;
   const yTicks = useTicksGrouped({
     scale: yScale,
     tickNumber,
@@ -72,7 +81,7 @@ function ChartsGroupedYAxisTicks(inProps) {
       const tickLabel = item.formattedValue;
       const ignoreTick = item.ignoreTick ?? false;
       const groupIndex = item.groupIndex ?? 0;
-      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
+      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize, computedGroupTickSizes);
       const tickXSize = positionSign * groupConfig.tickSize;
       const labelPositionX = positionSign * (groupConfig.tickSize + TICK_LABEL_GAP);
       return /*#__PURE__*/_jsxs("g", {

package/ChartsYAxis/ChartsSingleYAxisTicks.js

@@ -13,7 +13,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _useIsHydrated = require("../hooks/useIsHydrated");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _shortenLabels = require("./shortenLabels");
 var _utilities = require("./utilities");
 var _useAxisTicksProps = require("./useAxisTicksProps");
@@ -52,7 +52,7 @@ function ChartsSingleYAxisTicks(inProps) {
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const isHydrated = (0, _useIsHydrated.useIsHydrated)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.useTicks)({

package/ChartsYAxis/ChartsSingleYAxisTicks.mjs

@@ -6,7 +6,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { useIsHydrated } from "../hooks/useIsHydrated.mjs";
 import { useTicks } from "../hooks/useTicks.mjs";
 import { useDrawingArea } from "../hooks/useDrawingArea.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { shortenLabels } from "./shortenLabels.mjs";
 import { AXIS_LABEL_TICK_LABEL_GAP, TICK_LABEL_GAP } from "./utilities.mjs";
 import { useAxisTicksProps } from "./useAxisTicksProps.mjs";
@@ -45,7 +45,7 @@ function ChartsSingleYAxisTicks(inProps) {
   const drawingArea = useDrawingArea();
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const isHydrated = useIsHydrated();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({

package/ChartsYAxis/ChartsYAxisImpl.js

@@ -10,6 +10,7 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _styles = require("@mui/material/styles");
 var _ChartsSingleYAxisTicks = require("./ChartsSingleYAxisTicks");
@@ -54,6 +55,7 @@ function ChartsYAxisImpl(_ref) {
   const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
   const {
     position,
+    className,
     disableLine,
     label,
     labelStyle,
@@ -123,7 +125,7 @@ function ChartsYAxisImpl(_ref) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(YAxisRoot, {
     transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
-    className: classes.root,
+    className: (0, _clsx.default)(classes.root, className),
     "data-axis-id": defaultizedProps.id,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({

package/ChartsYAxis/ChartsYAxisImpl.mjs

@@ -5,6 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["axis"],
   _excluded2 = ["scale", "tickNumber", "reverse", "ordinalTimeTicks"];
 import * as React from 'react';
+import clsx from 'clsx';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { ChartsSingleYAxisTicks } from "./ChartsSingleYAxisTicks.mjs";
@@ -47,6 +48,7 @@ export function ChartsYAxisImpl(_ref) {
   const defaultizedProps = _extends({}, defaultProps, themedProps);
   const {
     position,
+    className,
     disableLine,
     label,
     labelStyle,
@@ -116,7 +118,7 @@ export function ChartsYAxisImpl(_ref) {
   }
   return /*#__PURE__*/_jsxs(YAxisRoot, {
     transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
-    className: classes.root,
+    className: clsx(classes.root, className),
     "data-axis-id": defaultizedProps.id,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({