@mui/x-charts-pro 8.2.0 → 8.3.1

package/esm/FunnelChart/FunnelChart.js

@@ -8,7 +8,6 @@ import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsWrapper } from '@mui/x-charts/internals';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
-import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
@@ -31,9 +30,7 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     funnelPlotProps,
     overlayProps,
     legendProps,
-    clipPathGroupProps,
     chartsAxisProps,
-    clipPathProps,
     chartsWrapperProps,
     axisHighlightProps,
     children
@@ -47,11 +44,9 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     seriesConfig: seriesConfig,
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, themedProps.slotProps?.tooltip, {
+        children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, themedProps.slotProps?.tooltip, {
           trigger: "item"
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), children]
       }))]
     }))
   }));

package/esm/FunnelChart/FunnelPlot.js

@@ -46,7 +46,6 @@ const useAggregatedData = gap => {
       const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
-      const curve = getFunnelCurve(currentSeries.curve, isHorizontal, gap);
       const xPosition = (value, bandIndex, stackOffset, useBand) => {
         if (isXAxisBand) {
           const position = xScale(bandIndex);
@@ -61,7 +60,17 @@ const useAggregatedData = gap => {
         }
         return yScale(isHorizontal ? value : value + (stackOffset || 0));
       };
-      return currentSeries.dataPoints.map((values, dataIndex) => {
+      const allY = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => yPosition(v.y, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const allX = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => xPosition(v.x, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const minPoint = {
+        x: Math.min(...allX),
+        y: Math.min(...allY)
+      };
+      const maxPoint = {
+        x: Math.max(...allX),
+        y: Math.max(...allY)
+      };
+      return currentSeries.dataPoints.flatMap((values, dataIndex) => {
         const color = currentSeries.data[dataIndex].color;
         const id = `${seriesId}-${dataIndex}`;
         const sectionLabel = typeof currentSeries.sectionLabel === 'function' ? currentSeries.sectionLabel({
@@ -69,6 +78,15 @@ const useAggregatedData = gap => {
           seriesId,
           value: currentSeries.data[dataIndex].value
         }) : currentSeries.sectionLabel;
+        const curve = getFunnelCurve(currentSeries.curve, {
+          isHorizontal,
+          gap,
+          position: dataIndex,
+          sections: currentSeries.dataPoints.length,
+          borderRadius: currentSeries.borderRadius,
+          min: minPoint,
+          max: maxPoint
+        });
         const line = d3Line().x(d => xPosition(d.x, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
         return {
           d: line(values),
@@ -76,6 +94,7 @@ const useAggregatedData = gap => {
           id,
           seriesId,
           dataIndex,
+          variant: currentSeries.variant,
           label: sectionLabel !== false && _extends({}, positionLabel(_extends({}, sectionLabel, {
             xPosition,
             yPosition,
@@ -109,13 +128,15 @@ function FunnelPlot(props) {
       color,
       id,
       seriesId,
-      dataIndex
+      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',

package/esm/FunnelChart/FunnelSection.d.ts

@@ -6,6 +6,7 @@ export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>,
   dataIndex: number;
   color: string;
   classes?: Partial<FunnelSectionClasses>;
+  variant?: 'filled' | 'outlined';
 }
 export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, React.SVGProps<SVGPathElement>, {}>;
 /**

package/esm/FunnelChart/FunnelSection.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className"];
+const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className", "variant"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { useInteractionItemProps, consumeSlots } from '@mui/x-charts/internals';
@@ -11,7 +11,7 @@ import clsx from 'clsx';
 import { useUtilityClasses } from "./funnelSectionClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const FunnelSectionPath = styled('path')(() => ({
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
 }));
 
 /**
@@ -26,7 +26,8 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
       classes,
       color,
       onClick,
-      className
+      className,
+      variant = 'filled'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
@@ -41,14 +42,18 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
     seriesId,
     dataIndex
   });
+  const isOutlined = variant === 'outlined';
   return /*#__PURE__*/_jsx(FunnelSectionPath, _extends({}, interactionProps, {
-    filter: isHighlighted ? 'brightness(120%)' : undefined,
-    opacity: isFaded ? 0.3 : 1,
+    filter: isHighlighted && !isOutlined ? 'brightness(120%)' : undefined,
+    opacity: isFaded && !isOutlined ? 0.3 : 1,
     fill: color,
-    stroke: "none",
+    stroke: isOutlined ? color : 'none',
+    fillOpacity: isOutlined && !isHighlighted ? 0.4 : 1,
+    strokeOpacity: 1,
+    strokeWidth: isOutlined ? 1.5 : 0,
     cursor: onClick ? 'pointer' : 'unset',
     onClick: onClick,
-    className: clsx(classes?.root, className, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
+    className: clsx(classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
   }, other, {
     ref: ref
   }));

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

@@ -0,0 +1,8 @@
+import { Point } from "./curve.types.js";
+/**
+ * Draws a polygon with rounded corners
+ * @param {CanvasRenderingContext2D} ctx The canvas context
+ * @param {Array} points A list of `{x, y}` points
+ * @param {number} radius how much to round the corners
+ */
+export declare function borderRadiusPolygon(ctx: CanvasRenderingContext2D, points: Point[], radius: number | number[]): void;

package/esm/FunnelChart/curves/borderRadiusPolygon.js

@@ -0,0 +1,36 @@
+const distance = (p1, p2) => Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
+const lerp = (a, b, x) => a + (b - a) * x;
+const lerp2D = (p1, p2, t) => ({
+  x: lerp(p1.x, p2.x, t),
+  y: lerp(p1.y, p2.y, t)
+});
+
+/**
+ * Draws a polygon with rounded corners
+ * @param {CanvasRenderingContext2D} ctx The canvas context
+ * @param {Array} points A list of `{x, y}` points
+ * @param {number} radius how much to round the corners
+ */
+export function borderRadiusPolygon(ctx, points, radius) {
+  const numPoints = points.length;
+  radius = Array.isArray(radius) ? radius : Array(numPoints).fill(radius);
+  const corners = [];
+  for (let i = 0; i < numPoints; i += 1) {
+    const lastPoint = points[i];
+    const thisPoint = points[(i + 1) % numPoints];
+    const nextPoint = points[(i + 2) % numPoints];
+    const lastEdgeLength = distance(lastPoint, thisPoint);
+    const lastOffsetDistance = Math.min(lastEdgeLength / 2, radius[i] ?? 0);
+    const start = lerp2D(thisPoint, lastPoint, lastOffsetDistance / lastEdgeLength);
+    const nextEdgeLength = distance(nextPoint, thisPoint);
+    const nextOffsetDistance = Math.min(nextEdgeLength / 2, radius[i] ?? 0);
+    const end = lerp2D(thisPoint, nextPoint, nextOffsetDistance / nextEdgeLength);
+    corners.push([start, thisPoint, end]);
+  }
+  ctx.moveTo(corners[0][0].x, corners[0][0].y);
+  for (const [start, ctrl, end] of corners) {
+    ctx.lineTo(start.x, start.y);
+    ctx.quadraticCurveTo(ctrl.x, ctrl.y, end.x, end.y);
+  }
+  ctx.closePath();
+}

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

@@ -1,21 +1,24 @@
 import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+import { CurveOptions } from "./curve.types.js";
 /**
  * This is a custom "bump" curve generator.
+ * It draws smooth curves for the 4 provided points,
+ * with the option to add a gap between sections while also properly handling the border radius.
  *
- * 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.
+ * 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 {
   private context;
-  private line;
   private x;
   private y;
   private currentPoint;
   private isHorizontal;
   private gap;
-  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap
+  }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;
   lineStart(): void;

package/esm/FunnelChart/curves/bump.js

@@ -1,39 +1,32 @@
+/* eslint-disable class-methods-use-this */
+
 /**
  * This is a custom "bump" curve generator.
+ * It draws smooth curves for the 4 provided points,
+ * with the option to add a gap between sections while also properly handling the border radius.
  *
- * 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.
+ * The implementation 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) {
+  constructor(context, {
+    isHorizontal,
+    gap
+  }) {
     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;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
   }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
   point(x, y) {
     x = +x;
     y = +y;
@@ -50,6 +43,9 @@ export class Bump {
       } else {
         this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x + this.gap, y);
       }
+      if (this.currentPoint === 3) {
+        this.context.closePath();
+      }
       this.currentPoint += 1;
       this.x = x;
       this.y = y;
@@ -68,6 +64,9 @@ export class Bump {
     } else {
       this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y + this.gap);
     }
+    if (this.currentPoint === 3) {
+      this.context.closePath();
+    }
     this.currentPoint += 1;
     this.x = x;
     this.y = y;

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

@@ -1,8 +1,38 @@
-export type FunnelCurveOptions = {
+export type CurveOptions = {
   /**
-   * The gap between the funnel segments.
+   * The gap between each segment.
    * @default 0
    */
   gap?: number;
+  /**
+   * Indicates if the main axis of the visualization.
+   */
+  isHorizontal?: boolean;
+  /**
+   * The order position of the segment.
+   */
+  position?: number;
+  /**
+   * The total number of segments that will be drawn.
+   * @default 1
+   */
+  sections?: number;
+  /**
+   * The border radius of the segments.
+   * @default 0
+   */
+  borderRadius?: number;
+  /**
+   * The minimum point for all the segments.
+   */
+  min?: Point;
+  /**
+   * The maximum point for all the segments.
+   */
+  max?: Point;
 };
-export type FunnelCurveType = 'linear' | 'step' | 'bump';
+export type FunnelCurveType = 'linear' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+export type Point = {
+  x: number;
+  y: number;
+};

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

@@ -1,3 +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;
+import { CurveOptions, FunnelCurveType } from "./curve.types.js";
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => CurveFactory;

package/esm/FunnelChart/curves/getFunnelCurve.js

@@ -1,15 +1,23 @@
-import { FunnelStep } from "./funnelStep.js";
+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";
 const curveConstructor = curve => {
   if (curve === 'step') {
-    return FunnelStep;
+    return Step;
   }
   if (curve === 'bump') {
     return Bump;
   }
+  if (curve === 'pyramid') {
+    return Pyramid;
+  }
+  if (curve === 'step-pyramid') {
+    return StepPyramid;
+  }
   return Linear;
 };
-export const getFunnelCurve = (curve, isHorizontal, gap = 0) => {
-  return context => new (curveConstructor(curve))(context, isHorizontal, gap);
+export const getFunnelCurve = (curve, options) => {
+  return context => new (curveConstructor(curve))(context, options);
 };

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

@@ -1,24 +1,32 @@
 import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+import { CurveOptions } from "./curve.types.js";
 /**
  * This is a custom "linear" curve generator.
+ * It draws straight lines for the 4 provided points,
+ * with the option to add a gap between sections while also properly handling the border radius.
  *
- * 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.
+ * 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 {
   private context;
-  private line;
-  private x;
-  private y;
-  private currentPoint;
+  private position;
+  private sections;
   private isHorizontal;
   private gap;
-  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  private borderRadius;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius
+  }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;
   lineStart(): void;
   lineEnd(): void;
-  point(x: number, y: number): void;
+  protected getBorderRadius(): number | number[];
+  point(xIn: number, yIn: number): void;
 }

package/esm/FunnelChart/curves/linear.js

@@ -1,106 +1,82 @@
-// 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;
-};
+/* eslint-disable class-methods-use-this */
 
-// 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;
-};
+import { borderRadiusPolygon } from "./borderRadiusPolygon.js";
+import { lerpX, lerpY } from "./utils.js";
 
 /**
  * This is a custom "linear" curve generator.
+ * It draws straight lines for the 4 provided points,
+ * with the option to add a gap between sections while also properly handling the border radius.
  *
- * 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.
+ * The implementation is based on the d3-shape linear curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
  */
 export class Linear {
-  constructor(context, isHorizontal, gap = 0) {
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius
+  }) {
     this.context = void 0;
-    this.line = NaN;
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
+    this.position = 0;
+    this.sections = 0;
     this.isHorizontal = false;
     this.gap = 0;
+    this.borderRadius = 0;
+    this.points = [];
     this.context = context;
-    this.isHorizontal = isHorizontal;
-    this.gap = gap / 2;
-  }
-  areaStart() {
-    this.line = 0;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+    this.position = position ?? 0;
+    this.sections = sections ?? 1;
+    this.borderRadius = borderRadius ?? 0;
   }
-  areaEnd() {
-    this.line = NaN;
-  }
-  lineStart() {
-    this.currentPoint = 0;
-  }
-  lineEnd() {
-    if (this.line || this.line !== 0 && this.currentPoint === 1) {
-      this.context.closePath();
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.position === 0) {
+      return [0, 0, this.borderRadius, this.borderRadius];
     }
-    this.line = 1 - this.line;
+    if (this.position === this.sections - 1) {
+      return [this.borderRadius, this.borderRadius];
+    }
+    return 0;
   }
-  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));
-      }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    if (this.points.length < 4) {
+      return;
     }
-    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);
+    // Add gaps where they are needed.
+    this.points = this.points.map((point, index) => {
+      const slopeStart = this.points.at(index <= 1 ? 0 : 2);
+      const slopeEnd = this.points.at(index <= 1 ? 1 : 3);
+      if (this.isHorizontal) {
+        const yGetter = lerpY(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x - this.gap, slopeEnd.y);
+        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
+        return {
+          x: xGap,
+          y: yGetter(xGap)
+        };
       }
-    }
-
-    // Increment the values
-    this.currentPoint += 1;
-    this.x = x;
-    this.y = y;
+      const xGetter = lerpX(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y - this.gap);
+      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
+      return {
+        x: xGetter(yGap),
+        y: yGap
+      };
+    });
+    borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
   }
 }

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

@@ -0,0 +1,34 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+import { CurveOptions } 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 {
+  private context;
+  private position;
+  private sections;
+  private isHorizontal;
+  private gap;
+  private borderRadius;
+  private min;
+  private max;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius,
+    min,
+    max
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  protected getBorderRadius(): number | number[];
+  point(xIn: number, yIn: number): void;
+}