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

package/node/LineChart/AreaPlot.js

@@ -13,14 +13,15 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
-var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _getCurve = require("../internals/getCurve");
+var _isBandScale = require("../internals/isBandScale");
 var _constants = require("../constants");
-var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 const AreaPlotRoot = (0, _styles.styled)('g', {
@@ -34,7 +35,15 @@ const AreaPlotRoot = (0, _styles.styled)('g', {
 });
 const useAggregatedData = () => {
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _useAxis.useYAxes)();
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
 
   // This memo prevents odd line chart behavior when hydrating.
   const allData = React.useMemo(() => {
@@ -45,12 +54,6 @@ const useAggregatedData = () => {
       series,
       stackingGroups
     } = seriesData;
-    const {
-      xAxis,
-      yAxis,
-      xAxisIds,
-      yAxisIds
-    } = axisData;
     const defaultXAxisId = xAxisIds[0];
     const defaultYAxisId = yAxisIds[0];
     return stackingGroups.flatMap(({
@@ -64,12 +67,15 @@ const useAggregatedData = () => {
           stackedData,
           data,
           connectNulls,
-          baseline
+          baseline,
+          curve,
+          strictStepCurve
         } = series[seriesId];
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const xScale = xAxis[xAxisId].scale;
+        const xPosition = (0, _useScale.getValueToPositionMapper)(xScale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
-        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
             throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
@@ -78,7 +84,42 @@ const useAggregatedData = () => {
             throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
-        const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const areaPath = (0, _d3Shape.area)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y0(d => {
           if (typeof baseline === 'number') {
             return yScale(baseline);
           }
@@ -94,21 +135,15 @@ const useAggregatedData = () => {
           }
           return value;
         }).y1(d => d.y && yScale(d.y[1]));
-        const curve = (0, _getCurve.default)(series[seriesId].curve);
-        const formattedData = xData?.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        })) ?? [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        const d = areaPath.curve(curve)(d3Data) || '';
+        const d = areaPath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
         return (0, _extends2.default)({}, series[seriesId], {
-          gradientUsed,
+          gradientId,
           d,
           seriesId
         });
       });
     });
-  }, [seriesData, axisData]);
+  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
   return allData;
 };
 
@@ -132,7 +167,6 @@ function AreaPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
-  const getGradientId = (0, _ChartsAxesGradients.useChartGradient)();
   const completedData = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({}, other, {
     children: completedData.map(({
@@ -140,12 +174,12 @@ function AreaPlot(props) {
       seriesId,
       color,
       area,
-      gradientUsed
+      gradientId
     }) => !!area && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaElement.AreaElement, {
       id: seriesId,
       d: d,
       color: color,
-      gradientId: gradientUsed && getGradientId(...gradientUsed),
+      gradientId: gradientId,
       slots: slots,
       slotProps: slotProps,
       onClick: onItemClick && (event => onItemClick(event, {

package/node/LineChart/CircleMarkElement.js

@@ -12,16 +12,15 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _warning = require("@mui/x-internals/warning");
 var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _context = require("../context");
+var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _markElementClasses = require("./markElementClasses");
-var _useSelector = require("../internals/useSelector");
-var _InteractionSelectors = require("../context/InteractionSelectors");
-var _useStore = require("../internals/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
 /**
  * The line mark element that only render circle for performance improvement.
  *
@@ -43,23 +42,19 @@ function CircleMarkElement(props) {
       color,
       dataIndex,
       onClick,
-      skipAnimation,
-      shape
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  if (shape !== 'circle') {
-    (0, _warning.warnOnce)([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
-  }
   const theme = (0, _styles.useTheme)();
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
   const {
     isFaded,
     isHighlighted
-  } = (0, _context.useItemHighlighted)({
+  } = (0, _useItemHighlighted.useItemHighlighted)({
     seriesId: id
   });
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const position = (0, _web.useSpring)({
     to: {
       x,
@@ -76,6 +71,7 @@ function CircleMarkElement(props) {
   };
   const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.circle, (0, _extends2.default)({}, other, {
+    // @ts-expect-error
     cx: position.x,
     cy: position.y,
     r: 5,

package/node/LineChart/LineChart.js

@@ -13,7 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _AreaPlot = require("./AreaPlot");
 var _LinePlot = require("./LinePlot");
-var _ChartContainer = require("../ChartContainer");
 var _MarkPlot = require("./MarkPlot");
 var _ChartsAxis = require("../ChartsAxis/ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
@@ -25,6 +24,10 @@ var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _useLineChartProps = require("./useLineChartProps");
+var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
+var _ChartDataProvider = require("../ChartDataProvider");
+var _ChartsSurface = require("../ChartsSurface");
+var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -42,6 +45,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     name: 'MuiLineChart'
   });
   const {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,
@@ -57,16 +61,22 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     legendProps,
     children
   } = (0, _useLineChartProps.useLineChartProps)(props);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({
-    ref: ref
-  }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      "data-drawing-container": true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          "data-drawing-container": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
@@ -74,6 +84,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object
+  }),
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -111,10 +124,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
-  /**
-   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
-   */
-  experimentalMarkRendering: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -131,12 +140,18 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   hideLegend: _propTypes.default.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -152,7 +167,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -212,6 +226,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    */
   slots: _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]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * Indicate which axis to display the top of the charts.
@@ -254,7 +269,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -265,7 +279,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -308,7 +321,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -319,7 +331,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/LineChart/LineElement.js

@@ -19,7 +19,7 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _AnimatedLine = require("./AnimatedLine");
-var _context = require("../context");
+var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 function getLineElementUtilityClass(slot) {
@@ -63,7 +63,7 @@ function LineElement(props) {
   const {
     isFaded,
     isHighlighted
-  } = (0, _context.useItemHighlighted)({
+  } = (0, _useItemHighlighted.useItemHighlighted)({
     seriesId: id
   });
   const ownerState = {

package/node/LineChart/LineHighlightElement.js

@@ -13,12 +13,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _getSymbol = require("../internals/getSymbol");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape"];
 function getHighlightElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
 }
@@ -33,7 +35,18 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getHighlightElementUtilityClass, classes);
 };
-const HighlightElement = (0, _styles.styled)('circle', {
+const HighlightPathElement = (0, _styles.styled)('path', {
+  name: 'MuiHighlightElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
+  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
+  fill: ownerState.color
+}));
+const HighlightCircleElement = (0, _styles.styled)('circle', {
   name: 'MuiHighlightElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -60,7 +73,8 @@ function LineHighlightElement(props) {
       y,
       id,
       classes: innerClasses,
-      color
+      color,
+      shape
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -71,14 +85,19 @@ function LineHighlightElement(props) {
     y
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightElement, (0, _extends2.default)({
-    pointerEvents: "none",
-    ownerState: ownerState,
-    className: classes.root,
+  const Element = shape === 'circle' ? HighlightCircleElement : HighlightPathElement;
+  const additionalProps = shape === 'circle' ? {
     cx: 0,
     cy: 0,
     r: other.r === undefined ? 5 : other.r
-  }, other));
+  } : {
+    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])()
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
+    pointerEvents: "none",
+    ownerState: ownerState,
+    className: classes.root
+  }, additionalProps, other));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -86,5 +105,6 @@ process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
 } : void 0;

package/node/LineChart/LineHighlightPlot.js

@@ -11,16 +11,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useStore = require("../internals/useStore");
-var _useSelector = require("../internals/useSelector");
-var _CartesianProvider = require("../context/CartesianProvider");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
-var _useDrawingArea = require("../hooks/useDrawingArea");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _ChartProvider = require("../context/ChartProvider");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 /**
@@ -40,10 +40,19 @@ function LineHighlightPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _useAxis.useYAxes)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const highlightedIndex = xAxisIdentifier?.index;
   if (highlightedIndex === undefined) {
     return null;
@@ -55,12 +64,6 @@ function LineHighlightPlot(props) {
     series,
     stackingGroups
   } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const Element = slots?.lineHighlight ?? _LineHighlightElement.LineHighlightElement;
@@ -74,7 +77,8 @@ function LineHighlightPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          disableHighlight
+          disableHighlight,
+          shape = 'circle'
         } = series[seriesId];
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
@@ -88,7 +92,7 @@ function LineHighlightPlot(props) {
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
 
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x,
           y
         })) {
@@ -99,7 +103,8 @@ function LineHighlightPlot(props) {
           id: seriesId,
           color: colorGetter(highlightedIndex),
           x: x,
-          y: y
+          y: y,
+          shape: shape
         }, slotProps?.lineHighlight), `${seriesId}`);
       });
     })