@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

package/FunnelChart/FunnelChart.mjs

@@ -0,0 +1,362 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
+import { FunnelPlot } from "./FunnelPlot.mjs";
+import { useFunnelChartProps } from "./useFunnelChartProps.mjs";
+import { funnelSeriesConfig } from "./seriesConfig/index.mjs";
+import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.mjs";
+import { ChartDataProviderPro } from "../ChartDataProviderPro/index.mjs";
+import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.mjs";
+import { FocusedFunnelSection } from "./FocusedFunnelSection.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const seriesConfig = {
+  funnel: funnelSeriesConfig
+};
+const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, ref) {
+  const themedProps = useThemeProps({
+    props,
+    name: 'MuiFunnelChart'
+  });
+  const {
+    chartContainerProps,
+    funnelPlotProps,
+    overlayProps,
+    legendProps,
+    chartsAxisProps,
+    chartsWrapperProps,
+    axisHighlightProps,
+    children
+  } = useFunnelChartProps(themedProps);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = useChartContainerProProps(chartContainerProps);
+  const Tooltip = themedProps.slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    gap: themedProps.gap,
+    seriesConfig: seriesConfig,
+    plugins: FUNNEL_CHART_PLUGINS,
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      ref: ref,
+      children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(FocusedFunnelSection, {}), children]
+      })), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+        trigger: "item"
+      }, themedProps.slotProps?.tooltip))]
+    }))
+  }));
+});
+if (process.env.NODE_ENV !== "production") FunnelChart.displayName = "FunnelChart";
+process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
+      exportAsPrint: PropTypes.func.isRequired
+    })
+  }),
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
+   */
+  axisHighlight: PropTypes.shape({
+    x: PropTypes.oneOf(['band', 'line', 'none']),
+    y: PropTypes.oneOf(['band', 'line', 'none'])
+  }),
+  /**
+   * The configuration of the category axis.
+   *
+   * @default { position: 'none' }
+   */
+  categoryAxis: PropTypes.oneOfType([PropTypes.shape({
+    categories: PropTypes.arrayOf(PropTypes.string),
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band']),
+    size: PropTypes.number,
+    tickLabelStyle: PropTypes.object,
+    tickSize: PropTypes.number
+  }), PropTypes.shape({
+    categories: PropTypes.arrayOf(PropTypes.string),
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['log']),
+    size: PropTypes.number,
+    tickLabelStyle: PropTypes.object,
+    tickSize: PropTypes.number
+  }), PropTypes.shape({
+    categories: PropTypes.arrayOf(PropTypes.string),
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['symlog']),
+    size: PropTypes.number,
+    tickLabelStyle: PropTypes.object,
+    tickSize: PropTypes.number
+  }), PropTypes.shape({
+    categories: PropTypes.arrayOf(PropTypes.string),
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['pow']),
+    size: PropTypes.number,
+    tickLabelStyle: PropTypes.object,
+    tickSize: PropTypes.number
+  }), PropTypes.shape({
+    categories: PropTypes.arrayOf(PropTypes.string),
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['sqrt']),
+    size: PropTypes.number,
+    tickLabelStyle: PropTypes.object,
+    tickSize: PropTypes.number
+  }), PropTypes.shape({
+    categories: PropTypes.arrayOf(PropTypes.string),
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['time']),
+    size: PropTypes.number,
+    tickLabelStyle: PropTypes.object,
+    tickSize: PropTypes.number
+  }), PropTypes.shape({
+    categories: PropTypes.arrayOf(PropTypes.string),
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['utc']),
+    size: PropTypes.number,
+    tickLabelStyle: PropTypes.object,
+    tickSize: PropTypes.number
+  }), PropTypes.shape({
+    categories: PropTypes.arrayOf(PropTypes.string),
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['linear']),
+    size: PropTypes.number,
+    tickLabelStyle: PropTypes.object,
+    tickSize: PropTypes.number
+  })]),
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap: PropTypes.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel'])
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel']).isRequired
+  })]).isRequired),
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend: PropTypes.bool,
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem: PropTypes.oneOfType([PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.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.string,
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel'])
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel']).isRequired
+  })]).isRequired),
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
+  /**
+   * 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 a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all funnel elements at the current position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifierWithType[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemIdentifierWithType<SeriesType> | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when a funnel item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * The callback fired when the tooltip item changes.
+   *
+   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   */
+  onTooltipItemChange: PropTypes.func,
+  /**
+   * The series to display in the funnel chart.
+   * An array of [[FunnelSeries]] objects.
+   */
+  series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  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 tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem: PropTypes.oneOfType([PropTypes.shape({
+    dataIndex: PropTypes.number.isRequired,
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel']).isRequired
+  }), PropTypes.shape({
+    dataIndex: PropTypes.number.isRequired,
+    seriesId: PropTypes.string.isRequired
+  })]),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number
+} : void 0;
+export { FunnelChart };

package/FunnelChart/FunnelChart.plugins.d.mts

@@ -0,0 +1,5 @@
+import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartKeyboardNavigationSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
+import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.mjs";
+import { type UseChartFunnelAxisSignature } from "./funnelAxisPlugin/useChartFunnelAxis.types.mjs";
+export type FunnelChartPluginSignatures = [UseChartFunnelAxisSignature, UseChartTooltipSignature<'funnel'>, UseChartInteractionSignature, UseChartHighlightSignature<'funnel'>, UseChartVisibilityManagerSignature<'funnel'>, UseChartProExportSignature, UseChartKeyboardNavigationSignature];
+export declare const FUNNEL_CHART_PLUGINS: ConvertSignaturesIntoPlugins<FunnelChartPluginSignatures>;

package/FunnelChart/FunnelChart.plugins.d.ts

@@ -1,5 +1,5 @@
 import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartKeyboardNavigationSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { type UseChartFunnelAxisSignature } from "./funnelAxisPlugin/useChartFunnelAxis.types.js";
-export type FunnelChartPluginSignatures = [UseChartFunnelAxisSignature, UseChartTooltipSignature<'funnel'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'funnel'>, UseChartProExportSignature, UseChartKeyboardNavigationSignature];
+export type FunnelChartPluginSignatures = [UseChartFunnelAxisSignature, UseChartTooltipSignature<'funnel'>, UseChartInteractionSignature, UseChartHighlightSignature<'funnel'>, UseChartVisibilityManagerSignature<'funnel'>, UseChartProExportSignature, UseChartKeyboardNavigationSignature];
 export declare const FUNNEL_CHART_PLUGINS: ConvertSignaturesIntoPlugins<FunnelChartPluginSignatures>;

package/FunnelChart/FunnelChart.plugins.mjs

@@ -0,0 +1,4 @@
+import { useChartHighlight, useChartTooltip, useChartInteraction, useChartKeyboardNavigation, useChartVisibilityManager } from '@mui/x-charts/internals';
+import { useChartProExport } from "../internals/plugins/useChartProExport/index.mjs";
+import { useChartFunnelAxis } from "./funnelAxisPlugin/useChartFunnelAxis.mjs";
+export const FUNNEL_CHART_PLUGINS = [useChartFunnelAxis, useChartTooltip, useChartInteraction, useChartHighlight, useChartVisibilityManager, useChartProExport, useChartKeyboardNavigation];

package/FunnelChart/FunnelPlot.d.mts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type FunnelItemIdentifier } from "./funnel.types.mjs";
+import { type FunnelPlotSlotExtension } from "./funnelPlotSlots.types.mjs";
+export interface FunnelPlotProps extends FunnelPlotSlotExtension {
+  /**
+   * Callback fired when a funnel item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void;
+}
+declare function FunnelPlot(props: FunnelPlotProps): import("react/jsx-runtime").JSX.Element;
+declare namespace FunnelPlot {
+  var propTypes: any;
+}
+export { FunnelPlot };

package/FunnelChart/FunnelPlot.mjs

@@ -0,0 +1,182 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+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, useStore } from '@mui/x-charts/internals';
+import { FunnelSection } from "./FunnelSection.mjs";
+import { alignLabel, positionLabel } from "./labelUtils.mjs";
+import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.mjs";
+import { getFunnelCurve } from "./curves/index.mjs";
+import { FunnelSectionLabel } from "./FunnelSectionLabel.mjs";
+import { selectorChartXAxis, selectorChartYAxis, selectorFunnelGap } from "./funnelAxisPlugin/useChartFunnelAxisRendering.selectors.mjs";
+import { createPositionGetter } from "./coordinateMapper.mjs";
+import { get2DExtrema } from "./get2DExtrema.mjs";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cartesianSeriesTypes.addType('funnel');
+const useAggregatedData = () => {
+  const seriesData = useFunnelSeriesContext();
+  const store = useStore();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = store.use(selectorChartXAxis);
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = store.use(selectorChartYAxis);
+  const gap = store.use(selectorFunnelGap);
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      seriesOrder
+    } = seriesData;
+    const defaultXAxisId = xAxisIds[0];
+    const defaultYAxisId = yAxisIds[0];
+    const isHorizontal = Object.values(series).some(s => s.layout === 'horizontal');
+    const result = seriesOrder.map(seriesId => {
+      const currentSeries = series[seriesId];
+      const xAxisId = currentSeries.xAxisId ?? defaultXAxisId;
+      const yAxisId = currentSeries.yAxisId ?? defaultYAxisId;
+      const valueFormatter = currentSeries.valueFormatter;
+      const baseScaleConfig = isHorizontal ? xAxis[xAxisId] : yAxis[yAxisId];
+      const xScale = xAxis[xAxisId].scale;
+      const yScale = yAxis[yAxisId].scale;
+      const xPosition = createPositionGetter(xScale, isHorizontal, gap, baseScaleConfig.data);
+      const yPosition = createPositionGetter(yScale, !isHorizontal, gap, baseScaleConfig.data);
+      const [minPoint, maxPoint] = get2DExtrema(currentSeries.dataPoints, xPosition, yPosition);
+      return currentSeries.dataPoints.flatMap((values, dataIndex) => {
+        const color = currentSeries.data[dataIndex].color;
+        const id = `${seriesId}-${dataIndex}`;
+        const sectionLabel = typeof currentSeries.sectionLabel === 'function' ? currentSeries.sectionLabel({
+          dataIndex,
+          seriesId,
+          value: currentSeries.data[dataIndex].value
+        }) : currentSeries.sectionLabel;
+        const isIncreasing = currentSeries.funnelDirection === 'increasing';
+        const curve = getFunnelCurve(currentSeries.curve, {
+          isHorizontal,
+          gap,
+          position: dataIndex,
+          sections: currentSeries.dataPoints.length,
+          borderRadius: currentSeries.borderRadius,
+          isIncreasing,
+          min: minPoint,
+          max: maxPoint
+        });
+        const bandPoints = curve({}).processPoints(values.map(v => ({
+          x: xPosition(v.x, dataIndex, v.stackOffset, v.useBandWidth),
+          y: yPosition(v.y, dataIndex, v.stackOffset, v.useBandWidth)
+        })));
+        const line = d3Line().x(v => v.x).y(v => v.y).curve(curve);
+        return {
+          d: line(bandPoints),
+          color,
+          id,
+          seriesId,
+          dataIndex,
+          variant: currentSeries.variant,
+          label: sectionLabel !== false && _extends({}, positionLabel(_extends({}, sectionLabel, {
+            isHorizontal,
+            values: bandPoints
+          })), alignLabel(sectionLabel ?? {}), {
+            value: valueFormatter ? valueFormatter(currentSeries.data[dataIndex], {
+              dataIndex
+            }) : currentSeries.data[dataIndex].value?.toLocaleString()
+          })
+        };
+      });
+    });
+    return result;
+  }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
+  return allData;
+};
+function FunnelPlot(props) {
+  const {
+      onItemClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const data = useAggregatedData();
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [data.map(series => {
+      if (series.length === 0) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        "data-series": series[0].seriesId,
+        children: series.map(({
+          d,
+          color,
+          id,
+          seriesId,
+          dataIndex,
+          variant
+        }) => /*#__PURE__*/_createElement(FunnelSection, _extends({}, other, {
+          d: d,
+          color: color,
+          key: id,
+          dataIndex: dataIndex,
+          seriesId: seriesId,
+          variant: variant,
+          onClick: onItemClick && (event => {
+            onItemClick(event, {
+              type: 'funnel',
+              seriesId,
+              dataIndex
+            });
+          })
+        })))
+      }, series[0].seriesId);
+    }), data.map(series => {
+      if (series.length === 0) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        "data-series": series[0].seriesId,
+        children: series.map(({
+          id,
+          label,
+          seriesId,
+          dataIndex
+        }) => {
+          if (!label || !label.value) {
+            return null;
+          }
+          return /*#__PURE__*/_jsx(FunnelSectionLabel, _extends({
+            label: label,
+            dataIndex: dataIndex,
+            seriesId: seriesId
+          }, other), id);
+        })
+      }, series[0].seriesId);
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a funnel item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {FunnelItemIdentifier} funnelItemIdentifier The funnel item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { FunnelPlot };

package/FunnelChart/FunnelSection.d.mts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type SeriesId } from '@mui/x-charts/internals';
+import { type FunnelSectionClasses } from "./funnelSectionClasses.mjs";
+export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref'> {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  classes?: Partial<FunnelSectionClasses>;
+  variant?: 'filled' | 'outlined';
+}
+export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
+declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<{}>>;
+export { FunnelSection };

package/FunnelChart/FunnelSection.js

@@ -40,18 +40,16 @@ const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiF
       variant = 'filled'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const interactionProps = (0, _internals.useInteractionItemProps)({
+  const identifier = React.useMemo(() => ({
     type: 'funnel',
     seriesId,
     dataIndex
-  });
+  }), [seriesId, dataIndex]);
+  const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
   const {
     isFaded,
     isHighlighted
-  } = (0, _hooks.useItemHighlighted)({
-    seriesId,
-    dataIndex
-  });
+  } = (0, _hooks.useItemHighlighted)(identifier);
   const isOutlined = variant === 'outlined';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FunnelSectionPath, (0, _extends2.default)({}, interactionProps, {
     filter: isHighlighted && !isOutlined ? 'brightness(120%)' : undefined,