@mui/x-charts 8.3.0 → 8.4.0

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/computeAxisValue.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _axis = require("../../../../models/axis");
 var _colorScale = require("../../../colorScale");
-var _useTicks = require("../../../../hooks/useTicks");
+var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
 var _zoom = require("./zoom");
 var _getAxisExtremum = require("./getAxisExtremum");
@@ -117,11 +117,11 @@ function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
+    const rawTickNumber = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
       range,
       domain: axisExtremums
     }));
-    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
+    const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, zoomRange);
     const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
     const scale = (0, _getScale.getScale)(scaleType, axisExtremums, zoomedRange);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

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/computeAxisValue.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _axis = require("../../../../models/axis");
 var _colorScale = require("../../../colorScale");
-var _useTicks = require("../../../../hooks/useTicks");
+var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
 var _getAxisExtremum = require("./getAxisExtremum");
 var _angleConversion = require("../../../angleConversion");
@@ -112,11 +112,11 @@ function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = (0, _useTicks.getTickNumber)((0, _extends2.default)({}, axis, {
+    const rawTickNumber = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
       range,
       domain: axisExtremums
     }));
-    const tickNumber = rawTickNumber / ((range[1] - range[0]) / 100);
+    const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, range);
     const scale = (0, _getScale.getScale)(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
     const [minDomain, maxDomain] = finalScale.domain();

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/internals/ticks.d.ts

@@ -0,0 +1,6 @@
+import type { TickParams } from "../hooks/useTicks.js";
+export declare function getTickNumber(params: TickParams & {
+  range: number[];
+  domain: any[];
+}): number;
+export declare function scaleTickNumberByRange(tickNumber: number, range: number[]): number;

package/internals/ticks.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTickNumber = getTickNumber;
+exports.scaleTickNumberByRange = scaleTickNumberByRange;
+function getTickNumber(params) {
+  const {
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
+  } = params;
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
+}
+function scaleTickNumberByRange(tickNumber, range) {
+  const rangeGap = range[1] - range[0];
+
+  /* If the range start and end are the same, `tickNumber` will become infinity, so we default to 1. */
+  if (rangeGap === 0) {
+    return 1;
+  }
+  return tickNumber / ((range[1] - range[0]) / 100);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.3.0",
+  "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-charts-vendor": "8.3.0",
-    "@mui/x-internals": "8.3.0"
+    "@mui/x-charts-vendor": "8.4.0",
+    "@mui/x-internals": "8.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",