@mui/x-charts 7.12.1 → 7.14.0

package/modern/context/CartesianProvider/getAxisExtremum.js

@@ -1,21 +1,20 @@
-const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries) => {
+const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const getter = getters[chartType];
   const series = formattedSeries[chartType]?.series ?? {};
   const [minChartTypeData, maxChartTypeData] = getter?.({
     series,
     axis,
-    isDefaultAxis
-  }) ?? [null, null];
+    isDefaultAxis,
+    getFilters
+  }) ?? [Infinity, -Infinity];
   const [minData, maxData] = acc;
-  if (minData === null || maxData === null) {
-    return [minChartTypeData, maxChartTypeData];
-  }
-  if (minChartTypeData === null || maxChartTypeData === null) {
-    return [minData, maxData];
-  }
   return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
 };
-export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
+export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const charTypes = Object.keys(getters);
-  return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [null, null]);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries, getFilters), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
 };

package/modern/context/CartesianProvider/index.js

@@ -2,6 +2,7 @@ import { computeValue } from './computeValue';
 export * from './CartesianProvider';
 export * from './CartesianContext';
 export * from './useCartesianContext';
+export * from './Cartesian.types';
 const cartesianProviderUtils = {
   computeValue
 };

package/modern/context/CartesianProvider/zoom.js

@@ -0,0 +1,19 @@
+/**
+ * Applies the zoom into the scale range.
+ * It changes the screen coordinates that the scale covers.
+ * Not the data that is displayed.
+ *
+ * @param scaleRange the original range in real screen coordinates.
+ * @param zoomRange the zoom range in percentage.
+ * @returns zoomed range in real screen coordinates.
+ */
+export const zoomScaleRange = (scaleRange, zoomRange) => {
+  const rangeGap = scaleRange[1] - scaleRange[0];
+  const zoomGap = zoomRange[1] - zoomRange[0];
+
+  // If current zoom show the scale between p1 and p2 percents
+  // The range should be extended by adding [0, p1] and [p2, 100] segments
+  const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
+  const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
+  return [min, max];
+};

package/modern/context/DrawingProvider.js

@@ -42,12 +42,20 @@ export function DrawingProvider(props) {
   const isPointInside = React.useCallback(({
     x,
     y
-  }, targetElement) => {
+  }, options) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (targetElement && targetElement.closest('[data-drawing-container]')) {
+    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    return x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height;
+    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;
   }, [drawingArea]);
   const value = React.useMemo(() => _extends({
     chartId: chartId ?? ''

package/modern/hooks/useAxisEvents.js

@@ -98,7 +98,9 @@ export const useAxisEvents = disableAxisListener => {
       const svgPoint = getSVGPoint(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, event.target)) {
+      if (!drawingArea.isPointInside(svgPoint, {
+        targetElement: event.target
+      })) {
         if (mousePosition.current.isInChart) {
           dispatch({
             type: 'exitChart'

package/modern/hooks/useTicks.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
+import { isInfinity } from '../internals/isInfinity';
 export function getTickNumber(params) {
   const {
     tickMaxStep,
@@ -60,8 +61,10 @@ export function useTicks(options) {
         labelOffset: 0
       }));
     }
-    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
-      // The axis should not be visible, so ticks should also be hidden.
+    const domain = scale.domain();
+    // Skip axis rendering if no data is available
+    // - The domains contains Infinity for continuous scales.
+    if (domain.some(isInfinity)) {
       return [];
     }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.12.1
+ * @mui/x-charts v7.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/domUtils.js

@@ -20,7 +20,7 @@ const SPAN_STYLE = {
   whiteSpace: 'pre'
 };
 const STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
-const MEASUREMENT_SPAN_ID = 'mui_measurement_span';
+export const MEASUREMENT_SPAN_ID = 'mui_measurement_span';
 
 /**
  *
@@ -57,7 +57,7 @@ function camelToMiddleLine(text) {
  * @returns CSS styling string
  */
 export const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
-
+let domCleanTimeout;
 /**
  *
  * @param text The string to estimate
@@ -105,6 +105,13 @@ export const getStringSize = (text, style = {}) => {
     } else {
       stringCache.cacheCount += 1;
     }
+    if (domCleanTimeout) {
+      clearTimeout(domCleanTimeout);
+    }
+    domCleanTimeout = setTimeout(() => {
+      // Limit node cleaning to once per render cycle
+      measurementSpan.textContent = '';
+    }, 0);
     return result;
   } catch (e) {
     return {
@@ -112,4 +119,10 @@ export const getStringSize = (text, style = {}) => {
       height: 0
     };
   }
-};
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function unstable_cleanupDOM() {
+  // const measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+  // measurementSpan?.remove();
+}

package/modern/internals/index.js

@@ -20,6 +20,7 @@ export * from './configInit';
 export * from './getLabel';
 export * from './getSVGPoint';
 export * from './isDefined';
+export { unstable_cleanupDOM } from './domUtils';
 
 // contexts
 
@@ -29,6 +30,8 @@ export * from '../context/InteractionProvider';
 export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 export * from '../context/PluginProvider';
+export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
+
 // series configuration
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';

package/modern/internals/isInfinity.js

@@ -0,0 +1,3 @@
+export function isInfinity(v) {
+  return typeof v === 'number' && !Number.isFinite(v);
+}

package/modern/models/axis.js

@@ -1,3 +1,8 @@
+/**
+ * Use this type instead of `AxisScaleConfig` when the values
+ * shouldn't be provided by the user.
+ */
+
 export function isBandScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'band';
 }

package/modern/tests/firePointerEvent.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { fireEvent } from '@mui/internal-test-utils';
+export function firePointerEvent(target, type, options) {
+  const originalGetBoundingClientRect = target.getBoundingClientRect;
+  target.getBoundingClientRect = () => ({
+    x: 0,
+    y: 0,
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    toJSON() {
+      return {
+        x: 0,
+        y: 0,
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0
+      };
+    }
+  });
+  const event = new window.PointerEvent(type, _extends({
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    isPrimary: true
+  }, options));
+  fireEvent(target, event);
+  target.getBoundingClientRect = originalGetBoundingClientRect;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.12.1",
+  "version": "7.14.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -30,13 +30,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@mui/system": "^5.16.5",
-    "@mui/utils": "^5.16.5",
+    "@mui/system": "^5.16.7",
+    "@mui/utils": "^5.16.6",
     "@react-spring/rafz": "^9.7.4",
     "@react-spring/web": "^9.7.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "7.12.1"
+    "@mui/x-charts-vendor": "7.14.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/tests/firePointerEvent.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.firePointerEvent = firePointerEvent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _internalTestUtils = require("@mui/internal-test-utils");
+function firePointerEvent(target, type, options) {
+  const originalGetBoundingClientRect = target.getBoundingClientRect;
+  target.getBoundingClientRect = () => ({
+    x: 0,
+    y: 0,
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    toJSON() {
+      return {
+        x: 0,
+        y: 0,
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0
+      };
+    }
+  });
+  const event = new window.PointerEvent(type, (0, _extends2.default)({
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    isPrimary: true
+  }, options));
+  (0, _internalTestUtils.fireEvent)(target, event);
+  target.getBoundingClientRect = originalGetBoundingClientRect;
+}

package/context/CartesianProvider/normalizeAxis.d.ts

@@ -1,5 +0,0 @@
-import type { AxisConfig, ScaleName } from '../../models';
-import { ChartsAxisProps } from '../../models/axis';
-import { MakeOptional } from '../../models/helpers';
-import { DatasetType } from '../../models/seriesType/config';
-export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: "x" | "y") => R[];

package/context/CartesianProvider/normalizeAxis.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.normalizeAxis = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-const normalizeAxis = (axis, dataset, axisName) => {
-  return axis?.map(axisConfig => {
-    const dataKey = axisConfig.dataKey;
-    if (dataKey === undefined || axisConfig.data !== undefined) {
-      return axisConfig;
-    }
-    if (dataset === undefined) {
-      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
-    }
-    return (0, _extends2.default)({}, axisConfig, {
-      data: dataset.map(d => d[dataKey])
-    });
-  }) ?? [];
-};
-exports.normalizeAxis = normalizeAxis;

package/esm/context/CartesianProvider/normalizeAxis.js

@@ -1,15 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export const normalizeAxis = (axis, dataset, axisName) => {
-  return axis?.map(axisConfig => {
-    const dataKey = axisConfig.dataKey;
-    if (dataKey === undefined || axisConfig.data !== undefined) {
-      return axisConfig;
-    }
-    if (dataset === undefined) {
-      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
-    }
-    return _extends({}, axisConfig, {
-      data: dataset.map(d => d[dataKey])
-    });
-  }) ?? [];
-};

package/modern/context/CartesianProvider/normalizeAxis.js

@@ -1,15 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export const normalizeAxis = (axis, dataset, axisName) => {
-  return axis?.map(axisConfig => {
-    const dataKey = axisConfig.dataKey;
-    if (dataKey === undefined || axisConfig.data !== undefined) {
-      return axisConfig;
-    }
-    if (dataset === undefined) {
-      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
-    }
-    return _extends({}, axisConfig, {
-      data: dataset.map(d => d[dataKey])
-    });
-  }) ?? [];
-};