@mui/x-charts 7.11.0 → 7.12.0

package/modern/ScatterChart/extremums.js

@@ -13,7 +13,10 @@ export const getExtremumX = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].xAxisKey === axis.id || series[seriesId].xAxisKey === undefined && isDefaultAxis).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
+    return axisId === axis.id || axisId === undefined && isDefaultAxis;
+  }).reduce((acc, seriesId) => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       x
     }) => {
@@ -29,7 +32,10 @@ export const getExtremumY = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || series[seriesId].yAxisKey === undefined && isDefaultAxis).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return axisId === axis.id || axisId === undefined && isDefaultAxis;
+  }).reduce((acc, seriesId) => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       y
     }) => {

package/modern/SparkLineChart/SparkLineChart.js

@@ -245,7 +245,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -297,7 +296,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   yAxis: PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/modern/context/CartesianProvider/computeValue.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { scaleBand, scalePoint, scaleTime } from 'd3-scale';
+import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
 import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
 import { getTickNumber } from '../../hooks/useTicks';

package/modern/context/CartesianProvider/normalizeAxis.js

@@ -6,7 +6,7 @@ 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

@@ -42,7 +42,13 @@ export function DrawingProvider(props) {
   const isPointInside = React.useCallback(({
     x,
     y
-  }) => x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height, [drawingArea]);
+  }, 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, {

package/modern/context/SeriesProvider/Series.types.js

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

package/modern/context/SeriesProvider/SeriesContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const SeriesContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {}
+});
+if (process.env.NODE_ENV !== 'production') {
+  SeriesContext.displayName = 'SeriesContext';
+}

package/modern/context/SeriesProvider/SeriesProvider.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { blueberryTwilightPalette } from '../../colorPalettes';
+import { SeriesContext } from './SeriesContext';
+import { preprocessSeries } from './processSeries';
+import { jsx as _jsx } from "react/jsx-runtime";
+function SeriesProvider(props) {
+  const {
+    series,
+    dataset,
+    colors = blueberryTwilightPalette,
+    seriesFormatters,
+    children
+  } = props;
+  const theme = useTheme();
+  const formattedSeries = React.useMemo(() => ({
+    isInitialized: true,
+    data: preprocessSeries({
+      series,
+      colors: typeof colors === 'function' ? colors(theme.palette.mode) : colors,
+      seriesFormatters,
+      dataset: dataset
+    })
+  }), [series, colors, theme.palette.mode, seriesFormatters, dataset]);
+  return /*#__PURE__*/_jsx(SeriesContext.Provider, {
+    value: formattedSeries,
+    children: children
+  });
+}
+export { SeriesProvider };

package/modern/context/SeriesProvider/index.js

@@ -0,0 +1,8 @@
+import { preprocessSeries } from './processSeries';
+export * from './SeriesProvider';
+export * from './SeriesContext';
+export * from './Series.types';
+const seriesProviderUtils = {
+  preprocessSeries
+};
+export { seriesProviderUtils };

package/modern/context/{SeriesContextProvider.js → SeriesProvider/processSeries.js}

@@ -1,25 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { defaultizeColor } from '../internals/defaultizeColor';
-import { blueberryTwilightPalette } from '../colorPalettes';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const SeriesContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {}
-});
-if (process.env.NODE_ENV !== 'production') {
-  SeriesContext.displayName = 'SeriesContext';
-}
+import { defaultizeColor } from '../../internals/defaultizeColor';
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
  * It also add defaultized values such as the ids, colors
- * @param series The array of series provided by devs
+ * @param series The array of series provided by the developer
  * @param colors The color palette used to defaultize series colors
  * @returns An object structuring all the series by type.
  */
-const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
+export const preprocessSeries = ({
+  series,
+  colors,
+  seriesFormatters,
+  dataset
+}) => {
   // Group series by type
   const seriesGroups = {};
   series.forEach((seriesData, seriesIndex) => {
@@ -34,7 +28,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
@@ -50,23 +44,4 @@ const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
     }
   });
   return formattedSeries;
-};
-function SeriesContextProvider(props) {
-  const {
-    series,
-    dataset,
-    colors = blueberryTwilightPalette,
-    seriesFormatters,
-    children
-  } = props;
-  const theme = useTheme();
-  const formattedSeries = React.useMemo(() => ({
-    isInitialized: true,
-    data: preprocessSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, seriesFormatters, dataset)
-  }), [series, colors, theme.palette.mode, seriesFormatters, dataset]);
-  return /*#__PURE__*/_jsx(SeriesContext.Provider, {
-    value: formattedSeries,
-    children: children
-  });
-}
-export { SeriesContextProvider };
+};

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

@@ -25,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
   });
@@ -84,6 +85,7 @@ export const useAxisEvents = disableAxisListener => {
     }
     const handleOut = () => {
       mousePosition.current = {
+        isInChart: false,
         x: -1,
         y: -1
       };
@@ -94,16 +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
-      };
-      if (!drawingArea.isPointInside(svgPoint)) {
-        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({

package/modern/hooks/useReducedMotion.js

@@ -19,10 +19,10 @@ export const useReducedMotion = () => {
       return () => {};
     }
     const mql = window.matchMedia('(prefers-reduced-motion)');
-    const handleMediaChange = e => {
+    const handleMediaChange = event => {
       Globals.assign({
         // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-        skipAnimation: e.matches || undefined
+        skipAnimation: event.matches || undefined
       });
     };
     handleMediaChange(mql);

package/modern/hooks/useSeries.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SeriesContext } from '../context/SeriesContextProvider';
+import { SeriesContext } from '../context/SeriesProvider';
 
 /**
  * Get access to the internal state of series.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.11.0
+ * @mui/x-charts v7.12.0
  *
  * @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/colorScale.js

@@ -1,4 +1,4 @@
-import { scaleOrdinal, scaleThreshold, scaleSequential } from 'd3-scale';
+import { scaleOrdinal, scaleThreshold, scaleSequential } from '@mui/x-charts-vendor/d3-scale';
 export function getSequentialColorScale(config) {
   if (config.type === 'piecewise') {
     return scaleThreshold(config.thresholds, config.colors);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { interpolateDate, interpolateNumber } from 'd3-interpolate';
+import { interpolateDate, interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;
 export default function ChartsContinuousGradient(props) {

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

@@ -1,4 +1,4 @@
-import { curveCatmullRom, curveLinear, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore } from 'd3-shape';
+import { curveCatmullRom, curveLinear, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore } from '@mui/x-charts-vendor/d3-shape';
 export default function getCurveFactory(curveType) {
   switch (curveType) {
     case 'catmullRom':

package/modern/internals/getPercentageValue.js

@@ -24,5 +24,5 @@ export function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI X Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
+  throw Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/modern/internals/getScale.js

@@ -1,4 +1,4 @@
-import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from 'd3-scale';
+import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from '@mui/x-charts-vendor/d3-scale';
 export function getScale(scaleType, domain, range) {
   switch (scaleType) {
     case 'log':

package/modern/internals/index.js

@@ -27,7 +27,7 @@ export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/ColorProvider';
 export * from '../context/InteractionProvider';
-export * from '../context/SeriesContextProvider';
+export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 // series configuration
 export * from '../models/seriesType/config';

package/modern/internals/stackSeries.js

@@ -1,4 +1,4 @@
-import { stackOrderAppearance as d3StackOrderAppearance, stackOrderAscending as d3StackOrderAscending, stackOrderDescending as d3StackOrderDescending, stackOrderInsideOut as d3StackOrderInsideOut, stackOrderNone as d3StackOrderNone, stackOrderReverse as d3StackOrderReverse, stackOffsetExpand as d3StackOffsetExpand, stackOffsetDiverging as d3StackOffsetDiverging, stackOffsetNone as d3StackOffsetNone, stackOffsetSilhouette as d3StackOffsetSilhouette, stackOffsetWiggle as d3StackOffsetWiggle } from 'd3-shape';
+import { stackOrderAppearance as d3StackOrderAppearance, stackOrderAscending as d3StackOrderAscending, stackOrderDescending as d3StackOrderDescending, stackOrderInsideOut as d3StackOrderInsideOut, stackOrderNone as d3StackOrderNone, stackOrderReverse as d3StackOrderReverse, stackOffsetExpand as d3StackOffsetExpand, stackOffsetDiverging as d3StackOffsetDiverging, stackOffsetNone as d3StackOffsetNone, stackOffsetSilhouette as d3StackOffsetSilhouette, stackOffsetWiggle as d3StackOffsetWiggle } from '@mui/x-charts-vendor/d3-shape';
 export const StackOrder = {
   /**
    * Series order such that the earliest series (according to the maximum value) is at the bottom.

package/modern/internals/useAnimatedPath.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { interpolateString } from 'd3-interpolate';
+import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
 import { useSpring, to } from '@react-spring/web';
 function usePrevious(value) {
   const ref = React.useRef(null);

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.11.0",
+  "version": "7.12.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,19 +29,14 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.8",
-    "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.16.2",
-    "@mui/utils": "^5.16.2",
-    "@react-spring/rafz": "^9.7.3",
-    "@react-spring/web": "^9.7.3",
+    "@babel/runtime": "^7.25.0",
+    "@mui/system": "^5.16.5",
+    "@mui/utils": "^5.16.5",
+    "@react-spring/rafz": "^9.7.4",
+    "@react-spring/web": "^9.7.4",
     "clsx": "^2.1.1",
-    "d3-color": "^3.1.0",
-    "d3-delaunay": "^6.0.4",
-    "d3-interpolate": "^3.0.1",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "prop-types": "^15.8.1"
+    "prop-types": "^15.8.1",
+    "@mui/x-charts-vendor": "7.12.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -58,18 +53,6 @@
       "optional": true
     }
   },
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./esm/index.js",
-      "default": "./esm/index.js"
-    },
-    "./*": {
-      "types": "./*/index.d.ts",
-      "import": "./esm/*/index.js",
-      "default": "./esm/*/index.js"
-    }
-  },
   "engines": {
     "node": ">=14.0.0"
   },

package/context/SeriesContextProvider.js

@@ -1,81 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SeriesContext = void 0;
-exports.SeriesContextProvider = SeriesContextProvider;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _defaultizeColor = require("../internals/defaultizeColor");
-var _colorPalettes = require("../colorPalettes");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const SeriesContext = exports.SeriesContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {}
-});
-if (process.env.NODE_ENV !== 'production') {
-  SeriesContext.displayName = 'SeriesContext';
-}
-/**
- * This methods is the interface between what the developer is providing and what components receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
- * It also add defaultized values such as the ids, colors
- * @param series The array of series provided by devs
- * @param colors The color palette used to defaultize series colors
- * @returns An object structuring all the series by type.
- */
-const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
-  // Group series by type
-  const seriesGroups = {};
-  series.forEach((seriesData, seriesIndex) => {
-    const {
-      id = `auto-generated-id-${seriesIndex}`,
-      type
-    } = seriesData;
-    if (seriesGroups[type] === undefined) {
-      seriesGroups[type] = {
-        series: {},
-        seriesOrder: []
-      };
-    }
-    if (seriesGroups[type]?.series[id] !== undefined) {
-      throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
-    }
-    seriesGroups[type].series[id] = (0, _extends2.default)({
-      id
-    }, (0, _defaultizeColor.defaultizeColor)(seriesData, seriesIndex, colors));
-    seriesGroups[type].seriesOrder.push(id);
-  });
-  const formattedSeries = {};
-  // Apply formatter on a type group
-  Object.keys(seriesFormatters).forEach(type => {
-    const group = seriesGroups[type];
-    if (group !== undefined) {
-      formattedSeries[type] = seriesFormatters[type]?.(group, dataset) ?? seriesGroups[type];
-    }
-  });
-  return formattedSeries;
-};
-function SeriesContextProvider(props) {
-  const {
-    series,
-    dataset,
-    colors = _colorPalettes.blueberryTwilightPalette,
-    seriesFormatters,
-    children
-  } = props;
-  const theme = (0, _styles.useTheme)();
-  const formattedSeries = React.useMemo(() => ({
-    isInitialized: true,
-    data: preprocessSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, seriesFormatters, dataset)
-  }), [series, colors, theme.palette.mode, seriesFormatters, dataset]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SeriesContext.Provider, {
-    value: formattedSeries,
-    children: children
-  });
-}