@mui/x-charts-pro 8.27.2 → 9.0.0-alpha.1

package/esm/ChartsContainerPro/ChartsContainerPro.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
+import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { type ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+export interface ChartsContainerProSlots {}
+export interface ChartsContainerProSlotProps {}
+export type ChartsContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProProps<TSeries, TSignatures> & ChartsSurfaceProps;
+type ChartsContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures> & {
+  ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+ *
+ * @example
+ * ```jsx
+ * <ChartsContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis axisId="x-axis" />
+ * </ChartsContainerPro>
+ * ```
+ */
+declare const ChartsContainerPro: ChartsContainerProComponent;
+export { ChartsContainerPro };

package/esm/ChartsContainerPro/ChartsContainerPro.js

@@ -0,0 +1,182 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { useChartsContainerProProps } from "./useChartsContainerProProps.js";
+import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/api/charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+ *
+ * @example
+ * ```jsx
+ * <ChartsContainerPro
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis axisId="x-axis" />
+ * </ChartsContainerPro>
+ * ```
+ */
+const ChartsContainerPro = /*#__PURE__*/React.forwardRef(function ChartsContainerProInner(props, ref) {
+  const {
+    chartDataProviderProProps,
+    children,
+    chartsSurfaceProps
+  } = useChartsContainerProProps(props);
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      ref: ref,
+      children: children
+    }))
+  }));
+});
+
+// @ts-expect-error the type coercion breaks the prop types
+if (process.env.NODE_ENV !== "production") ChartsContainerPro.displayName = "ChartsContainerPro";
+process.env.NODE_ENV !== "production" ? ChartsContainerPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: PropTypes.arrayOf(PropTypes.object),
+  desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: PropTypes.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.number,
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+  }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: PropTypes.func,
+  /**
+   * The array of series to display.
+   * Each type of series has its own specificity.
+   * Please refer to the appropriate docs page to learn more about it.
+   */
+  series: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
+  title: PropTypes.string,
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
+  }))
+} : void 0;
+export { ChartsContainerPro };

package/esm/ChartsContainerPro/index.d.ts

@@ -0,0 +1,9 @@
+import "../typeOverloads/index.js";
+import type { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import type { ChartProApi as ChartProApiOriginal, ProPluginsPerSeriesType } from "../context/ChartProApi.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export * from "./ChartsContainerPro.js";
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartProApiOriginal<ChartType, Signatures>;

package/esm/ChartsContainerPro/index.js

@@ -0,0 +1,6 @@
+import "../typeOverloads/index.js";
+export * from "./ChartsContainerPro.js";
+
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */

package/esm/ChartsContainerPro/useChartsContainerProProps.d.ts

@@ -0,0 +1,8 @@
+import { type ChartAnyPluginSignature, type ChartSeriesType, type UseChartsContainerPropsReturnValue } from '@mui/x-charts/internals';
+import type { ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+import type { ChartsContainerProProps } from "./ChartsContainerPro.js";
+import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export type UseChartsContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartsContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
+  chartDataProviderProProps: ChartDataProviderProProps<TSeries, TSignatures>;
+};
+export declare const useChartsContainerProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures>) => UseChartsContainerProPropsReturnValue<TSeries, TSignatures>;

package/esm/ChartsContainerPro/useChartsContainerProProps.js

@@ -0,0 +1,37 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "zoomInteractionConfig", "plugins", "apiRef"];
+import { useChartsContainerProps } from '@mui/x-charts/internals';
+import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
+export const useChartsContainerProProps = props => {
+  const _ref = props,
+    {
+      initialZoom,
+      zoomData,
+      onZoomChange,
+      zoomInteractionConfig,
+      plugins,
+      apiRef
+    } = _ref,
+    baseProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps,
+    children
+  } = useChartsContainerProps(baseProps);
+  const chartDataProviderProProps = _extends({}, chartDataProviderProps, {
+    initialZoom,
+    zoomData,
+    onZoomChange,
+    zoomInteractionConfig,
+    apiRef,
+    plugins: plugins ?? DEFAULT_PLUGINS
+  });
+  return {
+    chartDataProviderProProps,
+    chartsSurfaceProps,
+    children
+  };
+};

package/esm/FunnelChart/FunnelChart.d.ts

@@ -35,5 +35,5 @@ export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel',
    */
   axisHighlight?: ChartsAxisHighlightProps;
 }
-declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
 export { FunnelChart };

package/esm/FunnelChart/FunnelChart.js

@@ -40,13 +40,14 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
   const {
     chartDataProviderProProps,
     chartsSurfaceProps
-  } = useChartContainerProProps(chartContainerProps, ref);
+  } = useChartContainerProProps(chartContainerProps);
   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, {
+      ref: ref,
       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)), /*#__PURE__*/_jsx(FocusedFunnelSection, {}), children]
       })), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
@@ -208,8 +209,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['funnel']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -222,7 +223,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -252,8 +253,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['funnel']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -335,8 +336,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['funnel']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['funnel'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/FunnelChart/FunnelSection.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type FunnelSectionClasses } from "./funnelSectionClasses.js";
-export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> {
+export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref'> {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;

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

@@ -27,7 +27,7 @@ export type FunnelValueType = {
    */
   labelMarkType?: ChartsLabelMarkProps['type'];
 };
-export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType, 'funnel'>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'funnel';
   /**
    * Data associated to the funnel section.

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -3,15 +3,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
-import { getSVGPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
+import { getChartPoint, getCartesianAxisIndex, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartsInteractionIsInitialized, defaultizeXAxis, defaultizeYAxis } from '@mui/x-charts/internals';
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartFunnelAxisRendering.selectors.js";
 export const useChartFunnelAxis = ({
   params,
   store,
-  seriesConfig,
-  svgRef,
   instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const {
     xAxis,
     yAxis,
@@ -38,11 +39,12 @@ export const useChartFunnelAxis = ({
         gap: gap ?? 0
       },
       cartesianAxis: {
-        x: defaultizeXAxis(xAxis, dataset),
-        y: defaultizeYAxis(yAxis, dataset)
+        axesGap: 0,
+        x: defaultizeXAxis(xAxis, dataset, 0),
+        y: defaultizeYAxis(yAxis, dataset, 0)
       }
     });
-  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
+  }, [drawingArea, xAxis, yAxis, dataset, store, gap]);
   React.useEffect(() => {
     const element = svgRef.current;
     if (!isInteractionEnabled || !element || params.disableAxisListener) {
@@ -68,7 +70,7 @@ export const useChartFunnelAxis = ({
     const gestureHandler = event => {
       const srvEvent = event.detail.srcEvent;
       const target = event.detail.target;
-      const svgPoint = getSVGPoint(element, srvEvent);
+      const svgPoint = getChartPoint(element, srvEvent);
       // Release the pointer capture if we are panning, as this would cause the tooltip to
       // be locked to the first "section" it touches.
       if (event.detail.srcEvent.buttons >= 1 && target?.hasPointerCapture(event.detail.srcEvent.pointerId)) {
@@ -112,7 +114,7 @@ export const useChartFunnelAxis = ({
       const usedYAxis = yAxisIds[0];
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
+      const svgPoint = getChartPoint(element, event.detail.srcEvent);
       const xIndex = getCartesianAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : getCartesianAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -158,8 +160,8 @@ useChartFunnelAxis.getDefaultizedParams = ({
 }) => {
   return _extends({}, params, {
     gap: params.gap ?? 0,
-    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
-    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset, 0),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset, 0)
   });
 };
 useChartFunnelAxis.getInitialState = params => {
@@ -168,6 +170,7 @@ useChartFunnelAxis.getInitialState = params => {
       gap: params.gap ?? 0
     },
     cartesianAxis: {
+      axesGap: 0,
       x: params.defaultizedXAxis,
       y: params.defaultizedYAxis
     }

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

@@ -1,6 +1,6 @@
 import { type ChartPluginSignature, type UseChartCartesianAxisDefaultizedParameters, type UseChartCartesianAxisParameters, type UseChartCartesianAxisState, type UseChartInteractionSignature, type UseChartSeriesSignature, type ChartsAxisData } from '@mui/x-charts/internals';
 export type UseChartFunnelAxisSignature = ChartPluginSignature<{
-  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis'> & {
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'onTooltipAxisChange' | 'tooltipAxis' | 'axesGap'> & {
     /**
      * The gap, in pixels, between funnel sections.
      * @default 0
@@ -14,8 +14,9 @@ export type UseChartFunnelAxisSignature = ChartPluginSignature<{
      */
     onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
   };
-  defaultizedParams: UseChartCartesianAxisDefaultizedParameters & {
+  defaultizedParams: Omit<UseChartCartesianAxisDefaultizedParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'axesGap'> & {
     gap: number;
+    onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
   };
   state: Pick<UseChartCartesianAxisState, 'cartesianAxis'> & {
     funnel: {

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

@@ -3,16 +3,16 @@ import { type UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js"
 export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
   gap: number;
 } | undefined;
-export declare const selectorFunnelGap: (args_0: 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"> & {
+export declare const selectorFunnelGap: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & 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;
   };
 }> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => number;
-export declare const selectorChartXAxis: (args_0: 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> & {
+export declare const selectorChartXAxis: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & 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;
 }) => import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>;
-export declare const selectorChartYAxis: (args_0: 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> & {
+export declare const selectorChartYAxis: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & 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;
 }) => import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsYAxisProps>;

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

@@ -1,17 +1,11 @@
 import { type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
-import { type ChartsTooltipProps, type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
 import { type ChartsAxisSlotProps, type ChartsAxisSlots, type ChartsSlotProps, type ChartsSlots } from '@mui/x-charts/internals';
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { type FunnelPlotSlotProps, type FunnelPlotSlots } from "./funnelPlotSlots.types.js";
-export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
-  /**
-   * Slot props for the tooltip component.
-   * @default {}
-   */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
-}
+export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, ChartsTooltipSlots<'item' | 'none'>, Partial<ChartsSlots> {}
+export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, ChartsTooltipSlotProps<'item' | 'none'>, Partial<ChartsSlotProps> {}
 export interface FunnelChartSlotExtension {
   /**
    * Overridable component slots.

package/esm/FunnelChart/index.d.ts

@@ -2,9 +2,10 @@ export { FunnelChart } from "./FunnelChart.js";
 /**
  * @deprecated funnel chart is now stable, import `FunnelChart` instead
  */
-export declare const Unstable_FunnelChart: import("react").ForwardRefExoticComponent<import("./FunnelChart.js").FunnelChartProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Unstable_FunnelChart: import("react").ForwardRefExoticComponent<import("./FunnelChart.js").FunnelChartProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FunnelChartProps, FunnelSeries } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
+export * from "./funnelPlotSlots.types.js";
 export * from "./FocusedFunnelSection.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";

package/esm/FunnelChart/index.js

@@ -6,6 +6,7 @@ export { FunnelChart } from "./FunnelChart.js";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const Unstable_FunnelChart = FunnelChart;
 export * from "./FunnelPlot.js";
+export * from "./funnelPlotSlots.types.js";
 export * from "./FocusedFunnelSection.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";

package/esm/FunnelChart/seriesConfig/index.js

@@ -1,4 +1,4 @@
-import { identifierSerializerSeriesIdDataIndex } from '@mui/x-charts/internals';
+import { identifierSerializerSeriesIdDataIndex, identifierCleanerSeriesIdDataIndex } from '@mui/x-charts/internals';
 import { getExtremumX, getExtremumY } from "./extremums.js";
 import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
@@ -17,5 +17,6 @@ export const funnelSeriesConfig = {
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
   keyboardFocusHandler,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex
+  identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex
 };

package/esm/FunnelChart/seriesConfig/keyboardFocusHandler.js

@@ -1,17 +1,4 @@
-import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from '@mui/x-charts/internals';
+import { createCommonKeyboardFocusHandler } from '@mui/x-charts/internals';
 const outSeriesTypes = new Set(['funnel']);
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return createGetNextIndexFocusedItem(outSeriesTypes);
-    case 'ArrowLeft':
-      return createGetPreviousIndexFocusedItem(outSeriesTypes);
-    case 'ArrowDown':
-      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
-    case 'ArrowUp':
-      return createGetNextSeriesFocusedItem(outSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = createCommonKeyboardFocusHandler(outSeriesTypes);
 export default keyboardFocusHandler;

package/esm/FunnelChart/seriesConfig/legend.js

@@ -15,7 +15,6 @@ const legendGetter = params => {
         type: 'funnel',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        id,
         itemId: id,
         dataIndex,
         color: item.color,

package/esm/Heatmap/Heatmap.d.ts

@@ -28,7 +28,7 @@ export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlot
   tooltip?: Partial<HeatmapTooltipProps>;
 }
 export type HeatmapSeries = MakeOptional<HeatmapSeriesType, 'type'>;
-export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'onAxisClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'axesGap' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'seriesConfig' | 'onAxisClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
@@ -62,7 +62,6 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
   tooltip?: ChartsTooltipProps;
   /**
    * If `true`, the legend is not rendered.
-   * @default true
    */
   hideLegend?: boolean;
   /**
@@ -70,6 +69,10 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * @default false
    */
   showToolbar?: boolean;
+  /**
+   * The border radius of the heatmap cells in pixels.
+   */
+  borderRadius?: number;
   /**
    * Overridable component slots.
    * @default {}
@@ -81,5 +84,5 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    */
   slotProps?: HeatmapSlotProps;
 }
-declare const Heatmap: React.ForwardRefExoticComponent<HeatmapProps & React.RefAttributes<SVGSVGElement>>;
+declare const Heatmap: React.ForwardRefExoticComponent<HeatmapProps & React.RefAttributes<HTMLDivElement>>;
 export { Heatmap };