gloomberb 0.7.5 → 0.8.0

package/src/plugins/builtin/ticker-detail/data-panes/fundamental-graph/model.ts

@@ -0,0 +1,234 @@
+import type { BarChartSeries } from "../../../../../components/chart/bar-chart-renderer";
+import { colors } from "../../../../../theme/colors";
+import type { FinancialStatement, TickerFinancials } from "../../../../../types/financials";
+import { formatCompact, formatNumber, formatPercent } from "../../../../../utils/format";
+import type {
+  FundamentalColumn,
+  FundamentalGraphRow,
+  FundamentalMetricKey,
+  FundamentalPeriod,
+  GraphKind,
+  GraphMetricKey,
+  MetricDefinition,
+  ValuationMetricKey,
+} from "./types";
+
+const FUNDAMENTAL_METRICS: ReadonlyArray<MetricDefinition<FundamentalMetricKey>> = [
+  { key: "totalRevenue", label: "Revenue", format: formatCompact },
+  { key: "grossProfit", label: "Gross Profit", format: formatCompact },
+  { key: "operatingIncome", label: "Operating Income", format: formatCompact },
+  { key: "netIncome", label: "Net Income", format: formatCompact },
+  { key: "operatingCashFlow", label: "Operating Cash Flow", format: formatCompact },
+  { key: "freeCashFlow", label: "Free Cash Flow", format: formatCompact },
+  { key: "totalAssets", label: "Total Assets", format: formatCompact },
+  { key: "totalDebt", label: "Total Debt", format: formatCompact },
+  { key: "totalEquity", label: "Equity", format: formatCompact },
+  { key: "eps", label: "EPS", format: (value) => formatNumber(value, 2) },
+];
+
+const VALUATION_METRICS: ReadonlyArray<MetricDefinition<ValuationMetricKey>> = [
+  { key: "trailingPE", label: "Trailing P/E", format: (value) => `${formatNumber(value, 1)}x` },
+  { key: "forwardPE", label: "Forward P/E", format: (value) => `${formatNumber(value, 1)}x` },
+  { key: "pegRatio", label: "PEG", format: (value) => `${formatNumber(value, 2)}x` },
+  { key: "priceSales", label: "Price/Sales", format: (value) => `${formatNumber(value, 1)}x` },
+  { key: "evSales", label: "EV/Sales", format: (value) => `${formatNumber(value, 1)}x` },
+  { key: "evEbitda", label: "EV/EBITDA", format: (value) => `${formatNumber(value, 1)}x` },
+  { key: "priceFcf", label: "Price/FCF", format: (value) => `${formatNumber(value, 1)}x` },
+];
+
+const GRAPH_SERIES_COLORS = [
+  colors.positive,
+  "#4dabf7",
+  "#f6c85f",
+  "#b197fc",
+  colors.negative,
+  "#63e6be",
+  "#ffa94d",
+  "#74c0fc",
+];
+
+export function formatMaybePercent(value: number | null): string {
+  return value == null ? "-" : formatPercent(value);
+}
+
+function selectedStatements(financials: TickerFinancials | null, period: FundamentalPeriod): FinancialStatement[] {
+  return period === "annual"
+    ? financials?.annualStatements ?? []
+    : financials?.quarterlyStatements ?? [];
+}
+
+function periodCategory(date: string, period: FundamentalPeriod): string {
+  const year = date.slice(0, 4);
+  if (period === "annual") return `FY${year}`;
+  const month = Number(date.slice(5, 7));
+  const quarter = Number.isFinite(month) && month > 0 ? Math.ceil(month / 3) : 0;
+  return quarter > 0 ? `${year} Q${quarter}` : date;
+}
+
+export function buildFundamentalGraphRows(
+  statements: FinancialStatement[],
+  metric: FundamentalMetricKey,
+  symbol = "",
+  period: FundamentalPeriod = "annual",
+): FundamentalGraphRow[] {
+  const sorted = [...statements]
+    .filter((statement) => typeof statement[metric] === "number")
+    .sort((left, right) => left.date.localeCompare(right.date));
+  const maxAbs = Math.max(1, ...sorted.map((statement) => Math.abs(statement[metric] as number)));
+  return sorted.map((statement, index) => {
+    const value = statement[metric] as number;
+    const previous = sorted[index - 1]?.[metric];
+    return {
+      key: [symbol, statement.date, metric].filter(Boolean).join(":"),
+      symbol,
+      date: statement.date,
+      category: periodCategory(statement.date, period),
+      value,
+      growth: typeof previous === "number" && previous !== 0 ? (value - previous) / Math.abs(previous) : null,
+      barWidth: Math.max(1, Math.round((Math.abs(value) / maxAbs) * 24)),
+    };
+  });
+}
+
+function resolveMarketCap(financials: TickerFinancials | null): number | null {
+  const quoted = financials?.quote?.marketCap;
+  if (typeof quoted === "number" && Number.isFinite(quoted) && quoted > 0) return quoted;
+  const price = financials?.quote?.price;
+  const shares = financials?.fundamentals?.sharesOutstanding;
+  return typeof price === "number" && Number.isFinite(price) && price > 0
+    && typeof shares === "number" && Number.isFinite(shares) && shares > 0
+    ? price * shares
+    : null;
+}
+
+function valuationMetricValue(
+  financials: TickerFinancials | null,
+  metric: ValuationMetricKey,
+  statement: FinancialStatement | null,
+): number | null {
+  const fundamentals = financials?.fundamentals;
+  if (metric === "trailingPE") return fundamentals?.trailingPE ?? null;
+  if (metric === "forwardPE") return fundamentals?.forwardPE ?? null;
+  if (metric === "pegRatio") return fundamentals?.pegRatio ?? null;
+
+  const marketCap = resolveMarketCap(financials);
+  const enterpriseValue = fundamentals?.enterpriseValue ?? null;
+  const revenue = statement?.totalRevenue;
+  const ebitda = statement?.ebitda;
+  const freeCashFlow = statement?.freeCashFlow;
+
+  if (metric === "priceSales" && marketCap && revenue) return marketCap / revenue;
+  if (metric === "evSales" && enterpriseValue && revenue) return enterpriseValue / revenue;
+  if (metric === "evEbitda" && enterpriseValue && ebitda) return enterpriseValue / ebitda;
+  if (metric === "priceFcf" && marketCap && freeCashFlow) return marketCap / freeCashFlow;
+  return null;
+}
+
+export function buildValuationGraphRows(
+  financials: TickerFinancials | null,
+  metric: ValuationMetricKey,
+  symbol = "",
+  period: FundamentalPeriod = "annual",
+): FundamentalGraphRow[] {
+  const statementMetrics = new Set<ValuationMetricKey>(["priceSales", "evSales", "evEbitda", "priceFcf"]);
+  const sourceStatements = statementMetrics.has(metric)
+    ? selectedStatements(financials, period)
+    : [{ date: "Current" } as FinancialStatement];
+  const sorted = sourceStatements
+    .map((statement) => ({
+      statement,
+      value: valuationMetricValue(financials, metric, statement.date === "Current" ? null : statement),
+    }))
+    .filter((entry): entry is { statement: FinancialStatement; value: number } => (
+      typeof entry.value === "number" && Number.isFinite(entry.value)
+    ))
+    .sort((left, right) => left.statement.date.localeCompare(right.statement.date));
+  const maxAbs = Math.max(1, ...sorted.map((entry) => Math.abs(entry.value)));
+
+  return sorted.map((entry, index) => {
+    const previous = sorted[index - 1]?.value;
+    return {
+      key: [symbol, entry.statement.date, metric].filter(Boolean).join(":"),
+      symbol,
+      date: entry.statement.date,
+      category: entry.statement.date === "Current" ? "Current" : periodCategory(entry.statement.date, period),
+      value: entry.value,
+      growth: typeof previous === "number" && previous !== 0 ? (entry.value - previous) / Math.abs(previous) : null,
+      barWidth: Math.max(1, Math.round((Math.abs(entry.value) / maxAbs) * 24)),
+    };
+  });
+}
+
+function metricDefs(kind: GraphKind): ReadonlyArray<MetricDefinition> {
+  return kind === "valuation" ? VALUATION_METRICS : FUNDAMENTAL_METRICS;
+}
+
+export function defaultMetric(kind: GraphKind): GraphMetricKey {
+  return kind === "valuation" ? "priceSales" : "totalRevenue";
+}
+
+export function isMetricForKind(kind: GraphKind, metric: GraphMetricKey): boolean {
+  return metricDefs(kind).some((definition) => definition.key === metric);
+}
+
+export function nextMetric(kind: GraphKind, current: GraphMetricKey): GraphMetricKey {
+  const definitions = metricDefs(kind);
+  const index = definitions.findIndex((metric) => metric.key === current);
+  return definitions[(index + 1) % definitions.length]?.key ?? defaultMetric(kind);
+}
+
+export function metricDef(kind: GraphKind, key: GraphMetricKey): MetricDefinition {
+  return metricDefs(kind).find((metric) => metric.key === key) ?? metricDefs(kind)[0]!;
+}
+
+export function graphRowsForFinancials(
+  financials: TickerFinancials | null,
+  kind: GraphKind,
+  metric: GraphMetricKey,
+  period: FundamentalPeriod,
+  symbol: string,
+): FundamentalGraphRow[] {
+  if (kind === "valuation") {
+    return buildValuationGraphRows(financials, metric as ValuationMetricKey, symbol, period);
+  }
+  return buildFundamentalGraphRows(selectedStatements(financials, period), metric as FundamentalMetricKey, symbol, period);
+}
+
+export function buildFundamentalColumns(width: number, multiSymbol: boolean): FundamentalColumn[] {
+  const symbolWidth = multiSymbol ? 8 : 0;
+  const dateWidth = 12;
+  const valueWidth = 14;
+  const growthWidth = 10;
+  const columns: FundamentalColumn[] = [];
+
+  if (multiSymbol) {
+    columns.push({ id: "symbol", label: "TICKER", width: symbolWidth, align: "left" });
+  }
+
+  columns.push(
+    { id: "date", label: "DATE", width: dateWidth, align: "left" },
+    { id: "value", label: "VALUE", width: valueWidth, align: "right" },
+    {
+      id: "growth",
+      label: "CHG",
+      width: Math.max(growthWidth, width - 2 - symbolWidth - dateWidth - valueWidth - 3),
+      align: "right",
+    },
+  );
+
+  return columns;
+}
+
+export function buildGraphBarSeries(rows: FundamentalGraphRow[]): BarChartSeries[] {
+  const symbols = [...new Set(rows.map((row) => row.symbol || ""))];
+  const categories = [...new Set(rows.map((row) => row.category))];
+  return symbols.map((symbol, index) => ({
+    id: symbol || "value",
+    label: symbol || "Value",
+    color: GRAPH_SERIES_COLORS[index % GRAPH_SERIES_COLORS.length]!,
+    points: categories.map((category) => ({
+      category,
+      value: rows.find((row) => (row.symbol || "") === symbol && row.category === category)?.value ?? null,
+    })),
+  }));
+}

package/src/plugins/builtin/ticker-detail/data-panes/fundamental-graph/settings.ts

@@ -0,0 +1,44 @@
+import type { PaneTemplateCreateOptions } from "../../../../../types/plugin";
+import { formatTickerListInput, parseTickerListInput } from "../../../../../tickers/list";
+import type { GraphKind } from "./types";
+
+export function symbolsFromPaneSettings(settings: Record<string, unknown> | undefined, fallbackSymbol: string | null): string[] {
+  const symbols = settings?.symbols;
+  if (Array.isArray(symbols)) {
+    return symbols
+      .filter((symbol): symbol is string => typeof symbol === "string" && symbol.trim().length > 0)
+      .map((symbol) => symbol.trim().toUpperCase());
+  }
+
+  const symbolsText = settings?.symbolsText;
+  if (typeof symbolsText === "string" && symbolsText.trim()) {
+    try {
+      return parseTickerListInput(symbolsText);
+    } catch {
+      return fallbackSymbol ? [fallbackSymbol] : [];
+    }
+  }
+
+  return fallbackSymbol ? [fallbackSymbol] : [];
+}
+
+export function graphKindFromSettings(settings: Record<string, unknown> | undefined, fallback: GraphKind): GraphKind {
+  return settings?.chartKind === "valuation" ? "valuation" : fallback;
+}
+
+export function graphTemplateSymbols(
+  activeTicker: string | null,
+  options: Pick<PaneTemplateCreateOptions, "arg" | "values" | "symbols"> | undefined,
+): string[] {
+  if (options?.symbols?.length) return options.symbols;
+  const raw = options?.arg ?? options?.values?.tickers ?? activeTicker ?? "";
+  try {
+    return parseTickerListInput(raw);
+  } catch {
+    return [];
+  }
+}
+
+export function graphTemplateTitle(shortcut: "GF" | "GE", symbols: string[]): string {
+  return `${shortcut} ${formatTickerListInput(symbols)}`;
+}

package/src/plugins/builtin/ticker-detail/data-panes/fundamental-graph/types.ts

@@ -0,0 +1,51 @@
+import type { DataTableColumn } from "../../../../../components";
+import type { TickerFinancials } from "../../../../../types/financials";
+
+export type FundamentalMetricKey =
+  | "totalRevenue"
+  | "grossProfit"
+  | "operatingIncome"
+  | "netIncome"
+  | "operatingCashFlow"
+  | "freeCashFlow"
+  | "totalAssets"
+  | "totalDebt"
+  | "totalEquity"
+  | "eps";
+
+export type ValuationMetricKey =
+  | "trailingPE"
+  | "forwardPE"
+  | "pegRatio"
+  | "priceSales"
+  | "evSales"
+  | "evEbitda"
+  | "priceFcf";
+
+export type GraphKind = "fundamental" | "valuation";
+export type GraphMetricKey = FundamentalMetricKey | ValuationMetricKey;
+export type FundamentalPeriod = "annual" | "quarterly";
+type FundamentalColumnId = "symbol" | "date" | "value" | "growth";
+export type FundamentalColumn = DataTableColumn & { id: FundamentalColumnId };
+
+export type FundamentalGraphRow = {
+  key: string;
+  symbol: string;
+  date: string;
+  category: string;
+  value: number;
+  growth: number | null;
+  barWidth: number;
+};
+
+export type MetricDefinition<Key extends GraphMetricKey = GraphMetricKey> = {
+  key: Key;
+  label: string;
+  format: (value: number) => string;
+};
+
+export type SymbolFinancials = {
+  symbol: string;
+  financials: TickerFinancials | null;
+  error: string | null;
+};

package/src/plugins/builtin/ticker-detail/data-panes/fundamental-graph.tsx

@@ -0,0 +1,135 @@
+import { useMemo } from "react";
+import type { PaneProps, PaneTemplateDef } from "../../../../types/plugin";
+import { formatTickerListInput } from "../../../../tickers/list";
+import { usePaneInstance, usePaneTicker } from "../../../../state/app/context";
+import { usePluginPaneState } from "../../../runtime";
+import { useBoundTicker } from "../../shared/ticker-request";
+import { FundamentalGraphContent } from "./fundamental-graph/content";
+import { useSymbolFinancials } from "./fundamental-graph/data";
+import {
+  defaultMetric,
+  graphRowsForFinancials,
+  isMetricForKind,
+} from "./fundamental-graph/model";
+import {
+  graphKindFromSettings,
+  graphTemplateSymbols,
+  graphTemplateTitle,
+  symbolsFromPaneSettings,
+} from "./fundamental-graph/settings";
+import type { FundamentalPeriod, GraphKind, GraphMetricKey } from "./fundamental-graph/types";
+
+export { buildFundamentalGraphRows, buildValuationGraphRows } from "./fundamental-graph/model";
+
+export function FundamentalGraphPane({ focused, width, height }: PaneProps) {
+  const pane = usePaneInstance();
+  const { symbol, exchange } = useBoundTicker();
+  const symbols = useMemo(() => symbolsFromPaneSettings(pane?.settings, symbol), [pane?.settings, symbol]);
+  const configuredKind = graphKindFromSettings(pane?.settings, "fundamental");
+  const [period, setPeriod] = usePluginPaneState<FundamentalPeriod>("period", "annual");
+  const [chartKind, setChartKind] = usePluginPaneState<GraphKind>("chartKind", configuredKind);
+  const [metric, setMetric] = usePluginPaneState<GraphMetricKey>("metric", defaultMetric(configuredKind));
+  const resolvedMetric = isMetricForKind(chartKind, metric) ? metric : defaultMetric(chartKind);
+  const { data, loading, error, reload } = useSymbolFinancials(symbols, exchange);
+  const rows = useMemo(() => (data ?? []).flatMap((entry) => (
+    graphRowsForFinancials(entry.financials, chartKind, resolvedMetric, period, entry.symbol)
+  )), [chartKind, data, period, resolvedMetric]);
+
+  return (
+    <FundamentalGraphContent
+      focused={focused}
+      width={width}
+      height={height}
+      rows={rows}
+      loading={loading}
+      error={error}
+      reload={reload}
+      period={period}
+      setPeriod={setPeriod}
+      metric={resolvedMetric}
+      setMetric={setMetric}
+      chartKind={chartKind}
+      setChartKind={setChartKind}
+    />
+  );
+}
+
+export function FundamentalGraphsResearchTab({ focused, width, height }: { focused: boolean; width: number; height: number }) {
+  const { symbol, financials } = usePaneTicker();
+  const [period, setPeriod] = usePluginPaneState<FundamentalPeriod>("detailPeriod", "annual");
+  const [chartKind, setChartKind] = usePluginPaneState<GraphKind>("detailChartKind", "fundamental");
+  const [metric, setMetric] = usePluginPaneState<GraphMetricKey>("detailMetric", "totalRevenue");
+  const resolvedMetric = isMetricForKind(chartKind, metric) ? metric : defaultMetric(chartKind);
+  const rows = useMemo(() => (
+    graphRowsForFinancials(financials, chartKind, resolvedMetric, period, symbol ?? "")
+  ), [chartKind, financials, period, resolvedMetric, symbol]);
+
+  return (
+    <FundamentalGraphContent
+      focused={focused}
+      width={width}
+      height={height}
+      rows={rows}
+      loading={false}
+      error={null}
+      reload={() => {}}
+      period={period}
+      setPeriod={setPeriod}
+      metric={resolvedMetric}
+      setMetric={setMetric}
+      chartKind={chartKind}
+      setChartKind={setChartKind}
+    />
+  );
+}
+
+export function createGraphPaneTemplate({
+  id,
+  label,
+  description,
+  shortcut,
+  chartKind,
+}: {
+  id: string;
+  label: string;
+  description: string;
+  shortcut: "GF" | "GE";
+  chartKind: GraphKind;
+}): PaneTemplateDef {
+  return {
+    id,
+    paneId: "fundamental-graph",
+    label,
+    description,
+    keywords: chartKind === "valuation"
+      ? ["valuation", "graph", "ge", "multiples", "pe", "sales"]
+      : ["fundamental", "graph", "gf", "financials", "statements"],
+    shortcut: { prefix: shortcut, argPlaceholder: "tickers", argKind: "ticker-list" as const },
+    wizard: [
+      {
+        key: "tickers",
+        label: "Tickers",
+        placeholder: "AMD, NVDA",
+        body: ["Enter one or more ticker symbols separated by commas."],
+        type: "text" as const,
+      },
+    ],
+    canCreate: (context, options) => graphTemplateSymbols(context.activeTicker, options).length > 0,
+    createInstance: (context, options) => {
+      const symbols = graphTemplateSymbols(context.activeTicker, options);
+      const primarySymbol = symbols[0];
+      return primarySymbol
+        ? {
+          title: graphTemplateTitle(shortcut, symbols),
+          binding: { kind: "fixed" as const, symbol: primarySymbol },
+          placement: "floating" as const,
+          settings: {
+            chartKind,
+            symbols,
+            symbolsText: formatTickerListInput(symbols),
+          },
+        }
+        : null;
+    },
+  };
+}

package/src/plugins/builtin/ticker-detail/data-panes/historical-prices.tsx

@@ -0,0 +1,192 @@
+import { useCallback, useMemo } from "react";
+import { TextAttributes } from "../../../../ui";
+import {
+  DataTableView,
+  usePaneFooter,
+  type DataTableCell,
+  type DataTableColumn,
+  type DataTableKeyEvent,
+} from "../../../../components";
+import type { TimeRange } from "../../../../components/chart/core/types";
+import type { PaneProps } from "../../../../types/plugin";
+import type { PricePoint } from "../../../../types/financials";
+import { colors, priceColor } from "../../../../theme/colors";
+import { formatCompact, formatNumber, formatPercent } from "../../../../utils/format";
+import {
+  useAssetData,
+  useDebouncedPluginPaneState,
+  usePluginPaneState,
+} from "../../../runtime";
+import { loadingErrorFooterInfo, refreshFooterHint, useClampSelectedIndex } from "../../shared/table-pane";
+import { formatDateTime, useBoundTicker, useTickerRequest } from "../../shared/ticker-request";
+
+type HistoryColumnId = "date" | "open" | "high" | "low" | "close" | "change" | "changePercent" | "volume";
+type HistoryColumn = DataTableColumn & { id: HistoryColumnId };
+
+export type HistoricalPriceRow = {
+  key: string;
+  point: PricePoint;
+  date: string;
+  change: number | null;
+  changePercent: number | null;
+};
+
+const HISTORY_RANGES: TimeRange[] = ["1D", "1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
+
+function pricePointDate(point: PricePoint): Date | null {
+  const value = point.date as Date | string | number;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isFinite(date.getTime()) ? date : null;
+}
+
+function formatMaybePrice(value: number | undefined): string {
+  return value == null ? "-" : formatNumber(value, 2);
+}
+
+function formatMaybePercent(value: number | null): string {
+  return value == null ? "-" : formatPercent(value);
+}
+
+function formatMaybeCompact(value: number | undefined): string {
+  return value == null ? "-" : formatCompact(value);
+}
+
+export function buildHistoricalPriceRows(points: PricePoint[]): HistoricalPriceRow[] {
+  const sorted = points
+    .flatMap((point, sourceIndex) => {
+      const date = pricePointDate(point);
+      return date ? [{ point, date, sourceIndex }] : [];
+    })
+    .sort((left, right) => left.date.getTime() - right.date.getTime());
+  return sorted.map((entry, index) => {
+    const previous = sorted[index - 1]?.point;
+    const { point, date, sourceIndex } = entry;
+    const change = previous ? point.close - previous.close : null;
+    return {
+      key: `${date.toISOString()}:${sourceIndex}`,
+      point,
+      date: formatDateTime(date),
+      change,
+      changePercent: previous?.close ? change! / previous.close : null,
+    };
+  }).reverse();
+}
+
+function buildHistoryColumns(width: number): HistoryColumn[] {
+  const dateWidth = 16;
+  const priceWidth = 10;
+  const changeWidth = 10;
+  const percentWidth = 9;
+  const volumeWidth = Math.max(9, width - 2 - dateWidth - priceWidth * 4 - changeWidth - percentWidth - 7);
+  return [
+    { id: "date", label: "DATE/TIME", width: dateWidth, align: "left" },
+    { id: "open", label: "OPEN", width: priceWidth, align: "right" },
+    { id: "high", label: "HIGH", width: priceWidth, align: "right" },
+    { id: "low", label: "LOW", width: priceWidth, align: "right" },
+    { id: "close", label: "CLOSE", width: priceWidth, align: "right" },
+    { id: "change", label: "CHG", width: changeWidth, align: "right" },
+    { id: "changePercent", label: "CHG %", width: percentWidth, align: "right" },
+    { id: "volume", label: "VOLUME", width: volumeWidth, align: "right" },
+  ];
+}
+
+function nextHistoryRange(current: TimeRange): TimeRange {
+  const index = HISTORY_RANGES.indexOf(current);
+  return HISTORY_RANGES[(index + 1) % HISTORY_RANGES.length] ?? "1Y";
+}
+
+export function HistoricalPricesPane({ focused, width, height }: PaneProps) {
+  const dataProvider = useAssetData();
+  const { symbol, exchange } = useBoundTicker();
+  const [range, setRange] = usePluginPaneState<TimeRange>("range", "ALL");
+  const [selectedIdx, setSelectedIdx] = useDebouncedPluginPaneState<number>("selectedIdx", 0);
+  const loader = useCallback((nextSymbol: string, nextExchange: string, forceRefresh: boolean) => {
+    if (!dataProvider) throw new Error("Market data unavailable");
+    return dataProvider.getPriceHistory(
+      nextSymbol,
+      nextExchange,
+      range,
+      forceRefresh ? { cacheMode: "refresh" } : undefined,
+    );
+  }, [dataProvider, range]);
+  const { data, loading, error, reload } = useTickerRequest<PricePoint[]>(loader, symbol, exchange);
+  const rows = useMemo(() => buildHistoricalPriceRows(data ?? []), [data]);
+  const columns = useMemo(() => buildHistoryColumns(width), [width]);
+  const boundedSelectedIdx = rows.length > 0 ? Math.min(selectedIdx, rows.length - 1) : -1;
+  const cycleRange = useCallback(() => setRange((current) => nextHistoryRange(current)), [setRange]);
+
+  useClampSelectedIndex(rows.length, selectedIdx, setSelectedIdx);
+
+  const handleKeyDown = useCallback((event: DataTableKeyEvent) => {
+    if (event.name === "r") {
+      event.preventDefault?.();
+      reload();
+      return true;
+    }
+    if (event.name === "t") {
+      event.preventDefault?.();
+      cycleRange();
+      return true;
+    }
+    return false;
+  }, [cycleRange, reload]);
+
+  const renderCell = useCallback((
+    row: HistoricalPriceRow,
+    column: HistoryColumn,
+    _index: number,
+    rowState: { selected: boolean },
+  ): DataTableCell => {
+    const selectedColor = rowState.selected ? colors.selectedText : undefined;
+    switch (column.id) {
+      case "date":
+        return { text: row.date, color: selectedColor ?? colors.textDim };
+      case "open":
+        return { text: formatMaybePrice(row.point.open), color: selectedColor ?? colors.text };
+      case "high":
+        return { text: formatMaybePrice(row.point.high), color: selectedColor ?? colors.text };
+      case "low":
+        return { text: formatMaybePrice(row.point.low), color: selectedColor ?? colors.text };
+      case "close":
+        return { text: formatNumber(row.point.close, 2), color: selectedColor ?? colors.textBright, attributes: TextAttributes.BOLD };
+      case "change":
+        return { text: row.change == null ? "-" : formatNumber(row.change, 2), color: selectedColor ?? priceColor(row.change ?? 0) };
+      case "changePercent":
+        return { text: formatMaybePercent(row.changePercent), color: selectedColor ?? priceColor(row.changePercent ?? 0) };
+      case "volume":
+        return { text: formatMaybeCompact(row.point.volume), color: selectedColor ?? colors.textDim };
+    }
+  }, []);
+
+  usePaneFooter("historical-prices", () => ({
+    info: [
+      { id: "range", parts: [{ text: range, tone: "muted" as const }] },
+      ...loadingErrorFooterInfo(loading, error),
+    ],
+    hints: [
+      { id: "range", key: "t", label: "oggle range", onPress: cycleRange },
+      refreshFooterHint(reload),
+    ],
+  }), [cycleRange, error, loading, range, reload]);
+
+  return (
+    <DataTableView<HistoricalPriceRow, HistoryColumn>
+      focused={focused}
+      selectedIndex={boundedSelectedIdx}
+      onSelectIndex={(index) => setSelectedIdx(index)}
+      onRootKeyDown={handleKeyDown}
+      rootWidth={width}
+      rootHeight={height}
+      columns={columns}
+      items={rows}
+      sortColumnId={null}
+      sortDirection="desc"
+      onHeaderClick={() => {}}
+      getItemKey={(row) => row.key}
+      isSelected={(_row, index) => index === boundedSelectedIdx}
+      onSelect={(_row, index) => setSelectedIdx(index)}
+      renderCell={renderCell}
+      emptyStateTitle={loading ? "Loading historical prices..." : "No historical prices"}
+    />
+  );
+}