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

package/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -15,16 +15,18 @@ 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
   });
 };
 /**
@@ -54,9 +56,16 @@ function ChartsGroupedXAxisTicks(inProps) {
     tickLabelPlacement
   } = defaultizedProps;
   const groups = defaultizedProps.groups;
+  const axisId = defaultizedProps.id;
   const {
     instance
   } = (0, _useChartsContext.useChartsContext)();
+  const store = (0, _useStore.useStore)();
+
+  // Get computed group tick sizes from auto-sizing (if available)
+  const autoSizeResults = store.use(_useChartAxisAutoSize.selectorChartXAxisAutoSizeResults);
+  const axisAutoSizeResult = axisId ? autoSizeResults[axisId] : undefined;
+  const computedGroupTickSizes = axisAutoSizeResult?.groupTickSizes;
   const xTicks = (0, _useTicksGrouped.useTicksGrouped)({
     scale: xScale,
     tickNumber,
@@ -78,7 +87,7 @@ function ChartsGroupedXAxisTicks(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 tickYSize = positionSign * groupConfig.tickSize;
       const labelPositionY = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {

package/ChartsXAxis/ChartsGroupedXAxisTicks.mjs

@@ -8,16 +8,18 @@ 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 { selectorChartXAxisAutoSizeResults } 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
   });
 };
 /**
@@ -47,9 +49,16 @@ function ChartsGroupedXAxisTicks(inProps) {
     tickLabelPlacement
   } = defaultizedProps;
   const groups = defaultizedProps.groups;
+  const axisId = defaultizedProps.id;
   const {
     instance
   } = useChartsContext();
+  const store = useStore();
+
+  // Get computed group tick sizes from auto-sizing (if available)
+  const autoSizeResults = store.use(selectorChartXAxisAutoSizeResults);
+  const axisAutoSizeResult = axisId ? autoSizeResults[axisId] : undefined;
+  const computedGroupTickSizes = axisAutoSizeResult?.groupTickSizes;
   const xTicks = useTicksGrouped({
     scale: xScale,
     tickNumber,
@@ -71,7 +80,7 @@ function ChartsGroupedXAxisTicks(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 tickYSize = positionSign * groupConfig.tickSize;
       const labelPositionY = positionSign * (groupConfig.tickSize + TICK_LABEL_GAP);
       return /*#__PURE__*/_jsxs("g", {