@mui/x-charts-pro 8.5.2 → 8.6.0

package/FunnelChart/curves/linear.js

@@ -97,7 +97,7 @@ 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
@@ -107,19 +107,11 @@ 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 = (0, _utils.lerpY)(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x, slopeEnd.y);
         return {
@@ -141,15 +133,15 @@ 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,
@@ -162,6 +154,19 @@ 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;
+    }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }
 }

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

@@ -93,17 +93,9 @@ class Pyramid {
     }
     return 0;
   }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-
+  processPoints(points) {
     // Replace funnel points by pyramids ones.
-    this.points = this.points.map((point, index) => {
+    const processedPoints = points.map((point, index) => {
       if (this.isHorizontal) {
         const slopeEnd = {
           x: this.max.x,
@@ -139,10 +131,23 @@ class Pyramid {
     const isLastSection = this.position === this.sections - 1;
     const isFirstSection = this.position === 0;
     if (isFirstSection && this.isIncreasing) {
-      this.points = [this.points[0], this.points[1], this.points[2]];
+      return [processedPoints[0], processedPoints[1], processedPoints[2]];
     }
     if (isLastSection && !this.isIncreasing) {
-      this.points = [this.points[0], this.points[1], this.points[3]];
+      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;
     }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }

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

package/FunnelChart/curves/step-pyramid.js

@@ -135,46 +135,48 @@ class StepPyramid {
       y: this.max.y
     };
   }
-  initialX(index) {
+  initialX(index, points) {
     if (this.isIncreasing) {
-      return index === 0 || index === 1 ? this.points.at(1).x : this.points.at(2).x;
+      return index === 0 || index === 1 ? points.at(1).x : points.at(2).x;
     }
-    return index === 0 || index === 1 ? this.points.at(0).x : this.points.at(3).x;
+    return index === 0 || index === 1 ? points.at(0).x : points.at(3).x;
   }
-  initialY(index) {
+  initialY(index, points) {
     if (this.isIncreasing) {
-      return index === 0 || index === 1 ? this.points.at(1).y : this.points.at(2).y;
+      return index === 0 || index === 1 ? points.at(1).y : points.at(2).y;
     }
-    return index === 0 || index === 1 ? this.points.at(0).y : this.points.at(3).y;
+    return index === 0 || index === 1 ? points.at(0).y : points.at(3).y;
   }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-
+  processPoints(points) {
     // Replace funnel points by pyramids ones.
-    this.points = this.points.map((point, index) => {
+    const processedPoints = points.map((point, index) => {
       const slopeStart = this.slopeStart(index);
       const slopeEnd = this.slopeEnd(index);
       if (this.isHorizontal) {
         const yGetter = (0, _utils.lerpY)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-        const xInitial = this.initialX(index);
+        const xInitial = this.initialX(index, points);
         return {
           x: point.x,
           y: yGetter(xInitial)
         };
       }
       const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yInitial = this.initialY(index);
+      const yInitial = this.initialY(index, points);
       return {
         x: xGetter(yInitial),
         y: point.y
       };
     });
+    return processedPoints;
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    if (this.points.length < 4) {
+      return;
+    }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }
 }

package/FunnelChart/curves/step.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 "step" curve generator.
  * It is used to draw "rectangles" from 4 points without having to rework the rendering logic,
@@ -10,7 +9,7 @@ import { CurveOptions } from "./curve.types.js";
  * The implementation is based on the d3-shape step curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
  */
-export declare class Step implements CurveGenerator {
+export declare class Step implements FunnelCurveGenerator {
   private context;
   private isHorizontal;
   private isIncreasing;
@@ -32,5 +31,6 @@ export declare class Step implements CurveGenerator {
   lineStart(): void;
   lineEnd(): void;
   protected getBorderRadius(): number | number[];
+  processPoints(points: Point[]): Point[];
   point(xIn: number, yIn: number): void;
 }

package/FunnelChart/curves/step.js

@@ -62,19 +62,11 @@ class Step {
     }
     return [this.borderRadius, this.borderRadius];
   }
-  point(xIn, yIn) {
-    this.points.push({
-      x: xIn,
-      y: yIn
-    });
-    if (this.points.length < 4) {
-      return;
-    }
-
+  processPoints(points) {
     // Ensure we have rectangles instead of trapezoids.
-    this.points = this.points.map((_, index) => {
-      const allX = this.points.map(p => p.x);
-      const allY = this.points.map(p => p.y);
+    const processedPoints = points.map((_, index) => {
+      const allX = points.map(p => p.x);
+      const allY = points.map(p => p.y);
       if (this.isHorizontal) {
         return {
           x: index === 1 || index === 2 ? (0, _utils.max)(allX) : (0, _utils.min)(allX),
@@ -86,6 +78,16 @@ class Step {
         y: index === 1 || index === 2 ? (0, _utils.max)(allY) : (0, _utils.min)(allY)
       };
     });
+    return processedPoints;
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    if (this.points.length < 4) {
+      return;
+    }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }
 }