@mui/x-charts-pro 8.5.2 → 8.6.0

package/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,7 +1,20 @@
-import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
-export interface ChartsToolbarProProps extends ChartsToolbarProps {}
+import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
+import { ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.js";
+import { ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.js";
+export interface ChartsToolbarProProps extends ChartsToolbarProps {
+  printOptions?: ChartsToolbarPrintExportOptions;
+  imageExportOptions?: ChartsToolbarImageExportOptions[];
+}
 /**
  * The chart toolbar component for the pro package.
  */
-export declare function ChartsToolbarPro(props: ChartsToolbarProProps): React.JSX.Element | null;
+declare function ChartsToolbarPro({
+  printOptions,
+  imageExportOptions: rawImageExportOptions,
+  ...other
+}: ChartsToolbarProProps): React.JSX.Element | null;
+declare namespace ChartsToolbarPro {
+  var propTypes: any;
+}
+export { ChartsToolbarPro };

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,24 +1,42 @@
 "use strict";
+'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsToolbarPro = ChartsToolbarPro;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _Toolbar = require("@mui/x-charts/Toolbar");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Toolbar = require("@mui/x-charts/Toolbar");
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _ChartsToolbarDivider = require("./internals/ChartsToolbarDivider");
+var _ChartsMenu = require("./internals/ChartsMenu");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
 var _ChartsToolbarZoomInTrigger = require("./ChartsToolbarZoomInTrigger");
 var _ChartsToolbarZoomOutTrigger = require("./ChartsToolbarZoomOutTrigger");
+var _ChartsToolbarPrintExportTrigger = require("./ChartsToolbarPrintExportTrigger");
+var _ChartsToolbarImageExportTrigger = require("./ChartsToolbarImageExportTrigger");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["printOptions", "imageExportOptions"];
+const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
+  type: 'image/png'
+}];
+
 /**
  * The chart toolbar component for the pro package.
  */
-function ChartsToolbarPro(props) {
+function ChartsToolbarPro(_ref) {
+  let {
+      printOptions,
+      imageExportOptions: rawImageExportOptions
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
     slots,
     slotProps
@@ -29,7 +47,13 @@ function ChartsToolbarPro(props) {
   const {
     localeText
   } = (0, _hooks.useChartsLocalization)();
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef(null);
+  const exportMenuId = (0, _useId.default)();
+  const exportMenuTriggerId = (0, _useId.default)();
   const isZoomEnabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartZoomIsEnabled);
+  const imageExportOptionList = rawImageExportOptions ?? DEFAULT_IMAGE_EXPORT_OPTIONS;
+  const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];
   if (isZoomEnabled) {
     const Tooltip = slots.baseTooltip;
@@ -38,22 +62,108 @@ function ChartsToolbarPro(props) {
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInTrigger.ChartsToolbarZoomInTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {}),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({}, slotProps.zoomInIcon))
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({
+          fontSize: "small"
+        }, slotProps.zoomInIcon))
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutTrigger.ChartsToolbarZoomOutTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {}),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({}, slotProps.zoomOutIcon))
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({
+          fontSize: "small"
+        }, slotProps.zoomOutIcon))
       })
     }), "zoom-out"));
   }
+  if (showExportMenu) {
+    const Tooltip = slots.baseTooltip;
+    const MenuList = slots.baseMenuList;
+    const MenuItem = slots.baseMenuItem;
+    const ExportIcon = slots.exportIcon;
+    const closeExportMenu = () => setExportMenuOpen(false);
+    const handleListKeyDown = event => {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+      }
+      if (isHideMenuKey(event.key)) {
+        closeExportMenu();
+      }
+    };
+    if (children.length > 0) {
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarDivider.ChartsToolbarDivider, {}, "divider"));
+    }
+    children.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+        title: localeText.toolbarExport,
+        disableInteractive: exportMenuOpen,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+          ref: exportMenuTriggerRef,
+          id: exportMenuTriggerId,
+          "aria-controls": exportMenuId,
+          "aria-haspopup": "true",
+          "aria-expanded": exportMenuOpen ? 'true' : undefined,
+          onClick: () => setExportMenuOpen(!exportMenuOpen),
+          size: "small",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExportIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsMenu.ChartsMenu, {
+        target: exportMenuTriggerRef.current,
+        open: exportMenuOpen,
+        onClose: closeExportMenu,
+        position: "bottom-end",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuList, (0, _extends2.default)({
+          id: exportMenuId,
+          "aria-labelledby": exportMenuTriggerId,
+          onKeyDown: handleListKeyDown,
+          autoFocusItem: true
+        }, slotProps?.baseMenuList, {
+          children: [!printOptions?.disableToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPrintExportTrigger.ChartsToolbarPrintExportTrigger, {
+            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItem, (0, _extends2.default)({
+              dense: true
+            }, slotProps?.baseMenuItem)),
+            options: printOptions,
+            onClick: closeExportMenu,
+            children: localeText.toolbarExportPrint
+          }), imageExportOptionList.map(imageExportOptions => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarImageExportTrigger.ChartsToolbarImageExportTrigger, {
+            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItem, (0, _extends2.default)({
+              dense: true
+            }, slotProps?.baseMenuItem)),
+            options: imageExportOptions,
+            onClick: closeExportMenu,
+            children: localeText.toolbarExportImage(imageExportOptions.type)
+          }, imageExportOptions.type))]
+        }))
+      })]
+    }, "export-menu"));
+  }
   if (children.length === 0) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, (0, _extends2.default)({}, other, {
     children: children
   }));
+}
+process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  imageExportOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    fileName: _propTypes.default.string,
+    quality: _propTypes.default.number,
+    type: _propTypes.default.string.isRequired
+  })),
+  printOptions: _propTypes.default.object
+} : void 0;
+function isHideMenuKey(key) {
+  return key === 'Tab' || key === 'Escape';
 }

package/ChartsToolbarPro/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./ChartsToolbarPro.js";
 export * from "./ChartsToolbarZoomInTrigger.js";
-export * from "./ChartsToolbarZoomOutTrigger.js";
+export * from "./ChartsToolbarZoomOutTrigger.js";
+export * from "./ChartsToolbarPrintExportTrigger.js";
+export * from "./ChartsToolbarImageExportTrigger.js";

package/ChartsToolbarPro/index.js

@@ -35,4 +35,26 @@ Object.keys(_ChartsToolbarZoomOutTrigger).forEach(function (key) {
       return _ChartsToolbarZoomOutTrigger[key];
     }
   });
+});
+var _ChartsToolbarPrintExportTrigger = require("./ChartsToolbarPrintExportTrigger");
+Object.keys(_ChartsToolbarPrintExportTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarPrintExportTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarPrintExportTrigger[key];
+    }
+  });
+});
+var _ChartsToolbarImageExportTrigger = require("./ChartsToolbarImageExportTrigger");
+Object.keys(_ChartsToolbarImageExportTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarImageExportTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarImageExportTrigger[key];
+    }
+  });
 });

package/ChartsToolbarPro/internals/ChartsMenu.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ChartBasePopperProps, Placement } from "../../internals/slots/chartBaseSlotProps.js";
+export interface ChartsMenuProps extends Pick<ChartBasePopperProps, 'className' | 'onExited'> {
+  open: boolean;
+  target: HTMLElement | null;
+  onClose: (event?: Event) => void;
+  position?: Placement;
+  children: React.ReactNode;
+}
+declare function ChartsMenu(props: ChartsMenuProps): React.JSX.Element;
+declare namespace ChartsMenu {
+  var propTypes: any;
+}
+export { ChartsMenu };

package/ChartsToolbarPro/internals/ChartsMenu.js

@@ -0,0 +1,73 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsMenu = ChartsMenu;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
+var _internals = require("@mui/x-charts/internals");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
+function ChartsMenu(props) {
+  const {
+      open,
+      target,
+      onClose,
+      children,
+      position,
+      onExited
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const Popper = slots.basePopper;
+  const savedFocusRef = React.useRef(null);
+  (0, _useEnhancedEffect.default)(() => {
+    if (open) {
+      savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    } else {
+      savedFocusRef.current?.focus?.();
+      savedFocusRef.current = null;
+    }
+  }, [open]);
+  const handleClickAway = event => {
+    if (event.target && (target === event.target || target?.contains(event.target))) {
+      return;
+    }
+    onClose(event);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Popper, (0, _extends2.default)({
+    open: open,
+    target: target,
+    transition: true,
+    placement: position,
+    onClickAway: handleClickAway,
+    onExited: onExited,
+    clickAwayMouseEvent: "onMouseDown"
+  }, other, slotProps?.basePopper, {
+    children: children
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartsMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  onClose: _propTypes.default.func.isRequired,
+  onExited: _propTypes.default.func,
+  open: _propTypes.default.bool.isRequired,
+  position: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  target: _HTMLElementType.default
+} : void 0;

package/ChartsToolbarPro/internals/ChartsToolbarDivider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartBaseDividerProps } from "../../internals/slots/chartBaseSlotProps.js";
+export interface ChartsToolbarDividerProps extends ChartBaseDividerProps {}
+declare const ChartsToolbarDivider: React.ForwardRefExoticComponent<Omit<ChartsToolbarDividerProps, "ref"> & React.RefAttributes<HTMLHRElement>>;
+export { ChartsToolbarDivider };

package/ChartsToolbarPro/internals/ChartsToolbarDivider.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarDivider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _system = require("@mui/system");
+var _internals = require("@mui/x-charts/internals");
+var _jsxRuntime = require("react/jsx-runtime");
+// This is workaround because api-docs-builder does not support the `NotRendered<ChartBaseDividerProps>` syntax.
+const NotRenderedDivider = _internals.NotRendered;
+const Divider = (0, _system.styled)(NotRenderedDivider, {
+  name: 'MuiChartsToolbar',
+  slot: 'Divider'
+})(({
+  theme
+}) => ({
+  margin: theme.spacing(0, 0.5),
+  height: '50%'
+}));
+const ChartsToolbarDivider = exports.ChartsToolbarDivider = /*#__PURE__*/React.forwardRef(function ChartsToolbarDivider(props, ref) {
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, (0, _extends2.default)({
+    as: slots.baseDivider,
+    orientation: "vertical"
+  }, slotProps.baseDivider, props, {
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarDivider.displayName = "ChartsToolbarDivider";
+process.env.NODE_ENV !== "production" ? ChartsToolbarDivider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: _propTypes.default.string,
+  orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  style: _propTypes.default.object
+} : void 0;

package/FunnelChart/FunnelPlot.js

@@ -105,21 +105,21 @@ const useAggregatedData = () => {
           min: minPoint,
           max: maxPoint
         });
-        const line = (0, _d3Shape.line)().x(d => xPosition(d.x, dataIndex, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, dataIndex, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
+        const bandPoints = curve({}).processPoints(values.map(v => ({
+          x: xPosition(v.x, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth),
+          y: yPosition(v.y, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)
+        })));
+        const line = (0, _d3Shape.line)().x(v => v.x).y(v => v.y).curve(curve);
         return {
-          d: line(values),
+          d: line(bandPoints),
           color,
           id,
           seriesId,
           dataIndex,
           variant: currentSeries.variant,
           label: sectionLabel !== false && (0, _extends2.default)({}, (0, _labelUtils.positionLabel)((0, _extends2.default)({}, sectionLabel, {
-            xPosition,
-            yPosition,
             isHorizontal,
-            values,
-            dataIndex,
-            baseScaleData: baseScaleConfig.data ?? []
+            values: bandPoints
           })), (0, _labelUtils.alignLabel)(sectionLabel ?? {}), {
             value: valueFormatter ? valueFormatter(currentSeries.data[dataIndex], {
               dataIndex
@@ -128,7 +128,7 @@ const useAggregatedData = () => {
         };
       });
     });
-    return result.flat();
+    return result;
   }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
   return allData;
 };
@@ -139,41 +139,57 @@ function FunnelPlot(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const data = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [data.map(({
-      d,
-      color,
-      id,
-      seriesId,
-      dataIndex,
-      variant
-    }) => /*#__PURE__*/(0, _react.createElement)(_FunnelSection.FunnelSection, (0, _extends2.default)({}, other, {
-      d: d,
-      color: color,
-      key: id,
-      dataIndex: dataIndex,
-      seriesId: seriesId,
-      variant: variant,
-      onClick: onItemClick && (event => {
-        onItemClick(event, {
-          type: 'funnel',
+    children: [data.map(series => {
+      if (series.length === 0) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        "data-series": series[0].seriesId,
+        children: series.map(({
+          d,
+          color,
+          id,
           seriesId,
-          dataIndex
-        });
-      })
-    }))), data.map(({
-      id,
-      label,
-      seriesId,
-      dataIndex
-    }) => {
-      if (!label || !label.value) {
+          dataIndex,
+          variant
+        }) => /*#__PURE__*/(0, _react.createElement)(_FunnelSection.FunnelSection, (0, _extends2.default)({}, other, {
+          d: d,
+          color: color,
+          key: id,
+          dataIndex: dataIndex,
+          seriesId: seriesId,
+          variant: variant,
+          onClick: onItemClick && (event => {
+            onItemClick(event, {
+              type: 'funnel',
+              seriesId,
+              dataIndex
+            });
+          })
+        })))
+      }, series[0].seriesId);
+    }), data.map(series => {
+      if (series.length === 0) {
         return null;
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelSectionLabel.FunnelSectionLabel, (0, _extends2.default)({
-        label: label,
-        dataIndex: dataIndex,
-        seriesId: seriesId
-      }, other), id);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        "data-series": series[0].seriesId,
+        children: series.map(({
+          id,
+          label,
+          seriesId,
+          dataIndex
+        }) => {
+          if (!label || !label.value) {
+            return null;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelSectionLabel.FunnelSectionLabel, (0, _extends2.default)({
+            label: label,
+            dataIndex: dataIndex,
+            seriesId: seriesId
+          }, other), id);
+        })
+      }, series[0].seriesId);
     })]
   });
 }

package/FunnelChart/FunnelSection.js

@@ -60,6 +60,8 @@ const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiF
     strokeWidth: isOutlined ? 1.5 : 0,
     cursor: onClick ? 'pointer' : 'unset',
     onClick: onClick,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     className: (0, _clsx.default)(classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
   }, other, {
     ref: ref

package/FunnelChart/curves/bump.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 "bump" curve generator.
  * It draws smooth curves for the 4 provided points,
@@ -8,7 +7,7 @@ import { CurveOptions } from "./curve.types.js";
  * The implementation 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 {
+export declare class Bump implements FunnelCurveGenerator {
   private context;
   private isHorizontal;
   private min;
@@ -24,6 +23,7 @@ export declare class Bump implements CurveGenerator {
   areaEnd(): void;
   lineStart(): void;
   lineEnd(): void;
+  processPoints(points: Point[]): Point[];
   point(x: number, y: number): void;
   private drawPath;
   private drawHorizontalPath;

package/FunnelChart/curves/bump.js

@@ -53,6 +53,9 @@ class Bump {
   areaEnd() {}
   lineStart() {}
   lineEnd() {}
+  processPoints(points) {
+    return points;
+  }
   point(x, y) {
     this.points.push({
       x,

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

@@ -1,3 +1,4 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
 export type CurveOptions = {
   /**
    * The gap between each segment.
@@ -44,4 +45,16 @@ export type FunnelPointShape = 'square' | 'sharp';
 export type Point = {
   x: number;
   y: number;
-};
+};
+export interface FunnelCurveGenerator extends CurveGenerator {
+  /**
+   * Processes the points to create a curve based on the provided options.
+   * This does not draw the curve but prepares the points for rendering.
+   *
+   * @param points The points to process.
+   * @param options The options for the curve.
+   * @returns The processed points.
+   */
+  processPoints(points: Point[], xPosition: PositionGetter, yPosition: PositionGetter): Point[];
+}
+export type PositionGetter = (value: number, bandIndex: number, bandIdentifier: string | number, stackOffset?: number, useBand?: boolean) => number;

package/FunnelChart/curves/getFunnelCurve.d.ts

@@ -1,3 +1,8 @@
-import { CurveFactory } from '@mui/x-charts-vendor/d3-shape';
+import type { Path } from '@mui/x-charts-vendor/d3-path';
 import { CurveOptions, FunnelCurveType } from "./curve.types.js";
-export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => CurveFactory;
+import { Step } from "./step.js";
+import { Linear } from "./linear.js";
+import { Bump } from "./bump.js";
+import { Pyramid } from "./pyramid.js";
+import { StepPyramid } from "./step-pyramid.js";
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => (context: CanvasRenderingContext2D | Path) => Step | Linear | Bump | Pyramid | StepPyramid;

package/FunnelChart/curves/linear.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 "linear" curve generator.
  * It draws straight lines for the 4 provided points,
@@ -8,7 +7,7 @@ import { CurveOptions } from "./curve.types.js";
  * The implementation 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 {
+export declare class Linear implements FunnelCurveGenerator {
   private context;
   private position;
   private sections;
@@ -36,5 +35,6 @@ export declare class Linear implements CurveGenerator {
   lineStart(): void;
   lineEnd(): void;
   protected getBorderRadius(): number | number[];
+  processPoints(points: Point[]): Point[];
   point(xIn: number, yIn: number): void;
 }