gloomberb 0.7.5 → 0.8.0

package/src/plugins/builtin/correlation/relationship/model.ts

@@ -0,0 +1,279 @@
+import type { ProjectedChartPoint } from "../../../../components/chart/core/data";
+import type { TimeRange } from "../../../../components/chart/core/types";
+import type { ScatterChartPoint } from "../../../../components/chart/scatter-chart-renderer";
+import type { PaneTemplateCreateOptions } from "../../../../types/plugin";
+import type { PricePoint } from "../../../../types/financials";
+import { parseTickerListInput } from "../../../../tickers/list";
+
+export type RelationshipRange = Extract<TimeRange, "1M" | "3M" | "6M" | "1Y" | "5Y" | "ALL">;
+
+const RELATIONSHIP_RANGES: RelationshipRange[] = ["1M", "3M", "6M", "1Y", "5Y", "ALL"];
+export const DEFAULT_RELATIONSHIP_SECOND_SYMBOL = "SPY";
+const RELATIONSHIP_CORRELATION_WINDOWS = [30, 60, 120, 252] as const;
+export const DEFAULT_RELATIONSHIP_CORRELATION_WINDOW = 120;
+
+export interface RelationshipAlignedPoint {
+  date: Date;
+  dateKey: string;
+  leftClose: number;
+  rightClose: number;
+  ratio: number;
+}
+
+export interface RelationshipReturnPoint {
+  date: Date;
+  dateKey: string;
+  leftReturn: number;
+  rightReturn: number;
+}
+
+export interface RelationshipRegressionStats {
+  beta: number;
+  alpha: number;
+  r: number;
+  rSquared: number;
+  stdError: number | null;
+  sampleSize: number;
+}
+
+export interface RelationshipAnalysis {
+  aligned: RelationshipAlignedPoint[];
+  returns: RelationshipReturnPoint[];
+  ratioPoints: ProjectedChartPoint[];
+  correlationPoints: ProjectedChartPoint[];
+  scatterPoints: ScatterChartPoint[];
+  stats: RelationshipRegressionStats | null;
+  latestRatio: number | null;
+  latestCorrelation: number | null;
+}
+
+function pricePointTime(point: PricePoint): number {
+  const value = point.date as Date | string | number;
+  return value instanceof Date ? value.getTime() : new Date(value).getTime();
+}
+
+function pricePointDateKey(point: PricePoint): string | null {
+  const timestamp = pricePointTime(point);
+  if (!Number.isFinite(timestamp)) return null;
+  return new Date(timestamp).toISOString().slice(0, 10);
+}
+
+function syntheticChartPoint(date: Date, value: number): ProjectedChartPoint {
+  return {
+    date,
+    open: value,
+    high: value,
+    low: value,
+    close: value,
+    volume: 0,
+  };
+}
+
+function alignRelationshipPrices(leftPoints: PricePoint[], rightPoints: PricePoint[]): RelationshipAlignedPoint[] {
+  const rightByDate = new Map<string, PricePoint>();
+  for (const point of rightPoints) {
+    const dateKey = pricePointDateKey(point);
+    if (!dateKey || !Number.isFinite(point.close) || point.close <= 0) continue;
+    rightByDate.set(dateKey, point);
+  }
+
+  return [...leftPoints]
+    .sort((left, right) => pricePointTime(left) - pricePointTime(right))
+    .flatMap((leftPoint): RelationshipAlignedPoint[] => {
+      const dateKey = pricePointDateKey(leftPoint);
+      if (!dateKey || !Number.isFinite(leftPoint.close) || leftPoint.close <= 0) return [];
+      const rightPoint = rightByDate.get(dateKey);
+      if (!rightPoint || !Number.isFinite(rightPoint.close) || rightPoint.close <= 0) return [];
+      const timestamp = pricePointTime(leftPoint);
+      return [{
+        date: new Date(timestamp),
+        dateKey,
+        leftClose: leftPoint.close,
+        rightClose: rightPoint.close,
+        ratio: leftPoint.close / rightPoint.close,
+      }];
+    });
+}
+
+function buildRelationshipReturns(aligned: RelationshipAlignedPoint[]): RelationshipReturnPoint[] {
+  const returns: RelationshipReturnPoint[] = [];
+  for (let index = 1; index < aligned.length; index++) {
+    const previous = aligned[index - 1]!;
+    const current = aligned[index]!;
+    if (previous.leftClose <= 0 || previous.rightClose <= 0) continue;
+    const leftReturn = (current.leftClose - previous.leftClose) / previous.leftClose;
+    const rightReturn = (current.rightClose - previous.rightClose) / previous.rightClose;
+    if (!Number.isFinite(leftReturn) || !Number.isFinite(rightReturn)) continue;
+    returns.push({
+      date: current.date,
+      dateKey: current.dateKey,
+      leftReturn,
+      rightReturn,
+    });
+  }
+  return returns;
+}
+
+function pearson(x: number[], y: number[], minObservations = 5): number | null {
+  const n = Math.min(x.length, y.length);
+  if (n < minObservations) return null;
+
+  let sumX = 0;
+  let sumY = 0;
+  let sumXY = 0;
+  let sumX2 = 0;
+  let sumY2 = 0;
+  for (let i = 0; i < n; i++) {
+    const xValue = x[i]!;
+    const yValue = y[i]!;
+    sumX += xValue;
+    sumY += yValue;
+    sumXY += xValue * yValue;
+    sumX2 += xValue * xValue;
+    sumY2 += yValue * yValue;
+  }
+
+  const denominator = Math.sqrt((n * sumX2 - sumX * sumX) * (n * sumY2 - sumY * sumY));
+  return denominator === 0 ? null : (n * sumXY - sumX * sumY) / denominator;
+}
+
+function buildRollingCorrelationPoints(
+  returns: RelationshipReturnPoint[],
+  windowSize: number,
+): ProjectedChartPoint[] {
+  const points: ProjectedChartPoint[] = [];
+  for (let index = 0; index < returns.length; index++) {
+    const window = returns.slice(Math.max(0, index - windowSize + 1), index + 1);
+    const correlation = pearson(
+      window.map((entry) => entry.rightReturn),
+      window.map((entry) => entry.leftReturn),
+      5,
+    );
+    if (correlation === null) continue;
+    points.push(syntheticChartPoint(returns[index]!.date, correlation));
+  }
+  return points;
+}
+
+function computeRelationshipRegression(returns: RelationshipReturnPoint[]): RelationshipRegressionStats | null {
+  const x = returns.map((entry) => entry.rightReturn * 100);
+  const y = returns.map((entry) => entry.leftReturn * 100);
+  const n = Math.min(x.length, y.length);
+  if (n < 5) return null;
+
+  const meanX = x.reduce((sum, value) => sum + value, 0) / n;
+  const meanY = y.reduce((sum, value) => sum + value, 0) / n;
+  let numerator = 0;
+  let denominator = 0;
+  for (let index = 0; index < n; index++) {
+    const dx = x[index]! - meanX;
+    numerator += dx * (y[index]! - meanY);
+    denominator += dx * dx;
+  }
+  if (denominator === 0) return null;
+
+  const beta = numerator / denominator;
+  const alpha = meanY - beta * meanX;
+  const r = pearson(x, y, 5);
+  if (r === null) return null;
+
+  let residualSumSquares = 0;
+  for (let index = 0; index < n; index++) {
+    const fitted = alpha + beta * x[index]!;
+    const residual = y[index]! - fitted;
+    residualSumSquares += residual * residual;
+  }
+
+  return {
+    beta,
+    alpha,
+    r,
+    rSquared: r * r,
+    stdError: n > 2 ? Math.sqrt(residualSumSquares / (n - 2)) : null,
+    sampleSize: n,
+  };
+}
+
+export function buildRelationshipAnalysis(
+  leftPoints: PricePoint[],
+  rightPoints: PricePoint[],
+  correlationWindow = DEFAULT_RELATIONSHIP_CORRELATION_WINDOW,
+): RelationshipAnalysis {
+  const aligned = alignRelationshipPrices(leftPoints, rightPoints);
+  const returns = buildRelationshipReturns(aligned);
+  const correlationPoints = buildRollingCorrelationPoints(returns, correlationWindow);
+  const scatterPoints = returns.map((entry, index) => ({
+    x: entry.rightReturn * 100,
+    y: entry.leftReturn * 100,
+    highlight: index === returns.length - 1,
+  }));
+  const stats = computeRelationshipRegression(returns);
+
+  return {
+    aligned,
+    returns,
+    ratioPoints: aligned.map((entry) => syntheticChartPoint(entry.date, entry.ratio)),
+    correlationPoints,
+    scatterPoints,
+    stats,
+    latestRatio: aligned.at(-1)?.ratio ?? null,
+    latestCorrelation: correlationPoints.at(-1)?.close ?? null,
+  };
+}
+
+function normalizeRelationshipSymbols(symbols: string[]): [string, string] | null {
+  const normalized = symbols
+    .map((symbol) => symbol.trim().toUpperCase())
+    .filter(Boolean);
+  if (normalized.length === 0) return null;
+  return [
+    normalized[0]!,
+    normalized[1] ?? DEFAULT_RELATIONSHIP_SECOND_SYMBOL,
+  ];
+}
+
+export function relationshipSymbolsFromPaneSettings(
+  settings: Record<string, unknown> | undefined,
+  fallbackSymbol: string | null,
+): [string, string] | null {
+  const symbols = settings?.symbols;
+  if (Array.isArray(symbols)) {
+    const pair = normalizeRelationshipSymbols(symbols.filter((symbol): symbol is string => typeof symbol === "string"));
+    if (pair) return pair;
+  }
+
+  const symbolsText = settings?.symbolsText;
+  if (typeof symbolsText === "string" && symbolsText.trim()) {
+    try {
+      return normalizeRelationshipSymbols(parseTickerListInput(symbolsText));
+    } catch {
+      return fallbackSymbol ? [fallbackSymbol, DEFAULT_RELATIONSHIP_SECOND_SYMBOL] : null;
+    }
+  }
+
+  return fallbackSymbol ? [fallbackSymbol, DEFAULT_RELATIONSHIP_SECOND_SYMBOL] : null;
+}
+
+export function nextRelationshipRange(current: RelationshipRange): RelationshipRange {
+  const index = RELATIONSHIP_RANGES.indexOf(current);
+  return RELATIONSHIP_RANGES[(index + 1) % RELATIONSHIP_RANGES.length] ?? "1Y";
+}
+
+export function nextRelationshipWindow(current: number): number {
+  const index = RELATIONSHIP_CORRELATION_WINDOWS.findIndex((value) => value === current);
+  return RELATIONSHIP_CORRELATION_WINDOWS[(index + 1) % RELATIONSHIP_CORRELATION_WINDOWS.length]
+    ?? DEFAULT_RELATIONSHIP_CORRELATION_WINDOW;
+}
+
+export function relationshipTemplateSymbols(
+  activeTicker: string | null,
+  options: Pick<PaneTemplateCreateOptions, "arg" | "values" | "symbols"> | undefined,
+): [string, string] | null {
+  if (options?.symbols?.length) return normalizeRelationshipSymbols(options.symbols);
+  const raw = options?.arg ?? options?.values?.tickers ?? activeTicker ?? "";
+  try {
+    return normalizeRelationshipSymbols(parseTickerListInput(raw));
+  } catch {
+    return null;
+  }
+}

package/src/plugins/builtin/correlation/relationship/pane.tsx

@@ -0,0 +1,359 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Box, Text } from "../../../../ui";
+import { usePaneFooter } from "../../../../components";
+import { useShortcut, type KeyEventLike } from "../../../../react/input";
+import { StaticMultiLineChartSurface } from "../../../../components/chart/static/multi-line-chart-surface";
+import { StaticScatterChartSurface } from "../../../../components/chart/static/scatter-chart-surface";
+import { resolveChartPalette } from "../../../../components/chart/core/renderer";
+import type { PaneProps, PaneTemplateDef } from "../../../../types/plugin";
+import { usePaneInstance } from "../../../../state/app/context";
+import { colors } from "../../../../theme/colors";
+import { formatNumber } from "../../../../utils/format";
+import { formatTickerListInput } from "../../../../tickers/list";
+import { usePluginPaneState } from "../../../runtime";
+import { formatDateTime, useBoundTicker } from "../../shared/ticker-request";
+import { RelationshipMetricsTable, RelationshipToggle } from "./controls";
+import { useRelationshipHistories } from "./history";
+import {
+  DEFAULT_RELATIONSHIP_CORRELATION_WINDOW,
+  DEFAULT_RELATIONSHIP_SECOND_SYMBOL,
+  buildRelationshipAnalysis,
+  nextRelationshipRange,
+  nextRelationshipWindow,
+  relationshipSymbolsFromPaneSettings,
+  relationshipTemplateSymbols,
+  type RelationshipRange,
+} from "./model";
+import {
+  buildIndexedPriceSeries,
+  buildRelationshipCorrelationSeries,
+  buildRelationshipMetricsRows,
+  buildRelationshipRatioSeries,
+  buildRelationshipScatterPointsForDate,
+  findRelationshipAlignedPoint,
+  findRelationshipCorrelationAtDate,
+  formatNullableNumber,
+} from "./view-model";
+
+export { buildRelationshipAnalysis } from "./model";
+
+type RelationshipGraphShortcut = "range" | "window" | "correlation" | "regression";
+
+export function resolveRelationshipGraphShortcut(
+  event: Pick<KeyEventLike, "name" | "key" | "ctrl" | "shift" | "alt" | "meta" | "super">,
+): RelationshipGraphShortcut | null {
+  if (event.ctrl || event.shift || event.alt || event.meta || event.super) return null;
+
+  switch ((event.name ?? event.key ?? "").toLowerCase()) {
+    case "t":
+      return "range";
+    case "p":
+      return "window";
+    case "c":
+      return "correlation";
+    case "g":
+      return "regression";
+    default:
+      return null;
+  }
+}
+
+export function RelationshipGraphPane({ focused, width, height }: PaneProps) {
+  const pane = usePaneInstance();
+  const { symbol, exchange } = useBoundTicker();
+  const pair = useMemo(() => relationshipSymbolsFromPaneSettings(pane?.settings, symbol), [pane?.settings, symbol]);
+  const [range, setRange] = usePluginPaneState<RelationshipRange>("range", "1Y");
+  const [correlationWindow, setCorrelationWindow] = usePluginPaneState<number>(
+    "correlationWindow",
+    DEFAULT_RELATIONSHIP_CORRELATION_WINDOW,
+  );
+  const [showCorrelation, setShowCorrelation] = usePluginPaneState<boolean>("showCorrelation", true);
+  const [showRegression, setShowRegression] = usePluginPaneState<boolean>("showRegression", true);
+  const [cursorDateMs, setCursorDateMs] = useState<number | null>(null);
+  const { data, loading, error } = useRelationshipHistories(pair, range, exchange);
+  const left = data?.[0] ?? null;
+  const right = data?.[1] ?? null;
+  const analysis = useMemo(() => (
+    left && right ? buildRelationshipAnalysis(left.points, right.points, correlationWindow) : null
+  ), [correlationWindow, left, right]);
+  const cycleRange = useCallback(() => setRange((current) => nextRelationshipRange(current)), [setRange]);
+  const cycleWindow = useCallback(() => setCorrelationWindow((current) => nextRelationshipWindow(current)), [setCorrelationWindow]);
+  const toggleCorrelation = useCallback(() => setShowCorrelation((current) => !current), [setShowCorrelation]);
+  const toggleRegression = useCallback(() => setShowRegression((current) => !current), [setShowRegression]);
+  const leftSymbol = pair?.[0] ?? left?.symbol ?? "";
+  const rightSymbol = pair?.[1] ?? right?.symbol ?? "";
+  const ratioTrend = (analysis?.ratioPoints.at(-1)?.close ?? 0) >= (analysis?.ratioPoints[0]?.close ?? 0)
+    ? "positive"
+    : "negative";
+  const ratioPalette = useMemo(() => resolveChartPalette(colors, ratioTrend), [ratioTrend]);
+  const chartWidth = Math.max(20, width - 2);
+  const headerRows = 1;
+  const availableChartRows = Math.max(8, height - headerRows);
+  const showScatter = showRegression && availableChartRows >= 17;
+  const priceHeight = Math.max(5, Math.floor(availableChartRows * (showScatter ? 0.26 : 0.34)));
+  const ratioHeight = Math.max(4, Math.floor(availableChartRows * (showScatter ? 0.22 : 0.33)));
+  const correlationHeight = showCorrelation
+    ? Math.max(4, Math.floor(availableChartRows * (showScatter ? 0.22 : 0.33)))
+    : 0;
+  const statsRailWidth = showScatter && chartWidth >= 68 ? Math.min(34, Math.floor(chartWidth * 0.3)) : 0;
+  const statsBelowRows = showScatter && statsRailWidth === 0 ? 1 : 0;
+  const scatterHeight = showScatter
+    ? Math.max(5, availableChartRows - priceHeight - ratioHeight - correlationHeight - statsBelowRows)
+    : 0;
+  const scatterWidth = statsRailWidth > 0 ? Math.max(20, chartWidth - statsRailWidth - 1) : chartWidth;
+  const stats = analysis?.stats ?? null;
+  const alignedDates = useMemo(() => analysis?.aligned.map((entry) => entry.date) ?? [], [analysis]);
+  const cursorDate = useMemo(() => {
+    if (alignedDates.length === 0) return null;
+    if (cursorDateMs !== null && alignedDates.some((date) => date.getTime() === cursorDateMs)) {
+      return new Date(cursorDateMs);
+    }
+    return alignedDates.at(-1) ?? null;
+  }, [alignedDates, cursorDateMs]);
+  const selectedAligned = useMemo(
+    () => analysis ? findRelationshipAlignedPoint(analysis.aligned, cursorDate) : null,
+    [analysis, cursorDate],
+  );
+  const selectedCorrelation = useMemo(
+    () => analysis ? findRelationshipCorrelationAtDate(analysis.correlationPoints, cursorDate) : null,
+    [analysis, cursorDate],
+  );
+  const priceSeries = useMemo(
+    () => analysis ? buildIndexedPriceSeries(analysis.aligned, leftSymbol, rightSymbol) : [],
+    [analysis, leftSymbol, rightSymbol],
+  );
+  const ratioSeries = useMemo(
+    () => analysis ? buildRelationshipRatioSeries(analysis.aligned, leftSymbol, rightSymbol, ratioPalette.lineColor) : [],
+    [analysis, leftSymbol, ratioPalette.lineColor, rightSymbol],
+  );
+  const correlationSeries = useMemo(
+    () => analysis ? buildRelationshipCorrelationSeries(analysis.aligned, analysis.correlationPoints) : [],
+    [analysis],
+  );
+  const scatterPoints = useMemo(
+    () => analysis ? buildRelationshipScatterPointsForDate(analysis.returns, cursorDate) : [],
+    [analysis, cursorDate],
+  );
+  const selectedPriceBase = analysis?.aligned[0] ?? null;
+  const selectedLeftIndex = selectedAligned && selectedPriceBase
+    ? (selectedAligned.leftClose / selectedPriceBase.leftClose) * 100
+    : null;
+  const selectedRightIndex = selectedAligned && selectedPriceBase
+    ? (selectedAligned.rightClose / selectedPriceBase.rightClose) * 100
+    : null;
+  const selectedRatio = selectedAligned?.ratio ?? analysis?.latestRatio ?? null;
+  const selectCursorDate = useCallback((date: Date) => setCursorDateMs(date.getTime()), []);
+  const metricsRows = useMemo(
+    () => analysis ? buildRelationshipMetricsRows(stats, analysis) : [],
+    [analysis, stats],
+  );
+  const footerSummary = useMemo(() => {
+    const parts = [
+      cursorDate ? formatDateTime(cursorDate).slice(0, 10) : "latest",
+      `ratio ${formatNullableNumber(selectedRatio, 3)}`,
+      `corr ${formatNullableNumber(selectedCorrelation, 3)}`,
+      ...(leftSymbol ? [`${leftSymbol} ${formatNullableNumber(selectedLeftIndex, 1)}`] : []),
+      ...(rightSymbol ? [`${rightSymbol} ${formatNullableNumber(selectedRightIndex, 1)}`] : []),
+    ];
+    return parts.join("  ");
+  }, [
+    cursorDate,
+    leftSymbol,
+    rightSymbol,
+    selectedCorrelation,
+    selectedLeftIndex,
+    selectedRatio,
+    selectedRightIndex,
+  ]);
+
+  useEffect(() => {
+    if (!analysis?.aligned.length) return;
+    setCursorDateMs((current) => {
+      if (current !== null && analysis.aligned.some((entry) => entry.date.getTime() === current)) return current;
+      return analysis.aligned.at(-1)?.date.getTime() ?? null;
+    });
+  }, [analysis]);
+
+  useShortcut((event) => {
+    if (!focused) return;
+    switch (resolveRelationshipGraphShortcut(event)) {
+      case "range":
+        event.preventDefault();
+        event.stopPropagation();
+        cycleRange();
+        return;
+      case "window":
+        event.preventDefault();
+        event.stopPropagation();
+        cycleWindow();
+        return;
+      case "correlation":
+        event.preventDefault();
+        event.stopPropagation();
+        toggleCorrelation();
+        return;
+      case "regression":
+        event.preventDefault();
+        event.stopPropagation();
+        toggleRegression();
+        return;
+    }
+  });
+
+  usePaneFooter("relationship-graph", () => ({
+    info: [
+      { id: "summary", parts: [{ text: footerSummary, tone: "muted" as const }] },
+      ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+      ...(error ? [{ id: "error", parts: [{ text: error, tone: "warning" as const }] }] : []),
+    ],
+    hints: [
+      { id: "range", key: "t", label: "range", onPress: cycleRange },
+      { id: "window", key: "p", label: "eriod", onPress: cycleWindow },
+      { id: "correlation", key: "c", label: "orr", onPress: toggleCorrelation },
+      { id: "regression", key: "g", label: "reg", onPress: toggleRegression },
+    ],
+  }), [
+    cycleRange,
+    cycleWindow,
+    error,
+    footerSummary,
+    loading,
+    toggleCorrelation,
+    toggleRegression,
+  ]);
+
+  if (!pair) {
+    return (
+      <Box padding={1}>
+        <Text fg={colors.textDim}>No relationship tickers configured.</Text>
+      </Box>
+    );
+  }
+
+  if (!analysis || analysis.aligned.length < 2) {
+    return (
+      <Box padding={1} flexDirection="column" gap={1}>
+        <Text fg={error ? colors.warning : colors.textDim}>
+          {loading ? "Loading relationship history..." : error ?? "No overlapping price history."}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      width={width}
+      height={height}
+      overflow="hidden"
+      paddingX={1}
+    >
+      <Box height={1} flexDirection="row" gap={2}>
+        <RelationshipToggle checked={showCorrelation} label="Correlation" onPress={toggleCorrelation} />
+        <RelationshipToggle checked={showRegression} label="Regression" onPress={toggleRegression} />
+        <Text fg={colors.textDim}>Range {range}  Window {correlationWindow}d</Text>
+      </Box>
+      <StaticMultiLineChartSurface
+        series={priceSeries}
+        width={chartWidth}
+        height={priceHeight}
+        dates={alignedDates}
+        cursorDate={cursorDate}
+        showTimeAxis
+        timeAxisColor={colors.textDim}
+        yAxisLabel={`Indexed price (${leftSymbol}, ${rightSymbol})`}
+        yAxisColor={colors.textDim}
+        formatYAxisValue={(value) => formatNumber(value, 0)}
+        onCursorDateChange={selectCursorDate}
+      />
+      <StaticMultiLineChartSurface
+        series={ratioSeries}
+        width={chartWidth}
+        height={ratioHeight}
+        dates={alignedDates}
+        cursorDate={cursorDate}
+        showTimeAxis
+        timeAxisColor={colors.textDim}
+        yAxisLabel={`${leftSymbol}/${rightSymbol} ratio`}
+        yAxisColor={colors.textDim}
+        formatYAxisValue={(value) => formatNumber(value, Math.abs(value) >= 10 ? 1 : 3)}
+        onCursorDateChange={selectCursorDate}
+      />
+      {showCorrelation ? (
+        <StaticMultiLineChartSurface
+          series={correlationSeries}
+          width={chartWidth}
+          height={correlationHeight}
+          dates={alignedDates}
+          cursorDate={cursorDate}
+          showTimeAxis
+          timeAxisColor={colors.textDim}
+          yAxisLabel={`Rolling corr (${correlationWindow}d)`}
+          yAxisColor={colors.textDim}
+          formatYAxisValue={(value) => formatNumber(value, 2)}
+          onCursorDateChange={selectCursorDate}
+        />
+      ) : null}
+      {showScatter ? (
+        <Box flexDirection="row" width={chartWidth} height={scatterHeight}>
+          <StaticScatterChartSurface
+            points={scatterPoints}
+            width={scatterWidth}
+            height={scatterHeight}
+            regression={showRegression && stats ? { slope: stats.beta, intercept: stats.alpha, color: "#ffd43b" } : null}
+            xLabel={`${rightSymbol} returns (%)`}
+            yLabel={`${leftSymbol} returns (%)`}
+          />
+          {statsRailWidth > 0 ? (
+            <>
+              <Box width={1} />
+              <Box width={statsRailWidth} height={scatterHeight} flexDirection="column">
+                <RelationshipMetricsTable rows={metricsRows} width={statsRailWidth} height={scatterHeight} />
+              </Box>
+            </>
+          ) : null}
+        </Box>
+      ) : null}
+      {showRegression && (!showScatter || statsRailWidth === 0) ? (
+        <Text fg={colors.textDim}>
+          {metricsRows.map((row) => `${row.label} ${row.value}`).join("  ")}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
+export function createRelationshipPaneTemplate(): PaneTemplateDef {
+  return {
+    id: "relationship-graph-pane",
+    paneId: "relationship-graph",
+    label: "Relationship Graph",
+    description: "Graph ratio, rolling correlation, and regression between two tickers.",
+    keywords: ["relationship", "ratio", "graph", "correlation", "regression", "gr"],
+    shortcut: { prefix: "GR", argPlaceholder: "tickers", argKind: "ticker-list" },
+    wizard: [
+      {
+        key: "tickers",
+        label: "Relationship Tickers",
+        placeholder: "AMD, NVDA",
+        body: [`Enter one or two tickers. One ticker compares against ${DEFAULT_RELATIONSHIP_SECOND_SYMBOL}.`],
+        type: "text",
+      },
+    ],
+    canCreate: (context, options) => !!relationshipTemplateSymbols(context.activeTicker, options),
+    createInstance: (context, options) => {
+      const pair = relationshipTemplateSymbols(context.activeTicker, options);
+      return pair
+        ? {
+          title: `GR ${pair[0]}/${pair[1]}`,
+          binding: { kind: "fixed" as const, symbol: pair[0] },
+          placement: "floating" as const,
+          settings: {
+            symbols: pair,
+            symbolsText: formatTickerListInput(pair),
+          },
+        }
+        : null;
+    },
+  };
+}