@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

package/FunnelChart/FunnelSection.mjs

@@ -0,0 +1,65 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+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';
+import { useItemHighlighted } from '@mui/x-charts/hooks';
+import clsx from 'clsx';
+import { useUtilityClasses } from "./funnelSectionClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FunnelSectionPath = styled('path', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(() => ({
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
+}));
+
+/**
+ * @ignore - internal component.
+ */
+const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
+  classesResolver: useUtilityClasses
+}, /*#__PURE__*/React.forwardRef(function FunnelSection(props, ref) {
+  const {
+      seriesId,
+      dataIndex,
+      classes,
+      color,
+      onClick,
+      className,
+      variant = 'filled'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'funnel',
+    seriesId,
+    dataIndex
+  }), [seriesId, dataIndex]);
+  const interactionProps = useInteractionItemProps(identifier);
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted(identifier);
+  const isOutlined = variant === 'outlined';
+  return /*#__PURE__*/_jsx(FunnelSectionPath, _extends({}, interactionProps, {
+    filter: isHighlighted && !isOutlined ? 'brightness(120%)' : undefined,
+    opacity: isFaded && !isOutlined ? 0.3 : 1,
+    fill: color,
+    stroke: isOutlined ? color : 'none',
+    fillOpacity: isOutlined && !isHighlighted ? 0.4 : 1,
+    strokeOpacity: 1,
+    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
+  }));
+}));
+if (process.env.NODE_ENV !== "production") FunnelSection.displayName = "FunnelSection";
+export { FunnelSection };

package/FunnelChart/FunnelSectionLabel.d.mts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type SeriesId } from '@mui/x-charts/internals';
+import { type FunnelSectionClasses } from "./funnelSectionClasses.mjs";
+export interface FunnelSectionLabelConfig {
+  x: number;
+  y: number;
+  value: string | null;
+  textAnchor?: React.SVGProps<SVGTextElement>['textAnchor'];
+  dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'];
+}
+export interface FunnelSectionLabelProps extends Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id'> {
+  classes?: Partial<FunnelSectionClasses>;
+  label: FunnelSectionLabelConfig;
+  seriesId: SeriesId;
+  dataIndex: number;
+}
+/**
+ * @ignore - internal component.
+ */
+declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<{}>>;
+export { FunnelSectionLabel };

package/FunnelChart/FunnelSectionLabel.mjs

@@ -0,0 +1,46 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["classes", "color", "onClick", "className", "label", "seriesId", "dataIndex"];
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { consumeSlots } from '@mui/x-charts/internals';
+import { useLabelUtilityClasses } from "./funnelSectionClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+const FunnelSectionLabel = consumeSlots('MuiFunnelSectionLabel', 'funnelSectionLabel', {
+  classesResolver: useLabelUtilityClasses
+}, /*#__PURE__*/React.forwardRef(function FunnelSectionLabel(props, ref) {
+  const {
+      classes,
+      label
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx("text", _extends({
+    stroke: "none",
+    pointerEvents: "none",
+    fontFamily: theme.typography.body2.fontFamily,
+    fontSize: theme.typography.body2.fontSize,
+    fontSizeAdjust: theme.typography.body2.fontSizeAdjust,
+    fontWeight: theme.typography.body2.fontWeight,
+    letterSpacing: theme.typography.body2.letterSpacing,
+    fontStretch: theme.typography.body2.fontStretch,
+    fontStyle: theme.typography.body2.fontStyle,
+    fontVariant: theme.typography.body2.fontVariant,
+    fill: (theme.vars || theme)?.palette?.text?.primary,
+    className: classes?.label,
+    x: label.x,
+    y: label.y,
+    textAnchor: label.textAnchor ?? 'middle',
+    dominantBaseline: label.dominantBaseline ?? 'central'
+  }, other, {
+    ref: ref,
+    children: label.value
+  }));
+}));
+if (process.env.NODE_ENV !== "production") FunnelSectionLabel.displayName = "FunnelSectionLabel";
+export { FunnelSectionLabel };

package/FunnelChart/coordinateMapper.d.mts

@@ -0,0 +1,3 @@
+import { type D3Scale } from '@mui/x-charts/internals';
+import { type PositionGetter } from "./curves/curve.types.mjs";
+export declare const createPositionGetter: (scale: D3Scale, isCategoryDirection: boolean, gap: number, ordinalScaleData: readonly any[] | undefined) => PositionGetter;

package/FunnelChart/curves/borderRadiusPolygon.d.mts

@@ -0,0 +1,8 @@
+import { type Point } from "./curve.types.mjs";
+/**
+ * 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/FunnelChart/curves/bump.d.mts

@@ -0,0 +1,31 @@
+import { type FunnelCurveGenerator, type CurveOptions, type Point } from "./curve.types.mjs";
+/**
+ * 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.
+ *
+ * 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 FunnelCurveGenerator {
+  private context;
+  private isHorizontal;
+  private min;
+  private max;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    min,
+    max,
+    isIncreasing
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  processPoints(points: Point[]): Point[];
+  point(x: number, y: number): void;
+  private drawPath;
+  private drawHorizontalPath;
+  private drawVerticalPath;
+}

package/FunnelChart/curves/getFunnelCurve.d.mts

@@ -0,0 +1,8 @@
+import type { Path } from '@mui/x-charts-vendor/d3-path';
+import { type CurveOptions, type FunnelCurveType } from "./curve.types.mjs";
+import { Step } from "./step.mjs";
+import { Linear } from "./linear.mjs";
+import { Bump } from "./bump.mjs";
+import { Pyramid } from "./pyramid.mjs";
+import { StepPyramid } from "./step-pyramid.mjs";
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => (context: CanvasRenderingContext2D | Path) => Step | Linear | Bump | Pyramid | StepPyramid;

package/FunnelChart/curves/getFunnelCurve.mjs

@@ -0,0 +1,26 @@
+import { Step } from "./step.mjs";
+import { Linear } from "./linear.mjs";
+import { Bump } from "./bump.mjs";
+import { Pyramid } from "./pyramid.mjs";
+import { StepPyramid } from "./step-pyramid.mjs";
+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) => {
+  if (curve === 'linear-sharp') {
+    options.pointShape = 'sharp';
+  }
+  return context => new (curveConstructor(curve))(context, options);
+};

package/FunnelChart/curves/index.d.mts

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

package/FunnelChart/curves/index.mjs

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

package/FunnelChart/curves/linear.d.mts

@@ -0,0 +1,40 @@
+import { type FunnelCurveGenerator, type CurveOptions, type Point } from "./curve.types.mjs";
+/**
+ * This is a custom "linear" curve generator.
+ * It draws straight lines for the 4 provided points,
+ * 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 FunnelCurveGenerator {
+  private context;
+  private position;
+  private sections;
+  private isHorizontal;
+  private isIncreasing;
+  private gap;
+  private borderRadius;
+  private min;
+  private max;
+  private points;
+  private pointShape;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius,
+    min,
+    max,
+    isIncreasing,
+    pointShape
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  protected getBorderRadius(): number | number[];
+  processPoints(points: Point[]): Point[];
+  point(xIn: number, yIn: number): void;
+}

package/FunnelChart/curves/linear.mjs

@@ -0,0 +1,164 @@
+import { borderRadiusPolygon } from "./borderRadiusPolygon.mjs";
+import { lerpX, lerpY } from "./utils.mjs";
+
+/**
+ * This is a custom "linear" curve generator.
+ * It draws straight lines for the 4 provided points,
+ * 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 class Linear {
+  position = 0;
+  sections = 0;
+  isHorizontal = false;
+  isIncreasing = false;
+  gap = 0;
+  borderRadius = 0;
+  min = {
+    x: 0,
+    y: 0
+  };
+  max = {
+    x: 0,
+    y: 0
+  };
+  points = [];
+  pointShape = 'square';
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius,
+    min,
+    max,
+    isIncreasing,
+    pointShape
+  }) {
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = gap ?? 0;
+    this.position = position ?? 0;
+    this.sections = sections ?? 1;
+    this.borderRadius = borderRadius ?? 0;
+    this.isIncreasing = isIncreasing ?? false;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+    this.pointShape = pointShape ?? 'square';
+    if (isIncreasing) {
+      const currentMin = this.min;
+      const currentMax = this.max;
+      this.min = currentMax;
+      this.max = currentMin;
+    }
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.isIncreasing) {
+      // Is largest section
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === 0 && this.pointShape === 'sharp') {
+        return [0, 0, this.borderRadius];
+      }
+      // Is smallest section
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius, this.borderRadius];
+      }
+    }
+    if (!this.isIncreasing) {
+      // Is largest section
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === this.sections - 1 && this.pointShape === 'sharp') {
+        return [0, 0, this.borderRadius];
+      }
+
+      // Is smallest section
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius, this.borderRadius];
+      }
+    }
+    return 0;
+  }
+  processPoints(points) {
+    // Add gaps where they are needed.
+    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, slopeEnd.y);
+        return {
+          x: point.x,
+          y: yGetter(point.x)
+        };
+      }
+      const xGetter = lerpX(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y);
+      return {
+        x: xGetter(point.y),
+        y: point.y
+      };
+    });
+    if (this.pointShape === 'sharp') {
+      // In the last section, to form a triangle we need 3 points instead of 4
+      // 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) {
+        firstPoint = processedPoints[1];
+        secondPoint = processedPoints[2];
+      }
+      if (isLastSection && !this.isIncreasing) {
+        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
+        },
+        // 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/FunnelChart/curves/pyramid.d.mts

@@ -0,0 +1,36 @@
+import { type FunnelCurveGenerator, type CurveOptions, type Point } from "./curve.types.mjs";
+/**
+ * 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 FunnelCurveGenerator {
+  private context;
+  private position;
+  private sections;
+  private isHorizontal;
+  private isIncreasing;
+  private gap;
+  private borderRadius;
+  private min;
+  private max;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius,
+    min,
+    max,
+    isIncreasing
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  protected getBorderRadius(): number | number[];
+  processPoints(points: Point[]): Point[];
+  point(xIn: number, yIn: number): void;
+}

package/FunnelChart/curves/pyramid.mjs

@@ -0,0 +1,146 @@
+import { borderRadiusPolygon } from "./borderRadiusPolygon.mjs";
+import { lerpX, lerpY } from "./utils.mjs";
+
+/**
+ * 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 {
+  position = 0;
+  sections = 0;
+  isHorizontal = false;
+  isIncreasing = false;
+  gap = 0;
+  borderRadius = 0;
+  min = {
+    x: 0,
+    y: 0
+  };
+  max = {
+    x: 0,
+    y: 0
+  };
+  points = [];
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius,
+    min,
+    max,
+    isIncreasing
+  }) {
+    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.isIncreasing = isIncreasing ?? false;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+    if (isIncreasing) {
+      const currentMin = this.min;
+      const currentMax = this.max;
+      this.min = currentMax;
+      this.max = currentMin;
+    }
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.isIncreasing) {
+      // Is largest section
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius];
+      }
+    }
+    if (!this.isIncreasing) {
+      // Is largest section
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius];
+      }
+    }
+    return 0;
+  }
+  processPoints(points) {
+    // Replace funnel points by pyramids ones.
+    const processedPoints = 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);
+        return {
+          x: point.x,
+          y: yGetter(point.x)
+        };
+      }
+      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);
+      return {
+        x: xGetter(point.y),
+        y: point.y
+      };
+    });
+
+    // In the last section, to form a triangle we need 3 points instead of 4
+    // Else the algorithm will break.
+    const isLastSection = this.position === this.sections - 1;
+    const isFirstSection = this.position === 0;
+    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/FunnelChart/curves/step-pyramid.d.mts

@@ -0,0 +1,39 @@
+import { type FunnelCurveGenerator, type CurveOptions, type Point } from "./curve.types.mjs";
+/**
+ * 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 FunnelCurveGenerator {
+  private context;
+  private position;
+  private sections;
+  private isHorizontal;
+  private isIncreasing;
+  private gap;
+  private borderRadius;
+  private min;
+  private max;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius,
+    min,
+    max,
+    isIncreasing
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  protected getBorderRadius(): number | number[];
+  slopeStart(index: number): Point;
+  slopeEnd(index: number): Point;
+  initialX(index: number, points: Point[]): number;
+  initialY(index: number, points: Point[]): number;
+  processPoints(points: Point[]): Point[];
+  point(xIn: number, yIn: number): void;
+}