@mui/x-charts-premium 9.2.0 → 9.4.0

package/BarChartPremium/BarChartPremium.js

@@ -94,12 +94,12 @@ const BarChartPremium = exports.BarChartPremium = /*#__PURE__*/React.forwardRef(
         children: [renderer === 'webgl' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSvgLayer.ChartsSvgLayer, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps))
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsWebGLLayer.ChartsWebGLLayer, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlotPremium.BarPlotPremium, (0, _extends2.default)({}, barPlotPremiumProps))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWebGLLayer.ChartsWebGLLayer, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlotPremium.BarPlotPremium, (0, _extends2.default)({}, barPlotPremiumProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarPlot.RangeBarPlot, (0, _extends2.default)({}, rangeBarPlotProps))]
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSvgLayer.ChartsSvgLayer, (0, _extends2.default)({}, chartsSurfaceProps, {
           children: [renderer !== 'webgl' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-            children: [renderer !== 'webgl' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlotPremium.BarPlotPremium, (0, _extends2.default)({}, barPlotPremiumProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarPlot.RangeBarPlot, (0, _extends2.default)({}, rangeBarPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.FocusedBar, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedRangeBar.FocusedRangeBar, {})]
+            children: [renderer !== 'webgl' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlotPremium.BarPlotPremium, (0, _extends2.default)({}, barPlotPremiumProps)), renderer !== 'webgl' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarPlot.RangeBarPlot, (0, _extends2.default)({}, rangeBarPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.FocusedBar, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedRangeBar.FocusedRangeBar, {})]
           })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
         }))]
       }), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
@@ -211,11 +211,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar'])
+    type: _propTypes.default.oneOf(['bar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    type: _propTypes.default.oneOf(['bar'])
   })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
@@ -235,11 +235,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -270,21 +270,30 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar'])
+    type: _propTypes.default.oneOf(['bar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    type: _propTypes.default.oneOf(['bar'])
   })]).isRequired),
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  })),
+  }), _propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
+      step: _propTypes.default.number,
+      unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -419,11 +428,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -446,11 +455,6 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
-    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -459,12 +463,38 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number,
+    sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.func.isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownSize: _propTypes.default.number,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     valueGetter: _propTypes.default.func
   })),
   /**
@@ -480,6 +510,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   zoomInteractionConfig: _propTypes.default.shape({
     pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
+      allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
+    }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['drag']).isRequired
@@ -487,24 +522,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
-    }), _propTypes.default.shape({
-      allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['wheel']).isRequired
-    }), _propTypes.default.shape({
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.array,
-      type: _propTypes.default.oneOf(['pinch']).isRequired
-    }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+      type: _propTypes.default.oneOf(['brush']).isRequired
     }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
@@ -512,7 +534,15 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
     }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['brush']).isRequired
+      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.array,
+      type: _propTypes.default.oneOf(['pinch']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/BarChartPremium/BarChartPremium.mjs

@@ -87,12 +87,12 @@ const BarChartPremium = /*#__PURE__*/React.forwardRef(function BarChartPremium(i
         children: [renderer === 'webgl' && /*#__PURE__*/_jsxs(React.Fragment, {
           children: [/*#__PURE__*/_jsx(ChartsSvgLayer, {
             children: /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps))
-          }), /*#__PURE__*/_jsx(ChartsWebGLLayer, {
-            children: /*#__PURE__*/_jsx(BarPlotPremium, _extends({}, barPlotPremiumProps))
+          }), /*#__PURE__*/_jsxs(ChartsWebGLLayer, {
+            children: [/*#__PURE__*/_jsx(BarPlotPremium, _extends({}, barPlotPremiumProps)), /*#__PURE__*/_jsx(RangeBarPlot, _extends({}, rangeBarPlotProps))]
           })]
         }), /*#__PURE__*/_jsxs(ChartsSvgLayer, _extends({}, chartsSurfaceProps, {
           children: [renderer !== 'webgl' && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-            children: [renderer !== 'webgl' && /*#__PURE__*/_jsx(BarPlotPremium, _extends({}, barPlotPremiumProps)), /*#__PURE__*/_jsx(RangeBarPlot, _extends({}, rangeBarPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(FocusedBar, {}), /*#__PURE__*/_jsx(FocusedRangeBar, {})]
+            children: [renderer !== 'webgl' && /*#__PURE__*/_jsx(BarPlotPremium, _extends({}, barPlotPremiumProps)), renderer !== 'webgl' && /*#__PURE__*/_jsx(RangeBarPlot, _extends({}, rangeBarPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(FocusedBar, {}), /*#__PURE__*/_jsx(FocusedRangeBar, {})]
           })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
         }))]
       }), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
@@ -204,11 +204,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
   hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar'])
+    type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    type: PropTypes.oneOf(['bar'])
   })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
@@ -228,11 +228,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -263,21 +263,30 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
   initialHiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar'])
+    type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    type: PropTypes.oneOf(['bar'])
   })]).isRequired),
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+  initialZoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  })),
+  }), PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func, PropTypes.shape({
+      step: PropTypes.number,
+      unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -412,11 +421,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -439,11 +448,6 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   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]),
@@ -452,12 +456,38 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
+    }), 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)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
+    sizeMap: PropTypes.oneOfType([PropTypes.shape({
+      interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.func.isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownSize: PropTypes.number,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     valueGetter: PropTypes.func
   })),
   /**
@@ -473,6 +503,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   zoomInteractionConfig: PropTypes.shape({
     pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['drag']).isRequired
@@ -480,24 +515,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
-    }), PropTypes.shape({
-      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['wheel']).isRequired
-    }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
-      type: PropTypes.oneOf(['pinch']).isRequired
-    }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+      type: PropTypes.oneOf(['brush']).isRequired
     }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
@@ -505,7 +527,15 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
     }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['brush']).isRequired
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/BarChartPremium/RangeBar/RangeBarPlot.d.mts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type BarElementSlotProps, type BarElementSlots, type BarLabelSlots, type BarLabelSlotProps } from '@mui/x-charts/BarChart';
 import { type RangeBarItemIdentifier } from "../../models/index.mjs";
+export type RangeBarPlotRenderer = 'svg-single' | 'webgl';
 export interface RangeBarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface RangeBarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
 export interface RangeBarPlotProps {
@@ -19,6 +20,15 @@ export interface RangeBarPlotProps {
    * Defines the border radius of the bar element.
    */
   borderRadius?: number;
+  /**
+   * The type of renderer to use for the range bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer?: RangeBarPlotRenderer;
   /**
    * The props used for each component slot.
    * @default {}

package/BarChartPremium/RangeBar/RangeBarPlot.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type BarElementSlotProps, type BarElementSlots, type BarLabelSlots, type BarLabelSlotProps } from '@mui/x-charts/BarChart';
 import { type RangeBarItemIdentifier } from "../../models/index.js";
+export type RangeBarPlotRenderer = 'svg-single' | 'webgl';
 export interface RangeBarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface RangeBarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
 export interface RangeBarPlotProps {
@@ -19,6 +20,15 @@ export interface RangeBarPlotProps {
    * Defines the border radius of the bar element.
    */
   borderRadius?: number;
+  /**
+   * The type of renderer to use for the range bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer?: RangeBarPlotRenderer;
   /**
    * The props used for each component slot.
    * @default {}

package/BarChartPremium/RangeBar/RangeBarPlot.js

@@ -19,8 +19,10 @@ var _hooks2 = require("@mui/x-charts-pro/hooks");
 var _useUtilityClasses = require("./useUtilityClasses");
 var _useRangeBarPlotData = require("./useRangeBarPlotData");
 var _AnimatedRangeBarElement = require("./AnimatedRangeBarElement");
+var _RangeBarWebGLPlot = require("./RangeBarWebGLPlot");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
+const _excluded = ["renderer", "borderRadius"],
+  _excluded2 = ["skipAnimation", "onItemClick", "borderRadius"];
 const RangeBarPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiRangeBarPlot',
   slot: 'Root'
@@ -40,12 +42,27 @@ const RangeBarPlotRoot = (0, _styles.styled)('g', {
  * - [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
  */
 function RangeBarPlot(props) {
+  const {
+      renderer,
+      borderRadius
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (renderer === 'webgl') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarWebGLPlot.RangeBarWebGLPlot, {
+      borderRadius: borderRadius
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RangeBarSvgPlot, (0, _extends2.default)({
+    borderRadius: borderRadius
+  }, other));
+}
+function RangeBarSvgPlot(props) {
   const {
       skipAnimation: inSkipAnimation,
       onItemClick,
       borderRadius
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const isZoomInteracting = (0, _hooks2.useIsZoomInteracting)();
   const skipAnimation = (0, _internals.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const {
@@ -110,6 +127,37 @@ function RangeBarPlot(props) {
     })
   });
 }
+process.env.NODE_ENV !== "production" ? RangeBarSvgPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: _propTypes.default.number,
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {RangeBarItemIdentifier} barItemIdentifier The range bar item identifier.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;
 process.env.NODE_ENV !== "production" ? RangeBarPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -125,6 +173,15 @@ process.env.NODE_ENV !== "production" ? RangeBarPlot.propTypes = {
    * @param {RangeBarItemIdentifier} barItemIdentifier The range bar item identifier.
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The type of renderer to use for the range bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: _propTypes.default.oneOf(['svg-single', 'webgl']),
   /**
    * If `true`, animations are skipped.
    * @default undefined

package/BarChartPremium/RangeBar/RangeBarPlot.mjs

@@ -2,7 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
+const _excluded = ["renderer", "borderRadius"],
+  _excluded2 = ["skipAnimation", "onItemClick", "borderRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -13,6 +14,7 @@ import { useIsZoomInteracting } from '@mui/x-charts-pro/hooks';
 import { useUtilityClasses } from "./useUtilityClasses.mjs";
 import { useRangeBarPlotData } from "./useRangeBarPlotData.mjs";
 import { AnimatedRangeBarElement } from "./AnimatedRangeBarElement.mjs";
+import { RangeBarWebGLPlot } from "./RangeBarWebGLPlot.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RangeBarPlotRoot = styled('g', {
   name: 'MuiRangeBarPlot',
@@ -33,12 +35,27 @@ const RangeBarPlotRoot = styled('g', {
  * - [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
  */
 function RangeBarPlot(props) {
+  const {
+      renderer,
+      borderRadius
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (renderer === 'webgl') {
+    return /*#__PURE__*/_jsx(RangeBarWebGLPlot, {
+      borderRadius: borderRadius
+    });
+  }
+  return /*#__PURE__*/_jsx(RangeBarSvgPlot, _extends({
+    borderRadius: borderRadius
+  }, other));
+}
+function RangeBarSvgPlot(props) {
   const {
       skipAnimation: inSkipAnimation,
       onItemClick,
       borderRadius
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
   const isZoomInteracting = useIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const {
@@ -103,6 +120,37 @@ function RangeBarPlot(props) {
     })
   });
 }
+process.env.NODE_ENV !== "production" ? RangeBarSvgPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {RangeBarItemIdentifier} barItemIdentifier The range bar item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
 process.env.NODE_ENV !== "production" ? RangeBarPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -118,6 +166,15 @@ process.env.NODE_ENV !== "production" ? RangeBarPlot.propTypes = {
    * @param {RangeBarItemIdentifier} barItemIdentifier The range bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the range bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-single', 'webgl']),
   /**
    * If `true`, animations are skipped.
    * @default undefined

package/BarChartPremium/RangeBar/RangeBarWebGLPlot.d.mts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface RangeBarWebGLPlotProps {
+  borderRadius?: number;
+}
+/**
+ * @ignore - Internal component used for rendering the range bar plot using WebGL. Not exported from the package.
+ */
+export declare function RangeBarWebGLPlot({
+  borderRadius
+}: RangeBarWebGLPlotProps): React.JSX.Element | null;