@mui/x-charts-pro 8.15.0 → 8.16.0

package/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;

package/ScatterChartPro/ScatterChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.SCATTER_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartClosestPoint, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartClosestPoint, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/esm/BarChartPro/BarChartPro.js

@@ -17,6 +17,7 @@ import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { useBarChartProps } from '@mui/x-charts/internals';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
+import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
 import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
 import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
@@ -77,7 +78,7 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
@@ -1446,7 +1447,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
     })]).isRequired),
-    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.any,
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['wheel']).isRequired
@@ -1458,6 +1459,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['doubleTapReset']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['brush']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/esm/BarChartPro/BarChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<BarChartProPluginSignatures>;

package/esm/BarChartPro/BarChartPro.plugins.js

@@ -1,4 +1,4 @@
 import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const BAR_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
+export const BAR_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc2MTE3NzYwMDAwMA==";
+const releaseInfo = "MTc2MTY5NjAwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/FunnelChart/FunnelPlot.js

@@ -4,13 +4,14 @@ const _excluded = ["onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { cartesianSeriesTypes, useSelector, useStore, isOrdinalScale } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes, useSelector, useStore } from '@mui/x-charts/internals';
 import { FunnelSection } from "./FunnelSection.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
 import { getFunnelCurve } from "./curves/index.js";
 import { FunnelSectionLabel } from "./FunnelSectionLabel.js";
 import { selectorChartXAxis, selectorChartYAxis, selectorFunnelGap } from "./funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js";
+import { createPositionGetter } from "./coordinateMapper.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 cartesianSeriesTypes.addType('funnel');
@@ -43,31 +44,10 @@ const useAggregatedData = () => {
       const yAxisId = currentSeries.yAxisId ?? defaultYAxisId;
       const valueFormatter = currentSeries.valueFormatter;
       const baseScaleConfig = isHorizontal ? xAxis[xAxisId] : yAxis[yAxisId];
-      const isXAxisBand = xAxis[xAxisId].scaleType === 'band';
-      const isYAxisBand = yAxis[yAxisId].scaleType === 'band';
-      const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
-      const xPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
-        if (isOrdinalScale(xScale)) {
-          const position = xScale(bandIdentifier);
-          return useBand ? position + bandWidth : position;
-        }
-        if (isHorizontal) {
-          return xScale(value + (stackOffset || 0)) + bandIndex * gap;
-        }
-        return xScale(value);
-      };
-      const yPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
-        if (isOrdinalScale(yScale)) {
-          const position = yScale(bandIdentifier);
-          return useBand ? position + bandWidth : position;
-        }
-        if (isHorizontal) {
-          return yScale(value);
-        }
-        return yScale(value + (stackOffset || 0)) + bandIndex * gap;
-      };
+      const xPosition = createPositionGetter(xScale, isHorizontal, gap);
+      const yPosition = createPositionGetter(yScale, !isHorizontal, gap);
       const allY = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => yPosition(v.y, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
       const allX = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => xPosition(v.x, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
       const minPoint = {

package/esm/FunnelChart/coordinateMapper.d.ts

@@ -0,0 +1,3 @@
+import { D3Scale } from '@mui/x-charts/internals';
+import { PositionGetter } from "./curves/curve.types.js";
+export declare const createPositionGetter: (scale: D3Scale, isCategoryDirection: boolean, gap: number) => PositionGetter;

package/esm/FunnelChart/coordinateMapper.js

@@ -0,0 +1,11 @@
+import { isOrdinalScale } from '@mui/x-charts/internals';
+export const createPositionGetter = (scale, isCategoryDirection, gap) => (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
+  if (isOrdinalScale(scale)) {
+    const position = scale(bandIdentifier);
+    return useBand ? position + scale.bandwidth() : position;
+  }
+  if (isCategoryDirection) {
+    return scale(value + (stackOffset || 0)) + bandIndex * gap;
+  }
+  return scale(value);
+};

package/esm/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { scaleBand } from '@mui/x-charts-vendor/d3-scale';
-import { getAxisExtrema, isBandScaleConfig, isPointScaleConfig, isContinuousScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter, getDefaultTickNumber } from '@mui/x-charts/internals';
+import { getAxisExtrema, isBandScaleConfig, isPointScaleConfig, isContinuousScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter, getDefaultTickNumber, scaleBand } from '@mui/x-charts/internals';
 export const xRangeGetter = (drawingArea, reverse, removedSpace = 0) => {
   const range = [drawingArea.left, drawingArea.left + drawingArea.width - removedSpace];
   return reverse ? [range[1], range[0]] : [range[0], range[1]];

package/esm/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
-  return _extends({
-    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
-  }, seriesData, {
+  return _extends({}, seriesData, {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
     borderRadius: seriesData.borderRadius ?? 8,
-    data: seriesData.data.map((d, index) => _extends({
-      color: colors[index % colors.length]
-    }, d))
+    data: seriesData.data.map((d, index) => _extends({}, d, {
+      color: d.color ?? colors[index % colors.length]
+    }))
   });
 };
 export default getSeriesWithDefaultValues;

package/esm/FunnelChart/seriesConfig/index.js

@@ -4,11 +4,13 @@ import getColor from "./getColor.js";
 import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+import tooltipItemPositionGetter from "./tooltipPosition.js";
 export const seriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
+  tooltipItemPositionGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues

package/esm/FunnelChart/seriesConfig/tooltipPosition.d.ts

@@ -0,0 +1,3 @@
+import { TooltipItemPositionGetter } from '@mui/x-charts/internals';
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'funnel'>;
+export default tooltipItemPositionGetter;

package/esm/FunnelChart/seriesConfig/tooltipPosition.js

@@ -0,0 +1,56 @@
+import { findMinMax } from '@mui/x-charts/internals';
+import { createPositionGetter } from "../coordinateMapper.js";
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    identifier,
+    axesConfig,
+    placement
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series.funnel?.series[identifier.seriesId];
+  if (itemSeries == null) {
+    return null;
+  }
+  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+    return null;
+  }
+  const isHorizontal = itemSeries.layout === 'horizontal';
+  const baseScaleConfig = isHorizontal ? axesConfig.x : axesConfig.y;
+
+  // FIXME gap should be obtained from the store.
+  // Maybe moving it to the series would be a good idea similar to what we do with bar charts and their stackingGroups
+  const gap = 0;
+  const xPosition = createPositionGetter(axesConfig.x.scale, isHorizontal, gap);
+  const yPosition = createPositionGetter(axesConfig.y.scale, !isHorizontal, gap);
+  const allY = itemSeries.dataPoints[identifier.dataIndex].map(v => yPosition(v.y, identifier.dataIndex, baseScaleConfig.data?.[identifier.dataIndex], v.stackOffset, v.useBandWidth));
+  const allX = itemSeries.dataPoints[identifier.dataIndex].map(v => xPosition(v.x, identifier.dataIndex, baseScaleConfig.data?.[identifier.dataIndex], v.stackOffset, v.useBandWidth));
+  const [x0, x1] = findMinMax(allX);
+  const [y0, y1] = findMinMax(allY);
+  switch (placement) {
+    case 'bottom':
+      return {
+        x: (x1 + x0) / 2,
+        y: y1
+      };
+    case 'left':
+      return {
+        x: x0,
+        y: (y1 + y0) / 2
+      };
+    case 'right':
+      return {
+        x: x1,
+        y: (y1 + y0) / 2
+      };
+    case 'top':
+    default:
+      return {
+        x: (x1 + x0) / 2,
+        y: y0
+      };
+  }
+};
+export default tooltipItemPositionGetter;

package/esm/Heatmap/Heatmap.plugins.d.ts

@@ -1,4 +1,4 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type HeatmapPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export type HeatmapPluginSignatures = [UseChartZAxisSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartHighlightSignature, UseChartProExportSignature];
 export declare const HEATMAP_PLUGINS: ConvertSignaturesIntoPlugins<HeatmapPluginSignatures>;

package/esm/Heatmap/Heatmap.plugins.js

@@ -1,3 +1,3 @@
 import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
-export const HEATMAP_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProExport];
+export const HEATMAP_PLUGINS = [useChartZAxis, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartProExport];

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.js

@@ -26,6 +26,11 @@ process.env.NODE_ENV !== "production" ? HeatmapTooltip.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor: PropTypes.oneOf(['node', 'pointer']),
   /**
    * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
    * or a function that returns either.
@@ -155,6 +160,10 @@ process.env.NODE_ENV !== "production" ? HeatmapTooltip.propTypes = {
       update: PropTypes.func.isRequired
     })
   })]),
+  /**
+   * Determines the tooltip position relatively to the anchor.
+   */
+  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
   /**
    * The props used for each slot inside the Popper.
    * @default {}

package/esm/Heatmap/seriesConfig/getSeriesWithDefaultValues.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
   return _extends({
-    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
     color: colors[seriesIndex % colors.length]
-  }, seriesData);
+  }, seriesData, {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
+  });
 };
 export default getSeriesWithDefaultValues;

package/esm/Heatmap/seriesConfig/index.js

@@ -3,11 +3,13 @@ import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+import tooltipItemPositionGetter from "./tooltipPosition.js";
 export const seriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter: () => [],
   tooltipGetter,
+  tooltipItemPositionGetter,
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum,
   getSeriesWithDefaultValues

package/esm/Heatmap/seriesConfig/tooltipPosition.d.ts

@@ -0,0 +1,3 @@
+import { TooltipItemPositionGetter } from '@mui/x-charts/internals';
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'heatmap'>;
+export default tooltipItemPositionGetter;

package/esm/Heatmap/seriesConfig/tooltipPosition.js

@@ -0,0 +1,51 @@
+import { isBandScaleConfig } from '@mui/x-charts/internals';
+const tooltipItemPositionGetter = params => {
+  const {
+    series,
+    identifier,
+    axesConfig,
+    placement
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series.heatmap?.series[identifier.seriesId];
+  if (itemSeries == null) {
+    return null;
+  }
+  if (axesConfig.x === undefined || axesConfig.y === undefined || !isBandScaleConfig(axesConfig.x) || !isBandScaleConfig(axesConfig.y)) {
+    return null;
+  }
+  const [xIndex, yIndex] = itemSeries.data[identifier.dataIndex];
+  const x = axesConfig.x.scale(axesConfig.x.scale.domain()[xIndex]);
+  const y = axesConfig.y.scale(axesConfig.y.scale.domain()[yIndex]);
+  if (x === undefined || y === undefined) {
+    return null;
+  }
+  const width = axesConfig.x.scale.bandwidth();
+  const height = axesConfig.y.scale.bandwidth();
+  switch (placement) {
+    case 'bottom':
+      return {
+        x: x + width / 2,
+        y: y + height
+      };
+    case 'left':
+      return {
+        x,
+        y: y + height / 2
+      };
+    case 'right':
+      return {
+        x: x + width,
+        y: y + height / 2
+      };
+    case 'top':
+    default:
+      return {
+        x: x + width / 2,
+        y
+      };
+  }
+};
+export default tooltipItemPositionGetter;

package/esm/LineChartPro/LineChartPro.js

@@ -17,6 +17,7 @@ import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { useLineChartProps } from '@mui/x-charts/internals';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
+import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
 import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
 import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
@@ -82,7 +83,7 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
-        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
@@ -1449,7 +1450,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
     })]).isRequired),
-    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.any,
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['wheel']).isRequired
@@ -1461,6 +1462,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['doubleTapReset']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['brush']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/esm/LineChartPro/LineChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<LineChartProPluginSignatures>;

package/esm/LineChartPro/LineChartPro.plugins.js

@@ -1,4 +1,4 @@
 import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const LINE_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
+export const LINE_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/RadarChartPro/RadarChartPro.plugins.d.ts

@@ -1,4 +1,4 @@
 import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature, UseChartPolarAxisSignature } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type RadarChartProPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export type RadarChartProPluginSignatures = [UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature, UseChartProExportSignature];
 export declare const RADAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<RadarChartProPluginSignatures>;

package/esm/RadarChartPro/RadarChartPro.plugins.js

@@ -1,3 +1,3 @@
 import { useChartHighlight, useChartInteraction, useChartPolarAxis } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
-export const RADAR_CHART_PRO_PLUGINS = [useChartPolarAxis, useChartInteraction, useChartHighlight, useChartProExport];
+export const RADAR_CHART_PRO_PLUGINS = [useChartInteraction, useChartPolarAxis, useChartHighlight, useChartProExport];

package/esm/SankeyChart/SankeyTooltip/SankeyTooltip.js

@@ -23,6 +23,11 @@ process.env.NODE_ENV !== "production" ? SankeyTooltip.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor: PropTypes.oneOf(['node', 'pointer']),
   /**
    * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
    * or a function that returns either.
@@ -171,6 +176,10 @@ process.env.NODE_ENV !== "production" ? SankeyTooltip.propTypes = {
       update: PropTypes.func.isRequired
     })
   })]),
+  /**
+   * Determines the tooltip position relatively to the anchor.
+   */
+  position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
   /**
    * The props used for each slot inside the Popper.
    * @default {}

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -16,6 +16,7 @@ import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useScatterChartProps } from '@mui/x-charts/internals';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
+import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
 import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
 import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
@@ -74,7 +75,7 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
         children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
-        }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), children]
+        }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
         trigger: "item"
       }, props.slotProps?.tooltip))]
@@ -1431,7 +1432,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
     })]).isRequired),
-    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.any,
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['wheel']).isRequired
@@ -1443,6 +1444,14 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['doubleTapReset']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['brush']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;

package/esm/ScatterChartPro/ScatterChartPro.plugins.js

@@ -1,4 +1,4 @@
 import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];
+export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.15.0
+ * @mui/x-charts-pro v8.16.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/plugins/allPlugins.d.ts

@@ -1,9 +1,9 @@
-import { ChartSeriesType, ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartZAxisSignature, UseChartHighlightSignature, UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+import { ChartSeriesType, ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartZAxisSignature, UseChartHighlightSignature, UseChartPolarAxisSignature, UseChartBrushSignature } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "./useChartProExport/index.js";
 import { UseChartProZoomSignature } from "./useChartProZoom/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
-export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];
+export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];

package/esm/internals/plugins/allPlugins.js

@@ -1,7 +1,7 @@
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
-import { useChartCartesianAxis, useChartInteraction, useChartZAxis, useChartHighlight, useChartPolarAxis } from '@mui/x-charts/internals';
+import { useChartCartesianAxis, useChartInteraction, useChartZAxis, useChartHighlight, useChartPolarAxis, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "./useChartProExport/index.js";
 import { useChartProZoom } from "./useChartProZoom/index.js";
-export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartPolarAxis, useChartInteraction, useChartHighlight, useChartProZoom, useChartProExport];
-export const DEFAULT_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom, useChartProExport];
+export const ALL_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartPolarAxis, useChartHighlight, useChartProZoom, useChartProExport];
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartProZoom, useChartProExport];

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts

@@ -6,7 +6,7 @@ export declare const selectorZoomInteractionConfig: import("reselect").Selector<
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
-}) | null, [interactionName: "wheel" | "pinch" | "tapAndDrag"]>;
+}) | null, [interactionName: "wheel" | "pinch" | "tapAndDrag" | "doubleTapReset" | "brush"]>;
 export declare const selectorPanInteractionConfig: import("reselect").Selector<any, (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
   mouse: {
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
@@ -15,4 +15,13 @@ export declare const selectorPanInteractionConfig: import("reselect").Selector<a
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
-}) | null, [interactionName: "drag" | "pressAndDrag"]>;
+}) | null, [interactionName: "drag" | "pressAndDrag"]>;
+export declare const selectorIsZoomBrushEnabled: import("reselect").Selector<any, false | (Omit<import("./ZoomInteractionConfig.types.js").ZoomInteraction, "pointerMode"> & {
+  mouse: {
+    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
+  };
+  touch: {
+    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
+  };
+  pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
+}), []>;

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js

@@ -1,4 +1,5 @@
-import { createSelector } from '@mui/x-charts/internals';
+import { createSelector, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { selectorChartZoomState } from "./useChartProZoom.selectors.js";
 export const selectorZoomInteractionConfig = createSelector([selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
-export const selectorPanInteractionConfig = createSelector([selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);
+export const selectorPanInteractionConfig = createSelector([selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);
+export const selectorIsZoomBrushEnabled = createSelector([selectorChartZoomOptionsLookup, state => selectorZoomInteractionConfig(state, 'brush')], (zoomOptions, zoomInteractionConfig) => Object.keys(zoomOptions).length > 0 && zoomInteractionConfig || false);