@astryxdesign/lab 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/dist/ChartV2/marks/dotGLInteractive.js

@@ -0,0 +1,464 @@
+// 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.
+ */
+
+import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
+import { hexToGL } from "../../Chart/webgl.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/** 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;
+}
+function compileShader(gl, type, src) {
+  const s = gl.createShader(type);
+  if (!s) {
+    return null;
+  }
+  gl.shaderSource(s, src);
+  gl.compileShader(s);
+  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+    gl.deleteShader(s);
+    return null;
+  }
+  return s;
+}
+function linkProgram(gl, vert, frag) {
+  const vs = compileShader(gl, gl.VERTEX_SHADER, vert);
+  const fs = compileShader(gl, gl.FRAGMENT_SHADER, frag);
+  if (!vs || !fs) {
+    return null;
+  }
+  const p = gl.createProgram();
+  if (!p) {
+    return null;
+  }
+  gl.attachShader(p, vs);
+  gl.attachShader(p, fs);
+  gl.linkProgram(p);
+  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
+    gl.deleteProgram(p);
+    return null;
+  }
+  return p;
+}
+
+// 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 + 4.0;
+    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);
+  const visGLRef = useRef(null);
+  const pickGLRef = useRef(null);
+  const positions = useMemo(() => {
+    const pos = [];
+    for (const p of resolved) {
+      pos.push(p.px, p.py);
+    }
+    return new Float32Array(pos);
+  }, [resolved]);
+  const pickColors = useMemo(() => {
+    const colors = [];
+    for (let i = 0; i < resolved.length; i++) {
+      const [r, g, b] = indexToColor(i);
+      colors.push(r, g, b);
+    }
+    return new Float32Array(colors);
+  }, [resolved.length]);
+
+  // Render both passes
+  useEffect(() => {
+    if (width <= 0 || height <= 0) {
+      return;
+    }
+    const dpr = window.devicePixelRatio || 1;
+
+    // Visible canvas
+    const visCanvas = visCanvasRef.current;
+    if (visCanvas) {
+      visCanvas.width = width * dpr;
+      visCanvas.height = height * dpr;
+      if (!visGLRef.current) {
+        const gl = visCanvas.getContext('webgl', {
+          alpha: true,
+          premultipliedAlpha: false,
+          antialias: true
+        });
+        const prog = gl ? linkProgram(gl, VERT_VIS, FRAG_VIS) : null;
+        if (gl && prog) {
+          visGLRef.current = {
+            gl,
+            prog
+          };
+        }
+      }
+      const vis = visGLRef.current;
+      if (vis) {
+        const {
+          gl,
+          prog
+        } = vis;
+        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);
+        const buf = gl.createBuffer();
+        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);
+        gl.deleteBuffer(buf);
+      }
+    }
+
+    // Pick canvas (offscreen)
+    const pickCanvas = pickCanvasRef.current;
+    if (pickCanvas) {
+      pickCanvas.width = width * dpr;
+      pickCanvas.height = height * dpr;
+      if (!pickGLRef.current) {
+        const gl = pickCanvas.getContext('webgl', {
+          alpha: false,
+          premultipliedAlpha: false,
+          antialias: false,
+          preserveDrawingBuffer: true
+        });
+        if (gl) {
+          const prog = linkProgram(gl, VERT_PICK, FRAG_PICK);
+          const fb = gl.createFramebuffer();
+          const tex = gl.createTexture();
+          if (prog && fb && tex) {
+            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);
+            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
+            };
+          }
+        }
+      }
+      const pick = pickGLRef.current;
+      if (pick) {
+        const {
+          gl,
+          prog,
+          fb,
+          tex
+        } = pick;
+        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);
+        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);
+        const posBuf = gl.createBuffer();
+        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);
+        const colBuf = gl.createBuffer();
+        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 + 4) * dpr);
+        gl.drawArrays(gl.POINTS, 0, positions.length / 2);
+        gl.deleteBuffer(posBuf);
+        gl.deleteBuffer(colBuf);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      }
+    }
+  }, [width, height, positions, pickColors, color, size, opacity]);
+  const handleMouseMove = useCallback(e => {
+    const pick = pickGLRef.current;
+    if (!pick) {
+      return;
+    }
+    const svg = e.currentTarget.ownerSVGElement;
+    if (!svg) {
+      return;
+    }
+    const pt = svg.createSVGPoint();
+    pt.x = e.clientX;
+    pt.y = e.clientY;
+    const local = pt.matrixTransform(e.currentTarget.getScreenCTM()?.inverse());
+    const dpr = window.devicePixelRatio || 1;
+    const px = Math.floor(local.x * dpr);
+    const py = Math.floor(local.y * dpr);
+    const {
+      gl,
+      fb
+    } = pick;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+    const pixel = new Uint8Array(4);
+    gl.readPixels(px, gl.canvas.height - 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__*/_jsx("circle", {
+      cx: positions[hoverIndex * 2],
+      cy: positions[hoverIndex * 2 + 1],
+      r: size / 2 + 3,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2,
+      strokeOpacity: 0.8,
+      pointerEvents: "none"
+    }), 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/ChartV2/marks/errorBar.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file marks/errorBar.tsx
+ * @output Error bar (whisker) series — vertical high/low bounds
+ */
+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/ChartV2/marks/errorBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBar.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/errorBar.tsx"],"names":[],"mappings":"AAEA;;;GAGG;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,CAyD5D"}

package/dist/ChartV2/marks/errorBar.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/errorBar.tsx
+ * @output Error bar (whisker) series — vertical high/low bounds
+ */
+
+/**
+ * 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];
+        let px;
+        if ('bandwidth' in xScale) {
+          px = (xScale(String(d[xKey])) ?? 0) + xScale.bandwidth() / 2;
+        } else {
+          px = xScale(d[xKey]);
+        }
+        const upper = typeof d[high] === 'number' ? d[high] : 0;
+        const lower = typeof d[low] === 'number' ? d[low] : 0;
+        points.push({
+          px,
+          py: yScale(upper),
+          py0: yScale(lower),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(resolved) {
+      const half = capWidth / 2;
+      return /*#__PURE__*/_jsx("g", {
+        children: resolved.map((p, i) => /*#__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
+          })]
+        }, i))
+      });
+    }
+  };
+}

package/dist/ChartV2/marks/heatmapGL.d.ts

@@ -0,0 +1,23 @@
+import type { SeriesDef } from '../types';
+export interface HeatmapGLOptions {
+    xKey: string;
+    yKey: string;
+    valueKey: string;
+    colorRange: string[];
+    domain?: [number, number];
+    cellGap?: number;
+}
+/**
+ * WebGL heatmap. Renders a 2D grid of colored cells using triangles.
+ * Manages its own y band scale for rows; uses the chart's x band scale for columns.
+ *
+ * @example
+ * ```
+ * series={[heatmapGL({
+ *   xKey: 'hour', yKey: 'day', valueKey: 'count',
+ *   colorRange: ['#f0f9ff', '#1e40af'],
+ * })]}
+ * ```
+ */
+export declare function heatmapGL(options: HeatmapGLOptions): SeriesDef;
+//# sourceMappingURL=heatmapGL.d.ts.map

package/dist/ChartV2/marks/heatmapGL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmapGL.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/heatmapGL.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAWvD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAkND;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB,GAAG,SAAS,CAiD9D"}