@mui/x-charts 7.10.0 → 7.11.1

package/modern/context/CartesianProvider/CartesianProvider.js

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { useDrawingArea } from '../../hooks/useDrawingArea';
 import { useSeries } from '../../hooks/useSeries';
 import { CartesianContext } from './CartesianContext';
-import { normalizeAxis } from './normalizeAxis';
 import { computeValue } from './computeValue';
 import { jsx as _jsx } from "react/jsx-runtime";
 function CartesianContextProvider(props) {
   const {
-    xAxis: inXAxis,
-    yAxis: inYAxis,
+    xAxis,
+    yAxis,
     dataset,
     xExtremumGetters,
     yExtremumGetters,
@@ -16,10 +15,22 @@ function CartesianContextProvider(props) {
   } = props;
   const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
-  const xAxis = React.useMemo(() => normalizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
-  const yAxis = React.useMemo(() => normalizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
-  const xValues = React.useMemo(() => computeValue(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x'), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
-  const yValues = React.useMemo(() => computeValue(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y'), [drawingArea, formattedSeries, yAxis, yExtremumGetters]);
+  const xValues = React.useMemo(() => computeValue({
+    drawingArea,
+    formattedSeries,
+    axis: xAxis,
+    extremumGetters: xExtremumGetters,
+    dataset,
+    axisDirection: 'x'
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset]);
+  const yValues = React.useMemo(() => computeValue({
+    drawingArea,
+    formattedSeries,
+    axis: yAxis,
+    extremumGetters: yExtremumGetters,
+    dataset,
+    axisDirection: 'y'
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/modern/context/CartesianProvider/computeValue.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from 'd3-scale';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
 import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
 import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
 import { getTickNumber } from '../../hooks/useTicks';
 import { getScale } from '../../internals/getScale';
 import { getAxisExtremum } from './getAxisExtremum';
-const getRange = (drawingArea, axisName, isReverse) => {
-  const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+import { normalizeAxis } from './normalizeAxis';
+const getRange = (drawingArea, axisDirection, isReverse) => {
+  const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
 const zoomedScaleRange = (scaleRange, zoomRange) => {
@@ -29,26 +29,30 @@ function createDateFormatter(axis, range) {
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-export function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName, zoomRange = [0, 100]) {
-  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
-  const allAxis = [...(inAxis?.map((axis, index) => _extends({
-    id: `defaultized-${axisName}-axis-${index}`
-  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
-    id
-  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
-    id: DEFAULT_AXIS_KEY,
-    scaleType: 'linear'
-  }] : [])];
+export function computeValue({
+  drawingArea,
+  formattedSeries,
+  axis: inAxis,
+  extremumGetters,
+  dataset,
+  axisDirection,
+  zoomData
+}) {
+  const allAxis = normalizeAxis(inAxis, dataset, axisDirection);
   const completeAxis = {};
   allAxis.forEach((axis, axisIndex) => {
     const isDefaultAxis = axisIndex === 0;
     const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries);
-    const range = getRange(drawingArea, axisName, axis.reverse);
+    const zoom = zoomData?.find(({
+      axisId
+    }) => axisId === axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = getRange(drawingArea, axisDirection, axis.reverse);
     if (isBandScaleConfig(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
-      const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
+      const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
       const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         categoryGapRatio,
@@ -66,7 +70,7 @@ export function computeValue(drawingArea, formattedSeries, inAxis, extremumGette
       }
     }
     if (isPointScaleConfig(axis)) {
-      const scaleRange = axisName === 'x' ? range : [...range].reverse();
+      const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
       const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({}, axis, {
         scale: scalePoint(axis.data, zoomedRange),

package/modern/context/CartesianProvider/defaultizeAxis.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
+export const defaultizeAxis = (inAxis, axisName) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => _extends({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+};

package/modern/context/CartesianProvider/index.js

@@ -1,10 +1,8 @@
 import { computeValue } from './computeValue';
-import { normalizeAxis } from './normalizeAxis';
 export * from './CartesianProvider';
 export * from './CartesianContext';
 export * from './useCartesianContext';
 const cartesianProviderUtils = {
-  computeValue,
-  normalizeAxis
+  computeValue
 };
 export { cartesianProviderUtils };

package/modern/context/CartesianProvider/normalizeAxis.js

@@ -6,10 +6,10 @@ export const normalizeAxis = (axis, dataset, axisName) => {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      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/DrawingProvider.js

@@ -14,7 +14,8 @@ export const DrawingContext = /*#__PURE__*/React.createContext({
   right: 0,
   height: 300,
   width: 400,
-  chartId: ''
+  chartId: '',
+  isPointInside: () => false
 });
 if (process.env.NODE_ENV !== 'production') {
   DrawingContext.displayName = 'DrawingContext';
@@ -38,9 +39,21 @@ export function DrawingProvider(props) {
   } = props;
   const drawingArea = useChartDimensions(width, height, margin);
   const chartId = useId();
+  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 (targetElement && targetElement.closest('[data-drawing-container]')) {
+      return true;
+    }
+    return x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height;
+  }, [drawingArea]);
   const value = React.useMemo(() => _extends({
     chartId: chartId ?? ''
-  }, drawingArea), [chartId, drawingArea]);
+  }, drawingArea, {
+    isPointInside
+  }), [chartId, drawingArea, isPointInside]);
   const refValue = React.useMemo(() => ({
     isInitialized: true,
     data: svgRef

package/modern/context/HighlightedProvider/HighlightedProvider.js

@@ -15,11 +15,11 @@ const mergeDeprecatedOptions = options => {
       highlighted,
       faded
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   return _extends({
     highlight: highlighted,
     fade: faded
-  }, rest);
+  }, other);
 };
 function HighlightedProvider({
   children,

package/modern/context/SeriesContextProvider.js

@@ -34,7 +34,7 @@ const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
       };
     }
     if (seriesGroups[type]?.series[id] !== undefined) {
-      throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
+      throw new Error(`MUI X: series' id "${id}" is not unique.`);
     }
     seriesGroups[type].series[id] = _extends({
       id

package/modern/context/ZAxisContextProvider.js

@@ -22,7 +22,7 @@ function ZAxisContextProvider(props) {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI X Charts: z-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI X: z-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/modern/hooks/useAxisEvents.js

@@ -10,12 +10,7 @@ function getAsANumber(value) {
 }
 export const useAxisEvents = disableAxisListener => {
   const svgRef = useSvgRef();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const {
     xAxis,
     yAxis,
@@ -30,6 +25,7 @@ export const useAxisEvents = disableAxisListener => {
 
   // Use a ref to avoid rerendering on every mousemove event.
   const mousePosition = React.useRef({
+    isInChart: false,
     x: -1,
     y: -1
   });
@@ -89,6 +85,7 @@ export const useAxisEvents = disableAxisListener => {
     }
     const handleOut = () => {
       mousePosition.current = {
+        isInChart: false,
         x: -1,
         y: -1
       };
@@ -99,18 +96,18 @@ export const useAxisEvents = disableAxisListener => {
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = getSVGPoint(element, target);
-      mousePosition.current = {
-        x: svgPoint.x,
-        y: svgPoint.y
-      };
-      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
-      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
-      if (outsideX || outsideY) {
-        dispatch({
-          type: 'exitChart'
-        });
+      mousePosition.current.x = svgPoint.x;
+      mousePosition.current.y = svgPoint.y;
+      if (!drawingArea.isPointInside(svgPoint, event.target)) {
+        if (mousePosition.current.isInChart) {
+          dispatch({
+            type: 'exitChart'
+          });
+          mousePosition.current.isInChart = false;
+        }
         return;
       }
+      mousePosition.current.isInChart = true;
       const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
       const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({
@@ -142,5 +139,5 @@ export const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
+  }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
 };

package/modern/hooks/useDrawingArea.js

@@ -7,7 +7,8 @@ export function useDrawingArea() {
     width,
     height,
     bottom,
-    right
+    right,
+    isPointInside
   } = React.useContext(DrawingContext);
   return React.useMemo(() => ({
     left,
@@ -15,6 +16,7 @@ export function useDrawingArea() {
     width,
     height,
     bottom,
-    right
-  }), [height, left, top, width, bottom, right]);
+    right,
+    isPointInside
+  }), [height, left, top, width, bottom, right, isPointInside]);
 }

package/modern/hooks/useReducedMotion.js

@@ -26,9 +26,11 @@ export const useReducedMotion = () => {
       });
     };
     handleMediaChange(mql);
-    mql.addEventListener('change', handleMediaChange);
+
+    // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener
+    mql.addEventListener?.('change', handleMediaChange);
     return () => {
-      mql.removeEventListener('change', handleMediaChange);
+      mql.removeEventListener?.('change', handleMediaChange);
     };
   }, []);
 };

package/modern/index.js

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

package/modern/internals/SlotComponentPropsFromProps.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/cleanId.js

@@ -0,0 +1,6 @@
+/**
+ * Remove spaces to have viable ids
+ */
+export function cleanId(id) {
+  return id.replace(' ', '_');
+}

package/modern/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -4,6 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;
 export default function ChartsContinuousGradient(props) {
   const {
+    gradientUnits,
     isReversed,
     gradientId,
     size,
@@ -26,8 +27,8 @@ export default function ChartsContinuousGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
-    gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
+    [`${direction}${isReversed ? 1 : 2}`]: gradientUnits === 'objectBoundingBox' ? 1 : `${size}px`,
+    gradientUnits: gradientUnits ?? 'userSpaceOnUse' // Use the SVG coordinate instead of the component ones.
     ,
     children: Array.from({
       length: numberOfPoints + 1

package/modern/internals/geometry.js

@@ -14,7 +14,7 @@ export function getMinXTranslation(width, height, angle = 0) {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnce && angle > 90 && angle < -90) {
       warnedOnce = true;
-      console.warn([`MUI X Charts: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
+      console.warn([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
     }
   }
   const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]

package/modern/internals/{utils.js → getPercentageValue.js}

@@ -1,8 +1,3 @@
-// Returns the index of a defined shape
-export function getSymbol(shape) {
-  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
-  return symbolNames.indexOf(shape) || 0;
-}
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
@@ -29,12 +24,5 @@ export function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
-}
-
-/**
- * Remove spaces to have viable ids
- */
-export function cleanId(id) {
-  return id.replace(' ', '_');
+  throw Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/modern/internals/getSymbol.js

@@ -0,0 +1,5 @@
+// Returns the index of a defined shape
+export function getSymbol(shape) {
+  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
+  return symbolNames.indexOf(shape) || 0;
+}

package/modern/internals/index.js

@@ -8,16 +8,18 @@ export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
 export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
-export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
 export { useLineChartProps } from '../LineChart/useLineChartProps';
 export { useBarChartProps } from '../BarChart/useBarChartProps';
+export { useResponsiveChartContainerProps } from '../ResponsiveChartContainer/useResponsiveChartContainerProps';
+export { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
 
 // utils
 export * from './defaultizeValueFormatter';
 export * from './configInit';
 export * from './getLabel';
 export * from './getSVGPoint';
+export * from './isDefined';
 
 // contexts
 

package/modern/internals/isDefined.js

@@ -0,0 +1,3 @@
+export function isDefined(value) {
+  return value !== null && value !== undefined;
+}

package/modern/internals/notNull.js

@@ -0,0 +1,3 @@
+export function notNull(value) {
+  return value !== null;
+}

package/modern/internals/ts-generic.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/warning.js

@@ -1,13 +1,21 @@
-export function buildWarning(message, gravity = 'warning') {
-  let alreadyWarned = false;
-  return (...args) => {
-    if (!alreadyWarned) {
-      alreadyWarned = true;
-      if (gravity === 'error') {
-        console.error(message(...args));
-      } else {
-        console.warn(message(...args));
-      }
+const warnedOnceCache = new Set();
+
+// TODO move to @mui/x-internals
+// TODO eventually move to @base_ui/internals. Base UI, etc. too need this helper.
+export function warnOnce(message, gravity = 'warning') {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  const cleanMessage = Array.isArray(message) ? message.join('\n') : message;
+  if (!warnedOnceCache.has(cleanMessage)) {
+    warnedOnceCache.add(cleanMessage);
+    if (gravity === 'error') {
+      console.error(cleanMessage);
+    } else {
+      console.warn(cleanMessage);
     }
-  };
+  }
+}
+export function clearWarningsCache() {
+  warnedOnceCache.clear();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.10.0",
+  "version": "7.11.1",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,10 +29,10 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
+    "@babel/runtime": "^7.24.8",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.16.0",
-    "@mui/utils": "^5.16.0",
+    "@mui/system": "^5.16.5",
+    "@mui/utils": "^5.16.5",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "clsx": "^2.1.1",

package/internals/utils.d.ts

@@ -1,18 +0,0 @@
-export type SymbolsTypes = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
-export declare function getSymbol(shape: SymbolsTypes): number;
-type Without<T, U> = {
-    [P in Exclude<keyof T, keyof U>]?: never;
-};
-export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
-/**
- * Helper that converts values and percentages into values.
- * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
- * @param refValue The numerical value associated to 100%.
- * @returns The numerical value associated to the provided value.
- */
-export declare function getPercentageValue(value: number | string, refValue: number): number;
-/**
- * Remove spaces to have viable ids
- */
-export declare function cleanId(id: string): string;
-export {};