@mui/x-charts-pro 8.1.0 → 8.2.0

package/FunnelChart/curves/linear.d.ts

@@ -0,0 +1,24 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * This is a custom "linear" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape linear curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
+ */
+export declare class Linear implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/FunnelChart/curves/linear.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Linear = void 0;
+// From point1 to point2, get the x value from y
+const xFromY = (x1, y1, x2, y2) => y => {
+  if (y1 === y2) {
+    return x1;
+  }
+  const result = (x2 - x1) * (y - y1) / (y2 - y1) + x1;
+  return Number.isNaN(result) ? 0 : result;
+};
+
+// From point1 to point2, get the y value from x
+const yFromX = (x1, y1, x2, y2) => x => {
+  if (x1 === x2) {
+    return y1;
+  }
+  const result = (y2 - y1) * (x - x1) / (x2 - x1) + y1;
+  return Number.isNaN(result) ? 0 : result;
+};
+
+/**
+ * This is a custom "linear" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape linear curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
+ */
+class Linear {
+  constructor(context, isHorizontal, gap = 0) {
+    this.context = void 0;
+    this.line = NaN;
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.context = context;
+    this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
+  }
+  areaStart() {
+    this.line = 0;
+  }
+  areaEnd() {
+    this.line = NaN;
+  }
+  lineStart() {
+    this.currentPoint = 0;
+  }
+  lineEnd() {
+    if (this.line || this.line !== 0 && this.currentPoint === 1) {
+      this.context.closePath();
+    }
+    this.line = 1 - this.line;
+  }
+  point(x, y) {
+    x = +x;
+    y = +y;
+
+    // We draw the lines only at currentPoint 1 & 3 because we need
+    // The data of a pair of points to draw the lines.
+    // Hence currentPoint 1 draws a line from point 0 to point 1 and point 1 to point 2.
+    // currentPoint 3 draws a line from point 2 to point 3 and point 3 to point 0.
+
+    if (this.isHorizontal) {
+      const yGetter = yFromX(this.x, this.y, x, y);
+      let xGap = 0;
+
+      // 0 is the top-left corner.
+      if (this.currentPoint === 1) {
+        xGap = this.x + this.gap;
+        this.context.moveTo(xGap, yGetter(xGap));
+        this.context.lineTo(xGap, yGetter(xGap));
+        xGap = x - this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+      } else if (this.currentPoint === 3) {
+        xGap = this.x - this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+        xGap = x + this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+      }
+    }
+    if (!this.isHorizontal) {
+      const xGetter = xFromY(this.x, this.y, x, y);
+      let yGap = 0;
+
+      // 0 is the top-right corner.
+      if (this.currentPoint === 1) {
+        yGap = this.y + this.gap;
+        this.context.moveTo(xGetter(yGap), yGap);
+        this.context.lineTo(xGetter(yGap), yGap);
+        yGap = y - this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+      } else if (this.currentPoint === 3) {
+        yGap = this.y - this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+        yGap = y + this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+      }
+    }
+
+    // Increment the values
+    this.currentPoint += 1;
+    this.x = x;
+    this.y = y;
+  }
+}
+exports.Linear = Linear;

package/FunnelChart/funnel.types.d.ts

@@ -1,9 +1,9 @@
 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 { Position } from '@mui/x-charts/models';
 import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
+import { FunnelCurveType } from "./curves/index.js";
 export type FunnelItemId = string | number;
-export type FunnelCurveType = Extract<CurveType, 'linear' | 'step'> | 'bump';
 export type FunnelValueType = {
   /**
    * A unique identifier of the funnel section.

package/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelPlotSlots {
   funnelSection?: React.ElementType<FunnelSectionProps>;
 }

package/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,4 @@
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;

package/FunnelChart/index.d.ts

@@ -1,8 +1,9 @@
 export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
-export type { FunnelChartProps } from './FunnelChart';
+export type { FunnelChartProps } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
+export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
-export type { FunnelSectionClasses } from './funnelSectionClasses';
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";

package/FunnelChart/useFunnelChartProps.d.ts

@@ -5,7 +5,7 @@ import { ChartsClipPathProps } from '@mui/x-charts/ChartsClipPath';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { FunnelPlotProps } from "./FunnelPlot.js";
-import type { FunnelChartProps } from './FunnelChart';
+import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 /**
  * A helper function that extracts FunnelChartProps from the input props

package/FunnelChart/useFunnelChartProps.js

@@ -12,7 +12,8 @@ var _constants = require("@mui/x-charts/constants");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _internals = require("@mui/x-charts/internals");
 var _warning = require("@mui/x-internals/warning");
-const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef"];
+var _colorPalettes = require("@mui/x-charts/colorPalettes");
+const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({
@@ -20,7 +21,7 @@ function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   }, (_, index) => series.reduce((a, s) => a + (s.data?.[index]?.value ?? 0), 0));
   if (process.env.NODE_ENV !== 'production') {
     if ((categoryAxis?.position === 'left' || categoryAxis?.position === 'right') && isHorizontal || (categoryAxis?.position === 'top' || categoryAxis?.position === 'bottom') && !isHorizontal) {
-      (0, _warning.warnOnce)([`MUI X: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
+      (0, _warning.warnOnce)([`MUI X Charts: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
     }
   }
   const side = isHorizontal ? 'bottom' : 'left';
@@ -90,7 +91,8 @@ const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef
+      apiRef,
+      gap
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
@@ -113,7 +115,7 @@ const useFunnelChartProps = props => {
     width,
     height,
     margin,
-    colors,
+    colors: colors ?? _colorPalettes.strawberrySkyPalette,
     xAxis: [xAxis],
     yAxis: [yAxis],
     sx,
@@ -123,6 +125,7 @@ const useFunnelChartProps = props => {
     apiRef
   });
   const funnelPlotProps = {
+    gap,
     onItemClick,
     slots,
     slotProps

package/Heatmap/Heatmap.js

@@ -194,7 +194,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
   /**

package/LineChartPro/LineChartPro.js

@@ -96,6 +96,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
@@ -197,7 +198,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
   /**

package/ScatterChartPro/ScatterChartPro.js

@@ -90,6 +90,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
@@ -188,7 +189,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
   /**

package/esm/BarChartPro/BarChartPro.js

@@ -84,6 +84,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
@@ -195,7 +196,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**

package/esm/ChartContainerPro/useChartContainerProProps.d.ts

@@ -1,7 +1,7 @@
 import { ChartAnyPluginSignature, ChartSeriesType, UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
-import type { ChartContainerProProps } from './ChartContainerPro';
+import type { ChartContainerProProps } from "./ChartContainerPro.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
   chartDataProviderProProps: ChartDataProviderProps<TSeries, TSignatures>;

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -10,7 +10,7 @@ import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0NTQ0NTYwMDAwMA==";
+const releaseInfo = "MTc0NjA0NjgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -1,6 +1,6 @@
 import { ChartAnyPluginSignature, ChartSeriesType } from '@mui/x-charts/internals';
-import type { ChartDataProviderProProps } from './ChartDataProviderPro';
-import type { AllPluginSignatures } from '../internals/plugins/allPlugins';
+import type { ChartDataProviderProProps } from "./ChartDataProviderPro.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export declare const useChartDataProviderProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProProps<TSeries, TSignatures>) => {
   children: import("react").ReactNode;
   localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;

package/esm/FunnelChart/FunnelChart.js

@@ -63,6 +63,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
@@ -176,6 +177,11 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default false
    */
   disableAxisListener: 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.
    */
@@ -232,7 +238,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**

package/esm/FunnelChart/FunnelPlot.d.ts

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { FunnelItemIdentifier } from "./funnel.types.js";
 import { FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
 export interface FunnelPlotProps extends FunnelPlotSlotExtension {
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap?: number;
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/FunnelChart/FunnelPlot.js

@@ -1,29 +1,20 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["onItemClick"];
+const _excluded = ["onItemClick", "gap"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { getCurveFactory, cartesianSeriesTypes } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes } from '@mui/x-charts/internals';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { useTheme } from '@mui/material/styles';
 import { FunnelSection } from "./FunnelSection.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
-import { funnelHorizontalStepCurve, funnelVerticalStepCurve } from "./funnelStepCurve.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
+import { getFunnelCurve } from "./curves/index.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 cartesianSeriesTypes.addType('funnel');
-const getFunnelCurve = (curve, isHorizontal) => {
-  if (curve === 'step') {
-    return isHorizontal ? funnelHorizontalStepCurve : funnelVerticalStepCurve;
-  }
-  if (curve === 'bump') {
-    return isHorizontal ? getCurveFactory('bumpX') : getCurveFactory('bumpY');
-  }
-  return getCurveFactory(curve ?? 'linear');
-};
-const useAggregatedData = () => {
+const useAggregatedData = gap => {
   const seriesData = useFunnelSeriesContext();
   const {
     xAxis,
@@ -55,7 +46,7 @@ const useAggregatedData = () => {
       const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
-      const curve = getFunnelCurve(currentSeries.curve, isHorizontal);
+      const curve = getFunnelCurve(currentSeries.curve, isHorizontal, gap);
       const xPosition = (value, bandIndex, stackOffset, useBand) => {
         if (isXAxisBand) {
           const position = xScale(bandIndex);
@@ -101,16 +92,17 @@ const useAggregatedData = () => {
       });
     });
     return result.flat();
-  }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds]);
+  }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
   return allData;
 };
 function FunnelPlot(props) {
   const {
-      onItemClick
+      onItemClick,
+      gap
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
-  const data = useAggregatedData();
+  const data = useAggregatedData(gap);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [data.map(({
       d,
@@ -164,6 +156,11 @@ process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap: PropTypes.number,
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

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

@@ -0,0 +1,24 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * This is a custom "bump" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape bump curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/bump.js
+ */
+export declare class Bump implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/esm/FunnelChart/curves/bump.js

@@ -0,0 +1,75 @@
+/**
+ * This is a custom "bump" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape bump curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/bump.js
+ */
+export class Bump {
+  constructor(context, isHorizontal, gap = 0) {
+    this.context = void 0;
+    this.line = NaN;
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.context = context;
+    this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
+  }
+  areaStart() {
+    this.line = 0;
+  }
+  areaEnd() {
+    this.line = NaN;
+  }
+  lineStart() {
+    this.currentPoint = 0;
+  }
+  lineEnd() {
+    if (this.line || this.line !== 0 && this.currentPoint === 1) {
+      this.context.closePath();
+    }
+    this.line = 1 - this.line;
+  }
+  point(x, y) {
+    x = +x;
+    y = +y;
+
+    // 0 is the top-left corner.
+    if (this.isHorizontal) {
+      if (this.currentPoint === 0) {
+        this.context.moveTo(x + this.gap, y);
+        this.context.lineTo(x + this.gap, y);
+      } else if (this.currentPoint === 1) {
+        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x - this.gap, y);
+      } else if (this.currentPoint === 2) {
+        this.context.lineTo(x - this.gap, y);
+      } else {
+        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x + this.gap, y);
+      }
+      this.currentPoint += 1;
+      this.x = x;
+      this.y = y;
+      return;
+    }
+
+    // 0 is the top-right corner.
+    if (this.currentPoint === 0) {
+      // X from Y
+      this.context.moveTo(x, y + this.gap);
+      this.context.lineTo(x, y + this.gap);
+    } else if (this.currentPoint === 1) {
+      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y - this.gap);
+    } else if (this.currentPoint === 2) {
+      this.context.lineTo(x, y - this.gap);
+    } else {
+      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y + this.gap);
+    }
+    this.currentPoint += 1;
+    this.x = x;
+    this.y = y;
+  }
+}

package/esm/FunnelChart/curves/curve.types.d.ts

@@ -0,0 +1,8 @@
+export type FunnelCurveOptions = {
+  /**
+   * The gap between the funnel segments.
+   * @default 0
+   */
+  gap?: number;
+};
+export type FunnelCurveType = 'linear' | 'step' | 'bump';

package/esm/FunnelChart/curves/curve.types.js

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

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

@@ -0,0 +1,25 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * 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 takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape step curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
+ */
+export declare class FunnelStep implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}