@mui/x-charts-premium 9.0.3 → 9.1.0

package/CandlestickChart/CandlestickWebGLProgram.d.mts

@@ -2,18 +2,13 @@ import { type CandlestickPlotData } from "./useCandlestickPlotData.mjs";
 export declare class CandlestickWebGLProgram {
   private gl;
   private readonly shaders;
-  private readonly candleProgram;
-  private readonly candleVao;
-  private readonly candleCentersBuffer;
-  private readonly candleHeightsBuffer;
-  private readonly candleColorsBuffer;
-  private readonly wickProgram;
-  private readonly wickVao;
-  private readonly wickVerticesBuffer;
-  private readonly wickCentersBuffer;
-  private readonly wickHeightsBuffer;
-  private readonly wickColorsBuffer;
+  private readonly quadBuffer;
+  private readonly wickGeometryBuffer;
+  private readonly candle;
+  private readonly wick;
   constructor(gl: WebGL2RenderingContext);
+  private initCandleProgram;
+  private initWickProgram;
   setResolution(width: number, height: number): void;
   setCandleWidth(candleWidth: number): void;
   plot(plotData: CandlestickPlotData): void;

package/CandlestickChart/CandlestickWebGLProgram.d.ts

@@ -2,18 +2,13 @@ import { type CandlestickPlotData } from "./useCandlestickPlotData.js";
 export declare class CandlestickWebGLProgram {
   private gl;
   private readonly shaders;
-  private readonly candleProgram;
-  private readonly candleVao;
-  private readonly candleCentersBuffer;
-  private readonly candleHeightsBuffer;
-  private readonly candleColorsBuffer;
-  private readonly wickProgram;
-  private readonly wickVao;
-  private readonly wickVerticesBuffer;
-  private readonly wickCentersBuffer;
-  private readonly wickHeightsBuffer;
-  private readonly wickColorsBuffer;
+  private readonly quadBuffer;
+  private readonly wickGeometryBuffer;
+  private readonly candle;
+  private readonly wick;
   constructor(gl: WebGL2RenderingContext);
+  private initCandleProgram;
+  private initWickProgram;
   setResolution(width: number, height: number): void;
   setCandleWidth(candleWidth: number): void;
   plot(plotData: CandlestickPlotData): void;

package/CandlestickChart/CandlestickWebGLProgram.js

@@ -7,50 +7,103 @@ exports.CandlestickWebGLProgram = void 0;
 var _utils = require("../utils/webgl/utils");
 var _candleShaders = require("./candleShaders");
 var _wickShaders = require("./wickShaders");
+const QUAD_VERTICES = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+const WICK_VERTICES = new Float32Array([0, -1, 0, 1]);
 class CandlestickWebGLProgram {
   shaders = [];
-
-  // Candle program and buffers. If you add more WebGL resources, remember to dispose of them in the dispose() method.
-
-  // Wick program and buffers. If you add more WebGL resources, remember to dispose of them in the dispose() method.
-
   constructor(gl) {
     this.gl = gl;
     /* 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);
-    const candleProg = initializeProgram(this.gl, _candleShaders.candleVertexShader, _candleShaders.candleFragmentShader);
-    this.candleProgram = candleProg.program;
-    this.shaders.push(candleProg.fragmentShader);
-    this.shaders.push(candleProg.vertexShader);
-    this.candleVao = this.gl.createVertexArray();
-    this.candleCentersBuffer = this.gl.createBuffer();
-    this.candleHeightsBuffer = this.gl.createBuffer();
-    this.candleColorsBuffer = this.gl.createBuffer();
-    const wickProg = initializeProgram(this.gl, _wickShaders.wickVertexShader, _wickShaders.wickFragmentShader);
-    this.wickProgram = wickProg.program;
-    this.shaders.push(wickProg.fragmentShader);
-    this.shaders.push(wickProg.vertexShader);
-    this.wickVao = this.gl.createVertexArray();
-    this.wickVerticesBuffer = this.gl.createBuffer();
-    this.wickCentersBuffer = this.gl.createBuffer();
-    this.wickHeightsBuffer = this.gl.createBuffer();
-    this.wickColorsBuffer = this.gl.createBuffer();
+
+    /* Shared, write-once geometry buffers */
+    this.quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
+    this.wickGeometryBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.wickGeometryBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, WICK_VERTICES, gl.STATIC_DRAW);
+    this.candle = this.initCandleProgram();
+    this.wick = this.initWickProgram();
+  }
+  initCandleProgram() {
+    const gl = this.gl;
+    const {
+      program,
+      fragmentShader,
+      vertexShader
+    } = initializeProgram(gl, _candleShaders.candleVertexShader, _candleShaders.candleFragmentShader);
+    this.shaders.push(fragmentShader, vertexShader);
+    const vao = gl.createVertexArray();
+    const centers = (0, _utils.createGrowableBuffer)(gl);
+    const heights = (0, _utils.createGrowableBuffer)(gl);
+    const colors = (0, _utils.createGrowableBuffer)(gl);
+    gl.bindVertexArray(vao);
+
+    /* Quad geometry — shared, instanced over per-candle attributes. */
+    bindAttribute(gl, program, 'a_position', this.quadBuffer, 2, 0);
+    bindAttribute(gl, program, 'a_center', centers.buffer, 2, 1);
+    bindAttribute(gl, program, 'a_height', heights.buffer, 1, 1);
+    /* Colors live in a Uint8(Clamped)Array — 1 byte per channel, normalized to [0, 1]
+     * in the shader. 4x less GPU traffic than Float32 RGBA. */
+    bindAttribute(gl, program, 'a_color', colors.buffer, 4, 1, gl.UNSIGNED_BYTE, true);
+    gl.bindVertexArray(null);
+    return {
+      program,
+      vao,
+      centers,
+      heights,
+      colors,
+      uResolution: gl.getUniformLocation(program, 'u_resolution'),
+      uCandleWidth: gl.getUniformLocation(program, 'u_candle_width')
+    };
+  }
+  initWickProgram() {
+    const gl = this.gl;
+    const {
+      program,
+      fragmentShader,
+      vertexShader
+    } = initializeProgram(gl, _wickShaders.wickVertexShader, _wickShaders.wickFragmentShader);
+    this.shaders.push(fragmentShader, vertexShader);
+    const vao = gl.createVertexArray();
+    const centers = (0, _utils.createGrowableBuffer)(gl);
+    const heights = (0, _utils.createGrowableBuffer)(gl);
+    const colors = (0, _utils.createGrowableBuffer)(gl);
+    gl.bindVertexArray(vao);
+    bindAttribute(gl, program, 'a_position', this.wickGeometryBuffer, 2, 0);
+    bindAttribute(gl, program, 'a_center', centers.buffer, 2, 1);
+    bindAttribute(gl, program, 'a_height', heights.buffer, 1, 1);
+    bindAttribute(gl, program, 'a_wick_color', colors.buffer, 4, 1, gl.UNSIGNED_BYTE, true);
+    gl.bindVertexArray(null);
+    return {
+      program,
+      vao,
+      centers,
+      heights,
+      colors,
+      uResolution: gl.getUniformLocation(program, 'u_resolution'),
+      uCandleWidth: gl.getUniformLocation(program, 'u_candle_width')
+    };
   }
   setResolution(width, height) {
-    this.gl.useProgram(this.candleProgram);
-    this.gl.uniform2f(this.gl.getUniformLocation(this.candleProgram, 'u_resolution'), width, height);
-    this.gl.useProgram(this.wickProgram);
-    this.gl.uniform2f(this.gl.getUniformLocation(this.wickProgram, 'u_resolution'), width, height);
+    this.gl.useProgram(this.candle.program);
+    this.gl.uniform2f(this.candle.uResolution, width, height);
+    this.gl.useProgram(this.wick.program);
+    this.gl.uniform2f(this.wick.uResolution, width, height);
   }
   setCandleWidth(candleWidth) {
-    this.gl.useProgram(this.candleProgram);
-    this.gl.uniform1f(this.gl.getUniformLocation(this.candleProgram, 'u_candle_width'), candleWidth);
-    this.gl.useProgram(this.wickProgram);
-    this.gl.uniform1f(this.gl.getUniformLocation(this.wickProgram, 'u_candle_width'), candleWidth);
+    this.gl.useProgram(this.candle.program);
+    this.gl.uniform1f(this.candle.uCandleWidth, candleWidth);
+    this.gl.useProgram(this.wick.program);
+    this.gl.uniform1f(this.wick.uCandleWidth, candleWidth);
   }
   plot(plotData) {
+    const {
+      gl
+    } = this;
     const {
       candleCenters,
       candleHeights,
@@ -59,99 +112,58 @@ class CandlestickWebGLProgram {
       candleColors,
       wickColors
     } = plotData;
-
-    // Setup candle attributes
-
-    this.gl.useProgram(this.candleProgram);
-    this.gl.bindVertexArray(this.candleVao);
-    (0, _utils.bindQuadBuffer)(this.gl, this.candleProgram, (0, _utils.uploadQuadBuffer)(this.gl));
-
-    // Center attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.candleCentersBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, candleCenters, this.gl.STATIC_DRAW);
-    const candleCenterLocation = this.gl.getAttribLocation(this.candleProgram, 'a_center');
-    this.gl.enableVertexAttribArray(candleCenterLocation);
-    this.gl.vertexAttribPointer(candleCenterLocation, 2, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(candleCenterLocation, 1); // One per instance
-
-    // Height attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.candleHeightsBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, candleHeights, this.gl.STATIC_DRAW);
-    const candleHeightLocation = this.gl.getAttribLocation(this.candleProgram, 'a_height');
-    this.gl.enableVertexAttribArray(candleHeightLocation);
-    this.gl.vertexAttribPointer(candleHeightLocation, 1, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(candleHeightLocation, 1); // One per instance
-
-    // Color attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.candleColorsBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, candleColors, this.gl.STATIC_DRAW);
-    const candleColorLocation = this.gl.getAttribLocation(this.candleProgram, 'a_color');
-    this.gl.enableVertexAttribArray(candleColorLocation);
-    this.gl.vertexAttribPointer(candleColorLocation, 4, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(candleColorLocation, 1); // One per instance
-
-    this.gl.bindVertexArray(null);
-
-    // Setup wick attributes
-    this.gl.useProgram(this.wickProgram);
-    this.gl.bindVertexArray(this.wickVao);
-    const wickVertices = new Float32Array([0, -1, 0, 1]);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.wickVerticesBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, wickVertices, this.gl.STATIC_DRAW);
-    const aPosition = this.gl.getAttribLocation(this.wickProgram, 'a_position');
-    this.gl.enableVertexAttribArray(aPosition);
-    this.gl.vertexAttribPointer(aPosition, 2, this.gl.FLOAT, false, 0, 0);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.wickCentersBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, wickCenters, this.gl.STATIC_DRAW);
-    const wickCenterLocation = this.gl.getAttribLocation(this.wickProgram, 'a_center');
-    this.gl.enableVertexAttribArray(wickCenterLocation);
-    this.gl.vertexAttribPointer(wickCenterLocation, 2, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(wickCenterLocation, 1); // One per instance
-
-    // Height attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.wickHeightsBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, wickHeights, this.gl.STATIC_DRAW);
-    const wickHeightLocation = this.gl.getAttribLocation(this.wickProgram, 'a_height');
-    this.gl.enableVertexAttribArray(wickHeightLocation);
-    this.gl.vertexAttribPointer(wickHeightLocation, 1, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(wickHeightLocation, 1); // One per instance
-
-    // Color attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.wickColorsBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, wickColors, this.gl.STATIC_DRAW);
-    const wickColorLocation = this.gl.getAttribLocation(this.wickProgram, 'a_wick_color');
-    this.gl.enableVertexAttribArray(wickColorLocation);
-    this.gl.vertexAttribPointer(wickColorLocation, 4, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(wickColorLocation, 1); // One per instance
-
-    this.gl.bindVertexArray(null);
+    (0, _utils.uploadGrowableBuffer)(gl, this.candle.centers, candleCenters);
+    (0, _utils.uploadGrowableBuffer)(gl, this.candle.heights, candleHeights);
+    (0, _utils.uploadGrowableBuffer)(gl, this.candle.colors, candleColors);
+    (0, _utils.uploadGrowableBuffer)(gl, this.wick.centers, wickCenters);
+    (0, _utils.uploadGrowableBuffer)(gl, this.wick.heights, wickHeights);
+    (0, _utils.uploadGrowableBuffer)(gl, this.wick.colors, wickColors);
   }
   render(dataLength) {
-    this.gl.useProgram(this.wickProgram);
-    (0, _utils.logWebGLErrors)(this.gl);
-    this.gl.bindVertexArray(this.wickVao);
-    this.gl.drawArraysInstanced(this.gl.LINES, 0, 2, dataLength * 2);
-    this.gl.useProgram(this.candleProgram);
-    (0, _utils.logWebGLErrors)(this.gl);
-    this.gl.bindVertexArray(this.candleVao);
-    this.gl.drawArraysInstanced(this.gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    if (dataLength === 0) {
+      return;
+    }
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.wick.program);
+    gl.bindVertexArray(this.wick.vao);
+    gl.drawArraysInstanced(gl.LINES, 0, 2, dataLength * 2);
+    (0, _utils.logWebGLErrors)(gl);
+    gl.useProgram(this.candle.program);
+    gl.bindVertexArray(this.candle.vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    (0, _utils.logWebGLErrors)(gl);
   }
   dispose() {
-    this.gl.deleteProgram(this.candleProgram);
-    this.gl.deleteVertexArray(this.candleVao);
-    this.gl.deleteBuffer(this.candleCentersBuffer);
-    this.gl.deleteBuffer(this.candleHeightsBuffer);
-    this.gl.deleteBuffer(this.candleColorsBuffer);
-    this.gl.deleteProgram(this.wickProgram);
-    this.gl.deleteVertexArray(this.wickVao);
-    this.gl.deleteBuffer(this.wickVerticesBuffer);
-    this.gl.deleteBuffer(this.wickCentersBuffer);
-    this.gl.deleteBuffer(this.wickHeightsBuffer);
-    this.gl.deleteBuffer(this.wickColorsBuffer);
-    this.shaders.forEach(shader => this.gl.deleteShader(shader));
+    const {
+      gl
+    } = this;
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteBuffer(this.wickGeometryBuffer);
+    gl.deleteProgram(this.candle.program);
+    gl.deleteVertexArray(this.candle.vao);
+    gl.deleteBuffer(this.candle.centers.buffer);
+    gl.deleteBuffer(this.candle.heights.buffer);
+    gl.deleteBuffer(this.candle.colors.buffer);
+    gl.deleteProgram(this.wick.program);
+    gl.deleteVertexArray(this.wick.vao);
+    gl.deleteBuffer(this.wick.centers.buffer);
+    gl.deleteBuffer(this.wick.heights.buffer);
+    gl.deleteBuffer(this.wick.colors.buffer);
+    this.shaders.forEach(shader => gl.deleteShader(shader));
   }
 }
 exports.CandlestickWebGLProgram = CandlestickWebGLProgram;
+function bindAttribute(gl, program, name, buffer, size, divisor, type = gl.FLOAT, normalized = false) {
+  const location = gl.getAttribLocation(program, name);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, size, type, normalized, 0, 0);
+  if (divisor !== 0) {
+    gl.vertexAttribDivisor(location, divisor);
+  }
+}
 function initializeProgram(gl, vertexShaderSource, fragmentShaderSource) {
   const program = gl.createProgram();
   const vertexShader = (0, _utils.compileShader)(gl, vertexShaderSource, gl.VERTEX_SHADER);
@@ -160,11 +172,14 @@ function initializeProgram(gl, vertexShaderSource, fragmentShaderSource) {
   gl.attachShader(program, fragmentShader);
   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)}`);
+  /* Only inspect link status when linking actually failed; the parameter call stalls the pipeline.
+   * https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails */
+  if (process.env.NODE_ENV !== 'production') {
+    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)}`);
+    }
   }
   return {
     program,

package/CandlestickChart/CandlestickWebGLProgram.mjs

@@ -1,50 +1,103 @@
-import { bindQuadBuffer, compileShader, logWebGLErrors, uploadQuadBuffer } from "../utils/webgl/utils.mjs";
+import { compileShader, createGrowableBuffer, logWebGLErrors, uploadGrowableBuffer } from "../utils/webgl/utils.mjs";
 import { candleFragmentShader, candleVertexShader } from "./candleShaders.mjs";
 import { wickFragmentShader, wickVertexShader } from "./wickShaders.mjs";
+const QUAD_VERTICES = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+const WICK_VERTICES = new Float32Array([0, -1, 0, 1]);
 export class CandlestickWebGLProgram {
   shaders = [];
-
-  // Candle program and buffers. If you add more WebGL resources, remember to dispose of them in the dispose() method.
-
-  // Wick program and buffers. If you add more WebGL resources, remember to dispose of them in the dispose() method.
-
   constructor(gl) {
     this.gl = gl;
     /* 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);
-    const candleProg = initializeProgram(this.gl, candleVertexShader, candleFragmentShader);
-    this.candleProgram = candleProg.program;
-    this.shaders.push(candleProg.fragmentShader);
-    this.shaders.push(candleProg.vertexShader);
-    this.candleVao = this.gl.createVertexArray();
-    this.candleCentersBuffer = this.gl.createBuffer();
-    this.candleHeightsBuffer = this.gl.createBuffer();
-    this.candleColorsBuffer = this.gl.createBuffer();
-    const wickProg = initializeProgram(this.gl, wickVertexShader, wickFragmentShader);
-    this.wickProgram = wickProg.program;
-    this.shaders.push(wickProg.fragmentShader);
-    this.shaders.push(wickProg.vertexShader);
-    this.wickVao = this.gl.createVertexArray();
-    this.wickVerticesBuffer = this.gl.createBuffer();
-    this.wickCentersBuffer = this.gl.createBuffer();
-    this.wickHeightsBuffer = this.gl.createBuffer();
-    this.wickColorsBuffer = this.gl.createBuffer();
+
+    /* Shared, write-once geometry buffers */
+    this.quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
+    this.wickGeometryBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.wickGeometryBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, WICK_VERTICES, gl.STATIC_DRAW);
+    this.candle = this.initCandleProgram();
+    this.wick = this.initWickProgram();
+  }
+  initCandleProgram() {
+    const gl = this.gl;
+    const {
+      program,
+      fragmentShader,
+      vertexShader
+    } = initializeProgram(gl, candleVertexShader, candleFragmentShader);
+    this.shaders.push(fragmentShader, vertexShader);
+    const vao = gl.createVertexArray();
+    const centers = createGrowableBuffer(gl);
+    const heights = createGrowableBuffer(gl);
+    const colors = createGrowableBuffer(gl);
+    gl.bindVertexArray(vao);
+
+    /* Quad geometry — shared, instanced over per-candle attributes. */
+    bindAttribute(gl, program, 'a_position', this.quadBuffer, 2, 0);
+    bindAttribute(gl, program, 'a_center', centers.buffer, 2, 1);
+    bindAttribute(gl, program, 'a_height', heights.buffer, 1, 1);
+    /* Colors live in a Uint8(Clamped)Array — 1 byte per channel, normalized to [0, 1]
+     * in the shader. 4x less GPU traffic than Float32 RGBA. */
+    bindAttribute(gl, program, 'a_color', colors.buffer, 4, 1, gl.UNSIGNED_BYTE, true);
+    gl.bindVertexArray(null);
+    return {
+      program,
+      vao,
+      centers,
+      heights,
+      colors,
+      uResolution: gl.getUniformLocation(program, 'u_resolution'),
+      uCandleWidth: gl.getUniformLocation(program, 'u_candle_width')
+    };
+  }
+  initWickProgram() {
+    const gl = this.gl;
+    const {
+      program,
+      fragmentShader,
+      vertexShader
+    } = initializeProgram(gl, wickVertexShader, wickFragmentShader);
+    this.shaders.push(fragmentShader, vertexShader);
+    const vao = gl.createVertexArray();
+    const centers = createGrowableBuffer(gl);
+    const heights = createGrowableBuffer(gl);
+    const colors = createGrowableBuffer(gl);
+    gl.bindVertexArray(vao);
+    bindAttribute(gl, program, 'a_position', this.wickGeometryBuffer, 2, 0);
+    bindAttribute(gl, program, 'a_center', centers.buffer, 2, 1);
+    bindAttribute(gl, program, 'a_height', heights.buffer, 1, 1);
+    bindAttribute(gl, program, 'a_wick_color', colors.buffer, 4, 1, gl.UNSIGNED_BYTE, true);
+    gl.bindVertexArray(null);
+    return {
+      program,
+      vao,
+      centers,
+      heights,
+      colors,
+      uResolution: gl.getUniformLocation(program, 'u_resolution'),
+      uCandleWidth: gl.getUniformLocation(program, 'u_candle_width')
+    };
   }
   setResolution(width, height) {
-    this.gl.useProgram(this.candleProgram);
-    this.gl.uniform2f(this.gl.getUniformLocation(this.candleProgram, 'u_resolution'), width, height);
-    this.gl.useProgram(this.wickProgram);
-    this.gl.uniform2f(this.gl.getUniformLocation(this.wickProgram, 'u_resolution'), width, height);
+    this.gl.useProgram(this.candle.program);
+    this.gl.uniform2f(this.candle.uResolution, width, height);
+    this.gl.useProgram(this.wick.program);
+    this.gl.uniform2f(this.wick.uResolution, width, height);
   }
   setCandleWidth(candleWidth) {
-    this.gl.useProgram(this.candleProgram);
-    this.gl.uniform1f(this.gl.getUniformLocation(this.candleProgram, 'u_candle_width'), candleWidth);
-    this.gl.useProgram(this.wickProgram);
-    this.gl.uniform1f(this.gl.getUniformLocation(this.wickProgram, 'u_candle_width'), candleWidth);
+    this.gl.useProgram(this.candle.program);
+    this.gl.uniform1f(this.candle.uCandleWidth, candleWidth);
+    this.gl.useProgram(this.wick.program);
+    this.gl.uniform1f(this.wick.uCandleWidth, candleWidth);
   }
   plot(plotData) {
+    const {
+      gl
+    } = this;
     const {
       candleCenters,
       candleHeights,
@@ -53,96 +106,55 @@ export class CandlestickWebGLProgram {
       candleColors,
       wickColors
     } = plotData;
-
-    // Setup candle attributes
-
-    this.gl.useProgram(this.candleProgram);
-    this.gl.bindVertexArray(this.candleVao);
-    bindQuadBuffer(this.gl, this.candleProgram, uploadQuadBuffer(this.gl));
-
-    // Center attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.candleCentersBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, candleCenters, this.gl.STATIC_DRAW);
-    const candleCenterLocation = this.gl.getAttribLocation(this.candleProgram, 'a_center');
-    this.gl.enableVertexAttribArray(candleCenterLocation);
-    this.gl.vertexAttribPointer(candleCenterLocation, 2, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(candleCenterLocation, 1); // One per instance
-
-    // Height attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.candleHeightsBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, candleHeights, this.gl.STATIC_DRAW);
-    const candleHeightLocation = this.gl.getAttribLocation(this.candleProgram, 'a_height');
-    this.gl.enableVertexAttribArray(candleHeightLocation);
-    this.gl.vertexAttribPointer(candleHeightLocation, 1, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(candleHeightLocation, 1); // One per instance
-
-    // Color attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.candleColorsBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, candleColors, this.gl.STATIC_DRAW);
-    const candleColorLocation = this.gl.getAttribLocation(this.candleProgram, 'a_color');
-    this.gl.enableVertexAttribArray(candleColorLocation);
-    this.gl.vertexAttribPointer(candleColorLocation, 4, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(candleColorLocation, 1); // One per instance
-
-    this.gl.bindVertexArray(null);
-
-    // Setup wick attributes
-    this.gl.useProgram(this.wickProgram);
-    this.gl.bindVertexArray(this.wickVao);
-    const wickVertices = new Float32Array([0, -1, 0, 1]);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.wickVerticesBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, wickVertices, this.gl.STATIC_DRAW);
-    const aPosition = this.gl.getAttribLocation(this.wickProgram, 'a_position');
-    this.gl.enableVertexAttribArray(aPosition);
-    this.gl.vertexAttribPointer(aPosition, 2, this.gl.FLOAT, false, 0, 0);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.wickCentersBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, wickCenters, this.gl.STATIC_DRAW);
-    const wickCenterLocation = this.gl.getAttribLocation(this.wickProgram, 'a_center');
-    this.gl.enableVertexAttribArray(wickCenterLocation);
-    this.gl.vertexAttribPointer(wickCenterLocation, 2, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(wickCenterLocation, 1); // One per instance
-
-    // Height attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.wickHeightsBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, wickHeights, this.gl.STATIC_DRAW);
-    const wickHeightLocation = this.gl.getAttribLocation(this.wickProgram, 'a_height');
-    this.gl.enableVertexAttribArray(wickHeightLocation);
-    this.gl.vertexAttribPointer(wickHeightLocation, 1, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(wickHeightLocation, 1); // One per instance
-
-    // Color attribute
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.wickColorsBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, wickColors, this.gl.STATIC_DRAW);
-    const wickColorLocation = this.gl.getAttribLocation(this.wickProgram, 'a_wick_color');
-    this.gl.enableVertexAttribArray(wickColorLocation);
-    this.gl.vertexAttribPointer(wickColorLocation, 4, this.gl.FLOAT, false, 0, 0);
-    this.gl.vertexAttribDivisor(wickColorLocation, 1); // One per instance
-
-    this.gl.bindVertexArray(null);
+    uploadGrowableBuffer(gl, this.candle.centers, candleCenters);
+    uploadGrowableBuffer(gl, this.candle.heights, candleHeights);
+    uploadGrowableBuffer(gl, this.candle.colors, candleColors);
+    uploadGrowableBuffer(gl, this.wick.centers, wickCenters);
+    uploadGrowableBuffer(gl, this.wick.heights, wickHeights);
+    uploadGrowableBuffer(gl, this.wick.colors, wickColors);
   }
   render(dataLength) {
-    this.gl.useProgram(this.wickProgram);
-    logWebGLErrors(this.gl);
-    this.gl.bindVertexArray(this.wickVao);
-    this.gl.drawArraysInstanced(this.gl.LINES, 0, 2, dataLength * 2);
-    this.gl.useProgram(this.candleProgram);
-    logWebGLErrors(this.gl);
-    this.gl.bindVertexArray(this.candleVao);
-    this.gl.drawArraysInstanced(this.gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    if (dataLength === 0) {
+      return;
+    }
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.wick.program);
+    gl.bindVertexArray(this.wick.vao);
+    gl.drawArraysInstanced(gl.LINES, 0, 2, dataLength * 2);
+    logWebGLErrors(gl);
+    gl.useProgram(this.candle.program);
+    gl.bindVertexArray(this.candle.vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    logWebGLErrors(gl);
   }
   dispose() {
-    this.gl.deleteProgram(this.candleProgram);
-    this.gl.deleteVertexArray(this.candleVao);
-    this.gl.deleteBuffer(this.candleCentersBuffer);
-    this.gl.deleteBuffer(this.candleHeightsBuffer);
-    this.gl.deleteBuffer(this.candleColorsBuffer);
-    this.gl.deleteProgram(this.wickProgram);
-    this.gl.deleteVertexArray(this.wickVao);
-    this.gl.deleteBuffer(this.wickVerticesBuffer);
-    this.gl.deleteBuffer(this.wickCentersBuffer);
-    this.gl.deleteBuffer(this.wickHeightsBuffer);
-    this.gl.deleteBuffer(this.wickColorsBuffer);
-    this.shaders.forEach(shader => this.gl.deleteShader(shader));
+    const {
+      gl
+    } = this;
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteBuffer(this.wickGeometryBuffer);
+    gl.deleteProgram(this.candle.program);
+    gl.deleteVertexArray(this.candle.vao);
+    gl.deleteBuffer(this.candle.centers.buffer);
+    gl.deleteBuffer(this.candle.heights.buffer);
+    gl.deleteBuffer(this.candle.colors.buffer);
+    gl.deleteProgram(this.wick.program);
+    gl.deleteVertexArray(this.wick.vao);
+    gl.deleteBuffer(this.wick.centers.buffer);
+    gl.deleteBuffer(this.wick.heights.buffer);
+    gl.deleteBuffer(this.wick.colors.buffer);
+    this.shaders.forEach(shader => gl.deleteShader(shader));
+  }
+}
+function bindAttribute(gl, program, name, buffer, size, divisor, type = gl.FLOAT, normalized = false) {
+  const location = gl.getAttribLocation(program, name);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, size, type, normalized, 0, 0);
+  if (divisor !== 0) {
+    gl.vertexAttribDivisor(location, divisor);
   }
 }
 function initializeProgram(gl, vertexShaderSource, fragmentShaderSource) {
@@ -153,11 +165,14 @@ function initializeProgram(gl, vertexShaderSource, fragmentShaderSource) {
   gl.attachShader(program, fragmentShader);
   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)}`);
+  /* Only inspect link status when linking actually failed; the parameter call stalls the pipeline.
+   * https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails */
+  if (process.env.NODE_ENV !== 'production') {
+    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)}`);
+    }
   }
   return {
     program,