@mui/x-charts-premium 9.0.4 → 9.2.0

package/BarChartPremium/webgl/BarWebGLProgram.d.mts

@@ -0,0 +1,19 @@
+import { type BarWebGLPlotData } from "./useBarWebGLPlotData.mjs";
+export declare class BarWebGLProgram {
+  private gl;
+  private readonly shaders;
+  private readonly program;
+  private readonly vao;
+  private readonly quadBuffer;
+  private readonly aPositionLocation;
+  private readonly centersBuffer;
+  private readonly halfSizesBuffer;
+  private readonly colorsBuffer;
+  private readonly cornerRadiiBuffer;
+  private readonly uResolution;
+  constructor(gl: WebGL2RenderingContext);
+  setResolution(width: number, height: number): void;
+  plot(plotData: BarWebGLPlotData): void;
+  render(count: number): void;
+  dispose(): void;
+}

package/BarChartPremium/webgl/BarWebGLProgram.d.ts

@@ -0,0 +1,19 @@
+import { type BarWebGLPlotData } from "./useBarWebGLPlotData.js";
+export declare class BarWebGLProgram {
+  private gl;
+  private readonly shaders;
+  private readonly program;
+  private readonly vao;
+  private readonly quadBuffer;
+  private readonly aPositionLocation;
+  private readonly centersBuffer;
+  private readonly halfSizesBuffer;
+  private readonly colorsBuffer;
+  private readonly cornerRadiiBuffer;
+  private readonly uResolution;
+  constructor(gl: WebGL2RenderingContext);
+  setResolution(width: number, height: number): void;
+  plot(plotData: BarWebGLPlotData): void;
+  render(count: number): void;
+  dispose(): void;
+}

package/BarChartPremium/webgl/BarWebGLProgram.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarWebGLProgram = void 0;
+var _utils = require("../../utils/webgl/utils");
+var _shaders = require("./shaders");
+class BarWebGLProgram {
+  shaders = [];
+  constructor(gl) {
+    this.gl = gl;
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    this.program = gl.createProgram();
+    const vertexShader = (0, _utils.compileShader)(gl, _shaders.barVertexShaderSource, gl.VERTEX_SHADER);
+    const fragmentShader = (0, _utils.compileShader)(gl, _shaders.barFragmentShaderSource, gl.FRAGMENT_SHADER);
+    gl.attachShader(this.program, vertexShader);
+    gl.attachShader(this.program, fragmentShader);
+    gl.linkProgram(this.program);
+    this.shaders.push(vertexShader, fragmentShader);
+    if (process.env.NODE_ENV !== 'production' && !gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+      console.error(`Program linking failed: ${gl.getProgramInfoLog(this.program)}`);
+      console.error(`Vertex info-log: ${gl.getShaderInfoLog(vertexShader)}`);
+      console.error(`Fragment info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
+    }
+
+    // Cache locations once.
+    this.uResolution = gl.getUniformLocation(this.program, 'u_resolution');
+    this.aPositionLocation = gl.getAttribLocation(this.program, 'a_position');
+    this.quadBuffer = (0, _utils.uploadQuadBuffer)(gl);
+    this.vao = gl.createVertexArray();
+    this.centersBuffer = createInstancedBuffer(gl, this.program, 'a_center', 2, gl.FLOAT, false);
+    this.halfSizesBuffer = createInstancedBuffer(gl, this.program, 'a_halfSize', 2, gl.FLOAT, false);
+    // Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1].
+    this.colorsBuffer = createInstancedBuffer(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
+    this.cornerRadiiBuffer = createInstancedBuffer(gl, this.program, 'a_cornerRadii', 4, gl.FLOAT, false);
+  }
+  setResolution(width, height) {
+    this.gl.useProgram(this.program);
+    this.gl.uniform2f(this.uResolution, width, height);
+  }
+  plot(plotData) {
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.bindVertexArray(this.vao);
+
+    // Bind quad buffer + a_position (per-vertex).
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.enableVertexAttribArray(this.aPositionLocation);
+    gl.vertexAttribPointer(this.aPositionLocation, 2, gl.FLOAT, false, 0, 0);
+    uploadAndBindInstanced(gl, this.centersBuffer, plotData.centers);
+    uploadAndBindInstanced(gl, this.halfSizesBuffer, plotData.halfSizes);
+    uploadAndBindInstanced(gl, this.colorsBuffer, plotData.colors);
+    uploadAndBindInstanced(gl, this.cornerRadiiBuffer, plotData.cornerRadii);
+    gl.bindVertexArray(null);
+    (0, _utils.logWebGLErrors)(gl);
+  }
+  render(count) {
+    if (count === 0) {
+      return;
+    }
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.bindVertexArray(this.vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    const gl = this.gl;
+    gl.deleteProgram(this.program);
+    gl.deleteVertexArray(this.vao);
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteBuffer(this.centersBuffer.buffer);
+    gl.deleteBuffer(this.halfSizesBuffer.buffer);
+    gl.deleteBuffer(this.colorsBuffer.buffer);
+    gl.deleteBuffer(this.cornerRadiiBuffer.buffer);
+    this.shaders.forEach(shader => gl.deleteShader(shader));
+  }
+}
+exports.BarWebGLProgram = BarWebGLProgram;
+function createInstancedBuffer(gl, program, name, size, glType, normalized) {
+  return {
+    buffer: gl.createBuffer(),
+    capacityBytes: 0,
+    lastUploaded: null,
+    location: gl.getAttribLocation(program, name),
+    size,
+    glType,
+    normalized
+  };
+}
+function uploadAndBindInstanced(gl, target, data) {
+  gl.bindBuffer(gl.ARRAY_BUFFER, target.buffer);
+  if (target.lastUploaded !== data) {
+    if (data.byteLength <= target.capacityBytes) {
+      gl.bufferSubData(gl.ARRAY_BUFFER, 0, data);
+    } else {
+      gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
+      target.capacityBytes = data.byteLength;
+    }
+    target.lastUploaded = data;
+  }
+  gl.enableVertexAttribArray(target.location);
+  gl.vertexAttribPointer(target.location, target.size, target.glType, target.normalized, 0, 0);
+  gl.vertexAttribDivisor(target.location, 1);
+}

package/BarChartPremium/webgl/BarWebGLProgram.mjs

@@ -0,0 +1,100 @@
+import { compileShader, logWebGLErrors, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
+import { barFragmentShaderSource, barVertexShaderSource } from "./shaders.mjs";
+export class BarWebGLProgram {
+  shaders = [];
+  constructor(gl) {
+    this.gl = gl;
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    this.program = gl.createProgram();
+    const vertexShader = compileShader(gl, barVertexShaderSource, gl.VERTEX_SHADER);
+    const fragmentShader = compileShader(gl, barFragmentShaderSource, gl.FRAGMENT_SHADER);
+    gl.attachShader(this.program, vertexShader);
+    gl.attachShader(this.program, fragmentShader);
+    gl.linkProgram(this.program);
+    this.shaders.push(vertexShader, fragmentShader);
+    if (process.env.NODE_ENV !== 'production' && !gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+      console.error(`Program linking failed: ${gl.getProgramInfoLog(this.program)}`);
+      console.error(`Vertex info-log: ${gl.getShaderInfoLog(vertexShader)}`);
+      console.error(`Fragment info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
+    }
+
+    // Cache locations once.
+    this.uResolution = gl.getUniformLocation(this.program, 'u_resolution');
+    this.aPositionLocation = gl.getAttribLocation(this.program, 'a_position');
+    this.quadBuffer = uploadQuadBuffer(gl);
+    this.vao = gl.createVertexArray();
+    this.centersBuffer = createInstancedBuffer(gl, this.program, 'a_center', 2, gl.FLOAT, false);
+    this.halfSizesBuffer = createInstancedBuffer(gl, this.program, 'a_halfSize', 2, gl.FLOAT, false);
+    // Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1].
+    this.colorsBuffer = createInstancedBuffer(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
+    this.cornerRadiiBuffer = createInstancedBuffer(gl, this.program, 'a_cornerRadii', 4, gl.FLOAT, false);
+  }
+  setResolution(width, height) {
+    this.gl.useProgram(this.program);
+    this.gl.uniform2f(this.uResolution, width, height);
+  }
+  plot(plotData) {
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.bindVertexArray(this.vao);
+
+    // Bind quad buffer + a_position (per-vertex).
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.enableVertexAttribArray(this.aPositionLocation);
+    gl.vertexAttribPointer(this.aPositionLocation, 2, gl.FLOAT, false, 0, 0);
+    uploadAndBindInstanced(gl, this.centersBuffer, plotData.centers);
+    uploadAndBindInstanced(gl, this.halfSizesBuffer, plotData.halfSizes);
+    uploadAndBindInstanced(gl, this.colorsBuffer, plotData.colors);
+    uploadAndBindInstanced(gl, this.cornerRadiiBuffer, plotData.cornerRadii);
+    gl.bindVertexArray(null);
+    logWebGLErrors(gl);
+  }
+  render(count) {
+    if (count === 0) {
+      return;
+    }
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.bindVertexArray(this.vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, count);
+    gl.bindVertexArray(null);
+  }
+  dispose() {
+    const gl = this.gl;
+    gl.deleteProgram(this.program);
+    gl.deleteVertexArray(this.vao);
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteBuffer(this.centersBuffer.buffer);
+    gl.deleteBuffer(this.halfSizesBuffer.buffer);
+    gl.deleteBuffer(this.colorsBuffer.buffer);
+    gl.deleteBuffer(this.cornerRadiiBuffer.buffer);
+    this.shaders.forEach(shader => gl.deleteShader(shader));
+  }
+}
+function createInstancedBuffer(gl, program, name, size, glType, normalized) {
+  return {
+    buffer: gl.createBuffer(),
+    capacityBytes: 0,
+    lastUploaded: null,
+    location: gl.getAttribLocation(program, name),
+    size,
+    glType,
+    normalized
+  };
+}
+function uploadAndBindInstanced(gl, target, data) {
+  gl.bindBuffer(gl.ARRAY_BUFFER, target.buffer);
+  if (target.lastUploaded !== data) {
+    if (data.byteLength <= target.capacityBytes) {
+      gl.bufferSubData(gl.ARRAY_BUFFER, 0, data);
+    } else {
+      gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
+      target.capacityBytes = data.byteLength;
+    }
+    target.lastUploaded = data;
+  }
+  gl.enableVertexAttribArray(target.location);
+  gl.vertexAttribPointer(target.location, target.size, target.glType, target.normalized, 0, 0);
+  gl.vertexAttribDivisor(target.location, 1);
+}

package/BarChartPremium/webgl/shaders.d.mts

@@ -0,0 +1,2 @@
+export declare const barVertexShaderSource = "\n    precision mediump float;\n\n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec2 a_halfSize;\n    attribute vec4 a_color;\n    attribute vec4 a_cornerRadii;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    uniform vec2 u_resolution;\n\n    void main() {\n      vec2 position = a_center + a_position * a_halfSize;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n      v_color = a_color;\n      v_pos = a_position * a_halfSize;\n      v_halfSize = a_halfSize;\n      v_cornerRadii = a_cornerRadii;\n    }\n  ";
+export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/BarChartPremium/webgl/shaders.d.ts

@@ -0,0 +1,2 @@
+export declare const barVertexShaderSource = "\n    precision mediump float;\n\n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec2 a_halfSize;\n    attribute vec4 a_color;\n    attribute vec4 a_cornerRadii;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    uniform vec2 u_resolution;\n\n    void main() {\n      vec2 position = a_center + a_position * a_halfSize;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n      v_color = a_color;\n      v_pos = a_position * a_halfSize;\n      v_halfSize = a_halfSize;\n      v_cornerRadii = a_cornerRadii;\n    }\n  ";
+export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/BarChartPremium/webgl/shaders.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.barVertexShaderSource = exports.barFragmentShaderSource = void 0;
+// language=Glsl
+const barVertexShaderSource = exports.barVertexShaderSource = /* glsl */`
+    precision mediump float;
+
+    attribute vec2 a_position;
+    attribute vec2 a_center;
+    attribute vec2 a_halfSize;
+    attribute vec4 a_color;
+    attribute vec4 a_cornerRadii;
+
+    varying vec4 v_color;
+    varying vec2 v_pos;
+    varying vec2 v_halfSize;
+    varying vec4 v_cornerRadii;
+
+    uniform vec2 u_resolution;
+
+    void main() {
+      vec2 position = a_center + a_position * a_halfSize;
+      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;
+      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+
+      v_color = a_color;
+      v_pos = a_position * a_halfSize;
+      v_halfSize = a_halfSize;
+      v_cornerRadii = a_cornerRadii;
+    }
+  `;
+
+// language=Glsl
+// Per-corner radii ordering follows CSS: top-left, top-right, bottom-right, bottom-left.
+// Screen-space conventions after the y-flip in the vertex stage:
+//   v_pos.y < 0 -> top, v_pos.y > 0 -> bottom
+//   v_pos.x < 0 -> left, v_pos.x > 0 -> right
+const barFragmentShaderSource = exports.barFragmentShaderSource = /* glsl */`
+    precision mediump float;
+
+    varying vec4 v_color;
+    varying vec2 v_pos;
+    varying vec2 v_halfSize;
+    varying vec4 v_cornerRadii;
+
+    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {
+      float radius;
+      if (pos.x < 0.0) {
+        radius = pos.y < 0.0 ? r.x : r.w;
+      } else {
+        radius = pos.y < 0.0 ? r.y : r.z;
+      }
+
+      vec2 q = abs(pos) - halfSize + radius;
+      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
+    }
+
+    void main() {
+      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);
+      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0
+      // keeps interior pixels at full color instead of fading them.
+      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
+
+      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);
+    }
+  `;

package/BarChartPremium/webgl/shaders.mjs

@@ -0,0 +1,63 @@
+// language=Glsl
+export const barVertexShaderSource = /* glsl */`
+    precision mediump float;
+
+    attribute vec2 a_position;
+    attribute vec2 a_center;
+    attribute vec2 a_halfSize;
+    attribute vec4 a_color;
+    attribute vec4 a_cornerRadii;
+
+    varying vec4 v_color;
+    varying vec2 v_pos;
+    varying vec2 v_halfSize;
+    varying vec4 v_cornerRadii;
+
+    uniform vec2 u_resolution;
+
+    void main() {
+      vec2 position = a_center + a_position * a_halfSize;
+      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;
+      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+
+      v_color = a_color;
+      v_pos = a_position * a_halfSize;
+      v_halfSize = a_halfSize;
+      v_cornerRadii = a_cornerRadii;
+    }
+  `;
+
+// language=Glsl
+// Per-corner radii ordering follows CSS: top-left, top-right, bottom-right, bottom-left.
+// Screen-space conventions after the y-flip in the vertex stage:
+//   v_pos.y < 0 -> top, v_pos.y > 0 -> bottom
+//   v_pos.x < 0 -> left, v_pos.x > 0 -> right
+export const barFragmentShaderSource = /* glsl */`
+    precision mediump float;
+
+    varying vec4 v_color;
+    varying vec2 v_pos;
+    varying vec2 v_halfSize;
+    varying vec4 v_cornerRadii;
+
+    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {
+      float radius;
+      if (pos.x < 0.0) {
+        radius = pos.y < 0.0 ? r.x : r.w;
+      } else {
+        radius = pos.y < 0.0 ? r.y : r.z;
+      }
+
+      vec2 q = abs(pos) - halfSize + radius;
+      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
+    }
+
+    void main() {
+      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);
+      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0
+      // keeps interior pixels at full color instead of fading them.
+      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
+
+      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);
+    }
+  `;

package/BarChartPremium/webgl/useBarWebGLPlotData.d.mts

@@ -0,0 +1,10 @@
+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;
+}
+export declare function useBarWebGLPlotData(drawingArea: ChartDrawingArea, completedData: ProcessedBarSeriesData[], borderRadius: number): BarWebGLPlotData;

package/BarChartPremium/webgl/useBarWebGLPlotData.d.ts

@@ -0,0 +1,10 @@
+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;
+}
+export declare function useBarWebGLPlotData(drawingArea: ChartDrawingArea, completedData: ProcessedBarSeriesData[], borderRadius: number): BarWebGLPlotData;

package/BarChartPremium/webgl/useBarWebGLPlotData.js

@@ -0,0 +1,160 @@
+"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;
+}
+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]);
+}