@mui/x-charts-pro 8.5.2 → 8.6.0

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,16 +1,35 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["printOptions", "imageExportOptions"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
 import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
+import useId from '@mui/utils/useId';
+import { ChartsToolbarDivider } from "./internals/ChartsToolbarDivider.js";
+import { ChartsMenu } from "./internals/ChartsMenu.js";
 import { selectorChartZoomIsEnabled } from "../internals/plugins/useChartProZoom/index.js";
 import { ChartsToolbarZoomInTrigger } from "./ChartsToolbarZoomInTrigger.js";
 import { ChartsToolbarZoomOutTrigger } from "./ChartsToolbarZoomOutTrigger.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ChartsToolbarPrintExportTrigger } from "./ChartsToolbarPrintExportTrigger.js";
+import { ChartsToolbarImageExportTrigger } from "./ChartsToolbarImageExportTrigger.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
+  type: 'image/png'
+}];
+
 /**
  * The chart toolbar component for the pro package.
  */
-export function ChartsToolbarPro(props) {
+function ChartsToolbarPro(_ref) {
+  let {
+      printOptions,
+      imageExportOptions: rawImageExportOptions
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     slots,
     slotProps
@@ -21,7 +40,13 @@ export function ChartsToolbarPro(props) {
   const {
     localeText
   } = useChartsLocalization();
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef(null);
+  const exportMenuId = useId();
+  const exportMenuTriggerId = useId();
   const isZoomEnabled = useSelector(store, selectorChartZoomIsEnabled);
+  const imageExportOptionList = rawImageExportOptions ?? DEFAULT_IMAGE_EXPORT_OPTIONS;
+  const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];
   if (isZoomEnabled) {
     const Tooltip = slots.baseTooltip;
@@ -30,22 +55,109 @@ export function ChartsToolbarPro(props) {
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
       children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
-        children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({}, slotProps.zoomInIcon))
+        render: /*#__PURE__*/_jsx(ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({
+          fontSize: "small"
+        }, slotProps.zoomInIcon))
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
       children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
-        children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({}, slotProps.zoomOutIcon))
+        render: /*#__PURE__*/_jsx(ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({
+          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__*/_jsx(ChartsToolbarDivider, {}, "divider"));
+    }
+    children.push(/*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: localeText.toolbarExport,
+        disableInteractive: exportMenuOpen,
+        children: /*#__PURE__*/_jsx(ToolbarButton, {
+          ref: exportMenuTriggerRef,
+          id: exportMenuTriggerId,
+          "aria-controls": exportMenuId,
+          "aria-haspopup": "true",
+          "aria-expanded": exportMenuOpen ? 'true' : undefined,
+          onClick: () => setExportMenuOpen(!exportMenuOpen),
+          size: "small",
+          children: /*#__PURE__*/_jsx(ExportIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/_jsx(ChartsMenu, {
+        target: exportMenuTriggerRef.current,
+        open: exportMenuOpen,
+        onClose: closeExportMenu,
+        position: "bottom-end",
+        children: /*#__PURE__*/_jsxs(MenuList, _extends({
+          id: exportMenuId,
+          "aria-labelledby": exportMenuTriggerId,
+          onKeyDown: handleListKeyDown,
+          autoFocusItem: true
+        }, slotProps?.baseMenuList, {
+          children: [!printOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ChartsToolbarPrintExportTrigger, {
+            render: /*#__PURE__*/_jsx(MenuItem, _extends({
+              dense: true
+            }, slotProps?.baseMenuItem)),
+            options: printOptions,
+            onClick: closeExportMenu,
+            children: localeText.toolbarExportPrint
+          }), imageExportOptionList.map(imageExportOptions => /*#__PURE__*/_jsx(ChartsToolbarImageExportTrigger, {
+            render: /*#__PURE__*/_jsx(MenuItem, _extends({
+              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__*/_jsx(Toolbar, _extends({}, props, {
+  return /*#__PURE__*/_jsx(Toolbar, _extends({}, 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.arrayOf(PropTypes.shape({
+    fileName: PropTypes.string,
+    quality: PropTypes.number,
+    type: PropTypes.string.isRequired
+  })),
+  printOptions: PropTypes.object
+} : void 0;
+export { ChartsToolbarPro };
+function isHideMenuKey(key) {
+  return key === 'Tab' || key === 'Escape';
 }

package/esm/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/esm/ChartsToolbarPro/index.js

@@ -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/esm/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/esm/ChartsToolbarPro/internals/ChartsMenu.js

@@ -0,0 +1,67 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import HTMLElementType from '@mui/utils/HTMLElementType';
+import { useChartsSlots } from '@mui/x-charts/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartsMenu(props) {
+  const {
+      open,
+      target,
+      onClose,
+      children,
+      position,
+      onExited
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const Popper = slots.basePopper;
+  const savedFocusRef = React.useRef(null);
+  useEnhancedEffect(() => {
+    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__*/_jsx(Popper, _extends({
+    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.node,
+  className: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  onExited: PropTypes.func,
+  open: PropTypes.bool.isRequired,
+  position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  target: HTMLElementType
+} : void 0;
+export { ChartsMenu };

package/esm/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/esm/ChartsToolbarPro/internals/ChartsToolbarDivider.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/system';
+import { NotRendered, useChartsSlots } from '@mui/x-charts/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+// This is workaround because api-docs-builder does not support the `NotRendered<ChartBaseDividerProps>` syntax.
+const NotRenderedDivider = NotRendered;
+const Divider = styled(NotRenderedDivider, {
+  name: 'MuiChartsToolbar',
+  slot: 'Divider'
+})(({
+  theme
+}) => ({
+  margin: theme.spacing(0, 0.5),
+  height: '50%'
+}));
+const ChartsToolbarDivider = /*#__PURE__*/React.forwardRef(function ChartsToolbarDivider(props, ref) {
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  return /*#__PURE__*/_jsx(Divider, _extends({
+    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.string,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  style: PropTypes.object
+} : void 0;
+export { ChartsToolbarDivider };

package/esm/FunnelChart/FunnelPlot.js

@@ -97,21 +97,21 @@ const useAggregatedData = () => {
           min: minPoint,
           max: maxPoint
         });
-        const line = d3Line().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 = d3Line().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 && _extends({}, positionLabel(_extends({}, sectionLabel, {
-            xPosition,
-            yPosition,
             isHorizontal,
-            values,
-            dataIndex,
-            baseScaleData: baseScaleConfig.data ?? []
+            values: bandPoints
           })), alignLabel(sectionLabel ?? {}), {
             value: valueFormatter ? valueFormatter(currentSeries.data[dataIndex], {
               dataIndex
@@ -120,7 +120,7 @@ const useAggregatedData = () => {
         };
       });
     });
-    return result.flat();
+    return result;
   }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
   return allData;
 };
@@ -131,41 +131,57 @@ function FunnelPlot(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const data = useAggregatedData();
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [data.map(({
-      d,
-      color,
-      id,
-      seriesId,
-      dataIndex,
-      variant
-    }) => /*#__PURE__*/_createElement(FunnelSection, _extends({}, 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__*/_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__*/_createElement(FunnelSection, _extends({}, 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__*/_jsx(FunnelSectionLabel, _extends({
-        label: label,
-        dataIndex: dataIndex,
-        seriesId: seriesId
-      }, other), id);
+      return /*#__PURE__*/_jsx("g", {
+        "data-series": series[0].seriesId,
+        children: series.map(({
+          id,
+          label,
+          seriesId,
+          dataIndex
+        }) => {
+          if (!label || !label.value) {
+            return null;
+          }
+          return /*#__PURE__*/_jsx(FunnelSectionLabel, _extends({
+            label: label,
+            dataIndex: dataIndex,
+            seriesId: seriesId
+          }, other), id);
+        })
+      }, series[0].seriesId);
     })]
   });
 }

package/esm/FunnelChart/FunnelSection.js

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

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

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

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

package/esm/FunnelChart/curves/linear.js

@@ -92,7 +92,7 @@ export class Linear {
       }
       // Is smallest section and shaped like a triangle
       if (this.position === this.sections - 1 && this.pointShape === 'sharp') {
-        return [this.borderRadius];
+        return [0, 0, this.borderRadius];
       }
 
       // Is smallest section
@@ -102,19 +102,11 @@ export class Linear {
     }
     return 0;
   }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-
+  processPoints(points) {
     // Add gaps where they are needed.
-    this.points = this.points.map((point, index) => {
-      const slopeStart = this.points.at(index <= 1 ? 0 : 3);
-      const slopeEnd = this.points.at(index <= 1 ? 1 : 2);
+    const processedPoints = points.map((point, index) => {
+      const slopeStart = points.at(index <= 1 ? 0 : 3);
+      const slopeEnd = points.at(index <= 1 ? 1 : 2);
       if (this.isHorizontal) {
         const yGetter = lerpY(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x, slopeEnd.y);
         return {
@@ -136,15 +128,15 @@ export class Linear {
       let firstPoint = null;
       let secondPoint = null;
       if (isFirstSection && this.isIncreasing) {
-        firstPoint = this.points[1];
-        secondPoint = this.points[2];
+        firstPoint = processedPoints[1];
+        secondPoint = processedPoints[2];
       }
       if (isLastSection && !this.isIncreasing) {
-        firstPoint = this.points[3];
-        secondPoint = this.points[0];
+        firstPoint = processedPoints[3];
+        secondPoint = processedPoints[0];
       }
       if (firstPoint && secondPoint) {
-        this.points = [
+        return [
         // Sharp point at the start
         this.isHorizontal ? {
           x: this.max.x,
@@ -157,6 +149,19 @@ export class Linear {
         firstPoint, secondPoint];
       }
     }
+    return processedPoints;
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    const isLastSection = this.position === this.sections - 1;
+    const isFirstSection = this.position === 0;
+    const isSharpPoint = this.pointShape === 'sharp' && (isLastSection && !this.isIncreasing || isFirstSection && this.isIncreasing);
+    if (this.points.length < (isSharpPoint ? 3 : 4)) {
+      return;
+    }
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
   }
 }

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

@@ -1,12 +1,11 @@
-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 "pyramid" curve generator.
  * It draws straight lines for the 4 provided points. The slopes are calculated
  * based on the min and max values of the x and y axes.
  * with the option to add a gap between sections while also properly handling the border radius.
  */
-export declare class Pyramid implements CurveGenerator {
+export declare class Pyramid implements FunnelCurveGenerator {
   private context;
   private position;
   private sections;
@@ -32,5 +31,6 @@ export declare class Pyramid implements CurveGenerator {
   lineStart(): void;
   lineEnd(): void;
   protected getBorderRadius(): number | number[];
+  processPoints(points: Point[]): Point[];
   point(xIn: number, yIn: number): void;
 }