@mui/x-charts-pro 8.5.1 → 8.5.3

package/esm/FunnelChart/FunnelPlot.js

@@ -1,29 +1,31 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["onItemClick", "gap"];
+const _excluded = ["onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { cartesianSeriesTypes } from '@mui/x-charts/internals';
-import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { cartesianSeriesTypes, useSelector, useStore, isBandScale } from '@mui/x-charts/internals';
 import { FunnelSection } from "./FunnelSection.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
 import { getFunnelCurve } from "./curves/index.js";
 import { FunnelSectionLabel } from "./FunnelSectionLabel.js";
+import { selectorChartXAxis, selectorChartYAxis, selectorFunnelGap } from "./funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 cartesianSeriesTypes.addType('funnel');
-const useAggregatedData = gap => {
+const useAggregatedData = () => {
   const seriesData = useFunnelSeriesContext();
+  const store = useStore();
   const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
   const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
+  const gap = useSelector(store, selectorFunnelGap);
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];
@@ -46,22 +48,28 @@ const useAggregatedData = gap => {
       const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
-      const xPosition = (value, bandIndex, stackOffset, useBand) => {
-        if (isXAxisBand) {
-          const position = xScale(bandIndex);
+      const xPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
+        if (isBandScale(xScale)) {
+          const position = xScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }
-        return xScale(isHorizontal ? value + (stackOffset || 0) : value);
+        if (isHorizontal) {
+          return xScale(value + (stackOffset || 0)) + bandIndex * gap;
+        }
+        return xScale(value);
       };
-      const yPosition = (value, bandIndex, stackOffset, useBand) => {
-        if (isYAxisBand) {
-          const position = yScale(bandIndex);
+      const yPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
+        if (isBandScale(yScale)) {
+          const position = yScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }
-        return yScale(isHorizontal ? value : value + (stackOffset || 0));
+        if (isHorizontal) {
+          return yScale(value);
+        }
+        return yScale(value + (stackOffset || 0)) + bandIndex * gap;
       };
-      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 allY = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => yPosition(v.y, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const allX = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => xPosition(v.x, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
       const minPoint = {
         x: Math.min(...allX),
         y: Math.min(...allY)
@@ -89,21 +97,21 @@ const useAggregatedData = gap => {
           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);
+        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
@@ -112,53 +120,68 @@ const useAggregatedData = gap => {
         };
       });
     });
-    return result.flat();
+    return result;
   }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
   return allData;
 };
 function FunnelPlot(props) {
   const {
-      onItemClick,
-      gap
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const data = useAggregatedData(gap);
+  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);
     })]
   });
 }
@@ -167,11 +190,6 @@ process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * The gap, in pixels, between funnel sections.
-   * @default 0
-   */
-  gap: PropTypes.number,
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/FunnelChart/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/categoryAxis.types.d.ts

@@ -1,6 +1,7 @@
 import { AxisConfig, ScaleName } from '@mui/x-charts/models';
 import { MakeOptional } from '@mui/x-internals/types';
-export type CategoryAxis<S extends ScaleName = ScaleName> = S extends ScaleName ? {
+export type FunnelScaleName = Exclude<ScaleName, 'point'>;
+export type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = S extends FunnelScaleName ? {
   /**
    * The categories to be displayed on the axis.
    * The order of the categories is the order in which they are displayed.

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,16 +7,14 @@ 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 gap;
   private min;
   private max;
   private points;
   constructor(context: CanvasRenderingContext2D, {
     isHorizontal,
-    gap,
     min,
     max,
     isIncreasing
@@ -26,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

@@ -11,14 +11,12 @@
 export class Bump {
   constructor(context, {
     isHorizontal,
-    gap,
     min,
     max,
     isIncreasing
   }) {
     this.context = void 0;
     this.isHorizontal = false;
-    this.gap = 0;
     this.min = {
       x: 0,
       y: 0
@@ -30,7 +28,6 @@ export class Bump {
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
     this.min = min ?? {
       x: 0,
       y: 0
@@ -50,6 +47,9 @@ export class Bump {
   areaEnd() {}
   lineStart() {}
   lineEnd() {}
+  processPoints(points) {
+    return points;
+  }
   point(x, y) {
     this.points.push({
       x,
@@ -73,34 +73,34 @@ export class Bump {
     const [p0, p1, p2, p3] = this.points;
 
     // 0 is the top-left corner
-    this.context.moveTo(p0.x + this.gap, p0.y);
-    this.context.lineTo(p0.x + this.gap, p0.y);
+    this.context.moveTo(p0.x, p0.y);
+    this.context.lineTo(p0.x, p0.y);
 
     // Bezier curve to point 1
-    this.context.bezierCurveTo((p0.x + p1.x) / 2, p0.y, (p0.x + p1.x) / 2, p1.y, p1.x - this.gap, p1.y);
+    this.context.bezierCurveTo((p0.x + p1.x) / 2, p0.y, (p0.x + p1.x) / 2, p1.y, p1.x, p1.y);
 
     // Line to point 2
-    this.context.lineTo(p2.x - this.gap, p2.y);
+    this.context.lineTo(p2.x, p2.y);
 
     // Bezier curve back to point 3
-    this.context.bezierCurveTo((p2.x + p3.x) / 2, p2.y, (p2.x + p3.x) / 2, p3.y, p3.x + this.gap, p3.y);
+    this.context.bezierCurveTo((p2.x + p3.x) / 2, p2.y, (p2.x + p3.x) / 2, p3.y, p3.x, p3.y);
     this.context.closePath();
   }
   drawVerticalPath() {
     const [p0, p1, p2, p3] = this.points;
 
     // 0 is the top-right corner
-    this.context.moveTo(p0.x, p0.y + this.gap);
-    this.context.lineTo(p0.x, p0.y + this.gap);
+    this.context.moveTo(p0.x, p0.y);
+    this.context.lineTo(p0.x, p0.y);
 
     // Bezier curve to point 1
-    this.context.bezierCurveTo(p0.x, (p0.y + p1.y) / 2, p1.x, (p0.y + p1.y) / 2, p1.x, p1.y - this.gap);
+    this.context.bezierCurveTo(p0.x, (p0.y + p1.y) / 2, p1.x, (p0.y + p1.y) / 2, p1.x, p1.y);
 
     // Line to point 2
-    this.context.lineTo(p2.x, p2.y - this.gap);
+    this.context.lineTo(p2.x, p2.y);
 
     // Bezier curve back to point 3
-    this.context.bezierCurveTo(p2.x, (p2.y + p3.y) / 2, p3.x, (p2.y + p3.y) / 2, p3.x, p3.y + this.gap);
+    this.context.bezierCurveTo(p2.x, (p2.y + p3.y) / 2, p3.x, (p2.y + p3.y) / 2, p3.x, p3.y);
     this.context.closePath();
   }
 }

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,14 +1,13 @@
-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,
- * with the option to add a gap between sections while also properly handling the border radius.
+ * with the option to properly handling the border radius.
  *
  * 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

@@ -6,7 +6,7 @@ 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.
+ * with the option to properly handling the border radius.
  *
  * The implementation is based on the d3-shape linear curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
@@ -42,7 +42,7 @@ export class Linear {
     this.pointShape = 'square';
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
@@ -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,32 +102,22 @@ 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 : 2);
-      const slopeEnd = this.points.at(index <= 1 ? 1 : 3);
+    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 - this.gap, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
+        const yGetter = lerpY(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x, slopeEnd.y);
         return {
-          x: xGap,
-          y: yGetter(xGap)
+          x: point.x,
+          y: yGetter(point.x)
         };
       }
-      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);
+      const xGetter = lerpX(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y);
       return {
-        x: xGetter(yGap),
-        y: yGap
+        x: xGetter(point.y),
+        y: point.y
       };
     });
     if (this.pointShape === 'sharp') {
@@ -135,25 +125,43 @@ export class Linear {
       // Else the algorithm will break.
       const isLastSection = this.position === this.sections - 1;
       const isFirstSection = this.position === 0;
+      let firstPoint = null;
+      let secondPoint = null;
       if (isFirstSection && this.isIncreasing) {
-        this.points = [this.isHorizontal ? {
-          x: this.max.x + this.gap,
-          y: (this.max.y + this.min.y) / 2
-        } : {
-          x: (this.max.x + this.min.x) / 2,
-          y: this.max.y + this.gap
-        }, this.points[1], this.points[2]];
+        firstPoint = processedPoints[1];
+        secondPoint = processedPoints[2];
       }
       if (isLastSection && !this.isIncreasing) {
-        this.points = [this.points[0], this.isHorizontal ? {
-          x: this.max.x - this.gap,
+        firstPoint = processedPoints[3];
+        secondPoint = processedPoints[0];
+      }
+      if (firstPoint && secondPoint) {
+        return [
+        // Sharp point at the start
+        this.isHorizontal ? {
+          x: this.max.x,
           y: (this.max.y + this.min.y) / 2
         } : {
           x: (this.max.x + this.min.x) / 2,
-          y: this.max.y - this.gap
-        }, this.points[3]];
+          y: this.max.y
+        },
+        // Then other points
+        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;
 }

package/esm/FunnelChart/curves/pyramid.js

@@ -88,17 +88,9 @@ export class Pyramid {
     }
     return 0;
   }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-
-    // Add gaps where they are needed.
-    this.points = this.points.map((point, index) => {
+  processPoints(points) {
+    // Replace funnel points by pyramids ones.
+    const processedPoints = points.map((point, index) => {
       if (this.isHorizontal) {
         const slopeEnd = {
           x: this.max.x,
@@ -109,10 +101,9 @@ export class Pyramid {
           y: this.max.y
         };
         const yGetter = lerpY(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
         return {
-          x: xGap,
-          y: yGetter(xGap)
+          x: point.x,
+          y: yGetter(point.x)
         };
       }
       const slopeEnd = {
@@ -124,10 +115,9 @@ export class Pyramid {
         y: this.min.y
       } : this.min;
       const xGetter = lerpX(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
       return {
-        x: xGetter(yGap),
-        y: yGap
+        x: xGetter(point.y),
+        y: point.y
       };
     });
 
@@ -135,13 +125,24 @@ export class Pyramid {
     // Else the algorithm will break.
     const isLastSection = this.position === this.sections - 1;
     const isFirstSection = this.position === 0;
-    if (this.gap <= 0) {
-      if (isFirstSection && this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[2]];
-      }
-      if (isLastSection && !this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[3]];
-      }
+    if (isFirstSection && this.isIncreasing) {
+      return [processedPoints[0], processedPoints[1], processedPoints[2]];
+    }
+    if (isLastSection && !this.isIncreasing) {
+      return [processedPoints[0], processedPoints[1], processedPoints[3]];
+    }
+    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 = 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/step-pyramid.d.ts

@@ -1,11 +1,10 @@
-import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
-import { CurveOptions, Point } from "./curve.types.js";
+import { FunnelCurveGenerator, CurveOptions, Point } from "./curve.types.js";
 /**
  * This is a custom "step-pyramid" curve generator.
  * It creates a step pyramid, which is a step-like shape with static lengths.
  * It has the option to add a gap between sections while also properly handling the border radius.
  */
-export declare class StepPyramid implements CurveGenerator {
+export declare class StepPyramid implements FunnelCurveGenerator {
   private context;
   private position;
   private sections;
@@ -33,7 +32,8 @@ export declare class StepPyramid implements CurveGenerator {
   protected getBorderRadius(): number | number[];
   slopeStart(index: number): Point;
   slopeEnd(index: number): Point;
-  initialX(index: number): number;
-  initialY(index: number): number;
+  initialX(index: number, points: Point[]): number;
+  initialY(index: number, points: Point[]): number;
+  processPoints(points: Point[]): Point[];
   point(xIn: number, yIn: number): void;
 }