@mui/x-charts-pro 8.3.1 → 8.4.0

package/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -0,0 +1,92 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartAxisZoomSliderThumb = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chartAxisZoomSliderThumbClasses = require("./chartAxisZoomSliderThumbClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
+const Rect = (0, _styles.styled)('rect')(({
+  theme
+}) => ({
+  [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.root}`]: {
+    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[300] : (theme.vars || theme).palette.common.white,
+    stroke: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[600] : (theme.vars || theme).palette.grey[500]
+  },
+  [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.horizontal}`]: {
+    cursor: 'ew-resize'
+  },
+  [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.vertical}`]: {
+    cursor: 'ns-resize'
+  }
+}));
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartAxisZoomSliderThumb(_ref, forwardedRef) {
+  let {
+      className,
+      onMove,
+      orientation,
+      placement,
+      rx = 4,
+      ry = 4
+    } = _ref,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const classes = (0, _chartAxisZoomSliderThumbClasses.useUtilityClasses)({
+    onMove,
+    orientation,
+    placement
+  });
+  const thumbRef = React.useRef(null);
+  const ref = (0, _useForkRef.default)(thumbRef, forwardedRef);
+  const onMoveEvent = (0, _useEventCallback.default)(onMove);
+  React.useEffect(() => {
+    const thumb = thumbRef.current;
+    if (!thumb) {
+      return;
+    }
+    const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
+      onMoveEvent(event);
+    });
+    const onPointerUp = () => {
+      thumb.removeEventListener('pointermove', onPointerMove);
+      thumb.removeEventListener('pointerup', onPointerUp);
+    };
+    const onPointerDown = event => {
+      // Prevent text selection when dragging the thumb
+      event.preventDefault();
+      event.stopPropagation();
+      thumb.setPointerCapture(event.pointerId);
+      thumb.addEventListener('pointerup', onPointerUp);
+      thumb.addEventListener('pointermove', onPointerMove);
+    };
+    thumb.addEventListener('pointerdown', onPointerDown);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      thumb.removeEventListener('pointerdown', onPointerDown);
+      onPointerMove.clear();
+    };
+  }, [onMoveEvent, orientation]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Rect, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, className),
+    ref: ref,
+    rx: rx,
+    ry: ry
+  }, rest));
+});
+if (process.env.NODE_ENV !== "production") ChartAxisZoomSliderThumb.displayName = "ChartAxisZoomSliderThumb";

package/ChartZoomSlider/internals/ChartsTooltipZoomSliderValue.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PopperProps } from '@mui/material/Popper';
+interface ChartsTooltipZoomSliderValueProps extends Pick<PopperProps, 'anchorEl' | 'open' | 'modifiers' | 'placement'>, React.PropsWithChildren {}
+export declare function ChartsTooltipZoomSliderValue({
+  anchorEl,
+  open,
+  placement,
+  modifiers,
+  children
+}: ChartsTooltipZoomSliderValueProps): React.JSX.Element;
+export {};

package/ChartZoomSlider/internals/ChartsTooltipZoomSliderValue.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsTooltipZoomSliderValue = ChartsTooltipZoomSliderValue;
+var React = _interopRequireWildcard(require("react"));
+var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _styles = require("@mui/material/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The root component of the zoom slider tooltip.
+ * @ignore - internal component.
+ */const ChartsZoomSliderTooltipRoot = (0, _styles.styled)(_Popper.default, {
+  name: 'MuiChartsZoomSliderTooltip',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal
+}));
+const MODIFIERS = [{
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+}];
+function ChartsTooltipZoomSliderValue({
+  anchorEl,
+  open,
+  placement,
+  modifiers = MODIFIERS,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
+    children: open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsZoomSliderTooltipRoot, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: placement,
+      modifiers: modifiers,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
+        sx: {
+          paddingX: 0.5
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "caption",
+          children: children
+        })
+      })
+    }) : null
+  });
+}

package/ChartZoomSlider/internals/chartAxisZoomSliderThumbClasses.d.ts

@@ -0,0 +1,17 @@
+import type { ChartZoomSliderThumbOwnerState } from "./ChartAxisZoomSliderThumb.js";
+export interface ChartAxisZoomSliderThumbClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+}
+export type ChartAxisZoomSliderThumbClassKey = keyof ChartAxisZoomSliderThumbClasses;
+export declare const chartAxisZoomSliderThumbClasses: ChartAxisZoomSliderThumbClasses;
+export declare function getAxisZoomSliderThumbUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: ChartZoomSliderThumbOwnerState) => Record<"root", string>;

package/ChartZoomSlider/internals/{chartAxisZoomSliderHandleClasses.js → chartAxisZoomSliderThumbClasses.js}

@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.chartAxisZoomSliderHandleClasses = void 0;
-exports.getAxisZoomSliderHandleUtilityClass = getAxisZoomSliderHandleUtilityClass;
+exports.chartAxisZoomSliderThumbClasses = void 0;
+exports.getAxisZoomSliderThumbUtilityClass = getAxisZoomSliderThumbUtilityClass;
 exports.useUtilityClasses = void 0;
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-const chartAxisZoomSliderHandleClasses = exports.chartAxisZoomSliderHandleClasses = (0, _generateUtilityClasses.default)('MuiChartAxisZoomSliderHandle', ['root', 'horizontal', 'vertical', 'start', 'end']);
-function getAxisZoomSliderHandleUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiChartAxisZoomSliderHandle', slot);
+const chartAxisZoomSliderThumbClasses = exports.chartAxisZoomSliderThumbClasses = (0, _generateUtilityClasses.default)('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+function getAxisZoomSliderThumbUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartAxisZoomSliderThumb', slot);
 }
 const useUtilityClasses = ownerState => {
   const {
@@ -22,6 +22,6 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', orientation === 'horizontal' ? 'horizontal' : 'vertical', placement === 'start' ? 'start' : 'end']
   };
-  return (0, _composeClasses.default)(slots, getAxisZoomSliderHandleUtilityClass);
+  return (0, _composeClasses.default)(slots, getAxisZoomSliderThumbUtilityClass);
 };
 exports.useUtilityClasses = useUtilityClasses;

package/FunnelChart/FunnelChart.js

@@ -51,13 +51,14 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
     seriesConfig: seriesConfig,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [!themedProps.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelPlot.FunnelPlot, (0, _extends2.default)({}, funnelPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !themedProps.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, themedProps.slotProps?.tooltip, {
-          trigger: "item"
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), children]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelPlot.FunnelPlot, (0, _extends2.default)({}, funnelPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), children]
+      })), !themedProps.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, themedProps.slotProps?.tooltip, {
+        trigger: "item"
       }))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") FunnelChart.displayName = "FunnelChart";
 process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/FunnelChart/FunnelPlot.js

@@ -86,12 +86,14 @@ const useAggregatedData = gap => {
           seriesId,
           value: currentSeries.data[dataIndex].value
         }) : currentSeries.sectionLabel;
+        const isIncreasing = currentSeries.dataDirection === 'increasing';
         const curve = (0, _curves.getFunnelCurve)(currentSeries.curve, {
           isHorizontal,
           gap,
           position: dataIndex,
           sections: currentSeries.dataPoints.length,
           borderRadius: currentSeries.borderRadius,
+          isIncreasing,
           min: minPoint,
           max: maxPoint
         });

package/FunnelChart/FunnelSection.js

@@ -64,4 +64,5 @@ const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiF
   }, other, {
     ref: ref
   }));
-}));
+}));
+if (process.env.NODE_ENV !== "production") FunnelSection.displayName = "FunnelSection";

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

@@ -8,6 +8,10 @@ export type CurveOptions = {
    * Indicates if the main axis of the visualization.
    */
   isHorizontal?: boolean;
+  /**
+   * Indicates if the segments values are increasing or decreasing.
+   */
+  isIncreasing?: boolean;
   /**
    * The order position of the segment.
    */

package/FunnelChart/curves/pyramid.d.ts

@@ -11,6 +11,7 @@ export declare class Pyramid implements CurveGenerator {
   private position;
   private sections;
   private isHorizontal;
+  private isIncreasing;
   private gap;
   private borderRadius;
   private min;
@@ -23,7 +24,8 @@ export declare class Pyramid implements CurveGenerator {
     sections,
     borderRadius,
     min,
-    max
+    max,
+    isIncreasing
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;

package/FunnelChart/curves/pyramid.js

@@ -22,12 +22,14 @@ class Pyramid {
     sections,
     borderRadius,
     min,
-    max
+    max,
+    isIncreasing
   }) {
     this.context = void 0;
     this.position = 0;
     this.sections = 0;
     this.isHorizontal = false;
+    this.isIncreasing = false;
     this.gap = 0;
     this.borderRadius = 0;
     this.min = {
@@ -45,6 +47,7 @@ class Pyramid {
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
+    this.isIncreasing = isIncreasing ?? false;
     this.min = min ?? {
       x: 0,
       y: 0
@@ -53,6 +56,12 @@ class Pyramid {
       x: 0,
       y: 0
     };
+    if (isIncreasing) {
+      const currentMin = this.min;
+      const currentMax = this.max;
+      this.min = currentMax;
+      this.max = currentMin;
+    }
   }
   areaStart() {}
   areaEnd() {}
@@ -62,14 +71,25 @@ class Pyramid {
     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.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.position === this.sections - 1) {
-      return [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) {
+        return [this.borderRadius];
+      }
     }
     return 0;
   }
@@ -118,8 +138,15 @@ class Pyramid {
 
     // 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]];
+    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]];
+      }
     }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }

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

@@ -1,5 +1,5 @@
 import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
-import { CurveOptions } from "./curve.types.js";
+import { 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.
@@ -8,7 +8,9 @@ import { CurveOptions } from "./curve.types.js";
 export declare class StepPyramid implements CurveGenerator {
   private context;
   private position;
+  private sections;
   private isHorizontal;
+  private isIncreasing;
   private gap;
   private borderRadius;
   private min;
@@ -18,14 +20,20 @@ export declare class StepPyramid implements CurveGenerator {
     isHorizontal,
     gap,
     position,
+    sections,
     borderRadius,
     min,
-    max
+    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): number;
+  initialY(index: number): number;
   point(xIn: number, yIn: number): void;
 }

package/FunnelChart/curves/step-pyramid.js

@@ -18,13 +18,17 @@ class StepPyramid {
     isHorizontal,
     gap,
     position,
+    sections,
     borderRadius,
     min,
-    max
+    max,
+    isIncreasing
   }) {
     this.context = void 0;
     this.position = 0;
+    this.sections = 0;
     this.isHorizontal = false;
+    this.isIncreasing = false;
     this.gap = 0;
     this.borderRadius = 0;
     this.min = {
@@ -40,7 +44,9 @@ class StepPyramid {
     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
@@ -55,7 +61,91 @@ class StepPyramid {
   lineStart() {}
   lineEnd() {}
   getBorderRadius() {
-    return this.gap > 0 || this.position === 0 ? this.borderRadius : [this.borderRadius, this.borderRadius];
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.isIncreasing) {
+      if (this.position === this.sections - 1) {
+        return this.borderRadius;
+      }
+      return [0, 0, this.borderRadius, this.borderRadius];
+    }
+    if (this.position === 0) {
+      return this.borderRadius;
+    }
+    return [this.borderRadius, this.borderRadius];
+  }
+  slopeStart(index) {
+    if (this.isIncreasing) {
+      if (this.isHorizontal) {
+        return {
+          x: this.min.x,
+          y: (this.min.y + this.max.y) / 2
+        };
+      }
+      return {
+        x: (this.min.x + this.max.x) / 2,
+        y: this.min.y
+      };
+    }
+    if (this.isHorizontal) {
+      if (index <= 1) {
+        return this.min;
+      }
+      return {
+        x: this.min.x,
+        y: this.max.y
+      };
+    }
+    if (index <= 1) {
+      return {
+        x: this.max.x,
+        y: this.min.y
+      };
+    }
+    return this.min;
+  }
+  slopeEnd(index) {
+    if (this.isIncreasing) {
+      if (this.isHorizontal) {
+        if (index <= 1) {
+          return {
+            x: this.max.x,
+            y: this.min.y
+          };
+        }
+        return this.max;
+      }
+      if (index <= 1) {
+        return this.max;
+      }
+      return {
+        x: this.min.x,
+        y: this.max.y
+      };
+    }
+    if (this.isHorizontal) {
+      return {
+        x: this.max.x,
+        y: (this.max.y + this.min.y) / 2
+      };
+    }
+    return {
+      x: (this.max.x + this.min.x) / 2,
+      y: this.max.y
+    };
+  }
+  initialX(index) {
+    if (this.isIncreasing) {
+      return index === 0 || index === 1 ? this.points.at(1).x : this.points.at(2).x;
+    }
+    return index === 0 || index === 1 ? this.points.at(0).x : this.points.at(3).x;
+  }
+  initialY(index) {
+    if (this.isIncreasing) {
+      return index === 0 || index === 1 ? this.points.at(1).y : this.points.at(2).y;
+    }
+    return index === 0 || index === 1 ? this.points.at(0).y : this.points.at(3).y;
   }
   point(xIn, yIn) {
     this.points.push({
@@ -68,34 +158,20 @@ class StepPyramid {
 
     // Add gaps where they are needed.
     this.points = this.points.map((point, index) => {
+      const slopeStart = this.slopeStart(index);
+      const slopeEnd = this.slopeEnd(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;
+        const xInitial = this.initialX(index);
         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;
+      const yInitial = this.initialY(index);
       return {
         x: xGetter(yInitial),
         y: yGap

package/FunnelChart/curves/step.d.ts

@@ -13,15 +13,19 @@ import { CurveOptions } from "./curve.types.js";
 export declare class Step implements CurveGenerator {
   private context;
   private isHorizontal;
+  private isIncreasing;
   private gap;
   private borderRadius;
   private position;
+  private sections;
   private points;
   constructor(context: CanvasRenderingContext2D, {
     isHorizontal,
     gap,
     position,
-    borderRadius
+    borderRadius,
+    isIncreasing,
+    sections
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;

package/FunnelChart/curves/step.js

@@ -23,26 +23,44 @@ class Step {
     isHorizontal,
     gap,
     position,
-    borderRadius
+    borderRadius,
+    isIncreasing,
+    sections
   }) {
     this.context = void 0;
     this.isHorizontal = false;
+    this.isIncreasing = false;
     this.gap = 0;
     this.borderRadius = 0;
     this.position = 0;
+    this.sections = 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.isIncreasing = isIncreasing ?? false;
   }
   areaStart() {}
   areaEnd() {}
   lineStart() {}
   lineEnd() {}
   getBorderRadius() {
-    return this.gap > 0 || this.position === 0 ? this.borderRadius : [this.borderRadius, this.borderRadius];
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.isIncreasing) {
+      if (this.position === this.sections - 1) {
+        return this.borderRadius;
+      }
+      return [0, 0, this.borderRadius, this.borderRadius];
+    }
+    if (this.position === 0) {
+      return this.borderRadius;
+    }
+    return [this.borderRadius, this.borderRadius];
   }
   point(xIn, yIn) {
     this.points.push({

package/FunnelChart/funnel.types.d.ts

@@ -110,6 +110,13 @@ export type FunnelItem = {
 export interface DefaultizedFunnelSeriesType extends DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'> {
   dataPoints: FunnelDataPoints[][];
   data: Readonly<MakeRequired<FunnelValueType, 'id' | 'color'>[]>;
+  /**
+   * Denotes if the data is increasing, first data point is less than the last data point.
+   * While the data is decreasing if the first data point is greater than the last data point.
+   *
+   * This is used to determine the direction of the funnel.
+   */
+  dataDirection: 'increasing' | 'decreasing';
 }
 export type FunnelDataPoints = Record<'x' | 'y', number> & {
   useBandWidth: boolean;