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

package/dist/ChartV2/marks/heatmapGL.js

@@ -0,0 +1,242 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/heatmapGL.tsx
+ * @output WebGL heatmap — 2D grid of colored cells on canvas
+ */
+
+import { useRef, useEffect, useMemo } from 'react';
+import { scaleBand } from 'd3-scale';
+import { hexToGL, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, createProgram } from "../../Chart/webgl.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const VERT = `
+  attribute vec2 a_position;
+  attribute vec3 a_color;
+  uniform vec2 u_resolution;
+  varying vec3 v_color;
+  void main() {
+    vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    v_color = a_color;
+  }
+`;
+const FRAG = `
+  precision mediump float;
+  varying vec3 v_color;
+  void main() {
+    gl_FragColor = vec4(v_color, 1.0);
+  }
+`;
+function sampleRamp(ramp, t) {
+  const c = Math.max(0, Math.min(1, t));
+  if (ramp.length === 1) {
+    return ramp[0];
+  }
+  const s = c * (ramp.length - 1);
+  const lo = Math.floor(s);
+  const hi = Math.min(lo + 1, ramp.length - 1);
+  const f = s - lo;
+  return [ramp[lo][0] + f * (ramp[hi][0] - ramp[lo][0]), ramp[lo][1] + f * (ramp[hi][1] - ramp[lo][1]), ramp[lo][2] + f * (ramp[hi][2] - ramp[lo][2])];
+}
+
+/**
+ * Inline component — manages the heatmap WebGL canvas and its own y band scale.
+ */
+function HeatmapGLCanvas({
+  data,
+  xKey,
+  yKey,
+  valueKey,
+  xScale,
+  colorRange,
+  domain: domainProp,
+  cellGap,
+  width,
+  height
+}) {
+  const canvasRef = useRef(null);
+  const glRef = useRef(null);
+  const programRef = useRef(null);
+  const markerRef = useRef(null);
+  const ramp = useMemo(() => colorRange.map(hexToGL), [colorRange]);
+  const yBandScale = useMemo(() => {
+    const cats = [...new Set(data.map(d => String(d[yKey])))];
+    return scaleBand().domain(cats).range([0, height]).padding(0.05);
+  }, [data, yKey, height]);
+  const domain = useMemo(() => {
+    if (domainProp) {
+      return domainProp;
+    }
+    let min = Infinity,
+      max = -Infinity;
+    for (const d of data) {
+      const v = d[valueKey];
+      if (typeof v === 'number') {
+        if (v < min) {
+          min = v;
+        }
+        if (v > max) {
+          max = v;
+        }
+      }
+    }
+    return [min, max];
+  }, [data, valueKey, domainProp]);
+
+  // Mount canvas outside SVG
+  useEffect(() => {
+    const marker = markerRef.current;
+    if (!marker) {
+      return;
+    }
+    if (!canvasRef.current) {
+      canvasRef.current = document.createElement('canvas');
+    }
+    return mountCanvasOverSVG(marker, canvasRef.current, width, height);
+  }, [width, height]);
+
+  // Draw
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || width <= 0 || height <= 0) {
+      return;
+    }
+    sizeCanvas(canvas, width, height);
+    if (!glRef.current) {
+      glRef.current = getWebGLContext(canvas);
+    }
+    const gl = glRef.current;
+    if (!gl) {
+      return;
+    }
+    if (!programRef.current) {
+      programRef.current = createProgram(gl, VERT, FRAG);
+    }
+    const program = programRef.current;
+    if (!program) {
+      return;
+    }
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    setupGLState(gl);
+    gl.useProgram(program);
+    const positions = [];
+    const colors = [];
+    const [dMin, dMax] = domain;
+    const range = dMax - dMin || 1;
+    const gap = cellGap;
+    const xBW = xScale.bandwidth();
+    const yBW = yBandScale.bandwidth();
+    for (const d of data) {
+      const xVal = xScale(String(d[xKey]));
+      const yVal = yBandScale(String(d[yKey]));
+      if (xVal == null || yVal == null) {
+        continue;
+      }
+      const v = typeof d[valueKey] === 'number' ? d[valueKey] : 0;
+      const t = (v - dMin) / range;
+      const [r, g, b] = sampleRamp(ramp, t);
+      const x0 = xVal + gap / 2;
+      const x1 = xVal + xBW - gap / 2;
+      const y0 = yVal + gap / 2;
+      const y1 = yVal + yBW - gap / 2;
+
+      // Two triangles per cell
+      positions.push(x0, y0, x1, y0, x0, y1, x1, y0, x1, y1, x0, y1);
+      for (let i = 0; i < 6; i++) {
+        colors.push(r, g, b);
+      }
+    }
+    const posBuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, '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, new Float32Array(colors), gl.STATIC_DRAW);
+    const aCol = gl.getAttribLocation(program, 'a_color');
+    gl.enableVertexAttribArray(aCol);
+    gl.vertexAttribPointer(aCol, 3, gl.FLOAT, false, 0, 0);
+    gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), width, height);
+    gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2);
+    gl.deleteBuffer(posBuf);
+    gl.deleteBuffer(colBuf);
+  }, [data, xKey, yKey, valueKey, xScale, yBandScale, width, height, domain, ramp, cellGap]);
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    ref: markerRef
+  });
+}
+
+/**
+ * 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 function heatmapGL(options) {
+  const {
+    xKey,
+    yKey,
+    valueKey,
+    colorRange
+  } = options;
+  const cellGap = options.cellGap ?? 1;
+  return {
+    type: 'heatmapGL',
+    key: `heatmap-${valueKey}`,
+    dataKeys: [valueKey],
+    layout: {},
+    resolve(ctx) {
+      // Heatmap doesn't resolve per-point positions the standard way —
+      // the canvas component handles its own cell layout.
+      const {
+        data,
+        xScale,
+        yScale
+      } = ctx;
+      const points = [];
+      if (!('bandwidth' in xScale)) {
+        return points;
+      }
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        const px = (xScale(String(d[xKey])) ?? 0) + xScale.bandwidth() / 2;
+        const v = typeof d[valueKey] === 'number' ? d[valueKey] : 0;
+        points.push({
+          px,
+          py: yScale(v),
+          py0: yScale(0),
+          dataIndex: i
+        });
+      }
+      return points;
+    },
+    render(_resolved, ctx) {
+      if (!('bandwidth' in ctx.xScale)) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(HeatmapGLCanvas, {
+        data: ctx.data,
+        xKey: xKey,
+        yKey: yKey,
+        valueKey: valueKey,
+        xScale: ctx.xScale,
+        colorRange: colorRange,
+        domain: options.domain,
+        cellGap: cellGap,
+        width: ctx.width,
+        height: ctx.height
+      });
+    }
+  };
+}

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

@@ -0,0 +1,13 @@
+export { bar, type BarOptions } from './bar';
+export { line, type LineOptions } from './line';
+export { dot, type DotOptions } from './dot';
+export { area, type AreaOptions } from './area';
+export { band, type BandOptions } from './band';
+export { candlestick, type CandlestickOptions } from './candlestick';
+export { errorBar, type ErrorBarOptions } from './errorBar';
+export { referenceLine, type ReferenceLineOptions } from './referenceLine';
+export { dotGL, type DotGLOptions } from './dotGL';
+export { dotGLInteractive, type DotGLInteractiveOptions } from './dotGLInteractive';
+export { heatmapGL, type HeatmapGLOptions } from './heatmapGL';
+export { streamGL, type StreamGLOptions, type StreamGLHandle } from './streamGL';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,GAAG,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAC,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAC,GAAG,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAC,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAC,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAC,WAAW,EAAE,KAAK,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACnE,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAC,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAE,KAAK,oBAAoB,EAAC,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAC,MAAM,SAAS,CAAC;AACjD,OAAO,EAAC,gBAAgB,EAAE,KAAK,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAC,SAAS,EAAE,KAAK,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAC,MAAM,YAAY,CAAC"}

package/dist/ChartV2/marks/index.js

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export { bar } from "./bar.js";
+export { line } from "./line.js";
+export { dot } from "./dot.js";
+export { area } from "./area.js";
+export { band } from "./band.js";
+export { candlestick } from "./candlestick.js";
+export { errorBar } from "./errorBar.js";
+export { referenceLine } from "./referenceLine.js";
+export { dotGL } from "./dotGL.js";
+export { dotGLInteractive } from "./dotGLInteractive.js";
+export { heatmapGL } from "./heatmapGL.js";
+export { streamGL } from "./streamGL.js";

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

@@ -0,0 +1,18 @@
+import type { SeriesDef } from '../types';
+declare const CURVES: {
+    readonly linear: import("d3-shape").CurveFactory;
+    readonly monotone: import("d3-shape").CurveFactory;
+    readonly natural: import("d3-shape").CurveFactory;
+    readonly step: import("d3-shape").CurveFactory;
+};
+export type CurveType = keyof typeof CURVES;
+export interface LineOptions {
+    color?: string;
+    curve?: CurveType;
+    strokeWidth?: number;
+    dots?: boolean;
+    label?: string;
+}
+export declare function line(dataKey: string, options?: LineOptions): SeriesDef;
+export {};
+//# sourceMappingURL=line.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/line.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAC,SAAS,EAAgB,MAAM,UAAU,CAAC;AAGvD,QAAA,MAAM,MAAM;;;;;CAKF,CAAC;AACX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,SAAS,CA4D1E"}

package/dist/ChartV2/marks/line.js

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/line.tsx
+ * @output Line series — self-contained resolve + render
+ */
+
+import { line as d3Line, curveLinear, curveMonotoneX, curveNatural, curveStep } from 'd3-shape';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CURVES = {
+  linear: curveLinear,
+  monotone: curveMonotoneX,
+  natural: curveNatural,
+  step: curveStep
+};
+export function line(dataKey, options = {}) {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const curve = options.curve ?? 'monotone';
+  const strokeWidth = options.strokeWidth ?? 2;
+  const dots = options.dots ?? false;
+  return {
+    type: 'line',
+    key: dataKey,
+    dataKeys: [dataKey],
+    color,
+    label: options.label ?? 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) {
+      if (resolved.length === 0) {
+        return null;
+      }
+      const curveFactory = CURVES[curve];
+      const pathGen = d3Line().x(d => d.px).y(d => d.py).curve(curveFactory);
+      const pathD = pathGen(resolved) ?? '';
+      return /*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx("path", {
+          d: pathD,
+          fill: "none",
+          stroke: color,
+          strokeWidth: strokeWidth
+        }), dots && resolved.map((p, i) => /*#__PURE__*/_jsx("circle", {
+          cx: p.px,
+          cy: p.py,
+          r: 3,
+          fill: color
+        }, i))]
+      });
+    }
+  };
+}

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

@@ -0,0 +1,35 @@
+/**
+ * @file marks/referenceLine.tsx
+ * @output Horizontal or vertical reference line/band annotation
+ */
+import type { SeriesDef } from '../types';
+export interface ReferenceLineOptions {
+    /** Horizontal reference at this y value */
+    y?: number;
+    /** Second y value — draws a shaded band between y and y2 */
+    y2?: number;
+    /** Vertical reference at this x value */
+    x?: number;
+    /** Line/band color */
+    color?: string;
+    /** Stroke width (for lines) */
+    strokeWidth?: number;
+    /** Dash pattern */
+    strokeDasharray?: string;
+    /** Text label */
+    label?: string;
+    /** Label position */
+    labelPosition?: 'start' | 'end';
+    /** Band fill opacity (when y2 is set) */
+    bandOpacity?: number;
+}
+/**
+ * Reference line or band annotation. Not a data series — renders at fixed values.
+ *
+ * @example
+ * ```
+ * series={[line('revenue'), referenceLine({y: 100, label: 'Target'})]}
+ * ```
+ */
+export declare function referenceLine(options: ReferenceLineOptions): SeriesDef;
+//# sourceMappingURL=referenceLine.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"referenceLine.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/referenceLine.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAGxC,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yCAAyC;IACzC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAChC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,SAAS,CAwLtE"}

package/dist/ChartV2/marks/referenceLine.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/referenceLine.tsx
+ * @output Horizontal or vertical reference line/band annotation
+ */
+
+/**
+ * Reference line or band annotation. Not a data series — renders at fixed values.
+ *
+ * @example
+ * ```
+ * series={[line('revenue'), referenceLine({y: 100, label: 'Target'})]}
+ * ```
+ */
+export function referenceLine(options) {
+  const color = options.color ?? 'var(--color-border-emphasized)';
+  const strokeWidth = options.strokeWidth ?? 1;
+  const strokeDasharray = options.strokeDasharray ?? '6 3';
+  const label = options.label;
+  const labelPosition = options.labelPosition ?? 'end';
+  const bandOpacity = options.bandOpacity ?? 0.1;
+
+  // Badge dimensions — matches crosshair label style
+  const badgeH = 14;
+  const badgeRx = 3;
+  const fontSize = 10;
+  return {
+    type: 'referenceLine',
+    key: `ref-${options.y ?? options.x ?? 'none'}`,
+    dataKeys: [],
+    layout: {},
+    // No data points to resolve — this is a fixed annotation
+    resolve() {
+      return [];
+    },
+    render(_resolved, ctx) {
+      const {
+        width,
+        height,
+        xScale,
+        yScale
+      } = ctx;
+
+      // Horizontal reference line or band
+      if (options.y != null) {
+        const py = yScale(options.y);
+        const textW = label ? label.length * 5.5 + 8 : 0;
+        const bx = labelPosition === 'end' ? width - textW - 2 : 2;
+
+        // Band mode: shaded region between y and y2
+        if (options.y2 != null) {
+          const py2 = yScale(options.y2);
+          const top = Math.min(py, py2);
+          const bandHeight = Math.abs(py2 - py);
+          return /*#__PURE__*/_jsxs("g", {
+            children: [/*#__PURE__*/_jsx("rect", {
+              x: 0,
+              y: top,
+              width: width,
+              height: bandHeight,
+              fill: color,
+              opacity: bandOpacity
+            }), /*#__PURE__*/_jsx("line", {
+              x1: 0,
+              x2: width,
+              y1: py,
+              y2: py,
+              stroke: color,
+              strokeWidth: strokeWidth,
+              strokeDasharray: strokeDasharray
+            }), /*#__PURE__*/_jsx("line", {
+              x1: 0,
+              x2: width,
+              y1: py2,
+              y2: py2,
+              stroke: color,
+              strokeWidth: strokeWidth,
+              strokeDasharray: strokeDasharray
+            }), label && /*#__PURE__*/_jsxs("g", {
+              transform: `translate(${bx},${py})`,
+              pointerEvents: "none",
+              children: [/*#__PURE__*/_jsx("rect", {
+                x: 0,
+                y: -badgeH / 2,
+                width: textW,
+                height: badgeH,
+                rx: badgeRx,
+                fill: "var(--color-background-popover)",
+                fillOpacity: 0.85,
+                stroke: color,
+                strokeWidth: 0.5
+              }), /*#__PURE__*/_jsx("text", {
+                x: textW / 2,
+                dy: "0.35em",
+                textAnchor: "middle",
+                fontSize: fontSize,
+                fontWeight: 500,
+                fill: color,
+                children: label
+              })]
+            })]
+          });
+        }
+
+        // Single horizontal line
+        return /*#__PURE__*/_jsxs("g", {
+          children: [/*#__PURE__*/_jsx("line", {
+            x1: 0,
+            x2: width,
+            y1: py,
+            y2: py,
+            stroke: color,
+            strokeWidth: strokeWidth,
+            strokeDasharray: strokeDasharray
+          }), label && /*#__PURE__*/_jsxs("g", {
+            transform: `translate(${bx},${py})`,
+            pointerEvents: "none",
+            children: [/*#__PURE__*/_jsx("rect", {
+              x: 0,
+              y: -badgeH / 2,
+              width: textW,
+              height: badgeH,
+              rx: badgeRx,
+              fill: "var(--color-background-popover)",
+              fillOpacity: 0.85,
+              stroke: color,
+              strokeWidth: 0.5
+            }), /*#__PURE__*/_jsx("text", {
+              x: textW / 2,
+              dy: "0.35em",
+              textAnchor: "middle",
+              fontSize: fontSize,
+              fontWeight: 500,
+              fill: color,
+              children: label
+            })]
+          })]
+        });
+      }
+
+      // Vertical reference line
+      if (options.x != null && !('bandwidth' in xScale)) {
+        const px = xScale(options.x);
+        const textW = label ? label.length * 5.5 + 8 : 0;
+        const by = labelPosition === 'end' ? 4 : height - badgeH - 4;
+        return /*#__PURE__*/_jsxs("g", {
+          children: [/*#__PURE__*/_jsx("line", {
+            x1: px,
+            x2: px,
+            y1: 0,
+            y2: height,
+            stroke: color,
+            strokeWidth: strokeWidth,
+            strokeDasharray: strokeDasharray
+          }), label && /*#__PURE__*/_jsxs("g", {
+            transform: `translate(${px - textW / 2},${by})`,
+            pointerEvents: "none",
+            children: [/*#__PURE__*/_jsx("rect", {
+              x: 0,
+              y: 0,
+              width: textW,
+              height: badgeH,
+              rx: badgeRx,
+              fill: "var(--color-background-popover)",
+              fillOpacity: 0.85,
+              stroke: color,
+              strokeWidth: 0.5
+            }), /*#__PURE__*/_jsx("text", {
+              x: textW / 2,
+              y: badgeH / 2,
+              dy: "0.35em",
+              textAnchor: "middle",
+              fontSize: fontSize,
+              fontWeight: 500,
+              fill: color,
+              children: label
+            })]
+          })]
+        });
+      }
+      return null;
+    }
+  };
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @file marks/streamGL.tsx
+ * @output WebGL streaming time-series line — ring buffer, canvas outside SVG
+ *
+ * Data is pushed imperatively via the returned handle, not from the static dataset.
+ * The chart's xScale/yScale map pushed values to pixel coordinates.
+ */
+import { type MutableRefObject } from 'react';
+import type { SeriesDef } from '../types';
+export interface StreamGLHandle {
+    push(x: number, y: number): void;
+    clear(): void;
+}
+export interface StreamGLOptions {
+    color: string;
+    bufferSize?: number;
+    lineWidth?: number;
+    opacity?: number;
+    /** Ref to receive the push/clear handle */
+    handleRef?: MutableRefObject<StreamGLHandle | null>;
+}
+/**
+ * WebGL streaming line. Data is pushed imperatively via handleRef,
+ * not from the chart's static dataset. Internally uses a ring buffer.
+ *
+ * @example
+ * ```
+ * const streamRef = useRef<StreamGLHandle>(null);
+ * // Push data points in a rAF loop or event handler:
+ * streamRef.current?.push(Date.now(), value);
+ *
+ * <Chart series={[streamGL({color: '#10b981', handleRef: streamRef})]} />
+ * ```
+ */
+export declare function streamGL(options: StreamGLOptions): SeriesDef;
+//# sourceMappingURL=streamGL.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"streamGL.d.ts","sourceRoot":"","sources":["../../../src/ChartV2/marks/streamGL.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,EAKL,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAWxC,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACrD;AAqKD;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAgC5D"}