@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/ChartsLegend/useAxis.js

@@ -1,14 +1,12 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxis = useAxis;
-var React = _interopRequireWildcard(require("react"));
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-var _useCartesianContext = require("../context/CartesianProvider/useCartesianContext");
+var _useZAxis = require("../hooks/useZAxis");
+var _useAxis = require("../hooks/useAxis");
 /**
  * Helper to select an axis definition according to its direction and id.
  */
@@ -18,14 +16,16 @@ function useAxis({
 }) {
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
     yAxisIds
-  } = (0, _useCartesianContext.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxes)();
   switch (axisDirection) {
     case 'x':
       {

package/node/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -9,10 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsOnAxisClickHandler = ChartsOnAxisClickHandler;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _useSeries = require("../hooks/useSeries");
 var _hooks = require("../hooks");
-var _CartesianProvider = require("../context/CartesianProvider");
+var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsOnAxisClickHandler(props) {
   const {
@@ -20,15 +19,15 @@ function ChartsOnAxisClickHandler(props) {
   } = props;
   const svgRef = (0, _hooks.useSvgRef)();
   const series = (0, _useSeries.useSeries)();
+  const store = (0, _useStore.useStore)();
   const {
-    axis
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null || !onAxisClick) {
@@ -36,9 +35,13 @@ function ChartsOnAxisClickHandler(props) {
     }
     const handleMouseClick = event => {
       event.preventDefault();
-      const isXaxis = axis.x && axis.x.index !== -1;
+      const {
+        x: axisX,
+        y: axisY
+      } = store.value.interaction.axis;
+      const isXaxis = axisX && axisX.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-      const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
+      const dataIndex = isXaxis ? axisX && axisX.index : axisY && axisY.index;
       if (dataIndex == null) {
         return;
       }
@@ -65,7 +68,7 @@ function ChartsOnAxisClickHandler(props) {
     return () => {
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [axis.x, axis.y, onAxisClick, series, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
+  }, [onAxisClick, series, store, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});

package/node/ChartsSurface/ChartsSurface.js

@@ -12,52 +12,88 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useAxisEvents = require("../hooks/useAxisEvents");
+var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
+var _useSvgRef = require("../hooks/useSvgRef");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
-const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
+const _excluded = ["children", "disableAxisListener", "className", "title", "desc"];
+const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
-})(() => ({
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
+
+/**
+ * It provides the drawing area for the chart elements.
+ * It is the root `<svg>` of all the chart elements.
+ *
+ * It also provides the `title` and `desc` elements for the chart.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+ */
 const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
-  const props = (0, _styles.useThemeProps)({
+  const store = (0, _useStore.useStore)();
+  const {
+    width: svgWidth,
+    height: svgHeight
+  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartContainerSize);
+  const {
+    width: propsWidth,
+    height: propsHeight
+  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const handleRef = (0, _useForkRef.default)(svgRef, ref);
+  const themeProps = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiChartsSurface'
   });
   const {
       children,
-      width,
-      height,
-      viewBox,
       disableAxisListener = false,
       className,
       title,
       desc
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const svgView = (0, _extends2.default)({
-    width,
-    height,
-    x: 0,
-    y: 0
-  }, viewBox);
+    } = themeProps,
+    other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
+  const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
   (0, _useAxisEvents.useAxisEvents)(disableAxisListener);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartChartsSurfaceStyles, (0, _extends2.default)({
-    width: width,
-    height: height,
-    viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSurfaceStyles, (0, _extends2.default)({
+    ownerState: {
+      width: propsWidth,
+      height: propsHeight
+    },
+    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: className
   }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+    ref: handleRef,
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
       children: title
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("desc", {
+    }), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("desc", {
       children: desc
-    }), children]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), hasIntrinsicSize && children]
   }));
 });
 process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
@@ -74,20 +110,6 @@ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
-  /**
-   * The height of the chart in px.
-   */
-  height: _propTypes.default.number.isRequired,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  title: _propTypes.default.string,
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
-  /**
-   * The width of the chart in px.
-   */
-  width: _propTypes.default.number.isRequired
+  title: _propTypes.default.string
 } : void 0;

package/node/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,87 +1,102 @@
 "use strict";
+'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsAxisTooltipContent = ChartsAxisTooltipContent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _CartesianProvider = require("../context/CartesianProvider");
-var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
-var _isCartesian = require("../internals/isCartesian");
-var _useSeries = require("../hooks/useSeries");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
+var _ChartsTooltipTable = require("./ChartsTooltipTable");
+var _useAxisTooltip = require("./useAxisTooltip");
+var _hooks = require("../hooks");
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * @ignore - internal component.
- */
 function ChartsAxisTooltipContent(props) {
   const {
-    content,
-    contentProps,
-    axisData,
-    sx,
-    classes
+    classes: propClasses,
+    sx
   } = props;
-  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 {
-    xAxisIds,
-    xAxis,
-    yAxisIds,
-    yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+  const tooltipData = (0, _useAxisTooltip.useAxisTooltip)();
+  const xAxis = (0, _hooks.useXAxis)();
+  const yAxis = (0, _hooks.useYAxis)();
+  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
+  if (tooltipData === null) {
+    return null;
+  }
   const {
-    zAxisIds,
-    zAxis
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
-  const series = (0, _useSeries.useSeries)();
-  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
-  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-  const relevantSeries = React.useMemo(() => {
-    const rep = [];
-    Object.keys(series).filter(_isCartesian.isCartesianSeriesType).forEach(seriesType => {
-      series[seriesType].seriesOrder.forEach(seriesId => {
-        const item = series[seriesType].series[seriesId];
-        const providedXAxisId = item.xAxisId;
-        const providedYAxisId = item.yAxisId;
-        const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
-        if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-          const seriesToAdd = series[seriesType].series[seriesId];
-          const xAxisId = providedXAxisId ?? xAxisIds[0];
-          const yAxisId = providedYAxisId ?? yAxisIds[0];
-          const zAxisId = seriesToAdd.zAxisId ?? zAxisIds[0];
-          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-          rep.push((0, _extends2.default)({}, seriesToAdd, {
-            getColor
-          }));
-        }
-      });
-    });
-    return rep;
-  }, [USED_AXIS_ID, colorProcessors, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
-  const relevantAxis = React.useMemo(() => {
-    return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
-  }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
-  const Content = content ?? _DefaultChartsAxisTooltipContent.DefaultChartsAxisTooltipContent;
-  const chartTooltipContentProps = (0, _useSlotProps.default)({
-    elementType: Content,
-    externalSlotProps: contentProps,
-    additionalProps: {
-      axisData,
-      series: relevantSeries,
-      axis: relevantAxis,
-      dataIndex,
-      axisValue,
-      sx,
-      classes
-    },
-    ownerState: {}
+    axisDirection,
+    axisValue,
+    axisFormattedValue,
+    seriesItems
+  } = tooltipData;
+  const axis = axisDirection === 'x' ? xAxis : yAxis;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
+    sx: sx,
+    className: classes.paper,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
+      className: classes.table,
+      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
+          className: classes.row,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            colSpan: 3,
+            className: (0, _clsx.default)(classes.cell, classes.axisValueCell),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: axisFormattedValue
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: seriesItems.map(({
+          seriesId,
+          color,
+          formattedValue,
+          formattedLabel,
+          markType
+        }) => {
+          if (formattedValue == null) {
+            return null;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+            className: classes.row,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: (0, _clsx.default)(classes.markCell, classes.cell),
+              children: color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+                type: markType,
+                color: color,
+                className: classes.mark
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: (0, _clsx.default)(classes.labelCell, classes.cell),
+              children: formattedLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                children: formattedLabel
+              }) : null
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: (0, _clsx.default)(classes.valueCell, classes.cell),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                children: formattedValue
+              })
+            })]
+          }, seriesId);
+        })
+      })]
+    })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, (0, _extends2.default)({}, chartTooltipContentProps));
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,59 +1,71 @@
 "use strict";
+'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
-var _useSeries = require("../hooks/useSeries");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
+var _useItemTooltip = require("./useItemTooltip");
+var _ChartsTooltipTable = require("./ChartsTooltipTable");
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * @ignore - internal component.
- */
 function ChartsItemTooltipContent(props) {
   const {
-    content,
-    itemData,
-    sx,
-    classes,
-    contentProps
+    classes: propClasses,
+    sx
   } = props;
-  const series = (0, _useSeries.useSeries)()[itemData.type].series[itemData.seriesId];
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  const tooltipData = (0, _useItemTooltip.useItemTooltip)();
+  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
+  if (!tooltipData) {
+    return null;
+  }
   const {
-    zAxis,
-    zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
-  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
-  const xAxisId = series.xAxisId ?? xAxisIds[0];
-  const yAxisId = series.yAxisId ?? yAxisIds[0];
-  const zAxisId = series.zAxisId ?? zAxisIds[0];
-  const getColor = colorProcessors[series.type]?.(series, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-  const Content = content ?? _DefaultChartsItemTooltipContent.DefaultChartsItemTooltipContent;
-  const chartTooltipContentProps = (0, _useSlotProps.default)({
-    elementType: Content,
-    externalSlotProps: contentProps,
-    additionalProps: {
-      itemData,
-      series,
-      sx,
-      classes,
-      getColor
-    },
-    ownerState: {}
+    color,
+    label,
+    formattedValue,
+    markType
+  } = tooltipData;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
+    sx: sx,
+    className: classes.paper,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipTable, {
+      className: classes.table,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+          className: classes.row,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes.markCell, classes.cell),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+              type: markType,
+              color: color,
+              className: classes.mark
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes.labelCell, classes.cell),
+            children: label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes.valueCell, classes.cell),
+            children: formattedValue
+          })]
+        })
+      })
+    })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, (0, _extends2.default)({}, chartTooltipContentProps));
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;