@mui/x-charts-pro 8.11.3 → 8.13.0

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.js

@@ -0,0 +1,80 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useZoomOnTapAndDrag = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _useZoom = require("./useZoom.utils");
+var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
+const useZoomOnTapAndDrag = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
+  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorZoomInteractionConfig, ['tapAndDrag']);
+  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isZoomOnTapAndDragEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomTapAndDrag', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [config, isZoomOnTapAndDragEnabled, instance]);
+
+  // Zoom on tap and drag
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomOnTapAndDragEnabled) {
+      return () => {};
+    }
+    const rafThrottledCallback = (0, _rafThrottle.rafThrottle)(event => {
+      // If the delta is 0, we didn't move
+      if (event.detail.deltaY === 0) {
+        return;
+      }
+      setZoomDataCallback(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const isZoomIn = event.detail.deltaY > 0;
+          const scaleRatio = 1 + event.detail.deltaY / 100;
+          const point = (0, _internals.getSVGPoint)(element, {
+            clientX: event.detail.initialCentroid.x,
+            clientY: event.detail.initialCentroid.y
+          });
+          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea);
+          const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
+          if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    const zoomHandler = instance.addInteractionListener('zoomTapAndDrag', rafThrottledCallback);
+    return () => {
+      zoomHandler.cleanup();
+      rafThrottledCallback.clear();
+    };
+  }, [svgRef, drawingArea, isZoomOnTapAndDragEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+};
+exports.useZoomOnTapAndDrag = useZoomOnTapAndDrag;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _useZoom = require("./useZoom.utils");
+var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const useZoomOnWheel = ({
   store,
   instance,
@@ -17,18 +18,27 @@ const useZoomOnWheel = ({
 }, setZoomDataCallback) => {
   const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
-  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
   const startedOutsideRef = React.useRef(false);
   const startedOutsideTimeoutRef = React.useRef(null);
+  const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorZoomInteractionConfig, ['wheel']);
+  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isZoomOnWheelEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomTurnWheel', {
+      requiredKeys: config.requiredKeys
+    });
+  }, [config, isZoomOnWheelEnabled, instance]);
 
   // Add event for chart zoom in/out
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || !isZoomEnabled) {
+    if (element === null || !isZoomOnWheelEnabled) {
       return () => {};
     }
     const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
-    const zoomOnWheelHandler = instance.addInteractionListener('turnWheel', event => {
+    const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
       const point = (0, _internals.getSVGPoint)(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
@@ -81,6 +91,6 @@ const useZoomOnWheel = ({
       startedOutsideRef.current = false;
       rafThrottledSetZoomData.clear();
     };
-  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+  }, [svgRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
 };
 exports.useZoomOnWheel = useZoomOnWheel;

package/internals/plugins/useChartProZoom/initializeZoomData.d.ts

@@ -0,0 +1,2 @@
+import type { AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+export declare function initializeZoomData(options: Record<AxisId, Pick<DefaultizedZoomOptions, 'axisId' | 'minStart' | 'maxEnd'>>, zoomData?: readonly ZoomData[]): ZoomData[];

package/internals/plugins/useChartProZoom/initializeZoomData.js

@@ -0,0 +1,31 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initializeZoomData = initializeZoomData;
+// This is helpful to avoid the need to provide the possibly auto-generated id for each axis.
+function initializeZoomData(options, zoomData) {
+  const zoomDataMap = new Map();
+  zoomData?.forEach(zoom => {
+    const option = options[zoom.axisId];
+    if (option) {
+      zoomDataMap.set(zoom.axisId, zoom);
+    }
+  });
+  return Object.values(options).map(({
+    axisId,
+    minStart: start,
+    maxEnd: end
+  }) => {
+    if (zoomDataMap.has(axisId)) {
+      return zoomDataMap.get(axisId);
+    }
+    return {
+      axisId,
+      start,
+      end
+    };
+  });
+}

package/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.d.ts

@@ -0,0 +1,2 @@
+import type { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
+export declare const initializeZoomInteractionConfig: (zoomInteractionConfig?: ZoomInteractionConfig) => DefaultizedZoomInteractionConfig;

package/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.js

@@ -0,0 +1,92 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initializeZoomInteractionConfig = void 0;
+const initializeZoomInteractionConfig = zoomInteractionConfig => {
+  const defaultizedConfig = {
+    zoom: {},
+    pan: {}
+  };
+  if (!zoomInteractionConfig?.zoom) {
+    defaultizedConfig.zoom = {
+      wheel: {
+        type: 'wheel',
+        requiredKeys: [],
+        mouse: {},
+        touch: {}
+      },
+      pinch: {
+        type: 'pinch',
+        requiredKeys: [],
+        mouse: {},
+        touch: {}
+      }
+    };
+  } else {
+    defaultizedConfig.zoom = initializeFor(zoomInteractionConfig.zoom);
+  }
+  if (!zoomInteractionConfig?.pan) {
+    defaultizedConfig.pan = {
+      drag: {
+        type: 'drag',
+        requiredKeys: [],
+        mouse: {},
+        touch: {}
+      }
+    };
+  } else {
+    defaultizedConfig.pan = initializeFor(zoomInteractionConfig.pan);
+  }
+  return defaultizedConfig;
+};
+exports.initializeZoomInteractionConfig = initializeZoomInteractionConfig;
+function initializeFor(zoomInteractionConfig) {
+  // We aggregate interactions by type
+  const aggregation = zoomInteractionConfig.reduce((acc, interaction) => {
+    if (typeof interaction === 'string') {
+      if (!acc[interaction]) {
+        acc[interaction] = [];
+      }
+      acc[interaction].push({
+        type: interaction,
+        requiredKeys: []
+      });
+      return acc;
+    }
+    const type = interaction.type;
+    if (!acc[type]) {
+      acc[type] = [];
+    }
+    acc[type].push({
+      type,
+      pointerMode: interaction.pointerMode,
+      requiredKeys: interaction.requiredKeys
+    });
+    return acc;
+  }, {});
+
+  // We then need to generate a usable config by type
+  // When a gesture type is provided without options, it means we enable it for all pointer modes
+  // Any interaction with a specific pointer mode should be restricted to that mode
+  const acc = {};
+  for (const [type, config] of Object.entries(aggregation)) {
+    const lastEmpty = config.findLast(item => !item.pointerMode);
+    const lastMouse = config.findLast(item => item.pointerMode === 'mouse');
+    const lastTouch = config.findLast(item => item.pointerMode === 'touch');
+    acc[type] = {
+      type,
+      pointerMode: lastEmpty ? [] : Array.from(new Set(config.filter(c => c.pointerMode).map(c => c.pointerMode))),
+      requiredKeys: lastEmpty?.requiredKeys ?? [],
+      mouse: lastMouse ? {
+        requiredKeys: lastMouse?.requiredKeys ?? []
+      } : {},
+      touch: lastTouch ? {
+        requiredKeys: lastTouch?.requiredKeys ?? []
+      } : {}
+    };
+  }
+  return acc;
+}

package/internals/plugins/useChartProZoom/useChartProZoom.d.ts

@@ -1,4 +1,3 @@
-import { ChartPlugin, AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { ChartPlugin } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
-export declare function initializeZoomData(options: Record<AxisId, Pick<DefaultizedZoomOptions, 'axisId' | 'minStart' | 'maxEnd'>>, zoomData?: readonly ZoomData[]): ZoomData[];
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -6,53 +6,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initializeZoomData = initializeZoomData;
 exports.useChartProZoom = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
+var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
 var _utils = require("@mui/material/utils");
 var _calculateZoom = require("./calculateZoom");
 var _useZoomOnWheel = require("./gestureHooks/useZoomOnWheel");
 var _useZoomOnPinch = require("./gestureHooks/useZoomOnPinch");
 var _usePanOnDrag = require("./gestureHooks/usePanOnDrag");
-// It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-function initializeZoomData(options, zoomData) {
-  const zoomDataMap = new Map();
-  zoomData?.forEach(zoom => {
-    const option = options[zoom.axisId];
-    if (option) {
-      zoomDataMap.set(zoom.axisId, zoom);
-    }
-  });
-  return Object.values(options).map(({
-    axisId,
-    minStart: start,
-    maxEnd: end
-  }) => {
-    if (zoomDataMap.has(axisId)) {
-      return zoomDataMap.get(axisId);
-    }
-    return {
-      axisId,
-      start,
-      end
-    };
-  });
-}
-const useChartProZoom = ({
-  store,
-  instance,
-  svgRef,
-  params
-}) => {
+var _useZoomOnTapAndDrag = require("./gestureHooks/useZoomOnTapAndDrag");
+var _initializeZoomInteractionConfig = require("./initializeZoomInteractionConfig");
+var _initializeZoomData = require("./initializeZoomData");
+const useChartProZoom = pluginData => {
+  const {
+    store,
+    params
+  } = pluginData;
   const {
     zoomData: paramsZoomData,
-    onZoomChange: onZoomChangeProp
+    onZoomChange: onZoomChangeProp,
+    zoomInteractionConfig
   } = params;
   const onZoomChange = (0, _utils.useEventCallback)(onZoomChangeProp ?? (() => {}));
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  (0, _useEffectAfterFirstRender.useEffectAfterFirstRender)(() => {
+    store.update(prevState => {
+      return (0, _extends2.default)({}, prevState, {
+        zoom: (0, _extends2.default)({}, prevState.zoom, {
+          zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(zoomInteractionConfig)
+        })
+      });
+    });
+  }, [store, zoomInteractionConfig]);
 
   // Manage controlled state
   React.useEffect(() => {
@@ -151,14 +139,10 @@ const useChartProZoom = ({
   }, [removeIsInteracting]);
 
   // Add events
-  const pluginData = {
-    store,
-    instance,
-    svgRef
-  };
   (0, _usePanOnDrag.usePanOnDrag)(pluginData, setZoomDataCallback);
   (0, _useZoomOnWheel.useZoomOnWheel)(pluginData, setZoomDataCallback);
   (0, _useZoomOnPinch.useZoomOnPinch)(pluginData, setZoomDataCallback);
+  (0, _useZoomOnTapAndDrag.useZoomOnTapAndDrag)(pluginData, setZoomDataCallback);
   const zoom = React.useCallback(step => {
     setZoomDataCallback(prev => prev.map(zoomData => {
       const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), zoomData.axisId);
@@ -187,12 +171,8 @@ exports.useChartProZoom = useChartProZoom;
 useChartProZoom.params = {
   initialZoom: true,
   onZoomChange: true,
-  zoomData: true
-};
-useChartProZoom.getDefaultizedParams = ({
-  params
-}) => {
-  return (0, _extends2.default)({}, params);
+  zoomData: true,
+  zoomInteractionConfig: true
 };
 useChartProZoom.getInitialState = params => {
   const {
@@ -207,9 +187,10 @@ useChartProZoom.getInitialState = params => {
   zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
   return {
     zoom: {
-      zoomData: initializeZoomData(optionsLookup, userZoomData),
+      zoomData: (0, _initializeZoomData.initializeZoomData)(optionsLookup, userZoomData),
       isInteracting: false,
-      isControlled: zoomData !== undefined
+      isControlled: zoomData !== undefined,
+      zoomInteractionConfig: (0, _initializeZoomInteractionConfig.initializeZoomInteractionConfig)(params.zoomInteractionConfig)
     }
   };
 };

package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts

@@ -1,4 +1,5 @@
 import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId } from '@mui/x-charts/internals';
+import { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
 export interface UseChartProZoomParameters {
   /**
    * The list of zoom data related to each axis.
@@ -15,6 +16,10 @@ export interface UseChartProZoomParameters {
    * The list of zoom data related to each axis.
    */
   zoomData?: readonly ZoomData[];
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig?: ZoomInteractionConfig;
 }
 export type UseChartProZoomDefaultizedParameters = UseChartProZoomParameters & UseChartCartesianAxisDefaultizedParameters;
 export interface UseChartProZoomState {
@@ -32,6 +37,10 @@ export interface UseChartProZoomState {
      * Internal information to know if the user control the state or not.
      */
     isControlled: boolean;
+    /**
+     * Configuration for zoom interactions.
+     */
+    zoomInteractionConfig: DefaultizedZoomInteractionConfig;
   };
 }
 export interface UseChartProZoomPublicApi {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.11.3",
+  "version": "8.13.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -27,15 +27,15 @@
     "directory": "packages/x-charts-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.2",
+    "@babel/runtime": "^7.28.4",
     "@mui/utils": "^7.3.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.11.3",
-    "@mui/x-internal-gestures": "0.2.6",
-    "@mui/x-charts-vendor": "8.11.3",
-    "@mui/x-internals": "8.11.3",
-    "@mui/x-license": "8.11.3"
+    "@mui/x-charts": "8.13.0",
+    "@mui/x-internals": "8.12.0",
+    "@mui/x-license": "8.12.0",
+    "@mui/x-charts-vendor": "8.12.0",
+    "@mui/x-internal-gestures": "0.3.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/plugins/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@mui/x-charts/plugins';
+export { useChartProExport, type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export { useChartProZoom, type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";

package/plugins/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartProExport: true,
+  useChartProZoom: true
+};
+Object.defineProperty(exports, "useChartProExport", {
+  enumerable: true,
+  get: function () {
+    return _useChartProExport.useChartProExport;
+  }
+});
+Object.defineProperty(exports, "useChartProZoom", {
+  enumerable: true,
+  get: function () {
+    return _useChartProZoom.useChartProZoom;
+  }
+});
+var _plugins = require("@mui/x-charts/plugins");
+Object.keys(_plugins).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _plugins[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _plugins[key];
+    }
+  });
+});
+var _useChartProExport = require("../internals/plugins/useChartProExport");
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");