@mui/x-charts-pro 8.27.2 → 9.0.0-alpha.1

package/SankeyChart/sankeySlots.types.d.ts

@@ -1,15 +1,9 @@
 import { type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
-import { type ChartsTooltipProps, type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
 import { type ChartsSlotProps, type ChartsSlots } from '@mui/x-charts/internals';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
-export interface SankeyChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface SankeyChartSlotProps extends Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsOverlaySlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
-  /**
-   * Slot props for the tooltip component.
-   * @default {}
-   */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
-}
+export interface SankeyChartSlots extends ChartsTooltipSlots<'item' | 'none'>, ChartsOverlaySlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface SankeyChartSlotProps extends ChartsTooltipSlotProps<'item' | 'none'>, ChartsOverlaySlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface SankeyChartSlotExtension {
   /**
    * Overridable component slots.

package/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -61,6 +61,16 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
       color: resolvedColor
     });
   });
+  const highlightScope = {
+    nodes: {
+      highlight: seriesData.nodeOptions?.highlight ?? 'links',
+      fade: seriesData.nodeOptions?.fade ?? 'none'
+    },
+    links: {
+      highlight: seriesData.linkOptions?.highlight ?? 'links',
+      fade: seriesData.linkOptions?.fade ?? 'none'
+    }
+  };
   if (!seriesData.data || !links) {
     return (0, _extends2.default)({
       id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
@@ -69,7 +79,8 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
       data: {
         nodes: [],
         links: []
-      }
+      },
+      highlightScope
     });
   }
 
@@ -100,6 +111,7 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
   }, seriesData, {
     valueFormatter: seriesData.valueFormatter ?? defaultSankeyValueFormatter,
+    highlightScope,
     data
   });
 };

package/SankeyChart/seriesConfig/identifierCleaner.d.ts

@@ -0,0 +1,3 @@
+import type { IdentifierCleaner } from '@mui/x-charts/internals';
+declare const identifierCleaner: IdentifierCleaner<'sankey'>;
+export default identifierCleaner;

package/SankeyChart/seriesConfig/identifierCleaner.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const identifierCleaner = identifier => {
+  if (identifier.subType === 'node') {
+    return {
+      type: identifier.type,
+      seriesId: identifier.seriesId,
+      subType: 'node',
+      nodeId: identifier.nodeId
+    };
+  }
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    subType: 'link',
+    sourceId: identifier.sourceId,
+    targetId: identifier.targetId
+  };
+};
+var _default = exports.default = identifierCleaner;

package/SankeyChart/seriesConfig/index.js

@@ -11,6 +11,7 @@ var _calculateSankeyLayout = require("../calculateSankeyLayout");
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = _interopRequireDefault(require("./identifierSerializer"));
+var _identifierCleaner = _interopRequireDefault(require("./identifierCleaner"));
 // Simple passthrough functions for sankey chart
 const seriesProcessor = series => series;
 const colorProcessor = series => series;
@@ -34,5 +35,6 @@ const sankeySeriesConfig = exports.sankeySeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.default
+  identifierSerializer: _identifierSerializer.default,
+  identifierCleaner: _identifierCleaner.default
 };

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -35,5 +35,5 @@ export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' |
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-declare const ScatterChartPro: React.ForwardRefExoticComponent<ScatterChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const ScatterChartPro: React.ForwardRefExoticComponent<ScatterChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { ScatterChartPro };

package/ScatterChartPro/ScatterChartPro.js

@@ -73,11 +73,12 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
     onZoomChange,
     apiRef,
     plugins: _ScatterChartPro2.SCATTER_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
@@ -103,6 +104,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: _propTypes.default.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -177,8 +183,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -190,7 +196,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -220,8 +226,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   })),
   /**
    * The list of zoom data related to each axis.
@@ -277,6 +283,14 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -326,14 +340,22 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   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,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   }),
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.

package/esm/BarChartPro/BarChartPro.d.ts

@@ -29,5 +29,5 @@ export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots'
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-declare const BarChartPro: React.ForwardRefExoticComponent<BarChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const BarChartPro: React.ForwardRefExoticComponent<BarChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { BarChartPro };

package/esm/BarChartPro/BarChartPro.js

@@ -70,11 +70,12 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
     onZoomChange,
     apiRef,
     plugins: BAR_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      ref: ref,
       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))]
@@ -97,6 +98,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -180,8 +186,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -201,7 +207,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -231,8 +237,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   })),
   /**
    * The list of zoom data related to each axis.
@@ -301,6 +307,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: PropTypes.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -350,14 +364,22 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/ChartContainerPro/ChartContainerPro.d.ts

@@ -1,35 +1,21 @@
-import * as React from 'react';
-import { type ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
 import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { type ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
-export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProProps<TSeries, TSignatures> & ChartsSurfaceProps;
-type ChartContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures> & {
-  ref?: React.ForwardedRef<SVGSVGElement>;
-}) => React.JSX.Element;
+import { type ChartsContainerProProps, type ChartsContainerProSlotProps, type ChartsContainerProSlots } from "../ChartsContainerPro/index.js";
+/**
+ * @deprecated Use `ChartsContainerProSlots` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartContainerProSlots = ChartsContainerProSlots;
+/**
+ * @deprecated Use `ChartsContainerProSlotProps` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartContainerProSlotProps = ChartsContainerProSlotProps;
+/**
+ * @deprecated Use `ChartsContainerProProps` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartsContainerProProps<TSeries, TSignatures>;
 /**
- * It sets up the data providers as well as the `<svg>` for the chart.
- *
- * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
- *
- * Demos:
- *
- * - [Composition](https://mui.com/x/api/charts/composition/)
- *
- * API:
- *
- * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
- *
- * @example
- * ```jsx
- * <ChartContainerPro
- *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
- *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
- * >
- *    <BarPlot />
- *    <ChartsXAxis axisId="x-axis" />
- * </ChartContainerPro>
- * ```
+ * @deprecated Use `ChartsContainerPro` instead. We added S to the charts prefix to align with other components.
  */
-declare const ChartContainerPro: ChartContainerProComponent;
-export { ChartContainerPro };
+export declare const ChartContainerPro: <TSeries extends ChartSeriesType = keyof import("@mui/x-charts/internals").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures> & {
+  ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;