@mui/x-charts 8.16.0 → 8.18.0

package/hooks/useScale.js

@@ -33,8 +33,10 @@ function getValueToPositionMapper(scale) {
 /**
  * Get the X scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the x axis with axisId, else returns the values for the default x axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified X axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The X axis scale
  */
 function useXScale(axisId) {
   const axis = (0, _useAxis.useXAxis)(axisId);
@@ -44,18 +46,37 @@ function useXScale(axisId) {
 /**
  * Get the Y scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the y axis with axisId, else returns the values for the default y axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The Y axis scale
  */
 function useYScale(axisId) {
   const axis = (0, _useAxis.useYAxis)(axisId);
   return axis.scale;
 }
-function useRotationScale(identifier) {
-  const axis = (0, _useAxis.useRotationAxis)(identifier);
+
+/**
+ * Get the rotation scale.
+ *
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `rotationAxis` prop
+ *   - Undefined to get the default rotation axis
+ * @returns The rotation axis scale, or undefined if not found
+ */
+function useRotationScale(axisId) {
+  const axis = (0, _useAxis.useRotationAxis)(axisId);
   return axis?.scale;
 }
-function useRadiusScale(identifier) {
-  const axis = (0, _useAxis.useRadiusAxis)(identifier);
+
+/**
+ * Get the radius scale.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `radiusAxis` prop
+ *   - Undefined to get the default radius axis
+ * @returns The radius axis scale, or undefined if not found
+ */
+function useRadiusScale(axisId) {
+  const axis = (0, _useAxis.useRadiusAxis)(axisId);
   return axis?.scale;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.16.0
+ * @mui/x-charts v8.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/colorScale.d.ts

@@ -2,4 +2,4 @@ import { ScaleOrdinal } from '@mui/x-charts-vendor/d3-scale';
 import { ContinuousColorConfig, PiecewiseColorConfig, OrdinalColorConfig } from "../models/colorMapping.js";
 export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<Value, string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never>;
 export declare function getOrdinalColorScale<Value extends number | Date | string>(config: OrdinalColorConfig<Value>): ScaleOrdinal<Value, string, null | string> | ScaleOrdinal<number, string, null | string>;
-export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;
+export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, never> | ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, never>;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1,2 +1 @@
-import * as React from 'react';
-export declare function ChartsAxesGradients(): React.JSX.Element | null;
+export declare function ChartsAxesGradients(): import("react/jsx-runtime").JSX.Element | null;

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ContinuousColorConfig } from "../../../models/colorMapping.js";
 type ChartsContinuousGradientProps = {
   isReversed?: boolean;
@@ -15,5 +14,5 @@ type ChartsContinuousGradientProps = {
    */
   gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
 };
-export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): React.JSX.Element | null;
+export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ChartsContinuousGradient;
-var React = _interopRequireWildcard(require("react"));
 var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 var _jsxRuntime = require("react/jsx-runtime");
 const PX_PRECISION = 10;

package/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ContinuousColorConfig } from "../../../models/colorMapping.js";
 type ChartsContinuousGradientObjectBoundProps = {
   isReversed?: boolean;
@@ -9,5 +8,5 @@ type ChartsContinuousGradientObjectBoundProps = {
 /**
  * Generates gradients to be used in tooltips and legends.
  */
-export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): React.JSX.Element;
+export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ChartsContinuousGradientObjectBound;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 var _jsxRuntime = require("react/jsx-runtime");
 const PX_PRECISION = 10;

package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { PiecewiseColorConfig } from "../../../models/colorMapping.js";
 type ChartsPiecewiseGradientProps = {
   isReversed?: boolean;
@@ -8,5 +7,5 @@ type ChartsPiecewiseGradientProps = {
   scale: (value: any) => number | undefined;
   colorMap: PiecewiseColorConfig;
 };
-export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): React.JSX.Element | null;
+export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/internals/createSeriesSelectorOfType.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createAllSeriesSelectorOfType = createAllSeriesSelectorOfType;
 exports.createSeriesSelectorsOfType = createSeriesSelectorsOfType;
-var _fastArrayCompare = require("@mui/x-internals/fastArrayCompare");
 var _warning = require("@mui/x-internals/warning");
 var _selectors = require("./plugins/utils/selectors");
 var _useChartSeries = require("./plugins/corePlugins/useChartSeries/useChartSeries.selectors");
 var _useStore = require("./store/useStore");
 var _useSelector = require("./store/useSelector");
+// import { fastArrayCompare } from '@mui/x-internals/fastArrayCompare';
+
 function createSeriesSelectorsOfType(seriesType) {
-  const selectorSeriesWithIds = (0, _selectors.createSelector)([_useChartSeries.selectorChartSeriesProcessed, (_, ids) => ids], (processedSeries, ids) => {
+  const selectorSeriesWithIds = (0, _selectors.createSelector)([_useChartSeries.selectorChartSeriesProcessed], (processedSeries, ids) => {
     if (!ids || Array.isArray(ids) && ids.length === 0) {
       return processedSeries[seriesType]?.seriesOrder?.map(seriesId => processedSeries[seriesType]?.series[seriesId]) ?? [];
     }
@@ -38,7 +39,9 @@ function createSeriesSelectorsOfType(seriesType) {
   });
   return ids => {
     const store = (0, _useStore.useStore)();
-    return (0, _useSelector.useSelector)(store, selectorSeriesWithIds, [ids], _fastArrayCompare.fastArrayCompare);
+    return (0, _useSelector.useSelector)(store, selectorSeriesWithIds, ids
+    // fastArrayCompare
+    );
   };
 }
 function createAllSeriesSelectorOfType(seriesType) {

package/internals/getSeriesColorFn.d.ts

@@ -0,0 +1,5 @@
+import { CommonSeriesType, ColorCallbackValue } from "../models/seriesType/common.js";
+export declare function getSeriesColorFn<TValue>(series: {
+  color: NonNullable<CommonSeriesType<TValue>['color']>;
+  colorGetter?: CommonSeriesType<TValue>['colorGetter'];
+}): (data: ColorCallbackValue<TValue>) => string;

package/internals/getSeriesColorFn.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSeriesColorFn = getSeriesColorFn;
+function getSeriesColorFn(series) {
+  return series.colorGetter ? series.colorGetter : () => series.color;
+}

package/internals/index.d.ts

@@ -6,7 +6,7 @@ export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useScatterPlotData } from "../ScatterChart/useScatterPlotData.js";
-export { seriesConfig as scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.js";
+export { scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
 export { useLinePlotData } from "../LineChart/useLinePlotData.js";

package/internals/index.js

@@ -41,7 +41,7 @@ Object.defineProperty(exports, "getCartesianAxisTriggerTooltip", {
 Object.defineProperty(exports, "scatterSeriesConfig", {
   enumerable: true,
   get: function () {
-    return _seriesConfig.seriesConfig;
+    return _seriesConfig.scatterSeriesConfig;
   }
 });
 Object.defineProperty(exports, "useAreaPlotData", {

package/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.js

@@ -15,30 +15,22 @@ const useChartAnimation = ({
   store
 }) => {
   React.useEffect(() => {
-    store.update(prevState => {
-      return (0, _extends2.default)({}, prevState, {
-        animation: (0, _extends2.default)({}, prevState.animation, {
-          skip: params.skipAnimation
-        })
-      });
-    });
+    store.set('animation', (0, _extends2.default)({}, store.state.animation, {
+      skip: params.skipAnimation
+    }));
   }, [store, params.skipAnimation]);
   const disableAnimation = React.useCallback(() => {
     let disableCalled = false;
-    store.update(prevState => (0, _extends2.default)({}, prevState, {
-      animation: (0, _extends2.default)({}, prevState.animation, {
-        skipAnimationRequests: prevState.animation.skipAnimationRequests + 1
-      })
+    store.set('animation', (0, _extends2.default)({}, store.state.animation, {
+      skipAnimationRequests: store.state.animation.skipAnimationRequests + 1
     }));
     return () => {
       if (disableCalled) {
         return;
       }
       disableCalled = true;
-      store.update(prevState => (0, _extends2.default)({}, prevState, {
-        animation: (0, _extends2.default)({}, prevState.animation, {
-          skipAnimationRequests: prevState.animation.skipAnimationRequests - 1
-        })
+      store.set('animation', (0, _extends2.default)({}, store.state.animation, {
+        skipAnimationRequests: store.state.animation.skipAnimationRequests - 1
       }));
     };
   }, [store]);

package/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.d.ts

@@ -1,5 +1,3 @@
-export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSkipAnimation: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, boolean, any[]>;
+}) => boolean;

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartDimensions = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 var _useSelector = require("../../../store/useSelector");
@@ -39,25 +40,20 @@ const useChartDimensions = ({
     const computedStyle = win.getComputedStyle(mainEl);
     const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
     const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
-    store.update(prev => {
-      if (prev.dimensions.width === newWidth && prev.dimensions.height === newHeight) {
-        return prev;
-      }
-      return (0, _extends2.default)({}, prev, {
-        dimensions: {
-          margin: {
-            top: params.margin.top,
-            right: params.margin.right,
-            bottom: params.margin.bottom,
-            left: params.margin.left
-          },
-          width: params.width ?? newWidth,
-          height: params.height ?? newHeight,
-          propsWidth: params.width,
-          propsHeight: params.height
-        }
+    if (store.state.dimensions.width !== newWidth || store.state.dimensions.height !== newHeight) {
+      store.set('dimensions', {
+        margin: {
+          top: params.margin.top,
+          right: params.margin.right,
+          bottom: params.margin.bottom,
+          left: params.margin.left
+        },
+        width: params.width ?? newWidth,
+        height: params.height ?? newHeight,
+        propsWidth: params.width,
+        propsHeight: params.height
       });
-    });
+    }
     return {
       height: newHeight,
       width: newWidth
@@ -65,24 +61,20 @@ const useChartDimensions = ({
   }, [store, svgRef, params.height, params.width,
   // Margin is an object, so we need to include all the properties to prevent infinite loops.
   params.margin.left, params.margin.right, params.margin.top, params.margin.bottom]);
-  React.useEffect(() => {
-    store.update(prev => {
-      const width = params.width ?? prev.dimensions.width;
-      const height = params.height ?? prev.dimensions.height;
-      return (0, _extends2.default)({}, prev, {
-        dimensions: {
-          margin: {
-            top: params.margin.top,
-            right: params.margin.right,
-            bottom: params.margin.bottom,
-            left: params.margin.left
-          },
-          width,
-          height,
-          propsHeight: params.height,
-          propsWidth: params.width
-        }
-      });
+  (0, _useEffectAfterFirstRender.useEffectAfterFirstRender)(() => {
+    const width = params.width ?? store.state.dimensions.width;
+    const height = params.height ?? store.state.dimensions.height;
+    store.set('dimensions', {
+      margin: {
+        top: params.margin.top,
+        right: params.margin.right,
+        bottom: params.margin.bottom,
+        left: params.margin.left
+      },
+      width,
+      height,
+      propsHeight: params.height,
+      propsWidth: params.width
     });
   }, [store, params.height, params.width,
   // Margin is an object, so we need to include all the properties to prevent infinite loops.

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -3,31 +3,25 @@ import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js"
 import { ChartState } from "../../models/chart.js";
 export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
 export declare const selectorChartMargin: (state: ChartState<[UseChartDimensionsSignature]>) => import("./useChartDimensions.types.js").ChartMargin;
-export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartDrawingArea: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("../../../index.js").UseChartCartesianAxisState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, {
+}) => {
   width: number;
   left: number;
   right: number;
   height: number;
   top: number;
   bottom: number;
-}, []>;
-export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+};
+export declare const selectorChartSvgWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+}) => number;
+export declare const selectorChartSvgHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, {
-  width: number | undefined;
-  height: number | undefined;
-}, any[]>;
-export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+}) => number;
+export declare const selectorChartPropsWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+}) => number | undefined;
+export declare const selectorChartPropsHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, {
-  width: number;
-  height: number;
-}, []>;
+}) => number | undefined;

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -3,32 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartPropsSize = exports.selectorChartMargin = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = exports.selectorChartContainerSize = void 0;
+exports.selectorChartSvgWidth = exports.selectorChartSvgHeight = exports.selectorChartPropsWidth = exports.selectorChartPropsHeight = exports.selectorChartMargin = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = void 0;
+var _store = require("@mui/x-internals/store");
 var _selectors = require("../../utils/selectors");
 var _useChartAxisSize = require("../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors");
 const selectorChartDimensionsState = state => state.dimensions;
 exports.selectorChartDimensionsState = selectorChartDimensionsState;
 const selectorChartMargin = state => state.dimensions.margin;
 exports.selectorChartMargin = selectorChartMargin;
-const selectorChartWidth = state => state.dimensions.width;
-const selectorChartHeight = state => state.dimensions.height;
-const selectorChartTopMargin = state => state.dimensions.margin.top;
-const selectorChartRightMargin = state => state.dimensions.margin.right;
-const selectorChartBottomMargin = state => state.dimensions.margin.bottom;
-const selectorChartLeftMargin = state => state.dimensions.margin.left;
-const selectorChartDrawingArea = exports.selectorChartDrawingArea = (0, _selectors.createSelector)([selectorChartWidth, selectorChartHeight, selectorChartTopMargin, selectorChartRightMargin, selectorChartBottomMargin, selectorChartLeftMargin, _useChartAxisSize.selectorChartTopAxisSize, _useChartAxisSize.selectorChartRightAxisSize, _useChartAxisSize.selectorChartBottomAxisSize, _useChartAxisSize.selectorChartLeftAxisSize], (width, height, marginTop, marginRight, marginBottom, marginLeft, axisSizeTop, axisSizeRight, axisSizeBottom, axisSizeLeft) => ({
-  width: width - marginLeft - marginRight - axisSizeLeft - axisSizeRight,
-  left: marginLeft + axisSizeLeft,
-  right: marginRight + axisSizeRight,
-  height: height - marginTop - marginBottom - axisSizeTop - axisSizeBottom,
-  top: marginTop + axisSizeTop,
-  bottom: marginBottom + axisSizeBottom
-}));
-const selectorChartPropsSize = exports.selectorChartPropsSize = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => ({
-  width: dimensionsState.propsWidth,
-  height: dimensionsState.propsHeight
-}));
-const selectorChartContainerSize = exports.selectorChartContainerSize = (0, _selectors.createSelector)([selectorChartWidth, selectorChartHeight], (width, height) => ({
+const selectorChartDrawingArea = exports.selectorChartDrawingArea = (0, _store.createSelectorMemoized)(selectorChartDimensionsState, selectorChartMargin, _useChartAxisSize.selectorChartAxisSizes, function selectorChartDrawingArea({
   width,
   height
-}));
+}, {
+  top: marginTop,
+  right: marginRight,
+  bottom: marginBottom,
+  left: marginLeft
+}, {
+  left: axisSizeLeft,
+  right: axisSizeRight,
+  top: axisSizeTop,
+  bottom: axisSizeBottom
+}) {
+  return {
+    width: width - marginLeft - marginRight - axisSizeLeft - axisSizeRight,
+    left: marginLeft + axisSizeLeft,
+    right: marginRight + axisSizeRight,
+    height: height - marginTop - marginBottom - axisSizeTop - axisSizeBottom,
+    top: marginTop + axisSizeTop,
+    bottom: marginBottom + axisSizeBottom
+  };
+});
+const selectorChartSvgWidth = exports.selectorChartSvgWidth = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.width);
+const selectorChartSvgHeight = exports.selectorChartSvgHeight = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.height);
+const selectorChartPropsWidth = exports.selectorChartPropsWidth = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.propsWidth);
+const selectorChartPropsHeight = exports.selectorChartPropsHeight = (0, _selectors.createSelector)([selectorChartDimensionsState], dimensionsState => dimensionsState.propsHeight);

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.js

@@ -6,18 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartExperimentalFeatures = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 const useChartExperimentalFeatures = ({
   params,
   store
 }) => {
   (0, _useEnhancedEffect.default)(() => {
-    store.update(prevState => {
-      return (0, _extends2.default)({}, prevState, {
-        experimentalFeatures: params.experimentalFeatures
-      });
-    });
+    store.set('experimentalFeatures', params.experimentalFeatures);
   }, [store, params.experimentalFeatures]);
   return {};
 };

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.d.ts

@@ -1,8 +1,6 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
 export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
-export declare const selectorPreferStrictDomainInLineCharts: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorPreferStrictDomainInLineCharts: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, boolean, any[]>;
+}) => boolean;

package/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -15,16 +15,12 @@ const useChartId = ({
   store
 }) => {
   React.useEffect(() => {
-    store.update(prevState => {
-      if (params.id === undefined || params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
-        return prevState;
-      }
-      return (0, _extends2.default)({}, prevState, {
-        id: (0, _extends2.default)({}, prevState.id, {
-          chartId: params.id ?? (0, _useChartId.createChartDefaultId)()
-        })
-      });
-    });
+    if (params.id === undefined || params.id === store.state.id.providedChartId && store.state.id.chartId !== undefined) {
+      return;
+    }
+    store.set('id', (0, _extends2.default)({}, store.state.id, {
+      chartId: params.id ?? (0, _useChartId.createChartDefaultId)()
+    }));
   }, [store, params.id]);
   return {};
 };

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -3,8 +3,6 @@
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartId: (args_0: import("./useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, string | undefined, any[]>;
+}) => string | undefined;

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -42,12 +42,10 @@ const useChartInteractionListener = ({
         new _core.PanGesture({
           name: 'zoomPan',
           threshold: 0,
-          maxPointers: 1,
           preventIf: ['zoomTapAndDrag', 'zoomPressAndDrag']
         }), new _core.PinchGesture({
           name: 'zoomPinch',
-          threshold: 5,
-          preventIf: ['pan', 'zoomPan']
+          threshold: 5
         }), new _core.TurnWheelGesture({
           name: 'zoomTurnWheel',
           sensitivity: 0.01,

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -31,15 +31,14 @@ const useChartSeries = ({
       isFirstRender.current = false;
       return;
     }
-    store.update(prev => (0, _extends2.default)({}, prev, {
-      series: (0, _extends2.default)({}, prev.series, {
-        processedSeries: (0, _processSeries.preprocessSeries)({
-          series,
-          colors: typeof colors === 'function' ? colors(theme) : colors,
-          seriesConfig,
-          dataset
-        })
-      })
+    store.set('series', (0, _extends2.default)({}, store.state.series, {
+      processedSeries: (0, _processSeries.preprocessSeries)({
+        series,
+        colors: typeof colors === 'function' ? colors(theme) : colors,
+        seriesConfig,
+        dataset
+      }),
+      dataset
     }));
   }, [colors, dataset, series, theme, seriesConfig, store]);
   return {};
@@ -73,7 +72,8 @@ useChartSeries.getInitialState = ({
         colors: typeof colors === 'function' ? colors(theme) : colors,
         seriesConfig,
         dataset
-      })
+      }),
+      dataset
     }
   };
 };

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,13 +1,17 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
-export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartSeriesProcessed: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+}) => import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>;
+export declare const selectorChartSeriesConfig: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>, any[]>;
-export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
+}) => import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>;
+/**
+ * Get the dataset from the series state.
+ * @param {ChartState<[UseChartSeriesSignature]>} state The state of the chart.
+ * @returns {DatasetType | undefined} The dataset.
+ */
+export declare const selectorChartDataset: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, import("../../models/index.js").ChartSeriesConfig<keyof import("../../../index.js").ChartsSeriesConfig>, any[]>;
+}) => readonly import("../../../index.js").DatasetElementType<string | number | Date | null | undefined>[] | undefined;