@mui/x-charts-pro 8.2.0 → 8.3.0

package/FunnelChart/curves/pyramid.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pyramid = void 0;
+var _borderRadiusPolygon = require("./borderRadiusPolygon");
+var _utils = require("./utils");
+/* eslint-disable class-methods-use-this */
+
+/**
+ * This is a custom "pyramid" curve generator.
+ * It draws straight lines for the 4 provided points. The slopes are calculated
+ * based on the min and max values of the x and y axes.
+ * with the option to add a gap between sections while also properly handling the border radius.
+ */
+class Pyramid {
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    sections,
+    borderRadius,
+    min,
+    max
+  }) {
+    this.context = void 0;
+    this.position = 0;
+    this.sections = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.borderRadius = 0;
+    this.min = {
+      x: 0,
+      y: 0
+    };
+    this.max = {
+      x: 0,
+      y: 0
+    };
+    this.points = [];
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+    this.position = position ?? 0;
+    this.sections = sections ?? 1;
+    this.borderRadius = borderRadius ?? 0;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.position === 0) {
+      return [0, 0, this.borderRadius, this.borderRadius];
+    }
+    if (this.position === this.sections - 1 && this.gap <= 0) {
+      return [this.borderRadius];
+    }
+    if (this.position === this.sections - 1) {
+      return [this.borderRadius, this.borderRadius];
+    }
+    return 0;
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    if (this.points.length < 4) {
+      return;
+    }
+
+    // Add gaps where they are needed.
+    this.points = this.points.map((point, index) => {
+      if (this.isHorizontal) {
+        const slopeEnd = {
+          x: this.max.x,
+          y: (this.max.y + this.min.y) / 2
+        };
+        const slopeStart = index <= 1 ? this.min : {
+          x: this.min.x,
+          y: this.max.y
+        };
+        const yGetter = (0, _utils.lerpY)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
+        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
+        return {
+          x: xGap,
+          y: yGetter(xGap)
+        };
+      }
+      const slopeEnd = {
+        x: (this.max.x + this.min.x) / 2,
+        y: this.max.y
+      };
+      const slopeStart = index <= 1 ? {
+        x: this.max.x,
+        y: this.min.y
+      } : this.min;
+      const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
+      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
+      return {
+        x: xGetter(yGap),
+        y: yGap
+      };
+    });
+
+    // In the last section, to form a triangle we need 3 points instead of 4
+    // Else the algorithm will break.
+    if (this.position === this.sections - 1 && this.gap <= 0) {
+      this.points = [this.points[0], this.points[1], this.points[3]];
+    }
+    (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
+  }
+}
+exports.Pyramid = Pyramid;

package/FunnelChart/curves/step-pyramid.d.ts

@@ -0,0 +1,31 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+import { CurveOptions } from "./curve.types.js";
+/**
+ * This is a custom "step-pyramid" curve generator.
+ * It creates a step pyramid, which is a step-like shape with static lengths.
+ * It has the option to add a gap between sections while also properly handling the border radius.
+ */
+export declare class StepPyramid implements CurveGenerator {
+  private context;
+  private position;
+  private isHorizontal;
+  private gap;
+  private borderRadius;
+  private min;
+  private max;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    borderRadius,
+    min,
+    max
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  protected getBorderRadius(): number | number[];
+  point(xIn: number, yIn: number): void;
+}

package/FunnelChart/curves/step-pyramid.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepPyramid = void 0;
+var _borderRadiusPolygon = require("./borderRadiusPolygon");
+var _utils = require("./utils");
+/* eslint-disable class-methods-use-this */
+
+/**
+ * This is a custom "step-pyramid" curve generator.
+ * It creates a step pyramid, which is a step-like shape with static lengths.
+ * It has the option to add a gap between sections while also properly handling the border radius.
+ */
+class StepPyramid {
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    borderRadius,
+    min,
+    max
+  }) {
+    this.context = void 0;
+    this.position = 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.borderRadius = 0;
+    this.min = {
+      x: 0,
+      y: 0
+    };
+    this.max = {
+      x: 0,
+      y: 0
+    };
+    this.points = [];
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+    this.position = position ?? 0;
+    this.borderRadius = borderRadius ?? 0;
+    this.min = min ?? {
+      x: 0,
+      y: 0
+    };
+    this.max = max ?? {
+      x: 0,
+      y: 0
+    };
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    return this.gap > 0 || this.position === 0 ? this.borderRadius : [this.borderRadius, this.borderRadius];
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    if (this.points.length < 4) {
+      return;
+    }
+
+    // Add gaps where they are needed.
+    this.points = this.points.map((point, index) => {
+      if (this.isHorizontal) {
+        const slopeEnd = {
+          x: this.max.x,
+          y: (this.max.y + this.min.y) / 2
+        };
+        const slopeStart = index <= 1 ? this.min : {
+          x: this.min.x,
+          y: this.max.y
+        };
+        const yGetter = (0, _utils.lerpY)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
+        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
+        const xInitial = index === 0 || index === 1 ? this.points.at(0).x : this.points.at(3).x;
+        return {
+          x: xGap,
+          y: yGetter(xInitial)
+        };
+      }
+      const slopeEnd = {
+        x: (this.max.x + this.min.x) / 2,
+        y: this.max.y
+      };
+      const slopeStart = index <= 1 ? {
+        x: this.max.x,
+        y: this.min.y
+      } : this.min;
+      const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
+      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
+      const yInitial = index === 0 || index === 1 ? this.points.at(0).y : this.points.at(3).y;
+      return {
+        x: xGetter(yInitial),
+        y: yGap
+      };
+    });
+    (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
+  }
+}
+exports.StepPyramid = StepPyramid;

package/FunnelChart/curves/step.d.ts

@@ -0,0 +1,32 @@
+import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
+import { CurveOptions } from "./curve.types.js";
+/**
+ * This is a custom "step" curve generator.
+ * It is used to draw "rectangles" from 4 points without having to rework the rendering logic,
+ * with the option to add a gap between sections while also properly handling the border radius.
+ *
+ * It takes the min and max of the x and y coordinates of the points to create a rectangle.
+ *
+ * The implementation is based on the d3-shape step curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
+ */
+export declare class Step implements CurveGenerator {
+  private context;
+  private isHorizontal;
+  private gap;
+  private borderRadius;
+  private position;
+  private points;
+  constructor(context: CanvasRenderingContext2D, {
+    isHorizontal,
+    gap,
+    position,
+    borderRadius
+  }: CurveOptions);
+  areaStart(): void;
+  areaEnd(): void;
+  lineStart(): void;
+  lineEnd(): void;
+  protected getBorderRadius(): number | number[];
+  point(xIn: number, yIn: number): void;
+}

package/FunnelChart/curves/step.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Step = void 0;
+var _borderRadiusPolygon = require("./borderRadiusPolygon");
+var _utils = require("./utils");
+/* eslint-disable class-methods-use-this */
+
+/**
+ * This is a custom "step" curve generator.
+ * It is used to draw "rectangles" from 4 points without having to rework the rendering logic,
+ * with the option to add a gap between sections while also properly handling the border radius.
+ *
+ * It takes the min and max of the x and y coordinates of the points to create a rectangle.
+ *
+ * The implementation is based on the d3-shape step curve generator.
+ * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
+ */
+class Step {
+  constructor(context, {
+    isHorizontal,
+    gap,
+    position,
+    borderRadius
+  }) {
+    this.context = void 0;
+    this.isHorizontal = false;
+    this.gap = 0;
+    this.borderRadius = 0;
+    this.position = 0;
+    this.points = [];
+    this.context = context;
+    this.isHorizontal = isHorizontal ?? false;
+    this.gap = (gap ?? 0) / 2;
+    this.position = position ?? 0;
+    this.borderRadius = borderRadius ?? 0;
+  }
+  areaStart() {}
+  areaEnd() {}
+  lineStart() {}
+  lineEnd() {}
+  getBorderRadius() {
+    return this.gap > 0 || this.position === 0 ? this.borderRadius : [this.borderRadius, this.borderRadius];
+  }
+  point(xIn, yIn) {
+    this.points.push({
+      x: xIn,
+      y: yIn
+    });
+    if (this.points.length < 4) {
+      return;
+    }
+
+    // Ensure we have rectangles instead of trapezoids.
+    this.points = this.points.map((_, index) => {
+      const allX = this.points.map(p => p.x);
+      const allY = this.points.map(p => p.y);
+      if (this.isHorizontal) {
+        return {
+          x: index === 1 || index === 2 ? (0, _utils.max)(allX) : (0, _utils.min)(allX),
+          y: index <= 1 ? (0, _utils.max)(allY) : (0, _utils.min)(allY)
+        };
+      }
+      return {
+        x: index <= 1 ? (0, _utils.min)(allX) : (0, _utils.max)(allX),
+        y: index === 1 || index === 2 ? (0, _utils.max)(allY) : (0, _utils.min)(allY)
+      };
+    });
+
+    // Add gaps where they are needed.
+    this.points = this.points.map((point, index) => {
+      if (this.isHorizontal) {
+        return {
+          x: point.x + (index === 0 || index === 3 ? this.gap : -this.gap),
+          y: point.y
+        };
+      }
+      return {
+        x: point.x,
+        y: point.y + (index === 0 || index === 3 ? this.gap : -this.gap)
+      };
+    });
+    (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
+  }
+}
+exports.Step = Step;

package/FunnelChart/curves/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const max: (numbers: number[]) => number;
+export declare const min: (numbers: number[]) => number;
+export declare const lerpX: (x1: number, y1: number, x2: number, y2: number) => (y: number) => number;
+export declare const lerpY: (x1: number, y1: number, x2: number, y2: number) => (x: number) => number;

package/FunnelChart/curves/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.min = exports.max = exports.lerpY = exports.lerpX = void 0;
+const max = numbers => Math.max(...numbers, -Infinity);
+exports.max = max;
+const min = numbers => Math.min(...numbers, Infinity);
+// From point1 to point2, get the x value from y
+exports.min = min;
+const lerpX = (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
+exports.lerpX = lerpX;
+const lerpY = (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;
+};
+exports.lerpY = lerpY;

package/FunnelChart/funnel.types.d.ts

@@ -43,11 +43,23 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    */
   layout?: 'horizontal' | 'vertical';
   /**
-   * The type of curve to use for the line. Read more about curves at
-   * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
    * @default 'linear'
    */
   curve?: FunnelCurveType;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
   /**
    * The label configuration for the funnel plot.
    * Allows to customize the position and margin of the label that is displayed on the funnel sections.
@@ -56,6 +68,15 @@ export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType>
    * @default { vertical: 'middle', horizontal: 'center' }
    */
   sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => FunnelLabelOptions | false) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   *
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
 }
 /**
  * An object that allows to identify a funnel item.

package/FunnelChart/funnelSectionClasses.d.ts

@@ -6,6 +6,10 @@ export interface FunnelSectionClasses {
   highlighted: string;
   /** Styles applied to the root element if `faded={true}`. */
   faded: string;
+  /** Styles applied to the root element if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
   /** Styles applied to the label element. */
   label: string;
   /**
@@ -14,5 +18,5 @@ export interface FunnelSectionClasses {
    */
   series: string;
 }
-export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "highlighted" | "faded" | "root", string>;
+export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
 export declare const funnelSectionClasses: FunnelSectionClasses;

package/FunnelChart/funnelSectionClasses.js

@@ -14,15 +14,18 @@ function getFunnelSectionUtilityClass(slot) {
 const useUtilityClasses = props => {
   const {
     classes,
-    seriesId
+    seriesId,
+    variant
   } = props;
   const slots = {
     root: ['root', `series-${seriesId}`],
     highlighted: ['highlighted'],
     faded: ['faded'],
+    outlined: variant === 'outlined' ? ['outlined'] : [],
+    filled: variant === 'filled' ? ['filled'] : [],
     label: ['label']
   };
   return (0, _composeClasses.default)(slots, getFunnelSectionUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;
-const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'label', 'series']);
+const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series']);

package/FunnelChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -10,6 +10,7 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
   return (0, _extends2.default)({
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
   }, seriesData, {
+    borderRadius: seriesData.borderRadius ?? 8,
     data: seriesData.data.map((d, index) => (0, _extends2.default)({
       color: colors[index % colors.length]
     }, d))

package/FunnelChart/useFunnelChartProps.d.ts

@@ -1,7 +1,6 @@
 import { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
 import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
-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";
@@ -20,10 +19,6 @@ export declare const useFunnelChartProps: (props: FunnelChartProps) => {
   overlayProps: ChartsOverlayProps;
   chartsAxisProps: ChartsAxisProps;
   legendProps: ChartsLegendSlotExtension;
-  clipPathGroupProps: {
-    clipPath: string;
-  };
-  clipPathProps: ChartsClipPathProps;
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   axisHighlightProps: ChartsAxisHighlightProps;
   children: import("react").ReactNode;

package/FunnelChart/useFunnelChartProps.js

@@ -9,7 +9,6 @@ exports.useFunnelChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _constants = require("@mui/x-charts/constants");
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _internals = require("@mui/x-charts/internals");
 var _warning = require("@mui/x-internals/warning");
 var _colorPalettes = require("@mui/x-charts/colorPalettes");
@@ -96,8 +95,6 @@ const useFunnelChartProps = props => {
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
-  const id = (0, _useId.default)();
-  const clipPathId = `${id}-clip-path`;
   const isHorizontal = series.some(s => s.layout === 'horizontal');
   const valueAxisConfig = {
     id: isHorizontal ? _constants.DEFAULT_Y_AXIS_KEY : _constants.DEFAULT_X_AXIS_KEY,
@@ -143,12 +140,6 @@ const useFunnelChartProps = props => {
     slots,
     slotProps
   };
-  const clipPathGroupProps = {
-    clipPath: `url(#${clipPathId})`
-  };
-  const clipPathProps = {
-    id: clipPathId
-  };
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
@@ -161,8 +152,6 @@ const useFunnelChartProps = props => {
     overlayProps,
     chartsAxisProps,
     legendProps,
-    clipPathGroupProps,
-    clipPathProps,
     chartsWrapperProps,
     axisHighlightProps,
     children

package/Heatmap/Heatmap.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
 import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
-import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps, AxisConfig } from '@mui/x-charts/internals';
+import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
@@ -25,13 +25,13 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[]>;
+  xAxis: Readonly<Omit<MakeOptional<XAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[]>;
+  yAxis: Readonly<Omit<MakeOptional<YAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeriesType]] objects.

package/Heatmap/Heatmap.js

@@ -292,16 +292,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func,
-    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
-      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
-      maxEnd: _propTypes.default.number,
-      maxSpan: _propTypes.default.number,
-      minSpan: _propTypes.default.number,
-      minStart: _propTypes.default.number,
-      panning: _propTypes.default.bool,
-      step: _propTypes.default.number
-    }), _propTypes.default.bool])
+    valueFormatter: _propTypes.default.func
   })).isRequired,
   /**
    * The configuration of the y-axes.
@@ -359,16 +350,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number,
-    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
-      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
-      maxEnd: _propTypes.default.number,
-      maxSpan: _propTypes.default.number,
-      minSpan: _propTypes.default.number,
-      minStart: _propTypes.default.number,
-      panning: _propTypes.default.bool,
-      step: _propTypes.default.number
-    }), _propTypes.default.bool])
+    width: _propTypes.default.number
   })).isRequired,
   /**
    * The configuration of the z-axes.

package/LineChartPro/LineChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { LineChartProps } from '@mui/x-charts/LineChart';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
-export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {}
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *