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

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>
+      );
+    },
+  };
+}

package/src/ChartV2/marks/dot.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file marks/dot.tsx
+ * @output Dot/scatter series — self-contained resolve + 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 DotOptions {
+  color?: ColorAccessor;
+  radius?: number;
+  opacity?: number;
+  dodge?: boolean;
+  label?: string;
+}
+
+export function dot(dataKey: string, options: DotOptions = {}): SeriesDef {
+  const color = options.color ?? 'var(--color-chart-1)';
+  const radius = options.radius ?? 4;
+  const opacity = options.opacity ?? 0.8;
+
+  return {
+    type: 'dot',
+    key: dataKey,
+    dataKeys: [dataKey],
+    color: typeof color === 'string' ? color : undefined,
+    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});
+      }
+      // TODO: dodge layout runs here — has access to radius + all points
+      return points;
+    },
+
+    render(resolved, ctx) {
+      const {data} = ctx;
+      return (
+        <g>
+          {resolved.map((p, i) => {
+            const fill = typeof color === 'function' ? color(data[p.dataIndex], p.dataIndex) : color;
+            return <circle key={i} cx={p.px} cy={p.py} r={radius} fill={fill} opacity={opacity} />;
+          })}
+        </g>
+      );
+    },
+  };
+}