@mui/x-charts-pro 8.5.0 → 8.5.2

package/FunnelChart/curves/linear.js

@@ -11,7 +11,7 @@ var _utils = require("./utils");
 /**
  * This is a custom "linear" curve generator.
  * It draws straight lines for the 4 provided points,
- * with the option to add a gap between sections while also properly handling the border radius.
+ * with the option to properly handling the border radius.
  *
  * The implementation is based on the d3-shape linear curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
@@ -22,21 +22,51 @@ class Linear {
     gap,
     position,
     sections,
-    borderRadius
+    borderRadius,
+    min,
+    max,
+    isIncreasing,
+    pointShape
   }) {
     this.context = void 0;
     this.position = 0;
     this.sections = 0;
     this.isHorizontal = false;
+    this.isIncreasing = false;
     this.gap = 0;
     this.borderRadius = 0;
+    this.min = {
+      x: 0,
+      y: 0
+    };
+    this.max = {
+      x: 0,
+      y: 0
+    };
     this.points = [];
+    this.pointShape = 'square';
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
+    this.isIncreasing = isIncreasing ?? false;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+    this.pointShape = pointShape ?? 'square';
+    if (isIncreasing) {
+      const currentMin = this.min;
+      const currentMax = this.max;
+      this.min = currentMax;
+      this.max = currentMin;
+    }
   }
   areaStart() {}
   areaEnd() {}
@@ -46,11 +76,34 @@ class Linear {
     if (this.gap > 0) {
       return this.borderRadius;
     }
-    if (this.position === 0) {
-      return [0, 0, this.borderRadius, this.borderRadius];
+    if (this.isIncreasing) {
+      // Is largest section
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === 0 && this.pointShape === 'sharp') {
+        return [0, 0, this.borderRadius];
+      }
+      // Is smallest section
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius, this.borderRadius];
+      }
     }
-    if (this.position === this.sections - 1) {
-      return [this.borderRadius, this.borderRadius];
+    if (!this.isIncreasing) {
+      // Is largest section
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === this.sections - 1 && this.pointShape === 'sharp') {
+        return [this.borderRadius];
+      }
+
+      // Is smallest section
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius, this.borderRadius];
+      }
     }
     return 0;
   }
@@ -65,23 +118,50 @@ class Linear {
 
     // Add gaps where they are needed.
     this.points = this.points.map((point, index) => {
-      const slopeStart = this.points.at(index <= 1 ? 0 : 2);
-      const slopeEnd = this.points.at(index <= 1 ? 1 : 3);
+      const slopeStart = this.points.at(index <= 1 ? 0 : 3);
+      const slopeEnd = this.points.at(index <= 1 ? 1 : 2);
       if (this.isHorizontal) {
-        const yGetter = (0, _utils.lerpY)(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x - this.gap, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
+        const yGetter = (0, _utils.lerpY)(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x, slopeEnd.y);
         return {
-          x: xGap,
-          y: yGetter(xGap)
+          x: point.x,
+          y: yGetter(point.x)
         };
       }
-      const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y - this.gap);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
+      const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y);
       return {
-        x: xGetter(yGap),
-        y: yGap
+        x: xGetter(point.y),
+        y: point.y
       };
     });
+    if (this.pointShape === 'sharp') {
+      // In the last section, to form a triangle we need 3 points instead of 4
+      // Else the algorithm will break.
+      const isLastSection = this.position === this.sections - 1;
+      const isFirstSection = this.position === 0;
+      let firstPoint = null;
+      let secondPoint = null;
+      if (isFirstSection && this.isIncreasing) {
+        firstPoint = this.points[1];
+        secondPoint = this.points[2];
+      }
+      if (isLastSection && !this.isIncreasing) {
+        firstPoint = this.points[3];
+        secondPoint = this.points[0];
+      }
+      if (firstPoint && secondPoint) {
+        this.points = [
+        // Sharp point at the start
+        this.isHorizontal ? {
+          x: this.max.x,
+          y: (this.max.y + this.min.y) / 2
+        } : {
+          x: (this.max.x + this.min.x) / 2,
+          y: this.max.y
+        },
+        // Then other points
+        firstPoint, secondPoint];
+      }
+    }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }
 }

package/FunnelChart/curves/pyramid.js

@@ -102,7 +102,7 @@ class Pyramid {
       return;
     }
 
-    // Add gaps where they are needed.
+    // Replace funnel points by pyramids ones.
     this.points = this.points.map((point, index) => {
       if (this.isHorizontal) {
         const slopeEnd = {
@@ -114,10 +114,9 @@ class Pyramid {
           y: this.max.y
         };
         const yGetter = (0, _utils.lerpY)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
         return {
-          x: xGap,
-          y: yGetter(xGap)
+          x: point.x,
+          y: yGetter(point.x)
         };
       }
       const slopeEnd = {
@@ -129,10 +128,9 @@ class Pyramid {
         y: this.min.y
       } : this.min;
       const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
       return {
-        x: xGetter(yGap),
-        y: yGap
+        x: xGetter(point.y),
+        y: point.y
       };
     });
 
@@ -140,13 +138,11 @@ class Pyramid {
     // Else the algorithm will break.
     const isLastSection = this.position === this.sections - 1;
     const isFirstSection = this.position === 0;
-    if (this.gap <= 0) {
-      if (isFirstSection && this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[2]];
-      }
-      if (isLastSection && !this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[3]];
-      }
+    if (isFirstSection && this.isIncreasing) {
+      this.points = [this.points[0], this.points[1], this.points[2]];
+    }
+    if (isLastSection && !this.isIncreasing) {
+      this.points = [this.points[0], this.points[1], this.points[3]];
     }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }

package/FunnelChart/curves/step-pyramid.js

@@ -42,7 +42,7 @@ class StepPyramid {
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
@@ -156,25 +156,23 @@ class StepPyramid {
       return;
     }
 
-    // Add gaps where they are needed.
+    // Replace funnel points by pyramids ones.
     this.points = this.points.map((point, index) => {
       const slopeStart = this.slopeStart(index);
       const slopeEnd = this.slopeEnd(index);
       if (this.isHorizontal) {
         const yGetter = (0, _utils.lerpY)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
         const xInitial = this.initialX(index);
         return {
-          x: xGap,
+          x: point.x,
           y: yGetter(xInitial)
         };
       }
       const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
       const yInitial = this.initialY(index);
       return {
         x: xGetter(yInitial),
-        y: yGap
+        y: point.y
       };
     });
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());

package/FunnelChart/curves/step.js

@@ -37,7 +37,7 @@ class Step {
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
@@ -86,20 +86,6 @@ class Step {
         y: index === 1 || index === 2 ? (0, _utils.max)(allY) : (0, _utils.min)(allY)
       };
     });
-
-    // Add gaps where they are needed.
-    this.points = this.points.map((point, index) => {
-      if (this.isHorizontal) {
-        return {
-          x: point.x + (index === 0 || index === 3 ? this.gap : -this.gap),
-          y: point.y
-        };
-      }
-      return {
-        x: point.x,
-        y: point.y + (index === 0 || index === 3 ? this.gap : -this.gap)
-      };
-    });
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }
 }

package/FunnelChart/funnel.types.d.ts

@@ -47,6 +47,7 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    *
    * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
    * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
    * - `step`: A step line that creates a staircase effect.
    * - `pyramid`: A pyramid shape that connects the points.
    * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.

package/FunnelChart/funnelAxisPlugin/computeAxisValue.d.ts

@@ -0,0 +1,25 @@
+import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
+import { ChartDrawingArea } from '@mui/x-charts/hooks';
+import { ComputedAxisConfig, ChartSeriesType, ProcessedSeries, ChartSeriesConfig, DefaultedYAxis, DefaultedXAxis } from '@mui/x-charts/internals';
+import { ChartsXAxisProps, ChartsYAxisProps } from '@mui/x-charts/models';
+export declare const xRangeGetter: (drawingArea: ChartDrawingArea, reverse?: boolean, removedSpace?: number) => [number, number];
+export declare const yRangeGetter: (drawingArea: ChartDrawingArea, reverse?: boolean, removedSpace?: number) => [number, number];
+export type ComputeResult<T extends ChartsAxisProps> = {
+  axis: ComputedAxisConfig<T>;
+  axisIds: string[];
+};
+type ComputeCommonParams<T extends ChartSeriesType = 'funnel'> = {
+  drawingArea: ChartDrawingArea;
+  formattedSeries: ProcessedSeries<T>;
+  seriesConfig: ChartSeriesConfig<T>;
+  gap: number;
+};
+export declare function computeAxisValue(options: ComputeCommonParams<'funnel'> & {
+  axis?: DefaultedYAxis[];
+  axisDirection: 'y';
+}): ComputeResult<ChartsYAxisProps>;
+export declare function computeAxisValue(options: ComputeCommonParams<'funnel'> & {
+  axis?: DefaultedXAxis[];
+  axisDirection: 'x';
+}): ComputeResult<ChartsXAxisProps>;
+export {};

package/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeAxisValue = computeAxisValue;
+exports.yRangeGetter = exports.xRangeGetter = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+var _internals = require("@mui/x-charts/internals");
+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]];
+};
+exports.xRangeGetter = xRangeGetter;
+const yRangeGetter = (drawingArea, reverse, removedSpace = 0) => {
+  const range = [drawingArea.top + drawingArea.height - removedSpace, drawingArea.top];
+  return reverse ? [range[1], range[0]] : [range[0], range[1]];
+};
+exports.yRangeGetter = yRangeGetter;
+function getRange(drawingArea, axisDirection, axis, removedSpace = 0) {
+  return axisDirection === 'x' ? xRangeGetter(drawingArea, axis.reverse, removedSpace) : yRangeGetter(drawingArea, axis.reverse, removedSpace);
+}
+function computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis: allAxis,
+  seriesConfig,
+  axisDirection,
+  gap
+}) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const axisIdsTriggeringTooltip = (0, _internals.getCartesianAxisTriggerTooltip)(axisDirection, seriesConfig, formattedSeries, allAxis[0].id);
+  const completeAxis = {};
+  allAxis.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    let range = getRange(drawingArea, axisDirection, axis);
+    const [minData, maxData] = (0, _internals.getAxisExtremum)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
+    const data = axis.data ?? [];
+    if ((0, _internals.isBandScaleConfig)(axis)) {
+      // Reverse range because ordinal scales are presented from top to bottom on y-axis
+      const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
+      const rangeSpace = Math.abs(range[1] - range[0]);
+      const N = axis.data.length;
+      const bandWidth = (rangeSpace - gap * (N - 1)) / N;
+      const step = bandWidth + gap;
+      completeAxis[axis.id] = (0, _extends2.default)({
+        offset: 0,
+        height: 0,
+        categoryGapRatio: 0,
+        barGapRatio: 0,
+        triggerTooltip
+      }, axis, {
+        data,
+        scale: (0, _d3Scale.scaleBand)(axis.data, scaleRange).paddingInner(gap / step).paddingOuter(0),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _internals.getOrdinalColorScale)((0, _extends2.default)({
+          values: axis.data
+        }, axis.colorMap)) : (0, _internals.getColorScale)(axis.colorMap))
+      });
+      if ((0, _internals.isDateData)(axis.data)) {
+        const dateFormatter = (0, _internals.createDateFormatter)(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+    }
+    if (axis.scaleType === 'band') {
+      return;
+    }
+    if (axis.scaleType === 'point') {
+      throw new Error('Point scale is not supported in FunnelChart. Please use band scale instead.');
+    }
+    const isHorizontal = Object.values(formattedSeries.funnel?.series ?? {}).some(s => s.layout === 'horizontal');
+    if (isHorizontal ? axisDirection === 'x' : axisDirection === 'y') {
+      // For linear scale replacing the band scale, we remove the space needed for gap from the scale range.
+      const itemNumber = formattedSeries.funnel?.series[formattedSeries.funnel.seriesOrder[0]].data.length ?? 0;
+      const spaceToRemove = gap * (itemNumber - 1);
+      range = getRange(drawingArea, axisDirection, axis, spaceToRemove);
+    }
+    const scaleType = axis.scaleType ?? 'linear';
+    const domainLimit = axis.domainLimit ?? 'nice';
+    const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
+    if (typeof domainLimit === 'function') {
+      const {
+        min,
+        max
+      } = domainLimit(minData, maxData);
+      axisExtremums[0] = min;
+      axisExtremums[1] = max;
+    }
+    const rawTickNumber = (0, _internals.getTickNumber)((0, _extends2.default)({}, axis, {
+      range,
+      domain: axisExtremums
+    }));
+    const tickNumber = (0, _internals.scaleTickNumberByRange)(rawTickNumber, range);
+    const scale = (0, _internals.getScale)(scaleType, axisExtremums, range);
+    const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
+    const [minDomain, maxDomain] = finalScale.domain();
+    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+    completeAxis[axis.id] = (0, _extends2.default)({
+      offset: 0,
+      height: 0,
+      triggerTooltip
+    }, axis, {
+      data,
+      scaleType: scaleType,
+      scale: finalScale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && (0, _internals.getColorScale)(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '@mui/x-charts/internals';
+import { UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js";
+export declare const useChartFunnelAxis: ChartPlugin<UseChartFunnelAxisSignature>;

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -0,0 +1,173 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartFunnelAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
+var _internals = require("@mui/x-charts/internals");
+var _useChartFunnelAxisRendering = require("./useChartFunnelAxisRendering.selectors");
+const useChartFunnelAxis = ({
+  params,
+  store,
+  seriesConfig,
+  svgRef,
+  instance
+}) => {
+  const {
+    xAxis,
+    yAxis,
+    dataset,
+    gap
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      (0, _warning.warnOnce)([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
+  const isInteractionEnabled = (0, _internals.useSelector)(store, _internals.selectorChartsInteractionIsInitialized);
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      funnel: {
+        gap: gap ?? 0
+      },
+      cartesianAxis: (0, _extends2.default)({}, prev.cartesianAxis, {
+        x: (0, _internals.defaultizeXAxis)(xAxis, dataset),
+        y: (0, _internals.defaultizeYAxis)(yAxis, dataset)
+      })
+    }));
+  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+      return () => {};
+    }
+    const handleOut = () => {
+      instance.cleanInteraction?.();
+    };
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
+      const svgPoint = (0, _internals.getSVGPoint)(element, target);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
+        instance.cleanInteraction?.();
+        return;
+      }
+      instance.setPointerCoordinate?.(svgPoint);
+    };
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
+    };
+  }, [svgRef, instance, params.disableAxisListener, isInteractionEnabled]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    const onAxisClick = params.onAxisClick;
+    if (element === null || !onAxisClick) {
+      return () => {};
+    }
+    const handleMouseClick = event => {
+      event.preventDefault();
+      const {
+        axis: xAxisWithScale,
+        axisIds: xAxisIds
+      } = (0, _useChartFunnelAxisRendering.selectorChartXAxis)(store.value);
+      const {
+        axis: yAxisWithScale,
+        axisIds: yAxisIds
+      } = (0, _useChartFunnelAxisRendering.selectorChartYAxis)(store.value);
+      const processedSeries = (0, _internals.selectorChartSeriesProcessed)(store.value);
+      const usedXAxis = xAxisIds[0];
+      const usedYAxis = yAxisIds[0];
+      let dataIndex = null;
+      let isXAxis = false;
+      const svgPoint = (0, _internals.getSVGPoint)(element, event);
+      const xIndex = (0, _internals.getCartesianAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : (0, _internals.getCartesianAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
+      const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isXAxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      processedSeries.funnel?.seriesOrder.forEach(seriesId => {
+        const seriesItem = processedSeries.funnel.series[seriesId];
+        const providedXAxisId = seriesItem.xAxisId;
+        const providedYAxisId = seriesItem.yAxisId;
+        const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
+        if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+          seriesValues[seriesId] = seriesItem.data[dataIndex].value;
+        }
+      });
+      onAxisClick(event, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    };
+    element.addEventListener('click', handleMouseClick);
+    return () => {
+      element.removeEventListener('click', handleMouseClick);
+    };
+  }, [params.onAxisClick, svgRef, store]);
+  return {};
+};
+exports.useChartFunnelAxis = useChartFunnelAxis;
+useChartFunnelAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  gap: true,
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
+};
+useChartFunnelAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return (0, _extends2.default)({}, params, {
+    gap: params.gap ?? 0,
+    defaultizedXAxis: (0, _internals.defaultizeXAxis)(params.xAxis, params.dataset),
+    defaultizedYAxis: (0, _internals.defaultizeYAxis)(params.yAxis, params.dataset)
+  });
+};
+useChartFunnelAxis.getInitialState = params => {
+  return {
+    funnel: {
+      gap: params.gap ?? 0
+    },
+    cartesianAxis: {
+      x: params.defaultizedXAxis,
+      y: params.defaultizedYAxis
+    }
+  };
+};

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts

@@ -0,0 +1,27 @@
+import { ChartPluginSignature, UseChartCartesianAxisDefaultizedParameters, UseChartCartesianAxisParameters, UseChartCartesianAxisState, UseChartInteractionSignature, UseChartSeriesSignature, ChartsAxisData } from '@mui/x-charts/internals';
+export type UseChartFunnelAxisSignature = ChartPluginSignature<{
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick'> & {
+    /**
+     * The gap, in pixels, between funnel sections.
+     * @default 0
+     */
+    gap?: 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?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  };
+  defaultizedParams: UseChartCartesianAxisDefaultizedParameters & {
+    gap: number;
+  };
+  state: Pick<UseChartCartesianAxisState, 'cartesianAxis'> & {
+    funnel: {
+      gap: number;
+    };
+  };
+  dependencies: [UseChartSeriesSignature<'funnel'>];
+  optionalDependencies: [UseChartInteractionSignature];
+}>;

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.js

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