@astryxdesign/lab 0.1.4-canary.39ffd21 → 0.1.4-canary.3d64ef2

package/src/ChartV2/layout.ts

@@ -1,223 +0,0 @@
-// 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

@@ -1,32 +0,0 @@
-// 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

@@ -1,122 +0,0 @@
-// 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

@@ -1,70 +0,0 @@
-// 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

@@ -1,159 +0,0 @@
-// 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

@@ -1,106 +0,0 @@
-// 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>
-      );
-    },
-  };
-}