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

package/src/Chart/ChartHeatmapGL.tsx

@@ -0,0 +1,219 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartHeatmapGL.tsx
+ * @output WebGL heatmap — 2D grid, canvas mounted outside SVG
+ * @position Child of Chart; manages its own y band scale for rows
+ */
+
+import {useRef, useEffect, useMemo} from 'react';
+import {scaleBand} from 'd3-scale';
+import {useChart} from './ChartContext';
+import {isBandScale} from './utils';
+import {
+  hexToGL,
+  getWebGLContext,
+  setupGLState,
+  sizeCanvas,
+  mountCanvasOverSVG,
+  createProgram,
+} from './webgl';
+
+export interface ChartHeatmapGLProps {
+  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]),
+  ];
+}
+
+export function ChartHeatmapGL({
+  xKey,
+  yKey,
+  valueKey,
+  colorRange,
+  domain: domainProp,
+  cellGap = 1,
+}: ChartHeatmapGLProps) {
+  const {data, xScale, 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 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
+  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 || !isBandScale(xScale)) {
+      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;
+
+      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} />;
+}

package/src/Chart/ChartLegend.tsx

@@ -0,0 +1,181 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartLegend.tsx
+ * @output Renders a legend — discrete swatches or continuous gradient bar
+ * @position Child of Chart or standalone
+ *
+ * Two modes:
+ * - Discrete: pass `items` — renders color swatches with labels
+ * - Gradient: pass `gradient` + `domain` — renders a continuous color bar with tick labels
+ *
+ * The `gradient` prop accepts the output of useChartColors().sequential/diverging directly.
+ */
+
+export interface ChartLegendItem {
+  label: string;
+  color: string;
+}
+
+export interface ChartLegendProps {
+  /** Discrete legend items — color swatches with labels */
+  items?: ChartLegendItem[];
+  /**
+   * Continuous gradient — array of hex colors from low to high.
+   * Pass the output of useChartColors().sequential.blue(5) or diverging directly.
+   */
+  gradient?: string[];
+  /** Numeric domain for the gradient [min, max]. Required when gradient is set. */
+  domain?: [number, number];
+  /** Label for the gradient legend */
+  label?: string;
+  /** Number of tick labels on the gradient bar (default: 3) */
+  ticks?: number;
+  /** Custom tick formatter */
+  tickFormat?: (value: number) => string;
+}
+
+/** Build a CSS linear-gradient from an array of color stops */
+function toGradientCSS(colors: string[]): string {
+  if (colors.length === 0) {
+    return 'transparent';
+  }
+  if (colors.length === 1) {
+    return colors[0];
+  }
+  const stops = colors.map(
+    (c, i) => `${c} ${(i / (colors.length - 1)) * 100}%`,
+  );
+  return `linear-gradient(to right, ${stops.join(', ')})`;
+}
+
+/**
+ * Chart legend — discrete swatches or continuous gradient.
+ *
+ * @example
+ * ```
+ * // Discrete
+ * <ChartLegend items={[
+ *   {label: 'Revenue', color: colors[0]},
+ *   {label: 'Expenses', color: colors[1]},
+ * ]} />
+ *
+ * // Continuous — pipe useChartColors() directly
+ * <ChartLegend
+ *   gradient={useChartColors().sequential.blue(5)}
+ *   domain={[0, 100]}
+ *   label="Temperature"
+ * />
+ *
+ * // Diverging
+ * <ChartLegend
+ *   gradient={useChartColors().diverging.coldHot(7)}
+ *   domain={[-50, 50]}
+ *   label="Change %"
+ * />
+ * ```
+ */
+export function ChartLegend({
+  items,
+  gradient,
+  domain,
+  label,
+  ticks = 3,
+  tickFormat = String,
+}: ChartLegendProps) {
+  // Gradient mode
+  if (gradient && gradient.length > 0 && domain) {
+    const [min, max] = domain;
+    const tickValues = Array.from(
+      {length: ticks},
+      (_, i) => min + (i / (ticks - 1)) * (max - min),
+    );
+
+    return (
+      <foreignObject
+        x={0}
+        y={-4}
+        width="100%"
+        height={48}
+        style={{overflow: 'visible'}}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 4,
+            fontSize: 12,
+            color: 'var(--color-text-secondary)',
+          }}>
+          {label && (
+            <span style={{fontWeight: 500, color: 'var(--color-text-primary)'}}>
+              {label}
+            </span>
+          )}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              width: 200,
+            }}>
+            <div
+              style={{
+                height: 10,
+                borderRadius: 4,
+                background: toGradientCSS(gradient),
+              }}
+            />
+            <div style={{display: 'flex', justifyContent: 'space-between'}}>
+              {tickValues.map(v => (
+                <span key={v} style={{fontSize: 10}}>
+                  {tickFormat(v)}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </foreignObject>
+    );
+  }
+
+  // Discrete mode
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <foreignObject
+      x={0}
+      y={-4}
+      width="100%"
+      height={24}
+      style={{overflow: 'visible'}}>
+      <div
+        style={{
+          display: 'flex',
+          gap: 16,
+          justifyContent: 'center',
+          fontSize: 12,
+          color: 'var(--color-text-secondary)',
+        }}>
+        {items.map(item => (
+          <div
+            key={item.label}
+            style={{display: 'flex', alignItems: 'center', gap: 4}}>
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 2,
+                backgroundColor: item.color,
+                flexShrink: 0,
+              }}
+            />
+            <span>{item.label}</span>
+          </div>
+        ))}
+      </div>
+    </foreignObject>
+  );
+}

package/src/Chart/ChartLine.doc.mjs

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

package/src/Chart/ChartLine.tsx

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartLine.tsx
+ * @output Renders a line for a data key
+ * @position Child of Chart; reads scales from context
+ */
+
+import {useMemo} from 'react';
+import {line, curveMonotoneX} from 'd3-shape';
+import {useChart} from './ChartContext';
+import {xPixel} from './utils';
+
+export interface ChartLineProps {
+  /** Which data key to visualize */
+  dataKey: string;
+  /** Line stroke color */
+  color: string;
+  /** Stroke width */
+  strokeWidth?: number;
+  /** Show dots at data points */
+  dots?: boolean;
+  /** Dot radius */
+  dotRadius?: number;
+}
+
+/**
+ * Line mark. Works with both band and linear x-scales.
+ *
+ * @example
+ * ```
+ * <ChartLine dataKey="trend" color={useChartColors().categorical(2)[1]} />
+ * <ChartLine dataKey="trend" color="#0171E3" dots />
+ * ```
+ */
+export function ChartLine({
+  dataKey,
+  color,
+  strokeWidth = 2,
+  dots = false,
+  dotRadius = 3,
+}: ChartLineProps) {
+  const {data, xKey, xScale, yScale} = useChart();
+
+  const points = useMemo(() => {
+    return data.map((d, i) => {
+      const x = xPixel(d, xKey, xScale);
+      const yVal = typeof d[dataKey] === 'number' ? (d[dataKey] as number) : 0;
+      return {x, y: yScale(yVal), index: i};
+    });
+  }, [data, xKey, dataKey, xScale, yScale]);
+
+  const pathD = useMemo(() => {
+    const generator = line<{x: number; y: number}>()
+      .x(d => d.x)
+      .y(d => d.y)
+      .curve(curveMonotoneX);
+    return generator(points) ?? '';
+  }, [points]);
+
+  return (
+    <g>
+      <path d={pathD} fill="none" stroke={color} strokeWidth={strokeWidth} />
+      {dots &&
+        points.map(p => (
+          <circle key={p.index} cx={p.x} cy={p.y} r={dotRadius} fill={color} />
+        ))}
+    </g>
+  );
+}

package/src/Chart/ChartReferenceLine.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartReferenceLine.tsx
+ * @output Horizontal or vertical reference line with crosshair-style badge label
+ */
+
+import {useChart} from './ChartContext';
+import {isBandScale} from './utils';
+import type {ScaleLinear} from 'd3-scale';
+
+export interface ChartReferenceLineProps {
+  y?: number;
+  x?: number;
+  color?: string;
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  label?: string;
+  labelPosition?: 'start' | 'end';
+}
+
+export function ChartReferenceLine({
+  y, x, color = 'var(--color-border-emphasized)',
+  strokeWidth = 1, strokeDasharray = '6 3', label, labelPosition = 'end',
+}: ChartReferenceLineProps) {
+  const {width, height, xScale, yScale} = useChart();
+
+  // Shared badge dimensions — matches crosshair label style
+  const badgeH = 14;
+  const badgeRx = 3;
+  const fontSize = 10;
+
+  if (y != null) {
+    const py = yScale(y);
+    const textW = label ? label.length * 5.5 + 8 : 0;
+    const bx = labelPosition === 'end' ? width - textW - 2 : 2;
+    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>
+    );
+  }
+
+  if (x != null && !isBandScale(xScale)) {
+    const px = (xScale as ScaleLinear<number, number>)(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;
+}

package/src/Chart/ChartSelect.tsx

@@ -0,0 +1,111 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ChartSelect.tsx
+ * @output Click/tap to select data points. Pointer events.
+ */
+
+import {useCallback} from 'react';
+import {useChart} from './ChartContext';
+import {xPixel} from './utils';
+
+export interface ChartSelectProps {
+  onSelect?: (datum: Record<string, unknown>, index: number) => void;
+  onSelectionChange?: (indices: number[]) => void;
+  selected?: number[];
+  color?: string;
+  radius?: number;
+}
+
+export function ChartSelect({
+  onSelect,
+  onSelectionChange,
+  selected = [],
+  color = 'var(--color-accent)',
+  radius = 6,
+}: ChartSelectProps) {
+  const {width, height, data, xKey, xScale, yScale} = useChart();
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent<SVGRectElement>) => {
+      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(),
+      );
+
+      let closest = 0,
+        minDist = Infinity;
+      data.forEach((d, i) => {
+        const px = xPixel(d, xKey, xScale);
+        const numKeys = Object.keys(d).filter(
+          k => k !== xKey && typeof d[k] === 'number',
+        );
+        const py = numKeys.length > 0 ? yScale(d[numKeys[0]] as number) : 0;
+        const dist = Math.hypot(px - local.x, py - local.y);
+        if (dist < minDist) {
+          minDist = dist;
+          closest = i;
+        }
+      });
+      if (minDist > 30) {
+        return;
+      }
+      onSelect?.(data[closest], closest);
+      if (onSelectionChange) {
+        if (e.shiftKey || e.metaKey) {
+          onSelectionChange(
+            selected.includes(closest)
+              ? selected.filter(i => i !== closest)
+              : [...selected, closest],
+          );
+        } else {
+          onSelectionChange([closest]);
+        }
+      }
+    },
+    [data, xKey, xScale, yScale, selected, onSelect, onSelectionChange],
+  );
+
+  return (
+    <g>
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill="transparent"
+        style={{cursor: 'pointer'}}
+        onPointerUp={handlePointerUp}
+      />
+      {selected.map(idx => {
+        if (idx < 0 || idx >= data.length) {
+          return null;
+        }
+        const d = data[idx];
+        const px = xPixel(d, xKey, xScale);
+        const yKey = Object.keys(d).find(
+          k => k !== xKey && typeof d[k] === 'number',
+        );
+        const py = yKey ? yScale(d[yKey] as number) : 0;
+        return (
+          <circle
+            key={idx}
+            cx={px}
+            cy={py}
+            r={radius}
+            fill="none"
+            stroke={color}
+            strokeWidth={2}
+            pointerEvents="none"
+          />
+        );
+      })}
+    </g>
+  );
+}

package/src/Chart/ChartStreamGL.doc.mjs

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