propagate experimental feature

alexfauquette · alexfauquette · commit e10ee1d74597 · 2025-06-25T16:11:04.000+02:00
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -1,5 +1,6 @@
 import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
+import { createTheme } from '@mui/material/styles';
 import pages from 'docsx/data/pages'; // DO NOT REMOVE
 import { postProcessImport } from 'docsx/src/modules/utils/postProcessImport';
 import * as React from 'react';
@@ -162,6 +163,16 @@ function loadDependencies() {
   );
 }
 
+const experimentaChartFeatures = createTheme({
+  components: {
+    MuiChartDataProvider: {
+      defaultProps: {
+        experimentalFeatures: { strictDomainLimit: true },
+      },
+    },
+  },
+});
+
 if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
   // eslint-disable-next-line no-console
   console.log(
@@ -331,7 +342,7 @@ function AppWrapper(props) {
               <PageContext.Provider value={pageContextValue}>
                 <ThemeWrapper>
                   <DocsStyledEngineProvider cacheLtr={emotionCache}>
-                    {children}
+                    <ThemeProvider theme={experimentaChartFeatures}>{children}</ThemeProvider>
                     <GoogleAnalytics />
                   </DocsStyledEngineProvider>
                 </ThemeWrapper>
diff --git a/packages/x-charts/src/ChartContainer/useChartContainerProps.ts b/packages/x-charts/src/ChartContainer/useChartContainerProps.ts
@@ -52,6 +52,7 @@ export const useChartContainerProps = <
     localeText,
     slots,
     slotProps,
+    experimentalFeatures,
     ...other
   } = props as ChartContainerProps<TSeries, AllPluginSignatures>;
 
@@ -85,6 +86,7 @@ export const useChartContainerProps = <
     height,
     localeText,
     seriesConfig,
+    experimentalFeatures,
     plugins: plugins ?? DEFAULT_PLUGINS,
     slots,
     slotProps,
diff --git a/packages/x-charts/src/ChartDataProvider/useChartDataProviderProps.ts b/packages/x-charts/src/ChartDataProvider/useChartDataProviderProps.ts
@@ -1,5 +1,5 @@
 'use client';
-import { useTheme } from '@mui/material/styles';
+import { useTheme, useThemeProps } from '@mui/material/styles';
 import type { ChartDataProviderProps } from './ChartDataProvider';
 import { ChartProviderProps } from '../context/ChartProvider';
 import { ChartAnyPluginSignature, MergeSignaturesProperty } from '../internals/plugins/models';
@@ -12,8 +12,11 @@ export const useChartDataProviderProps = <
   TSeries extends ChartSeriesType = ChartSeriesType,
   TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>,
 >(
-  props: ChartDataProviderProps<TSeries, TSignatures> & ChartsLocalizationProviderProps,
+  inProps: ChartDataProviderProps<TSeries, TSignatures> & ChartsLocalizationProviderProps,
 ) => {
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const props = useThemeProps({ props: inProps, name: 'MuiChartDataProvider' });
+
   const {
     children,
     localeText,
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/corePlugins.ts b/packages/x-charts/src/internals/plugins/corePlugins/corePlugins.ts
@@ -1,5 +1,9 @@
 import { type UseChartAnimationSignature, useChartAnimation } from './useChartAnimation';
 import { type UseChartDimensionsSignature, useChartDimensions } from './useChartDimensions';
+import {
+  type UseChartExperimentalFeaturesSignature,
+  useChartExperimentalFeatures,
+} from './useChartExperimentalFeature';
 import { type UseChartIdSignature, useChartId, UseChartIdParameters } from './useChartId';
 import { type UseChartSeriesSignature, useChartSeries } from './useChartSeries';
 
@@ -9,13 +13,15 @@ import { type UseChartSeriesSignature, useChartSeries } from './useChartSeries';
  */
 export const CHART_CORE_PLUGINS = [
   useChartId,
+  useChartExperimentalFeatures,
   useChartDimensions,
   useChartSeries,
   useChartAnimation,
 ] as const;
 
 export type ChartCorePluginSignatures = [
   UseChartIdSignature,
+  UseChartExperimentalFeaturesSignature,
   UseChartDimensionsSignature,
   UseChartSeriesSignature,
   UseChartAnimationSignature,
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/index.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/index.ts
@@ -0,0 +1,6 @@
+export { useChartExperimentalFeatures } from './useChartExperimentalFeature';
+export type {
+  UseChartExperimentalFeaturesSignature,
+  UseChartExperimentalFeaturesParameters,
+} from './useChartExperimentalFeature.types';
+export * from './useChartExperimentalFeature.selectors';
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.ts
@@ -0,0 +1,11 @@
+import { ChartRootSelector, createSelector } from '../../utils/selectors';
+import type { UseChartExperimentalFeaturesSignature } from './useChartExperimentalFeature.types';
+
+export const selectorChartExperimentalFeaturesState: ChartRootSelector<
+  UseChartExperimentalFeaturesSignature
+> = (state) => state.experimentalFeatures;
+
+export const selectorUseStrictDomainLimit = createSelector(
+  [selectorChartExperimentalFeaturesState],
+  (features) => Boolean(features?.strictDomainLimit),
+);
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.ts
@@ -0,0 +1,30 @@
+'use client';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { ChartPlugin } from '../../models';
+import type { UseChartExperimentalFeaturesSignature } from './useChartExperimentalFeature.types';
+
+export const useChartExperimentalFeatures: ChartPlugin<UseChartExperimentalFeaturesSignature> = ({
+  params,
+  store,
+}) => {
+  useEnhancedEffect(() => {
+    store.update((prevState) => {
+      return {
+        ...prevState,
+        experimentalFeatures: params.experimentalFeatures,
+      };
+    });
+  }, [store, params.experimentalFeatures]);
+
+  return {};
+};
+
+useChartExperimentalFeatures.params = {
+  experimentalFeatures: true,
+};
+
+useChartExperimentalFeatures.getInitialState = ({ experimentalFeatures }) => {
+  return {
+    experimentalFeatures,
+  };
+};
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.ts
@@ -0,0 +1,25 @@
+import { ChartPluginSignature } from '../../models';
+
+export interface ChartExperimentalFeatures {
+  /**
+   * Default domainLimit to strict for line chart x-axis.
+   */
+  strictDomainLimit?: true;
+}
+
+export interface UseChartExperimentalFeaturesParameters {
+  /**
+   * Options to enable features planned for the nex major.
+   */
+  experimentalFeatures?: ChartExperimentalFeatures;
+}
+
+export interface UseChartExperimentalFeaturesState {
+  experimentalFeatures?: ChartExperimentalFeatures;
+}
+
+export type UseChartExperimentalFeaturesSignature = ChartPluginSignature<{
+  params: UseChartExperimentalFeaturesParameters;
+  defaultizedParams: UseChartExperimentalFeaturesParameters;
+  state: UseChartExperimentalFeaturesState;
+}>;
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.ts
@@ -56,6 +56,7 @@ type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
   zoomMap?: Map<AxisId, ZoomData>;
   zoomOptions?: Record<AxisId, DefaultizedZoomOptions>;
   getFilters?: GetZoomAxisFilters;
+  experimental_strictDomainLimit?: boolean;
 };
 
 export function computeAxisValue<T extends ChartSeriesType>(
@@ -79,6 +80,7 @@ export function computeAxisValue<T extends ChartSeriesType>({
   zoomMap,
   zoomOptions,
   getFilters,
+  experimental_strictDomainLimit,
 }: ComputeCommonParams<T> & {
   axis?: DefaultedAxis[];
   axisDirection: 'x' | 'y';
@@ -181,7 +183,9 @@ export function computeAxisValue<T extends ChartSeriesType>({
 
     const scaleType = axis.scaleType ?? ('linear' as const);
 
-    const domainLimit = getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries);
+    const domainLimit = experimental_strictDomainLimit
+      ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries)
+      : (axis.domainLimit ?? 'nice');
 
     const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
 
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.ts
@@ -15,6 +15,7 @@ import {
   selectorChartRawXAxis,
   selectorChartRawYAxis,
 } from './useChartCartesianAxisLayout.selectors';
+import { selectorUseStrictDomainLimit } from '../../corePlugins/useChartExperimentalFeature';
 
 export const createZoomMap = (zoom: readonly ZoomData[]) => {
   const zoomItemMap = new Map<AxisId, ZoomData>();
@@ -137,8 +138,18 @@ export const selectorChartXAxis = createSelector(
     selectorChartZoomMap,
     selectorChartZoomOptionsLookup,
     selectorChartZoomAxisFilters,
+    selectorUseStrictDomainLimit,
   ],
-  (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) =>
+  (
+    axis,
+    drawingArea,
+    formattedSeries,
+    seriesConfig,
+    zoomMap,
+    zoomOptions,
+    getFilters,
+    experimental_strictDomainLimit,
+  ) =>
     computeAxisValue({
       drawingArea,
       formattedSeries,
@@ -148,6 +159,7 @@ export const selectorChartXAxis = createSelector(
       zoomMap,
       zoomOptions,
       getFilters,
+      experimental_strictDomainLimit,
     }),
 );
 
@@ -160,8 +172,18 @@ export const selectorChartYAxis = createSelector(
     selectorChartZoomMap,
     selectorChartZoomOptionsLookup,
     selectorChartZoomAxisFilters,
+    selectorUseStrictDomainLimit,
   ],
-  (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) =>
+  (
+    axis,
+    drawingArea,
+    formattedSeries,
+    seriesConfig,
+    zoomMap,
+    zoomOptions,
+    getFilters,
+    experimental_strictDomainLimit,
+  ) =>
     computeAxisValue({
       drawingArea,
       formattedSeries,
@@ -171,6 +193,7 @@ export const selectorChartYAxis = createSelector(
       zoomMap,
       zoomOptions,
       getFilters,
+      experimental_strictDomainLimit,
     }),
 );
 
diff --git a/packages/x-charts/src/themeAugmentation/components.ts b/packages/x-charts/src/themeAugmentation/components.ts
@@ -34,6 +34,9 @@ export interface ChartsComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiChartsSurface'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiChartsSurface'];
   };
+  MuiChartDataProvider?: {
+    defaultProps?: ComponentsProps['MuiChartDataProvider'];
+  };
   MuiBarChart?: {
     defaultProps?: ComponentsProps['MuiBarChart'];
   };
diff --git a/packages/x-charts/src/themeAugmentation/props.ts b/packages/x-charts/src/themeAugmentation/props.ts
@@ -9,6 +9,7 @@ import { ScatterChartProps } from '../ScatterChart/ScatterChart';
 import { PieChartProps } from '../PieChart/PieChart';
 import { ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
 import { ChartsLocalizationProviderProps } from '../ChartsLocalizationProvider';
+import { ChartDataProviderProps } from '../ChartDataProvider';
 
 export interface ChartsComponentsPropsList {
   MuiChartsXAxis: ChartsXAxisProps;
@@ -19,6 +20,8 @@ export interface ChartsComponentsPropsList {
   MuiChartsTooltip: ChartsTooltipProps;
   MuiChartsSurface: ChartsSurfaceProps;
 
+  MuiChartDataProvider: ChartDataProviderProps;
+
   // BarChart components
   MuiBarChart: BarChartProps;
   MuiBarLabel: BarLabelProps;
diff --git a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
@@ -76,6 +76,13 @@ createTheme({
         constent: { color: 'red' },
       },
     },
+    MuiChartDataProvider: {
+      defaultProps: {
+        experimentalFeatures: { strictDomainLimit: true },
+        // @ts-expect-error invalid MuiChartsSurface prop
+        someRandomProp: true,
+      },
+    },
 
     // BarChart components
     MuiBarChart: {
