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

package/HeatmapPremium/webgl/HeatmapWebGLPlot.js

@@ -0,0 +1,185 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapWebGLPlot = HeatmapWebGLPlot;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _internals = require("@mui/x-charts/internals");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _hooks2 = require("../../hooks");
+var _shaders = require("./shaders");
+var _useWebGLResizeObserver = require("../../utils/webgl/useWebGLResizeObserver");
+var _utils = require("./utils");
+var _useHeatmapPlotData = require("./useHeatmapPlotData");
+var _jsxRuntime = require("react/jsx-runtime");
+function HeatmapWebGLPlot({
+  borderRadius
+}) {
+  const gl = (0, _internals.useWebGLContext)();
+  const series = (0, _hooks2.useHeatmapSeriesContext)();
+  const seriesToDisplay = series?.series[series.seriesOrder[0]];
+  if (!gl || !seriesToDisplay) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HeatmapWebGLPlotImpl, {
+    gl: gl,
+    borderRadius: borderRadius ?? 0,
+    series: seriesToDisplay
+  });
+}
+function HeatmapWebGLPlotImpl(props) {
+  const {
+    gl,
+    borderRadius,
+    series
+  } = props;
+  const drawingArea = (0, _hooks.useDrawingArea)();
+  const xScale = (0, _hooks.useXScale)();
+  const yScale = (0, _hooks.useYScale)();
+  const [vertexShader] = React.useState(() => (0, _utils.compileShader)(gl, _shaders.heatmapVertexShaderSource, gl.VERTEX_SHADER));
+  const [program] = React.useState(() => {
+    const p = gl.createProgram();
+    gl.attachShader(p, vertexShader);
+    return p;
+  });
+  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);
+  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 = (0, _useEventCallback.default)(() => {
+    (0, _utils.bindQuadBuffer)(gl, program, quadBuffer);
+    setupBorderRadiusUniform();
+    setupResolutionUniform();
+    setupRectDimensionsUniform();
+  });
+  const plotData = (0, _useHeatmapPlotData.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 = (0, _useEventCallback.default)(() => setupAttributes());
+  React.useEffect(() => {
+    const shouldAttachNewShader = lastSeriesBorderRadiusRef.current > 0 !== seriesBorderRadius > 0;
+    lastSeriesBorderRadiusRef.current = seriesBorderRadius;
+    if (shouldAttachNewShader) {
+      const shaderSource = seriesBorderRadius > 0 ? _shaders.heatmapFragmentShaderSourceWithBorderRadius : _shaders.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 = (0, _utils.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);
+      (0, _utils.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/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/HeatmapPremium/webgl/HeatmapWebGLRenderer.js

@@ -0,0 +1,23 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapWebGLRenderer = HeatmapWebGLRenderer;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _internals2 = require("@mui/x-charts-pro/internals");
+var _HeatmapWebGLPlot = require("./HeatmapWebGLPlot");
+var _jsxRuntime = require("react/jsx-runtime");
+function HeatmapWebGLRenderer({
+  borderRadius
+}) {
+  (0, _internals.useRegisterPointerInteractions)(_internals2.selectorHeatmapItemAtPosition);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.WebGLProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapWebGLPlot.HeatmapWebGLPlot, {
+      borderRadius: borderRadius
+    })
+  });
+}

package/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/HeatmapPremium/webgl/shaders.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.heatmapVertexShaderSource = exports.heatmapFragmentShaderSourceWithBorderRadius = exports.heatmapFragmentShaderSourceNoBorderRadius = void 0;
+// language=Glsl
+const heatmapVertexShaderSource = exports.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
+const heatmapFragmentShaderSourceNoBorderRadius = exports.heatmapFragmentShaderSourceNoBorderRadius = /* glsl */`
+    precision mediump float;
+    
+    varying vec4 v_color;
+    
+    void main() {
+      gl_FragColor = v_color;
+    }
+  `;
+
+// language=Glsl
+const heatmapFragmentShaderSourceWithBorderRadius = exports.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/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/HeatmapPremium/webgl/useHeatmapPlotData.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHeatmapPlotData = useHeatmapPlotData;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _internals = require("@mui/x-charts/internals");
+var _parseColor = require("../../utils/webgl/parseColor");
+function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
+  const width = xScale.bandwidth();
+  const height = yScale.bandwidth();
+  const colorScale = (0, _hooks.useZColorScale)();
+  const store = (0, _internals.useStore)();
+  const isHighlighted = store.use(_internals.selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(_internals.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 = (0, _parseColor.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/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/HeatmapPremium/webgl/utils.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.attachShader = attachShader;
+exports.bindQuadBuffer = bindQuadBuffer;
+exports.compileShader = compileShader;
+exports.logWebGLErrors = logWebGLErrors;
+exports.uploadQuadBuffer = uploadQuadBuffer;
+function compileShader(gl, shaderSource, shaderType) {
+  const shader = gl.createShader(shaderType);
+  gl.shaderSource(shader, shaderSource);
+  gl.compileShader(shader);
+  return shader;
+}
+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;
+}
+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);
+}
+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.
+ */
+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/BarChartPremium/BarChartPremium.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
-import { type BarChartProProps } from '@mui/x-charts-pro/BarChartPro';
+import { type BarChartProProps, type BarChartProSlotProps, type BarChartProSlots } from '@mui/x-charts-pro/BarChartPro';
 import { type BarSeries } from '@mui/x-charts/BarChart';
 import { type BarItemIdentifier, type RangeBarItemIdentifier, type RangeBarSeriesType } from "../models/index.js";
 export type RangeBarSeries = RangeBarSeriesType;
-export interface BarChartPremiumProps extends Omit<BarChartProProps, 'series' | 'onItemClick'> {
+export interface BarChartPremiumSlots extends BarChartProSlots {}
+export interface BarChartPremiumSlotProps extends BarChartProSlotProps {}
+export interface BarChartPremiumProps extends Omit<BarChartProProps, 'series' | 'onItemClick' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartPremiumSlotProps;
   /**
    * Callback fired when a bar or range bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/BarChartPremium/BarChartPremium.js

@@ -12,7 +12,7 @@ import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
-import { BarPlot } from '@mui/x-charts/BarChart';
+import { BarPlot, FocusedBar } from '@mui/x-charts/BarChart';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
@@ -24,6 +24,7 @@ import { useBarChartPremiumProps } from "./useBarChartPremiumProps.js";
 import { BAR_CHART_PREMIUM_PLUGINS } from "./BarChartPremium.plugins.js";
 import { ChartDataProviderPremium } from "../ChartDataProviderPremium/index.js";
 import { RangeBarPlot } from "./RangeBar/RangeBarPlot.js";
+import { FocusedRangeBar } from "./RangeBar/FocusedRangeBar.js";
 import { RangeBarPreviewPlot } from "../ChartZoomSlider/internals/previews/RangeBarPreviewPlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 seriesPreviewPlotMap.set('rangeBar', RangeBarPreviewPlot);
@@ -81,7 +82,7 @@ const BarChartPremium = /*#__PURE__*/React.forwardRef(function BarChartPremium(i
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(RangeBarPlot, _extends({}, rangeBarPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+          children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(RangeBarPlot, _extends({}, rangeBarPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(FocusedBar, {}), /*#__PURE__*/_jsx(FocusedRangeBar, {})]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
@@ -101,6 +102,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -184,7 +190,7 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['bar']).isRequired
   })),
   /**
@@ -205,7 +211,7 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -235,7 +241,7 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['bar']).isRequired
   })),
   /**
@@ -360,7 +366,7 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['bar']).isRequired
   }),
   /**

package/esm/BarChartPremium/RangeBar/AnimatedRangeBarElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState", "skipAnimation", "id", "dataIndex", "xOrigin", "yOrigin", "hidden"];
+const _excluded = ["ownerState", "skipAnimation", "seriesId", "dataIndex", "xOrigin", "yOrigin", "hidden"];
 import * as React from 'react';
 import { useAnimateRangeBar } from "../../hooks/animation/useAnimateRangeBar.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/BarChartPremium/RangeBar/FocusedRangeBar.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function FocusedRangeBar(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/esm/BarChartPremium/RangeBar/FocusedRangeBar.js

@@ -0,0 +1,63 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem, useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { createGetRangeBarDimensions } from "./createGetRangeBarDimensions.js";
+import { useRangeBarSeriesContext } from "../../hooks/useRangeBarSeries.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FocusedRangeBar(props) {
+  const theme = useTheme();
+  const focusedItem = useFocusedItem();
+  const rangeBarSeries = useRangeBarSeriesContext();
+  const {
+    xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  if (focusedItem === null || focusedItem.type !== 'rangeBar' || !rangeBarSeries) {
+    return null;
+  }
+  const series = rangeBarSeries.series[focusedItem.seriesId];
+  if (series.data[focusedItem.dataIndex] == null) {
+    // Handle missing data
+    return null;
+  }
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const xAxisConfig = xAxis[xAxisId];
+  const yAxisConfig = yAxis[yAxisId];
+  const verticalLayout = rangeBarSeries.series[focusedItem.seriesId].layout === 'vertical';
+  const groupIndex = rangeBarSeries.seriesOrder.findIndex(seriesId => seriesId === focusedItem.seriesId);
+  const barDimensions = createGetRangeBarDimensions({
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    numberOfGroups: rangeBarSeries.seriesOrder.length
+  })(focusedItem.dataIndex, groupIndex);
+  if (barDimensions === null) {
+    return null;
+  }
+  const {
+    x,
+    y,
+    height,
+    width
+  } = barDimensions;
+  return /*#__PURE__*/_jsx("rect", _extends({
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 2,
+    x: x - 3,
+    y: y - 3,
+    width: width + 6,
+    height: height + 6,
+    rx: 3,
+    ry: 3
+  }, props));
+}

package/esm/BarChartPremium/RangeBar/RangeBarPlot.js

@@ -74,7 +74,7 @@ function RangeBarPlot(props) {
           hidden
         }) => {
           return /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
+            seriesId: seriesId,
             dataIndex: dataIndex,
             color: color,
             skipAnimation: skipAnimation ?? false,

package/esm/BarChartPremium/RangeBar/createGetRangeBarDimensions.d.ts

@@ -0,0 +1,13 @@
+import { type ChartSeriesDefaultized, type ChartsXAxisProps, type ChartsYAxisProps, type ComputedAxis, type ScaleName } from '@mui/x-charts/internals';
+export declare function createGetRangeBarDimensions(params: {
+  verticalLayout: boolean;
+  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
+  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
+  series: ChartSeriesDefaultized<'rangeBar'>;
+  numberOfGroups: number;
+}): (dataIndex: number, groupIndex: number) => {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+} | null;