@mui/x-charts-premium 9.1.0 → 9.2.0

package/BarChartPremium/webgl/BarWebGLPlot.d.mts

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

package/BarChartPremium/webgl/BarWebGLPlot.d.ts

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

package/BarChartPremium/webgl/BarWebGLPlot.js

@@ -0,0 +1,81 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarWebGLPlot = BarWebGLPlot;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _internals = require("@mui/x-charts/internals");
+var _ChartsWebGLContext = require("../../ChartsWebGLLayer/ChartsWebGLContext");
+var _BarWebGLProgram = require("./BarWebGLProgram");
+var _useBarWebGLPlotData = require("./useBarWebGLPlotData");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - Internal component used for rendering the bar plot using WebGL. Not exported from the package.
+ */
+function BarWebGLPlot({
+  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, _internals.useBarPlotData)(drawingArea, xAxes, yAxes);
+  if (!layer) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarWebGLPlotImpl, {
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
+    borderRadius: borderRadius,
+    completedData: completedData
+  });
+}
+function BarWebGLPlotImpl(props) {
+  const {
+    gl,
+    registerDraw,
+    requestRender,
+    borderRadius,
+    completedData
+  } = props;
+  const drawingArea = (0, _hooks.useDrawingArea)();
+  const plotData = (0, _useBarWebGLPlotData.useBarWebGLPlotData)(drawingArea, completedData, borderRadius);
+  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/webgl/BarWebGLPlot.mjs

@@ -0,0 +1,75 @@
+'use client';
+
+import * as React from 'react';
+import { useDrawingArea, useXAxes, useYAxes } from '@mui/x-charts/hooks';
+import { useBarPlotData } from '@mui/x-charts/internals';
+import { useWebGLLayer } from "../../ChartsWebGLLayer/ChartsWebGLContext.mjs";
+import { BarWebGLProgram } from "./BarWebGLProgram.mjs";
+import { useBarWebGLPlotData } from "./useBarWebGLPlotData.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - Internal component used for rendering the bar plot using WebGL. Not exported from the package.
+ */
+export function BarWebGLPlot({
+  borderRadius = 0
+}) {
+  const layer = useWebGLLayer();
+  const drawingArea = useDrawingArea();
+  const {
+    xAxis: xAxes
+  } = useXAxes();
+  const {
+    yAxis: yAxes
+  } = useYAxes();
+  const {
+    completedData
+  } = useBarPlotData(drawingArea, xAxes, yAxes);
+  if (!layer) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(BarWebGLPlotImpl, {
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
+    borderRadius: borderRadius,
+    completedData: completedData
+  });
+}
+function BarWebGLPlotImpl(props) {
+  const {
+    gl,
+    registerDraw,
+    requestRender,
+    borderRadius,
+    completedData
+  } = props;
+  const drawingArea = useDrawingArea();
+  const plotData = useBarWebGLPlotData(drawingArea, completedData, borderRadius);
+  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/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;