@mui/x-charts-pro 8.1.0 → 8.2.0

package/BarChartPro/BarChartPro.js

@@ -91,6 +91,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
@@ -202,7 +203,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.default.func,
   /**

package/CHANGELOG.md

@@ -5,13 +5,128 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.2.0
+
+_May 1, 2025_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 `<FunnelChart/>` now uses the `strawberrySky` sequential color palette by default.
+  <img width="481" alt="Screenshot 2025-04-29 at 13 55 21" src="https://github.com/user-attachments/assets/182085d1-a7ce-4e4d-9d8d-a4fe87f27167" />
+- 📊 Add API to export a chart as an image: `apiRef.exportAsImage` — [Learn more](https://mui.com/x/react-charts/export/#export-as-image).
+
+Special thanks go out to the community members for their valuable contributions:
+@federico-ntr, @nusr.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.2.0`
+
+- [DataGrid] Fix panel alignment (#17625) @KenanYusuf
+- [DataGrid] Fix theme `defaultProps` causing unwanted re-renders (#17490) @KenanYusuf
+- [DataGrid] Fix circular reference error (#17591) @romgrk
+- [DataGrid] Fix `<GridEditInputCell />` break input (#16773) @nusr
+
+#### `@mui/x-data-grid-pro@8.2.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.2.0`, plus:
+
+- [DataGridPro] Use intersection observer to trigger server-side infinite loading (#17369) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.2.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.2.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.2.0`
+
+- [l10n] Improve Italian (it-IT) locale (#17600) @federico-ntr
+- [pickers] Refactor owner state typing (#17517) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.2.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.2.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.2.0`
+
+- [charts] Add library name to errors (#17547) @bernardobelchior
+- [charts] Add monochrome palettes (#17610) @JCQuintas
+- [charts] Add screenshot of the tooltip (#17395) @alexfauquette
+- [charts] Default bar chart x-axis scale type to band (#17519) @bernardobelchior
+- [charts] Document axis ID uniqueness constraints (#17630) @bernardobelchior
+- [charts] Refactor axis types (#17632) @bernardobelchior
+- [charts] Use `<circle />` for circular legend mark (#17590) @alexfauquette
+
+#### `@mui/x-charts-pro@8.2.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.2.0`, plus:
+
+- [charts-pro] Add `gap` option to `<FunnelChart />` (#17642) @JCQuintas
+- [charts-pro] Export charts as image (#17353) @bernardobelchior
+- [charts-pro] Simplify zoom testing (#17525) @JCQuintas
+- [charts-pro] Use new sequential color palette in `<FunnelChart />` (#17606) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.2.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.2.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.2.0`.
+
+### Docs
+
+- [docs][charts] Add composition sections (#17377) @alexfauquette
+- [docs][charts] Add docs on tooltip style (#17601) @bernardobelchior
+- [docs][charts] Fix highlighting heading structure (#17581) @oliviertassinari
+- [docs][charts] Improve export docs (#17538) @oliviertassinari
+- [docs][charts] Similar introduction on most charts pages (#17374) @alexfauquette
+- [docs][DataGrid] Clear component docs (#17540) @oliviertassinari
+- [docs] Explicitly state that `groupingColDef` reference needs to be stable (#17544) @arminmeh
+- [docs] Fix <kbd> a11y (#17536) @oliviertassinari
+- [docs] Fix CodeSandbox spelling @oliviertassinari
+- [docs] Fix coding style function @oliviertassinari
+- [docs] Fix migration guide format (#17450) @oliviertassinari
+- [docs] Improve data grid export docs (#17551) @MBilalShafi
+- [docs] Remove leftover `@next` usages (#17542) @LukasTy
+
+### Core
+
+- [core] Add security label to dependabot PRs @oliviertassinari
+- [core] Allow post-install vale @oliviertassinari
+- [core] Component consistency @oliviertassinari
+- [core] Fix all Vale errors @oliviertassinari
+- [core] Move `loadStyleSheets` to internals and use it in data grid and charts (#17548) @bernardobelchior
+- [core] Remove empty version (#17582) @oliviertassinari
+- [core] Remove eslint from codemod spec files (#17443) @alexfauquette
+- [core] Remove unnecessary versions (#17597) @oliviertassinari
+- [code-infra] Allow postinstall scripts for packages requesting it (#17635) @LukasTy
+- [code-infra] Data Grid `vitest` changes (#17619) @JCQuintas
+- [code-infra] Fix date-time sensitive tests (#17644) @JCQuintas
+- [code-infra] Fix extension handling for type imports (#17636) @Janpot
+- [code-infra] Further remove `clock=fake` and add `async act` for datagrid (#17563) @JCQuintas
+- [code-infra] Latest vitest picker changes (#17577) @JCQuintas
+- [docs-infra] Fix Vale no longer working (#17602) @alexfauquette
+- [docs-infra] Uniformize Vale between repositories @oliviertassinari
+- [infra] Updates to `branch switch comments` (#17589) @michelengelen
+- [x-telemetry] Fix issue with get machineid hash (#17614) @hasdfa
+
 ## 8.1.0
 
 _Apr 24, 2025_
 
 We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
 
-- 📊 Add API to print a chart or export it as PDF: `apiRef.exportAsPrint`.
+- 📊 Add API to print a chart or export it as PDF: `apiRef.exportAsPrint()`.
 - 📚 Documentation improvements
 - 🐞 Bugfixes
 
@@ -56,7 +171,7 @@ Same changes as in `@mui/x-date-pickers@8.1.0`.
 
 ### Charts
 
-- Add API to print a chart or export it as PDF: `apiRef.exportAsPrint`.
+- Add API to print a chart or export it as PDF: `apiRef.exportAsPrint()`.
 
 #### `@mui/x-charts@8.1.0`
 
@@ -1821,7 +1936,7 @@ Same changes as in `@mui/x-tree-view@8.0.0-alpha.8`.
 - [docs] Add example for custom legend (#16169) @alexfauquette
 - [docs] Add full custom field creation example (#15194) @flaviendelangle
 - [docs] Copyedit the Data Grid cell selection page (#16099) @samuelsycamore
-- [docs] Fix demo rendering issue on Codesandbox (#16118) @arminmeh
+- [docs] Fix demo rendering issue on CodeSandbox (#16118) @arminmeh
 - [docs] Remove broken links (#16167) @alexfauquette
 - [docs] Split the Data Grid editing page (#14931) @MBilalShafi
 - [docs] Fix wrong props warnings (#16119) @JCQuintas
@@ -2268,7 +2383,7 @@ Releasing to benefit from license package fix (#15814).
 
 - [code-infra] Add Charts sandbox generation (#15830) @JCQuintas
 - [code-infra] Remove redundant `@type/react-test-renderer` dep (#15766) @LukasTy
-- [license] Use `console.log` for the error message on Codesandbox to avoid rendering error (#15814) @arminmeh
+- [license] Use `console.log` for the error message on CodeSandbox to avoid rendering error (#15814) @arminmeh
 
 ## 8.0.0-alpha.3
 
@@ -2484,6 +2599,8 @@ Same changes as in `@mui/x-tree-view@v8.0.0-alpha.2`.
 
 ### Docs
 
+<!-- vale MUI.CorrectRererenceCased = NO -->
+
 - [docs] Fix 404 links (#15575) @oliviertassinari
 - [docs] Fix bash comments (#15571) @oliviertassinari
 - [docs] Fix Pickers theme augmentation example (#15672) @LukasTy
@@ -2493,6 +2610,8 @@ Same changes as in `@mui/x-tree-view@v8.0.0-alpha.2`.
 - [docs] Fix `anchorEl` API page for charts (#15625) @oliviertassinari
 - [docs] Add documentation for the list view feature (#15344) @KenanYusuf
 
+<!-- vale MUI.CorrectRererenceCased = YES -->
+
 ### Core
 
 - [core] Follow `()` function convention for docs @oliviertassinari
@@ -3401,7 +3520,7 @@ Same changes as in `@mui/x-tree-view@7.24.0`.
 ### Docs
 
 - [docs] Copyedit the Data Grid cell selection page (#16213) @samuelsycamore
-- [docs] Fix demo rendering issue on Codesandbox (#16129) @arminmeh
+- [docs] Fix demo rendering issue on CodeSandbox (#16129) @arminmeh
 
 ### Core
 
@@ -3679,7 +3798,7 @@ Releasing to benefit from license package fix (#15818).
 ### Core
 
 - [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15747) @flaviendelangle
-- [license] Use `console.log` for the error message on Codesandbox to avoid rendering error (#15818) @arminmeh
+- [license] Use `console.log` for the error message on CodeSandbox to avoid rendering error (#15818) @arminmeh
 
 ## 7.23.1
 
@@ -7020,7 +7139,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
    />
   ```
 
-- The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
+- The headless field hooks (for example `useDateField()`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
   This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure.
   Learn more about this new accessible DOM structure in the [v8 migration guide](https://v7.mui.com/x/migration/migration-pickers-v7/#new-dom-structure-for-the-field).
 

package/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/ChartDataProviderPro/ChartDataProviderPro.js

@@ -17,7 +17,7 @@ var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("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/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/FunnelChart/FunnelChart.js

@@ -70,6 +70,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
@@ -183,6 +184,11 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap: _propTypes.default.number,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -239,7 +245,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.default.func,
   /**

package/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/FunnelChart/FunnelPlot.js

@@ -17,21 +17,12 @@ var _hooks = require("@mui/x-charts/hooks");
 var _styles = require("@mui/material/styles");
 var _FunnelSection = require("./FunnelSection");
 var _labelUtils = require("./labelUtils");
-var _funnelStepCurve = require("./funnelStepCurve");
 var _useFunnelSeries = require("../hooks/useFunnelSeries");
+var _curves = require("./curves");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onItemClick"];
+const _excluded = ["onItemClick", "gap"];
 _internals.cartesianSeriesTypes.addType('funnel');
-const getFunnelCurve = (curve, isHorizontal) => {
-  if (curve === 'step') {
-    return isHorizontal ? _funnelStepCurve.funnelHorizontalStepCurve : _funnelStepCurve.funnelVerticalStepCurve;
-  }
-  if (curve === 'bump') {
-    return isHorizontal ? (0, _internals.getCurveFactory)('bumpX') : (0, _internals.getCurveFactory)('bumpY');
-  }
-  return (0, _internals.getCurveFactory)(curve ?? 'linear');
-};
-const useAggregatedData = () => {
+const useAggregatedData = gap => {
   const seriesData = (0, _useFunnelSeries.useFunnelSeriesContext)();
   const {
     xAxis,
@@ -63,7 +54,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 = (0, _curves.getFunnelCurve)(currentSeries.curve, isHorizontal, gap);
       const xPosition = (value, bandIndex, stackOffset, useBand) => {
         if (isXAxisBand) {
           const position = xScale(bandIndex);
@@ -109,16 +100,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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
-  const data = useAggregatedData();
+  const data = useAggregatedData(gap);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [data.map(({
       d,
@@ -172,6 +164,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.default.number,
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/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/FunnelChart/curves/bump.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Bump = void 0;
+/**
+ * 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
+ */
+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;
+  }
+}
+exports.Bump = Bump;

package/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/FunnelChart/curves/curve.types.js

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

package/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;
+}

package/FunnelChart/{funnelStepCurve.js → curves/funnelStep.js}

@@ -3,24 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.funnelVerticalStepCurve = exports.funnelHorizontalStepCurve = void 0;
+exports.FunnelStep = void 0;
 /**
  * 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
  */
 class FunnelStep {
-  constructor(context, isHorizontal) {
+  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;
@@ -47,28 +51,37 @@ class FunnelStep {
   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);
+      } else if (this.currentPoint === 1 || this.currentPoint === 2) {
+        this.context.lineTo(x - this.gap, this.y);
+        this.context.lineTo(x - this.gap, y);
+      } else {
+        this.context.lineTo(this.x - this.gap, y);
+        this.context.lineTo(x + this.gap, y);
+      }
+      this.currentPoint += 1;
+      this.x = x;
+      this.y = y;
+      return;
+    }
+
+    // 0 is the top-right corner.
     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);
+      this.context.moveTo(x, y + this.gap);
+    } else if (this.currentPoint === 3) {
+      this.context.lineTo(x, this.y - this.gap);
+      this.context.lineTo(x, y + this.gap);
     } else {
-      this.context.lineTo(this.x, y);
-      this.context.lineTo(x, y);
+      this.context.lineTo(this.x, y - this.gap);
+      this.context.lineTo(x, y - this.gap);
     }
     this.currentPoint += 1;
     this.x = x;
     this.y = y;
   }
 }
-const funnelHorizontalStepCurve = context => {
-  return new FunnelStep(context, true);
-};
-exports.funnelHorizontalStepCurve = funnelHorizontalStepCurve;
-const funnelVerticalStepCurve = context => {
-  return new FunnelStep(context, false);
-};
-exports.funnelVerticalStepCurve = funnelVerticalStepCurve;
+exports.FunnelStep = FunnelStep;

package/FunnelChart/curves/getFunnelCurve.d.ts

@@ -0,0 +1,3 @@
+import { CurveFactory } from '@mui/x-charts-vendor/d3-shape';
+import { FunnelCurveType } from "./curve.types.js";
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, isHorizontal: boolean, gap?: number) => CurveFactory;

package/FunnelChart/curves/getFunnelCurve.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFunnelCurve = void 0;
+var _funnelStep = require("./funnelStep");
+var _linear = require("./linear");
+var _bump = require("./bump");
+const curveConstructor = curve => {
+  if (curve === 'step') {
+    return _funnelStep.FunnelStep;
+  }
+  if (curve === 'bump') {
+    return _bump.Bump;
+  }
+  return _linear.Linear;
+};
+const getFunnelCurve = (curve, isHorizontal, gap = 0) => {
+  return context => new (curveConstructor(curve))(context, isHorizontal, gap);
+};
+exports.getFunnelCurve = getFunnelCurve;

package/FunnelChart/curves/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./curve.types.js";
+export * from "./getFunnelCurve.js";

package/FunnelChart/curves/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _curve = require("./curve.types");
+Object.keys(_curve).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _curve[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _curve[key];
+    }
+  });
+});
+var _getFunnelCurve = require("./getFunnelCurve");
+Object.keys(_getFunnelCurve).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getFunnelCurve[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getFunnelCurve[key];
+    }
+  });
+});