@mui/x-charts-premium 9.0.2 → 9.0.4

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";

package/ChartsWebGLLayer/ChartsWebGLLayer.types.d.mts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+export type DrawEntry = {
+  drawRef: React.RefObject<(() => void) | null>;
+  order: number;
+};
+export interface ChartsWebGLContextValue {
+  gl: WebGL2RenderingContext;
+  /**
+   * Register a draw callback ref. Returns an unregister function.
+   * Callbacks are sorted by the provided `order` number so z-order follows the children's position
+   * in `ChartsWebGLLayer`, stable across unmount/remount (e.g. toggled via series visibility).
+   * @param {React.RefObject} drawRef A ref object whose current property is a draw callback function. The callback will be called with the WebGL context already set to this layer's canvas. Set to null to temporarily disable drawing without unregistering.
+   * @param {number} order Z-order index. Lower values draw first (behind higher values).
+   * @returns {Function} Unregister function to remove the draw callback from the layer.
+   */
+  registerDraw: (drawRef: React.RefObject<(() => void) | null>, order: number) => () => void;
+  /**
+   * Request a render frame. The layer will clear once, then call all registered draw callbacks in order.
+   */
+  requestRender: () => void;
+}
+export interface UseWebGLLayerValue {
+  gl: WebGL2RenderingContext;
+  registerDraw: (drawRef: React.RefObject<(() => void) | null>) => () => void;
+  requestRender: () => void;
+}

package/ChartsWebGLLayer/ChartsWebGLLayer.types.d.ts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+export type DrawEntry = {
+  drawRef: React.RefObject<(() => void) | null>;
+  order: number;
+};
+export interface ChartsWebGLContextValue {
+  gl: WebGL2RenderingContext;
+  /**
+   * Register a draw callback ref. Returns an unregister function.
+   * Callbacks are sorted by the provided `order` number so z-order follows the children's position
+   * in `ChartsWebGLLayer`, stable across unmount/remount (e.g. toggled via series visibility).
+   * @param {React.RefObject} drawRef A ref object whose current property is a draw callback function. The callback will be called with the WebGL context already set to this layer's canvas. Set to null to temporarily disable drawing without unregistering.
+   * @param {number} order Z-order index. Lower values draw first (behind higher values).
+   * @returns {Function} Unregister function to remove the draw callback from the layer.
+   */
+  registerDraw: (drawRef: React.RefObject<(() => void) | null>, order: number) => () => void;
+  /**
+   * Request a render frame. The layer will clear once, then call all registered draw callbacks in order.
+   */
+  requestRender: () => void;
+}
+export interface UseWebGLLayerValue {
+  gl: WebGL2RenderingContext;
+  registerDraw: (drawRef: React.RefObject<(() => void) | null>) => () => void;
+  requestRender: () => void;
+}

package/ChartsWebGLLayer/ChartsWebGLLayer.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/ChartsWebGLLayer/ChartsWebGLLayer.types.mjs

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

package/ChartsWebGLLayer/ChartsWebGLOrderContext.d.mts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Provides the z-order index for a plot based on its position in `ChartsWebGLLayer`'s children.
+ * `useWebGLLayer` reads this and auto-binds it to `registerDraw` so consumers don't pass it manually.
+ */
+export declare const ChartsWebGLOrderContext: React.Context<number>;

package/ChartsWebGLLayer/ChartsWebGLOrderContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Provides the z-order index for a plot based on its position in `ChartsWebGLLayer`'s children.
+ * `useWebGLLayer` reads this and auto-binds it to `registerDraw` so consumers don't pass it manually.
+ */
+export declare const ChartsWebGLOrderContext: React.Context<number>;

package/ChartsWebGLLayer/ChartsWebGLOrderContext.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsWebGLOrderContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Provides the z-order index for a plot based on its position in `ChartsWebGLLayer`'s children.
+ * `useWebGLLayer` reads this and auto-binds it to `registerDraw` so consumers don't pass it manually.
+ */
+const ChartsWebGLOrderContext = exports.ChartsWebGLOrderContext = /*#__PURE__*/React.createContext(0);
+if (process.env.NODE_ENV !== "production") ChartsWebGLOrderContext.displayName = "ChartsWebGLOrderContext";

package/ChartsWebGLLayer/ChartsWebGLOrderContext.mjs

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * Provides the z-order index for a plot based on its position in `ChartsWebGLLayer`'s children.
+ * `useWebGLLayer` reads this and auto-binds it to `registerDraw` so consumers don't pass it manually.
+ */
+export const ChartsWebGLOrderContext = /*#__PURE__*/React.createContext(0);
+if (process.env.NODE_ENV !== "production") ChartsWebGLOrderContext.displayName = "ChartsWebGLOrderContext";

package/HeatmapPremium/HeatmapPlotPremium.js

@@ -9,7 +9,7 @@ exports.HeatmapPlotPremium = HeatmapPlotPremium;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _internals = require("@mui/x-charts-pro/internals");
-var _HeatmapWebGLRenderer = require("./webgl/HeatmapWebGLRenderer");
+var _HeatmapWebGLPlot = require("./webgl/HeatmapWebGLPlot");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["renderer", "borderRadius"];
 function HeatmapPlotPremium(_ref) {
@@ -19,7 +19,7 @@ function HeatmapPlotPremium(_ref) {
     } = _ref,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   if (renderer === 'webgl') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapWebGLRenderer.HeatmapWebGLRenderer, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapWebGLPlot.HeatmapWebGLPlot, {
       borderRadius: borderRadius
     });
   }

package/HeatmapPremium/HeatmapPlotPremium.mjs

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["renderer", "borderRadius"];
 import { HeatmapSVGPlot } from '@mui/x-charts-pro/internals';
-import { HeatmapWebGLRenderer } from "./webgl/HeatmapWebGLRenderer.mjs";
+import { HeatmapWebGLPlot } from "./webgl/HeatmapWebGLPlot.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function HeatmapPlotPremium(_ref) {
   let {
@@ -13,7 +13,7 @@ export function HeatmapPlotPremium(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   if (renderer === 'webgl') {
-    return /*#__PURE__*/_jsx(HeatmapWebGLRenderer, {
+    return /*#__PURE__*/_jsx(HeatmapWebGLPlot, {
       borderRadius: borderRadius
     });
   }

package/HeatmapPremium/webgl/HeatmapWebGLPlot.js

@@ -10,24 +10,25 @@ exports.HeatmapWebGLPlot = HeatmapWebGLPlot;
 var React = _interopRequireWildcard(require("react"));
 var _hooks = require("@mui/x-charts/hooks");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _ChartsWebGLLayer = require("../../ChartsWebGLLayer/ChartsWebGLLayer");
+var _ChartsWebGLContext = require("../../ChartsWebGLLayer/ChartsWebGLContext");
 var _hooks2 = require("../../hooks");
 var _shaders = require("./shaders");
-var _useWebGLResizeObserver = require("../../utils/webgl/useWebGLResizeObserver");
 var _utils = require("../../utils/webgl/utils");
 var _useHeatmapPlotData = require("./useHeatmapPlotData");
 var _jsxRuntime = require("react/jsx-runtime");
 function HeatmapWebGLPlot({
   borderRadius
 }) {
-  const gl = (0, _ChartsWebGLLayer.useWebGLContext)();
+  const layer = (0, _ChartsWebGLContext.useWebGLLayer)();
   const series = (0, _hooks2.useHeatmapSeriesContext)();
   const seriesToDisplay = series?.series[series.seriesOrder[0]];
-  if (!gl || !seriesToDisplay) {
+  if (!layer || !seriesToDisplay) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(HeatmapWebGLPlotImpl, {
-    gl: gl,
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
     borderRadius: borderRadius ?? 0,
     series: seriesToDisplay
   });
@@ -35,6 +36,8 @@ function HeatmapWebGLPlot({
 function HeatmapWebGLPlotImpl(props) {
   const {
     gl,
+    registerDraw,
+    requestRender,
     borderRadius,
     series
   } = props;
@@ -49,21 +52,16 @@ function HeatmapWebGLPlotImpl(props) {
   });
   const [quadBuffer] = React.useState(() => (0, _utils.uploadQuadBuffer)(gl));
   const dataLength = series.data.length;
-  const renderScheduledRef = React.useRef(false);
-  const render = React.useCallback(() => {
-    renderScheduledRef.current = false;
-
-    // Clear and draw
-    gl.clearColor(0, 0, 0, 0.0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
-  }, [dataLength, gl]);
-  const scheduleRender = React.useCallback(() => {
-    renderScheduledRef.current = true;
-  }, []);
-
-  // On resize render directly to avoid a frame where the canvas is blank
-  (0, _useWebGLResizeObserver.useWebGLResizeObserver)(render);
+  const drawRef = React.useRef(null);
+  React.useEffect(() => {
+    drawRef.current = () => {
+      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    };
+  }, [gl, dataLength]);
+  React.useEffect(() => {
+    const unregister = registerDraw(drawRef);
+    return unregister;
+  }, [registerDraw]);
   React.useEffect(() => {
     /* Enable blending for transparency
      * These are global to the WebGL context and need to be set only once */
@@ -160,26 +158,21 @@ function HeatmapWebGLPlotImpl(props) {
     } else {
       setupBorderRadiusUniform();
     }
-    scheduleRender();
-  }, [gl, program, scheduleRender, seriesBorderRadius, setupBorderRadiusUniform,
+    requestRender();
+  }, [gl, program, requestRender, seriesBorderRadius, setupBorderRadiusUniform,
   // We use the event callback versions here because we only want this effect to trigger when the border radius changes
   setupAttributesEvent, setupUniformsEvent, vertexShader]);
   React.useEffect(() => {
     setupResolutionUniform();
-    scheduleRender();
-  }, [setupResolutionUniform, scheduleRender]);
+    requestRender();
+  }, [setupResolutionUniform, requestRender]);
   React.useEffect(() => {
     setupRectDimensionsUniform();
-    scheduleRender();
-  }, [setupRectDimensionsUniform, scheduleRender]);
+    requestRender();
+  }, [setupRectDimensionsUniform, requestRender]);
   React.useEffect(() => {
     setupAttributes();
-    scheduleRender();
-  }, [scheduleRender, setupAttributes]);
-  React.useEffect(() => {
-    if (renderScheduledRef.current) {
-      render();
-    }
-  });
+    requestRender();
+  }, [requestRender, setupAttributes]);
   return null;
 }

package/HeatmapPremium/webgl/HeatmapWebGLPlot.mjs

@@ -3,24 +3,25 @@
 import * as React from 'react';
 import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useWebGLContext } from "../../ChartsWebGLLayer/ChartsWebGLLayer.mjs";
+import { useWebGLLayer } from "../../ChartsWebGLLayer/ChartsWebGLContext.mjs";
 import { useHeatmapSeriesContext } from "../../hooks/index.mjs";
 import { heatmapFragmentShaderSourceNoBorderRadius, heatmapFragmentShaderSourceWithBorderRadius, heatmapVertexShaderSource } from "./shaders.mjs";
-import { useWebGLResizeObserver } from "../../utils/webgl/useWebGLResizeObserver.mjs";
 import { attachShader, bindQuadBuffer, compileShader, logWebGLErrors, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
 import { useHeatmapPlotData } from "./useHeatmapPlotData.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function HeatmapWebGLPlot({
   borderRadius
 }) {
-  const gl = useWebGLContext();
+  const layer = useWebGLLayer();
   const series = useHeatmapSeriesContext();
   const seriesToDisplay = series?.series[series.seriesOrder[0]];
-  if (!gl || !seriesToDisplay) {
+  if (!layer || !seriesToDisplay) {
     return null;
   }
   return /*#__PURE__*/_jsx(HeatmapWebGLPlotImpl, {
-    gl: gl,
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
     borderRadius: borderRadius ?? 0,
     series: seriesToDisplay
   });
@@ -28,6 +29,8 @@ export function HeatmapWebGLPlot({
 function HeatmapWebGLPlotImpl(props) {
   const {
     gl,
+    registerDraw,
+    requestRender,
     borderRadius,
     series
   } = props;
@@ -42,21 +45,16 @@ function HeatmapWebGLPlotImpl(props) {
   });
   const [quadBuffer] = React.useState(() => uploadQuadBuffer(gl));
   const dataLength = series.data.length;
-  const renderScheduledRef = React.useRef(false);
-  const render = React.useCallback(() => {
-    renderScheduledRef.current = false;
-
-    // Clear and draw
-    gl.clearColor(0, 0, 0, 0.0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
-  }, [dataLength, gl]);
-  const scheduleRender = React.useCallback(() => {
-    renderScheduledRef.current = true;
-  }, []);
-
-  // On resize render directly to avoid a frame where the canvas is blank
-  useWebGLResizeObserver(render);
+  const drawRef = React.useRef(null);
+  React.useEffect(() => {
+    drawRef.current = () => {
+      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    };
+  }, [gl, dataLength]);
+  React.useEffect(() => {
+    const unregister = registerDraw(drawRef);
+    return unregister;
+  }, [registerDraw]);
   React.useEffect(() => {
     /* Enable blending for transparency
      * These are global to the WebGL context and need to be set only once */
@@ -153,26 +151,21 @@ function HeatmapWebGLPlotImpl(props) {
     } else {
       setupBorderRadiusUniform();
     }
-    scheduleRender();
-  }, [gl, program, scheduleRender, seriesBorderRadius, setupBorderRadiusUniform,
+    requestRender();
+  }, [gl, program, requestRender, seriesBorderRadius, setupBorderRadiusUniform,
   // We use the event callback versions here because we only want this effect to trigger when the border radius changes
   setupAttributesEvent, setupUniformsEvent, vertexShader]);
   React.useEffect(() => {
     setupResolutionUniform();
-    scheduleRender();
-  }, [setupResolutionUniform, scheduleRender]);
+    requestRender();
+  }, [setupResolutionUniform, requestRender]);
   React.useEffect(() => {
     setupRectDimensionsUniform();
-    scheduleRender();
-  }, [setupRectDimensionsUniform, scheduleRender]);
+    requestRender();
+  }, [setupRectDimensionsUniform, requestRender]);
   React.useEffect(() => {
     setupAttributes();
-    scheduleRender();
-  }, [scheduleRender, setupAttributes]);
-  React.useEffect(() => {
-    if (renderScheduledRef.current) {
-      render();
-    }
-  });
+    requestRender();
+  }, [requestRender, setupAttributes]);
   return null;
 }

package/HeatmapPremium/webgl/shaders.d.mts

@@ -1,3 +1,3 @@
-export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
+export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
 export declare const heatmapFragmentShaderSourceNoBorderRadius = "\n    precision mediump float;\n    \n    varying vec4 v_color;\n    \n    void main() {\n      gl_FragColor = v_color;\n    }\n  ";
 export declare const heatmapFragmentShaderSourceWithBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform float u_borderRadius;\n\n    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {\n      vec2 q = abs(pos) - half_size + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      // Calculate distance from rounded rectangle edge\n      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);\n      \n      // Create smooth alpha based on distance\n      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);\n      \n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/HeatmapPremium/webgl/shaders.d.ts

@@ -1,3 +1,3 @@
-export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
+export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
 export declare const heatmapFragmentShaderSourceNoBorderRadius = "\n    precision mediump float;\n    \n    varying vec4 v_color;\n    \n    void main() {\n      gl_FragColor = v_color;\n    }\n  ";
 export declare const heatmapFragmentShaderSourceWithBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform float u_borderRadius;\n\n    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {\n      vec2 q = abs(pos) - half_size + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      // Calculate distance from rounded rectangle edge\n      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);\n      \n      // Create smooth alpha based on distance\n      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);\n      \n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/HeatmapPremium/webgl/shaders.js

@@ -21,7 +21,7 @@ const heatmapVertexShaderSource = exports.heatmapVertexShaderSource = /* glsl */
     
     // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/
     vec3 adjust_saturation(vec3 color, float value) {
-      // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance
       const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
       vec3 grayscale = vec3(dot(color, luminosityFactor));
     

package/HeatmapPremium/webgl/shaders.mjs

@@ -15,7 +15,7 @@ export const heatmapVertexShaderSource = /* glsl */`
     
     // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/
     vec3 adjust_saturation(vec3 color, float value) {
-      // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance
       const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
       vec3 grayscale = vec3(dot(color, luminosityFactor));
     

package/RadialBarChart/seriesConfig/axisTooltipGetter.d.mts

@@ -0,0 +1,2 @@
+import type { AxisTooltipGetter } from '@mui/x-charts/internals';
+export declare const axisTooltipGetter: AxisTooltipGetter<'radialBar', 'rotation' | 'radius'>;

package/RadialBarChart/seriesConfig/axisTooltipGetter.d.ts

@@ -0,0 +1,2 @@
+import type { AxisTooltipGetter } from '@mui/x-charts/internals';
+export declare const axisTooltipGetter: AxisTooltipGetter<'radialBar', 'rotation' | 'radius'>;

package/RadialBarChart/seriesConfig/axisTooltipGetter.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.axisTooltipGetter = void 0;
+const axisTooltipGetter = series => {
+  return Object.values(series).map(s => ({
+    direction: 'rotation',
+    axisId: 'rotationAxisId' in s ? s.rotationAxisId : undefined
+  }));
+};
+exports.axisTooltipGetter = axisTooltipGetter;

package/RadialBarChart/seriesConfig/axisTooltipGetter.mjs

@@ -0,0 +1,6 @@
+export const axisTooltipGetter = series => {
+  return Object.values(series).map(s => ({
+    direction: 'rotation',
+    axisId: 'rotationAxisId' in s ? s.rotationAxisId : undefined
+  }));
+};

package/RadialBarChart/seriesConfig/descriptionGetter.d.mts

@@ -0,0 +1,3 @@
+import { type DescriptionGetter } from '@mui/x-charts/internals';
+declare const descriptionGetter: DescriptionGetter<'radialBar'>;
+export default descriptionGetter;

package/RadialBarChart/seriesConfig/descriptionGetter.d.ts

@@ -0,0 +1,3 @@
+import { type DescriptionGetter } from '@mui/x-charts/internals';
+declare const descriptionGetter: DescriptionGetter<'radialBar'>;
+export default descriptionGetter;

package/RadialBarChart/seriesConfig/descriptionGetter.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _internals = require("@mui/x-charts/internals");
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    rotationAxis,
+    localeText
+  } = params;
+  const label = (0, _internals.getLabel)(series.label, 'tooltip');
+  const dataIndex = identifier.dataIndex;
+  const value = series.data[dataIndex] ?? null;
+  const categoryValue = rotationAxis.data?.[dataIndex] ?? null;
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex
+  });
+  const formattedCategory = rotationAxis.valueFormatter?.(categoryValue, {
+    location: 'tooltip',
+    scale: rotationAxis.scale
+  });
+  return localeText.barDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    categoryValue,
+    formattedCategoryValue: formattedCategory ?? '',
+    seriesLabel: label
+  });
+};
+var _default = exports.default = descriptionGetter;

package/RadialBarChart/seriesConfig/descriptionGetter.mjs

@@ -0,0 +1,28 @@
+import { getLabel } from '@mui/x-charts/internals';
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    rotationAxis,
+    localeText
+  } = params;
+  const label = getLabel(series.label, 'tooltip');
+  const dataIndex = identifier.dataIndex;
+  const value = series.data[dataIndex] ?? null;
+  const categoryValue = rotationAxis.data?.[dataIndex] ?? null;
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex
+  });
+  const formattedCategory = rotationAxis.valueFormatter?.(categoryValue, {
+    location: 'tooltip',
+    scale: rotationAxis.scale
+  });
+  return localeText.barDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    categoryValue,
+    formattedCategoryValue: formattedCategory ?? '',
+    seriesLabel: label
+  });
+};
+export default descriptionGetter;

package/RadialBarChart/seriesConfig/extremums.d.mts

@@ -0,0 +1,3 @@
+import { type PolarExtremumGetter } from '@mui/x-charts/internals';
+export declare const rotationExtremumGetter: PolarExtremumGetter<'radialBar'>;
+export declare const radiusExtremumGetter: PolarExtremumGetter<'radialBar'>;

package/RadialBarChart/seriesConfig/extremums.d.ts

@@ -0,0 +1,3 @@
+import { type PolarExtremumGetter } from '@mui/x-charts/internals';
+export declare const rotationExtremumGetter: PolarExtremumGetter<'radialBar'>;
+export declare const radiusExtremumGetter: PolarExtremumGetter<'radialBar'>;