@mui/x-charts 7.14.0 → 7.15.0

package/models/index.js

@@ -1,38 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _seriesType = require("./seriesType");
-Object.keys(_seriesType).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _seriesType[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _seriesType[key];
-    }
-  });
-});
-var _layout = require("./layout");
-Object.keys(_layout).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _layout[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _layout[key];
-    }
-  });
-});
-var _stacking = require("./stacking");
-Object.keys(_stacking).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _stacking[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _stacking[key];
-    }
-  });
-});
+export * from './seriesType';
+export * from './layout';
+export * from './stacking';
+export {};

package/models/layout.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/models/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/models/index.js",
   "types": "./index.d.ts"
 }

package/models/seriesType/bar.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/common.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/config.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/index.js

@@ -1,71 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  isDefaultizedBarSeries: true,
-  isBarSeries: true
-};
-exports.isBarSeries = isBarSeries;
-exports.isDefaultizedBarSeries = isDefaultizedBarSeries;
-var _line = require("./line");
-Object.keys(_line).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _line[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _line[key];
-    }
-  });
-});
-var _bar = require("./bar");
-Object.keys(_bar).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _bar[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _bar[key];
-    }
-  });
-});
-var _scatter = require("./scatter");
-Object.keys(_scatter).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _scatter[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _scatter[key];
-    }
-  });
-});
-var _pie = require("./pie");
-Object.keys(_pie).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _pie[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _pie[key];
-    }
-  });
-});
 // Series definition
 
 // item identifier
 
+export * from './line';
+export * from './bar';
+export * from './scatter';
+export * from './pie';
 // Helpers
 
-function isDefaultizedBarSeries(series) {
+export function isDefaultizedBarSeries(series) {
   return series.type === 'bar';
 }
-function isBarSeries(series) {
+export function isBarSeries(series) {
   return series.type === 'bar';
 }

package/models/seriesType/line.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/pie.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/scatter.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/stacking.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/z-axis.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/modern/BarChart/BarChart.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from './BarPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
@@ -24,7 +25,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
+const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiBarChart'
+  });
   const {
     chartContainerProps,
     barPlotProps,

package/modern/BarChart/BarLabel/BarLabel.js

@@ -29,12 +29,12 @@ export const BarLabelComponent = styled(animated.text, {
     opacity: 0.3
   }
 }));
-function BarLabel(props) {
-  const themeProps = useThemeProps({
-    props,
+function BarLabel(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiBarLabel'
   });
-  const otherProps = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  const otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps));
 }
 process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {

package/modern/ChartsGrid/ChartsGrid.js

@@ -49,24 +49,24 @@ const useUtilityClasses = ({
  *
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
-function ChartsGrid(props) {
-  const themeProps = useThemeProps({
-    props,
+function ChartsGrid(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsGrid'
   });
   const drawingArea = useDrawingArea();
   const {
       vertical,
       horizontal
-    } = themeProps,
-    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     xAxis,
     xAxisIds,
     yAxis,
     yAxisIds
   } = useCartesianContext();
-  const classes = useUtilityClasses(themeProps);
+  const classes = useUtilityClasses(props);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];
   const {

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import ChartsContinuousGradient from '../internals/components/ChartsAxesGradients/ChartsContinuousGradient';
 import { useChartId, useDrawingArea } from '../hooks';
 import { getScale } from '../internals/getScale';
@@ -187,6 +188,7 @@ const defaultLabelFormatter = ({
 }) => formattedValue;
 function ContinuousColorLegend(props) {
   const theme = useTheme();
+  const isRtl = useRtl();
   const {
     id: idProp,
     minLabel = defaultLabelFormatter,
@@ -204,7 +206,6 @@ function ContinuousColorLegend(props) {
   } = props;
   const chartId = useChartId();
   const id = idProp ?? `gradient-legend-${chartId}`;
-  const isRTL = theme.direction === 'rtl';
   const axisItem = useAxis({
     axisDirection,
     axisId
@@ -255,7 +256,7 @@ function ContinuousColorLegend(props) {
 
   // Place bar and texts
 
-  const barBox = direction === 'column' || isRTL && direction === 'row' ? {
+  const barBox = direction === 'column' || isRtl && direction === 'row' ? {
     width: thickness,
     height: size
   } : {

package/modern/ChartsLegend/LegendPerItem.js

@@ -4,6 +4,7 @@ const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { ChartsText } from '../ChartsText';
 import { getWordsByLines } from '../internals/getWordsByLines';
 import { legendItemPlacements } from './legendItemsPlacement';
@@ -54,7 +55,7 @@ export function LegendPerItem(props) {
     labelStyle: inLabelStyle
   } = props;
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
@@ -121,10 +122,10 @@ export function LegendPerItem(props) {
         positionY
       }) => /*#__PURE__*/_jsxs("g", {
         className: classes?.series,
-        transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
+        transform: `translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
         children: [/*#__PURE__*/_jsx("rect", {
           className: classes?.mark,
-          x: isRTL ? -itemMarkWidth : 0,
+          x: isRtl ? -itemMarkWidth : 0,
           y: -itemMarkHeight / 2,
           width: itemMarkWidth,
           height: itemMarkHeight,
@@ -132,7 +133,7 @@ export function LegendPerItem(props) {
         }), /*#__PURE__*/_jsx(ChartsText, {
           style: labelStyle,
           text: label,
-          x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
+          x: (isRtl ? -1 : 1) * (itemMarkWidth + markGap),
           y: 0
         })]
       }, id))

package/{esm → modern/ChartsSurface}/ChartsSurface.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useAxisEvents } from './hooks/useAxisEvents';
+import { useAxisEvents } from '../hooks/useAxisEvents';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
@@ -14,7 +14,11 @@ const ChartChartsSurfaceStyles = styled('svg', {
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
-const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
+const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiChartsSurface'
+  });
   const {
       children,
       width,

package/modern/ChartsSurface/index.js

@@ -0,0 +1 @@
+export * from './ChartsSurface';

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -19,7 +19,7 @@ function ChartsAxisTooltipContent(props) {
     sx,
     classes
   } = props;
-  const isXaxis = (axisData.x && axisData.x.index) !== undefined;
+  const isXaxis = axisData.x && axisData.x.index !== -1;
   const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
   const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
   const {

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
@@ -84,7 +85,7 @@ function ChartsYAxis(inProps) {
     sx
   } = defaultizedProps;
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
@@ -113,7 +114,7 @@ function ChartsYAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
-  const revertAnchor = !isRTL && position === 'right' || isRTL && position !== 'right';
+  const revertAnchor = !isRtl && position === 'right' || isRtl && position !== 'right';
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,

package/modern/LineChart/LineChart.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { AreaPlot } from './AreaPlot';
 import { LinePlot } from './LinePlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
@@ -26,7 +27,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
+const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiLineChart'
+  });
   const {
     chartContainerProps,
     axisClickHandlerProps,

package/modern/LineChart/MarkElement.js

@@ -76,8 +76,10 @@ function MarkElement(props) {
     axis
   } = React.useContext(InteractionContext);
   const position = useSpring({
-    x,
-    y,
+    to: {
+      x,
+      y
+    },
     immediate: skipAnimation
   });
   const ownerState = {

package/modern/PieChart/PieChart.js

@@ -3,6 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "axisHighlight", "skipAnimation", "legend", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useThemeProps } from '@mui/material/styles';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
@@ -10,7 +12,6 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
-import { useIsRTL } from '../internals/useIsRTL';
 import { ChartsOverlay } from '../ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
@@ -36,7 +37,11 @@ const defaultRTLMargin = {
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(props, ref) {
+const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPieChart'
+  });
   const {
       xAxis,
       yAxis,
@@ -69,13 +74,13 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(props, ref) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isRTL = useIsRTL();
-  const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
+  const isRtl = useRtl();
+  const margin = _extends({}, isRtl ? defaultRTLMargin : defaultMargin, marginProps);
   const legend = _extends({
     direction: 'column',
     position: {
       vertical: 'middle',
-      horizontal: isRTL ? 'left' : 'right'
+      horizontal: isRtl ? 'left' : 'right'
     }
   }, legendProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {

package/modern/ScatterChart/ScatterChart.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { ScatterPlot } from './ScatterPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
@@ -23,7 +24,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
+const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiScatterChart'
+  });
   const {
     chartContainerProps,
     zAxisProps,

package/modern/hooks/useAxisEvents.js

@@ -44,7 +44,8 @@ export const useAxisEvents = disableAxisListener => {
         const value = scale.invert(mouseValue);
         if (axisData === undefined) {
           return {
-            value
+            value,
+            index: -1
           };
         }
         const valueAsNumber = getAsANumber(value);

package/modern/index.js

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

package/modern/internals/index.js

@@ -21,6 +21,7 @@ export * from './getLabel';
 export * from './getSVGPoint';
 export * from './isDefined';
 export { unstable_cleanupDOM } from './domUtils';
+export * from './getScale';
 
 // contexts
 

package/modern/internals/useAnimatedPath.js

@@ -1,21 +1,25 @@
 import * as React from 'react';
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
-import { useSpring, to } from '@react-spring/web';
+import { useSpring } from '@react-spring/web';
 function usePrevious(value) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
+  const ref = React.useRef({
+    currentPath: value,
+    previousPath: undefined
+  });
+  if (ref.current.currentPath !== value) {
+    ref.current = {
+      currentPath: value,
+      previousPath: ref.current.currentPath
+    };
+  }
   return ref.current;
 }
-
-// Taken from Nivo
 export const useAnimatedPath = (path, skipAnimation) => {
-  const previousPath = usePrevious(path);
-  const interpolator = React.useMemo(() => previousPath ? interpolateString(previousPath, path) : () => path, [previousPath, path]);
-  const {
+  const memoryRef = usePrevious(path);
+  const interpolator = React.useMemo(() => memoryRef.previousPath ? interpolateString(memoryRef.previousPath, memoryRef.currentPath) : () => memoryRef.currentPath, [memoryRef.currentPath, memoryRef.previousPath]);
+  const [{
     value
-  } = useSpring({
+  }] = useSpring({
     from: {
       value: 0
     },
@@ -24,6 +28,6 @@ export const useAnimatedPath = (path, skipAnimation) => {
     },
     reset: true,
     immediate: skipAnimation
-  });
-  return to([value], interpolator);
+  }, [memoryRef.currentPath]);
+  return value.to(interpolator);
 };