@mui/x-charts-premium 8.26.0 → 9.0.0-alpha.0

package/esm/HeatmapPremium/useHeatmapPremiumProps.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["chartDataProviderProProps", "heatmapPlotProps"];
+import { useHeatmapProps } from '@mui/x-charts-pro/internals';
+export function useHeatmapPremiumProps(props) {
+  const _useHeatmapProps = useHeatmapProps(props),
+    {
+      chartDataProviderProProps,
+      heatmapPlotProps
+    } = _useHeatmapProps,
+    other = _objectWithoutPropertiesLoose(_useHeatmapProps, _excluded);
+  const heatmapPlotPremiumProps = _extends({}, heatmapPlotProps, {
+    renderer: props.renderer ?? 'svg-single'
+  });
+  return _extends({}, other, {
+    heatmapPlotPremiumProps,
+    chartDataProviderPremiumProps: chartDataProviderProProps
+  });
+}

package/esm/HeatmapPremium/webgl/HeatmapWebGLPlot.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare function HeatmapWebGLPlot({
+  borderRadius
+}: {
+  borderRadius?: number;
+}): React.JSX.Element | null;

package/esm/HeatmapPremium/webgl/HeatmapWebGLPlot.js

@@ -0,0 +1,178 @@
+'use client';
+
+import * as React from 'react';
+import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks';
+import { useWebGLContext } from '@mui/x-charts/internals';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useHeatmapSeriesContext } from "../../hooks/index.js";
+import { heatmapFragmentShaderSourceNoBorderRadius, heatmapFragmentShaderSourceWithBorderRadius, heatmapVertexShaderSource } from "./shaders.js";
+import { useWebGLResizeObserver } from "../../utils/webgl/useWebGLResizeObserver.js";
+import { attachShader, bindQuadBuffer, compileShader, logWebGLErrors, uploadQuadBuffer } from "./utils.js";
+import { useHeatmapPlotData } from "./useHeatmapPlotData.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HeatmapWebGLPlot({
+  borderRadius
+}) {
+  const gl = useWebGLContext();
+  const series = useHeatmapSeriesContext();
+  const seriesToDisplay = series?.series[series.seriesOrder[0]];
+  if (!gl || !seriesToDisplay) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(HeatmapWebGLPlotImpl, {
+    gl: gl,
+    borderRadius: borderRadius ?? 0,
+    series: seriesToDisplay
+  });
+}
+function HeatmapWebGLPlotImpl(props) {
+  const {
+    gl,
+    borderRadius,
+    series
+  } = props;
+  const drawingArea = useDrawingArea();
+  const xScale = useXScale();
+  const yScale = useYScale();
+  const [vertexShader] = React.useState(() => compileShader(gl, heatmapVertexShaderSource, gl.VERTEX_SHADER));
+  const [program] = React.useState(() => {
+    const p = gl.createProgram();
+    gl.attachShader(p, vertexShader);
+    return p;
+  });
+  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);
+  React.useEffect(() => {
+    /* Enable blending for transparency
+     * These are global to the WebGL context and need to be set only once */
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  }, [gl]);
+  const width = xScale.bandwidth();
+  const height = yScale.bandwidth();
+
+  // A border radius cannot be larger than half the width or height of the rectangle
+  const seriesBorderRadius = Math.min(borderRadius ?? 0, width / 2, height / 2);
+  const lastSeriesBorderRadiusRef = React.useRef(seriesBorderRadius > 0 ? 0 : 1);
+  const setupResolutionUniform = React.useCallback(() => {
+    gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), drawingArea.width, drawingArea.height);
+  }, [drawingArea.height, drawingArea.width, gl, program]);
+  const setupBorderRadiusUniform = React.useCallback(() => {
+    gl.uniform1f(gl.getUniformLocation(program, 'u_borderRadius'), seriesBorderRadius);
+  }, [gl, program, seriesBorderRadius]);
+  const setupRectDimensionsUniform = React.useCallback(() => {
+    gl.uniform2f(gl.getUniformLocation(program, 'u_dimensions'), width, height);
+  }, [gl, height, program, width]);
+  const setupUniformsEvent = useEventCallback(() => {
+    bindQuadBuffer(gl, program, quadBuffer);
+    setupBorderRadiusUniform();
+    setupResolutionUniform();
+    setupRectDimensionsUniform();
+  });
+  const plotData = useHeatmapPlotData(drawingArea, series, xScale, yScale);
+  const setupAttributes = React.useCallback(() => {
+    const {
+      centers,
+      colors,
+      saturations
+    } = plotData;
+
+    // Upload rectangle centers
+    const centerBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, centerBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, centers, gl.STATIC_DRAW);
+    const aCenter = gl.getAttribLocation(program, 'a_center');
+    gl.enableVertexAttribArray(aCenter);
+    gl.vertexAttribPointer(aCenter, 2, gl.FLOAT, false, 0, 0);
+
+    // This makes the attribute instanced (one value per rectangle, not per vertex)
+    gl.vertexAttribDivisor(aCenter, 1);
+
+    // Upload colors
+    const colorBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+    const aColor = gl.getAttribLocation(program, 'a_color');
+    gl.enableVertexAttribArray(aColor);
+    gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(aColor, 1);
+
+    // Upload saturations
+    const saturationBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, saturationBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, saturations, gl.STATIC_DRAW);
+    const aSaturation = gl.getAttribLocation(program, 'a_saturation');
+    gl.enableVertexAttribArray(aSaturation);
+    gl.vertexAttribPointer(aSaturation, 1, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(aSaturation, 1);
+  }, [gl, plotData, program]);
+  const setupAttributesEvent = useEventCallback(() => setupAttributes());
+  React.useEffect(() => {
+    const shouldAttachNewShader = lastSeriesBorderRadiusRef.current > 0 !== seriesBorderRadius > 0;
+    lastSeriesBorderRadiusRef.current = seriesBorderRadius;
+    if (shouldAttachNewShader) {
+      const shaderSource = seriesBorderRadius > 0 ? heatmapFragmentShaderSourceWithBorderRadius : heatmapFragmentShaderSourceNoBorderRadius;
+      gl.getAttachedShaders(program)?.forEach(shader => {
+        const shaderType = gl.getShaderParameter(shader, gl.SHADER_TYPE);
+        if (shaderType === gl.FRAGMENT_SHADER) {
+          gl.detachShader(program, shader);
+          gl.deleteShader(shader);
+        }
+      });
+      const fragmentShader = attachShader(gl, program, shaderSource, gl.FRAGMENT_SHADER);
+      gl.linkProgram(program);
+
+      // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error(`Program linking failed: ${gl.getProgramInfoLog(program)}`);
+        console.error(`Vertex shader info-log: ${gl.getShaderInfoLog(vertexShader)}`);
+        console.error(`Fragment shader info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
+      }
+
+      // Not a hook
+      // eslint-disable-next-line react-compiler/react-compiler
+      gl.useProgram(program);
+      logWebGLErrors(gl);
+      setupUniformsEvent();
+      setupAttributesEvent();
+    } else {
+      setupBorderRadiusUniform();
+    }
+    scheduleRender();
+  }, [gl, program, scheduleRender, 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]);
+  React.useEffect(() => {
+    setupRectDimensionsUniform();
+    scheduleRender();
+  }, [setupRectDimensionsUniform, scheduleRender]);
+  React.useEffect(() => {
+    setupAttributes();
+    scheduleRender();
+  }, [scheduleRender, setupAttributes]);
+  React.useEffect(() => {
+    if (renderScheduledRef.current) {
+      render();
+    }
+  });
+  return null;
+}

package/esm/HeatmapPremium/webgl/HeatmapWebGLRenderer.d.ts

@@ -0,0 +1,4 @@
+import { type HeatmapRendererPlotProps } from '@mui/x-charts-pro/internals';
+export declare function HeatmapWebGLRenderer({
+  borderRadius
+}: HeatmapRendererPlotProps): import("react/jsx-runtime").JSX.Element;

package/esm/HeatmapPremium/webgl/HeatmapWebGLRenderer.js

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import { useRegisterPointerInteractions, WebGLProvider } from '@mui/x-charts/internals';
+import { selectorHeatmapItemAtPosition } from '@mui/x-charts-pro/internals';
+import { HeatmapWebGLPlot } from "./HeatmapWebGLPlot.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HeatmapWebGLRenderer({
+  borderRadius
+}) {
+  useRegisterPointerInteractions(selectorHeatmapItemAtPosition);
+  return /*#__PURE__*/_jsx(WebGLProvider, {
+    children: /*#__PURE__*/_jsx(HeatmapWebGLPlot, {
+      borderRadius: borderRadius
+    })
+  });
+}

package/esm/HeatmapPremium/webgl/shaders.d.ts

@@ -0,0 +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 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/esm/HeatmapPremium/webgl/shaders.js

@@ -0,0 +1,71 @@
+// language=Glsl
+export const heatmapVertexShaderSource = /* glsl */`
+    precision mediump float;
+    
+    attribute vec2 a_position;
+    attribute vec2 a_center;
+    attribute vec4 a_color;
+    attribute float a_saturation;
+    
+    varying vec4 v_color;
+    varying vec2 v_pos;
+    
+    uniform vec2 u_dimensions;
+    uniform vec2 u_resolution;
+    
+    // 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
+      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
+      vec3 grayscale = vec3(dot(color, luminosityFactor));
+    
+      return mix(grayscale, color, 1.0 + value);
+    }
+    
+    void main() {
+      // Convert from pixels to clip space (-1 to 1)
+      vec2 position = a_center + a_position * u_dimensions / 2.0;
+      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;
+      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+      
+      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);
+      v_pos = a_position * u_dimensions / 2.0;
+    }
+  `;
+
+// language=Glsl
+export const heatmapFragmentShaderSourceNoBorderRadius = /* glsl */`
+    precision mediump float;
+    
+    varying vec4 v_color;
+    
+    void main() {
+      gl_FragColor = v_color;
+    }
+  `;
+
+// language=Glsl
+export const heatmapFragmentShaderSourceWithBorderRadius = /* glsl */`
+    precision mediump float;
+
+    varying vec4 v_color;
+    varying vec2 v_pos;
+
+    uniform vec2 u_dimensions;
+    uniform float u_borderRadius;
+
+    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {
+      vec2 q = abs(pos) - half_size + radius;
+      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
+    }
+
+    void main() {
+      // Calculate distance from rounded rectangle edge
+      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);
+      
+      // Create smooth alpha based on distance
+      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);
+      
+      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);
+    }
+  `;

package/esm/HeatmapPremium/webgl/useHeatmapPlotData.d.ts

@@ -0,0 +1,12 @@
+import { type ScaleBand } from '@mui/x-charts-vendor/d3-scale';
+import { type DefaultizedHeatmapSeriesType } from '@mui/x-charts-pro/models';
+import { type ChartDrawingArea } from '@mui/x-charts/hooks';
+export declare function useHeatmapPlotData(drawingArea: ChartDrawingArea, series: DefaultizedHeatmapSeriesType, xScale: ScaleBand<{
+  toString(): string;
+}>, yScale: ScaleBand<{
+  toString(): string;
+}>): {
+  centers: Float32Array<ArrayBuffer>;
+  colors: Float32Array<ArrayBuffer>;
+  saturations: Float32Array<ArrayBuffer>;
+};

package/esm/HeatmapPremium/webgl/useHeatmapPlotData.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useZColorScale } from '@mui/x-charts/hooks';
+import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback, useStore } from '@mui/x-charts/internals';
+import { parseColor } from "../../utils/webgl/parseColor.js";
+export function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
+  const width = xScale.bandwidth();
+  const height = yScale.bandwidth();
+  const colorScale = useZColorScale();
+  const store = useStore();
+  const isHighlighted = store.use(selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(selectorChartsIsFadedCallback);
+  return React.useMemo(() => {
+    const centers = new Float32Array(series.data.length * 2);
+    const colors = new Float32Array(series.data.length * 4);
+    const saturations = new Float32Array(series.data.length);
+    const xDomain = xScale.domain();
+    const yDomain = yScale.domain();
+    for (let dataIndex = 0; dataIndex < series.data.length; dataIndex += 1) {
+      const [xIndex, yIndex, value] = series.data[dataIndex];
+      const x = xScale(xDomain[xIndex]);
+      const y = yScale(yDomain[yIndex]);
+      const color = colorScale?.(value);
+      if (x === undefined || y === undefined || !color) {
+        continue;
+      }
+      centers[dataIndex * 2] = x + width / 2 - drawingArea.left;
+      centers[dataIndex * 2 + 1] = y + height / 2 - drawingArea.top;
+      const rgbColor = parseColor(color);
+      colors[dataIndex * 4] = rgbColor[0];
+      colors[dataIndex * 4 + 1] = rgbColor[1];
+      colors[dataIndex * 4 + 2] = rgbColor[2];
+      colors[dataIndex * 4 + 3] = 1.0;
+      if (isHighlighted({
+        seriesId: series.id,
+        dataIndex
+      })) {
+        saturations[dataIndex] = 0.2;
+      } else if (isFaded({
+        seriesId: series.id,
+        dataIndex
+      })) {
+        saturations[dataIndex] = -0.2;
+      }
+    }
+    return {
+      centers,
+      colors,
+      saturations
+    };
+  }, [colorScale, drawingArea.left, drawingArea.top, height, isFaded, isHighlighted, series.data, series.id, width, xScale, yScale]);
+}

package/esm/HeatmapPremium/webgl/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function compileShader(gl: WebGL2RenderingContext, shaderSource: string, shaderType: WebGL2RenderingContext['FRAGMENT_SHADER'] | WebGL2RenderingContext['VERTEX_SHADER']): WebGLShader;
+export declare function uploadQuadBuffer(gl: WebGL2RenderingContext): WebGLBuffer;
+export declare function bindQuadBuffer(gl: WebGL2RenderingContext, program: WebGLProgram, quadBuffer: WebGLBuffer): void;
+export declare function attachShader(gl: WebGL2RenderingContext, program: WebGLProgram, shaderSource: string, shaderType: WebGL2RenderingContext['FRAGMENT_SHADER'] | WebGL2RenderingContext['VERTEX_SHADER']): WebGLShader;
+/**
+ * Logs WebGL errors to the console in development mode.
+ */
+export declare function logWebGLErrors(gl: WebGL2RenderingContext): void;

package/esm/HeatmapPremium/webgl/utils.js

@@ -0,0 +1,41 @@
+export function compileShader(gl, shaderSource, shaderType) {
+  const shader = gl.createShader(shaderType);
+  gl.shaderSource(shader, shaderSource);
+  gl.compileShader(shader);
+  return shader;
+}
+export function uploadQuadBuffer(gl) {
+  const quadVertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, quadVertices, gl.STATIC_DRAW);
+  return buffer;
+}
+export function bindQuadBuffer(gl, program, quadBuffer) {
+  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+  const aPosition = gl.getAttribLocation(program, 'a_position');
+  gl.enableVertexAttribArray(aPosition);
+  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
+}
+export function attachShader(gl, program, shaderSource, shaderType) {
+  const shader = gl.createShader(shaderType);
+  gl.shaderSource(shader, shaderSource);
+  gl.compileShader(shader);
+  gl.attachShader(program, shader);
+  return shader;
+}
+
+/**
+ * Logs WebGL errors to the console in development mode.
+ */
+export function logWebGLErrors(gl) {
+  /* Only log errors in dev because it has a performance cost:
+   * https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#avoid_blocking_api_calls_in_production */
+  if (process.env.NODE_ENV !== 'production') {
+    let error = gl.getError();
+    while (error !== gl.NO_ERROR) {
+      console.error('WebGL error:', error);
+      error = gl.getError();
+    }
+  }
+}

package/esm/index.d.ts

@@ -22,6 +22,8 @@ export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export * from '@mui/x-charts-pro/Heatmap';
+export { ChartsContainerPro } from '@mui/x-charts-pro/ChartsContainerPro';
+export type { ChartsContainerProProps } from '@mui/x-charts-pro/ChartsContainerPro';
 export { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
 export type { ChartContainerProProps } from '@mui/x-charts-pro/ChartContainerPro';
 export * from '@mui/x-charts-pro/ChartDataProviderPro';
@@ -41,5 +43,7 @@ export * from "./models/index.js";
 export * from "./plugins/index.js";
 export * from "./ChartsRenderer/index.js";
 export * from "./ChartDataProviderPremium/index.js";
+export * from "./ChartsContainerPremium/index.js";
 export * from "./ChartContainerPremium/index.js";
-export * from "./BarChartPremium/index.js";
+export * from "./BarChartPremium/index.js";
+export * from "./HeatmapPremium/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-premium v8.26.0
+ * @mui/x-charts-premium v9.0.0-alpha.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -33,6 +33,7 @@ export * from '@mui/x-charts/ChartsLabel';
 
 // Pro components
 export * from '@mui/x-charts-pro/Heatmap';
+export { ChartsContainerPro } from '@mui/x-charts-pro/ChartsContainerPro';
 export { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
 export * from '@mui/x-charts-pro/ChartDataProviderPro';
 export * from '@mui/x-charts-pro/ScatterChartPro';
@@ -57,5 +58,7 @@ export * from "./plugins/index.js";
 // Premium components
 export * from "./ChartsRenderer/index.js";
 export * from "./ChartDataProviderPremium/index.js";
+export * from "./ChartsContainerPremium/index.js";
 export * from "./ChartContainerPremium/index.js";
-export * from "./BarChartPremium/index.js";
+export * from "./BarChartPremium/index.js";
+export * from "./HeatmapPremium/index.js";

package/esm/internals/plugins/allPlugins.d.ts

@@ -1,6 +1,6 @@
 import { type ChartSeriesType, type ConvertSignaturesIntoPlugins, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartZAxisSignature, type UseChartHighlightSignature, type UseChartPolarAxisSignature, type UseChartBrushSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature, type UseChartProZoomSignature } from '@mui/x-charts-pro/plugins';
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature<TSeries>, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
 export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartBrushSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartTooltipSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartVisibilityManagerSignature<any>>)[];
 export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartProZoomSignature, UseChartProExportSignature];

package/esm/models/seriesType/rangeBar.d.ts

@@ -2,7 +2,7 @@ import { type CartesianSeriesType, type CommonDefaultizedProps, type CommonSerie
 import { type DefaultizedProps } from '@mui/x-internals/types';
 /** [start, end] */
 export type RangeBarValueType = [number, number];
-export interface RangeBarSeriesType extends CommonSeriesType<RangeBarValueType | null>, CartesianSeriesType {
+export interface RangeBarSeriesType extends CommonSeriesType<RangeBarValueType | null, 'rangeBar'>, CartesianSeriesType {
   type: 'rangeBar';
   /**
    * Data associated to each range bar.

package/esm/typeOverloads/modules.d.ts

@@ -1,5 +1,5 @@
 import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
-import type { SeriesColor } from '@mui/x-charts/internals';
+import type { CommonHighlightScope, SeriesColor } from '@mui/x-charts/internals';
 import type { RangeBarValueType, RangeBarSeriesType } from "../models/index.js";
 import type { DefaultizedRangeBarSeriesType, RangeBarItemIdentifier } from "../models/seriesType/rangeBar.js";
 import type { BarSeries } from "../BarChart/index.js";
@@ -17,6 +17,7 @@ declare module '@mui/x-charts/internals' {
       itemIdentifierWithData: RangeBarItemIdentifier;
       valueType: RangeBarValueType | null;
       axisType: 'cartesian';
+      highlightScope: CommonHighlightScope;
     };
   }
 }

package/esm/utils/webgl/parseColor.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Parse color string to RGBA object. Each channel is normalized to [0, 1].
+ * This function does not work in SSR.
+ */
+export declare function parseColor(color: string): [number, number, number, number];

package/esm/utils/webgl/parseColor.js

@@ -0,0 +1,78 @@
+const colorCache = new Map();
+
+/**
+ * Parse color string to RGBA object. Each channel is normalized to [0, 1].
+ * This function does not work in SSR.
+ */
+export function parseColor(color) {
+  const cached = colorCache.get(color);
+  if (cached) {
+    return cached;
+  }
+  let result = parseColorUsingRegex(color);
+  if (result == null) {
+    result = parseRgbaColor(color);
+  }
+  if (result == null) {
+    result = parseColorUsingCanvas(color);
+  }
+  colorCache.set(color, result);
+  return result;
+}
+
+// Validates hex color formats (#RGB, #RRGGBB, #RRGGBBAA)
+const hexRegex = /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$|^[0-9A-Fa-f]{8}$/;
+function parseColorUsingRegex(color) {
+  if (color.startsWith('#')) {
+    color = color.slice(1);
+  }
+  if (!hexRegex.test(color)) {
+    return null; // Invalid hex color
+  }
+  if (color.length === 3) {
+    color = color.split('').map(char => char + char).join('');
+  }
+  const r = parseInt(color.slice(0, 2), 16) / 255;
+  const g = parseInt(color.slice(2, 4), 16) / 255;
+  const b = parseInt(color.slice(4, 6), 16) / 255;
+  const a = color.length === 8 ? parseInt(color.substring(6, 8), 16) / 255 : 1;
+  return [r, g, b, a];
+}
+
+// Parses rgb() and rgba() formats
+const rgbaRegex = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/i;
+function parseRgbaColor(color) {
+  const match = color.match(rgbaRegex);
+  if (!match) {
+    return null;
+  }
+  const r = parseInt(match[1], 10);
+  const g = parseInt(match[2], 10);
+  const b = parseInt(match[3], 10);
+  const a = match[4] !== undefined ? parseFloat(match[4]) : 1;
+  if (r > 255 || g > 255 || b > 255) {
+    return null;
+  }
+  if (a < 0 || a > 1) {
+    return null;
+  }
+  return [r / 255, g / 255, b / 255, a];
+}
+let canvas;
+function parseColorUsingCanvas(color) {
+  if (!canvas) {
+    if ('OffscreenCanvas' in window) {
+      canvas = new OffscreenCanvas(1, 1);
+    } else {
+      canvas = document.createElement('canvas');
+      canvas.width = 1;
+      canvas.height = 1;
+    }
+  }
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+  const result = [r / 255, g / 255, b / 255, a / 255];
+  return result;
+}

package/esm/utils/webgl/useWebGLResizeObserver.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This hook calls the provided `onResize` callback whenever the WebGL canvas is resized.
+ * It detects size changes when the element is resized, the browser zoom updates or the device pixel ratio changes.
+ * These last two conditions aren't supported by Safari, so `onResize` won't be called in these cases on Safari.
+ * @param onResize
+ */
+export declare function useWebGLResizeObserver(onResize: () => void): void;

package/esm/utils/webgl/useWebGLResizeObserver.js

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+import { useWebGLContext } from '@mui/x-charts/internals';
+function getDevicePixelContentBoxSize(entry) {
+  // Safari does not support devicePixelContentBoxSize
+  if (entry.devicePixelContentBoxSize) {
+    return {
+      width: entry.devicePixelContentBoxSize[0].inlineSize,
+      height: entry.devicePixelContentBoxSize[0].blockSize
+    };
+  }
+  // These values not correct, but they're as close as you can get in Safari
+  return {
+    width: entry.contentBoxSize[0].inlineSize * devicePixelRatio,
+    height: entry.contentBoxSize[0].blockSize * devicePixelRatio
+  };
+}
+
+/**
+ * This hook calls the provided `onResize` callback whenever the WebGL canvas is resized.
+ * It detects size changes when the element is resized, the browser zoom updates or the device pixel ratio changes.
+ * These last two conditions aren't supported by Safari, so `onResize` won't be called in these cases on Safari.
+ * @param onResize
+ */
+export function useWebGLResizeObserver(onResize) {
+  const gl = useWebGLContext();
+  React.useEffect(() => {
+    const canvas = gl?.canvas;
+    if (!(canvas instanceof HTMLCanvasElement)) {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const {
+          width,
+          height
+        } = getDevicePixelContentBoxSize(entry);
+        canvas.width = Math.max(1, width);
+        canvas.height = Math.max(1, height);
+
+        // Update WebGL viewport
+        gl?.viewport(0, 0, width, height);
+        onResize();
+      }
+    });
+    try {
+      /* We use 'device-pixel-content-box' to observe the size of the canvas in device pixels, rather than CSS pixels.
+       * This ensures that we correctly handle high-DPI displays and browser zoom.
+       * However, this is not supported in Safari, which throws, so we fall back to 'content-box'.
+       * WebKit Bug: https://www2.webkit.org/show_bug.cgi?id=219005 */
+      observer.observe(canvas, {
+        box: 'device-pixel-content-box'
+      });
+    } catch {
+      observer.observe(canvas, {
+        box: 'content-box'
+      });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [gl, gl?.canvas, onResize]);
+}