@mui/x-charts-pro 8.0.0 → 8.2.0

package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -1,7 +1,8 @@
 import { ChartAnyPluginSignature, ChartSeriesType } from '@mui/x-charts/internals';
-import type { ChartDataProviderProProps } from './ChartDataProviderPro';
-import type { AllPluginSignatures } from '../internals/plugins/allPlugins';
+import type { ChartDataProviderProProps } from "./ChartDataProviderPro.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export declare const useChartDataProviderProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProProps<TSeries, TSignatures>) => {
   children: import("react").ReactNode;
+  localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;
   chartProviderProps: import("@mui/x-charts/internals").ChartProviderProps<TSeries, TSignatures>;
 };

package/esm/ChartDataProviderPro/useChartDataProviderProProps.js

@@ -4,10 +4,12 @@ import { useChartDataProviderProps } from '@mui/x-charts/internals';
 export const useChartDataProviderProProps = props => {
   const {
     chartProviderProps,
+    localeText,
     children
   } = useChartDataProviderProps(props);
   return {
     children,
+    localeText,
     chartProviderProps
   };
 };

package/esm/FunnelChart/FunnelChart.js

@@ -63,6 +63,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
+      exportAsPrint: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
   }),
@@ -175,6 +177,11 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap: PropTypes.number,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -211,6 +218,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default false
    */
   loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * 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.
@@ -227,7 +238,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.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**

package/esm/FunnelChart/FunnelPlot.d.ts

@@ -2,6 +2,11 @@ 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,20 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["onItemClick"];
+const _excluded = ["onItemClick", "gap"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { getCurveFactory, cartesianSeriesTypes } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes } from '@mui/x-charts/internals';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { useTheme } from '@mui/material/styles';
 import { FunnelSection } from "./FunnelSection.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
-import { funnelHorizontalStepCurve, funnelVerticalStepCurve } from "./funnelStepCurve.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
+import { getFunnelCurve } from "./curves/index.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 cartesianSeriesTypes.addType('funnel');
-const getFunnelCurve = (curve, isHorizontal) => {
-  if (curve === 'step') {
-    return isHorizontal ? funnelHorizontalStepCurve : funnelVerticalStepCurve;
-  }
-  if (curve === 'bump') {
-    return isHorizontal ? getCurveFactory('bumpX') : getCurveFactory('bumpY');
-  }
-  return getCurveFactory(curve ?? 'linear');
-};
-const useAggregatedData = () => {
+const useAggregatedData = gap => {
   const seriesData = useFunnelSeriesContext();
   const {
     xAxis,
@@ -55,7 +46,7 @@ const useAggregatedData = () => {
       const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
-      const curve = getFunnelCurve(currentSeries.curve, isHorizontal);
+      const curve = getFunnelCurve(currentSeries.curve, isHorizontal, gap);
       const xPosition = (value, bandIndex, stackOffset, useBand) => {
         if (isXAxisBand) {
           const position = xScale(bandIndex);
@@ -101,16 +92,17 @@ const useAggregatedData = () => {
       });
     });
     return result.flat();
-  }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds]);
+  }, [seriesData, xAxis, xAxisIds, yAxis, yAxisIds, gap]);
   return allData;
 };
 function FunnelPlot(props) {
   const {
-      onItemClick
+      onItemClick,
+      gap
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
-  const data = useAggregatedData();
+  const data = useAggregatedData(gap);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [data.map(({
       d,
@@ -164,6 +156,11 @@ 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/curves/bump.d.ts

@@ -0,0 +1,24 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * This is a custom "bump" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape bump curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/bump.js
+ */
+export declare class Bump implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/esm/FunnelChart/curves/bump.js

@@ -0,0 +1,75 @@
+/**
+ * This is a custom "bump" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape bump curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/bump.js
+ */
+export class Bump {
+  constructor(context, isHorizontal, gap = 0) {
+    this.context = void 0;
+    this.line = NaN;
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.context = context;
+    this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
+  }
+  areaStart() {
+    this.line = 0;
+  }
+  areaEnd() {
+    this.line = NaN;
+  }
+  lineStart() {
+    this.currentPoint = 0;
+  }
+  lineEnd() {
+    if (this.line || this.line !== 0 && this.currentPoint === 1) {
+      this.context.closePath();
+    }
+    this.line = 1 - this.line;
+  }
+  point(x, y) {
+    x = +x;
+    y = +y;
+
+    // 0 is the top-left corner.
+    if (this.isHorizontal) {
+      if (this.currentPoint === 0) {
+        this.context.moveTo(x + this.gap, y);
+        this.context.lineTo(x + this.gap, y);
+      } else if (this.currentPoint === 1) {
+        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x - this.gap, y);
+      } else if (this.currentPoint === 2) {
+        this.context.lineTo(x - this.gap, y);
+      } else {
+        this.context.bezierCurveTo((this.x + x) / 2, this.y, (this.x + x) / 2, y, x + this.gap, y);
+      }
+      this.currentPoint += 1;
+      this.x = x;
+      this.y = y;
+      return;
+    }
+
+    // 0 is the top-right corner.
+    if (this.currentPoint === 0) {
+      // X from Y
+      this.context.moveTo(x, y + this.gap);
+      this.context.lineTo(x, y + this.gap);
+    } else if (this.currentPoint === 1) {
+      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y - this.gap);
+    } else if (this.currentPoint === 2) {
+      this.context.lineTo(x, y - this.gap);
+    } else {
+      this.context.bezierCurveTo(this.x, (this.y + y) / 2, x, (this.y + y) / 2, x, y + this.gap);
+    }
+    this.currentPoint += 1;
+    this.x = x;
+    this.y = y;
+  }
+}

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

@@ -0,0 +1,8 @@
+export type FunnelCurveOptions = {
+  /**
+   * The gap between the funnel segments.
+   * @default 0
+   */
+  gap?: number;
+};
+export type FunnelCurveType = 'linear' | 'step' | 'bump';

package/esm/FunnelChart/curves/curve.types.js

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

package/esm/FunnelChart/curves/funnelStep.d.ts

@@ -0,0 +1,25 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * This is a custom "step" curve generator for the funnel chart.
+ * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape step curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
+ */
+export declare class FunnelStep implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/esm/FunnelChart/{funnelStepCurve.js → curves/funnelStep.js}

@@ -2,19 +2,23 @@
  * This is a custom "step" curve generator for the funnel chart.
  * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
  *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
  * It is based on the d3-shape step curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
  */
-class FunnelStep {
-  constructor(context, isHorizontal) {
+export class FunnelStep {
+  constructor(context, isHorizontal, gap = 0) {
     this.context = void 0;
     this.line = NaN;
     this.x = NaN;
     this.y = NaN;
     this.currentPoint = 0;
     this.isHorizontal = false;
+    this.gap = 0;
     this.context = context;
     this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
   }
   areaStart() {
     this.line = 0;
@@ -41,27 +45,36 @@ class FunnelStep {
   point(x, y) {
     x = +x;
     y = +y;
+
+    // 0 is the top-left corner.
+    if (this.isHorizontal) {
+      if (this.currentPoint === 0) {
+        this.context.moveTo(x + this.gap, y);
+      } else if (this.currentPoint === 1 || this.currentPoint === 2) {
+        this.context.lineTo(x - this.gap, this.y);
+        this.context.lineTo(x - this.gap, y);
+      } else {
+        this.context.lineTo(this.x - this.gap, y);
+        this.context.lineTo(x + this.gap, y);
+      }
+      this.currentPoint += 1;
+      this.x = x;
+      this.y = y;
+      return;
+    }
+
+    // 0 is the top-right corner.
     if (this.currentPoint === 0) {
-      this.context.moveTo(x, y);
-    } else if (this.isHorizontal && (this.currentPoint === 2 || this.currentPoint === 1)) {
-      this.context.lineTo(x, this.y);
-      this.context.lineTo(x, y);
-    } else if (this.currentPoint === 3 && !this.isHorizontal) {
-      this.context.lineTo(x, this.y);
-      this.context.lineTo(x, y);
+      this.context.moveTo(x, y + this.gap);
+    } else if (this.currentPoint === 3) {
+      this.context.lineTo(x, this.y - this.gap);
+      this.context.lineTo(x, y + this.gap);
     } else {
-      this.context.lineTo(this.x, y);
-      this.context.lineTo(x, y);
+      this.context.lineTo(this.x, y - this.gap);
+      this.context.lineTo(x, y - this.gap);
     }
     this.currentPoint += 1;
     this.x = x;
     this.y = y;
   }
-}
-const funnelHorizontalStepCurve = context => {
-  return new FunnelStep(context, true);
-};
-const funnelVerticalStepCurve = context => {
-  return new FunnelStep(context, false);
-};
-export { funnelHorizontalStepCurve, funnelVerticalStepCurve };
+}

package/esm/FunnelChart/curves/getFunnelCurve.d.ts

@@ -0,0 +1,3 @@
+import { CurveFactory } from '@mui/x-charts-vendor/d3-shape';
+import { FunnelCurveType } from "./curve.types.js";
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, isHorizontal: boolean, gap?: number) => CurveFactory;

package/esm/FunnelChart/curves/getFunnelCurve.js

@@ -0,0 +1,15 @@
+import { FunnelStep } from "./funnelStep.js";
+import { Linear } from "./linear.js";
+import { Bump } from "./bump.js";
+const curveConstructor = curve => {
+  if (curve === 'step') {
+    return FunnelStep;
+  }
+  if (curve === 'bump') {
+    return Bump;
+  }
+  return Linear;
+};
+export const getFunnelCurve = (curve, isHorizontal, gap = 0) => {
+  return context => new (curveConstructor(curve))(context, isHorizontal, gap);
+};

package/esm/FunnelChart/curves/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./curve.types.js";
+export * from "./getFunnelCurve.js";

package/esm/FunnelChart/curves/index.js

@@ -0,0 +1,2 @@
+export * from "./curve.types.js";
+export * from "./getFunnelCurve.js";

package/esm/FunnelChart/curves/linear.d.ts

@@ -0,0 +1,24 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * This is a custom "linear" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape linear curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
+ */
+export declare class Linear implements CurveGenerator {
+  private context;
+  private line;
+  private x;
+  private y;
+  private currentPoint;
+  private isHorizontal;
+  private gap;
+  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  point(x: number, y: number): void;
+}

package/esm/FunnelChart/curves/linear.js

@@ -0,0 +1,106 @@
+// From point1 to point2, get the x value from y
+const xFromY = (x1, y1, x2, y2) => y => {
+  if (y1 === y2) {
+    return x1;
+  }
+  const result = (x2 - x1) * (y - y1) / (y2 - y1) + x1;
+  return Number.isNaN(result) ? 0 : result;
+};
+
+// From point1 to point2, get the y value from x
+const yFromX = (x1, y1, x2, y2) => x => {
+  if (x1 === x2) {
+    return y1;
+  }
+  const result = (y2 - y1) * (x - x1) / (x2 - x1) + y1;
+  return Number.isNaN(result) ? 0 : result;
+};
+
+/**
+ * This is a custom "linear" curve generator.
+ *
+ * It takes into account the gap between the points and draws a smooth curve between them.
+ *
+ * It is based on the d3-shape linear curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
+ */
+export class Linear {
+  constructor(context, isHorizontal, gap = 0) {
+    this.context = void 0;
+    this.line = NaN;
+    this.x = NaN;
+    this.y = NaN;
+    this.currentPoint = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.context = context;
+    this.isHorizontal = isHorizontal;
+    this.gap = gap / 2;
+  }
+  areaStart() {
+    this.line = 0;
+  }
+  areaEnd() {
+    this.line = NaN;
+  }
+  lineStart() {
+    this.currentPoint = 0;
+  }
+  lineEnd() {
+    if (this.line || this.line !== 0 && this.currentPoint === 1) {
+      this.context.closePath();
+    }
+    this.line = 1 - this.line;
+  }
+  point(x, y) {
+    x = +x;
+    y = +y;
+
+    // We draw the lines only at currentPoint 1 & 3 because we need
+    // The data of a pair of points to draw the lines.
+    // Hence currentPoint 1 draws a line from point 0 to point 1 and point 1 to point 2.
+    // currentPoint 3 draws a line from point 2 to point 3 and point 3 to point 0.
+
+    if (this.isHorizontal) {
+      const yGetter = yFromX(this.x, this.y, x, y);
+      let xGap = 0;
+
+      // 0 is the top-left corner.
+      if (this.currentPoint === 1) {
+        xGap = this.x + this.gap;
+        this.context.moveTo(xGap, yGetter(xGap));
+        this.context.lineTo(xGap, yGetter(xGap));
+        xGap = x - this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+      } else if (this.currentPoint === 3) {
+        xGap = this.x - this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+        xGap = x + this.gap;
+        this.context.lineTo(xGap, yGetter(xGap));
+      }
+    }
+    if (!this.isHorizontal) {
+      const xGetter = xFromY(this.x, this.y, x, y);
+      let yGap = 0;
+
+      // 0 is the top-right corner.
+      if (this.currentPoint === 1) {
+        yGap = this.y + this.gap;
+        this.context.moveTo(xGetter(yGap), yGap);
+        this.context.lineTo(xGetter(yGap), yGap);
+        yGap = y - this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+      } else if (this.currentPoint === 3) {
+        yGap = this.y - this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+        yGap = y + this.gap;
+        this.context.lineTo(xGetter(yGap), yGap);
+      }
+    }
+
+    // Increment the values
+    this.currentPoint += 1;
+    this.x = x;
+    this.y = y;
+  }
+}

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

@@ -1,9 +1,9 @@
 import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
 import { CommonSeriesType, CartesianSeriesType, CommonDefaultizedProps, SeriesId } from '@mui/x-charts/internals';
-import { CurveType, Position } from '@mui/x-charts/models';
+import { Position } from '@mui/x-charts/models';
 import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
+import { FunnelCurveType } from "./curves/index.js";
 export type FunnelItemId = string | number;
-export type FunnelCurveType = Extract<CurveType, 'linear' | 'step'> | 'bump';
 export type FunnelValueType = {
   /**
    * A unique identifier of the funnel section.

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelPlotSlots {
   funnelSection?: React.ElementType<FunnelSectionProps>;
 }

package/esm/FunnelChart/funnelSectionClasses.d.ts

@@ -1,4 +1,4 @@
-import type { FunnelSectionProps } from './FunnelSection';
+import type { FunnelSectionProps } from "./FunnelSection.js";
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/FunnelChart/index.d.ts

@@ -1,8 +1,9 @@
 export { FunnelChart as Unstable_FunnelChart } from "./FunnelChart.js";
-export type { FunnelChartProps } from './FunnelChart';
+export type { FunnelChartProps } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnel.types.js";
 export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
+export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
-export type { FunnelSectionClasses } from './funnelSectionClasses';
+export type { FunnelSectionClasses } from "./funnelSectionClasses.js";

package/esm/FunnelChart/useFunnelChartProps.d.ts

@@ -5,7 +5,7 @@ import { ChartsClipPathProps } from '@mui/x-charts/ChartsClipPath';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { FunnelPlotProps } from "./FunnelPlot.js";
-import type { FunnelChartProps } from './FunnelChart';
+import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 /**
  * A helper function that extracts FunnelChartProps from the input props

package/esm/FunnelChart/useFunnelChartProps.js

@@ -2,11 +2,12 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef"];
+const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
 import { DEFAULT_MARGINS, DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import useId from '@mui/utils/useId';
 import { defaultizeMargin } from '@mui/x-charts/internals';
 import { warnOnce } from '@mui/x-internals/warning';
+import { strawberrySkyPalette } from '@mui/x-charts/colorPalettes';
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({
@@ -14,7 +15,7 @@ function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   }, (_, index) => series.reduce((a, s) => a + (s.data?.[index]?.value ?? 0), 0));
   if (process.env.NODE_ENV !== 'production') {
     if ((categoryAxis?.position === 'left' || categoryAxis?.position === 'right') && isHorizontal || (categoryAxis?.position === 'top' || categoryAxis?.position === 'bottom') && !isHorizontal) {
-      warnOnce([`MUI X: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
+      warnOnce([`MUI X Charts: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
     }
   }
   const side = isHorizontal ? 'bottom' : 'left';
@@ -84,7 +85,8 @@ export const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef
+      apiRef,
+      gap
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const margin = defaultizeMargin(marginProps, DEFAULT_MARGINS);
@@ -107,7 +109,7 @@ export const useFunnelChartProps = props => {
     width,
     height,
     margin,
-    colors,
+    colors: colors ?? strawberrySkyPalette,
     xAxis: [xAxis],
     yAxis: [yAxis],
     sx,
@@ -117,6 +119,7 @@ export const useFunnelChartProps = props => {
     apiRef
   });
   const funnelPlotProps = {
+    gap,
     onItemClick,
     slots,
     slotProps

package/esm/Heatmap/Heatmap.js

@@ -167,6 +167,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @default false
    */
   loading: PropTypes.bool,
+  /**
+   * Localized text for chart components.
+   */
+  localeText: PropTypes.object,
   /**
    * 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.
@@ -183,7 +187,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**