@mui/x-charts-pro 8.5.1 → 8.5.2

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorFunnelGap = exports.selectorFunnel = exports.selectorChartYAxis = exports.selectorChartXAxis = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _computeAxisValue = require("./computeAxisValue");
+const selectorFunnel = state => state.funnel;
+exports.selectorFunnel = selectorFunnel;
+const selectorFunnelGap = exports.selectorFunnelGap = (0, _internals.createSelector)([selectorFunnel], funnel => funnel?.gap ?? 0);
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _internals.createSelector)([_internals.selectorChartRawXAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap], (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  gap
+}));
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _internals.createSelector)([_internals.selectorChartRawYAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap], (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  gap
+}));

package/FunnelChart/labelUtils.d.ts

@@ -1,4 +1,5 @@
 import { FunnelDataPoints, FunnelLabelOptions } from "./funnel.types.js";
+import { PositionGetter } from "./positionGetter.js";
 /**
  * It tries to keep the label inside the bounds of the section based on the position.
  *
@@ -30,8 +31,8 @@ export declare const positionLabel: ({
   dataIndex,
   baseScaleData
 }: Omit<FunnelLabelOptions, "textAnchor" | "dominantBaseline"> & {
-  xPosition: (value: number, bandIndex: number, stackOffset?: number, useBand?: boolean) => number | undefined;
-  yPosition: (value: number, bandIndex: number, stackOffset?: number, useBand?: boolean) => number | undefined;
+  xPosition: PositionGetter;
+  yPosition: PositionGetter;
   isHorizontal: boolean;
   values: readonly FunnelDataPoints[];
   dataIndex: number;

package/FunnelChart/labelUtils.js

@@ -80,28 +80,28 @@ const positionLabel = ({
     minBottom = yPosition(values[2].y, baseScaleData[dataIndex], stackOffset) + mv;
     maxBottom = yPosition(values[3].y, baseScaleData[dataIndex], stackOffset) + mv;
     minRight = 0;
-    maxRight = xPosition(Math.min(...values.map(v => v.x)), baseScaleData[dataIndex], stackOffset, true) + mh;
+    maxRight = xPosition(Math.min(...values.map(v => v.x)), dataIndex, baseScaleData[dataIndex], stackOffset, true) + mh;
     minLeft = 0;
-    maxLeft = xPosition(Math.max(...values.map(v => v.x)), baseScaleData[dataIndex], stackOffset) + mh;
+    maxLeft = xPosition(Math.max(...values.map(v => v.x)), dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
     center = maxRight - (maxRight - maxLeft) / 2;
     leftCenter = 0;
     rightCenter = 0;
-    middle = yPosition(0, baseScaleData[dataIndex], stackOffset) - mv;
-    topMiddle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, baseScaleData[dataIndex], stackOffset) - mv;
-    bottomMiddle = yPosition(values[3].y - (values[3].y - values[2].y) / 2, baseScaleData[dataIndex], stackOffset) + mv;
+    middle = yPosition(0, dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
+    topMiddle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
+    bottomMiddle = yPosition(values[3].y - (values[3].y - values[2].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) + mv;
   } else {
     minTop = 0;
-    maxTop = yPosition(Math.max(...values.map(v => v.y)), baseScaleData[dataIndex], stackOffset) - mv;
+    maxTop = yPosition(Math.max(...values.map(v => v.y)), dataIndex, baseScaleData[dataIndex], stackOffset) - mv;
     minBottom = 0;
-    maxBottom = yPosition(Math.min(...values.map(v => v.y)), baseScaleData[dataIndex], stackOffset, true) - mv;
-    maxRight = xPosition(values[0].x, baseScaleData[dataIndex], stackOffset) + mh;
-    minRight = xPosition(values[1].x, baseScaleData[dataIndex], stackOffset) + mh;
-    minLeft = xPosition(values[2].x, baseScaleData[dataIndex], stackOffset) - mh;
-    maxLeft = xPosition(values[3].x, baseScaleData[dataIndex], stackOffset) - mh;
-    center = xPosition(0, baseScaleData[dataIndex], stackOffset) - mh;
-    rightCenter = xPosition(values[0].x - (values[0].x - values[1].x) / 2, baseScaleData[dataIndex], stackOffset) + mh;
-    leftCenter = xPosition(values[3].x - (values[3].x - values[2].x) / 2, baseScaleData[dataIndex], stackOffset) - mh;
-    middle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, baseScaleData[dataIndex], stackOffset);
+    maxBottom = yPosition(Math.min(...values.map(v => v.y)), dataIndex, baseScaleData[dataIndex], stackOffset, true) - mv;
+    maxRight = xPosition(values[0].x, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
+    minRight = xPosition(values[1].x, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
+    minLeft = xPosition(values[2].x, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
+    maxLeft = xPosition(values[3].x, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
+    center = xPosition(0, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
+    rightCenter = xPosition(values[0].x - (values[0].x - values[1].x) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) + mh;
+    leftCenter = xPosition(values[3].x - (values[3].x - values[2].x) / 2, dataIndex, baseScaleData[dataIndex], stackOffset) - mh;
+    middle = yPosition(values[0].y - (values[0].y - values[1].y) / 2, dataIndex, baseScaleData[dataIndex], stackOffset);
     middle = maxTop - (maxTop - maxBottom) / 2;
     topMiddle = 0;
     bottomMiddle = 0;

package/FunnelChart/positionGetter.d.ts

@@ -0,0 +1 @@
+export type PositionGetter = (value: number, bandIndex: number, bandIdentifier: string | number, stackOffset?: number, useBand?: boolean) => number;

package/FunnelChart/positionGetter.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/FunnelChart/useFunnelChartProps.js

@@ -91,8 +91,7 @@ const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef,
-      gap
+      apiRef
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
@@ -124,7 +123,6 @@ const useFunnelChartProps = props => {
     plugins: _FunnelChart.FUNNEL_CHART_PLUGINS
   });
   const funnelPlotProps = {
-    gap,
     onItemClick,
     slots,
     slotProps

package/Heatmap/Heatmap.d.ts

@@ -5,14 +5,14 @@ import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
 import { HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
-export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarSlots, Partial<ChartsSlotsPro> {
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {
   /**
    * Custom component for the tooltip.
    * @default ChartsTooltipRoot
@@ -24,7 +24,7 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
    */
   legend?: ChartsLegendSlots['legend'];
 }
-export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotPropsPro> {
+export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
   tooltip?: Partial<HeatmapTooltipProps>;
 }
 export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {

package/LineChartPro/LineChartPro.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { LineChartProps, LineChartSlots, LineChartSlotProps } from '@mui/x-charts/LineChart';
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
-export interface LineChartProSlots extends LineChartSlots, Partial<ChartsSlotsPro> {}
-export interface LineChartProSlotProps extends LineChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface LineChartProSlots extends Omit<LineChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface LineChartProSlotProps extends Omit<LineChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/PieChartPro/PieChartPro.d.ts

@@ -3,8 +3,9 @@ import { PieChartProps, PieChartSlotProps, PieChartSlots } from '@mui/x-charts/P
 import { ChartsSlotsPro, ChartsSlotPropsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { PieChartProPluginSignatures } from "./PieChartPro.plugins.js";
-export interface PieChartProSlots extends PieChartSlots, Partial<ChartsSlotsPro> {}
-export interface PieChartProSlotProps extends PieChartSlotProps, Partial<ChartsSlotPropsPro> {}
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface PieChartProSlots extends Omit<PieChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface PieChartProSlotProps extends Omit<PieChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'pie', PieChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/RadarChartPro/RadarChartPro.d.ts

@@ -1,7 +1,22 @@
 import * as React from 'react';
-import { RadarChartProps, RadarDataProviderProps } from '@mui/x-charts/RadarChart';
+import { RadarChartProps, RadarDataProviderProps, RadarChartSlotProps, RadarChartSlots } from '@mui/x-charts/RadarChart';
 import { RadarChartProPluginsSignatures } from "./RadarChartPro.plugins.js";
-export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {}
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
+export interface RadarChartProSlots extends Omit<RadarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface RadarChartProSlotProps extends Omit<RadarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<RadarDataProviderProps<RadarChartProPluginsSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartProSlotProps;
+}
 /**
  * Demos:
  *

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -3,8 +3,9 @@ import { ScatterChartProps, ScatterChartSlotProps, ScatterChartSlots } from '@mu
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
 import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
-export interface ScatterChartProSlots extends ScatterChartSlots, Partial<ChartsSlotsPro> {}
-export interface ScatterChartProSlotProps extends ScatterChartSlotProps, Partial<ChartsSlotPropsPro> {}
+import { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "../ChartsToolbarPro/Toolbar.types.js";
+export interface ScatterChartProSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/esm/BarChartPro/BarChartPro.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProSlots extends BarChartSlots, Partial<ChartsSlotsPro> {}
-export interface BarChartProSlotProps extends BarChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface BarChartProSlots extends Omit<BarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface BarChartProSlotProps extends Omit<BarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0OTA3MDgwMDAwMA==";
+const releaseInfo = "MTc0OTY3OTIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -249,7 +249,8 @@ function getZoomSliderTooltipsText(axis, drawingArea) {
   const formatValue = value => {
     if (axis.valueFormatter) {
       return axis.valueFormatter(value, {
-        location: 'zoom-slider-tooltip'
+        location: 'zoom-slider-tooltip',
+        scale: axis.scale
       });
     }
     return `${value}`;

package/esm/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,6 +1,7 @@
 import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
+export interface ChartsToolbarProProps extends ChartsToolbarProps {}
 /**
  * The chart toolbar component for the pro package.
  */
-export declare function ChartsToolbarPro(props: ChartsToolbarProps): React.JSX.Element | null;
+export declare function ChartsToolbarPro(props: ChartsToolbarProProps): React.JSX.Element | null;

package/esm/ChartsToolbarPro/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsToolbarProProps } from "./ChartsToolbarPro.js";
+export interface ChartsToolbarProSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProProps>;
+}
+export interface ChartsToolbarProSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProProps>;
+}

package/esm/ChartsToolbarPro/Toolbar.types.js

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

package/esm/FunnelChart/FunnelChart.js

@@ -16,6 +16,7 @@ import { useFunnelChartProps } from "./useFunnelChartProps.js";
 import { seriesConfig as funnelSeriesConfig } from "./seriesConfig/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
+import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const seriesConfig = {
   funnel: funnelSeriesConfig
@@ -41,7 +42,9 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
   } = useChartContainerProProps(chartContainerProps, ref);
   const Tooltip = themedProps.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    gap: themedProps.gap,
     seriesConfig: seriesConfig,
+    plugins: FUNNEL_CHART_PLUGINS,
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), children]
@@ -88,16 +91,6 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
     size: PropTypes.number,
     tickLabelStyle: PropTypes.object,
     tickSize: PropTypes.number
-  }), PropTypes.shape({
-    categories: PropTypes.arrayOf(PropTypes.string),
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    position: PropTypes.oneOf(['bottom', 'left', 'none', 'right', 'top']),
-    scaleType: PropTypes.oneOf(['point']),
-    size: PropTypes.number,
-    tickLabelStyle: PropTypes.object,
-    tickSize: PropTypes.number
   }), PropTypes.shape({
     categories: PropTypes.arrayOf(PropTypes.string),
     disableLine: PropTypes.bool,
@@ -222,7 +215,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/esm/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/esm/FunnelChart/FunnelChart.plugins.js

@@ -1,3 +1,4 @@
-import { useChartCartesianAxis, useChartHighlight, useChartInteraction } from '@mui/x-charts/internals';
+import { useChartHighlight, useChartInteraction } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
-export const FUNNEL_CHART_PLUGINS = [useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProExport];
+import { useChartFunnelAxis } from "./funnelAxisPlugin/useChartFunnelAxis.js";
+export const FUNNEL_CHART_PLUGINS = [useChartFunnelAxis, useChartInteraction, useChartHighlight, useChartProExport];

package/esm/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/esm/FunnelChart/FunnelPlot.js

@@ -1,29 +1,31 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["onItemClick", "gap"];
+const _excluded = ["onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { cartesianSeriesTypes } from '@mui/x-charts/internals';
-import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { cartesianSeriesTypes, useSelector, useStore, isBandScale } from '@mui/x-charts/internals';
 import { FunnelSection } from "./FunnelSection.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
 import { getFunnelCurve } from "./curves/index.js";
 import { FunnelSectionLabel } from "./FunnelSectionLabel.js";
+import { selectorChartXAxis, selectorChartYAxis, selectorFunnelGap } from "./funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 cartesianSeriesTypes.addType('funnel');
-const useAggregatedData = gap => {
+const useAggregatedData = () => {
   const seriesData = useFunnelSeriesContext();
+  const store = useStore();
   const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
   const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
+  const gap = useSelector(store, selectorFunnelGap);
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];
@@ -46,22 +48,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 (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 (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)
@@ -89,7 +97,7 @@ const useAggregatedData = gap => {
           min: minPoint,
           max: maxPoint
         });
-        const line = d3Line().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 = d3Line().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,
@@ -118,11 +126,10 @@ const useAggregatedData = gap => {
 };
 function FunnelPlot(props) {
   const {
-      onItemClick,
-      gap
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const data = useAggregatedData(gap);
+  const data = useAggregatedData();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [data.map(({
       d,
@@ -167,11 +174,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.number,
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/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/esm/FunnelChart/curves/bump.d.ts

@@ -11,13 +11,11 @@ import { CurveOptions } from "./curve.types.js";
 export declare class Bump implements CurveGenerator {
   private context;
   private isHorizontal;
-  private gap;
   private min;
   private max;
   private points;
   constructor(context: CanvasRenderingContext2D, {
     isHorizontal,
-    gap,
     min,
     max,
     isIncreasing

package/esm/FunnelChart/curves/bump.js

@@ -11,14 +11,12 @@
 export class Bump {
   constructor(context, {
     isHorizontal,
-    gap,
     min,
     max,
     isIncreasing
   }) {
     this.context = void 0;
     this.isHorizontal = false;
-    this.gap = 0;
     this.min = {
       x: 0,
       y: 0
@@ -30,7 +28,6 @@ export class Bump {
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
     this.min = min ?? {
       x: 0,
       y: 0
@@ -73,34 +70,34 @@ export class Bump {
     const [p0, p1, p2, p3] = this.points;
 
     // 0 is the top-left corner
-    this.context.moveTo(p0.x + this.gap, p0.y);
-    this.context.lineTo(p0.x + this.gap, p0.y);
+    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 - this.gap, p1.y);
+    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 - this.gap, p2.y);
+    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 + this.gap, p3.y);
+    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.gap);
-    this.context.lineTo(p0.x, p0.y + this.gap);
+    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 - this.gap);
+    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 - this.gap);
+    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.gap);
+    this.context.bezierCurveTo(p2.x, (p2.y + p3.y) / 2, p3.x, (p2.y + p3.y) / 2, p3.x, p3.y);
     this.context.closePath();
   }
 }

package/esm/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