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

package/src/ChartV2/marks/heatmapGL.tsx

@@ -0,0 +1,299 @@
+// 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 type {SeriesDef, ResolvedPoint} from '../types';
+import type {ScaleBand} from 'd3-scale';
+import {
+  hexToGL,
+  getWebGLContext,
+  setupGLState,
+  sizeCanvas,
+  mountCanvasOverSVG,
+  createProgram,
+} from '../../Chart/webgl';
+
+export interface HeatmapGLOptions {
+  xKey: string;
+  yKey: string;
+  valueKey: string;
+  colorRange: string[];
+  domain?: [number, number];
+  cellGap?: number;
+}
+
+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: [number, number, number][],
+  t: number,
+): [number, number, number] {
+  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,
+}: {
+  data: Record<string, unknown>[];
+  xKey: string;
+  yKey: string;
+  valueKey: string;
+  xScale: ScaleBand<string>;
+  colorRange: string[];
+  domain?: [number, number];
+  cellGap: number;
+  width: number;
+  height: number;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const glRef = useRef<WebGLRenderingContext | null>(null);
+  const programRef = useRef<WebGLProgram | null>(null);
+  const markerRef = useRef<SVGGElement>(null);
+
+  const ramp = useMemo(() => colorRange.map(hexToGL), [colorRange]);
+
+  const yBandScale = useMemo(() => {
+    const cats = [...new Set(data.map(d => String(d[yKey])))];
+    return scaleBand<string>().domain(cats).range([0, height]).padding(0.05);
+  }, [data, yKey, height]);
+
+  const domain = useMemo((): [number, number] => {
+    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: number[] = [];
+    const colors: number[] = [];
+    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] as number) : 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 <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: HeatmapGLOptions): SeriesDef {
+  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: ResolvedPoint[] = [];
+      if (!('bandwidth' in xScale)) {
+        return points;
+      }
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        const px =
+          ((xScale as ScaleBand<string>)(String(d[xKey])) ?? 0) +
+          (xScale as ScaleBand<string>).bandwidth() / 2;
+        const v = typeof d[valueKey] === 'number' ? (d[valueKey] as number) : 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 (
+        <HeatmapGLCanvas
+          data={ctx.data}
+          xKey={xKey}
+          yKey={yKey}
+          valueKey={valueKey}
+          xScale={ctx.xScale as ScaleBand<string>}
+          colorRange={colorRange}
+          domain={options.domain}
+          cellGap={cellGap}
+          width={ctx.width}
+          height={ctx.height}
+        />
+      );
+    },
+  };
+}

package/src/ChartV2/marks/index.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+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';

package/src/ChartV2/marks/line.tsx

@@ -0,0 +1,94 @@
+// 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 type {SeriesDef, ResolvedPoint} from '../types';
+import type {ScaleBand} from 'd3-scale';
+
+const CURVES = {
+  linear: curveLinear,
+  monotone: curveMonotoneX,
+  natural: curveNatural,
+  step: curveStep,
+} as const;
+export type CurveType = keyof typeof CURVES;
+
+export interface LineOptions {
+  color?: string;
+  curve?: CurveType;
+  strokeWidth?: number;
+  dots?: boolean;
+  label?: string;
+}
+
+export function line(dataKey: string, options: LineOptions = {}): SeriesDef {
+  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: ResolvedPoint[] = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let px: number;
+        if ('bandwidth' in xScale) {
+          px =
+            ((xScale as ScaleBand<string>)(String(d[xKey])) ?? 0) +
+            (xScale as ScaleBand<string>).bandwidth() / 2;
+        } else {
+          px = xScale(d[xKey] as number);
+        }
+        const v = typeof d[dataKey] === 'number' ? (d[dataKey] as number) : 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<ResolvedPoint>()
+        .x(d => d.px)
+        .y(d => d.py)
+        .curve(curveFactory);
+
+      const pathD = pathGen(resolved) ?? '';
+      return (
+        <g>
+          <path
+            d={pathD}
+            fill="none"
+            stroke={color}
+            strokeWidth={strokeWidth}
+          />
+          {dots &&
+            resolved.map((p, i) => (
+              <circle key={i} cx={p.px} cy={p.py} r={3} fill={color} />
+            ))}
+        </g>
+      );
+    },
+  };
+}

package/src/ChartV2/marks/referenceLine.tsx

@@ -0,0 +1,224 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/referenceLine.tsx
+ * @output Horizontal or vertical reference line/band annotation
+ */
+
+import type {SeriesDef} from '../types';
+import type {ScaleLinear} from 'd3-scale';
+
+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 function referenceLine(options: ReferenceLineOptions): SeriesDef {
+  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 (
+            <g>
+              <rect
+                x={0}
+                y={top}
+                width={width}
+                height={bandHeight}
+                fill={color}
+                opacity={bandOpacity}
+              />
+              <line
+                x1={0}
+                x2={width}
+                y1={py}
+                y2={py}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                strokeDasharray={strokeDasharray}
+              />
+              <line
+                x1={0}
+                x2={width}
+                y1={py2}
+                y2={py2}
+                stroke={color}
+                strokeWidth={strokeWidth}
+                strokeDasharray={strokeDasharray}
+              />
+              {label && (
+                <g transform={`translate(${bx},${py})`} pointerEvents="none">
+                  <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}
+                  />
+                  <text
+                    x={textW / 2}
+                    dy="0.35em"
+                    textAnchor="middle"
+                    fontSize={fontSize}
+                    fontWeight={500}
+                    fill={color}>
+                    {label}
+                  </text>
+                </g>
+              )}
+            </g>
+          );
+        }
+
+        // Single horizontal line
+        return (
+          <g>
+            <line
+              x1={0}
+              x2={width}
+              y1={py}
+              y2={py}
+              stroke={color}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDasharray}
+            />
+            {label && (
+              <g transform={`translate(${bx},${py})`} pointerEvents="none">
+                <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}
+                />
+                <text
+                  x={textW / 2}
+                  dy="0.35em"
+                  textAnchor="middle"
+                  fontSize={fontSize}
+                  fontWeight={500}
+                  fill={color}>
+                  {label}
+                </text>
+              </g>
+            )}
+          </g>
+        );
+      }
+
+      // Vertical reference line
+      if (options.x != null && !('bandwidth' in xScale)) {
+        const px = (xScale as ScaleLinear<number, number>)(options.x);
+        const textW = label ? label.length * 5.5 + 8 : 0;
+        const by = labelPosition === 'end' ? 4 : height - badgeH - 4;
+        return (
+          <g>
+            <line
+              x1={px}
+              x2={px}
+              y1={0}
+              y2={height}
+              stroke={color}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDasharray}
+            />
+            {label && (
+              <g
+                transform={`translate(${px - textW / 2},${by})`}
+                pointerEvents="none">
+                <rect
+                  x={0}
+                  y={0}
+                  width={textW}
+                  height={badgeH}
+                  rx={badgeRx}
+                  fill="var(--color-background-popover)"
+                  fillOpacity={0.85}
+                  stroke={color}
+                  strokeWidth={0.5}
+                />
+                <text
+                  x={textW / 2}
+                  y={badgeH / 2}
+                  dy="0.35em"
+                  textAnchor="middle"
+                  fontSize={fontSize}
+                  fontWeight={500}
+                  fill={color}>
+                  {label}
+                </text>
+              </g>
+            )}
+          </g>
+        );
+      }
+
+      return null;
+    },
+  };
+}