@mui/x-charts 8.3.1 → 8.4.0

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

@@ -71,9 +71,7 @@ export const useChartCartesianAxis = ({
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = getSVGPoint(element, target);
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         instance.cleanInteraction?.();
         return;
       }

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts

@@ -77,6 +77,14 @@ export interface ZoomSliderOptions {
    * If `true`, the slider will be shown.
    */
   enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   *
+   * @default 28
+   */
+  size?: number;
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type GetZoomAxisFilters = (params: {

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -97,9 +97,7 @@ export const useChartPolarAxis = ({
       mousePosition.current.y = svgPoint.y;
 
       // Test if it's in the drawing area
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         if (mousePosition.current.isInChart) {
           instance?.cleanInteraction();
           mousePosition.current.isInChart = false;

package/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -71,10 +71,7 @@ export const useChartVoronoi = ({
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!instance.isPointInside({
-          x: pointX,
-          y: pointY
-        })) {
+        if (!instance.isPointInside(pointX, pointY)) {
           // If the point is not displayed we move them to a trash coordinate.
           // This avoids managing index mapping before/after filtering.
           // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
@@ -100,7 +97,7 @@ export const useChartVoronoi = ({
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
-      if (!instance.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }

package/hooks/useTicks.js

@@ -78,12 +78,8 @@ function useTicks(options) {
     for (let i = 0; i < ticks.length; i += 1) {
       const value = ticks[i];
       const offset = scale(value);
-      if (instance.isPointInside({
-        x: offset,
-        y: offset
-      }, {
-        direction
-      })) {
+      const isInside = direction === 'x' ? instance.isXInside(offset) : instance.isYInside(offset);
+      if (isInside) {
         visibleTicks.push({
           value,
           formattedValue: valueFormatter?.(value, {

package/index.js

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

package/internals/constants.d.ts

@@ -1,4 +1,4 @@
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 export declare const ZOOM_SLIDER_MARGIN = 4;
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
-export declare const ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;

package/internals/constants.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_MARGIN = void 0;
+exports.ZOOM_SLIDER_MARGIN = exports.DEFAULT_ZOOM_SLIDER_SIZE = void 0;
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 const ZOOM_SLIDER_MARGIN = exports.ZOOM_SLIDER_MARGIN = 4;
 
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
-const ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+const DEFAULT_ZOOM_SLIDER_SIZE = exports.DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;

package/internals/consumeSlots.js

@@ -102,4 +102,5 @@ const consumeSlots = (name, slotPropName, options, InComponent) => {
   }
   return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
 };
-exports.consumeSlots = consumeSlots;
+exports.consumeSlots = consumeSlots;
+if (process.env.NODE_ENV !== "production") consumeSlots.displayName = "consumeSlots";

package/internals/consumeThemeProps.js

@@ -67,6 +67,7 @@ const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.for
   const theme = (0, _styles.useTheme)();
   const classes = options.classesResolver?.(outProps, theme);
   const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== "production") OutComponent.displayName = "OutComponent";
   if (process.env.NODE_ENV !== 'production') {
     OutComponent.displayName = `consumeThemeProps(${name})`;
   }
@@ -75,4 +76,5 @@ const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.for
     ref: ref
   }));
 });
-exports.consumeThemeProps = consumeThemeProps;
+exports.consumeThemeProps = consumeThemeProps;
+if (process.env.NODE_ENV !== "production") consumeThemeProps.displayName = "consumeThemeProps";

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

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
+var _useSelector = require("../../../store/useSelector");
 var _constants = require("../../../../constants");
 var _useChartDimensions = require("./useChartDimensions.selectors");
 var _defaultizeMargin = require("../../../defaultizeMargin");
@@ -150,28 +151,21 @@ const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const isPointInside = React.useCallback(({
-    x,
-    y
-  }, options) => {
+  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const isXInside = React.useCallback(x => x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width, [drawingArea.left, drawingArea.width]);
+  const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
+  const isPointInside = React.useCallback((x, y, targetElement) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = (0, _useChartDimensions.selectorChartDrawingArea)(store.value);
-    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
-    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
-    if (options?.direction === 'x') {
-      return isInsideX;
-    }
-    if (options?.direction === 'y') {
-      return isInsideY;
-    }
-    return isInsideX && isInsideY;
-  }, [store.value]);
+    return isXInside(x) && isYInside(y);
+  }, [isXInside, isYInside]);
   return {
     instance: {
-      isPointInside
+      isPointInside,
+      isXInside,
+      isYInside
     }
   };
 };

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

@@ -65,21 +65,24 @@ export interface UseChartDimensionsState {
 export interface UseChartDimensionsInstance {
   /**
    * Checks if a point is inside the drawing area.
-   * @param {Object} point The point to check.
-   * @param {number} point.x The x coordinate of the point.
-   * @param {number} point.y The y coordinate of the point.
-   * @param {Object} options The options of the check.
-   * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
-   * @param {'x' | 'y'} [options.direction] The direction to check.
+   * @param {number} x The x coordinate of the point.
+   * @param {number} y The y coordinate of the point.
+   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (point: {
-    x: number;
-    y: number;
-  }, options?: {
-    targetElement?: Element;
-    direction?: 'x' | 'y';
-  }) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  /**
+   * Checks if the x coordinate is inside the drawing area.
+   * @param {number} x The x coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isXInside: (x: number) => boolean;
+  /**
+   * Checks if the y coordinate is inside the drawing area.
+   * @param {number} y The y coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isYInside: (y: number) => boolean;
 }
 export type UseChartDimensionsSignature = ChartPluginSignature<{
   params: UseChartDimensionsParameters;

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

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultizeXAxis = defaultizeXAxis;
 exports.defaultizeYAxis = defaultizeYAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _constants = require("../../../constants");
 var _defaultizeZoom = require("./defaultizeZoom");
-var _constants2 = require("../../../../constants");
+var _constants = require("../../../../constants");
 function defaultizeXAxis(inAxes, dataset) {
   const offsets = {
     top: 0,
@@ -17,7 +16,7 @@ function defaultizeXAxis(inAxes, dataset) {
     none: 0
   };
   const inputAxes = inAxes && inAxes.length > 0 ? inAxes : [{
-    id: _constants2.DEFAULT_X_AXIS_KEY,
+    id: _constants.DEFAULT_X_AXIS_KEY,
     scaleType: 'linear'
   }];
   const parsedAxes = inputAxes.map((axisConfig, index) => {
@@ -26,7 +25,7 @@ function defaultizeXAxis(inAxes, dataset) {
     // The first x-axis is defaultized to the bottom
     const defaultPosition = index === 0 ? 'bottom' : 'none';
     const position = axisConfig.position ?? defaultPosition;
-    const defaultHeight = _constants2.DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? _constants2.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const defaultHeight = _constants.DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? _constants.AXIS_LABEL_DEFAULT_HEIGHT : 0);
     const id = axisConfig.id ?? `defaultized-x-axis-${index}`;
     const sharedConfig = (0, _extends2.default)({
       offset: offsets[position]
@@ -41,7 +40,7 @@ function defaultizeXAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.height;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += _constants.ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 
@@ -67,7 +66,7 @@ function defaultizeYAxis(inAxes, dataset) {
     none: 0
   };
   const inputAxes = inAxes && inAxes.length > 0 ? inAxes : [{
-    id: _constants2.DEFAULT_Y_AXIS_KEY,
+    id: _constants.DEFAULT_Y_AXIS_KEY,
     scaleType: 'linear'
   }];
   const parsedAxes = inputAxes.map((axisConfig, index) => {
@@ -76,7 +75,7 @@ function defaultizeYAxis(inAxes, dataset) {
     // The first y-axis is defaultized to the left
     const defaultPosition = index === 0 ? 'left' : 'none';
     const position = axisConfig.position ?? defaultPosition;
-    const defaultWidth = _constants2.DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? _constants2.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const defaultWidth = _constants.DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? _constants.AXIS_LABEL_DEFAULT_HEIGHT : 0);
     const id = axisConfig.id ?? `defaultized-y-axis-${index}`;
     const sharedConfig = (0, _extends2.default)({
       offset: offsets[position]
@@ -91,7 +90,7 @@ function defaultizeYAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.width;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += _constants.ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultizeZoom = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _constants = require("../../../constants");
 const defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,
@@ -15,7 +16,8 @@ const defaultZoomOptions = {
   panning: true,
   filterMode: 'keep',
   slider: {
-    enabled: false
+    enabled: false,
+    size: _constants.DEFAULT_ZOOM_SLIDER_SIZE
   }
 };
 const defaultizeZoom = (zoom, axisId, axisDirection) => {

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

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorChartTopAxisSize = exports.selectorChartRightAxisSize = exports.selectorChartLeftAxisSize = exports.selectorChartBottomAxisSize = void 0;
-var _constants = require("../../../constants");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
 var _selectors = require("../../utils/selectors");
-const selectorChartLeftAxisSize = exports.selectorChartLeftAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? _constants.ZOOM_SLIDER_SIZE : 0) : acc, 0));
-const selectorChartRightAxisSize = exports.selectorChartRightAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? _constants.ZOOM_SLIDER_SIZE : 0) : acc, 0));
-const selectorChartTopAxisSize = exports.selectorChartTopAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? _constants.ZOOM_SLIDER_SIZE : 0) : acc, 0));
-const selectorChartBottomAxisSize = exports.selectorChartBottomAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? _constants.ZOOM_SLIDER_SIZE : 0) : acc, 0));
+const selectorChartLeftAxisSize = exports.selectorChartLeftAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+const selectorChartRightAxisSize = exports.selectorChartRightAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+const selectorChartTopAxisSize = exports.selectorChartTopAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+const selectorChartBottomAxisSize = exports.selectorChartBottomAxisSize = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));

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

@@ -78,9 +78,7 @@ const useChartCartesianAxis = ({
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         instance.cleanInteraction?.();
         return;
       }

package/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts

@@ -77,6 +77,14 @@ export interface ZoomSliderOptions {
    * If `true`, the slider will be shown.
    */
   enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   *
+   * @default 28
+   */
+  size?: number;
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type GetZoomAxisFilters = (params: {

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -104,9 +104,7 @@ const useChartPolarAxis = ({
       mousePosition.current.y = svgPoint.y;
 
       // Test if it's in the drawing area
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         if (mousePosition.current.isInChart) {
           instance?.cleanInteraction();
           mousePosition.current.isInChart = false;

package/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -79,10 +79,7 @@ const useChartVoronoi = ({
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!instance.isPointInside({
-          x: pointX,
-          y: pointY
-        })) {
+        if (!instance.isPointInside(pointX, pointY)) {
           // If the point is not displayed we move them to a trash coordinate.
           // This avoids managing index mapping before/after filtering.
           // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
@@ -108,7 +105,7 @@ const useChartVoronoi = ({
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
-      if (!instance.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -36,8 +36,8 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.3.1",
-    "@mui/x-charts-vendor": "8.3.1"
+    "@mui/x-charts-vendor": "8.4.0",
+    "@mui/x-internals": "8.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",