Dow Jones Real-Time Dashboards in React: A Production Architecture for Streaming Market Data and Technical Analysis

export interface ConstituentQuote {
  readonly symbol: string;
  readonly last: number;
}

/**
 * Price-weighted index level: sum(prices) / divisor.
 * Quotes that are halted, unpriced, or non-finite are skipped rather than
 * poisoning the whole average with NaN.
 */
export function priceWeightedLevel(
  quotes: readonly ConstituentQuote[],
  divisor: number,
): number | null {
  if (!Number.isFinite(divisor) || divisor <= 0) {
    throw new RangeError('divisor must be a positive finite number');
  }

  let sum = 0;
  let counted = 0;

  for (const quote of quotes) {
    if (!Number.isFinite(quote.last) || quote.last <= 0) continue;
    sum += quote.last;
    counted += 1;
  }

  if (counted === 0) return null;
  return sum / divisor;
}

export type Tick = {
  readonly symbol: string;
  readonly price: number;
  readonly size: number;
  readonly ts: number; // epoch milliseconds, UTC
};

export type FeedState = 'idle' | 'connecting' | 'open' | 'reconnecting' | 'closed';

export interface FeedOptions {
  readonly url: string;
  readonly token: string;
  readonly onTick: (tick: Tick) => void;
  readonly onState?: (state: FeedState) => void;
  readonly heartbeatMs?: number;
  readonly baseBackoffMs?: number;
  readonly maxBackoffMs?: number;
}

export class MarketFeed {
  private socket: WebSocket | null = null;
  private attempt = 0;
  private heartbeat: ReturnType<typeof setInterval> | null = null;
  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
  private manuallyClosed = false;

  constructor(private readonly opts: FeedOptions) {}

  connect(): void {
    if (this.socket?.readyState === WebSocket.OPEN) return;
    this.manuallyClosed = false;
    this.setState('connecting');

    let socket: WebSocket;
    try {
      socket = new WebSocket(
        `${this.opts.url}?token=${encodeURIComponent(this.opts.token)}`,
      );
    } catch {
      // Wrong scheme or blocked by CSP: back off instead of throwing in render.
      this.scheduleReconnect();
      return;
    }

    this.socket = socket;

    socket.onopen = () => {
      this.attempt = 0;
      this.setState('open');
      this.startHeartbeat(socket);
    };

    socket.onmessage = (event: MessageEvent<string>) => {
      try {
        const parsed: unknown = JSON.parse(event.data);
        if (isTick(parsed)) this.opts.onTick(parsed);
      } catch {
        // Malformed frame: drop it. Never let bad data reach the render loop.
      }
    };

    socket.onerror = () => socket.close();

    socket.onclose = () => {
      this.stopHeartbeat();
      if (this.manuallyClosed) {
        this.setState('closed');
        return;
      }
      this.scheduleReconnect();
    };
  }

  private scheduleReconnect(): void {
    const base = this.opts.baseBackoffMs ?? 500;
    const max = this.opts.maxBackoffMs ?? 30_000;
    const ceiling = Math.min(max, base * 2 ** this.attempt);
    const delay = Math.random() * ceiling; // full jitter
    this.attempt += 1;
    this.setState('reconnecting');
    this.reconnectTimer = setTimeout(() => this.connect(), delay);
  }

  private startHeartbeat(socket: WebSocket): void {
    this.stopHeartbeat();
    this.heartbeat = setInterval(() => {
      if (socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: 'ping' }));
      }
    }, this.opts.heartbeatMs ?? 15_000);
  }

  private stopHeartbeat(): void {
    if (this.heartbeat !== null) clearInterval(this.heartbeat);
    this.heartbeat = null;
  }

  close(): void {
    this.manuallyClosed = true;
    if (this.reconnectTimer !== null) clearTimeout(this.reconnectTimer);
    this.stopHeartbeat();
    this.socket?.close(1000, 'client shutdown');
    this.socket = null;
  }

  private setState(state: FeedState): void {
    this.opts.onState?.(state);
  }
}

function isTick(value: unknown): value is Tick {
  if (typeof value !== 'object' || value === null) return false;
  const v = value as Record<string, unknown>;
  return (
    typeof v.symbol === 'string' && v.symbol.length > 0 &&
    typeof v.price === 'number' && Number.isFinite(v.price) && v.price > 0 &&
    typeof v.size === 'number' && Number.isFinite(v.size) &&
    typeof v.ts === 'number' && Number.isFinite(v.ts)
  );
}

type Listener = () => void;

class PriceStore {
  private readonly prices = new Map<string, number>();
  private readonly listeners = new Set<Listener>();
  private flushHandle: number | null = null;

  ingest = (tick: Tick): void => {
    this.prices.set(tick.symbol, tick.price);
    if (this.flushHandle === null) {
      this.flushHandle = requestAnimationFrame(this.flush);
    }
  };

  private flush = (): void => {
    this.flushHandle = null;
    for (const listener of this.listeners) listener();
  };

  subscribe = (listener: Listener): (() => void) => {
    this.listeners.add(listener);
    return () => {
      this.listeners.delete(listener);
    };
  };

  /** Primitive snapshot: Object.is comparison keeps React loop-safe. */
  getPrice = (symbol: string): number => this.prices.get(symbol) ?? Number.NaN;
}

export const priceStore = new PriceStore();

export function useLastPrice(symbol: string): number {
  return useSyncExternalStore(
    priceStore.subscribe,
    () => priceStore.getPrice(symbol),
    () => Number.NaN,
  );
}

export class WilderRsi {
  private prevClose: number | null = null;
  private gainSum = 0;
  private lossSum = 0;
  private samples = 0;
  private avgGain = 0;
  private avgLoss = 0;
  private value: number | null = null;

  constructor(private readonly period = 14) {
    if (!Number.isInteger(period) || period <= 0) {
      throw new RangeError('period must be a positive integer');
    }
  }

  update(close: number): number | null {
    if (!Number.isFinite(close) || close <= 0) {
      throw new TypeError('close must be a positive finite number');
    }

    if (this.prevClose === null) {
      this.prevClose = close;
      return null;
    }

    const change = close - this.prevClose;
    const gain = Math.max(change, 0);
    const loss = Math.max(-change, 0);
    this.prevClose = close;

    if (this.samples < this.period) {
      this.gainSum += gain;
      this.lossSum += loss;
      this.samples += 1;
      if (this.samples === this.period) {
        this.avgGain = this.gainSum / this.period;
        this.avgLoss = this.lossSum / this.period;
        this.value = this.compute();
      }
      return this.value;
    }

    // Wilder smoothing: rma = (prev * (n - 1) + current) / n
    this.avgGain = (this.avgGain * (this.period - 1) + gain) / this.period;
    this.avgLoss = (this.avgLoss * (this.period - 1) + loss) / this.period;
    this.value = this.compute();
    return this.value;
  }

  private compute(): number {
    if (this.avgLoss === 0) return 100;
    const rs = this.avgGain / this.avgLoss;
    return 100 - 100 / (1 + rs);
  }
}

export class SmaRing {
  private readonly buf: Float64Array;
  private idx = 0;
  private filled = 0;
  private sum = 0;

  constructor(private readonly period: number) {
    if (!Number.isInteger(period) || period <= 0) {
      throw new RangeError('period must be a positive integer');
    }
    this.buf = new Float64Array(period);
  }

  update(value: number): number | null {
    if (!Number.isFinite(value)) throw new TypeError('value must be finite');
    const slot = this.idx % this.period;
    this.sum += value - this.buf[slot];
    this.buf[slot] = value;
    this.idx += 1;
    this.filled = Math.min(this.filled + 1, this.period);
    return this.filled === this.period ? this.sum / this.period : null;
  }
}

export function useTimeSeriesCanvas(
  draw: (ctx: CanvasRenderingContext2D, width: number, height: number) => void,
) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    let frame = 0;

    const render = () => {
      frame = 0;
      const rect = canvas.getBoundingClientRect();
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = Math.round(rect.width * dpr);
      canvas.height = Math.round(rect.height * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, rect.width, rect.height);
      draw(ctx, rect.width, rect.height);
    };

    const schedule = () => {
      if (frame === 0) frame = requestAnimationFrame(render);
    };

    const observer = new ResizeObserver(schedule);
    observer.observe(canvas);
    schedule();

    return () => {
      observer.disconnect();
      if (frame !== 0) cancelAnimationFrame(frame);
    };
  }, [draw]);

  return canvasRef;
}

const nyParts = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  weekday: 'short',
  hour: '2-digit',
  minute: '2-digit',
  hourCycle: 'h23',
});

export function isRegularSession(now: Date): boolean {
  const parts = Object.fromEntries(
    nyParts.formatToParts(now).map(({ type, value }) => [type, value]),
  );
  const weekday = parts.weekday ?? '';
  if (weekday === 'Sat' || weekday === 'Sun') return false;

  const minutes = Number(parts.hour) * 60 + Number(parts.minute);
  return minutes >= 9 * 60 + 30 && minutes < 16 * 60; // 09:30–16:00 ET
}