@mui/x-charts-pro 8.1.0 → 8.3.0

package/FunnelChart/curves/linear.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Linear = void 0;
+var _borderRadiusPolygon = require("./borderRadiusPolygon");
+var _utils = require("./utils");
+/* eslint-disable class-methods-use-this */
+
+/**
+ * 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
+ */
+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 = (0, _utils.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 = (0, _utils.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
+      };
+    });
+    (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
+  }
+}
+exports.Linear = Linear;

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

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pyramid = void 0;
+var _borderRadiusPolygon = require("./borderRadiusPolygon");
+var _utils = require("./utils");
+/* eslint-disable class-methods-use-this */
+
+/**
+ * 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.
+ */
+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 = (0, _utils.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 = (0, _utils.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]];
+    }
+    (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
+  }
+}
+exports.Pyramid = Pyramid;

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepPyramid = void 0;
+var _borderRadiusPolygon = require("./borderRadiusPolygon");
+var _utils = require("./utils");
+/* eslint-disable class-methods-use-this */
+
+/**
+ * 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.
+ */
+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 = (0, _utils.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 = (0, _utils.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
+      };
+    });
+    (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
+  }
+}
+exports.StepPyramid = StepPyramid;

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

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Step = void 0;
+var _borderRadiusPolygon = require("./borderRadiusPolygon");
+var _utils = require("./utils");
+/* eslint-disable class-methods-use-this */
+
+/**
+ * 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
+ */
+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 ? (0, _utils.max)(allX) : (0, _utils.min)(allX),
+          y: index <= 1 ? (0, _utils.max)(allY) : (0, _utils.min)(allY)
+        };
+      }
+      return {
+        x: index <= 1 ? (0, _utils.min)(allX) : (0, _utils.max)(allX),
+        y: index === 1 || index === 2 ? (0, _utils.max)(allY) : (0, _utils.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)
+      };
+    });
+    (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
+  }
+}
+exports.Step = Step;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.min = exports.max = exports.lerpY = exports.lerpX = void 0;
+const max = numbers => Math.max(...numbers, -Infinity);
+exports.max = max;
+const min = numbers => Math.min(...numbers, Infinity);
+// From point1 to point2, get the x value from y
+exports.min = min;
+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
+exports.lerpX = lerpX;
+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;
+};
+exports.lerpY = lerpY;

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

package/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,4 @@
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -6,6 +6,10 @@ export interface FunnelSectionClasses {
   highlighted: string;
   /** Styles applied to the root element if `faded={true}`. */
   faded: string;
+  /** Styles applied to the root element if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
   /** Styles applied to the label element. */
   label: string;
   /**
@@ -14,5 +18,5 @@ export interface FunnelSectionClasses {
    */
   series: string;
 }
-export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "highlighted" | "faded" | "root", string>;
+export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
 export declare const funnelSectionClasses: FunnelSectionClasses;

package/FunnelChart/funnelSectionClasses.js

@@ -14,15 +14,18 @@ function getFunnelSectionUtilityClass(slot) {
 const useUtilityClasses = props => {
   const {
     classes,
-    seriesId
+    seriesId,
+    variant
   } = props;
   const slots = {
     root: ['root', `series-${seriesId}`],
     highlighted: ['highlighted'],
     faded: ['faded'],
+    outlined: variant === 'outlined' ? ['outlined'] : [],
+    filled: variant === 'filled' ? ['filled'] : [],
     label: ['label']
   };
   return (0, _composeClasses.default)(slots, getFunnelSectionUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;
-const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'label', 'series']);
+const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series']);

package/FunnelChart/index.d.ts

@@ -1,8 +1,9 @@
 export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
-export type { FunnelChartProps } from './FunnelChart';
+export type { FunnelChartProps } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
+export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
-export type { FunnelSectionClasses } from './funnelSectionClasses';
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";

package/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -10,6 +10,7 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
   return (0, _extends2.default)({
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
   }, seriesData, {
+    borderRadius: seriesData.borderRadius ?? 8,
     data: seriesData.data.map((d, index) => (0, _extends2.default)({
       color: colors[index % colors.length]
     }, d))