@mui/x-charts-pro 8.7.0 → 8.9.0

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["axisId", "axisDirection", "reverse"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { selectorChartAxisZoomOptionsLookup, useSelector, useStore } from '@mui/x-charts/internals';
+import { alpha } from '@mui/system';
+import useId from '@mui/utils/useId';
+import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
+import { ChartAxisZoomSliderPreviewContent } from "./ChartAxisZoomSliderPreviewContent.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PreviewBackgroundRect = styled('rect')(({
+  theme
+}) => ({
+  rx: 4,
+  ry: 4,
+  stroke: theme.palette.grey[700],
+  fill: alpha(theme.palette.grey[700], 0.4)
+}));
+export function ChartAxisZoomSliderPreview(_ref) {
+  let {
+      axisId,
+      axisDirection
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("g", _extends({}, props, {
+    children: [/*#__PURE__*/_jsx(PreviewRectangles, _extends({}, props, {
+      axisId: axisId,
+      axisDirection: axisDirection
+    })), /*#__PURE__*/_jsx("rect", _extends({}, props, {
+      fill: "transparent",
+      rx: 4,
+      ry: 4
+    })), /*#__PURE__*/_jsx(ChartAxisZoomSliderPreviewContent, _extends({
+      axisId: axisId
+    }, props))]
+  }));
+}
+function PreviewRectangles(props) {
+  const {
+    axisId,
+    axisDirection
+  } = props;
+  const store = useStore();
+  const zoomData = useSelector(store, selectorChartAxisZoomData, [axisId]);
+  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, [axisId]);
+  const id = useId();
+  if (!zoomData) {
+    return null;
+  }
+  const maskId = `zoom-preview-mask-${axisId}-${id}`;
+  let x;
+  let y;
+  let width;
+  let height;
+  const range = zoomOptions.maxEnd - zoomOptions.minStart;
+  if (axisDirection === 'x') {
+    x = props.x + (zoomData.start - zoomOptions.minStart) / range * props.width;
+    y = props.y;
+    width = (zoomData.end - zoomData.start) / range * props.width;
+    height = props.height;
+  } else {
+    x = props.x;
+    y = props.y + (1 - zoomData.end / range) * props.height;
+    width = props.width;
+    height = (zoomData.end - zoomData.start) / range * props.height;
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs("mask", {
+      id: maskId,
+      children: [/*#__PURE__*/_jsx("rect", {
+        x: props.x,
+        y: props.y,
+        width: props.width,
+        height: props.height,
+        fill: "white"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        fill: "black",
+        rx: 4,
+        ry: 4
+      })]
+    }), /*#__PURE__*/_jsx(PreviewBackgroundRect, {
+      x: props.x,
+      y: props.y,
+      width: props.width,
+      height: props.height,
+      mask: `url(#${maskId})`
+    })]
+  });
+}

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { AxisId } from '@mui/x-charts/internals';
+interface ChartAxisZoomSliderPreviewContentProps {
+  axisId: AxisId;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): React.JSX.Element;
+export {};

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { selectorChartSeriesProcessed, useSelector, useStore } from '@mui/x-charts/internals';
+import { LinePreviewPlot } from "./previews/LinePreviewPlot.js";
+import { AreaPreviewPlot } from "./previews/AreaPreviewPlot.js";
+import { BarPreviewPlot } from "./previews/BarPreviewPlot.js";
+import { ScatterPreviewPlot } from "./previews/ScatterPreviewPlot.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChartAxisZoomSliderPreviewContent(props) {
+  const {
+    axisId,
+    x,
+    y,
+    width,
+    height
+  } = props;
+  const store = useStore();
+  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
+  const children = [];
+  const clipId = `zoom-preview-mask-${axisId}`;
+  const hasLineSeries = (processedSeries.line?.seriesOrder?.length ?? 0) > 0;
+  const hasBarSeries = (processedSeries.bar?.seriesOrder?.length ?? 0) > 0;
+  const hasScatterSeries = (processedSeries.scatter?.seriesOrder?.length ?? 0) > 0;
+  if (hasLineSeries) {
+    children.push(/*#__PURE__*/_jsx(AreaPreviewPlot, {
+      axisId: axisId
+    }, "area"));
+  }
+  if (hasBarSeries) {
+    children.push(/*#__PURE__*/_jsx(BarPreviewPlot, _extends({}, props), "bar"));
+  }
+  if (hasLineSeries) {
+    children.push(/*#__PURE__*/_jsx(LinePreviewPlot, {
+      axisId: axisId
+    }, "line"));
+  }
+  if (hasScatterSeries) {
+    children.push(/*#__PURE__*/_jsx(ScatterPreviewPlot, _extends({}, props), "scatter"));
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("clipPath", {
+      id: clipId,
+      children: /*#__PURE__*/_jsx("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      clipPath: `url(#${clipId})`,
+      children: children
+    })]
+  });
+}

package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SeriesId } from '@mui/x-charts/internals';
+import { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface AreaPreviewPlotProps extends PreviewPlotProps {}
+export declare function AreaPreviewPlot({
+  axisId
+}: AreaPreviewPlotProps): React.JSX.Element;
+export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
+  id: SeriesId;
+  gradientId?: string;
+  color: string;
+  d: string;
+}
+export {};

package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "color", "gradientId", "onClick"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useSelector, useStore, useAreaPlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AreaPlotRoot = styled('g', {
+  name: 'MuiAreaPlot',
+  slot: 'Root'
+})();
+export function AreaPreviewPlot({
+  axisId
+}) {
+  const completedData = useAreaPreviewData(axisId);
+  return /*#__PURE__*/_jsx(AreaPlotRoot, {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      area,
+      gradientId
+    }) => !!area && /*#__PURE__*/_jsx(PreviewAreaElement, {
+      id: seriesId,
+      d: d,
+      color: color,
+      gradientId: gradientId
+    }, seriesId))
+  });
+}
+/**
+ * Preview of the area element for the zoom preview.
+ * Based on AreaElement and AnimatedArea.
+ */
+function PreviewAreaElement(_ref) {
+  let {
+      id,
+      color,
+      gradientId
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx("path", _extends({
+    fill: gradientId ? `url(#${gradientId})` : color,
+    stroke: "none",
+    "data-series": id
+  }, other));
+}
+function useAreaPreviewData(axisId) {
+  const store = useStore();
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  return useAreaPlotData(xAxes, yAxes);
+}

package/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface BarPreviewPlotProps extends PreviewPlotProps {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function BarPreviewPlot(props: BarPreviewPlotProps): React.JSX.Element;
+export {};

package/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis, useBarPlotData, useSelector, useStore } from '@mui/x-charts/internals';
+import { BarElement } from '@mui/x-charts/BarChart';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BarPreviewPlot(props) {
+  const drawingArea = {
+    left: props.x,
+    top: props.y,
+    width: props.width,
+    height: props.height,
+    right: props.x + props.width,
+    bottom: props.y + props.height
+  };
+  const {
+    completedData
+  } = useBarPreviewData(props.axisId, drawingArea);
+  return /*#__PURE__*/_jsx("g", {
+    children: completedData.map(({
+      seriesId,
+      data
+    }) => /*#__PURE__*/_jsx("g", {
+      children: data.map(({
+        dataIndex,
+        color,
+        layout,
+        x,
+        xOrigin,
+        y,
+        yOrigin,
+        width,
+        height
+      }) => {
+        return /*#__PURE__*/_jsx(BarElement, {
+          id: seriesId,
+          dataIndex: dataIndex,
+          color: color,
+          skipAnimation: true,
+          layout: layout ?? 'vertical',
+          x: x,
+          xOrigin: xOrigin,
+          y: y,
+          yOrigin: yOrigin,
+          width: width,
+          height: height
+        }, dataIndex);
+      })
+    }, seriesId))
+  });
+}
+function useBarPreviewData(axisId, drawingArea) {
+  const store = useStore();
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  return useBarPlotData(drawingArea, xAxes, yAxes);
+}

package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SeriesId } from '@mui/x-charts/internals';
+import { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface LinePreviewPlotProps extends PreviewPlotProps {}
+export declare function LinePreviewPlot({
+  axisId
+}: LinePreviewPlotProps): React.JSX.Element;
+export interface PreviewLineElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
+  id: SeriesId;
+  gradientId?: string;
+  color: string;
+  d: string;
+}
+export {};

package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "color", "gradientId", "onClick"];
+import * as React from 'react';
+import { useSelector, useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinePreviewPlot({
+  axisId
+}) {
+  const completedData = useLinePreviewData(axisId);
+  return /*#__PURE__*/_jsx("g", {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      gradientId
+    }) => {
+      return /*#__PURE__*/_jsx(PreviewLineElement, {
+        id: seriesId,
+        d: d,
+        color: color,
+        gradientId: gradientId
+      }, seriesId);
+    })
+  });
+}
+/**
+ * Preview of the line element for the zoom preview.
+ * Based on LineElement and AnimatedLine.
+ */
+function PreviewLineElement(_ref) {
+  let {
+      id,
+      color,
+      gradientId
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx("path", _extends({
+    stroke: gradientId ? `url(#${gradientId})` : color,
+    strokeWidth: 2,
+    strokeLinejoin: "round",
+    fill: "none",
+    "data-series": id
+  }, other));
+}
+function useLinePreviewData(axisId) {
+  const store = useStore();
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  return useLinePlotData(xAxes, yAxes);
+}

package/esm/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts

@@ -0,0 +1,4 @@
+import { AxisId } from '@mui/x-charts/internals';
+export interface PreviewPlotProps {
+  axisId: AxisId;
+}

package/esm/ChartZoomSlider/internals/previews/PreviewPlot.types.js

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

package/esm/ChartZoomSlider/internals/previews/ScatterPreviewPlot.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface ScatterPreviewPlotProps extends PreviewPlotProps {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ScatterPreviewPlot({
+  axisId,
+  x,
+  y,
+  height,
+  width
+}: ScatterPreviewPlotProps): React.JSX.Element | null;
+export {};

package/esm/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { useSelector, useStore, useScatterPlotData, scatterSeriesConfig, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { useScatterSeriesContext, useXAxes, useYAxes, useZAxes } from '@mui/x-charts/hooks';
+import { ScatterMarker } from '@mui/x-charts/ScatterChart';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ScatterPreviewPlot({
+  axisId,
+  x,
+  y,
+  height,
+  width
+}) {
+  const store = useStore();
+  const seriesData = useScatterSeriesContext();
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const {
+    zAxis: zAxes,
+    zAxisIds
+  } = useZAxes();
+  const defaultZAxisId = zAxisIds[0];
+  if (seriesData === undefined) {
+    return null;
+  }
+  const {
+    series,
+    seriesOrder
+  } = seriesData;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: seriesOrder.map(seriesId => {
+      const {
+        id,
+        xAxisId,
+        yAxisId,
+        zAxisId,
+        color
+      } = series[seriesId];
+      const colorGetter = scatterSeriesConfig.colorProcessor(series[seriesId], xAxes[xAxisId ?? defaultXAxisId], yAxes[yAxisId ?? defaultYAxisId], zAxes[zAxisId ?? defaultZAxisId]);
+      const xScale = xAxes[xAxisId ?? defaultXAxisId].scale;
+      const yScale = yAxes[yAxisId ?? defaultYAxisId].scale;
+      return /*#__PURE__*/_jsx(ScatterPreviewItems, {
+        xScale: xScale,
+        yScale: yScale,
+        color: color,
+        colorGetter: colorGetter,
+        series: series[seriesId],
+        x: x,
+        y: y,
+        height: height,
+        width: width
+      }, id);
+    })
+  });
+}
+function ScatterPreviewItems(props) {
+  const {
+    series,
+    xScale,
+    yScale,
+    color,
+    colorGetter,
+    x,
+    y,
+    width,
+    height
+  } = props;
+  const isPointInside = React.useCallback((px, py) => px >= x && px <= x + width && py >= y && py <= y + height, [height, width, x, y]);
+  const scatterPlotData = useScatterPlotData(series, xScale, yScale, isPointInside);
+  return /*#__PURE__*/_jsx("g", {
+    "data-series": series.id,
+    children: scatterPlotData.map((dataPoint, i) => {
+      return /*#__PURE__*/_jsx(ScatterMarker, {
+        dataIndex: dataPoint.dataIndex,
+        color: colorGetter ? colorGetter(i) : color,
+        x: dataPoint.x,
+        y: dataPoint.y,
+        seriesId: series.id,
+        size: series.preview.markerSize,
+        isHighlighted: false,
+        isFaded: false
+      }, dataPoint.id ?? dataPoint.dataIndex);
+    })
+  });
+}

package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -56,7 +56,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
    *   - [Export as Image](https://mui.com/x/react-charts/export/#export-as-image)
    */
   options: PropTypes.shape({
+    copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    onBeforeExport: PropTypes.func,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired
   }),

package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -56,7 +56,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
    *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
    */
   options: PropTypes.shape({
-    fileName: PropTypes.string
+    copyStyles: PropTypes.bool,
+    fileName: PropTypes.string,
+    onBeforeExport: PropTypes.func
   }),
   /**
    * A function to customize the rendering of the component.

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -151,7 +151,9 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   imageExportOptions: PropTypes.arrayOf(PropTypes.shape({
+    copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    onBeforeExport: PropTypes.func,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired
   })),

package/esm/FunnelChart/FunnelChart.d.ts

@@ -8,12 +8,13 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { FunnelChartSlotExtension } from "./funnelSlots.types.js";
 import { CategoryAxis } from "./categoryAxis.types.js";
 import { FunnelChartPluginsSignatures } from "./FunnelChart.plugins.js";
-export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
+export type FunnelSeries = MakeOptional<FunnelSeriesType, 'type'>;
+export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
   /**
    * The series to display in the funnel chart.
-   * An array of [[FunnelSeriesType]] objects.
+   * An array of [[FunnelSeries]] objects.
    */
-  series: Readonly<MakeOptional<FunnelSeriesType, 'type'>[]>;
+  series: Readonly<FunnelSeries[]>;
   /**
    * The configuration of the category axis.
    *

package/esm/FunnelChart/FunnelChart.js

@@ -234,7 +234,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * The series to display in the funnel chart.
-   * An array of [[FunnelSeriesType]] objects.
+   * An array of [[FunnelSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

package/esm/FunnelChart/FunnelPlot.js

@@ -86,7 +86,7 @@ const useAggregatedData = () => {
           seriesId,
           value: currentSeries.data[dataIndex].value
         }) : currentSeries.sectionLabel;
-        const isIncreasing = currentSeries.dataDirection === 'increasing';
+        const isIncreasing = currentSeries.funnelDirection === 'increasing';
         const curve = getFunnelCurve(currentSeries.curve, {
           isHorizontal,
           gap,

package/esm/FunnelChart/funnel.types.d.ts

@@ -16,7 +16,7 @@ export type FunnelValueType = {
   /**
    * The label to display on the tooltip, funnel section, or the legend. It can be a string or a function.
    */
-  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string);
+  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string | undefined);
   /**
    * The color of the funnel section
    */
@@ -78,6 +78,17 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    * @default 'filled'
    */
   variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   *
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
 }
 /**
  * An object that allows to identify a funnel item.
@@ -108,16 +119,10 @@ export type FunnelItem = {
    */
   value: number;
 };
-export interface DefaultizedFunnelSeriesType extends DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'> {
+export interface DefaultizedFunnelSeriesType extends Omit<DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'>, 'funnelDirection'> {
   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';
+  funnelDirection: 'increasing' | 'decreasing';
 }
 export type FunnelDataPoints = Record<'x' | 'y', number> & {
   useBandWidth: boolean;

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts

@@ -1,6 +1,6 @@
 import { ChartPluginSignature, UseChartCartesianAxisDefaultizedParameters, UseChartCartesianAxisParameters, UseChartCartesianAxisState, UseChartInteractionSignature, UseChartSeriesSignature, ChartsAxisData } from '@mui/x-charts/internals';
 export type UseChartFunnelAxisSignature = ChartPluginSignature<{
-  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick'> & {
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis'> & {
     /**
      * The gap, in pixels, between funnel sections.
      * @default 0

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts

@@ -3,7 +3,7 @@ import { UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js";
 export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
   gap: number;
 } | undefined;
-export declare const selectorFunnelGap: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+export declare const selectorFunnelGap: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
   funnel: {
     gap: number;
   };
@@ -12,7 +12,7 @@ export declare const selectorFunnelGap: import("reselect").Selector<import("@mui
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartXAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartXAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -33,7 +33,7 @@ export declare const selectorChartXAxis: import("reselect").Selector<import("@mu
 }> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>, []>;
-export declare const selectorChartYAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartYAxis: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;

package/esm/FunnelChart/index.d.ts

@@ -1,5 +1,5 @@
 export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
-export type { FunnelChartProps } from "./FunnelChart.js";
+export type { FunnelChartProps, FunnelSeries } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";