@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/src/Chart/ChartBrush.tsx

@@ -0,0 +1,237 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartBrush.tsx
+ * @output Drag-to-select region. Supports x-only or 2D (xy) brush modes.
+ * @position Child of Chart; reads scales from context
+ */
+
+import React, {useState, useCallback, useRef} from 'react';
+import {useChart} from './ChartContext';
+import {isBandScale} from './utils';
+import type {ScaleLinear} from 'd3-scale';
+
+/**
+ * Brush direction mode:
+ * - `'x'` — horizontal range selection (default)
+ * - `'xy'` — 2D rectangular selection
+ */
+export type BrushMode = 'x' | 'xy';
+
+export interface BrushRange {
+  x: [number, number];
+  y?: [number, number];
+}
+
+export interface ChartBrushProps {
+  /**
+   * Brush direction mode.
+   * - `'x'` — horizontal selection (default, good for time ranges)
+   * - `'xy'` — rectangular 2D selection (good for scatter plots)
+   *
+   * @default 'x'
+   */
+  mode?: BrushMode;
+
+  /**
+   * Called when the user finishes a brush gesture.
+   * Receives the selected range in data coordinates and the matching data points.
+   */
+  onBrush?: (range: BrushRange, data: Record<string, unknown>[]) => void;
+
+  /**
+   * Called when the brush is cleared (click without drag).
+   */
+  onClear?: () => void;
+
+  /**
+   * Brush overlay color.
+   * @default 'var(--color-accent)'
+   */
+  color?: string;
+
+  /**
+   * Brush overlay opacity.
+   * @default 0.15
+   */
+  opacity?: number;
+}
+
+function localCoords(e: React.PointerEvent<SVGRectElement>): {
+  x: number;
+  y: number;
+} {
+  const svg = e.currentTarget.ownerSVGElement;
+  if (!svg) {
+    return {x: 0, y: 0};
+  }
+  const pt = svg.createSVGPoint();
+  pt.x = e.clientX;
+  pt.y = e.clientY;
+  const local = pt.matrixTransform(e.currentTarget.getScreenCTM()?.inverse());
+  return {x: local.x, y: local.y};
+}
+
+/**
+ * Brush interaction for range selection.
+ *
+ * @example
+ * ```tsx
+ * // X-only (default)
+ * <ChartBrush onBrush={({x}) => setZoom(x)} />
+ *
+ * // 2D rectangular
+ * <ChartBrush mode="xy" onBrush={({x, y}, points) => setSelected(points)} />
+ * ```
+ */
+export function ChartBrush({
+  mode = 'x',
+  onBrush,
+  onClear,
+  color = 'var(--color-accent)',
+  opacity = 0.15,
+}: ChartBrushProps) {
+  const {width, height, data, xKey, xScale, yScale} = useChart();
+  const [brush, setBrush] = useState<{
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+  } | null>(null);
+  const dragging = useRef(false);
+  const startRef = useRef({x: 0, y: 0});
+
+  const onPointerDown = useCallback((e: React.PointerEvent<SVGRectElement>) => {
+    (e.target as Element).setPointerCapture(e.pointerId);
+    dragging.current = true;
+    const {x, y} = localCoords(e);
+    startRef.current = {x, y};
+    setBrush({x0: x, y0: y, x1: x, y1: y});
+  }, []);
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent<SVGRectElement>) => {
+      if (!dragging.current) {
+        return;
+      }
+      const {x, y} = localCoords(e);
+      const {x: sx, y: sy} = startRef.current;
+
+      if (mode === 'x') {
+        setBrush({
+          x0: Math.min(sx, x),
+          y0: 0,
+          x1: Math.max(sx, x),
+          y1: height,
+        });
+      } else {
+        setBrush({
+          x0: Math.min(sx, x),
+          y0: Math.min(sy, y),
+          x1: Math.max(sx, x),
+          y1: Math.max(sy, y),
+        });
+      }
+    },
+    [mode, height],
+  );
+
+  const onPointerUp = useCallback(() => {
+    dragging.current = false;
+    if (!brush) {
+      return;
+    }
+
+    const dx = Math.abs(brush.x1 - brush.x0);
+    const dy = Math.abs(brush.y1 - brush.y0);
+
+    // Too small — treat as click (clear)
+    if (dx < 3 && (mode === 'x' || dy < 3)) {
+      setBrush(null);
+      onClear?.();
+      return;
+    }
+
+    if (isBandScale(xScale)) {
+      // Band scale — can't invert meaningfully for range
+      setBrush(null);
+      return;
+    }
+
+    const linear = xScale as ScaleLinear<number, number>;
+    const xMin = linear.invert(brush.x0);
+    const xMax = linear.invert(brush.x1);
+
+    const range: BrushRange = {x: [xMin, xMax]};
+
+    let selected: Record<string, unknown>[];
+
+    if (mode === 'xy') {
+      const yMin = yScale.invert(brush.y1); // y is inverted (top=0)
+      const yMax = yScale.invert(brush.y0);
+      range.y = [yMin, yMax];
+
+      selected = data.filter(d => {
+        const xv = d[xKey];
+        if (typeof xv !== 'number' || xv < xMin || xv > xMax) {
+          return false;
+        }
+        // Check all numeric values against y range
+        return Object.entries(d).some(
+          ([k, v]) =>
+            k !== xKey && typeof v === 'number' && v >= yMin && v <= yMax,
+        );
+      });
+    } else {
+      selected = data.filter(d => {
+        const v = d[xKey];
+        return typeof v === 'number' && v >= xMin && v <= xMax;
+      });
+    }
+
+    onBrush?.(range, selected);
+  }, [brush, mode, xScale, yScale, data, xKey, onBrush, onClear]);
+
+  const rectX = brush ? brush.x0 : 0;
+  const rectY = brush ? brush.y0 : 0;
+  const rectW = brush ? brush.x1 - brush.x0 : 0;
+  const rectH = brush ? brush.y1 - brush.y0 : 0;
+
+  const brushRectStyle: React.CSSProperties = {
+    cursor: 'crosshair',
+    touchAction: 'none',
+    userSelect: 'none',
+  };
+
+  return (
+    <g>
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill="transparent"
+        style={brushRectStyle}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerUp}
+      />
+      {brush && (rectW > 1 || rectH > 1) && (
+        <rect
+          x={rectX}
+          y={rectY}
+          width={rectW}
+          height={rectH}
+          fill={color}
+          fillOpacity={opacity}
+          stroke={color}
+          strokeWidth={1}
+          strokeOpacity={0.4}
+          rx={mode === 'xy' ? 2 : 0}
+          pointerEvents="none"
+        />
+      )}
+    </g>
+  );
+}

package/src/Chart/ChartCandlestick.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../core/src/docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'ChartCandlestick',
+  displayName: 'Chart Candlestick',
+  group: 'Chart',
+  category: 'Data Visualization',
+
+  usage: {
+    description: '',
+  },
+
+  props: [],
+};

package/src/Chart/ChartCandlestick.tsx

@@ -0,0 +1,186 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartCandlestick.tsx
+ * @output Renders candlestick/box-whisker marks for OHLC or statistical data
+ * @position Child of Chart; reads scales from context
+ *
+ * Two variants:
+ * - `'default'` — filled body with whiskers (traditional candlestick/box plot)
+ * - `'bar'` — OHLC bar — vertical line with open/close ticks
+ */
+
+import {useChart} from './ChartContext';
+import {isBandScale} from './utils';
+
+export interface ChartCandlestickProps {
+  /** Data key for the high/max value (top of whisker) */
+  high: string;
+  /** Data key for the low/min value (bottom of whisker) */
+  low: string;
+  /** Data key for the open/Q1 value (bottom of body) */
+  open: string;
+  /** Data key for the close/Q3 value (top of body) */
+  close: string;
+  /**
+   * Visual variant:
+   * - `'default'` — filled body with whiskers
+   * - `'bar'` — OHLC bar — vertical range line, left tick at open, right tick at close
+   */
+  variant?: 'default' | 'bar';
+  /** Color when close >= open (bullish / positive) */
+  upColor?: string;
+  /** Color when close < open (bearish / negative) */
+  downColor?: string;
+  /** Fixed color — overrides up/down logic. Use for box plots. */
+  color?: string;
+  /** Body width as fraction of band width (default: 0.6) */
+  bodyWidth?: number;
+  /** Stroke width for whiskers and bar lines */
+  strokeWidth?: number;
+  /** Corner radius on body (default variant only) */
+  radius?: number;
+}
+
+/**
+ * Candlestick / box-whisker marks.
+ *
+ * @example
+ * ```
+ * // Financial OHLC
+ * <ChartCandlestick
+ *   high="high" low="low" open="open" close="close"
+ *   upColor={useChartColors().semantic.positive}
+ *   downColor={useChartColors().semantic.negative}
+ * />
+ *
+ * // OHLC bar
+ * <ChartCandlestick
+ *   variant="bar"
+ *   high="max" low="min" open="q1" close="median"
+ *   color={useChartColors().categorical(1)[0]}
+ * />
+ * ```
+ */
+export function ChartCandlestick({
+  high,
+  low,
+  open,
+  close,
+  variant = 'default',
+  upColor,
+  downColor,
+  color,
+  bodyWidth = 0.6,
+  strokeWidth = 1.5,
+  radius = 2,
+}: ChartCandlestickProps) {
+  const {data, xKey, xScale, yScale} = useChart();
+
+  if (!isBandScale(xScale)) {
+    return null;
+  }
+  const bw = xScale.bandwidth();
+
+  return (
+    <g>
+      {data.map((d, i) => {
+        const xVal = xScale(String(d[xKey]));
+        if (xVal == null) {
+          return null;
+        }
+
+        const hVal = typeof d[high] === 'number' ? (d[high] as number) : 0;
+        const lVal = typeof d[low] === 'number' ? (d[low] as number) : 0;
+        const oVal = typeof d[open] === 'number' ? (d[open] as number) : 0;
+        const cVal = typeof d[close] === 'number' ? (d[close] as number) : 0;
+
+        const isUp = cVal >= oVal;
+        const fill =
+          color ??
+          (isUp
+            ? (upColor ?? 'var(--color-data-categorical-green)')
+            : (downColor ?? 'var(--color-data-categorical-red)'));
+        const centerX = xVal + bw / 2;
+
+        const yHigh = yScale(hVal);
+        const yLow = yScale(lVal);
+        const yOpen = yScale(oVal);
+        const yClose = yScale(cVal);
+        const bodyTop = Math.min(yOpen, yClose);
+        const bodyBot = Math.max(yOpen, yClose);
+
+        if (variant === 'bar') {
+          // OHLC bar: vertical line (high→low), left tick at open, right tick at close
+          const tickLen = bw * bodyWidth * 0.4;
+          return (
+            <g key={i}>
+              {/* Vertical range line: high to low */}
+              <line
+                x1={centerX}
+                x2={centerX}
+                y1={yHigh}
+                y2={yLow}
+                stroke={fill}
+                strokeWidth={strokeWidth}
+              />
+              {/* Open tick — extends left */}
+              <line
+                x1={centerX - tickLen}
+                x2={centerX}
+                y1={yOpen}
+                y2={yOpen}
+                stroke={fill}
+                strokeWidth={strokeWidth}
+              />
+              {/* Close tick — extends right */}
+              <line
+                x1={centerX}
+                x2={centerX + tickLen}
+                y1={yClose}
+                y2={yClose}
+                stroke={fill}
+                strokeWidth={strokeWidth}
+              />
+            </g>
+          );
+        }
+
+        // Default variant: filled body with whiskers
+        const bodyW = bw * bodyWidth;
+        const bodyX = centerX - bodyW / 2;
+        const bodyH = Math.max(1, bodyBot - bodyTop);
+
+        return (
+          <g key={i}>
+            <line
+              x1={centerX}
+              x2={centerX}
+              y1={yHigh}
+              y2={bodyTop}
+              stroke={fill}
+              strokeWidth={strokeWidth}
+            />
+            <line
+              x1={centerX}
+              x2={centerX}
+              y1={bodyBot}
+              y2={yLow}
+              stroke={fill}
+              strokeWidth={strokeWidth}
+            />
+            <rect
+              x={bodyX}
+              y={bodyTop}
+              width={bodyW}
+              height={bodyH}
+              fill={fill}
+              rx={radius}
+              ry={radius}
+            />
+          </g>
+        );
+      })}
+    </g>
+  );
+}

package/src/Chart/ChartContext.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartContext.ts
+ * @output React context for sharing scales and dimensions between chart components
+ * @position Consumed by Chart (provider) and all child components (consumers)
+ */
+
+import {createContext, useContext} from 'react';
+import type {ChartContext} from './types';
+
+const ChartCtx = createContext<ChartContext | null>(null);
+
+export const ChartProvider = ChartCtx.Provider;
+
+/** Access the chart context. Throws if used outside <Chart>. */
+export function useChart(): ChartContext {
+  const ctx = useContext(ChartCtx);
+  if (!ctx) {
+    throw new Error('Chart components must be used inside <Chart>');
+  }
+  return ctx;
+}

package/src/Chart/ChartDot.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../core/src/docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'ChartDot',
+  displayName: 'Chart Dot',
+  group: 'Chart',
+  category: 'Data Visualization',
+
+  usage: {
+    description: '',
+  },
+
+  props: [],
+};

package/src/Chart/ChartDot.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartDot.tsx
+ * @output Renders scatter dots for a data key
+ * @position Child of Chart; reads scales from context
+ */
+
+import {useChart} from './ChartContext';
+import {xPixel} from './utils';
+
+export interface ChartDotProps {
+  /** Which data key for the y values */
+  dataKey: string;
+  /** Dot fill color */
+  color: string;
+  /** Dot radius */
+  radius?: number;
+}
+
+/**
+ * Scatter dot marks.
+ *
+ * @example
+ * ```
+ * <ChartDot dataKey="outliers" color={useChartColors().categorical(3)[2]} />
+ * ```
+ */
+export function ChartDot({dataKey, color, radius = 4}: ChartDotProps) {
+  const {data, xKey, xScale, yScale} = useChart();
+
+  return (
+    <g>
+      {data.map((d, i) => {
+        const x = xPixel(d, xKey, xScale);
+        const yVal =
+          typeof d[dataKey] === 'number' ? (d[dataKey] as number) : 0;
+        return (
+          <circle key={i} cx={x} cy={yScale(yVal)} r={radius} fill={color} />
+        );
+      })}
+    </g>
+  );
+}

package/src/Chart/ChartDotGL.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../core/src/docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'ChartDotGL',
+  displayName: 'Chart Dot GL',
+  group: 'Chart',
+  category: 'Data Visualization',
+
+  usage: {
+    description: '',
+  },
+
+  props: [],
+};

package/src/Chart/ChartDotGL.tsx

@@ -0,0 +1,151 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartDotGL.tsx
+ * @output WebGL scatter — single draw call, canvas mounted outside SVG for sharp DPR
+ * @position Child of Chart; reads scales from context
+ */
+
+import {useRef, useEffect, useCallback} from 'react';
+import {useChart} from './ChartContext';
+import {xPixel} from './utils';
+import {
+  hexToGL,
+  getWebGLContext,
+  setupGLState,
+  sizeCanvas,
+  mountCanvasOverSVG,
+  createProgram,
+  POINT_SIZE_COMPENSATION,
+} from './webgl';
+
+export interface ChartDotGLProps {
+  dataKey: string;
+  color: string;
+  size?: number;
+  opacity?: number;
+}
+
+const VERT = `
+  attribute vec2 a_position;
+  uniform vec2 u_resolution;
+  uniform float u_size;
+  varying float v_alpha;
+  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 * ${POINT_SIZE_COMPENSATION.toFixed(6)};
+    v_alpha = 1.0;
+  }
+`;
+
+const FRAG = `
+  precision mediump float;
+  uniform vec3 u_color;
+  uniform float u_opacity;
+  varying float v_alpha;
+  void main() {
+    float v_alpha_final = u_opacity;
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    float dist = length(coord);
+    if (dist > 0.5) discard;
+    float edge = 1.0 - smoothstep(0.48, 0.5, dist);
+    float a = v_alpha_final * edge;
+    gl_FragColor = vec4(u_color * a, a);
+  }
+`;
+
+/**
+ * WebGL scatter plot. Canvas mounted outside SVG for sharp Retina rendering.
+ *
+ * @example
+ * ```
+ * <ChartDotGL dataKey="value" color={colors.categorical(1)[0]} />
+ * ```
+ */
+export function ChartDotGL({
+  dataKey,
+  color,
+  size = 6,
+  opacity = 0.8,
+}: ChartDotGLProps) {
+  const {data, xKey, xScale, yScale, width, height} = useChart();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const glRef = useRef<WebGLRenderingContext | null>(null);
+  const programRef = useRef<WebGLProgram | null>(null);
+  const markerRef = useRef<SVGGElement>(null);
+
+  const getPositions = useCallback((): Float32Array => {
+    const positions: number[] = [];
+    for (const d of data) {
+      const x = xPixel(d, xKey, xScale);
+      const yVal = typeof d[dataKey] === 'number' ? (d[dataKey] as number) : 0;
+      positions.push(x, yScale(yVal));
+    }
+    return new Float32Array(positions);
+  }, [data, xKey, dataKey, xScale, yScale]);
+
+  // 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;
+    }
+
+    const dpr = 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 = getPositions();
+    const posBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, 'a_position');
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+
+    const [r, g, b] = hexToGL(color);
+    gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), width, height);
+    gl.uniform3f(gl.getUniformLocation(program, 'u_color'), r, g, b);
+    gl.uniform1f(gl.getUniformLocation(program, 'u_size'), size * dpr);
+    gl.uniform1f(gl.getUniformLocation(program, 'u_opacity'), opacity);
+
+    gl.drawArrays(gl.POINTS, 0, positions.length / 2);
+    gl.deleteBuffer(posBuffer);
+  }, [width, height, color, size, opacity, getPositions]);
+
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  return <g ref={markerRef} />;
+}

package/src/Chart/ChartDotGLInteractive.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../core/src/docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'ChartDotGLInteractive',
+  displayName: 'Chart Dot GL Interactive',
+  group: 'Chart',
+  category: 'Data Visualization',
+
+  usage: {
+    description: '',
+  },
+
+  props: [],
+};