@mui/x-charts-pro 8.1.0 → 8.3.0

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

@@ -0,0 +1,38 @@
+export type CurveOptions = {
+  /**
+   * 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' | 'pyramid' | 'step-pyramid';
+export type Point = {
+  x: number;
+  y: number;
+};

package/esm/FunnelChart/curves/curve.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { CurveFactory } from '@mui/x-charts-vendor/d3-shape';
+import { CurveOptions, FunnelCurveType } from "./curve.types.js";
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => CurveFactory;

package/esm/FunnelChart/curves/getFunnelCurve.js

@@ -0,0 +1,23 @@
+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 Step;
+  }
+  if (curve === 'bump') {
+    return Bump;
+  }
+  if (curve === 'pyramid') {
+    return Pyramid;
+  }
+  if (curve === 'step-pyramid') {
+    return StepPyramid;
+  }
+  return Linear;
+};
+export const getFunnelCurve = (curve, options) => {
+  return context => new (curveConstructor(curve))(context, options);
+};

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

@@ -0,0 +1,2 @@
+export * from "./curve.types.js";
+export * from "./getFunnelCurve.js";

package/esm/FunnelChart/curves/index.js

@@ -0,0 +1,2 @@
+export * from "./curve.types.js";
+export * from "./getFunnelCurve.js";

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

@@ -0,0 +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.
+ *
+ * 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 position;
+  private sections;
+  private isHorizontal;
+  private gap;
+  private borderRadius;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  protected getBorderRadius(): number | number[];
+  point(xIn: number, yIn: number): void;
+}

package/esm/FunnelChart/curves/linear.js

@@ -0,0 +1,82 @@
+/* eslint-disable class-methods-use-this */
+
+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.
+ *
+ * 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,
+    position,
+    sections,
+    borderRadius
+  }) {
+    this.context = void 0;
+    this.position = 0;
+    this.sections = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.borderRadius = 0;
+    this.points = [];
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+    this.position = position ?? 0;
+    this.sections = sections ?? 1;
+    this.borderRadius = borderRadius ?? 0;
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.position === 0) {
+      return [0, 0, this.borderRadius, this.borderRadius];
+    }
+    if (this.position === this.sections - 1) {
+      return [this.borderRadius, this.borderRadius];
+    }
+    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) => {
+      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)
+        };
+      }
+      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;
+}

package/esm/FunnelChart/curves/pyramid.js

@@ -0,0 +1,121 @@
+/* eslint-disable class-methods-use-this */
+
+import { borderRadiusPolygon } from "./borderRadiusPolygon.js";
+import { lerpX, lerpY } from "./utils.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 class Pyramid {
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius,
+    min,
+    max
+  }) {
+    this.context = void 0;
+    this.position = 0;
+    this.sections = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.borderRadius = 0;
+    this.min = {
+      x: 0,
+      y: 0
+    };
+    this.max = {
+      x: 0,
+      y: 0
+    };
+    this.points = [];
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+    this.position = position ?? 0;
+    this.sections = sections ?? 1;
+    this.borderRadius = borderRadius ?? 0;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.position === 0) {
+      return [0, 0, this.borderRadius, this.borderRadius];
+    }
+    if (this.position === this.sections - 1 && this.gap <= 0) {
+      return [this.borderRadius];
+    }
+    if (this.position === this.sections - 1) {
+      return [this.borderRadius, this.borderRadius];
+    }
+    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) => {
+      if (this.isHorizontal) {
+        const slopeEnd = {
+          x: this.max.x,
+          y: (this.max.y + this.min.y) / 2
+        };
+        const slopeStart = index <= 1 ? this.min : {
+          x: this.min.x,
+          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)
+        };
+      }
+      const slopeEnd = {
+        x: (this.max.x + this.min.x) / 2,
+        y: this.max.y
+      };
+      const slopeStart = index <= 1 ? {
+        x: this.max.x,
+        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
+      };
+    });
+
+    // In the last section, to form a triangle we need 3 points instead of 4
+    // Else the algorithm will break.
+    if (this.position === this.sections - 1 && this.gap <= 0) {
+      this.points = [this.points[0], this.points[1], this.points[3]];
+    }
+    borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
+  }
+}

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

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

package/esm/FunnelChart/curves/step-pyramid.js

@@ -0,0 +1,101 @@
+/* eslint-disable class-methods-use-this */
+
+import { borderRadiusPolygon } from "./borderRadiusPolygon.js";
+import { lerpX, lerpY } from "./utils.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 class StepPyramid {
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    borderRadius,
+    min,
+    max
+  }) {
+    this.context = void 0;
+    this.position = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.borderRadius = 0;
+    this.min = {
+      x: 0,
+      y: 0
+    };
+    this.max = {
+      x: 0,
+      y: 0
+    };
+    this.points = [];
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+    this.position = position ?? 0;
+    this.borderRadius = borderRadius ?? 0;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    return this.gap > 0 || this.position === 0 ? this.borderRadius : [this.borderRadius, this.borderRadius];
+  }
+  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) => {
+      if (this.isHorizontal) {
+        const slopeEnd = {
+          x: this.max.x,
+          y: (this.max.y + this.min.y) / 2
+        };
+        const slopeStart = index <= 1 ? this.min : {
+          x: this.min.x,
+          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);
+        const xInitial = index === 0 || index === 1 ? this.points.at(0).x : this.points.at(3).x;
+        return {
+          x: xGap,
+          y: yGetter(xInitial)
+        };
+      }
+      const slopeEnd = {
+        x: (this.max.x + this.min.x) / 2,
+        y: this.max.y
+      };
+      const slopeStart = index <= 1 ? {
+        x: this.max.x,
+        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);
+      const yInitial = index === 0 || index === 1 ? this.points.at(0).y : this.points.at(3).y;
+      return {
+        x: xGetter(yInitial),
+        y: yGap
+      };
+    });
+    borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
+  }
+}

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

@@ -0,0 +1,32 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+import { CurveOptions } 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,
+ * with the option to add a gap between sections while also properly handling the border radius.
+ *
+ * It takes the min and max of the x and y coordinates of the points to create a rectangle.
+ *
+ * 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 {
+  private context;
+  private isHorizontal;
+  private gap;
+  private borderRadius;
+  private position;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    borderRadius
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  protected getBorderRadius(): number | number[];
+  point(xIn: number, yIn: number): void;
+}

package/esm/FunnelChart/curves/step.js

@@ -0,0 +1,82 @@
+/* eslint-disable class-methods-use-this */
+
+import { borderRadiusPolygon } from "./borderRadiusPolygon.js";
+import { max, min } from "./utils.js";
+
+/**
+ * This is a custom "step" curve generator.
+ * It is used to draw "rectangles" from 4 points without having to rework the rendering logic,
+ * with the option to add a gap between sections while also properly handling the border radius.
+ *
+ * It takes the min and max of the x and y coordinates of the points to create a rectangle.
+ *
+ * The implementation is based on the d3-shape step curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
+ */
+export class Step {
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    borderRadius
+  }) {
+    this.context = void 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.borderRadius = 0;
+    this.position = 0;
+    this.points = [];
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+    this.position = position ?? 0;
+    this.borderRadius = borderRadius ?? 0;
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    return this.gap > 0 || this.position === 0 ? this.borderRadius : [this.borderRadius, this.borderRadius];
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    if (this.points.length < 4) {
+      return;
+    }
+
+    // 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);
+      if (this.isHorizontal) {
+        return {
+          x: index === 1 || index === 2 ? max(allX) : min(allX),
+          y: index <= 1 ? max(allY) : min(allY)
+        };
+      }
+      return {
+        x: index <= 1 ? min(allX) : max(allX),
+        y: index === 1 || index === 2 ? max(allY) : min(allY)
+      };
+    });
+
+    // Add gaps where they are needed.
+    this.points = this.points.map((point, index) => {
+      if (this.isHorizontal) {
+        return {
+          x: point.x + (index === 0 || index === 3 ? this.gap : -this.gap),
+          y: point.y
+        };
+      }
+      return {
+        x: point.x,
+        y: point.y + (index === 0 || index === 3 ? this.gap : -this.gap)
+      };
+    });
+    borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
+  }
+}

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

@@ -0,0 +1,4 @@
+export declare const max: (numbers: number[]) => number;
+export declare const min: (numbers: number[]) => number;
+export declare const lerpX: (x1: number, y1: number, x2: number, y2: number) => (y: number) => number;
+export declare const lerpY: (x1: number, y1: number, x2: number, y2: number) => (x: number) => number;

package/esm/FunnelChart/curves/utils.js

@@ -0,0 +1,19 @@
+export const max = numbers => Math.max(...numbers, -Infinity);
+export const min = numbers => Math.min(...numbers, Infinity);
+// From point1 to point2, get the x value from y
+export const lerpX = (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;
+};
+
+// From point1 to point2, get the y value from x
+export const lerpY = (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;
+};

package/esm/FunnelChart/funnel.types.d.ts

@@ -1,9 +1,9 @@
 import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
 import { CommonSeriesType, CartesianSeriesType, CommonDefaultizedProps, SeriesId } from '@mui/x-charts/internals';
-import { CurveType, Position } from '@mui/x-charts/models';
+import { Position } from '@mui/x-charts/models';
 import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
+import { FunnelCurveType } from "./curves/index.js";
 export type FunnelItemId = string | number;
-export type FunnelCurveType = Extract<CurveType, 'linear' | 'step'> | 'bump';
 export type FunnelValueType = {
   /**
    * A unique identifier of the funnel section.
@@ -43,11 +43,23 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    */
   layout?: 'horizontal' | 'vertical';
   /**
-   * The type of curve to use for the line. Read more about curves at
-   * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
    * @default 'linear'
    */
   curve?: FunnelCurveType;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
   /**
    * The label configuration for the funnel plot.
    * Allows to customize the position and margin of the label that is displayed on the funnel sections.
@@ -56,6 +68,15 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    * @default { vertical: 'middle', horizontal: 'center' }
    */
   sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => FunnelLabelOptions | false) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   *
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
 }
 /**
  * An object that allows to identify a funnel item.

package/esm/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelPlotSlots {
   funnelSection?: React.ElementType<FunnelSectionProps>;
 }