@mui/x-charts-premium 9.2.0 → 9.4.0

package/BarChartPremium/RangeBar/RangeBarWebGLPlot.d.ts

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

package/BarChartPremium/RangeBar/RangeBarWebGLPlot.js

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

package/BarChartPremium/RangeBar/RangeBarWebGLPlot.mjs

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

package/BarChartPremium/RangeBar/seriesConfig/extrema.js

@@ -41,6 +41,9 @@ const getValueExtremum = direction => params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
+    if (axis.domainSeries === 'visible' && series[seriesId].hidden) {
+      return false;
+    }
     const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
     return axisId === axis.id || isDefaultAxis && axisId === undefined;
   }).reduce((acc, seriesId) => {

package/BarChartPremium/RangeBar/seriesConfig/extrema.mjs

@@ -35,6 +35,9 @@ const getValueExtremum = direction => params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
+    if (axis.domainSeries === 'visible' && series[seriesId].hidden) {
+      return false;
+    }
     const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
     return axisId === axis.id || isDefaultAxis && axisId === undefined;
   }).reduce((acc, seriesId) => {

package/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _warning = require("@mui/x-internals/warning");
+var _internals = require("@mui/x-charts/internals");
 const rangeBarValueFormatter = v => v == null ? '' : `[${v[0]}, ${v[1]}]`;
 const seriesProcessor = (params, dataset, isItemVisible) => {
   const {
@@ -26,8 +27,7 @@ Either provide a data property to the series or use the dataset prop.` : (0, _fo
     }
     const missingKeys = ['start', 'end'].filter(key => typeof datasetKeys?.[key] !== 'string');
     if (datasetKeys && missingKeys.length > 0) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: range bar series with id='${id}' has incomplete datasetKeys.
-Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.` : (0, _formatErrorMessage2.default)(45, id, missingKeys.map(key => `"${key}"`).join(', ')));
+      (0, _internals.incompleteDatasetKeysError)('RangeBar', id, missingKeys);
     }
     let data;
     if (seriesData.valueGetter) {

package/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.mjs

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import { warnOnce } from '@mui/x-internals/warning';
+import { incompleteDatasetKeysError } from '@mui/x-charts/internals';
 const rangeBarValueFormatter = v => v == null ? '' : `[${v[0]}, ${v[1]}]`;
 const seriesProcessor = (params, dataset, isItemVisible) => {
   const {
@@ -19,8 +20,7 @@ Either provide a data property to the series or use the dataset prop.` : _format
     }
     const missingKeys = ['start', 'end'].filter(key => typeof datasetKeys?.[key] !== 'string');
     if (datasetKeys && missingKeys.length > 0) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: range bar series with id='${id}' has incomplete datasetKeys.
-Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.` : _formatErrorMessage(45, id, missingKeys.map(key => `"${key}"`).join(', ')));
+      incompleteDatasetKeysError('RangeBar', id, missingKeys);
     }
     let data;
     if (seriesData.valueGetter) {

package/BarChartPremium/useBarChartPremiumProps.js

@@ -46,7 +46,8 @@ function useBarChartPremiumProps(props) {
     onItemClick: props.onItemClick,
     slots: props.slots,
     slotProps: props.slotProps,
-    borderRadius: props.borderRadius
+    borderRadius: props.borderRadius,
+    renderer: renderer === 'webgl' ? 'webgl' : undefined
   };
   return (0, _extends2.default)({}, barChartProps, {
     chartsContainerProps: premiumContainerProps,

package/BarChartPremium/useBarChartPremiumProps.mjs

@@ -39,7 +39,8 @@ export function useBarChartPremiumProps(props) {
     onItemClick: props.onItemClick,
     slots: props.slots,
     slotProps: props.slotProps,
-    borderRadius: props.borderRadius
+    borderRadius: props.borderRadius,
+    renderer: renderer === 'webgl' ? 'webgl' : undefined
   };
   return _extends({}, barChartProps, {
     chartsContainerProps: premiumContainerProps,

package/BarChartPremium/webgl/useBarWebGLPlotData.d.mts

@@ -1,10 +1,5 @@
 import { type ChartDrawingArea } from '@mui/x-charts/hooks';
 import { type ProcessedBarSeriesData } from '@mui/x-charts/internals';
-export interface BarWebGLPlotData {
-  centers: Float32Array;
-  halfSizes: Float32Array;
-  colors: Uint8Array;
-  cornerRadii: Float32Array;
-  count: number;
-}
+import { type WebGLBarLikePlotData } from "./useWebGLBarLikePlotData.mjs";
+export type BarWebGLPlotData = WebGLBarLikePlotData;
 export declare function useBarWebGLPlotData(drawingArea: ChartDrawingArea, completedData: ProcessedBarSeriesData[], borderRadius: number): BarWebGLPlotData;

package/BarChartPremium/webgl/useBarWebGLPlotData.d.ts

@@ -1,10 +1,5 @@
 import { type ChartDrawingArea } from '@mui/x-charts/hooks';
 import { type ProcessedBarSeriesData } from '@mui/x-charts/internals';
-export interface BarWebGLPlotData {
-  centers: Float32Array;
-  halfSizes: Float32Array;
-  colors: Uint8Array;
-  cornerRadii: Float32Array;
-  count: number;
-}
+import { type WebGLBarLikePlotData } from "./useWebGLBarLikePlotData.js";
+export type BarWebGLPlotData = WebGLBarLikePlotData;
 export declare function useBarWebGLPlotData(drawingArea: ChartDrawingArea, completedData: ProcessedBarSeriesData[], borderRadius: number): BarWebGLPlotData;

package/BarChartPremium/webgl/useBarWebGLPlotData.js

@@ -1,160 +1,13 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useBarWebGLPlotData = useBarWebGLPlotData;
-var React = _interopRequireWildcard(require("react"));
-var _internals = require("@mui/x-charts/internals");
-var _parseColor = require("../../utils/webgl/parseColor");
-const EMPTY_FLOAT32 = new Float32Array(0);
-const EMPTY_UINT8 = new Uint8Array(0);
-const EMPTY_DATA = {
-  centers: EMPTY_FLOAT32,
-  halfSizes: EMPTY_FLOAT32,
-  colors: EMPTY_UINT8,
-  cornerRadii: EMPTY_FLOAT32,
-  count: 0
-};
-function ensureCapacity(pool, maxCount) {
-  if (pool !== null && pool.colors.length >= maxCount * 4) {
-    return pool;
-  }
-  return {
-    centers: new Float32Array(maxCount * 2),
-    halfSizes: new Float32Array(maxCount * 2),
-    colors: new Uint8Array(maxCount * 4),
-    cornerRadii: new Float32Array(maxCount * 4)
-  };
-}
-
-// Mirrors SVG highlight styling: highlighted -> CSS `brightness(120%)`,
-// faded -> opacity 0.3. Baking these into the per-bar color array means we
-// don't need a separate per-instance attribute on the GPU side.
-const HIGHLIGHTED_BRIGHTNESS = 1.2;
-const FADED_OPACITY = 0.3;
-function setCornerRadii(radius, side, target, offset) {
-  // CSS order: top-left, top-right, bottom-right, bottom-left.
-  let tl = 0;
-  let tr = 0;
-  let br = 0;
-  let bl = 0;
-  if (radius > 0) {
-    if (side === 'top') {
-      tl = radius;
-      tr = radius;
-    } else if (side === 'bottom') {
-      br = radius;
-      bl = radius;
-    } else if (side === 'left') {
-      tl = radius;
-      bl = radius;
-    } else if (side === 'right') {
-      tr = radius;
-      br = radius;
-    }
-  }
-  target[offset] = tl;
-  target[offset + 1] = tr;
-  target[offset + 2] = br;
-  target[offset + 3] = bl;
-}
+var _useWebGLBarLikePlotData = require("./useWebGLBarLikePlotData");
 function useBarWebGLPlotData(drawingArea, completedData, borderRadius) {
-  const store = (0, _internals.useStore)();
-  const getHighlightState = store.use(_internals.selectorChartsHighlightStateCallback);
-  const poolRef = React.useRef(null);
-  return React.useMemo(() => {
-    let maxCount = 0;
-    for (let s = 0; s < completedData.length; s += 1) {
-      maxCount += completedData[s].data.length;
-    }
-    if (maxCount === 0) {
-      return EMPTY_DATA;
-    }
-    const pool = ensureCapacity(poolRef.current, maxCount);
-    poolRef.current = pool;
-
-    // Hoist invariants out of the hot loop.
-    const {
-      centers,
-      halfSizes,
-      colors,
-      cornerRadii
-    } = pool;
-    const drawingAreaLeft = drawingArea.left;
-    const drawingAreaTop = drawingArea.top;
-    let cursor = 0;
-    for (let s = 0; s < completedData.length; s += 1) {
-      const processed = completedData[s];
-      const seriesId = processed.seriesId;
-      const data = processed.data;
-      const dataLength = data.length;
-      for (let i = 0; i < dataLength; i += 1) {
-        const bar = data[i];
-        if (bar.hidden) {
-          continue;
-        }
-        const value = bar.value;
-        if (value == null) {
-          continue;
-        }
-        const w = bar.width;
-        const h = bar.height;
-        if (w <= 0 || h <= 0) {
-          continue;
-        }
-        const halfW = w * 0.5;
-        const halfH = h * 0.5;
-        const c2 = cursor * 2;
-        centers[c2] = bar.x + halfW - drawingAreaLeft;
-        centers[c2 + 1] = bar.y + halfH - drawingAreaTop;
-        halfSizes[c2] = halfW;
-        halfSizes[c2 + 1] = halfH;
-        const rgba = (0, _parseColor.parseColor)(bar.color);
-        const c4 = cursor * 4;
-        let r = rgba[0];
-        let g = rgba[1];
-        let b = rgba[2];
-        let a = rgba[3];
-        const highlightState = getHighlightState({
-          type: 'bar',
-          seriesId,
-          dataIndex: bar.dataIndex
-        });
-        if (highlightState === 'highlighted') {
-          r = Math.min(255, r * HIGHLIGHTED_BRIGHTNESS);
-          g = Math.min(255, g * HIGHLIGHTED_BRIGHTNESS);
-          b = Math.min(255, b * HIGHLIGHTED_BRIGHTNESS);
-        } else if (highlightState === 'faded') {
-          a *= FADED_OPACITY;
-        }
-        colors[c4] = r;
-        colors[c4 + 1] = g;
-        colors[c4 + 2] = b;
-        colors[c4 + 3] = a;
-        const effectiveRadius = Math.min(borderRadius, halfW, halfH);
-        setCornerRadii(effectiveRadius, bar.borderRadiusSide, cornerRadii, c4);
-        cursor += 1;
-      }
-    }
-    if (cursor === 0) {
-      return EMPTY_DATA;
-    }
-
-    // Return fresh subarray views over the pooled buffers. New view refs each call
-    // (so React memoisation is correct and consumers can detect a change), but no
-    // new bytes allocated on the JS heap. The GPU upload short-circuits via the
-    // `lastUploaded === data` ref check on the program side when we hand the
-    // exact same view back across renders -- it won't fire here since each call
-    // produces a new view, but the contents have changed anyway in that case.
-    return {
-      centers: new Float32Array(centers.buffer, centers.byteOffset, cursor * 2),
-      halfSizes: new Float32Array(halfSizes.buffer, halfSizes.byteOffset, cursor * 2),
-      colors: new Uint8Array(colors.buffer, colors.byteOffset, cursor * 4),
-      cornerRadii: new Float32Array(cornerRadii.buffer, cornerRadii.byteOffset, cursor * 4),
-      count: cursor
-    };
-  }, [borderRadius, completedData, drawingArea.left, drawingArea.top, getHighlightState]);
+  return (0, _useWebGLBarLikePlotData.useWebGLBarLikePlotData)(drawingArea, completedData, borderRadius, {
+    highlightType: 'bar'
+  });
 }

package/BarChartPremium/webgl/useBarWebGLPlotData.mjs

@@ -1,154 +1,8 @@
 'use client';
 
-import * as React from 'react';
-import { selectorChartsHighlightStateCallback, useStore } from '@mui/x-charts/internals';
-import { parseColor } from "../../utils/webgl/parseColor.mjs";
-const EMPTY_FLOAT32 = new Float32Array(0);
-const EMPTY_UINT8 = new Uint8Array(0);
-const EMPTY_DATA = {
-  centers: EMPTY_FLOAT32,
-  halfSizes: EMPTY_FLOAT32,
-  colors: EMPTY_UINT8,
-  cornerRadii: EMPTY_FLOAT32,
-  count: 0
-};
-function ensureCapacity(pool, maxCount) {
-  if (pool !== null && pool.colors.length >= maxCount * 4) {
-    return pool;
-  }
-  return {
-    centers: new Float32Array(maxCount * 2),
-    halfSizes: new Float32Array(maxCount * 2),
-    colors: new Uint8Array(maxCount * 4),
-    cornerRadii: new Float32Array(maxCount * 4)
-  };
-}
-
-// Mirrors SVG highlight styling: highlighted -> CSS `brightness(120%)`,
-// faded -> opacity 0.3. Baking these into the per-bar color array means we
-// don't need a separate per-instance attribute on the GPU side.
-const HIGHLIGHTED_BRIGHTNESS = 1.2;
-const FADED_OPACITY = 0.3;
-function setCornerRadii(radius, side, target, offset) {
-  // CSS order: top-left, top-right, bottom-right, bottom-left.
-  let tl = 0;
-  let tr = 0;
-  let br = 0;
-  let bl = 0;
-  if (radius > 0) {
-    if (side === 'top') {
-      tl = radius;
-      tr = radius;
-    } else if (side === 'bottom') {
-      br = radius;
-      bl = radius;
-    } else if (side === 'left') {
-      tl = radius;
-      bl = radius;
-    } else if (side === 'right') {
-      tr = radius;
-      br = radius;
-    }
-  }
-  target[offset] = tl;
-  target[offset + 1] = tr;
-  target[offset + 2] = br;
-  target[offset + 3] = bl;
-}
+import { useWebGLBarLikePlotData } from "./useWebGLBarLikePlotData.mjs";
 export function useBarWebGLPlotData(drawingArea, completedData, borderRadius) {
-  const store = useStore();
-  const getHighlightState = store.use(selectorChartsHighlightStateCallback);
-  const poolRef = React.useRef(null);
-  return React.useMemo(() => {
-    let maxCount = 0;
-    for (let s = 0; s < completedData.length; s += 1) {
-      maxCount += completedData[s].data.length;
-    }
-    if (maxCount === 0) {
-      return EMPTY_DATA;
-    }
-    const pool = ensureCapacity(poolRef.current, maxCount);
-    poolRef.current = pool;
-
-    // Hoist invariants out of the hot loop.
-    const {
-      centers,
-      halfSizes,
-      colors,
-      cornerRadii
-    } = pool;
-    const drawingAreaLeft = drawingArea.left;
-    const drawingAreaTop = drawingArea.top;
-    let cursor = 0;
-    for (let s = 0; s < completedData.length; s += 1) {
-      const processed = completedData[s];
-      const seriesId = processed.seriesId;
-      const data = processed.data;
-      const dataLength = data.length;
-      for (let i = 0; i < dataLength; i += 1) {
-        const bar = data[i];
-        if (bar.hidden) {
-          continue;
-        }
-        const value = bar.value;
-        if (value == null) {
-          continue;
-        }
-        const w = bar.width;
-        const h = bar.height;
-        if (w <= 0 || h <= 0) {
-          continue;
-        }
-        const halfW = w * 0.5;
-        const halfH = h * 0.5;
-        const c2 = cursor * 2;
-        centers[c2] = bar.x + halfW - drawingAreaLeft;
-        centers[c2 + 1] = bar.y + halfH - drawingAreaTop;
-        halfSizes[c2] = halfW;
-        halfSizes[c2 + 1] = halfH;
-        const rgba = parseColor(bar.color);
-        const c4 = cursor * 4;
-        let r = rgba[0];
-        let g = rgba[1];
-        let b = rgba[2];
-        let a = rgba[3];
-        const highlightState = getHighlightState({
-          type: 'bar',
-          seriesId,
-          dataIndex: bar.dataIndex
-        });
-        if (highlightState === 'highlighted') {
-          r = Math.min(255, r * HIGHLIGHTED_BRIGHTNESS);
-          g = Math.min(255, g * HIGHLIGHTED_BRIGHTNESS);
-          b = Math.min(255, b * HIGHLIGHTED_BRIGHTNESS);
-        } else if (highlightState === 'faded') {
-          a *= FADED_OPACITY;
-        }
-        colors[c4] = r;
-        colors[c4 + 1] = g;
-        colors[c4 + 2] = b;
-        colors[c4 + 3] = a;
-        const effectiveRadius = Math.min(borderRadius, halfW, halfH);
-        setCornerRadii(effectiveRadius, bar.borderRadiusSide, cornerRadii, c4);
-        cursor += 1;
-      }
-    }
-    if (cursor === 0) {
-      return EMPTY_DATA;
-    }
-
-    // Return fresh subarray views over the pooled buffers. New view refs each call
-    // (so React memoisation is correct and consumers can detect a change), but no
-    // new bytes allocated on the JS heap. The GPU upload short-circuits via the
-    // `lastUploaded === data` ref check on the program side when we hand the
-    // exact same view back across renders -- it won't fire here since each call
-    // produces a new view, but the contents have changed anyway in that case.
-    return {
-      centers: new Float32Array(centers.buffer, centers.byteOffset, cursor * 2),
-      halfSizes: new Float32Array(halfSizes.buffer, halfSizes.byteOffset, cursor * 2),
-      colors: new Uint8Array(colors.buffer, colors.byteOffset, cursor * 4),
-      cornerRadii: new Float32Array(cornerRadii.buffer, cornerRadii.byteOffset, cursor * 4),
-      count: cursor
-    };
-  }, [borderRadius, completedData, drawingArea.left, drawingArea.top, getHighlightState]);
+  return useWebGLBarLikePlotData(drawingArea, completedData, borderRadius, {
+    highlightType: 'bar'
+  });
 }

package/BarChartPremium/webgl/useWebGLBarLikePlotData.d.mts

@@ -0,0 +1,39 @@
+import { type ChartDrawingArea } from '@mui/x-charts/hooks';
+import { type BorderRadiusSide } from '@mui/x-charts/internals';
+import { type SeriesId } from '@mui/x-charts/models';
+export interface WebGLBarLikeItem {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  value: unknown;
+  hidden: boolean;
+  color: string;
+  dataIndex: number;
+  borderRadiusSide?: BorderRadiusSide;
+}
+export interface WebGLBarLikeSeries<T extends WebGLBarLikeItem> {
+  seriesId: SeriesId;
+  data: readonly T[];
+}
+export interface WebGLBarLikePlotData {
+  centers: Float32Array;
+  halfSizes: Float32Array;
+  colors: Uint8Array;
+  cornerRadii: Float32Array;
+  count: number;
+}
+export interface UseWebGLBarLikePlotDataOptions {
+  /**
+   * Series identifier passed to the highlight selector. Allows the shared
+   * implementation to be used for both `'bar'` and `'rangeBar'` series.
+   */
+  highlightType: 'bar' | 'rangeBar';
+  /**
+   * When true, the border radius is applied to all four corners regardless of
+   * the per-item `borderRadiusSide` value. Range bars use this since they
+   * aren't stacked.
+   */
+  fullRoundedCorners?: boolean;
+}
+export declare function useWebGLBarLikePlotData<T extends WebGLBarLikeItem>(drawingArea: ChartDrawingArea, completedData: readonly WebGLBarLikeSeries<T>[], borderRadius: number, options: UseWebGLBarLikePlotDataOptions): WebGLBarLikePlotData;

package/BarChartPremium/webgl/useWebGLBarLikePlotData.d.ts

@@ -0,0 +1,39 @@
+import { type ChartDrawingArea } from '@mui/x-charts/hooks';
+import { type BorderRadiusSide } from '@mui/x-charts/internals';
+import { type SeriesId } from '@mui/x-charts/models';
+export interface WebGLBarLikeItem {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  value: unknown;
+  hidden: boolean;
+  color: string;
+  dataIndex: number;
+  borderRadiusSide?: BorderRadiusSide;
+}
+export interface WebGLBarLikeSeries<T extends WebGLBarLikeItem> {
+  seriesId: SeriesId;
+  data: readonly T[];
+}
+export interface WebGLBarLikePlotData {
+  centers: Float32Array;
+  halfSizes: Float32Array;
+  colors: Uint8Array;
+  cornerRadii: Float32Array;
+  count: number;
+}
+export interface UseWebGLBarLikePlotDataOptions {
+  /**
+   * Series identifier passed to the highlight selector. Allows the shared
+   * implementation to be used for both `'bar'` and `'rangeBar'` series.
+   */
+  highlightType: 'bar' | 'rangeBar';
+  /**
+   * When true, the border radius is applied to all four corners regardless of
+   * the per-item `borderRadiusSide` value. Range bars use this since they
+   * aren't stacked.
+   */
+  fullRoundedCorners?: boolean;
+}
+export declare function useWebGLBarLikePlotData<T extends WebGLBarLikeItem>(drawingArea: ChartDrawingArea, completedData: readonly WebGLBarLikeSeries<T>[], borderRadius: number, options: UseWebGLBarLikePlotDataOptions): WebGLBarLikePlotData;