@mui/x-charts-pro 8.14.0 → 8.15.0

package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;

package/esm/ScatterChartPro/ScatterChartPro.plugins.js

@@ -1,4 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
+export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.14.0
+ * @mui/x-charts-pro v8.15.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -14,7 +14,7 @@ export const usePanOnDrag = ({
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
   const config = useSelector(store, selectorPanInteractionConfig, ['drag']);
-  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isPanOnDragEnabled) {
       return;

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -14,7 +14,7 @@ export const usePanOnPressAndDrag = ({
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
   const config = useSelector(store, selectorPanInteractionConfig, ['pressAndDrag']);
-  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isPanOnPressAndDragEnabled) {
       return;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts

@@ -26,7 +26,7 @@ export declare function getHorizontalCenterRatio(point: {
 }, area: {
   left: number;
   width: number;
-}): number;
+}, reverse?: boolean): number;
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
@@ -36,7 +36,7 @@ export declare function getVerticalCenterRatio(point: {
 }, area: {
   top: number;
   height: number;
-}): number;
+}, reverse?: boolean): number;
 /**
  * Translate the zoom data by a given movement.
  */

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js

@@ -80,23 +80,25 @@ export function getWheelScaleRatio(event, step) {
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
-export function getHorizontalCenterRatio(point, area) {
+export function getHorizontalCenterRatio(point, area, reverse = false) {
   const {
     left,
     width
   } = area;
-  return (point.x - left) / width;
+  const ratio = (point.x - left) / width;
+  return reverse ? 1 - ratio : ratio;
 }
 
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
-export function getVerticalCenterRatio(point, area) {
+export function getVerticalCenterRatio(point, area, reverse = false) {
   const {
     top,
     height
   } = area;
-  return (point.y - top) / height * -1 + 1;
+  const ratio = (top - point.y) / height + 1;
+  return reverse ? 1 - ratio : ratio;
 }
 
 /**
@@ -113,7 +115,8 @@ export function translateZoom(initialZoomData, movement, drawingArea, optionsLoo
     const span = max - min;
     const MIN_PERCENT = options.minStart;
     const MAX_PERCENT = options.maxEnd;
-    const displacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const rawDisplacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const displacement = options.reverse ? -rawDisplacement : rawDisplacement;
     const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
     let newMinPercent = min - displacement / dimension * span;
     let newMaxPercent = max - displacement / dimension * span;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -13,7 +13,7 @@ export const useZoomOnPinch = ({
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const config = useSelector(store, selectorZoomInteractionConfig, ['pinch']);
-  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnPinchEnabled) {
       return;
@@ -46,7 +46,7 @@ export const useZoomOnPinch = ({
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
           });
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
           if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;

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

@@ -13,7 +13,7 @@ export const useZoomOnTapAndDrag = ({
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const config = useSelector(store, selectorZoomInteractionConfig, ['tapAndDrag']);
-  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnTapAndDragEnabled) {
       return;
@@ -51,7 +51,7 @@ export const useZoomOnTapAndDrag = ({
             clientX: event.detail.initialCentroid.x,
             clientY: event.detail.initialCentroid.y
           });
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
           if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;

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

@@ -15,7 +15,7 @@ export const useZoomOnWheel = ({
   const startedOutsideRef = React.useRef(false);
   const startedOutsideTimeoutRef = React.useRef(null);
   const config = useSelector(store, selectorZoomInteractionConfig, ['wheel']);
-  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnWheelEnabled) {
       return;
@@ -59,7 +59,7 @@ export const useZoomOnWheel = ({
           if (!option) {
             return zoom;
           }
-          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
           const {
             scaleRatio,
             isZoomIn

package/esm/tests/constants.js

@@ -0,0 +1 @@
+export const CHART_SELECTOR = 'svg:not([aria-hidden="true"])';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.14.0
+ * @mui/x-charts-pro v8.15.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

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

@@ -20,7 +20,7 @@ const usePanOnDrag = ({
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
   const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorPanInteractionConfig, ['drag']);
-  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isPanOnDragEnabled) {
       return;

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

@@ -20,7 +20,7 @@ const usePanOnPressAndDrag = ({
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
   const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorPanInteractionConfig, ['pressAndDrag']);
-  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isPanOnPressAndDragEnabled) {
       return;

package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts

@@ -26,7 +26,7 @@ export declare function getHorizontalCenterRatio(point: {
 }, area: {
   left: number;
   width: number;
-}): number;
+}, reverse?: boolean): number;
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
@@ -36,7 +36,7 @@ export declare function getVerticalCenterRatio(point: {
 }, area: {
   top: number;
   height: number;
-}): number;
+}, reverse?: boolean): number;
 /**
  * Translate the zoom data by a given movement.
  */

package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js

@@ -93,23 +93,25 @@ function getWheelScaleRatio(event, step) {
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
-function getHorizontalCenterRatio(point, area) {
+function getHorizontalCenterRatio(point, area, reverse = false) {
   const {
     left,
     width
   } = area;
-  return (point.x - left) / width;
+  const ratio = (point.x - left) / width;
+  return reverse ? 1 - ratio : ratio;
 }
 
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
-function getVerticalCenterRatio(point, area) {
+function getVerticalCenterRatio(point, area, reverse = false) {
   const {
     top,
     height
   } = area;
-  return (point.y - top) / height * -1 + 1;
+  const ratio = (top - point.y) / height + 1;
+  return reverse ? 1 - ratio : ratio;
 }
 
 /**
@@ -126,7 +128,8 @@ function translateZoom(initialZoomData, movement, drawingArea, optionsLookup) {
     const span = max - min;
     const MIN_PERCENT = options.minStart;
     const MAX_PERCENT = options.maxEnd;
-    const displacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const rawDisplacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const displacement = options.reverse ? -rawDisplacement : rawDisplacement;
     const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
     let newMinPercent = min - displacement / dimension * span;
     let newMaxPercent = max - displacement / dimension * span;

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

@@ -19,7 +19,7 @@ const useZoomOnPinch = ({
   const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorZoomInteractionConfig, ['pinch']);
-  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnPinchEnabled) {
       return;
@@ -52,7 +52,7 @@ const useZoomOnPinch = ({
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
           });
-          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea, option.reverse) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
           if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;

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

@@ -19,7 +19,7 @@ const useZoomOnTapAndDrag = ({
   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]);
+  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnTapAndDragEnabled) {
       return;
@@ -57,7 +57,7 @@ const useZoomOnTapAndDrag = ({
             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 centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea, option.reverse) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
           if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;

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

@@ -21,7 +21,7 @@ const useZoomOnWheel = ({
   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]);
+  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
   React.useEffect(() => {
     if (!isZoomOnWheelEnabled) {
       return;
@@ -65,7 +65,7 @@ const useZoomOnWheel = ({
           if (!option) {
             return zoom;
           }
-          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea);
+          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea, option.reverse) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea, option.reverse);
           const {
             scaleRatio,
             isZoomIn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.14.0",
+  "version": "8.15.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,11 +31,11 @@
     "@mui/utils": "^7.3.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "8.14.0",
-    "@mui/x-charts": "8.14.0",
+    "@mui/x-charts-vendor": "8.15.0",
+    "@mui/x-charts": "8.15.0",
+    "@mui/x-internal-gestures": "0.3.4",
     "@mui/x-internals": "8.14.0",
-    "@mui/x-internal-gestures": "0.3.3",
-    "@mui/x-license": "8.14.0"
+    "@mui/x-license": "8.15.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/tests/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHART_SELECTOR = void 0;
+const CHART_SELECTOR = exports.CHART_SELECTOR = 'svg:not([aria-hidden="true"])';