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

package/src/ChartV2/layout.ts

@@ -0,0 +1,223 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file layout.ts
+ * @output Computes scales, stacking, grouping, then delegates to each series.resolve()
+ * @position Called by Chart root — the single layout pass
+ *
+ * The layout engine does NOT know about specific mark types.
+ * It handles cross-series coordination (scales, stacking, grouping)
+ * then calls each series' own resolve() method.
+ */
+
+import {scaleLinear, scaleBand} from 'd3-scale';
+import {stack as d3Stack, stackOrderNone, stackOffsetNone} from 'd3-shape';
+import type {
+  SeriesDef,
+  ChartScale,
+  ResolvedPoint,
+  SeriesContext,
+} from './types';
+
+export interface LayoutInput {
+  data: Record<string, unknown>[];
+  xKey: string;
+  series: SeriesDef[];
+  width: number;
+  height: number;
+}
+
+export interface LayoutResult {
+  xScale: ChartScale;
+  yScale: ReturnType<typeof scaleLinear<number, number>>;
+  resolved: Map<string, ResolvedPoint[]>;
+}
+
+export function computeLayout({
+  data,
+  xKey,
+  series,
+  width,
+  height,
+}: LayoutInput): LayoutResult {
+  // ─── 1. X scale ──────────────────────────────────────────────────────
+  const xValues = data.map(d => d[xKey]);
+  const isNumericX =
+    xValues.length > 0 && xValues.every(v => typeof v === 'number');
+
+  let xScale: ChartScale;
+  if (isNumericX) {
+    const nums = xValues as number[];
+    xScale = scaleLinear()
+      .domain([Math.min(...nums), Math.max(...nums)])
+      .range([0, width])
+      .nice();
+  } else {
+    xScale = scaleBand<string>()
+      .domain(xValues.map(String))
+      .range([0, width])
+      .padding(0.2);
+  }
+
+  // ─── 2. Y domain from all series dataKeys ────────────────────────────
+  const allKeys = new Set<string>();
+  let includeZero = false;
+  for (const s of series) {
+    for (const k of s.dataKeys) {
+      allKeys.add(k);
+    }
+    if (s.layout.includeZero) {
+      includeZero = true;
+    }
+  }
+
+  // Collect which keys are stacked together so we can compute stacked extents
+  const stackGroupKeys = new Map<string, string[]>();
+  for (const s of series) {
+    if (s.layout.stack) {
+      const group = stackGroupKeys.get(s.layout.stack) ?? [];
+      group.push(s.dataKeys[0]);
+      stackGroupKeys.set(s.layout.stack, group);
+    }
+  }
+
+  let yMin = Infinity,
+    yMax = -Infinity;
+
+  // For stacked series, compute the sum at each data point
+  const stackedKeys = new Set<string>();
+  for (const [, keys] of stackGroupKeys) {
+    for (const k of keys) {
+      stackedKeys.add(k);
+    }
+    for (const d of data) {
+      let sum = 0;
+      for (const k of keys) {
+        const v = d[k];
+        if (typeof v === 'number') {
+          sum += v;
+        }
+      }
+      if (sum > yMax) {
+        yMax = sum;
+      }
+      if (sum < yMin) {
+        yMin = sum;
+      }
+    }
+  }
+
+  // For non-stacked series, use individual values
+  for (const d of data) {
+    for (const k of allKeys) {
+      if (stackedKeys.has(k)) {
+        continue;
+      } // already handled above
+      const v = d[k];
+      if (typeof v === 'number') {
+        if (v < yMin) {
+          yMin = v;
+        }
+        if (v > yMax) {
+          yMax = v;
+        }
+      }
+    }
+  }
+
+  if (includeZero) {
+    if (yMin > 0) {
+      yMin = 0;
+    }
+    if (yMax < 0) {
+      yMax = 0;
+    }
+  }
+  const yScale = scaleLinear().domain([yMin, yMax]).range([height, 0]).nice();
+
+  // ─── 3. Stacking ─────────────────────────────────────────────────────
+  const stackGroups = new Map<string, string[]>();
+  for (const s of series) {
+    if (s.layout.stack) {
+      const group = stackGroups.get(s.layout.stack) ?? [];
+      group.push(s.dataKeys[0]);
+      stackGroups.set(s.layout.stack, group);
+    }
+  }
+
+  const stackedData = new Map<string, {y0: number; y1: number}[]>();
+  for (const [, keys] of stackGroups) {
+    const stackGen = d3Stack<Record<string, unknown>>()
+      .keys(keys)
+      .order(stackOrderNone)
+      .offset(stackOffsetNone);
+    const stacked = stackGen(data);
+    for (const layer of stacked) {
+      stackedData.set(
+        layer.key,
+        layer.map(d => ({y0: d[0], y1: d[1]})),
+      );
+    }
+  }
+
+  // ─── 4. Bar grouping ─────────────────────────────────────────────────
+  // Bars can be grouped (side-by-side) whether or not they are stacked.
+  // For grouped stacks, each unique stack group name within the same bar
+  // group gets its own sub-band. For ungrouped non-stacked bars with a
+  // group key, each series gets its own sub-band.
+  const barGroups = new Map<string, string[]>();
+  for (const s of series) {
+    if (s.type === 'bar' && s.layout.group) {
+      const group = barGroups.get(s.layout.group) ?? [];
+      // For grouped stacks: use the stack name as the group slot identifier
+      // so all series in the same stack share one slot.
+      const slotKey = s.layout.stack ?? s.key;
+      if (!group.includes(slotKey)) {
+        group.push(slotKey);
+      }
+      barGroups.set(s.layout.group, group);
+    }
+  }
+
+  // ─── 5. Resolve each series ──────────────────────────────────────────
+  const ctx: SeriesContext = {data, xKey, xScale, yScale, width, height};
+  const resolved = new Map<string, ResolvedPoint[]>();
+
+  // Determine which series is the topmost in each stack group
+  const stackTopKeys = new Set<string>();
+  for (const [, keys] of stackGroups) {
+    // Last key in the stack group is rendered on top
+    if (keys.length > 0) {
+      stackTopKeys.add(keys[keys.length - 1]);
+    }
+  }
+
+  for (const s of series) {
+    const stackOffsets = stackedData.get(s.dataKeys[0]);
+
+    // Mark whether this series is the topmost in its stack
+    if (s.layout.stack) {
+      s._isTopOfStack = stackTopKeys.has(s.dataKeys[0]);
+    } else {
+      s._isTopOfStack = true;
+    }
+
+    let groupInfo: {index: number; count: number} | undefined;
+    if (s.layout.group) {
+      const groupKeys = barGroups.get(s.layout.group);
+      if (groupKeys) {
+        // For grouped stacks, the slot key is the stack name
+        const slotKey = s.layout.stack ?? s.key;
+        groupInfo = {
+          index: groupKeys.indexOf(slotKey),
+          count: groupKeys.length,
+        };
+      }
+    }
+
+    const points = s.resolve(ctx, stackOffsets, groupInfo);
+    resolved.set(s.key, points);
+  }
+
+  return {xScale, yScale, resolved};
+}

package/src/ChartV2/legend.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file legend.ts
+ * @output Legend utility — derives legend items from series definitions
+ * @position Used by Chart to bridge series → legend items
+ */
+
+import {isUtilityMarkType, type SeriesDef} from './types';
+
+export interface LegendItem {
+  label: string;
+  color: string;
+  /** Mark type — determines swatch shape (square for bar, line for everything else) */
+  type?: string;
+}
+
+function hasLegendColor(
+  series: SeriesDef,
+): series is SeriesDef & {readonly color: string} {
+  return !isUtilityMarkType(series.type) && series.color != null;
+}
+
+/**
+ * Derive legend items from series definitions.
+ * Skips utility marks and series without a color.
+ */
+export function deriveLegendItems(series: readonly SeriesDef[]): LegendItem[] {
+  return series
+    .filter(hasLegendColor)
+    .map(s => ({label: s.label ?? s.key, color: s.color, type: s.type}));
+}

package/src/ChartV2/marks/area.tsx

@@ -0,0 +1,122 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/area.tsx
+ * @output Area series — fill under line with stacking + gradient support
+ */
+
+import {
+  area as d3Area,
+  curveLinear,
+  curveMonotoneX,
+  curveNatural,
+  curveStep,
+} from 'd3-shape';
+import {line as d3Line} 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 interface AreaOptions {
+  color?: string;
+  opacity?: number;
+  curve?: keyof typeof CURVES;
+  stack?: string;
+  gradient?: boolean;
+  stroke?: boolean;
+  label?: string;
+}
+
+export function area(dataKey: string, options: AreaOptions = {}): SeriesDef {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const opacity = options.opacity ?? 0.3;
+  const curve = options.curve ?? 'monotone';
+  const gradient = options.gradient ?? false;
+  const stroke = options.stroke ?? true;
+
+  return {
+    type: 'area',
+    key: dataKey,
+    dataKeys: [dataKey],
+    color,
+    label: options.label ?? dataKey,
+    layout: {stack: options.stack, includeZero: true},
+
+    resolve(ctx, stackOffsets) {
+      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);
+        }
+        let py: number, py0: number;
+        if (stackOffsets) {
+          py = yScale(stackOffsets[i].y1);
+          py0 = yScale(stackOffsets[i].y0);
+        } else {
+          const v = typeof d[dataKey] === 'number' ? (d[dataKey] as number) : 0;
+          py = yScale(v);
+          py0 = yScale(0);
+        }
+        points.push({px, py, py0, dataIndex: i});
+      }
+      return points;
+    },
+
+    render(resolved) {
+      if (resolved.length === 0) {
+        return null;
+      }
+      const curveFactory = CURVES[curve];
+
+      const areaGen = d3Area<ResolvedPoint>()
+        .x(d => d.px)
+        .y0(d => d.py0)
+        .y1(d => d.py)
+        .curve(curveFactory);
+      const pathD = areaGen(resolved) ?? '';
+
+      const lineGen = d3Line<ResolvedPoint>()
+        .x(d => d.px)
+        .y(d => d.py)
+        .curve(curveFactory);
+      const strokeD = lineGen(resolved) ?? '';
+
+      const gradientId = `area-grad-${dataKey}`;
+
+      return (
+        <g>
+          {gradient && (
+            <defs>
+              <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={color} stopOpacity={opacity} />
+                <stop offset="100%" stopColor={color} stopOpacity={0} />
+              </linearGradient>
+            </defs>
+          )}
+          <path
+            d={pathD}
+            fill={gradient ? `url(#${gradientId})` : color}
+            fillOpacity={gradient ? 1 : opacity}
+            stroke="none"
+          />
+          {stroke && (
+            <path d={strokeD} fill="none" stroke={color} strokeWidth={2} />
+          )}
+        </g>
+      );
+    },
+  };
+}

package/src/ChartV2/marks/band.tsx

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/band.tsx
+ * @output Band (confidence interval) series
+ */
+
+import {area as d3Area, curveMonotoneX} from 'd3-shape';
+import type {SeriesDef, ResolvedPoint} from '../types';
+import type {ScaleBand} from 'd3-scale';
+
+export interface BandOptions {
+  upper: string;
+  lower: string;
+  color?: string;
+  opacity?: number;
+}
+
+export function band(options: BandOptions): SeriesDef {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const opacity = options.opacity ?? 0.15;
+
+  return {
+    type: 'band',
+    key: `band-${options.upper}-${options.lower}`,
+    dataKeys: [options.upper, options.lower],
+    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 upper =
+          typeof d[options.upper] === 'number'
+            ? (d[options.upper] as number)
+            : 0;
+        const lower =
+          typeof d[options.lower] === 'number'
+            ? (d[options.lower] as number)
+            : 0;
+        points.push({px, py: yScale(upper), py0: yScale(lower), dataIndex: i});
+      }
+      return points;
+    },
+
+    render(resolved) {
+      if (resolved.length === 0) {
+        return null;
+      }
+      const areaGen = d3Area<ResolvedPoint>()
+        .x(d => d.px)
+        .y0(d => d.py0)
+        .y1(d => d.py)
+        .curve(curveMonotoneX);
+      const pathD = areaGen(resolved) ?? '';
+      return (
+        <path d={pathD} fill={color} fillOpacity={opacity} stroke="none" />
+      );
+    },
+  };
+}

package/src/ChartV2/marks/bar.tsx

@@ -0,0 +1,159 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/bar.tsx
+ * @output Bar series — self-contained resolve + render
+ * @position Standalone mark; chart root calls resolve() then render()
+ */
+
+import type {SeriesDef, ResolvedPoint} from '../types';
+import type {ScaleBand} from 'd3-scale';
+
+export type ColorAccessor =
+  | string
+  | ((datum: Record<string, unknown>, index: number) => string);
+
+export interface BarOptions {
+  color?: ColorAccessor;
+  opacity?: number;
+  radius?: number;
+  stack?: string;
+  group?: string;
+  label?: string;
+}
+
+/**
+ * Build an SVG path for a rectangle with only the top corners rounded.
+ * When `r` is 0, produces a simple rect path with no curves.
+ */
+function roundedTopRect(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+): string {
+  // Clamp radius to half the smaller dimension
+  const cr = Math.min(r, w / 2, h / 2);
+  if (cr <= 0) {
+    return `M${x},${y + h}V${y}H${x + w}V${y + h}Z`;
+  }
+  return (
+    `M${x},${y + h}` +
+    `V${y + cr}Q${x},${y} ${x + cr},${y}` +
+    `H${x + w - cr}Q${x + w},${y} ${x + w},${y + cr}` +
+    `V${y + h}Z`
+  );
+}
+
+/**
+ * Build an SVG path for a rectangle with only the bottom corners rounded.
+ */
+function roundedBottomRect(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+): string {
+  const cr = Math.min(r, w / 2, h / 2);
+  if (cr <= 0) {
+    return `M${x},${y}V${y + h}H${x + w}V${y}Z`;
+  }
+  return (
+    `M${x},${y}` +
+    `V${y + h - cr}Q${x},${y + h} ${x + cr},${y + h}` +
+    `H${x + w - cr}Q${x + w},${y + h} ${x + w},${y + h - cr}` +
+    `V${y}Z`
+  );
+}
+
+export function bar(dataKey: string, options: BarOptions = {}): SeriesDef {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const opacity = options.opacity ?? 1;
+  const radius = options.radius ?? 4;
+
+  let barWidth = 0;
+  let barOffset = 0;
+
+  const seriesDef: SeriesDef = {
+    type: 'bar',
+    key: dataKey,
+    dataKeys: [dataKey],
+    color: typeof color === 'string' ? color : undefined,
+    label: options.label ?? dataKey,
+    layout: {
+      stack: options.stack,
+      group: options.group,
+      includeZero: true,
+    },
+
+    resolve(ctx, stackOffsets, groupInfo) {
+      const {data, xKey, xScale, yScale} = ctx;
+      if (!('bandwidth' in xScale)) {
+        return [];
+      }
+
+      const bandScale = xScale as ScaleBand<string>;
+      const bw = bandScale.bandwidth();
+
+      if (groupInfo) {
+        const gutter = bw * 0.05;
+        const totalGutters = gutter * (groupInfo.count - 1);
+        barWidth = (bw - totalGutters) / groupInfo.count;
+        barOffset = groupInfo.index * (barWidth + gutter);
+      } else {
+        barWidth = bw;
+        barOffset = 0;
+      }
+
+      const points: ResolvedPoint[] = [];
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        const xBase = bandScale(String(d[xKey])) ?? 0;
+        const px = xBase + barOffset + barWidth / 2;
+
+        let py: number;
+        let py0: number;
+        if (stackOffsets) {
+          py = yScale(stackOffsets[i].y1);
+          py0 = yScale(stackOffsets[i].y0);
+        } else {
+          const v = typeof d[dataKey] === 'number' ? (d[dataKey] as number) : 0;
+          py = yScale(v);
+          py0 = yScale(0);
+        }
+        points.push({px, py, py0, dataIndex: i});
+      }
+      return points;
+    },
+
+    render(resolved, ctx) {
+      const {data} = ctx;
+      const isTop = seriesDef._isTopOfStack !== false;
+      const r = isTop ? radius : 0;
+
+      return (
+        <g opacity={opacity}>
+          {resolved.map((p, i) => {
+            const d = data[p.dataIndex];
+            const fill =
+              typeof color === 'function' ? color(d, p.dataIndex) : color;
+            const x = p.px - barWidth / 2;
+            const y = Math.min(p.py, p.py0);
+            const h = Math.max(0, Math.abs(p.py0 - p.py));
+            const growsUp = p.py <= p.py0;
+
+            const d_attr = growsUp
+              ? roundedTopRect(x, y, barWidth, h, r)
+              : roundedBottomRect(x, y, barWidth, h, r);
+
+            return <path key={i} d={d_attr} fill={fill} />;
+          })}
+        </g>
+      );
+    },
+  };
+
+  return seriesDef;
+}

package/src/ChartV2/marks/candlestick.tsx

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/candlestick.tsx
+ * @output Candlestick (OHLC) series
+ */
+
+import type {SeriesDef, ResolvedPoint} from '../types';
+import type {ScaleBand} from 'd3-scale';
+
+export interface CandlestickOptions {
+  open: string;
+  high: string;
+  low: string;
+  close: string;
+  upColor?: string;
+  downColor?: string;
+}
+
+export function candlestick(options: CandlestickOptions): SeriesDef {
+  const upColor = options.upColor ?? 'var(--color-positive)';
+  const downColor = options.downColor ?? 'var(--color-negative)';
+
+  return {
+    type: 'candlestick',
+    key: `ohlc-${options.close}`,
+    dataKeys: [options.open, options.high, options.low, options.close],
+    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 close =
+          typeof d[options.close] === 'number'
+            ? (d[options.close] as number)
+            : 0;
+        points.push({px, py: yScale(close), py0: yScale(0), dataIndex: i});
+      }
+      return points;
+    },
+
+    render(resolved, ctx) {
+      const {data, xScale, yScale} = ctx;
+      if (!('bandwidth' in xScale)) {
+        return null;
+      }
+      const bw = (xScale as ScaleBand<string>).bandwidth();
+      const bodyWidth = bw * 0.6;
+
+      return (
+        <g>
+          {resolved.map((p, i) => {
+            const d = data[p.dataIndex];
+            const o =
+              typeof d[options.open] === 'number'
+                ? (d[options.open] as number)
+                : 0;
+            const c =
+              typeof d[options.close] === 'number'
+                ? (d[options.close] as number)
+                : 0;
+            const h =
+              typeof d[options.high] === 'number'
+                ? (d[options.high] as number)
+                : 0;
+            const l =
+              typeof d[options.low] === 'number'
+                ? (d[options.low] as number)
+                : 0;
+            const isUp = c >= o;
+            const col = isUp ? upColor : downColor;
+            return (
+              <g key={i}>
+                <line
+                  x1={p.px}
+                  x2={p.px}
+                  y1={yScale(h)}
+                  y2={yScale(l)}
+                  stroke={col}
+                  strokeWidth={1}
+                />
+                <rect
+                  x={p.px - bodyWidth / 2}
+                  y={yScale(Math.max(o, c))}
+                  width={bodyWidth}
+                  height={Math.max(1, Math.abs(yScale(o) - yScale(c)))}
+                  fill={col}
+                />
+              </g>
+            );
+          })}
+        </g>
+      );
+    },
+  };
+}