@mui/x-charts-premium 9.0.2 → 9.0.3

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.mjs

@@ -0,0 +1,120 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ChartsProvider, ChartsSlotsProvider } from '@mui/x-charts/internals';
+import { ChartsLocalizationProvider } from '@mui/x-charts/ChartsLocalizationProvider';
+import { ChartsWatermark, defaultSlotsMaterial } from '@mui/x-charts-pro/internals';
+import { useLicenseVerifier } from '@mui/x-license/internals';
+import { useChartsRadialDataProviderPremiumProps } from "./useChartsRadialDataProviderPremiumProps.mjs";
+import { RADIAL_PREMIUM_PLUGINS } from "./ChartsRadialDataProviderPremium.plugins.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const packageInfo = {
+  releaseDate: "MTc3NzI0ODAwMDAwMA==",
+  version: "9.0.3",
+  name: 'x-charts-premium'
+};
+/**
+ * Orchestrates the data providers for radial chart components and hooks.
+ *
+ * Similar to `ChartsDataProviderPremium`, but uses the radial axis plugin instead of the cartesian one,
+ * and only supports polar series types.
+ *
+ * Demos:
+ *
+ * - [Composition](https://mui.com/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsRadialDataProviderPremium API](https://mui.com/x/api/charts/charts-radial-data-provider-premium/)
+ */
+function ChartsRadialDataProviderPremium(props) {
+  const {
+    children,
+    localeText,
+    chartProviderProps,
+    slots,
+    slotProps
+  } = useChartsRadialDataProviderPremiumProps(_extends({}, props, {
+    plugins: props.plugins ?? RADIAL_PREMIUM_PLUGINS
+  }));
+  useLicenseVerifier(packageInfo);
+  return /*#__PURE__*/_jsxs(ChartsProvider, _extends({}, chartProviderProps, {
+    children: [/*#__PURE__*/_jsx(ChartsLocalizationProvider, {
+      localeText: localeText,
+      children: /*#__PURE__*/_jsx(ChartsSlotsProvider, {
+        slots: slots,
+        slotProps: slotProps,
+        defaultSlots: defaultSlotsMaterial,
+        children: children
+      })
+    }), /*#__PURE__*/_jsx(ChartsWatermark, {
+      packageInfo: packageInfo
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartsRadialDataProviderPremium.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.any
+  }),
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+  /**
+   * 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.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
+  /**
+   * The array of series to display.
+   * Each type of series has its own specificity.
+   * Please refer to the appropriate docs page to learn more about it.
+   */
+  series: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: PropTypes.object,
+  theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number
+} : void 0;
+export { ChartsRadialDataProviderPremium };

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.plugins.d.mts

@@ -0,0 +1,5 @@
+import { type RadialPluginSignatures } from '@mui/x-charts/ChartsRadialDataProvider';
+import { type PolarChartSeriesType } from '@mui/x-charts/internals';
+import { type UseChartProExportSignature } from '@mui/x-charts-pro/plugins';
+export declare const RADIAL_PREMIUM_PLUGINS: readonly [import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartTooltipSignature<any>>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartInteractionSignature>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartPolarAxisSignature<any>>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartHighlightSignature<any>>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts/internals").UseChartKeyboardNavigationSignature>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartVisibilityManagerSignature<any>>, import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature>];
+export type RadialPremiumPluginSignatures<SeriesType extends PolarChartSeriesType = PolarChartSeriesType> = [...RadialPluginSignatures<SeriesType>, UseChartProExportSignature];

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.plugins.d.ts

@@ -0,0 +1,5 @@
+import { type RadialPluginSignatures } from '@mui/x-charts/ChartsRadialDataProvider';
+import { type PolarChartSeriesType } from '@mui/x-charts/internals';
+import { type UseChartProExportSignature } from '@mui/x-charts-pro/plugins';
+export declare const RADIAL_PREMIUM_PLUGINS: readonly [import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartTooltipSignature<any>>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartInteractionSignature>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartPolarAxisSignature<any>>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartHighlightSignature<any>>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts/internals").UseChartKeyboardNavigationSignature>, import("@mui/x-charts/internals").ChartPlugin<import("@mui/x-charts").UseChartVisibilityManagerSignature<any>>, import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature>];
+export type RadialPremiumPluginSignatures<SeriesType extends PolarChartSeriesType = PolarChartSeriesType> = [...RadialPluginSignatures<SeriesType>, UseChartProExportSignature];

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RADIAL_PREMIUM_PLUGINS = void 0;
+var _ChartsRadialDataProvider = require("@mui/x-charts/ChartsRadialDataProvider");
+var _plugins = require("@mui/x-charts-pro/plugins");
+const RADIAL_PREMIUM_PLUGINS = exports.RADIAL_PREMIUM_PLUGINS = [..._ChartsRadialDataProvider.RADIAL_PLUGINS, _plugins.useChartProExport];

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.plugins.mjs

@@ -0,0 +1,3 @@
+import { RADIAL_PLUGINS } from '@mui/x-charts/ChartsRadialDataProvider';
+import { useChartProExport } from '@mui/x-charts-pro/plugins';
+export const RADIAL_PREMIUM_PLUGINS = [...RADIAL_PLUGINS, useChartProExport];

package/ChartsRadialDataProviderPremium/index.d.mts

@@ -0,0 +1,3 @@
+import "../typeOverloads/index.mjs";
+export { ChartsRadialDataProviderPremium, type ChartsRadialDataProviderPremiumProps, type ChartsRadialDataProviderPremiumSlots, type ChartsRadialDataProviderPremiumSlotProps } from "./ChartsRadialDataProviderPremium.mjs";
+export { RADIAL_PREMIUM_PLUGINS, type RadialPremiumPluginSignatures } from "./ChartsRadialDataProviderPremium.plugins.mjs";

package/ChartsRadialDataProviderPremium/index.d.ts

@@ -0,0 +1,3 @@
+import "../typeOverloads/index.js";
+export { ChartsRadialDataProviderPremium, type ChartsRadialDataProviderPremiumProps, type ChartsRadialDataProviderPremiumSlots, type ChartsRadialDataProviderPremiumSlotProps } from "./ChartsRadialDataProviderPremium.js";
+export { RADIAL_PREMIUM_PLUGINS, type RadialPremiumPluginSignatures } from "./ChartsRadialDataProviderPremium.plugins.js";

package/ChartsRadialDataProviderPremium/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChartsRadialDataProviderPremium", {
+  enumerable: true,
+  get: function () {
+    return _ChartsRadialDataProviderPremium.ChartsRadialDataProviderPremium;
+  }
+});
+Object.defineProperty(exports, "RADIAL_PREMIUM_PLUGINS", {
+  enumerable: true,
+  get: function () {
+    return _ChartsRadialDataProviderPremium2.RADIAL_PREMIUM_PLUGINS;
+  }
+});
+require("../typeOverloads");
+var _ChartsRadialDataProviderPremium = require("./ChartsRadialDataProviderPremium");
+var _ChartsRadialDataProviderPremium2 = require("./ChartsRadialDataProviderPremium.plugins");

package/ChartsRadialDataProviderPremium/index.mjs

@@ -0,0 +1,3 @@
+import "../typeOverloads/index.mjs";
+export { ChartsRadialDataProviderPremium } from "./ChartsRadialDataProviderPremium.mjs";
+export { RADIAL_PREMIUM_PLUGINS } from "./ChartsRadialDataProviderPremium.plugins.mjs";

package/ChartsRadialDataProviderPremium/useChartsRadialDataProviderPremiumProps.d.mts

@@ -0,0 +1,10 @@
+import { type ChartAnyPluginSignature, type PolarChartSeriesType } from '@mui/x-charts/internals';
+import type { ChartsRadialDataProviderPremiumProps } from "./ChartsRadialDataProviderPremium.mjs";
+import type { RadialPremiumPluginSignatures } from "./ChartsRadialDataProviderPremium.plugins.mjs";
+export declare const useChartsRadialDataProviderPremiumProps: <SeriesType extends PolarChartSeriesType = PolarChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = RadialPremiumPluginSignatures<SeriesType>>(props: ChartsRadialDataProviderPremiumProps<SeriesType, TSignatures>) => {
+  children: import("react").ReactNode;
+  localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;
+  chartProviderProps: import("@mui/x-charts/internals").ChartsProviderProps<"radar" | "radialLine" | "radialBar", TSignatures>;
+  slots: Partial<import("@mui/x-charts").ChartsRadialDataProviderSlots> | undefined;
+  slotProps: Partial<import("@mui/x-charts").ChartsRadialDataProviderSlotProps> | undefined;
+};

package/ChartsRadialDataProviderPremium/useChartsRadialDataProviderPremiumProps.d.ts

@@ -0,0 +1,10 @@
+import { type ChartAnyPluginSignature, type PolarChartSeriesType } from '@mui/x-charts/internals';
+import type { ChartsRadialDataProviderPremiumProps } from "./ChartsRadialDataProviderPremium.js";
+import type { RadialPremiumPluginSignatures } from "./ChartsRadialDataProviderPremium.plugins.js";
+export declare const useChartsRadialDataProviderPremiumProps: <SeriesType extends PolarChartSeriesType = PolarChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = RadialPremiumPluginSignatures<SeriesType>>(props: ChartsRadialDataProviderPremiumProps<SeriesType, TSignatures>) => {
+  children: import("react").ReactNode;
+  localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;
+  chartProviderProps: import("@mui/x-charts/internals").ChartsProviderProps<"radar" | "radialLine" | "radialBar", TSignatures>;
+  slots: Partial<import("@mui/x-charts").ChartsRadialDataProviderSlots> | undefined;
+  slotProps: Partial<import("@mui/x-charts").ChartsRadialDataProviderSlotProps> | undefined;
+};

package/ChartsRadialDataProviderPremium/useChartsRadialDataProviderPremiumProps.js

@@ -0,0 +1,25 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartsRadialDataProviderPremiumProps = void 0;
+var _internals = require("@mui/x-charts/internals");
+const useChartsRadialDataProviderPremiumProps = props => {
+  const {
+    chartProviderProps,
+    localeText,
+    slots,
+    slotProps,
+    children
+  } = (0, _internals.useChartsRadialDataProviderProps)(props);
+  return {
+    children,
+    localeText,
+    chartProviderProps,
+    slots,
+    slotProps
+  };
+};
+exports.useChartsRadialDataProviderPremiumProps = useChartsRadialDataProviderPremiumProps;

package/ChartsRadialDataProviderPremium/useChartsRadialDataProviderPremiumProps.mjs

@@ -0,0 +1,19 @@
+'use client';
+
+import { useChartsRadialDataProviderProps } from '@mui/x-charts/internals';
+export const useChartsRadialDataProviderPremiumProps = props => {
+  const {
+    chartProviderProps,
+    localeText,
+    slots,
+    slotProps,
+    children
+  } = useChartsRadialDataProviderProps(props);
+  return {
+    children,
+    localeText,
+    chartProviderProps,
+    slots,
+    slotProps
+  };
+};

package/ChartsRadiusAxis/index.d.mts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRadiusAxis';

package/ChartsRadiusAxis/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRadiusAxis';

package/ChartsRadiusAxis/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsRadiusAxis = require("@mui/x-charts/ChartsRadiusAxis");
+Object.keys(_ChartsRadiusAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsRadiusAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRadiusAxis[key];
+    }
+  });
+});

package/ChartsRadiusAxis/index.mjs

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsRadiusAxis';

package/ChartsRotationAxis/index.d.mts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRotationAxis';

package/ChartsRotationAxis/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRotationAxis';

package/ChartsRotationAxis/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsRotationAxis = require("@mui/x-charts/ChartsRotationAxis");
+Object.keys(_ChartsRotationAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsRotationAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRotationAxis[key];
+    }
+  });
+});

package/ChartsRotationAxis/index.mjs

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsRotationAxis';

package/ChartsWebGLLayer/ChartsWebGLContext.d.mts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ChartsWebGLContextValue, UseWebGLLayerValue } from "./ChartsWebGLLayer.types.mjs";
+export declare const ChartsWebGLContext: React.Context<ChartsWebGLContextValue | null>;
+export declare function useWebGLContext(): WebGL2RenderingContext | null;
+export declare function useWebGLLayer(): UseWebGLLayerValue | null;

package/ChartsWebGLLayer/ChartsWebGLContext.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ChartsWebGLContextValue, UseWebGLLayerValue } from "./ChartsWebGLLayer.types.js";
+export declare const ChartsWebGLContext: React.Context<ChartsWebGLContextValue | null>;
+export declare function useWebGLContext(): WebGL2RenderingContext | null;
+export declare function useWebGLLayer(): UseWebGLLayerValue | null;

package/ChartsWebGLLayer/ChartsWebGLContext.js

@@ -0,0 +1,31 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsWebGLContext = void 0;
+exports.useWebGLContext = useWebGLContext;
+exports.useWebGLLayer = useWebGLLayer;
+var React = _interopRequireWildcard(require("react"));
+var _ChartsWebGLOrderContext = require("./ChartsWebGLOrderContext");
+const ChartsWebGLContext = exports.ChartsWebGLContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") ChartsWebGLContext.displayName = "ChartsWebGLContext";
+function useWebGLContext() {
+  return React.useContext(ChartsWebGLContext)?.gl ?? null;
+}
+function useWebGLLayer() {
+  const layer = React.useContext(ChartsWebGLContext);
+  const order = React.useContext(_ChartsWebGLOrderContext.ChartsWebGLOrderContext);
+  return React.useMemo(() => {
+    if (!layer) {
+      return null;
+    }
+    return {
+      gl: layer.gl,
+      registerDraw: drawRef => layer.registerDraw(drawRef, order),
+      requestRender: layer.requestRender
+    };
+  }, [layer, order]);
+}

package/ChartsWebGLLayer/ChartsWebGLContext.mjs

@@ -0,0 +1,23 @@
+'use client';
+
+import * as React from 'react';
+import { ChartsWebGLOrderContext } from "./ChartsWebGLOrderContext.mjs";
+export const ChartsWebGLContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") ChartsWebGLContext.displayName = "ChartsWebGLContext";
+export function useWebGLContext() {
+  return React.useContext(ChartsWebGLContext)?.gl ?? null;
+}
+export function useWebGLLayer() {
+  const layer = React.useContext(ChartsWebGLContext);
+  const order = React.useContext(ChartsWebGLOrderContext);
+  return React.useMemo(() => {
+    if (!layer) {
+      return null;
+    }
+    return {
+      gl: layer.gl,
+      registerDraw: drawRef => layer.registerDraw(drawRef, order),
+      requestRender: layer.requestRender
+    };
+  }, [layer, order]);
+}

package/ChartsWebGLLayer/ChartsWebGLLayer.d.mts

@@ -1,3 +1,2 @@
 import * as React from 'react';
-export declare function useWebGLContext(): WebGL2RenderingContext | null;
 export declare const ChartsWebGLLayer: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>>, "ref"> & React.RefAttributes<HTMLCanvasElement>>;

package/ChartsWebGLLayer/ChartsWebGLLayer.d.ts

@@ -1,3 +1,2 @@
 import * as React from 'react';
-export declare function useWebGLContext(): WebGL2RenderingContext | null;
 export declare const ChartsWebGLLayer: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>>, "ref"> & React.RefAttributes<HTMLCanvasElement>>;

package/ChartsWebGLLayer/ChartsWebGLLayer.js

@@ -7,32 +7,75 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsWebGLLayer = void 0;
-exports.useWebGLContext = useWebGLContext;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
+var _useWebGLResizeObserver = require("../utils/webgl/useWebGLResizeObserver");
+var _ChartsWebGLContext = require("./ChartsWebGLContext");
+var _ChartsWebGLOrderContext = require("./ChartsWebGLOrderContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"],
   _excluded2 = ["children"];
-const ChartsWebGLContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") ChartsWebGLContext.displayName = "ChartsWebGLContext";
-function useWebGLContext() {
-  return React.useContext(ChartsWebGLContext);
-}
 const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProvider(_ref, ref) {
   let {
       children
     } = _ref,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const canvasRef = React.useRef(null);
-  const [context, setContext] = React.useState(null);
+  const [glContext, setGlContext] = React.useState(null);
   const handleRef = (0, _useForkRef.default)(canvasRef, ref);
   const chartRoot = (0, _hooks.useChartRootRef)().current;
   const drawingArea = (0, _hooks.useDrawingArea)();
   const [, rerender] = React.useReducer(s => s + 1, 0);
+  const drawEntriesRef = React.useRef([]);
+  const renderScheduledRef = React.useRef(false);
+  const renderAll = React.useCallback(() => {
+    if (!glContext) {
+      return;
+    }
+    renderScheduledRef.current = false;
+    glContext.clearColor(0, 0, 0, 0.0);
+    glContext.clear(glContext.COLOR_BUFFER_BIT);
+    // Sort by order so z-order matches children's position in ChartsWebGLLayer,
+    // stable across remount.
+    const sorted = [...drawEntriesRef.current].sort((a, b) => a.order - b.order);
+    for (const {
+      drawRef
+    } of sorted) {
+      drawRef.current?.();
+    }
+  }, [glContext]);
+  const registerDraw = React.useCallback((drawRef, order) => {
+    const entry = {
+      drawRef,
+      order
+    };
+    drawEntriesRef.current.push(entry);
+    return () => {
+      const idx = drawEntriesRef.current.indexOf(entry);
+      if (idx >= 0) {
+        drawEntriesRef.current.splice(idx, 1);
+      }
+    };
+  }, []);
+  const requestRender = React.useCallback(() => {
+    renderScheduledRef.current = true;
+    // Trigger a re-render so the flush effect runs, even if only a child's state changed
+    rerender();
+  }, []);
+
+  // Centralized resize handling — render all plots on canvas resize
+  (0, _useWebGLResizeObserver.useWebGLResizeObserver)(glContext, renderAll);
+
+  // Flush scheduled renders after all children's effects have run
+  React.useEffect(() => {
+    if (renderScheduledRef.current) {
+      renderAll();
+    }
+  });
   React.useEffect(() => {
     /* The chart root isn't available on first render because the ref is only set after mounting the root component. */
     if (!chartRoot) {
@@ -48,7 +91,7 @@ const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRe
       // Must prevent default otherwise the context won't be marked as restorable
       // https://registry.khronos.org/webgl/extensions/WEBGL_lose_context/
       event.preventDefault();
-      setContext(null);
+      setGlContext(null);
     };
     const initializeContext = () => {
       const ctx = canvas.getContext('webgl2', {
@@ -60,7 +103,7 @@ const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRe
       if (!ctx) {
         return;
       }
-      setContext(ctx);
+      setGlContext(ctx);
     };
     canvas.addEventListener('webglcontextlost', handleContextLost);
     canvas.addEventListener('webglcontextrestored', initializeContext);
@@ -70,11 +113,16 @@ const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRe
       canvas.removeEventListener('webglcontextrestored', initializeContext);
     };
   }, [chartRoot]);
+  const contextValue = React.useMemo(() => glContext ? {
+    gl: glContext,
+    registerDraw,
+    requestRender
+  } : null, [glContext, registerDraw, requestRender]);
   if (!chartRoot) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsWebGLContext.Provider, {
-    value: context,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWebGLContext.ChartsWebGLContext.Provider, {
+    value: contextValue,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CanvasPositioner, {
       "aria-hidden": "true",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", (0, _extends2.default)({
@@ -88,7 +136,10 @@ const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRe
           height: drawingArea.height
         }
       }))
-    }), children]
+    }), React.Children.map(children, (child, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsWebGLOrderContext.ChartsWebGLOrderContext.Provider, {
+      value: index,
+      children: child
+    }))]
   });
 });
 if (process.env.NODE_ENV !== "production") ChartsWebGLLayer.displayName = "ChartsWebGLLayer";

package/ChartsWebGLLayer/ChartsWebGLLayer.mjs

@@ -8,23 +8,67 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { selectorChartSvgHeight, selectorChartSvgWidth, useStore } from '@mui/x-charts/internals';
 import { useDrawingArea, useChartRootRef } from '@mui/x-charts/hooks';
+import { useWebGLResizeObserver } from "../utils/webgl/useWebGLResizeObserver.mjs";
+import { ChartsWebGLContext } from "./ChartsWebGLContext.mjs";
+import { ChartsWebGLOrderContext } from "./ChartsWebGLOrderContext.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ChartsWebGLContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") ChartsWebGLContext.displayName = "ChartsWebGLContext";
-export function useWebGLContext() {
-  return React.useContext(ChartsWebGLContext);
-}
 export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProvider(_ref, ref) {
   let {
       children
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const canvasRef = React.useRef(null);
-  const [context, setContext] = React.useState(null);
+  const [glContext, setGlContext] = React.useState(null);
   const handleRef = useForkRef(canvasRef, ref);
   const chartRoot = useChartRootRef().current;
   const drawingArea = useDrawingArea();
   const [, rerender] = React.useReducer(s => s + 1, 0);
+  const drawEntriesRef = React.useRef([]);
+  const renderScheduledRef = React.useRef(false);
+  const renderAll = React.useCallback(() => {
+    if (!glContext) {
+      return;
+    }
+    renderScheduledRef.current = false;
+    glContext.clearColor(0, 0, 0, 0.0);
+    glContext.clear(glContext.COLOR_BUFFER_BIT);
+    // Sort by order so z-order matches children's position in ChartsWebGLLayer,
+    // stable across remount.
+    const sorted = [...drawEntriesRef.current].sort((a, b) => a.order - b.order);
+    for (const {
+      drawRef
+    } of sorted) {
+      drawRef.current?.();
+    }
+  }, [glContext]);
+  const registerDraw = React.useCallback((drawRef, order) => {
+    const entry = {
+      drawRef,
+      order
+    };
+    drawEntriesRef.current.push(entry);
+    return () => {
+      const idx = drawEntriesRef.current.indexOf(entry);
+      if (idx >= 0) {
+        drawEntriesRef.current.splice(idx, 1);
+      }
+    };
+  }, []);
+  const requestRender = React.useCallback(() => {
+    renderScheduledRef.current = true;
+    // Trigger a re-render so the flush effect runs, even if only a child's state changed
+    rerender();
+  }, []);
+
+  // Centralized resize handling — render all plots on canvas resize
+  useWebGLResizeObserver(glContext, renderAll);
+
+  // Flush scheduled renders after all children's effects have run
+  React.useEffect(() => {
+    if (renderScheduledRef.current) {
+      renderAll();
+    }
+  });
   React.useEffect(() => {
     /* The chart root isn't available on first render because the ref is only set after mounting the root component. */
     if (!chartRoot) {
@@ -40,7 +84,7 @@ export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProv
       // Must prevent default otherwise the context won't be marked as restorable
       // https://registry.khronos.org/webgl/extensions/WEBGL_lose_context/
       event.preventDefault();
-      setContext(null);
+      setGlContext(null);
     };
     const initializeContext = () => {
       const ctx = canvas.getContext('webgl2', {
@@ -52,7 +96,7 @@ export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProv
       if (!ctx) {
         return;
       }
-      setContext(ctx);
+      setGlContext(ctx);
     };
     canvas.addEventListener('webglcontextlost', handleContextLost);
     canvas.addEventListener('webglcontextrestored', initializeContext);
@@ -62,11 +106,16 @@ export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProv
       canvas.removeEventListener('webglcontextrestored', initializeContext);
     };
   }, [chartRoot]);
+  const contextValue = React.useMemo(() => glContext ? {
+    gl: glContext,
+    registerDraw,
+    requestRender
+  } : null, [glContext, registerDraw, requestRender]);
   if (!chartRoot) {
     return null;
   }
   return /*#__PURE__*/_jsxs(ChartsWebGLContext.Provider, {
-    value: context,
+    value: contextValue,
     children: [/*#__PURE__*/_jsx(CanvasPositioner, {
       "aria-hidden": "true",
       children: /*#__PURE__*/_jsx("canvas", _extends({
@@ -80,7 +129,10 @@ export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProv
           height: drawingArea.height
         }
       }))
-    }), children]
+    }), React.Children.map(children, (child, index) => /*#__PURE__*/_jsx(ChartsWebGLOrderContext.Provider, {
+      value: index,
+      children: child
+    }))]
   });
 });
 if (process.env.NODE_ENV !== "production") ChartsWebGLLayer.displayName = "ChartsWebGLLayer";