@pharos-ds/charts 0.0.0-stage → 1.0.10

package/dist/marks/dotGLInteractive.js

@@ -0,0 +1,584 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/dotGLInteractive.tsx
+ * @output WebGL scatter with GPU color-picking for O(1) nearest-point hover
+ *
+ * Each point gets a unique color encoding its index. On hover, readPixels
+ * from an offscreen framebuffer decodes the hovered index — no JS iteration.
+ *
+ * Two GL contexts (visible + offscreen pick) plus their programs, buffers,
+ * framebuffer, and pick texture are created once and reused. The pick texture
+ * is re-allocated only when the drawing-buffer size changes, and everything is
+ * released (both contexts eagerly lost) on unmount. Recovers from context loss.
+ */
+
+import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
+import { hexToGL, createProgram, registerContextLossHandlers, loseContext } from "../webgl.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Extra radius (CSS px) added to each point in the pick pass only, so hover
+ * feels "magnetic" — you don't have to land pixel-perfectly on a small dot.
+ * The visible pass is unaffected, so dots still render at their real size.
+ */
+const HIT_PADDING = 16;
+
+/** Encode a point index as an RGB color (supports up to 16.7M points) */
+function indexToColor(i) {
+  const id = i + 1;
+  return [(id >> 16 & 0xff) / 255, (id >> 8 & 0xff) / 255, (id & 0xff) / 255];
+}
+
+/** Decode an RGB pixel back to a point index. Returns -1 for background. */
+function colorToIndex(r, g, b) {
+  if (r === 0 && g === 0 && b === 0) {
+    return -1;
+  }
+  return (r << 16 | g << 8 | b) - 1;
+}
+
+// Visible pass
+const VERT_VIS = `
+  attribute vec2 a_position;
+  uniform vec2 u_resolution;
+  uniform float u_size;
+  void main() {
+    vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    gl_PointSize = u_size;
+  }
+`;
+const FRAG_VIS = `
+  precision mediump float;
+  uniform vec3 u_color;
+  uniform float u_opacity;
+  void main() {
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    if (dot(coord, coord) > 0.25) discard;
+    gl_FragColor = vec4(u_color, u_opacity);
+  }
+`;
+
+// Pick pass — encode index as color
+const VERT_PICK = `
+  attribute vec2 a_position;
+  attribute vec3 a_pickColor;
+  uniform vec2 u_resolution;
+  uniform float u_size;
+  varying vec3 v_pickColor;
+  void main() {
+    vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    gl_PointSize = u_size;
+    v_pickColor = a_pickColor;
+  }
+`;
+const FRAG_PICK = `
+  precision mediump float;
+  varying vec3 v_pickColor;
+  void main() {
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    if (dot(coord, coord) > 0.25) discard;
+    gl_FragColor = vec4(v_pickColor, 1.0);
+  }
+`;
+
+/**
+ * Inline component — manages visible + pick canvases and hover state.
+ */
+function DotGLInteractiveCanvas({
+  resolved,
+  color,
+  size,
+  opacity,
+  width,
+  height,
+  data,
+  renderTooltip
+}) {
+  const visCanvasRef = useRef(null);
+  const pickCanvasRef = useRef(null);
+  const [hoverIndex, setHoverIndex] = useState(-1);
+  const [mousePos, setMousePos] = useState(null);
+  // Bumped on context restore to force the render effect to rebuild + repaint.
+  const [contextEpoch, setContextEpoch] = useState(0);
+  const visGLRef = useRef(null);
+  const visBufRef = useRef(null);
+  const pickGLRef = useRef(null);
+  const pickPosBufRef = useRef(null);
+  const pickColBufRef = useRef(null);
+
+  // Positions and pick colors are index-aligned with `resolved` (and thus with
+  // `data`); do NOT drop entries here or hover decode would map to wrong rows.
+  // Non-finite points get NaN clip positions and simply don't rasterize.
+  const positions = useMemo(() => {
+    const pos = new Float32Array(resolved.length * 2);
+    for (let i = 0; i < resolved.length; i++) {
+      pos[i * 2] = resolved[i].px;
+      pos[i * 2 + 1] = resolved[i].py;
+    }
+    return pos;
+  }, [resolved]);
+  const pickColors = useMemo(() => {
+    const colors = new Float32Array(resolved.length * 3);
+    for (let i = 0; i < resolved.length; i++) {
+      const [r, g, b] = indexToColor(i);
+      colors[i * 3] = r;
+      colors[i * 3 + 1] = g;
+      colors[i * 3 + 2] = b;
+    }
+    return colors;
+  }, [resolved.length]);
+
+  // Render both passes. Contexts, programs, buffers, framebuffer, and pick
+  // texture are created once and reused; only vertex data + uniforms upload per
+  // run, and the pick texture re-allocates only when the buffer size changes.
+  useEffect(() => {
+    if (width <= 0 || height <= 0) {
+      return;
+    }
+    const dpr = window.devicePixelRatio || 1;
+    const bufW = Math.max(1, Math.round(width * dpr));
+    const bufH = Math.max(1, Math.round(height * dpr));
+
+    // ── Visible pass ──
+    const visCanvas = visCanvasRef.current;
+    if (visCanvas) {
+      if (visCanvas.width !== bufW) {
+        visCanvas.width = bufW;
+      }
+      if (visCanvas.height !== bufH) {
+        visCanvas.height = bufH;
+      }
+      if (!visGLRef.current) {
+        const gl = visCanvas.getContext('webgl', {
+          alpha: true,
+          premultipliedAlpha: false,
+          antialias: true
+        });
+        const prog = gl ? createProgram(gl, VERT_VIS, FRAG_VIS) : null;
+        if (gl && prog) {
+          visGLRef.current = {
+            gl,
+            prog
+          };
+          visBufRef.current = null;
+        }
+      }
+      const vis = visGLRef.current;
+      if (vis && !vis.gl.isContextLost()) {
+        const {
+          gl,
+          prog
+        } = vis;
+        if (!visBufRef.current) {
+          visBufRef.current = gl.createBuffer();
+        }
+        const buf = visBufRef.current;
+        if (buf) {
+          gl.viewport(0, 0, visCanvas.width, visCanvas.height);
+          gl.clearColor(0, 0, 0, 0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.enable(gl.BLEND);
+          gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+          gl.useProgram(prog);
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+          const aPos = gl.getAttribLocation(prog, 'a_position');
+          gl.enableVertexAttribArray(aPos);
+          gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+          const [r, g, b] = hexToGL(color);
+          gl.uniform2f(gl.getUniformLocation(prog, 'u_resolution'), width, height);
+          gl.uniform3f(gl.getUniformLocation(prog, 'u_color'), r, g, b);
+          gl.uniform1f(gl.getUniformLocation(prog, 'u_size'), size * dpr);
+          gl.uniform1f(gl.getUniformLocation(prog, 'u_opacity'), opacity);
+          gl.drawArrays(gl.POINTS, 0, positions.length / 2);
+        }
+      }
+    }
+
+    // ── Pick pass (offscreen framebuffer) ──
+    const pickCanvas = pickCanvasRef.current;
+    if (pickCanvas) {
+      if (pickCanvas.width !== bufW) {
+        pickCanvas.width = bufW;
+      }
+      if (pickCanvas.height !== bufH) {
+        pickCanvas.height = bufH;
+      }
+      if (!pickGLRef.current) {
+        const gl = pickCanvas.getContext('webgl', {
+          alpha: false,
+          premultipliedAlpha: false,
+          antialias: false,
+          preserveDrawingBuffer: true
+        });
+        if (gl) {
+          const prog = createProgram(gl, VERT_PICK, FRAG_PICK);
+          const fb = gl.createFramebuffer();
+          const tex = gl.createTexture();
+          if (prog && fb && tex) {
+            gl.bindTexture(gl.TEXTURE_2D, tex);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            pickGLRef.current = {
+              gl,
+              prog,
+              fb,
+              tex,
+              texW: 0,
+              texH: 0,
+              dpr
+            };
+            pickPosBufRef.current = null;
+            pickColBufRef.current = null;
+          }
+        }
+      }
+      const pick = pickGLRef.current;
+      if (pick && !pick.gl.isContextLost()) {
+        const {
+          gl,
+          prog,
+          fb,
+          tex
+        } = pick;
+        pick.dpr = dpr;
+
+        // (Re)allocate the pick texture only when the buffer size changes.
+        if (pick.texW !== pickCanvas.width || pick.texH !== pickCanvas.height) {
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, pickCanvas.width, pickCanvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+          pick.texW = pickCanvas.width;
+          pick.texH = pickCanvas.height;
+        }
+        if (!pickPosBufRef.current) {
+          pickPosBufRef.current = gl.createBuffer();
+        }
+        if (!pickColBufRef.current) {
+          pickColBufRef.current = gl.createBuffer();
+        }
+        const posBuf = pickPosBufRef.current;
+        const colBuf = pickColBufRef.current;
+        if (posBuf && colBuf) {
+          gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+          gl.viewport(0, 0, pickCanvas.width, pickCanvas.height);
+          gl.clearColor(0, 0, 0, 1);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.disable(gl.BLEND);
+          gl.useProgram(prog);
+          gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
+          gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+          const aPos = gl.getAttribLocation(prog, 'a_position');
+          gl.enableVertexAttribArray(aPos);
+          gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+          gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
+          gl.bufferData(gl.ARRAY_BUFFER, pickColors, gl.STATIC_DRAW);
+          const aCol = gl.getAttribLocation(prog, 'a_pickColor');
+          gl.enableVertexAttribArray(aCol);
+          gl.vertexAttribPointer(aCol, 3, gl.FLOAT, false, 0, 0);
+          gl.uniform2f(gl.getUniformLocation(prog, 'u_resolution'), width, height);
+          gl.uniform1f(gl.getUniformLocation(prog, 'u_size'), (size + HIT_PADDING) * dpr);
+          gl.drawArrays(gl.POINTS, 0, positions.length / 2);
+          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        }
+      }
+    }
+  }, [width, height, positions, pickColors, color, size, opacity, contextEpoch]);
+
+  // Register context-loss recovery for both canvases (runs once post-mount).
+  useEffect(() => {
+    const cleanups = [];
+    const visCanvas = visCanvasRef.current;
+    if (visCanvas) {
+      cleanups.push(registerContextLossHandlers(visCanvas, () => {
+        visGLRef.current = null;
+        visBufRef.current = null;
+      }, () => setContextEpoch(e => e + 1)));
+    }
+    const pickCanvas = pickCanvasRef.current;
+    if (pickCanvas) {
+      cleanups.push(registerContextLossHandlers(pickCanvas, () => {
+        pickGLRef.current = null;
+        pickPosBufRef.current = null;
+        pickColBufRef.current = null;
+      }, () => setContextEpoch(e => e + 1)));
+    }
+    return () => {
+      for (const c of cleanups) {
+        c();
+      }
+    };
+  }, []);
+
+  // Release both GL contexts and all their resources on unmount.
+  useEffect(() => {
+    return () => {
+      const vis = visGLRef.current;
+      if (vis) {
+        const {
+          gl,
+          prog
+        } = vis;
+        if (visBufRef.current) {
+          gl.deleteBuffer(visBufRef.current);
+        }
+        gl.deleteProgram(prog);
+        loseContext(gl);
+      }
+      const pick = pickGLRef.current;
+      if (pick) {
+        const {
+          gl,
+          prog,
+          fb,
+          tex
+        } = pick;
+        if (pickPosBufRef.current) {
+          gl.deleteBuffer(pickPosBufRef.current);
+        }
+        if (pickColBufRef.current) {
+          gl.deleteBuffer(pickColBufRef.current);
+        }
+        gl.deleteFramebuffer(fb);
+        gl.deleteTexture(tex);
+        gl.deleteProgram(prog);
+        loseContext(gl);
+      }
+      visGLRef.current = null;
+      visBufRef.current = null;
+      pickGLRef.current = null;
+      pickPosBufRef.current = null;
+      pickColBufRef.current = null;
+    };
+  }, []);
+  const handleMouseMove = useCallback(e => {
+    const pick = pickGLRef.current;
+    if (!pick || pick.gl.isContextLost()) {
+      return;
+    }
+    const svg = e.currentTarget.ownerSVGElement;
+    if (!svg) {
+      return;
+    }
+    const ctm = e.currentTarget.getScreenCTM();
+    if (!ctm) {
+      return;
+    }
+    const pt = svg.createSVGPoint();
+    pt.x = e.clientX;
+    pt.y = e.clientY;
+    const local = pt.matrixTransform(ctm.inverse());
+
+    // Use the DPR the pick framebuffer was built with so pixel math stays in
+    // sync even if devicePixelRatio changed since the last render.
+    const {
+      gl,
+      fb,
+      dpr,
+      texW,
+      texH
+    } = pick;
+    const px = Math.floor(local.x * dpr);
+    const py = Math.floor(local.y * dpr);
+    if (px < 0 || py < 0 || px >= texW || py >= texH) {
+      setHoverIndex(-1);
+      setMousePos(null);
+      return;
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+    const pixel = new Uint8Array(4);
+    // Flip Y from top-origin CSS space to the framebuffer's bottom-left,
+    // 0-indexed origin. `texH - 1 - py` (not `texH - py`) keeps the read in
+    // [0, texH-1] — the bare `texH - py` reads one row too high and samples
+    // out of bounds at the very top edge.
+    gl.readPixels(px, texH - 1 - py, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    const idx = colorToIndex(pixel[0], pixel[1], pixel[2]);
+    setHoverIndex(idx);
+    setMousePos(idx >= 0 ? {
+      x: local.x,
+      y: local.y
+    } : null);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setHoverIndex(-1);
+    setMousePos(null);
+  }, []);
+  const datum = hoverIndex >= 0 && hoverIndex < data.length ? data[hoverIndex] : null;
+  const defaultTooltip = (d, i) => /*#__PURE__*/_jsxs("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2,
+      fontSize: 12
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        fontWeight: 600,
+        color: 'var(--color-text-primary)'
+      },
+      children: ["Point ", i]
+    }), Object.entries(d).map(([k, v]) => /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxs("span", {
+        style: {
+          color: 'var(--color-text-secondary)'
+        },
+        children: [k, ":"]
+      }), ' ', /*#__PURE__*/_jsx("span", {
+        style: {
+          fontWeight: 500
+        },
+        children: String(v)
+      })]
+    }, k))]
+  });
+  return /*#__PURE__*/_jsxs("g", {
+    children: [/*#__PURE__*/_jsx("foreignObject", {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height,
+      style: {
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx("canvas", {
+        ref: visCanvasRef,
+        style: {
+          width,
+          height,
+          pointerEvents: 'none'
+        }
+      })
+    }), /*#__PURE__*/_jsx("foreignObject", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      style: {
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx("canvas", {
+        ref: pickCanvasRef,
+        style: {
+          display: 'none'
+        }
+      })
+    }), /*#__PURE__*/_jsx("rect", {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height,
+      fill: "transparent",
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave
+    }), datum && hoverIndex >= 0 && /*#__PURE__*/_jsxs("g", {
+      pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx("circle", {
+        cx: positions[hoverIndex * 2],
+        cy: positions[hoverIndex * 2 + 1],
+        r: size / 2 + 7,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2,
+        strokeOpacity: 0.35
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: positions[hoverIndex * 2],
+        cy: positions[hoverIndex * 2 + 1],
+        r: size / 2 + 2.5,
+        fill: color,
+        stroke: "var(--color-background-body, #fff)",
+        strokeWidth: 2
+      })]
+    }), datum && mousePos && /*#__PURE__*/_jsx("foreignObject", {
+      x: mousePos.x + 12,
+      y: Math.max(0, mousePos.y - 40),
+      width: 200,
+      height: 120,
+      pointerEvents: "none",
+      style: {
+        overflow: 'visible'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          background: 'var(--color-background-popover)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 8,
+          padding: '8px 12px',
+          boxShadow: 'var(--shadow-med)',
+          whiteSpace: 'nowrap',
+          width: 'fit-content'
+        },
+        children: renderTooltip ? renderTooltip(datum, hoverIndex) : defaultTooltip(datum, hoverIndex)
+      })
+    })]
+  });
+}
+
+/**
+ * WebGL scatter with GPU color-picking hover. O(1) hit detection via offscreen
+ * framebuffer — no JS iteration regardless of point count.
+ *
+ * @example
+ * ```
+ * series={[dotGLInteractive('value', {
+ *   color: '#4f46e5',
+ *   renderTooltip: (d, i) => <span>{d.name}: {d.value}</span>,
+ * })]}
+ * ```
+ */
+export function dotGLInteractive(dataKey, options) {
+  const {
+    color
+  } = options;
+  const size = options.size ?? 6;
+  const opacity = options.opacity ?? 0.8;
+  const renderTooltip = options.renderTooltip;
+  return {
+    type: 'dotGLInteractive',
+    key: dataKey,
+    dataKeys: [dataKey],
+    layout: {},
+    resolve(ctx) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let px;
+        if ('bandwidth' in xScale) {
+          px = (xScale(String(d[xKey])) ?? 0) + xScale.bandwidth() / 2;
+        } else {
+          px = xScale(d[xKey]);
+        }
+        const v = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
+        points.push({
+          px,
+          py: yScale(v),
+          py0: yScale(0),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved, ctx) {
+      return /*#__PURE__*/_jsx(DotGLInteractiveCanvas, {
+        resolved: resolved,
+        color: color,
+        size: size,
+        opacity: opacity,
+        width: ctx.width,
+        height: ctx.height,
+        data: ctx.data,
+        renderTooltip: renderTooltip
+      });
+    }
+  };
+}

package/dist/marks/errorBar.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file marks/errorBar.tsx
+ * @output Error bar (whisker) series — vertical high/low bounds. Bounds are
+ *   absolute (so asymmetric intervals work); a point missing either bound is
+ *   skipped rather than drawn down to the axis.
+ */
+import type { SeriesDef } from '../types';
+export interface ErrorBarOptions {
+    /** Data key for the upper bound */
+    high: string;
+    /** Data key for the lower bound */
+    low: string;
+    /** Stroke color */
+    color?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Width of the whisker caps in pixels */
+    capWidth?: number;
+}
+/**
+ * Error bars with whisker caps. Pair with bar() or dot().
+ *
+ * @example
+ * ```
+ * series={[bar('mean'), errorBar({high: 'upper95', low: 'lower95'})]}
+ * ```
+ */
+export declare function errorBar(options: ErrorBarOptions): SeriesDef;
+//# sourceMappingURL=errorBar.d.ts.map

package/dist/marks/errorBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBar.d.ts","sourceRoot":"","sources":["../../src/marks/errorBar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,eAAe;IAC9B,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAqF5D"}

package/dist/marks/errorBar.js

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/errorBar.tsx
+ * @output Error bar (whisker) series — vertical high/low bounds. Bounds are
+ *   absolute (so asymmetric intervals work); a point missing either bound is
+ *   skipped rather than drawn down to the axis.
+ */
+
+import { xPixel } from "../utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Error bars with whisker caps. Pair with bar() or dot().
+ *
+ * @example
+ * ```
+ * series={[bar('mean'), errorBar({high: 'upper95', low: 'lower95'})]}
+ * ```
+ */
+export function errorBar(options) {
+  const {
+    high,
+    low
+  } = options;
+  const color = options.color ?? 'var(--color-text-primary)';
+  const strokeWidth = options.strokeWidth ?? 1.5;
+  const capWidth = options.capWidth ?? 8;
+  return {
+    type: 'errorBar',
+    key: `errorBar-${high}-${low}`,
+    dataKeys: [high, low],
+    layout: {},
+    resolve(ctx) {
+      const {
+        data,
+        xKey,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        // NaN for a missing bound so render() skips the whole whisker instead
+        // of anchoring a cap at the axis (a misleading zero-height error bar).
+        const hiVal = d[high];
+        const loVal = d[low];
+        const upper = typeof hiVal === 'number' && Number.isFinite(hiVal) ? hiVal : NaN;
+        const lower = typeof loVal === 'number' && Number.isFinite(loVal) ? loVal : NaN;
+        points.push({
+          px: xPixel(d, xKey, xScale),
+          py: yScale(upper),
+          py0: yScale(lower),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved) {
+      // Non-finite capWidth (NaN/±Infinity) would leak into the cap x-coords;
+      // treat it like a non-positive width — draw the stem, drop the caps.
+      const half = Number.isFinite(capWidth) ? Math.max(0, capWidth) / 2 : 0;
+      return /*#__PURE__*/_jsx("g", {
+        children: resolved.map(p => {
+          if (!Number.isFinite(p.px) || !Number.isFinite(p.py) || !Number.isFinite(p.py0)) {
+            return null;
+          }
+          return /*#__PURE__*/_jsxs("g", {
+            children: [/*#__PURE__*/_jsx("line", {
+              x1: p.px,
+              x2: p.px,
+              y1: p.py,
+              y2: p.py0,
+              stroke: color,
+              strokeWidth: strokeWidth
+            }), /*#__PURE__*/_jsx("line", {
+              x1: p.px - half,
+              x2: p.px + half,
+              y1: p.py,
+              y2: p.py,
+              stroke: color,
+              strokeWidth: strokeWidth
+            }), /*#__PURE__*/_jsx("line", {
+              x1: p.px - half,
+              x2: p.px + half,
+              y1: p.py0,
+              y2: p.py0,
+              stroke: color,
+              strokeWidth: strokeWidth
+            })]
+          }, p.dataIndex);
+        })
+      });
+    }
+  };
+}