@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/modern/internals/{computeAxisValue.js → plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js}

@@ -1,26 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
-import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
-import { getColorScale, getOrdinalColorScale } from "./colorScale.js";
-import { getTickNumber } from "../hooks/useTicks.js";
-import { getScale } from "./getScale.js";
-import { zoomScaleRange } from "../context/CartesianProvider/zoom.js";
-import { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
-function getRange(drawingArea, axisDirection, axis) {
-  if (axisDirection === 'rotation') {
-    const {
-      startAngle = 0,
-      endAngle = startAngle + 360
-    } = axis;
-    return axis.reverse ? [Math.PI * startAngle / 180, Math.PI * endAngle / 180] : [Math.PI * endAngle / 180, Math.PI * startAngle / 180];
-  }
-  if (axisDirection === 'radius') {
-    const {
-      minRadius = 0,
-      maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2
-    } = axis;
-    return [minRadius, maxRadius];
-  }
+import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
+import { getTickNumber } from "../../../../hooks/useTicks.js";
+import { getScale } from "../../../getScale.js";
+import { zoomScaleRange } from "./zoom.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
+function getRange(drawingArea, axisDirection,
+// | 'rotation' | 'radius',
+axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
@@ -37,22 +25,26 @@ export function computeAxisValue({
   drawingArea,
   formattedSeries,
   axis: allAxis,
-  extremumGetters,
+  seriesConfig,
   axisDirection,
-  zoomData,
+  zoomMap,
   zoomOptions,
   getFilters
 }) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
   const completeAxis = {};
   allAxis.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
     const zoomOption = zoomOptions?.[axis.id];
-    const zoom = zoomData?.find(({
-      axisId
-    }) => axisId === axis.id);
+    const zoom = zoomMap?.get(axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis);
-    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
     const data = axis.data ?? [];
     if (isBandScaleConfig(axis)) {

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

@@ -0,0 +1,61 @@
+import { isDefined } from "../../../isDefined.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
+import { getScale } from "../../../getScale.js";
+export const createAxisFilterMapper = ({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction
+}) => (axis, axisIndex) => {
+  const zoomOption = zoomOptions[axis.id];
+  if (!zoomOption || zoomOption.filterMode !== 'discard') {
+    return null;
+  }
+  const zoom = zoomMap?.get(axis.id);
+  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+    // No zoom, or zoom with all data visible
+    return null;
+  }
+  let extremums = [];
+  const scaleType = axis.scaleType;
+  if (scaleType === 'point' || scaleType === 'band') {
+    extremums = [0, (axis.data?.length ?? 1) - 1];
+  } else {
+    extremums = getAxisExtremum(axis, direction, seriesConfig, axisIndex, formattedSeries);
+  }
+  let min;
+  let max;
+  const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
+  [min, max] = getScale(continuousScaleType, extremums, [0, 100]).nice().domain();
+  min = min instanceof Date ? min.getTime() : min;
+  max = max instanceof Date ? max.getTime() : max;
+  const minVal = min + zoom.start * (max - min) / 100;
+  const maxVal = min + zoom.end * (max - min) / 100;
+  return (value, dataIndex) => {
+    const val = value[direction] ?? axis.data?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+      return dataIndex >= minVal && dataIndex <= maxVal;
+    }
+    return val >= minVal && val <= maxVal;
+  };
+};
+export const createGetAxisFilters = filters => ({
+  currentAxisId,
+  seriesXAxisId,
+  seriesYAxisId,
+  isDefaultAxis
+}) => {
+  return (value, dataIndex) => {
+    const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
+    if (!axisId || isDefaultAxis) {
+      return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
+    }
+    const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(isDefined);
+    return data.every(f => f(value, dataIndex));
+  };
+};

package/modern/{context/ChartDataProvider/useDefaultizeAxis.js → internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js}

@@ -1,9 +1,6 @@
-'use client';
-
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../constants/index.js";
-const defaultizeAxis = (inAxis, dataset, axisName) => {
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../../../constants/index.js";
+export function defaultizeAxis(inAxis, dataset, axisName) {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({
     id: `defaultized-${axisName}-axis-${index}`
@@ -24,9 +21,4 @@ const defaultizeAxis = (inAxis, dataset, axisName) => {
       data: dataset.map(d => d[dataKey])
     });
   });
-};
-export const useDefaultizeAxis = (inXAxis, inYAxis, dataset) => {
-  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
-  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
-  return [xAxis, yAxis];
-};
+}

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

@@ -0,0 +1,22 @@
+import { isCartesianSeriesType } from "../../../isCartesian.js";
+const axisExtremumCallback = (acc, chartType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const getter = axisDirection === 'x' ? seriesConfig[chartType].xExtremumGetter : seriesConfig[chartType].yExtremumGetter;
+  const series = formattedSeries[chartType]?.series ?? {};
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0,
+    getFilters
+  }) ?? [Infinity, -Infinity];
+  const [minData, maxData] = acc;
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+export const getAxisExtremum = (axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const charTypes = Object.keys(seriesConfig).filter(isCartesianSeriesType);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
+};

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

@@ -0,0 +1,4 @@
+export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
+export { defaultizeAxis } from "./defaultizeAxis.js";
+export * from "./computeAxisValue.js";
+export * from "./zoom.types.js";

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

@@ -0,0 +1,68 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { blueberryTwilightPalette } from "../../../../colorPalettes/index.js";
+import { useSelector } from "../../../store/useSelector.js";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
+import { selectorChartSeriesState } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
+import { defaultizeAxis } from "./defaultizeAxis.js";
+export const useChartCartesianAxis = ({
+  params,
+  store,
+  seriesConfig
+}) => {
+  const {
+    xAxis,
+    yAxis,
+    dataset
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      warnOnce([`MUI X: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const formattedSeries = useSelector(store, selectorChartSeriesState);
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
+  // 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, {
+      cartesianAxis: _extends({}, prev.cartesianAxis, {
+        x: defaultizeAxis(xAxis, dataset, 'x'),
+        y: defaultizeAxis(yAxis, dataset, 'y')
+      })
+    }));
+  }, [seriesConfig, drawingArea, formattedSeries, xAxis, yAxis, dataset, store]);
+  return {};
+};
+useChartCartesianAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  dataset: true
+};
+useChartCartesianAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return _extends({}, params, {
+    colors: params.colors ?? blueberryTwilightPalette,
+    theme: params.theme ?? 'light',
+    defaultizedXAxis: defaultizeAxis(params.xAxis, params.dataset, 'x'),
+    defaultizedYAxis: defaultizeAxis(params.yAxis, params.dataset, 'y')
+  });
+};
+useChartCartesianAxis.getInitialState = params => ({
+  cartesianAxis: {
+    x: params.defaultizedXAxis,
+    y: params.defaultizedYAxis
+  }
+});

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

@@ -0,0 +1,87 @@
+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, zoom => zoom?.optionsLookup);
+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) => {
+    const filter = xMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  const yFilters = yAxis.reduce((acc, axis, index) => {
+    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/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/index.js

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

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,4 @@
+export * from "./colorProcessor.types.js";
+export * from "./extremumGetter.types.js";
+export * from "./seriesConfig.types.js";
+export * from "./seriesProcessor.types.js";

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/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;
+};

package/modern/internals/store/useCharts.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { ChartStore } from "../plugins/utils/ChartStore.js";
 import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
+import { extractPluginParamsFromProps } from "./extractPluginParamsFromProps.js";
+import { useChartModels } from "./useChartModels.js";
 export function useChartApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {
@@ -14,12 +16,15 @@ export function useChartApiInitialization(inputApiRef) {
   return fallbackPublicApiRef.current;
 }
 let globalId = 0;
-export function useCharts(inPlugins, props) {
+export function useCharts(inPlugins, props, seriesConfig) {
+  const chartId = useId();
   const plugins = React.useMemo(() => [...CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
-  const defaultChartId = useId();
-  const pluginParams = {
-    id: defaultChartId
-  }; // To generate when plugins use params.
+  const pluginParams = extractPluginParamsFromProps({
+    plugins,
+    props
+  });
+  pluginParams.id = pluginParams.id ?? chartId;
+  const models = useChartModels(plugins, pluginParams);
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
   const publicAPI = useChartApiInitialization(props.apiRef);
@@ -43,9 +48,7 @@ export function useCharts(inPlugins, props) {
     };
     plugins.forEach(plugin => {
       if (plugin.getInitialState) {
-        Object.assign(initialState, plugin.getInitialState({
-          id: defaultChartId
-        }));
+        Object.assign(initialState, plugin.getInitialState(pluginParams, initialState, seriesConfig));
       }
     });
     storeRef.current = new ChartStore(initialState);
@@ -56,7 +59,9 @@ export function useCharts(inPlugins, props) {
       params: pluginParams,
       plugins: plugins,
       store: storeRef.current,
-      svgRef: innerSvgRef
+      svgRef: innerSvgRef,
+      seriesConfig,
+      models
     });
     if (pluginResponse.publicAPI) {
       Object.assign(publicAPI, pluginResponse.publicAPI);

package/modern/internals/store/useStore.js

@@ -1,15 +1,7 @@
 import { useChartContext } from "../../context/ChartProvider/index.js";
 // This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
-export function useStore(skipError) {
+export function useStore() {
   const context = useChartContext();
-  if (skipError) {
-    // TODO: Remove once store is used by all charts.
-    // This line is only for `useAxisEvents` which is in the surface of the Gauge.
-    // But the Gauge don't have store yet because it does not need the interaction provider.
-    // Will be fixed when every thing move to the store since every component will have access to it.
-    // @ts-ignore
-    return context?.store;
-  }
   if (!context) {
     throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }

package/node/BarChart/AnimatedBarElement.js

@@ -22,6 +22,7 @@ function AnimatedBarElement(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, (0, _extends2.default)({}, other, {
+    // @ts-expect-error
     filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
     opacity: ownerState.isFaded ? 0.3 : 1
   }));