@mui/x-charts-premium 9.0.4 → 9.2.0

package/BarChartPremium/BarPlotPremium.d.mts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type BarPlotProps, type BarPlotSlotProps, type BarPlotSlots } from '@mui/x-charts/BarChart';
+import type { RendererType } from '@mui/x-charts/ScatterChart';
+export type BarPlotPremiumRenderer = RendererType | 'webgl';
+export interface BarPlotPremiumSlots extends BarPlotSlots {}
+export interface BarPlotPremiumSlotProps extends BarPlotSlotProps {}
+export interface BarPlotPremiumProps extends Omit<BarPlotProps, 'renderer' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotPremiumSlotProps;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `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?: BarPlotPremiumRenderer;
+}
+declare function BarPlotPremium({
+  renderer,
+  borderRadius,
+  ...other
+}: BarPlotPremiumProps): React.JSX.Element;
+declare namespace BarPlotPremium {
+  var propTypes: any;
+}
+export { BarPlotPremium };

package/BarChartPremium/BarPlotPremium.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type BarPlotProps, type BarPlotSlotProps, type BarPlotSlots } from '@mui/x-charts/BarChart';
+import type { RendererType } from '@mui/x-charts/ScatterChart';
+export type BarPlotPremiumRenderer = RendererType | 'webgl';
+export interface BarPlotPremiumSlots extends BarPlotSlots {}
+export interface BarPlotPremiumSlotProps extends BarPlotSlotProps {}
+export interface BarPlotPremiumProps extends Omit<BarPlotProps, 'renderer' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotPremiumSlotProps;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `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?: BarPlotPremiumRenderer;
+}
+declare function BarPlotPremium({
+  renderer,
+  borderRadius,
+  ...other
+}: BarPlotPremiumProps): React.JSX.Element;
+declare namespace BarPlotPremium {
+  var propTypes: any;
+}
+export { BarPlotPremium };

package/BarChartPremium/BarPlotPremium.js

@@ -0,0 +1,78 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarPlotPremium = BarPlotPremium;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _BarChart = require("@mui/x-charts/BarChart");
+var _BarWebGLPlot = require("./webgl/BarWebGLPlot");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["renderer", "borderRadius"];
+function BarPlotPremium(_ref) {
+  let {
+      renderer,
+      borderRadius
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  if (renderer === 'webgl') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarWebGLPlot.BarWebGLPlot, {
+      borderRadius: borderRadius
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({
+    renderer: renderer,
+    borderRadius: borderRadius
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? BarPlotPremium.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,
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {MouseEvent} event The event source of the callback.
+   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `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-batch', 'svg-single', 'webgl']),
+  /**
+   * 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;

package/BarChartPremium/BarPlotPremium.mjs

@@ -0,0 +1,72 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["renderer", "borderRadius"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { BarWebGLPlot } from "./webgl/BarWebGLPlot.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function BarPlotPremium(_ref) {
+  let {
+      renderer,
+      borderRadius
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (renderer === 'webgl') {
+    return /*#__PURE__*/_jsx(BarWebGLPlot, {
+      borderRadius: borderRadius
+    });
+  }
+  return /*#__PURE__*/_jsx(BarPlot, _extends({
+    renderer: renderer,
+    borderRadius: borderRadius
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? BarPlotPremium.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,
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className: PropTypes.string,
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {MouseEvent} event The event source of the callback.
+   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `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-batch', 'svg-single', 'webgl']),
+  /**
+   * 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;
+export { BarPlotPremium };

package/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.js

@@ -19,6 +19,8 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
     const seriesData = series[id];
     const datasetKeys = seriesData?.datasetKeys;
     if (seriesData.data === undefined && dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: range bar series with id='${id}' has no data.
 Either provide a data property to the series or use the dataset prop.` : (0, _formatErrorMessage2.default)(44, id));
     }

package/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.mjs

@@ -12,6 +12,8 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
     const seriesData = series[id];
     const datasetKeys = seriesData?.datasetKeys;
     if (seriesData.data === undefined && dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: range bar series with id='${id}' has no data.
 Either provide a data property to the series or use the dataset prop.` : _formatErrorMessage(44, id));
     }

package/BarChartPremium/RangeBar/useUtilityClasses.d.mts

@@ -9,4 +9,4 @@ export interface RangeBarClasses {
 export type RangeBarClassKey = keyof RangeBarClasses;
 export declare function getRangeBarUtilityClass(slot: string): string;
 export declare const rangeBarClasses: RangeBarClasses;
-export declare const useUtilityClasses: (classes?: Partial<RangeBarClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<RangeBarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/BarChartPremium/RangeBar/useUtilityClasses.d.ts

@@ -9,4 +9,4 @@ export interface RangeBarClasses {
 export type RangeBarClassKey = keyof RangeBarClasses;
 export declare function getRangeBarUtilityClass(slot: string): string;
 export declare const rangeBarClasses: RangeBarClasses;
-export declare const useUtilityClasses: (classes?: Partial<RangeBarClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<RangeBarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/BarChartPremium/index.d.mts

@@ -1,5 +1,6 @@
 export * from "./BarChartPremium.mjs";
 export * from "./BarChartPremium.plugins.mjs";
+export * from "./BarPlotPremium.mjs";
 export * from "./RangeBar/RangeBarPlot.mjs";
 export * from "./RangeBar/FocusedRangeBar.mjs";
 export { rangeBarClasses, type RangeBarClasses, type RangeBarClassKey } from "./RangeBar/useUtilityClasses.mjs";

package/BarChartPremium/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./BarChartPremium.js";
 export * from "./BarChartPremium.plugins.js";
+export * from "./BarPlotPremium.js";
 export * from "./RangeBar/RangeBarPlot.js";
 export * from "./RangeBar/FocusedRangeBar.js";
 export { rangeBarClasses, type RangeBarClasses, type RangeBarClassKey } from "./RangeBar/useUtilityClasses.js";

package/BarChartPremium/index.js

@@ -36,6 +36,18 @@ Object.keys(_BarChartPremium2).forEach(function (key) {
     }
   });
 });
+var _BarPlotPremium = require("./BarPlotPremium");
+Object.keys(_BarPlotPremium).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _BarPlotPremium[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BarPlotPremium[key];
+    }
+  });
+});
 var _RangeBarPlot = require("./RangeBar/RangeBarPlot");
 Object.keys(_RangeBarPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/BarChartPremium/index.mjs

@@ -1,5 +1,6 @@
 export * from "./BarChartPremium.mjs";
 export * from "./BarChartPremium.plugins.mjs";
+export * from "./BarPlotPremium.mjs";
 export * from "./RangeBar/RangeBarPlot.mjs";
 export * from "./RangeBar/FocusedRangeBar.mjs";
 export { rangeBarClasses } from "./RangeBar/useUtilityClasses.mjs";

package/BarChartPremium/useBarChartPremiumProps.d.mts

@@ -1,6 +1,7 @@
 import { type BarChartPluginSignatures } from '@mui/x-charts/BarChart';
 import { type ChartsContainerProps } from '@mui/x-charts/ChartsContainer';
 import { type BarChartPremiumProps } from "./BarChartPremium.mjs";
+import { type BarPlotPremiumProps } from "./BarPlotPremium.mjs";
 import { type RangeBarPlotProps } from "./RangeBar/RangeBarPlot.mjs";
 /**
  * A helper function that extracts BarChartPremiumProps from the input props
@@ -11,9 +12,9 @@ import { type RangeBarPlotProps } from "./RangeBar/RangeBarPlot.mjs";
  */
 export declare function useBarChartPremiumProps(props: BarChartPremiumProps): {
   chartsContainerProps: ChartsContainerProps<"bar" | "rangeBar", BarChartPluginSignatures>;
+  barPlotPremiumProps: BarPlotPremiumProps;
   rangeBarPlotProps: RangeBarPlotProps;
   chartsWrapperProps: Omit<import("@mui/x-charts").ChartsWrapperProps, "children">;
-  barPlotProps: import("@mui/x-charts").BarPlotProps;
   gridProps: import("@mui/x-charts").ChartsGridProps;
   clipPathProps: import("@mui/x-charts").ChartsClipPathProps;
   clipPathGroupProps: {

package/BarChartPremium/useBarChartPremiumProps.d.ts

@@ -1,6 +1,7 @@
 import { type BarChartPluginSignatures } from '@mui/x-charts/BarChart';
 import { type ChartsContainerProps } from '@mui/x-charts/ChartsContainer';
 import { type BarChartPremiumProps } from "./BarChartPremium.js";
+import { type BarPlotPremiumProps } from "./BarPlotPremium.js";
 import { type RangeBarPlotProps } from "./RangeBar/RangeBarPlot.js";
 /**
  * A helper function that extracts BarChartPremiumProps from the input props
@@ -11,9 +12,9 @@ import { type RangeBarPlotProps } from "./RangeBar/RangeBarPlot.js";
  */
 export declare function useBarChartPremiumProps(props: BarChartPremiumProps): {
   chartsContainerProps: ChartsContainerProps<"bar" | "rangeBar", BarChartPluginSignatures>;
+  barPlotPremiumProps: BarPlotPremiumProps;
   rangeBarPlotProps: RangeBarPlotProps;
   chartsWrapperProps: Omit<import("@mui/x-charts").ChartsWrapperProps, "children">;
-  barPlotProps: import("@mui/x-charts").BarPlotProps;
   gridProps: import("@mui/x-charts").ChartsGridProps;
   clipPathProps: import("@mui/x-charts").ChartsClipPathProps;
   clipPathGroupProps: {

package/BarChartPremium/useBarChartPremiumProps.js

@@ -8,7 +8,15 @@ exports.useBarChartPremiumProps = useBarChartPremiumProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _internals = require("@mui/x-charts/internals");
-const _excluded = ["chartsContainerProps"];
+const _excluded = ["renderer"],
+  _excluded2 = ["chartsContainerProps", "barPlotProps"];
+/**
+ * Default minimum spacing (in pixels) between ticks on band axes when the WebGL
+ * renderer is active. Without this, a chart with 20k bars would render 20k SVG
+ * ticks, dwarfing the gain from drawing bars on the GPU.
+ */
+const WEBGL_DEFAULT_BAND_TICK_SPACING = 50;
+
 /**
  * A helper function that extracts BarChartPremiumProps from the input props
  * and returns an object with props for the children components of BarChartPremium.
@@ -17,11 +25,23 @@ const _excluded = ["chartsContainerProps"];
  * @returns An object with props for the children components of BarChartPremium
  */
 function useBarChartPremiumProps(props) {
-  const _useBarChartProps = (0, _internals.useBarChartProps)(props),
+  const {
+      renderer
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const _useBarChartProps = (0, _internals.useBarChartProps)(rest),
     {
-      chartsContainerProps
+      chartsContainerProps,
+      barPlotProps
     } = _useBarChartProps,
-    barChartProps = (0, _objectWithoutPropertiesLoose2.default)(_useBarChartProps, _excluded);
+    barChartProps = (0, _objectWithoutPropertiesLoose2.default)(_useBarChartProps, _excluded2);
+  const premiumContainerProps = renderer === 'webgl' ? (0, _extends2.default)({}, chartsContainerProps, {
+    xAxis: applyWebGLBandTickSpacing(chartsContainerProps.xAxis),
+    yAxis: applyWebGLBandTickSpacing(chartsContainerProps.yAxis)
+  }) : chartsContainerProps;
+  const barPlotPremiumProps = (0, _extends2.default)({}, barPlotProps, {
+    renderer
+  });
   const rangeBarPlotProps = {
     onItemClick: props.onItemClick,
     slots: props.slots,
@@ -29,7 +49,21 @@ function useBarChartPremiumProps(props) {
     borderRadius: props.borderRadius
   };
   return (0, _extends2.default)({}, barChartProps, {
-    chartsContainerProps: chartsContainerProps,
+    chartsContainerProps: premiumContainerProps,
+    barPlotPremiumProps,
     rangeBarPlotProps
   });
+}
+function applyWebGLBandTickSpacing(axes) {
+  if (!axes) {
+    return axes;
+  }
+  return axes.map(axis => {
+    if (axis.scaleType === 'band' && axis.tickSpacing === undefined) {
+      return (0, _extends2.default)({}, axis, {
+        tickSpacing: WEBGL_DEFAULT_BAND_TICK_SPACING
+      });
+    }
+    return axis;
+  });
 }

package/BarChartPremium/useBarChartPremiumProps.mjs

@@ -1,7 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["chartsContainerProps"];
+const _excluded = ["renderer"],
+  _excluded2 = ["chartsContainerProps", "barPlotProps"];
 import { useBarChartProps } from '@mui/x-charts/internals';
+/**
+ * Default minimum spacing (in pixels) between ticks on band axes when the WebGL
+ * renderer is active. Without this, a chart with 20k bars would render 20k SVG
+ * ticks, dwarfing the gain from drawing bars on the GPU.
+ */
+const WEBGL_DEFAULT_BAND_TICK_SPACING = 50;
+
 /**
  * A helper function that extracts BarChartPremiumProps from the input props
  * and returns an object with props for the children components of BarChartPremium.
@@ -10,11 +18,23 @@ import { useBarChartProps } from '@mui/x-charts/internals';
  * @returns An object with props for the children components of BarChartPremium
  */
 export function useBarChartPremiumProps(props) {
-  const _useBarChartProps = useBarChartProps(props),
+  const {
+      renderer
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  const _useBarChartProps = useBarChartProps(rest),
     {
-      chartsContainerProps
+      chartsContainerProps,
+      barPlotProps
     } = _useBarChartProps,
-    barChartProps = _objectWithoutPropertiesLoose(_useBarChartProps, _excluded);
+    barChartProps = _objectWithoutPropertiesLoose(_useBarChartProps, _excluded2);
+  const premiumContainerProps = renderer === 'webgl' ? _extends({}, chartsContainerProps, {
+    xAxis: applyWebGLBandTickSpacing(chartsContainerProps.xAxis),
+    yAxis: applyWebGLBandTickSpacing(chartsContainerProps.yAxis)
+  }) : chartsContainerProps;
+  const barPlotPremiumProps = _extends({}, barPlotProps, {
+    renderer
+  });
   const rangeBarPlotProps = {
     onItemClick: props.onItemClick,
     slots: props.slots,
@@ -22,7 +42,21 @@ export function useBarChartPremiumProps(props) {
     borderRadius: props.borderRadius
   };
   return _extends({}, barChartProps, {
-    chartsContainerProps: chartsContainerProps,
+    chartsContainerProps: premiumContainerProps,
+    barPlotPremiumProps,
     rangeBarPlotProps
   });
+}
+function applyWebGLBandTickSpacing(axes) {
+  if (!axes) {
+    return axes;
+  }
+  return axes.map(axis => {
+    if (axis.scaleType === 'band' && axis.tickSpacing === undefined) {
+      return _extends({}, axis, {
+        tickSpacing: WEBGL_DEFAULT_BAND_TICK_SPACING
+      });
+    }
+    return axis;
+  });
 }

package/BarChartPremium/webgl/BarWebGLPlot.d.mts

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

package/BarChartPremium/webgl/BarWebGLPlot.d.ts

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

package/BarChartPremium/webgl/BarWebGLPlot.js

@@ -0,0 +1,81 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarWebGLPlot = BarWebGLPlot;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _internals = require("@mui/x-charts/internals");
+var _ChartsWebGLContext = require("../../ChartsWebGLLayer/ChartsWebGLContext");
+var _BarWebGLProgram = require("./BarWebGLProgram");
+var _useBarWebGLPlotData = require("./useBarWebGLPlotData");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - Internal component used for rendering the bar plot using WebGL. Not exported from the package.
+ */
+function BarWebGLPlot({
+  borderRadius = 0
+}) {
+  const layer = (0, _ChartsWebGLContext.useWebGLLayer)();
+  const drawingArea = (0, _hooks.useDrawingArea)();
+  const {
+    xAxis: xAxes
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis: yAxes
+  } = (0, _hooks.useYAxes)();
+  const {
+    completedData
+  } = (0, _internals.useBarPlotData)(drawingArea, xAxes, yAxes);
+  if (!layer) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarWebGLPlotImpl, {
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
+    borderRadius: borderRadius,
+    completedData: completedData
+  });
+}
+function BarWebGLPlotImpl(props) {
+  const {
+    gl,
+    registerDraw,
+    requestRender,
+    borderRadius,
+    completedData
+  } = props;
+  const drawingArea = (0, _hooks.useDrawingArea)();
+  const plotData = (0, _useBarWebGLPlotData.useBarWebGLPlotData)(drawingArea, completedData, borderRadius);
+  const [program, setProgram] = React.useState(null);
+  const drawRef = React.useRef(null);
+  React.useEffect(() => {
+    const prog = new _BarWebGLProgram.BarWebGLProgram(gl);
+    setProgram(prog);
+    return () => {
+      prog.dispose();
+    };
+  }, [gl]);
+  React.useEffect(() => {
+    drawRef.current = () => {
+      program?.render(plotData.count);
+    };
+  }, [program, plotData.count]);
+  React.useEffect(() => {
+    const unregister = registerDraw(drawRef);
+    return unregister;
+  }, [registerDraw]);
+  React.useEffect(() => {
+    program?.setResolution(drawingArea.width, drawingArea.height);
+    requestRender();
+  }, [drawingArea.width, drawingArea.height, program, requestRender]);
+  React.useEffect(() => {
+    program?.plot(plotData);
+    requestRender();
+  }, [program, plotData, requestRender]);
+  return null;
+}

package/BarChartPremium/webgl/BarWebGLPlot.mjs

@@ -0,0 +1,75 @@
+'use client';
+
+import * as React from 'react';
+import { useDrawingArea, useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { useBarPlotData } from '@mui/x-charts/internals';
+import { useWebGLLayer } from "../../ChartsWebGLLayer/ChartsWebGLContext.mjs";
+import { BarWebGLProgram } from "./BarWebGLProgram.mjs";
+import { useBarWebGLPlotData } from "./useBarWebGLPlotData.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - Internal component used for rendering the bar plot using WebGL. Not exported from the package.
+ */
+export function BarWebGLPlot({
+  borderRadius = 0
+}) {
+  const layer = useWebGLLayer();
+  const drawingArea = useDrawingArea();
+  const {
+    xAxis: xAxes
+  } = useXAxes();
+  const {
+    yAxis: yAxes
+  } = useYAxes();
+  const {
+    completedData
+  } = useBarPlotData(drawingArea, xAxes, yAxes);
+  if (!layer) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(BarWebGLPlotImpl, {
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
+    borderRadius: borderRadius,
+    completedData: completedData
+  });
+}
+function BarWebGLPlotImpl(props) {
+  const {
+    gl,
+    registerDraw,
+    requestRender,
+    borderRadius,
+    completedData
+  } = props;
+  const drawingArea = useDrawingArea();
+  const plotData = useBarWebGLPlotData(drawingArea, completedData, borderRadius);
+  const [program, setProgram] = React.useState(null);
+  const drawRef = React.useRef(null);
+  React.useEffect(() => {
+    const prog = new BarWebGLProgram(gl);
+    setProgram(prog);
+    return () => {
+      prog.dispose();
+    };
+  }, [gl]);
+  React.useEffect(() => {
+    drawRef.current = () => {
+      program?.render(plotData.count);
+    };
+  }, [program, plotData.count]);
+  React.useEffect(() => {
+    const unregister = registerDraw(drawRef);
+    return unregister;
+  }, [registerDraw]);
+  React.useEffect(() => {
+    program?.setResolution(drawingArea.width, drawingArea.height);
+    requestRender();
+  }, [drawingArea.width, drawingArea.height, program, requestRender]);
+  React.useEffect(() => {
+    program?.plot(plotData);
+    requestRender();
+  }, [program, plotData, requestRender]);
+  return null;
+}