@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { createSelector } from "../../utils/selectors.js";
+import { computeAxisValue } from "./computeAxisValue.js";
+import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
+export const createZoomMap = zoom => {
+  const zoomItemMap = new Map();
+  zoom.forEach(zoomItem => {
+    zoomItemMap.set(zoomItem.axisId, zoomItem);
+  });
+  return zoomItemMap;
+};
+export const selectorChartCartesianAxisState = state => state.cartesianAxis;
+const selectorChartZoomState = state => state.zoom;
+export const selectorChartRawXAxis = createSelector(selectorChartCartesianAxisState, axis => axis?.x);
+export const selectorChartRawYAxis = createSelector(selectorChartCartesianAxisState, axis => axis?.y);
+
+/**
+ * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
+ */
+
+const selectorChartZoomMap = createSelector(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
+const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, () => undefined);
+const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'x'
+}));
+const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'y'
+}));
+const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+  if (xMapper === undefined || yMapper === undefined) {
+    // Early return if there is no zoom.
+    return undefined;
+  }
+  const xFilters = xAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
+    const filter = xMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  const yFilters = yAxis.reduce((acc, axis, index) => {
+    // @ts-expect-error The type is defined in the pro package
+    const filter = yMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
+    return undefined;
+  }
+  return createGetAxisFilters(_extends({}, xFilters, yFilters));
+});
+
+/**
+ * The only interesting selectors that merge axis data and zoom if provided.
+ */
+
+export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));
+export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.js

@@ -0,0 +1,12 @@
+export const createIsFaded = (highlightScope, highlightedItem) => item => {
+  if (!highlightScope || !highlightedItem || !item) {
+    return false;
+  }
+  if (highlightScope.fade === 'series') {
+    return item.seriesId === highlightedItem.seriesId && item.dataIndex !== highlightedItem.dataIndex;
+  }
+  if (highlightScope.fade === 'global') {
+    return item.seriesId !== highlightedItem.seriesId || item.dataIndex !== highlightedItem.dataIndex;
+  }
+  return false;
+};

package/modern/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.js

@@ -0,0 +1,12 @@
+export const createIsHighlighted = (highlightScope, highlightedItem) => item => {
+  if (!highlightScope || !highlightedItem || !item) {
+    return false;
+  }
+  if (highlightScope.highlight === 'series') {
+    return item.seriesId === highlightedItem.seriesId;
+  }
+  if (highlightScope.highlight === 'item') {
+    return item.dataIndex === highlightedItem.dataIndex && item.seriesId === highlightedItem.seriesId;
+  }
+  return false;
+};

package/modern/internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/featurePlugins/useChartHighlight/index.js

@@ -0,0 +1,2 @@
+export { useChartHighlight } from "./useChartHighlight.js";
+export * from "./useChartHighlight.selectors.js";

package/modern/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+export const useChartHighlight = ({
+  store,
+  params,
+  models
+}) => {
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      highlight: _extends({}, prevState.highlight, {
+        item: models.highlightedItem.value
+      })
+    }));
+  }, [store, models.highlightedItem.value]);
+  const clearHighlight = useEventCallback(() => {
+    params.onHighlightChange?.(null);
+    models.highlightedItem.setControlledValue(null);
+  });
+  const setHighlight = useEventCallback(newItem => {
+    params.onHighlightChange?.(newItem);
+    models.highlightedItem.setControlledValue(newItem);
+  });
+  return {
+    instance: {
+      clearHighlight,
+      setHighlight
+    }
+  };
+};
+useChartHighlight.models = {
+  highlightedItem: {
+    getDefaultValue: () => null
+  }
+};
+useChartHighlight.getInitialState = params => ({
+  highlight: {
+    item: params.highlightedItem ?? null
+  }
+});
+useChartHighlight.params = {
+  highlightedItem: true,
+  onHighlightChange: true
+};

package/modern/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -0,0 +1,31 @@
+import { createSelector } from "../../utils/selectors.js";
+import { createIsHighlighted } from "./createIsHighlighted.js";
+import { createIsFaded } from "./createIsFaded.js";
+const selectHighlight = state => state.highlight;
+const selectSeries = state => state.series;
+export const selectorChartsHighlightScopePerSeriesId = createSelector(selectSeries, series => {
+  const map = new Map();
+  Object.keys(series.processedSeries).forEach(seriesType => {
+    const seriesData = series.processedSeries[seriesType];
+    Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
+      const seriesItem = seriesData?.series[seriesId];
+      map.set(seriesId, seriesItem?.highlightScope);
+    });
+  });
+  return map;
+});
+export const selectorChartsHighlightedItem = createSelector(selectHighlight, highlight => highlight.item);
+export const selectorChartsHighlightScope = createSelector([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], (seriesIdToHighlightScope, highlightedItem) => {
+  if (!highlightedItem) {
+    return null;
+  }
+  const highlightScope = seriesIdToHighlightScope.get(highlightedItem.seriesId);
+  if (highlightScope === undefined) {
+    return null;
+  }
+  return highlightScope;
+});
+export const selectorChartsIsHighlightedCallback = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], createIsHighlighted);
+export const selectorChartsIsFadedCallback = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], createIsFaded);
+export const selectorChartsIsHighlighted = createSelector([selectorChartsIsHighlightedCallback, (_, item) => item], (callback, item) => callback(item));
+export const selectorChartsIsFaded = createSelector([selectorChartsIsFadedCallback, (_, item) => item], (callback, item) => callback(item));

package/modern/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/featurePlugins/useChartInteraction/index.js

@@ -0,0 +1,2 @@
+export { useChartInteraction } from "./useChartInteraction.js";
+export * from "./useChartInteraction.selectors.js";

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+export const useChartInteraction = ({
+  store
+}) => {
+  const cleanInteraction = useEventCallback(() => {
+    store.update(prev => {
+      return _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          axis: {
+            x: null,
+            y: null
+          },
+          item: null
+        })
+      });
+    });
+  });
+  const removeItemInteraction = useEventCallback(itemToRemove => {
+    store.update(prev => {
+      const prevItem = prev.interaction.item;
+      if (prevItem === null || Object.keys(itemToRemove).some(key => itemToRemove[key] !== prevItem[key])) {
+        // The item is already something else, no need to clean it.
+        return prev;
+      }
+      return _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          item: null
+        })
+      });
+    });
+  });
+  const setItemInteraction = useEventCallback(newItem => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        item: newItem
+      })
+    }));
+  });
+  const setAxisInteraction = useEventCallback(({
+    x: newStateX,
+    y: newStateY
+  }) => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+          x: newStateX
+        } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+          y: newStateY
+        } : {})
+      })
+    }));
+  });
+  const enableVoronoid = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        isVoronoiEnabled: true
+      })
+    }));
+  });
+  const disableVoronoid = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        isVoronoiEnabled: false
+      })
+    }));
+  });
+  return {
+    params: {},
+    instance: {
+      cleanInteraction,
+      setItemInteraction,
+      removeItemInteraction,
+      setAxisInteraction,
+      enableVoronoid,
+      disableVoronoid
+    }
+  };
+};
+useChartInteraction.getInitialState = () => ({
+  interaction: {
+    item: null,
+    axis: {
+      x: null,
+      y: null
+    },
+    isVoronoiEnabled: false
+  }
+});
+useChartInteraction.params = {};

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -0,0 +1,10 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectInteraction = state => state.interaction;
+export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction.item);
+export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction.axis);
+export const selectorChartsInteractionXAxis = createSelector(selectInteraction, interaction => interaction.axis.x);
+export const selectorChartsInteractionYAxis = createSelector(selectInteraction, interaction => interaction.axis.y);
+export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
+export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
+export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);
+export const selectorChartsInteractionIsVoronoiEnabled = createSelector(selectInteraction, interaction => interaction.isVoronoiEnabled);

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/featurePlugins/useChartZAxis/index.js

@@ -0,0 +1,2 @@
+export { useChartZAxis } from "./useChartZAxis.js";
+export * from "./useChartZAxis.selectors.js";

package/modern/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.js

@@ -0,0 +1,86 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
+function addDefaultId(axisConfig, defaultId) {
+  if (axisConfig.id !== undefined) {
+    return axisConfig;
+  }
+  return _extends({
+    id: defaultId
+  }, axisConfig);
+}
+function processColorMap(axisConfig) {
+  if (!axisConfig.colorMap) {
+    return axisConfig;
+  }
+  return _extends({}, axisConfig, {
+    colorScale: axisConfig.colorMap.type === 'ordinal' && axisConfig.data ? getOrdinalColorScale(_extends({
+      values: axisConfig.data
+    }, axisConfig.colorMap)) : getColorScale(axisConfig.colorMap.type === 'continuous' ? _extends({
+      min: axisConfig.min,
+      max: axisConfig.max
+    }, axisConfig.colorMap) : axisConfig.colorMap)
+  });
+}
+function getZAxisState(zAxis, dataset) {
+  if (!zAxis || zAxis.length === 0) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const zAxisLookup = {};
+  const axisIds = [];
+  zAxis.forEach((axisConfig, index) => {
+    const dataKey = axisConfig.dataKey;
+    const defaultizedId = axisConfig.id ?? `defaultized-z-axis-${index}`;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      zAxisLookup[defaultizedId] = processColorMap(addDefaultId(axisConfig, defaultizedId));
+      axisIds.push(defaultizedId);
+      return;
+    }
+    if (dataset === undefined) {
+      throw new Error('MUI X: z-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    zAxisLookup[defaultizedId] = processColorMap(addDefaultId(_extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    }), defaultizedId));
+    axisIds.push(defaultizedId);
+  });
+  return {
+    axis: zAxisLookup,
+    axisIds
+  };
+}
+export const useChartZAxis = ({
+  params,
+  store
+}) => {
+  const {
+    zAxis,
+    dataset
+  } = params;
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartZAxis`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => _extends({}, prev, {
+      zAxis: getZAxisState(zAxis, dataset)
+    }));
+  }, [zAxis, dataset, store]);
+  return {};
+};
+useChartZAxis.params = {
+  zAxis: true,
+  dataset: true
+};
+useChartZAxis.getInitialState = params => ({
+  zAxis: getZAxisState(params.zAxis, params.dataset)
+});

package/modern/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.js

@@ -0,0 +1,3 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectRootState = state => state;
+export const selectorChartZAxis = createSelector([selectRootState], state => state.zAxis);

package/modern/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/chart.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/helpers.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/index.js

@@ -0,0 +1,4 @@
+export * from "./helpers.js";
+export * from "./plugin.js";
+export * from "./chart.js";
+export * from "./seriesConfig/index.js";

package/modern/internals/plugins/models/plugin.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/seriesConfig/colorProcessor.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/seriesConfig/extremumGetter.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/seriesConfig/index.js

@@ -0,0 +1,6 @@
+export * from "./colorProcessor.types.js";
+export * from "./extremumGetter.types.js";
+export * from "./seriesConfig.types.js";
+export * from "./seriesProcessor.types.js";
+export * from "./tooltipGetter.types.js";
+export * from "./legendGetter.types.js";

package/modern/internals/plugins/models/seriesConfig/legendGetter.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/seriesConfig/seriesConfig.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/seriesConfig/seriesProcessor.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/models/seriesConfig/tooltipGetter.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/utils/ChartStore.js

@@ -0,0 +1,24 @@
+export class ChartStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}

package/modern/internals/plugins/utils/selectors.js

@@ -0,0 +1,37 @@
+import { lruMemoize, createSelectorCreator } from 'reselect';
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for chart instances.
+ *
+ */
+export const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current chart instance, create one.
+    let cacheForCurrentChartInstance = cache.get(cacheKey);
+    if (!cacheForCurrentChartInstance) {
+      cacheForCurrentChartInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentChartInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentChartInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentChartInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};

package/modern/internals/store/extractPluginParamsFromProps.js

@@ -0,0 +1,28 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["apiRef"];
+export const extractPluginParamsFromProps = _ref => {
+  let {
+      plugins
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref.props, _excluded);
+  const paramsLookup = {};
+  plugins.forEach(plugin => {
+    Object.assign(paramsLookup, plugin.params);
+  });
+  const pluginParams = {};
+  Object.keys(props).forEach(propName => {
+    const prop = props[propName];
+    if (paramsLookup[propName]) {
+      pluginParams[propName] = prop;
+    }
+  });
+  const defaultizedPluginParams = plugins.reduce((acc, plugin) => {
+    if (plugin.getDefaultizedParams) {
+      return plugin.getDefaultizedParams({
+        params: acc
+      });
+    }
+    return acc;
+  }, pluginParams);
+  return defaultizedPluginParams;
+};

package/modern/internals/store/useChartModels.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+/**
+ * Implements the same behavior as `useControlled` but for several models.
+ * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
+ */
+export const useChartModels = (plugins, props) => {
+  const modelsRef = React.useRef({});
+  const [modelsState, setModelsState] = React.useState(() => {
+    const initialState = {};
+    plugins.forEach(plugin => {
+      if (plugin.models) {
+        Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
+          modelsRef.current[modelName] = {
+            isControlled: props[modelName] !== undefined,
+            getDefaultValue: modelInitializer.getDefaultValue
+          };
+          initialState[modelName] = modelInitializer.getDefaultValue(props);
+        });
+      }
+    });
+    return initialState;
+  });
+  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
+    const value = props[modelName] ?? modelsState[modelName];
+    return [modelName, {
+      value,
+      setControlledValue: newValue => {
+        if (!model.isControlled) {
+          setModelsState(prevState => _extends({}, prevState, {
+            [modelName]: typeof newValue === 'function' ? newValue(value) : newValue
+          }));
+        }
+      },
+      isControlled: modelsRef.current[modelName].isControlled
+    }];
+  }));
+
+  // We know that `modelsRef` do not vary across renders.
+  if (process.env.NODE_ENV !== 'production') {
+    Object.entries(modelsRef.current).forEach(([modelName, model]) => {
+      const controlled = props[modelName];
+      const newDefaultValue = model.getDefaultValue(props);
+
+      /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, react-compiler/react-compiler */
+      React.useEffect(() => {
+        if (model.isControlled !== (controlled !== undefined)) {
+          console.error([`MUI X: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of Chart to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        }
+      }, [controlled]);
+      const {
+        current: defaultValue
+      } = React.useRef(newDefaultValue);
+      React.useEffect(() => {
+        if (!model.isControlled && defaultValue !== newDefaultValue) {
+          console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled Chart after being initialized. ` + `To suppress this warning opt to use a controlled Chart.`].join('\n'));
+        }
+      }, [JSON.stringify(newDefaultValue)]);
+    });
+  }
+  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+
+  return models;
+};