@mui/x-charts-pro 8.0.0 → 8.1.0

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -6,6 +6,7 @@ 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"));
@@ -15,16 +16,28 @@ var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _useChartProZoom = require("./useChartProZoom.utils");
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-function initializeZoomData(options) {
+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
-  }) => ({
-    axisId,
-    start,
-    end
-  }));
+  }) => {
+    if (zoomDataMap.has(axisId)) {
+      return zoomDataMap.get(axisId);
+    }
+    return {
+      axisId,
+      start,
+      end
+    };
+  });
 }
 const useChartProZoom = ({
   store,
@@ -79,10 +92,7 @@ const useChartProZoom = ({
       })
     });
   }), 166), [store]);
-
-  // This is throttled. We want to run it at most once per frame.
-  // By joining the two, we ensure that interacting and zooming are in sync.
-  const setZoomDataCallback = React.useMemo(() => (0, _rafThrottle.rafThrottle)(zoomData => {
+  const setZoomDataCallback = React.useCallback(zoomData => {
     store.update(prevState => {
       const newZoomData = typeof zoomData === 'function' ? zoomData([...prevState.zoom.zoomData]) : zoomData;
       onZoomChange?.(newZoomData);
@@ -97,10 +107,9 @@ const useChartProZoom = ({
         })
       });
     });
-  }), [onZoomChange, store, removeIsInteracting]);
+  }, [onZoomChange, store, removeIsInteracting]);
   React.useEffect(() => {
     return () => {
-      setZoomDataCallback.clear();
       removeIsInteracting.clear();
     };
   }, [setZoomDataCallback, removeIsInteracting]);
@@ -119,17 +128,10 @@ const useChartProZoom = ({
     if (element === null || !isPanEnabled) {
       return () => {};
     }
-    const handlePan = event => {
-      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
-        return;
-      }
-      if (touchStartRef.current == null) {
-        return;
-      }
-      const point = (0, _internals.getSVGPoint)(element, event);
-      const movementX = point.x - touchStartRef.current.x;
-      const movementY = (point.y - touchStartRef.current.y) * -1;
-      const newZoomData = touchStartRef.current.zoomData.map(zoom => {
+    const throttledHandlePan = (0, _rafThrottle.rafThrottle)((touchStart, point) => {
+      const movementX = point.x - touchStart.x;
+      const movementY = (point.y - touchStart.y) * -1;
+      const newZoomData = touchStart.zoomData.map(zoom => {
         const options = optionsLookup[zoom.axisId];
         if (!options || !options.panning) {
           return zoom;
@@ -160,6 +162,17 @@ const useChartProZoom = ({
         });
       });
       setZoomDataCallback(newZoomData);
+    });
+    const handlePan = event => {
+      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
+        return;
+      }
+      if (touchStartRef.current == null) {
+        return;
+      }
+      const touchStart = touchStartRef.current;
+      const point = (0, _internals.getSVGPoint)(element, event);
+      throttledHandlePan(touchStart, point);
     };
     const handleDown = event => {
       panningEventCacheRef.current.push(event);
@@ -194,6 +207,7 @@ const useChartProZoom = ({
       document.removeEventListener('pointerup', handleUp);
       document.removeEventListener('pointercancel', handleUp);
       document.removeEventListener('pointerleave', handleUp);
+      throttledHandlePan.clear();
     };
   }, [instance, svgRef, isDraggingRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
 
@@ -203,6 +217,7 @@ const useChartProZoom = ({
     if (element === null || !isZoomEnabled) {
       return () => {};
     }
+    const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
     const wheelHandler = event => {
       if (element === null) {
         return;
@@ -212,7 +227,13 @@ const useChartProZoom = ({
         return;
       }
       event.preventDefault();
-      setZoomDataCallback(prevZoomData => {
+
+      /*
+       * Need to throttle `setZoomDataCallback` instead of `wheelHandler` because we're calling `event.preventDefault()`.
+       * If we throttle the event, then some events' default behavior won't be prevented and the page will scroll while
+       * the user is trying to zoom in.
+       */
+      rafThrottledSetZoomData(prevZoomData => {
         return prevZoomData.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
@@ -238,7 +259,7 @@ const useChartProZoom = ({
     function pointerDownHandler(event) {
       zoomEventCacheRef.current.push(event);
     }
-    function pointerMoveHandler(event) {
+    const pointerMoveHandler = (0, _rafThrottle.rafThrottle)(function pointerMoveHandler(event) {
       if (element === null) {
         return;
       }
@@ -281,7 +302,7 @@ const useChartProZoom = ({
         eventPrevDiff.current = curDiff;
         return newZoomData;
       });
-    }
+    });
     function pointerUpHandler(event) {
       zoomEventCacheRef.current.splice(zoomEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
       if (zoomEventCacheRef.current.length < 2) {
@@ -309,6 +330,8 @@ const useChartProZoom = ({
       element.removeEventListener('pointerleave', pointerUpHandler);
       element.removeEventListener('touchstart', _useChartProZoom.preventDefault);
       element.removeEventListener('touchmove', _useChartProZoom.preventDefault);
+      pointerMoveHandler.clear();
+      rafThrottledSetZoomData.clear();
     };
   }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
   return {
@@ -339,11 +362,12 @@ useChartProZoom.getInitialState = params => {
     defaultizedYAxis
   } = params;
   const optionsLookup = (0, _extends2.default)({}, (0, _internals.createZoomLookup)('x')(defaultizedXAxis), (0, _internals.createZoomLookup)('y')(defaultizedYAxis));
+  const userZoomData =
+  // eslint-disable-next-line no-nested-ternary
+  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
   return {
     zoom: {
-      zoomData:
-      // eslint-disable-next-line no-nested-ternary
-      zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : initializeZoomData(optionsLookup),
+      zoomData: initializeZoomData(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined
     }

package/locales/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/locales';

package/locales/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _locales = require("@mui/x-charts/locales");
+Object.keys(_locales).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _locales[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _locales[key];
+    }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "The Pro plan edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -34,9 +34,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "@mui/x-charts-vendor": "8.0.0",
+    "@mui/x-internals": "8.0.0",
     "@mui/x-license": "8.0.0",
-    "@mui/x-charts": "8.0.0",
-    "@mui/x-internals": "8.0.0"
+    "@mui/x-charts": "8.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",