@mui/x-charts-pro 8.5.1 → 8.5.3

package/esm/FunnelChart/curves/step-pyramid.js

@@ -37,7 +37,7 @@ export 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;
@@ -130,48 +130,48 @@ export class StepPyramid {
       y: this.max.y
     };
   }
-  initialX(index) {
+  initialX(index, points) {
     if (this.isIncreasing) {
-      return index === 0 || index === 1 ? this.points.at(1).x : this.points.at(2).x;
+      return index === 0 || index === 1 ? points.at(1).x : points.at(2).x;
     }
-    return index === 0 || index === 1 ? this.points.at(0).x : this.points.at(3).x;
+    return index === 0 || index === 1 ? points.at(0).x : points.at(3).x;
   }
-  initialY(index) {
+  initialY(index, points) {
     if (this.isIncreasing) {
-      return index === 0 || index === 1 ? this.points.at(1).y : this.points.at(2).y;
+      return index === 0 || index === 1 ? points.at(1).y : points.at(2).y;
     }
-    return index === 0 || index === 1 ? this.points.at(0).y : this.points.at(3).y;
+    return index === 0 || index === 1 ? points.at(0).y : points.at(3).y;
   }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-
-    // Add gaps where they are needed.
-    this.points = this.points.map((point, index) => {
+  processPoints(points) {
+    // Replace funnel points by pyramids ones.
+    const processedPoints = points.map((point, index) => {
       const slopeStart = this.slopeStart(index);
       const slopeEnd = this.slopeEnd(index);
       if (this.isHorizontal) {
         const yGetter = 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);
+        const xInitial = this.initialX(index, points);
         return {
-          x: xGap,
+          x: point.x,
           y: yGetter(xInitial)
         };
       }
       const xGetter = 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);
+      const yInitial = this.initialY(index, points);
       return {
         x: xGetter(yInitial),
-        y: yGap
+        y: point.y
       };
     });
+    return processedPoints;
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    if (this.points.length < 4) {
+      return;
+    }
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
   }
 }

package/esm/FunnelChart/curves/step.d.ts

@@ -1,5 +1,4 @@
-import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
-import { CurveOptions } from "./curve.types.js";
+import { FunnelCurveGenerator, CurveOptions, Point } from "./curve.types.js";
 /**
  * This is a custom "step" curve generator.
  * It is used to draw "rectangles" from 4 points without having to rework the rendering logic,
@@ -10,7 +9,7 @@ import { CurveOptions } from "./curve.types.js";
  * The implementation is based on the d3-shape step curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
  */
-export declare class Step implements CurveGenerator {
+export declare class Step implements FunnelCurveGenerator {
   private context;
   private isHorizontal;
   private isIncreasing;
@@ -32,5 +31,6 @@ export declare class Step implements CurveGenerator {
   lineStart(): void;
   lineEnd(): void;
   protected getBorderRadius(): number | number[];
+  processPoints(points: Point[]): Point[];
   point(xIn: number, yIn: number): void;
 }

package/esm/FunnelChart/curves/step.js

@@ -32,7 +32,7 @@ export 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;
@@ -57,19 +57,11 @@ export class Step {
     }
     return [this.borderRadius, this.borderRadius];
   }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-
+  processPoints(points) {
     // Ensure we have rectangles instead of trapezoids.
-    this.points = this.points.map((_, index) => {
-      const allX = this.points.map(p => p.x);
-      const allY = this.points.map(p => p.y);
+    const processedPoints = points.map((_, index) => {
+      const allX = points.map(p => p.x);
+      const allY = points.map(p => p.y);
       if (this.isHorizontal) {
         return {
           x: index === 1 || index === 2 ? max(allX) : min(allX),
@@ -81,20 +73,16 @@ export class Step {
         y: index === 1 || index === 2 ? max(allY) : 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)
-      };
+    return processedPoints;
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
     });
+    if (this.points.length < 4) {
+      return;
+    }
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
   }
 }

package/esm/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/esm/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { scaleBand } from '@mui/x-charts-vendor/d3-scale';
+import { getAxisExtremum, isBandScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter } 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]];
+};
+export 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]];
+};
+function getRange(drawingArea, axisDirection, axis, removedSpace = 0) {
+  return axisDirection === 'x' ? xRangeGetter(drawingArea, axis.reverse, removedSpace) : yRangeGetter(drawingArea, axis.reverse, removedSpace);
+}
+export function computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis: allAxis,
+  seriesConfig,
+  axisDirection,
+  gap
+}) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const axisIdsTriggeringTooltip = 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] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
+    const data = axis.data ?? [];
+    if (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] = _extends({
+        offset: 0,
+        height: 0,
+        categoryGapRatio: 0,
+        barGapRatio: 0,
+        triggerTooltip
+      }, axis, {
+        data,
+        scale: scaleBand(axis.data, scaleRange).paddingInner(gap / step).paddingOuter(0),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+      if (isDateData(axis.data)) {
+        const dateFormatter = 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 = getTickNumber(_extends({}, axis, {
+      range,
+      domain: axisExtremums
+    }));
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, range);
+    const scale = 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] = _extends({
+      offset: 0,
+      height: 0,
+      triggerTooltip
+    }, axis, {
+      data,
+      scaleType: scaleType,
+      scale: finalScale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && getColorScale(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

package/esm/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/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -0,0 +1,165 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { getSVGPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, useSelector, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartFunnelAxisRendering.selectors.js";
+export 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) {
+      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 = useSelector(store, selectorChartDrawingArea);
+  const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => _extends({}, prev, {
+      funnel: {
+        gap: gap ?? 0
+      },
+      cartesianAxis: _extends({}, prev.cartesianAxis, {
+        x: defaultizeXAxis(xAxis, dataset),
+        y: 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 = 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
+      } = selectorChartXAxis(store.value);
+      const {
+        axis: yAxisWithScale,
+        axisIds: yAxisIds
+      } = selectorChartYAxis(store.value);
+      const processedSeries = selectorChartSeriesProcessed(store.value);
+      const usedXAxis = xAxisIds[0];
+      const usedYAxis = yAxisIds[0];
+      let dataIndex = null;
+      let isXAxis = false;
+      const svgPoint = getSVGPoint(element, event);
+      const xIndex = getCartesianAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : 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 {};
+};
+useChartFunnelAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  gap: true,
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true
+};
+useChartFunnelAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return _extends({}, params, {
+    gap: params.gap ?? 0,
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
+  });
+};
+useChartFunnelAxis.getInitialState = params => {
+  return {
+    funnel: {
+      gap: params.gap ?? 0
+    },
+    cartesianAxis: {
+      x: params.defaultizedXAxis,
+      y: params.defaultizedYAxis
+    }
+  };
+};

package/esm/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/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.js

@@ -0,0 +1 @@
+export {};

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts

@@ -0,0 +1,56 @@
+import { ChartState } from '@mui/x-charts/internals';
+import { UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js";
+export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
+  gap: number;
+} | undefined;
+export declare const selectorFunnelGap: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+  funnel: {
+    gap: number;
+  };
+}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, number, []>;
+export declare const selectorChartXAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+  funnel: {
+    gap: number;
+  };
+}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>, []>;
+export declare const selectorChartYAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+  funnel: {
+    gap: number;
+  };
+}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsYAxisProps>, []>;

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js

@@ -0,0 +1,20 @@
+import { createSelector, selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
+import { computeAxisValue } from "./computeAxisValue.js";
+export const selectorFunnel = state => state.funnel;
+export const selectorFunnelGap = createSelector([selectorFunnel], funnel => funnel?.gap ?? 0);
+export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap], (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  gap
+}));
+export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap], (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  gap
+}));

package/esm/FunnelChart/labelUtils.d.ts

@@ -1,4 +1,5 @@
-import { FunnelDataPoints, FunnelLabelOptions } from "./funnel.types.js";
+import { FunnelLabelOptions } from "./funnel.types.js";
+import { Point } from "./curves/index.js";
 /**
  * It tries to keep the label inside the bounds of the section based on the position.
  *
@@ -23,19 +24,11 @@ export declare const alignLabel: ({
 export declare const positionLabel: ({
   position,
   offset,
-  xPosition,
-  yPosition,
   isHorizontal,
-  values,
-  dataIndex,
-  baseScaleData
+  values
 }: Omit<FunnelLabelOptions, "textAnchor" | "dominantBaseline"> & {
-  xPosition: (value: number, bandIndex: number, stackOffset?: number, useBand?: boolean) => number | undefined;
-  yPosition: (value: number, bandIndex: number, stackOffset?: number, useBand?: boolean) => number | undefined;
   isHorizontal: boolean;
-  values: readonly FunnelDataPoints[];
-  dataIndex: number;
-  baseScaleData: readonly number[];
+  values: readonly Point[];
 }) => {
   x: number;
   y: number;