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

package/node/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -0,0 +1,57 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChartsXHighlight;
+var React = _interopRequireWildcard(require("react"));
+var _useScale = require("../hooks/useScale");
+var _isBandScale = require("../internals/isBandScale");
+var _useSelector = require("../internals/useSelector");
+var _useStore = require("../internals/useStore");
+var _InteractionSelectors = require("../context/InteractionSelectors");
+var _hooks = require("../hooks");
+var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */function ChartsXHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const {
+    top,
+    height
+  } = (0, _hooks.useDrawingArea)();
+  const xScale = (0, _useScale.useXScale)();
+  const store = (0, _useStore.useStore)();
+  const axisX = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+  const isBandScaleX = type === 'band' && axisX !== null && (0, _isBandScale.isBandScale)(xScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isError = isBandScaleX && xScale(axisX.value) === undefined;
+    if (isError) {
+      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
+    // @ts-expect-error, xScale value is checked in the statement above
+    , {
+      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
+      }
+    }), type === 'line' && axisX !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      d: `M ${getXPosition(axisX.value)} ${top} L ${getXPosition(axisX.value)} ${top + height}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    })]
+  });
+}

package/node/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -0,0 +1,57 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChartsYHighlight;
+var React = _interopRequireWildcard(require("react"));
+var _useScale = require("../hooks/useScale");
+var _isBandScale = require("../internals/isBandScale");
+var _useSelector = require("../internals/useSelector");
+var _useStore = require("../internals/useStore");
+var _InteractionSelectors = require("../context/InteractionSelectors");
+var _hooks = require("../hooks");
+var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */function ChartsYHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const {
+    left,
+    width
+  } = (0, _hooks.useDrawingArea)();
+  const yScale = (0, _useScale.useYScale)();
+  const store = (0, _useStore.useStore)();
+  const axisY = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionYAxis);
+  const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+  const isBandScaleY = type === 'band' && axisY !== null && (0, _isBandScale.isBandScale)(yScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isError = isBandScaleY && yScale(axisY.value) === undefined;
+    if (isError) {
+      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [isBandScaleY && yScale(axisY.value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      d: `M ${left} ${
+      // @ts-expect-error, yScale value is checked in the statement above
+      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
+      }
+    }), type === 'line' && axisY !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      d: `M ${left} ${getYPosition(axisY.value)} L ${left + width} ${getYPosition(axisY.value)}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    })]
+  });
+}

package/node/ChartsAxisHighlight/chartsAxisHighlightClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsAxisHighlightClasses = void 0;
+exports.getAxisHighlightUtilityClass = getAxisHighlightUtilityClass;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getAxisHighlightUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsAxisHighlight', slot);
+}
+const chartsAxisHighlightClasses = exports.chartsAxisHighlightClasses = (0, _generateUtilityClasses.default)('MuiChartsAxisHighlight', ['root']);

package/node/ChartsAxisHighlight/index.js

@@ -13,4 +13,37 @@ Object.keys(_ChartsAxisHighlight).forEach(function (key) {
       return _ChartsAxisHighlight[key];
     }
   });
+});
+var _chartsAxisHighlightClasses = require("./chartsAxisHighlightClasses");
+Object.keys(_chartsAxisHighlightClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsAxisHighlightClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsAxisHighlightClasses[key];
+    }
+  });
+});
+var _ChartsAxisHighlight2 = require("./ChartsAxisHighlight.types");
+Object.keys(_ChartsAxisHighlight2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsAxisHighlight2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsAxisHighlight2[key];
+    }
+  });
+});
+var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
+Object.keys(_ChartsAxisHighlightPath).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsAxisHighlightPath[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsAxisHighlightPath[key];
+    }
+  });
 });

package/node/ChartsGrid/ChartsGrid.js

@@ -16,7 +16,7 @@ var _styles = require("@mui/material/styles");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _chartsGridClasses = require("./chartsGridClasses");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _styledCommonents = require("./styledCommonents");
+var _styledComponents = require("./styledComponents");
 var _ChartsVerticalGrid = require("./ChartsVerticalGrid");
 var _ChartsHorizontalGrid = require("./ChartsHorizontalGrid");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -60,7 +60,7 @@ function ChartsGrid(inProps) {
   const classes = useUtilityClasses(props);
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledCommonents.GridRoot, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledComponents.GridRoot, (0, _extends2.default)({}, other, {
     className: classes.root,
     children: [vertical && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVerticalGrid.ChartsGridVertical, {
       axis: verticalAxis,

package/node/ChartsGrid/ChartsHorizontalGrid.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsGridHorizontal = ChartsGridHorizontal;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
-var _styledCommonents = require("./styledCommonents");
+var _styledComponents = require("./styledComponents");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -30,14 +30,14 @@ function ChartsGridHorizontal(props) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: yTicks.map(({
-      formattedValue,
+      value,
       offset
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledCommonents.GridLine, {
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
       y1: offset,
       y2: offset,
       x1: drawingArea.left,
       x2: drawingArea.left + drawingArea.width,
       className: classes.horizontalLine
-    }, `horizontal-${formattedValue}`))
+    }, `horizontal-${value}`))
   });
 }

package/node/ChartsGrid/ChartsVerticalGrid.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsGridVertical = ChartsGridVertical;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
-var _styledCommonents = require("./styledCommonents");
+var _styledComponents = require("./styledComponents");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -30,14 +30,14 @@ function ChartsGridVertical(props) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: xTicks.map(({
-      formattedValue,
+      value,
       offset
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledCommonents.GridLine, {
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
       y1: drawingArea.top,
       y2: drawingArea.top + drawingArea.height,
       x1: offset,
       x2: offset,
       className: classes.verticalLine
-    }, `vertical-${formattedValue}`))
+    }, `vertical-${value}`))
   });
 }

package/node/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -9,10 +9,10 @@ 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/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsOnAxisClickHandler(props) {
   const {
@@ -20,9 +20,7 @@ function ChartsOnAxisClickHandler(props) {
   } = props;
   const svgRef = (0, _hooks.useSvgRef)();
   const series = (0, _useSeries.useSeries)();
-  const {
-    axis
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const store = (0, _useStore.useStore)();
   const {
     xAxisIds,
     xAxis,
@@ -36,9 +34,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 +67,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,10 +12,15 @@ 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 _hooks = require("../hooks");
+var _SvgRefProvider = require("../context/SvgRefProvider");
+var _SizeProvider = require("../context/SizeProvider");
 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'
 })(() => ({
@@ -24,40 +29,50 @@ const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
   touchAction: 'none'
 }));
 const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
-  const props = (0, _styles.useThemeProps)({
+  const {
+    width,
+    height,
+    left,
+    right,
+    top,
+    bottom
+  } = (0, _hooks.useDrawingArea)();
+  const {
+    hasIntrinsicSize
+  } = (0, _SizeProvider.useSize)();
+  const surfaceRef = (0, _SvgRefProvider.useSurfaceRef)();
+  const handleRef = (0, _useForkRef.default)(surfaceRef, 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,
+    } = themeProps,
+    other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
+  const svgWidth = width + left + right;
+  const svgHeight = height + top + bottom;
+  const svgView = {
+    width: svgWidth,
+    height: svgHeight,
     x: 0,
     y: 0
-  }, viewBox);
+  };
   (0, _useAxisEvents.useAxisEvents)(disableAxisListener);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartChartsSurfaceStyles, (0, _extends2.default)({
-    width: width,
-    height: height,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSurfaceStyles, (0, _extends2.default)({
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref,
     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 +89,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/ChartTooltip.types.js

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

package/node/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,87 +1,97 @@
 "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 _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 tootlipData = (0, _useAxisTooltip.useAxisTooltip)();
+  const xAxis = (0, _hooks.useXAxis)();
+  const yAxis = (0, _hooks.useYAxis)();
+  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
+  if (tootlipData === 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
+  } = tootlipData;
+  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, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+            colSpan: 3,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: axisFormattedValue
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: seriesItems.map(({
+          seriesId,
+          color,
+          formattedValue,
+          formattedLabel
+        }) => {
+          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)(_ChartsTooltipTable.ChartsTooltipMark, {
+                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;