@mui/x-charts-pro 8.0.0-alpha.13 → 8.0.0-alpha.14

package/esm/FunnelChart/funnel.types.d.ts

@@ -0,0 +1,124 @@
+import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
+import { CommonSeriesType, CartesianSeriesType, CommonDefaultizedProps, SeriesId } from '@mui/x-charts/internals';
+import { CurveType, Position } from '@mui/x-charts/models';
+import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
+export type FunnelItemId = string | number;
+export type FunnelCurveType = Extract<CurveType, 'linear' | 'step'> | 'bump';
+export type FunnelValueType = {
+  /**
+   * A unique identifier of the funnel section.
+   */
+  id?: FunnelItemId;
+  /**
+   * The value of the funnel section.
+   */
+  value: number;
+  /**
+   * The label to display on the tooltip, funnel section, or the legend. It can be a string or a function.
+   */
+  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string);
+  /**
+   * The color of the funnel section
+   */
+  color?: string;
+  /**
+   * Defines the mark type for the funnel item.
+   * @default 'square'
+   */
+  labelMarkType?: ChartsLabelMarkProps['type'];
+};
+export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>, 'color'>, CartesianSeriesType {
+  type: 'funnel';
+  /**
+   * Data associated to the funnel section.
+   */
+  data: Readonly<FunnelValueType[]>;
+  /**
+   * The label to display on the tooltip or the legend. It can be a string or a function.
+   */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line. Read more about curves at
+   * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => FunnelLabelOptions | false) | false;
+}
+/**
+ * An object that allows to identify a funnel item.
+ * Used for item interaction
+ */
+export type FunnelItemIdentifier = {
+  type: 'funnel';
+  /**
+   * The series id of the funnel.
+   */
+  seriesId: SeriesId;
+  /**
+   * The index of the data point in the series.
+   */
+  dataIndex: number;
+};
+export type FunnelItem = {
+  /**
+   * The series id of the funnel.
+   */
+  seriesId: SeriesId;
+  /**
+   * The index of the data point in the series.
+   */
+  dataIndex: number;
+  /**
+   * The value of the data point.
+   */
+  value: number;
+};
+export interface DefaultizedFunnelSeriesType extends DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'> {
+  dataPoints: FunnelDataPoints[][];
+  data: Readonly<MakeRequired<FunnelValueType, 'id' | 'color'>[]>;
+}
+export type FunnelDataPoints = Record<'x' | 'y', number> & {
+  useBandWidth: boolean;
+  stackOffset: number;
+};
+export type FunnelLabelOptions = {
+  /**
+   * The position of the label.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  position?: Position;
+  /**
+   * The text anchor of the label. Affects the horizontal alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  textAnchor?: 'start' | 'middle' | 'end';
+  /**
+   * The dominant baseline of the label. Affects the vertical alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  dominantBaseline?: 'auto' | 'baseline' | 'hanging' | 'middle' | 'central' | 'text-after-edge' | 'text-before-edge';
+  /**
+   * The offset of the label from the anchor point.
+   * If a single number is provided, the offset will be applied in both directions.
+   * @default 0
+   */
+  offset?: number | {
+    x?: number;
+    y?: number;
+  };
+};

package/esm/FunnelChart/funnel.types.js

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

package/esm/FunnelChart/funnelPlotSlots.types.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { FunnelSectionProps } from './FunnelSection';
+export interface FunnelPlotSlots {
+  funnelSection?: React.ElementType<FunnelSectionProps>;
+}
+export interface FunnelPlotSlotProps {
+  funnelSection?: FunnelSectionProps;
+}
+export interface FunnelPlotSlotExtension {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+}

package/esm/FunnelChart/funnelPlotSlots.types.js

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

package/esm/FunnelChart/funnelSectionClasses.d.ts

@@ -0,0 +1,13 @@
+import type { FunnelSectionProps } from './FunnelSection';
+export interface FunnelSectionClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `highlighted={true}`. */
+  highlighted: string;
+  /** Styles applied to the root element if `faded={true}`. */
+  faded: string;
+  /** Styles applied to the label element. */
+  label: string;
+}
+export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "highlighted" | "faded" | "root", string>;
+export declare const funnelSectionClasses: FunnelSectionClasses;

package/esm/FunnelChart/funnelSectionClasses.js

@@ -0,0 +1,20 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getFunnelSectionUtilityClass(slot) {
+  return generateUtilityClass('MuiFunnelSection', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    seriesId
+  } = props;
+  const slots = {
+    root: ['root', `series-${seriesId}`],
+    highlighted: ['highlighted'],
+    faded: ['faded'],
+    label: ['label']
+  };
+  return composeClasses(slots, getFunnelSectionUtilityClass, classes);
+};
+export const funnelSectionClasses = generateUtilityClasses('MuiFunnelSection', ['root', 'highlighted', 'faded', 'label']);

package/esm/FunnelChart/funnelSlots.types.d.ts

@@ -0,0 +1,19 @@
+import { ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
+import { ChartsTooltipSlotProps, ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
+import { ChartsAxisSlotProps, ChartsAxisSlots } from '@mui/x-charts/internals';
+import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
+import { FunnelPlotSlotProps, FunnelPlotSlots } from "./funnelPlotSlots.types.js";
+export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots {}
+export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps {}
+export interface FunnelChartSlotExtension {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+}

package/esm/FunnelChart/funnelSlots.types.js

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

package/esm/FunnelChart/funnelStepCurve.d.ts

@@ -0,0 +1,4 @@
+import { CurveFactory } from '@mui/x-charts-vendor/d3-shape';
+declare const funnelHorizontalStepCurve: CurveFactory;
+declare const funnelVerticalStepCurve: CurveFactory;
+export { funnelHorizontalStepCurve, funnelVerticalStepCurve };

package/esm/FunnelChart/funnelStepCurve.js

@@ -0,0 +1,67 @@
+/**
+ * This is a custom "step" curve generator for the funnel chart.
+ * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
+ *
+ * It is based on the d3-shape step curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
+ */
+class FunnelStep {
+  constructor(context, isHorizontal) {
+    this.context = void 0;
+    this.line = NaN;
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+    this.isHorizontal = false;
+    this.context = context;
+    this.isHorizontal = isHorizontal;
+  }
+  areaStart() {
+    this.line = 0;
+  }
+  areaEnd() {
+    this.line = NaN;
+  }
+  lineStart() {
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+  }
+  lineEnd() {
+    if (this.currentPoint === 2) {
+      this.context.lineTo(this.x, this.y);
+    }
+    if (this.line || this.line !== 0 && this.currentPoint === 1) {
+      this.context.closePath();
+    }
+    if (this.line >= 0) {
+      this.line = 1 - this.line;
+    }
+  }
+  point(x, y) {
+    x = +x;
+    y = +y;
+    if (this.currentPoint === 0) {
+      this.context.moveTo(x, y);
+    } else if (this.isHorizontal && (this.currentPoint === 2 || this.currentPoint === 1)) {
+      this.context.lineTo(x, this.y);
+      this.context.lineTo(x, y);
+    } else if (this.currentPoint === 3 && !this.isHorizontal) {
+      this.context.lineTo(x, this.y);
+      this.context.lineTo(x, y);
+    } else {
+      this.context.lineTo(this.x, y);
+      this.context.lineTo(x, y);
+    }
+    this.currentPoint += 1;
+    this.x = x;
+    this.y = y;
+  }
+}
+const funnelHorizontalStepCurve = context => {
+  return new FunnelStep(context, true);
+};
+const funnelVerticalStepCurve = context => {
+  return new FunnelStep(context, false);
+};
+export { funnelHorizontalStepCurve, funnelVerticalStepCurve };

package/esm/FunnelChart/index.d.ts

@@ -0,0 +1,7 @@
+export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
+export type { FunnelChartProps } from './FunnelChart';
+export * from "./FunnelPlot.js";
+export * from "./funnel.types.js";
+export * from "./funnelSlots.types.js";
+export { funnelSectionClasses } from "./funnelSectionClasses.js";
+export type { FunnelSectionClasses } from './funnelSectionClasses';

package/esm/FunnelChart/index.js

@@ -0,0 +1,5 @@
+export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
+export * from "./FunnelPlot.js";
+export * from "./funnel.types.js";
+export * from "./funnelSlots.types.js";
+export { funnelSectionClasses } from "./funnelSectionClasses.js";

package/esm/FunnelChart/labelUtils.d.ts

@@ -0,0 +1,42 @@
+import { FunnelDataPoints, FunnelLabelOptions } from "./funnel.types.js";
+/**
+ * It tries to keep the label inside the bounds of the section based on the position.
+ *
+ * @returns The text anchor and dominant baseline of the label.
+ */
+export declare const alignLabel: ({
+  position,
+  textAnchor,
+  dominantBaseline
+}: Omit<FunnelLabelOptions, "margin">) => {
+  textAnchor: string;
+  dominantBaseline: string;
+};
+/**
+ * This function calculates the position of the label based on the position and margin.
+ *
+ * It is quite complex, because it needs to calculate the position based on the position of the points of a rectangle.
+ * And we are manually calculating each possible position of the label.
+ *
+ * @returns The x and y position of the label.
+ */
+export declare const positionLabel: ({
+  position,
+  offset,
+  xPosition,
+  yPosition,
+  isHorizontal,
+  values,
+  dataIndex,
+  baseScaleData
+}: 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[];
+}) => {
+  x: number;
+  y: number;
+};

package/esm/FunnelChart/labelUtils.js

@@ -0,0 +1,166 @@
+/**
+ * It tries to keep the label inside the bounds of the section based on the position.
+ *
+ * @returns The text anchor and dominant baseline of the label.
+ */
+export const alignLabel = ({
+  position,
+  textAnchor,
+  dominantBaseline
+}) => {
+  const vertical = position?.vertical ?? 'middle';
+  const horizontal = position?.horizontal ?? 'center';
+  let anchor = 'middle';
+  let baseline = 'central';
+  if (vertical === 'top') {
+    baseline = 'hanging';
+  } else if (vertical === 'bottom') {
+    baseline = 'baseline';
+  }
+  if (horizontal === 'start') {
+    anchor = 'start';
+  } else if (horizontal === 'end') {
+    anchor = 'end';
+  }
+  return {
+    textAnchor: textAnchor ?? anchor,
+    dominantBaseline: dominantBaseline ?? baseline
+  };
+};
+
+/**
+ * This function calculates the position of the label based on the position and margin.
+ *
+ * It is quite complex, because it needs to calculate the position based on the position of the points of a rectangle.
+ * And we are manually calculating each possible position of the label.
+ *
+ * @returns The x and y position of the label.
+ */
+export const positionLabel = ({
+  position,
+  offset,
+  xPosition,
+  yPosition,
+  isHorizontal,
+  values,
+  dataIndex,
+  baseScaleData
+}) => {
+  const vertical = position?.vertical ?? 'middle';
+  const horizontal = position?.horizontal ?? 'center';
+  let x = 0;
+  let y = 0;
+  let minTop = 0;
+  let maxTop = 0;
+  let minBottom = 0;
+  let maxBottom = 0;
+  let minLeft = 0;
+  let maxLeft = 0;
+  let minRight = 0;
+  let maxRight = 0;
+  let center = 0;
+  let leftCenter = 0;
+  let rightCenter = 0;
+  let middle = 0;
+  let topMiddle = 0;
+  let bottomMiddle = 0;
+  const mv = typeof offset === 'number' ? offset : offset?.y ?? 0;
+  const mh = typeof offset === 'number' ? offset : offset?.x ?? 0;
+  const stackOffset = values[0].stackOffset;
+  if (isHorizontal) {
+    maxTop = yPosition(values[0].y, baseScaleData[dataIndex], stackOffset) - mv;
+    minTop = yPosition(values[1].y, baseScaleData[dataIndex], stackOffset) - mv;
+    minBottom = yPosition(values[2].y, baseScaleData[dataIndex], stackOffset) + mv;
+    maxBottom = yPosition(values[3].y, baseScaleData[dataIndex], stackOffset) + mv;
+    minRight = 0;
+    maxRight = xPosition(Math.min(...values.map(v => v.x)), baseScaleData[dataIndex], stackOffset, true) + mh;
+    minLeft = 0;
+    maxLeft = xPosition(Math.max(...values.map(v => v.x)), baseScaleData[dataIndex], stackOffset) + mh;
+    center = maxRight - (maxRight - maxLeft) / 2;
+    leftCenter = 0;
+    rightCenter = 0;
+    middle = yPosition(0, baseScaleData[dataIndex], stackOffset) - mv;
+    topMiddle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, baseScaleData[dataIndex], stackOffset) - mv;
+    bottomMiddle = yPosition(values[3].y - (values[3].y - values[2].y) / 2, baseScaleData[dataIndex], stackOffset) + mv;
+  } else {
+    minTop = 0;
+    maxTop = yPosition(Math.max(...values.map(v => v.y)), baseScaleData[dataIndex], stackOffset) - mv;
+    minBottom = 0;
+    maxBottom = yPosition(Math.min(...values.map(v => v.y)), baseScaleData[dataIndex], stackOffset, true) - mv;
+    maxRight = xPosition(values[0].x, baseScaleData[dataIndex], stackOffset) + mh;
+    minRight = xPosition(values[1].x, baseScaleData[dataIndex], stackOffset) + mh;
+    minLeft = xPosition(values[2].x, baseScaleData[dataIndex], stackOffset) - mh;
+    maxLeft = xPosition(values[3].x, baseScaleData[dataIndex], stackOffset) - mh;
+    center = xPosition(0, baseScaleData[dataIndex], stackOffset) - mh;
+    rightCenter = xPosition(values[0].x - (values[0].x - values[1].x) / 2, baseScaleData[dataIndex], stackOffset) + mh;
+    leftCenter = xPosition(values[3].x - (values[3].x - values[2].x) / 2, baseScaleData[dataIndex], stackOffset) - mh;
+    middle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, baseScaleData[dataIndex], stackOffset);
+    middle = maxTop - (maxTop - maxBottom) / 2;
+    topMiddle = 0;
+    bottomMiddle = 0;
+  }
+  if (isHorizontal) {
+    if (horizontal === 'center') {
+      x = center;
+      if (vertical === 'top') {
+        y = topMiddle;
+      } else if (vertical === 'middle') {
+        y = middle;
+      } else if (vertical === 'bottom') {
+        y = bottomMiddle;
+      }
+    } else if (horizontal === 'start') {
+      x = maxLeft;
+      if (vertical === 'top') {
+        y = maxTop;
+      } else if (vertical === 'middle') {
+        y = middle;
+      } else if (vertical === 'bottom') {
+        y = maxBottom;
+      }
+    } else if (horizontal === 'end') {
+      x = maxRight;
+      if (vertical === 'top') {
+        y = minTop;
+      } else if (vertical === 'middle') {
+        y = middle;
+      } else if (vertical === 'bottom') {
+        y = minBottom;
+      }
+    }
+  }
+  if (!isHorizontal) {
+    if (vertical === 'middle') {
+      y = middle;
+      if (horizontal === 'start') {
+        x = leftCenter;
+      } else if (horizontal === 'center') {
+        x = center;
+      } else if (horizontal === 'end') {
+        x = rightCenter;
+      }
+    } else if (vertical === 'top') {
+      y = maxTop;
+      if (horizontal === 'start') {
+        x = maxLeft;
+      } else if (horizontal === 'center') {
+        x = center;
+      } else if (horizontal === 'end') {
+        x = maxRight;
+      }
+    } else if (vertical === 'bottom') {
+      y = maxBottom;
+      if (horizontal === 'start') {
+        x = minLeft;
+      } else if (horizontal === 'center') {
+        x = center;
+      } else if (horizontal === 'end') {
+        x = minRight;
+      }
+    }
+  }
+  return {
+    x,
+    y
+  };
+};

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

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

package/esm/FunnelChart/seriesConfig/extremums.js

@@ -0,0 +1,42 @@
+const getValueExtremum = (direction, isHorizontal, params) => {
+  const {
+    series,
+    axis,
+    isDefaultAxis
+  } = params;
+  return Object.keys(series)
+  // Keep only series that are associated with the current axis
+  .reduce((acc, seriesId) => {
+    const yAxisId = series[seriesId].yAxisId;
+    const xAxisId = series[seriesId].xAxisId;
+    const {
+      dataPoints
+    } = series[seriesId];
+    if (
+    // We skip except if the axis id is not defined for the direction and we are on the default one.
+    !(isDefaultAxis && yAxisId === undefined && direction === 'y') && !(isDefaultAxis && xAxisId === undefined && direction === 'x')) {
+      return acc;
+    }
+    if (axis.scaleType === 'band' || !isHorizontal && direction === 'x' || isHorizontal && direction === 'y') {
+      const [seriesMin, seriesMax] = dataPoints.map(v => v.map(t => t[direction]))?.reduce((seriesAcc, values) => {
+        return [Math.min(...values, seriesAcc[0]), Math.max(...values, seriesAcc[1])];
+      }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
+      return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
+    }
+    const seriesMin = dataPoints.flatMap(v => v.map(t => t[direction]).reduce((min, value) => Math.min(value, min), Infinity)).reduce((sumAcc, value) => sumAcc + value, 0);
+    const seriesMax = dataPoints.flatMap(v => v.map(t => t[direction]).reduce((max, value) => Math.max(value, max), -Infinity)).reduce((sumAcc, value) => sumAcc + value, 0);
+    return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
+  }, [Infinity, -Infinity]);
+};
+export const getExtremumX = params => {
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    const [min, max] = getValueExtremum('x', isHorizontal, params);
+    return [max, min];
+  }
+  return getValueExtremum('x', isHorizontal, params);
+};
+export const getExtremumY = params => {
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  return getValueExtremum('y', isHorizontal, params);
+};

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

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

package/esm/FunnelChart/seriesConfig/getColor.js

@@ -0,0 +1,4 @@
+const getColor = series => {
+  return dataIndex => series.data[dataIndex].color;
+};
+export default getColor;

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

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

package/esm/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js

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

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

@@ -0,0 +1,2 @@
+import type { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
+export declare const seriesConfig: ChartSeriesTypeConfig<'funnel'>;

package/esm/FunnelChart/seriesConfig/index.js

@@ -0,0 +1,15 @@
+import { getExtremumX, getExtremumY } from "./extremums.js";
+import seriesProcessor from "./seriesProcessor.js";
+import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
+import tooltipGetter from "./tooltip.js";
+import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
+export const seriesConfig = {
+  seriesProcessor,
+  colorProcessor: getColor,
+  legendGetter,
+  tooltipGetter,
+  xExtremumGetter: getExtremumX,
+  yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues
+};

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

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

package/esm/FunnelChart/seriesConfig/legend.js

@@ -0,0 +1,25 @@
+import { getLabel } from '@mui/x-charts/internals';
+const legendGetter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  return seriesOrder.reduce((acc, seriesId) => {
+    series[seriesId].data.forEach(item => {
+      const formattedLabel = getLabel(item.label, 'legend');
+      if (formattedLabel === undefined) {
+        return;
+      }
+      acc.push({
+        markType: item.labelMarkType ?? series[seriesId].labelMarkType,
+        seriesId,
+        id: item.id,
+        itemId: item.id,
+        color: item.color,
+        label: formattedLabel
+      });
+    });
+    return acc;
+  }, []);
+};
+export default legendGetter;

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

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