@mui/x-charts 8.12.0 → 8.13.0

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -12,137 +12,91 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation.helpers");
+function getNextIndexFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  if (type === undefined ||
+  // @ts-ignore sankey is not in MIT version
+  type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(state.series.processedSeries, type, seriesId)) {
+    const nextSeries = (0, _useChartKeyboardNavigation.getNextSeriesWithData)(state.series.processedSeries, type, seriesId);
+    if (nextSeries === null) {
+      return null;
+    }
+    type = nextSeries.type;
+    seriesId = nextSeries.seriesId;
+  }
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
+  };
+}
+function getPreviousIndexFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  if (type === undefined ||
+  // @ts-ignore sankey is not in MIT version
+  type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(state.series.processedSeries, type, seriesId)) {
+    const previousSeries = (0, _useChartKeyboardNavigation.getPreviousSeriesWithData)(state.series.processedSeries, type, seriesId);
+    if (previousSeries === null) {
+      return null;
+    }
+    type = previousSeries.type;
+    seriesId = previousSeries.seriesId;
+  }
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: (dataLength + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
+  };
+}
+function getNextSeriesFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  const nextSeries = (0, _useChartKeyboardNavigation.getNextSeriesWithData)(state.series.processedSeries, type, seriesId);
+  if (nextSeries === null) {
+    return null; // No series to move the focus to.
+  }
+  type = nextSeries.type;
+  seriesId = nextSeries.seriesId;
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+  };
+}
+function getPreviousSeriesFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  const previousSeries = (0, _useChartKeyboardNavigation.getPreviousSeriesWithData)(state.series.processedSeries, type, seriesId);
+  if (previousSeries === null) {
+    return null; // No series to move the focus to.
+  }
+  type = previousSeries.type;
+  seriesId = previousSeries.seriesId;
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+  };
+}
 const useChartKeyboardNavigation = ({
   params,
   store,
   svgRef
 }) => {
-  const focusNextItem = (0, _useEventCallback.default)(function focusNextItem() {
-    store.update(state => {
-      let {
-        type,
-        seriesId
-      } = state.keyboardNavigation.item ?? {};
-      if (type === undefined ||
-      // @ts-ignore sankey is not in MIT version
-      type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(state.series.processedSeries, type, seriesId)) {
-        const nextSeries = (0, _useChartKeyboardNavigation.getNextSeriesWithData)(state.series.processedSeries, type, seriesId);
-        if (nextSeries === null) {
-          return (0, _extends2.default)({}, state, {
-            keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
-              item: null // No series to move the focus too.
-            })
-          });
-        }
-        type = nextSeries.type;
-        seriesId = nextSeries.seriesId;
-      }
-      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
-      return (0, _extends2.default)({}, state, {
-        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
-          item: {
-            type,
-            seriesId,
-            dataIndex: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
-          }
-        })
-      });
-    });
-  });
-  const focusPreviousItem = (0, _useEventCallback.default)(function focusPreviousItem() {
-    store.update(state => {
-      let {
-        type,
-        seriesId
-      } = state.keyboardNavigation.item ?? {};
-      if (type === undefined ||
-      // @ts-ignore sankey is not in MIT version
-      type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(state.series.processedSeries, type, seriesId)) {
-        const previousSeries = (0, _useChartKeyboardNavigation.getPreviousSeriesWithData)(state.series.processedSeries, type, seriesId);
-        if (previousSeries === null) {
-          return (0, _extends2.default)({}, state, {
-            keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
-              item: null // No series to move the focus too.} };
-            })
-          });
-        }
-        type = previousSeries.type;
-        seriesId = previousSeries.seriesId;
-      }
-      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
-      return (0, _extends2.default)({}, state, {
-        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
-          item: {
-            type,
-            seriesId,
-            dataIndex: (dataLength + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
-          }
-        })
-      });
-    });
-  });
-  const focusPreviousSeries = (0, _useEventCallback.default)(function focusPreviousSeries() {
-    let setNewSeries = false;
-    store.update(state => {
-      let {
-        type,
-        seriesId
-      } = state.keyboardNavigation.item ?? {};
-      const previousSeries = (0, _useChartKeyboardNavigation.getPreviousSeriesWithData)(state.series.processedSeries, type, seriesId);
-      if (previousSeries === null) {
-        return (0, _extends2.default)({}, state, {
-          keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
-            item: null // No series to move the focus too.
-          })
-        });
-      }
-      type = previousSeries.type;
-      seriesId = previousSeries.seriesId;
-      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
-      setNewSeries = true;
-      return (0, _extends2.default)({}, state, {
-        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
-          item: {
-            type,
-            seriesId,
-            dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
-          }
-        })
-      });
-    });
-    return setNewSeries;
-  });
-  const focusNextSeries = (0, _useEventCallback.default)(function focusNextSeries() {
-    let setNewSeries = false;
-    store.update(state => {
-      let {
-        type,
-        seriesId
-      } = state.keyboardNavigation.item ?? {};
-      const nextSeries = (0, _useChartKeyboardNavigation.getNextSeriesWithData)(state.series.processedSeries, type, seriesId);
-      if (nextSeries === null) {
-        return (0, _extends2.default)({}, state, {
-          keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
-            item: null // No series to move the focus too.
-          })
-        });
-      }
-      type = nextSeries.type;
-      seriesId = nextSeries.seriesId;
-      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
-      setNewSeries = true;
-      return (0, _extends2.default)({}, state, {
-        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
-          item: {
-            type,
-            seriesId,
-            dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
-          }
-        })
-      });
-    });
-    return setNewSeries;
-  });
   const removeFocus = (0, _useEventCallback.default)(function removeFocus() {
     store.update(state => {
       if (state.keyboardNavigation.item === null) {
@@ -161,34 +115,42 @@ const useChartKeyboardNavigation = ({
       return undefined;
     }
     function keyboardHandler(event) {
-      switch (event.key) {
-        case 'ArrowRight':
-          focusNextItem();
-          break;
-        case 'ArrowLeft':
-          focusPreviousItem();
-          break;
-        case 'ArrowDown':
-          {
-            const updatedStore = focusPreviousSeries();
-            if (updatedStore) {
-              // prevents scrolling
-              event.preventDefault();
-            }
+      store.update(prevState => {
+        let newFocusedItem = prevState.keyboardNavigation.item;
+        switch (event.key) {
+          case 'ArrowRight':
+            newFocusedItem = getNextIndexFocusedItem(prevState);
+            break;
+          case 'ArrowLeft':
+            newFocusedItem = getPreviousIndexFocusedItem(prevState);
             break;
-          }
-        case 'ArrowUp':
-          {
-            const updatedStore = focusNextSeries();
-            if (updatedStore) {
-              // prevents scrolling
-              event.preventDefault();
+          case 'ArrowDown':
+            {
+              newFocusedItem = getPreviousSeriesFocusedItem(prevState);
+              break;
             }
+          case 'ArrowUp':
+            {
+              newFocusedItem = getNextSeriesFocusedItem(prevState);
+              break;
+            }
+          default:
             break;
-          }
-        default:
-          break;
-      }
+        }
+        if (newFocusedItem !== prevState.keyboardNavigation.item) {
+          event.preventDefault();
+          return (0, _extends2.default)({}, prevState, prevState.interaction && {
+            interaction: (0, _extends2.default)({}, prevState.interaction, {
+              lastUpdate: 'keyboard'
+            })
+          }, {
+            keyboardNavigation: (0, _extends2.default)({}, prevState.keyboardNavigation, {
+              item: newFocusedItem
+            })
+          });
+        }
+        return prevState;
+      });
     }
     element.addEventListener('keydown', keyboardHandler);
     element.addEventListener('blur', removeFocus);
@@ -196,15 +158,13 @@ const useChartKeyboardNavigation = ({
       element.removeEventListener('keydown', keyboardHandler);
       element.removeEventListener('blur', removeFocus);
     };
-  }, [svgRef, focusNextItem, focusPreviousItem, removeFocus, focusPreviousSeries, focusNextSeries, params.enableKeyboardNavigation]);
+  }, [svgRef, removeFocus, params.enableKeyboardNavigation, store]);
   (0, _useEnhancedEffect.default)(() => store.update(prev => prev.keyboardNavigation.enableKeyboardNavigation === params.enableKeyboardNavigation ? prev : (0, _extends2.default)({}, prev, {
     keyboardNavigation: (0, _extends2.default)({}, prev.keyboardNavigation, {
       enableKeyboardNavigation: !!params.enableKeyboardNavigation
     })
   })), [store, params.enableKeyboardNavigation]);
-  return {
-    instance: {}
-  };
+  return {};
 };
 exports.useChartKeyboardNavigation = useChartKeyboardNavigation;
 useChartKeyboardNavigation.getInitialState = params => ({

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.ts

@@ -1,3 +1,5 @@
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { AxisItemIdentifier } from "../../../../models/axis.js";
 export declare const selectorChartsHasFocusedItem: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
@@ -12,7 +14,7 @@ export declare const selectorChartsFocusedSeriesId: import("reselect").Selector<
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, import("../../../index.js").SeriesId | undefined, any[]>;
+}, SeriesId | undefined, any[]>;
 export declare const selectorChartsFocusedDataIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
@@ -22,4 +24,14 @@ export declare const selectorChartsIsKeyboardNavigationEnabled: import("reselect
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, boolean, any[]>;
+}, boolean, any[]>;
+export declare const selectorChartsKeyboardXAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;
+export declare const selectorChartsKeyboardYAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -3,11 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesId = exports.selectorChartsFocusedDataIndex = void 0;
+exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesId = exports.selectorChartsFocusedDataIndex = void 0;
 var _selectors = require("../../utils/selectors");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _useChartCartesianAxisRendering = require("../useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
 const selectKeyboardNavigation = state => state.keyboardNavigation;
 const selectorChartsHasFocusedItem = exports.selectorChartsHasFocusedItem = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item != null);
 const selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesType = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.type);
 const selectorChartsFocusedSeriesId = exports.selectorChartsFocusedSeriesId = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
 const selectorChartsFocusedDataIndex = exports.selectorChartsFocusedDataIndex = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
-const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
+const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
+
+/**
+ * Selectors to override highlight behavior.
+ */
+
+const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis, series) => {
+  if (type === undefined || seriesId === undefined || dataIndex === undefined) {
+    return undefined;
+  }
+  const seriesConfig = series[type]?.series[seriesId];
+  if (!seriesConfig) {
+    return undefined;
+  }
+  let axisId = direction === 'x' ? 'xAxisId' in seriesConfig && seriesConfig.xAxisId : 'yAxisId' in seriesConfig && seriesConfig.yAxisId;
+  if (axisId === undefined || axisId === false) {
+    axisId = axis.axisIds[0];
+  }
+  return {
+    axisId,
+    dataIndex
+  };
+};
+const selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardXAxisIndex = (0, _selectors.createSelector)([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartSeries.selectorChartSeriesProcessed], createSelectAxisHighlight('x'));
+const selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardYAxisIndex = (0, _selectors.createSelector)([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed], createSelectAxisHighlight('y'));

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.d.ts

@@ -1,6 +1,7 @@
 import { ChartPluginSignature } from "../../models/index.js";
 import { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { SeriesId } from "../../../../models/seriesType/common.js";
+import { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 export interface UseChartKeyboardNavigationInstance {}
 type SeriesItemIdentifier = {
   /**
@@ -30,5 +31,6 @@ export type UseChartKeyboardNavigationSignature = ChartPluginSignature<{
   defaultizedParams: UseChartKeyboardNavigationParameters;
   instance: UseChartKeyboardNavigationInstance;
   state: UseChartKeyboardNavigationState;
+  optionalDependencies: [UseChartInteractionSignature];
 }>;
 export {};

package/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js

@@ -106,10 +106,7 @@ function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
-      range,
-      domain: axisExtremums
-    }));
+    const rawTickNumber = (0, _ticks.getTickNumber)(axis, axisExtremums, (0, _ticks.getDefaultTickNumber)(Math.abs(range[1] - range[0])));
     const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, range);
     const scale = (0, _getScale.getScale)(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

package/internals/ticks.d.ts

@@ -1,6 +1,4 @@
 import type { TickParams } from "../hooks/useTicks.js";
-export declare function getTickNumber(params: TickParams & {
-  range: number[];
-  domain: any[];
-}): number;
-export declare function scaleTickNumberByRange(tickNumber: number, range: number[]): number;
+export declare function getTickNumber(params: TickParams, domain: any[], defaultTickNumber: number): number;
+export declare function scaleTickNumberByRange(tickNumber: number, range: number[]): number;
+export declare function getDefaultTickNumber(dimension: number): number;

package/internals/ticks.js

@@ -3,19 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getDefaultTickNumber = getDefaultTickNumber;
 exports.getTickNumber = getTickNumber;
 exports.scaleTickNumberByRange = scaleTickNumberByRange;
-function getTickNumber(params) {
+function getTickNumber(params, domain, defaultTickNumber) {
   const {
     tickMaxStep,
     tickMinStep,
-    tickNumber,
-    range,
-    domain
+    tickNumber
   } = params;
   const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
   const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
-  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  const defaultizedTickNumber = tickNumber ?? defaultTickNumber;
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 function scaleTickNumberByRange(tickNumber, range) {
@@ -26,4 +25,7 @@ function scaleTickNumberByRange(tickNumber, range) {
     return 1;
   }
   return tickNumber / ((range[1] - range[0]) / 100);
+}
+function getDefaultTickNumber(dimension) {
+  return Math.floor(Math.abs(dimension) / 50);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.12.0",
+  "version": "8.13.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.2",
+    "@babel/runtime": "^7.28.4",
     "@mui/utils": "^7.3.2",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
@@ -35,8 +35,8 @@
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
     "@mui/x-charts-vendor": "8.12.0",
-    "@mui/x-internal-gestures": "0.3.0",
-    "@mui/x-internals": "8.12.0"
+    "@mui/x-internals": "8.12.0",
+    "@mui/x-internal-gestures": "0.3.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",