@mui/x-charts-pro 8.5.0 → 8.5.2

package/ChartsToolbarPro/index.js

@@ -14,25 +14,25 @@ Object.keys(_ChartsToolbarPro).forEach(function (key) {
     }
   });
 });
-var _ChartsToolbarZoomInButton = require("./ChartsToolbarZoomInButton");
-Object.keys(_ChartsToolbarZoomInButton).forEach(function (key) {
+var _ChartsToolbarZoomInTrigger = require("./ChartsToolbarZoomInTrigger");
+Object.keys(_ChartsToolbarZoomInTrigger).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartsToolbarZoomInButton[key]) return;
+  if (key in exports && exports[key] === _ChartsToolbarZoomInTrigger[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _ChartsToolbarZoomInButton[key];
+      return _ChartsToolbarZoomInTrigger[key];
     }
   });
 });
-var _ChartsToolbarZoomOutButton = require("./ChartsToolbarZoomOutButton");
-Object.keys(_ChartsToolbarZoomOutButton).forEach(function (key) {
+var _ChartsToolbarZoomOutTrigger = require("./ChartsToolbarZoomOutTrigger");
+Object.keys(_ChartsToolbarZoomOutTrigger).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartsToolbarZoomOutButton[key]) return;
+  if (key in exports && exports[key] === _ChartsToolbarZoomOutTrigger[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _ChartsToolbarZoomOutButton[key];
+      return _ChartsToolbarZoomOutTrigger[key];
     }
   });
 });

package/FunnelChart/FunnelChart.js

@@ -23,6 +23,7 @@ var _useFunnelChartProps = require("./useFunnelChartProps");
 var _seriesConfig = require("./seriesConfig");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _FunnelChart2 = require("./FunnelChart.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const seriesConfig = {
   funnel: _seriesConfig.seriesConfig
@@ -48,7 +49,9 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
   } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps, ref);
   const Tooltip = themedProps.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    gap: themedProps.gap,
     seriesConfig: seriesConfig,
+    plugins: _FunnelChart2.FUNNEL_CHART_PLUGINS,
     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)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), children]
@@ -95,16 +98,6 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
     size: _propTypes.default.number,
     tickLabelStyle: _propTypes.default.object,
     tickSize: _propTypes.default.number
-  }), _propTypes.default.shape({
-    categories: _propTypes.default.arrayOf(_propTypes.default.string),
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'none', 'right', 'top']),
-    scaleType: _propTypes.default.oneOf(['point']),
-    size: _propTypes.default.number,
-    tickLabelStyle: _propTypes.default.object,
-    tickSize: _propTypes.default.number
   }), _propTypes.default.shape({
     categories: _propTypes.default.arrayOf(_propTypes.default.string),
     disableLine: _propTypes.default.bool,
@@ -229,7 +222,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   })]),
   /**
    * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse position.
+   * The second argument contains information about all funnel elements at the current position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */

package/FunnelChart/FunnelChart.plugins.d.ts

@@ -1,4 +1,5 @@
-import { ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type FunnelChartPluginsSignatures = [UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+import { UseChartFunnelAxisSignature } from "./funnelAxisPlugin/useChartFunnelAxis.types.js";
+export type FunnelChartPluginsSignatures = [UseChartFunnelAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
 export declare const FUNNEL_CHART_PLUGINS: ConvertSignaturesIntoPlugins<FunnelChartPluginsSignatures>;

package/FunnelChart/FunnelChart.plugins.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.FUNNEL_CHART_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
-const FUNNEL_CHART_PLUGINS = exports.FUNNEL_CHART_PLUGINS = [_internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];
+var _useChartFunnelAxis = require("./funnelAxisPlugin/useChartFunnelAxis");
+const FUNNEL_CHART_PLUGINS = exports.FUNNEL_CHART_PLUGINS = [_useChartFunnelAxis.useChartFunnelAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];

package/FunnelChart/FunnelPlot.d.ts

@@ -2,11 +2,6 @@ import * as React from 'react';
 import { FunnelItemIdentifier } from "./funnel.types.js";
 import { FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
 export interface FunnelPlotProps extends FunnelPlotSlotExtension {
-  /**
-   * The gap, in pixels, between funnel sections.
-   * @default 0
-   */
-  gap?: number;
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/FunnelChart/FunnelPlot.js

@@ -13,25 +13,27 @@ var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
-var _hooks = require("@mui/x-charts/hooks");
-var _styles = require("@mui/material/styles");
 var _FunnelSection = require("./FunnelSection");
 var _labelUtils = require("./labelUtils");
 var _useFunnelSeries = require("../hooks/useFunnelSeries");
 var _curves = require("./curves");
+var _FunnelSectionLabel = require("./FunnelSectionLabel");
+var _useChartFunnelAxisRendering = require("./funnelAxisPlugin/useChartFunnelAxisRendering.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onItemClick", "gap"];
+const _excluded = ["onItemClick"];
 _internals.cartesianSeriesTypes.addType('funnel');
-const useAggregatedData = gap => {
+const useAggregatedData = () => {
   const seriesData = (0, _useFunnelSeries.useFunnelSeriesContext)();
+  const store = (0, _internals.useStore)();
   const {
-    xAxis,
-    xAxisIds
-  } = (0, _hooks.useXAxes)();
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorChartXAxis);
   const {
-    yAxis,
-    yAxisIds
-  } = (0, _hooks.useYAxes)();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorChartYAxis);
+  const gap = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorFunnelGap);
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];
@@ -54,22 +56,28 @@ const useAggregatedData = gap => {
       const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
-      const xPosition = (value, bandIndex, stackOffset, useBand) => {
-        if (isXAxisBand) {
-          const position = xScale(bandIndex);
+      const xPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
+        if ((0, _internals.isBandScale)(xScale)) {
+          const position = xScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }
-        return xScale(isHorizontal ? value + (stackOffset || 0) : value);
+        if (isHorizontal) {
+          return xScale(value + (stackOffset || 0)) + bandIndex * gap;
+        }
+        return xScale(value);
       };
-      const yPosition = (value, bandIndex, stackOffset, useBand) => {
-        if (isYAxisBand) {
-          const position = yScale(bandIndex);
+      const yPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
+        if ((0, _internals.isBandScale)(yScale)) {
+          const position = yScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }
-        return yScale(isHorizontal ? value : value + (stackOffset || 0));
+        if (isHorizontal) {
+          return yScale(value);
+        }
+        return yScale(value + (stackOffset || 0)) + bandIndex * gap;
       };
-      const allY = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => yPosition(v.y, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
-      const allX = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => xPosition(v.x, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const allY = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => yPosition(v.y, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const allX = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => xPosition(v.x, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
       const minPoint = {
         x: Math.min(...allX),
         y: Math.min(...allY)
@@ -97,7 +105,7 @@ const useAggregatedData = gap => {
           min: minPoint,
           max: maxPoint
         });
-        const line = (0, _d3Shape.line)().x(d => xPosition(d.x, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
+        const line = (0, _d3Shape.line)().x(d => xPosition(d.x, dataIndex, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, dataIndex, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
         return {
           d: line(values),
           color,
@@ -126,12 +134,10 @@ const useAggregatedData = gap => {
 };
 function FunnelPlot(props) {
   const {
-      onItemClick,
-      gap
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _styles.useTheme)();
-  const data = useAggregatedData(gap);
+  const data = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [data.map(({
       d,
@@ -156,29 +162,18 @@ function FunnelPlot(props) {
       })
     }))), data.map(({
       id,
-      label
+      label,
+      seriesId,
+      dataIndex
     }) => {
-      if (!label) {
+      if (!label || !label.value) {
         return null;
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
-        x: label.x,
-        y: label.y,
-        textAnchor: label.textAnchor,
-        dominantBaseline: label.dominantBaseline,
-        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,
-        children: label.value
-      }, id);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelSectionLabel.FunnelSectionLabel, (0, _extends2.default)({
+        label: label,
+        dataIndex: dataIndex,
+        seriesId: seriesId
+      }, other), id);
     })]
   });
 }
@@ -187,11 +182,6 @@ process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * The gap, in pixels, between funnel sections.
-   * @default 0
-   */
-  gap: _propTypes.default.number,
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/FunnelChart/FunnelSection.d.ts

@@ -8,7 +8,7 @@ export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>,
   classes?: Partial<FunnelSectionClasses>;
   variant?: 'filled' | 'outlined';
 }
-export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, React.SVGProps<SVGPathElement>, {}>;
+export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.SVGProps<SVGPathElement>, {}>;
 /**
  * @ignore - internal component.
  */

package/FunnelChart/FunnelSectionLabel.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { SeriesId } from '@mui/x-charts/internals';
+import { FunnelSectionClasses } from "./funnelSectionClasses.js";
+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.js

@@ -0,0 +1,52 @@
+"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.FunnelSectionLabel = 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 _internals = require("@mui/x-charts/internals");
+var _funnelSectionClasses = require("./funnelSectionClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["classes", "color", "onClick", "className", "label", "seriesId", "dataIndex"];
+/**
+ * @ignore - internal component.
+ */
+const FunnelSectionLabel = exports.FunnelSectionLabel = (0, _internals.consumeSlots)('MuiFunnelSectionLabel', 'funnelSectionLabel', {
+  classesResolver: _funnelSectionClasses.useLabelUtilityClasses
+}, /*#__PURE__*/React.forwardRef(function FunnelSectionLabel(props, ref) {
+  const {
+      classes,
+      label
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const theme = (0, _styles.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({
+    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";

package/FunnelChart/categoryAxis.types.d.ts

@@ -1,6 +1,7 @@
 import { AxisConfig, ScaleName } from '@mui/x-charts/models';
 import { MakeOptional } from '@mui/x-internals/types';
-export type CategoryAxis<S extends ScaleName = ScaleName> = S extends ScaleName ? {
+export type FunnelScaleName = Exclude<ScaleName, 'point'>;
+export type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = S extends FunnelScaleName ? {
   /**
    * The categories to be displayed on the axis.
    * The order of the categories is the order in which they are displayed.

package/FunnelChart/curves/bump.d.ts

@@ -10,18 +10,22 @@ import { CurveOptions } from "./curve.types.js";
  */
 export declare class Bump implements CurveGenerator {
   private context;
-  private x;
-  private y;
-  private currentPoint;
   private isHorizontal;
-  private gap;
+  private min;
+  private max;
+  private points;
   constructor(context: CanvasRenderingContext2D, {
     isHorizontal,
-    gap
+    min,
+    max,
+    isIncreasing
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;
   lineStart(): void;
   lineEnd(): void;
   point(x: number, y: number): void;
+  private drawPath;
+  private drawHorizontalPath;
+  private drawVerticalPath;
 }

package/FunnelChart/curves/bump.js

@@ -17,65 +17,94 @@ exports.Bump = void 0;
 class Bump {
   constructor(context, {
     isHorizontal,
-    gap
+    min,
+    max,
+    isIncreasing
   }) {
     this.context = void 0;
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
     this.isHorizontal = false;
-    this.gap = 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.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() {}
   point(x, y) {
-    x = +x;
-    y = +y;
-
-    // 0 is the top-left corner.
-    if (this.isHorizontal) {
-      if (this.currentPoint === 0) {
-        this.context.moveTo(x + this.gap, y);
-        this.context.lineTo(x + this.gap, y);
-      } else if (this.currentPoint === 1) {
-        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x - this.gap, y);
-      } else if (this.currentPoint === 2) {
-        this.context.lineTo(x - this.gap, y);
-      } else {
-        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x + this.gap, y);
-      }
-      if (this.currentPoint === 3) {
-        this.context.closePath();
-      }
-      this.currentPoint += 1;
-      this.x = x;
-      this.y = y;
+    this.points.push({
+      x,
+      y
+    });
+    if (this.points.length < 4) {
       return;
     }
 
-    // 0 is the top-right corner.
-    if (this.currentPoint === 0) {
-      // X from Y
-      this.context.moveTo(x, y + this.gap);
-      this.context.lineTo(x, y + this.gap);
-    } else if (this.currentPoint === 1) {
-      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y - this.gap);
-    } else if (this.currentPoint === 2) {
-      this.context.lineTo(x, y - this.gap);
+    // Draw the path using bezier curves
+    this.drawPath();
+  }
+  drawPath() {
+    if (this.isHorizontal) {
+      this.drawHorizontalPath();
     } else {
-      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y + this.gap);
-    }
-    if (this.currentPoint === 3) {
-      this.context.closePath();
+      this.drawVerticalPath();
     }
-    this.currentPoint += 1;
-    this.x = x;
-    this.y = y;
+  }
+  drawHorizontalPath() {
+    const [p0, p1, p2, p3] = this.points;
+
+    // 0 is the top-left corner
+    this.context.moveTo(p0.x, p0.y);
+    this.context.lineTo(p0.x, p0.y);
+
+    // Bezier curve to point 1
+    this.context.bezierCurveTo((p0.x + p1.x) / 2, p0.y, (p0.x + p1.x) / 2, p1.y, p1.x, p1.y);
+
+    // Line to point 2
+    this.context.lineTo(p2.x, p2.y);
+
+    // Bezier curve back to point 3
+    this.context.bezierCurveTo((p2.x + p3.x) / 2, p2.y, (p2.x + p3.x) / 2, p3.y, p3.x, p3.y);
+    this.context.closePath();
+  }
+  drawVerticalPath() {
+    const [p0, p1, p2, p3] = this.points;
+
+    // 0 is the top-right corner
+    this.context.moveTo(p0.x, p0.y);
+    this.context.lineTo(p0.x, p0.y);
+
+    // Bezier curve to point 1
+    this.context.bezierCurveTo(p0.x, (p0.y + p1.y) / 2, p1.x, (p0.y + p1.y) / 2, p1.x, p1.y);
+
+    // Line to point 2
+    this.context.lineTo(p2.x, p2.y);
+
+    // Bezier curve back to point 3
+    this.context.bezierCurveTo(p2.x, (p2.y + p3.y) / 2, p3.x, (p2.y + p3.y) / 2, p3.x, p3.y);
+    this.context.closePath();
   }
 }
 exports.Bump = Bump;

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

@@ -34,8 +34,13 @@ export type CurveOptions = {
    * The maximum point for all the segments.
    */
   max?: Point;
+  /**
+   * The shape of the point of the funnel for the curves that support it.
+   */
+  pointShape?: FunnelPointShape;
 };
-export type FunnelCurveType = 'linear' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+export type FunnelCurveType = 'linear' | 'linear-sharp' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+export type FunnelPointShape = 'square' | 'sharp';
 export type Point = {
   x: number;
   y: number;

package/FunnelChart/curves/getFunnelCurve.js

@@ -25,6 +25,9 @@ const curveConstructor = curve => {
   return _linear.Linear;
 };
 const getFunnelCurve = (curve, options) => {
+  if (curve === 'linear-sharp') {
+    options.pointShape = 'sharp';
+  }
   return context => new (curveConstructor(curve))(context, options);
 };
 exports.getFunnelCurve = getFunnelCurve;

package/FunnelChart/curves/linear.d.ts

@@ -3,7 +3,7 @@ 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.
+ * 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
@@ -13,15 +13,23 @@ export declare class Linear implements CurveGenerator {
   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
+    borderRadius,
+    min,
+    max,
+    isIncreasing,
+    pointShape
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;