From c3f19f79f66054dc3b3a98999ea38b0f05248e06 Mon Sep 17 00:00:00 2001 From: Tyler Hoang Date: Sun, 17 May 2026 13:36:57 -0700 Subject: Refine overview ratios and shell --- frontend/app/page.tsx | 48 +++++--- frontend/app/prism-shell.css | 170 +++++++++++++++++++++-------- frontend/components/prism/ChartCard.tsx | 7 +- frontend/components/prism/Sidebar.tsx | 6 +- frontend/components/prism/TickerHeader.tsx | 14 ++- frontend/lib/overview.ts | 13 +-- frontend/types/api.ts | 16 +++ 7 files changed, 197 insertions(+), 77 deletions(-) (limited to 'frontend') diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 02bd706..41408b0 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -377,12 +377,12 @@ function SignalCard({ overview }: { overview: TickerOverview }) {

Readthrough

-
+
{overview.signals.map((signal) => ( -
+
{signal.key} - {signal.value} {signal.description} + {signal.value}
))}
@@ -392,12 +392,14 @@ function SignalCard({ overview }: { overview: TickerOverview }) { function DataStatusCard({ overview, missingFields }: { overview: TickerOverview; missingFields: string[] }) { const entries = Object.entries(overview.meta.sources).slice(0, 6); + const visibleMissing = missingFields.slice(0, 4); + const hiddenMissingCount = Math.max(0, missingFields.length - visibleMissing.length); return (
-
Data Quality
+
Coverage

Coverage

{overview.meta.status} @@ -405,7 +407,8 @@ function DataStatusCard({ overview, missingFields }: { overview: TickerOverview;

{availableFieldSummary(overview)}

{overview.meta.is_partial ? (
- {missingFields.length ? missingFields.slice(0, 8).map((field) => {field}) : null} + {missingFields.length ? visibleMissing.map((field) => {field}) : null} + {hiddenMissingCount ? +{hiddenMissingCount} more : null}
) : null}
@@ -433,7 +436,7 @@ function ProfileCard({ overview }: { overview: TickerOverview }) {
Company Profile
-

Context

+

Company Profile

@@ -474,7 +477,7 @@ function ShortInterestCard({ overview }: { overview: TickerOverview }) {
Short Interest
-

Pressure

+

Short Interest

@@ -488,21 +491,38 @@ function ShortInterestCard({ overview }: { overview: TickerOverview }) { } function StatsCard({ overview }: { overview: TickerOverview }) { + const referenceRows = [ + { label: "Market Cap", value: fmtLarge(overview.stats.market_cap), missing: overview.stats.market_cap == null }, + { label: "P/E TTM", value: overview.stats.trailing_pe == null ? "-" : `${fmtNumber(overview.stats.trailing_pe)}x`, missing: overview.stats.trailing_pe == null }, + { label: "EPS TTM", value: fmtCurrency(overview.stats.trailing_eps), missing: overview.stats.trailing_eps == null }, + { label: "P/B", value: overview.ratios.price_to_book == null ? "-" : `${fmtNumber(overview.ratios.price_to_book)}x`, missing: overview.ratios.price_to_book == null }, + { label: "P/S", value: overview.ratios.price_to_sales == null ? "-" : `${fmtNumber(overview.ratios.price_to_sales)}x`, missing: overview.ratios.price_to_sales == null }, + { label: "EV/Sales", value: overview.ratios.ev_to_sales == null ? "-" : `${fmtNumber(overview.ratios.ev_to_sales)}x`, missing: overview.ratios.ev_to_sales == null }, + { label: "EV/EBITDA", value: overview.ratios.ev_to_ebitda == null ? "-" : `${fmtNumber(overview.ratios.ev_to_ebitda)}x`, missing: overview.ratios.ev_to_ebitda == null }, + { label: "Gross Margin", value: fmtPct(overview.ratios.gross_margin_ttm), missing: overview.ratios.gross_margin_ttm == null }, + { label: "Op Margin", value: fmtPct(overview.ratios.operating_margin_ttm), missing: overview.ratios.operating_margin_ttm == null }, + { label: "Net Margin", value: fmtPct(overview.ratios.net_margin_ttm), missing: overview.ratios.net_margin_ttm == null }, + { label: "ROE", value: fmtPct(overview.ratios.roe_ttm), missing: overview.ratios.roe_ttm == null }, + { label: "ROA", value: fmtPct(overview.ratios.roa_ttm), missing: overview.ratios.roa_ttm == null }, + { label: "ROIC", value: fmtPct(overview.ratios.roic_ttm), missing: overview.ratios.roic_ttm == null }, + { label: "D/E", value: overview.ratios.debt_to_equity == null ? "-" : `${fmtNumber(overview.ratios.debt_to_equity)}x`, missing: overview.ratios.debt_to_equity == null }, + { label: "Current Ratio", value: overview.ratios.current_ratio == null ? "-" : `${fmtNumber(overview.ratios.current_ratio)}x`, missing: overview.ratios.current_ratio == null }, + { label: "Dividend Yield", value: fmtPct(overview.ratios.dividend_yield_ttm), missing: overview.ratios.dividend_yield_ttm == null }, + { label: "Payout Ratio", value: fmtPct(overview.ratios.dividend_payout_ratio_ttm), missing: overview.ratios.dividend_payout_ratio_ttm == null } + ]; + return (
-
Overview Stats
+
Reference

Reference

- - - - - - + {referenceRows.map((row) => ( + + ))}
); diff --git a/frontend/app/prism-shell.css b/frontend/app/prism-shell.css index 9b0e1b5..b6372c2 100644 --- a/frontend/app/prism-shell.css +++ b/frontend/app/prism-shell.css @@ -1,6 +1,6 @@ .prism-app { display: grid; - grid-template-columns: 256px minmax(0, 1fr); + grid-template-columns: 284px minmax(0, 1fr); min-height: 100vh; } @@ -192,22 +192,22 @@ .psm-watch-row { display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: var(--sp-2); + grid-template-columns: minmax(0, 1fr) 34px; + gap: var(--sp-3); align-items: center; border-bottom: 1px solid var(--line-1); } .psm-watch-select { display: grid; - grid-template-columns: minmax(0, 1fr) auto auto; - gap: var(--sp-2); + grid-template-columns: minmax(0, 1fr) minmax(82px, auto) minmax(52px, auto); + column-gap: var(--sp-5); align-items: center; width: 100%; border: 0; background: transparent; color: var(--fg-2); - padding: 10px 0; + padding: 12px 0; } .psm-watch-select:hover, @@ -221,13 +221,22 @@ .psm-watch-main { min-width: 0; + display: flex; + flex-direction: column; + gap: 3px; text-align: left; } +.psm-watch-cell { + min-width: 0; +} + .psm-watch-symbol { color: var(--fg-1); + font-family: var(--font-mono); font-size: var(--fs-14); font-weight: 500; + letter-spacing: 0.04em; } .psm-watch-date, @@ -240,6 +249,11 @@ font-size: var(--fs-13); } +.psm-watch-date { + line-height: 1.2; + white-space: nowrap; +} + .psm-watch-price, .psm-watch-change, .psm-quote-line, @@ -261,13 +275,13 @@ } .psm-watch-remove { - width: 26px; - height: 26px; + width: 30px; + height: 30px; border: 1px solid var(--line-2); - border-radius: var(--r-full); + border-radius: var(--r-2); background: transparent; color: var(--fg-4); - margin-right: 2px; + justify-self: end; } .psm-watch-remove:hover { @@ -484,9 +498,9 @@ .psm-ticker-head { display: grid; - grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr) auto; + grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.75fr) minmax(220px, auto); gap: var(--sp-5); - align-items: end; + align-items: start; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-1); } @@ -495,32 +509,32 @@ min-width: 0; } +.psm-head-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + margin-bottom: var(--sp-3); +} + .psm-identity-line { color: var(--brass); - display: block; - margin-bottom: var(--sp-2); + display: inline-flex; } .psm-heading-row { display: flex; flex-wrap: wrap; - align-items: baseline; - gap: var(--sp-4); -} - -.psm-symbol { - color: var(--fg-1); - font-family: var(--font-display); - font-size: clamp(3rem, 6vw, var(--fs-64)); - line-height: 0.95; - letter-spacing: -0.03em; + align-items: flex-start; + gap: var(--sp-3); } .psm-company-name { - color: var(--fg-2); + color: var(--fg-1); font-family: var(--font-display); - font-size: var(--fs-24); + font-size: clamp(2.8rem, 5vw, var(--fs-56)); font-style: italic; + line-height: 0.95; } .psm-partial-chip, @@ -559,22 +573,30 @@ color: var(--negative); } +.psm-tag { + border: 1px solid var(--line-2); + background: var(--ink-2); + color: var(--fg-2); +} + .psm-subline { margin-top: var(--sp-2); color: var(--fg-3); font-size: var(--fs-14); + max-width: 52ch; } .psm-price-stack { display: flex; flex-direction: column; align-items: flex-end; - gap: 4px; + gap: 5px; + padding-top: 2px; } .psm-price { color: var(--fg-1); - font-size: clamp(2.4rem, 4vw, var(--fs-48)); + font-size: clamp(2.6rem, 4vw, var(--fs-48)); line-height: 1; } @@ -585,6 +607,8 @@ .psm-quote-line { color: var(--fg-3); font-size: var(--fs-12); + text-transform: uppercase; + letter-spacing: var(--tr-wider); } .psm-primary-action, @@ -601,6 +625,7 @@ border: 1px solid var(--brass); background: var(--brass); color: var(--brass-ink); + margin-top: var(--sp-2); } .psm-primary-action.subtle { @@ -618,6 +643,7 @@ display: flex; flex-direction: column; gap: var(--sp-2); + padding-top: 8px; } .psm-range-values { @@ -629,6 +655,10 @@ font-size: var(--fs-12); } +.psm-range-spot { + color: var(--fg-1); +} + .psm-range-rail { position: relative; height: 4px; @@ -644,6 +674,11 @@ background: var(--brass); } +.psm-range-caption { + color: var(--fg-4); + font-size: var(--fs-12); +} + .psm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); @@ -769,14 +804,12 @@ line-height: 1.5; } -.psm-signal-grid, .psm-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } -.psm-signal, .psm-detail-item { border: 1px solid var(--line-1); border-radius: var(--r-2); @@ -792,7 +825,6 @@ text-transform: uppercase; } -.psm-signal-value, .psm-detail-value, .psm-stat-value { display: block; @@ -801,7 +833,6 @@ font-size: var(--fs-18); } -.psm-signal-copy, .psm-detail-copy { display: block; margin-top: 6px; @@ -810,20 +841,50 @@ line-height: 1.45; } -.psm-signal.pos { - border-color: rgba(79, 140, 94, 0.35); +.psm-signal-list { + display: flex; + flex-direction: column; } -.psm-signal.warn { - border-color: rgba(196, 149, 69, 0.35); +.psm-signal-row { + display: grid; + grid-template-columns: 84px minmax(0, 1fr) auto; + gap: var(--sp-3); + align-items: center; + padding: 12px 0; + border-bottom: 1px solid var(--line-1); +} + +.psm-signal-row:last-child { + border-bottom: 0; +} + +.psm-signal-row.pos .psm-signal-value { + color: var(--positive); +} + +.psm-signal-row.warn .psm-signal-value { + color: var(--warning); +} + +.psm-signal-row.neg .psm-signal-value { + color: var(--negative); } -.psm-signal.neg { - border-color: rgba(181, 73, 75, 0.35); +.psm-signal-row.neu .psm-signal-value { + color: var(--fg-3); +} + +.psm-signal-value { + color: var(--fg-1); + font-family: var(--font-mono); + font-size: var(--fs-14); + font-variant-numeric: tabular-nums; } -.psm-signal.neu { - border-color: var(--line-2); +.psm-signal-copy { + color: var(--fg-2); + font-size: var(--fs-14); } .psm-profile-list, @@ -841,7 +902,7 @@ grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; - padding-bottom: var(--sp-3); + padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line-1); } @@ -868,6 +929,11 @@ word-break: break-word; } +.psm-stat-value { + text-align: right; + white-space: nowrap; +} + .psm-source-value { font-family: var(--font-mono); font-size: var(--fs-12); @@ -884,6 +950,7 @@ display: flex; flex-wrap: wrap; gap: var(--sp-2); + margin-bottom: var(--sp-2); } .psm-field-tag { @@ -988,18 +1055,33 @@ .psm-kpis, .psm-main-grid, .psm-detail-grid, - .psm-signal-grid, .psm-ticker-head { grid-template-columns: 1fr; } .psm-heading-row { align-items: start; - flex-direction: column; - gap: var(--sp-2); } .psm-price-stack { align-items: start; } + + .psm-signal-row { + grid-template-columns: 1fr; + gap: 4px; + } + + .psm-watch-select { + grid-template-columns: minmax(0, 1fr) auto auto; + row-gap: 4px; + } + + .psm-watch-price { + grid-column: 2; + } + + .psm-watch-change { + grid-column: 3; + } } diff --git a/frontend/components/prism/ChartCard.tsx b/frontend/components/prism/ChartCard.tsx index bc650d7..87bb399 100644 --- a/frontend/components/prism/ChartCard.tsx +++ b/frontend/components/prism/ChartCard.tsx @@ -23,8 +23,8 @@ export function ChartCard({ symbol, period, points, chartState, chartError, onCh
-
Price History
-

{symbol}

+
Price Action
+

{symbol} Price History

{PERIODS.map((option) => ( @@ -42,7 +42,7 @@ export function ChartCard({ symbol, period, points, chartState, chartError, onCh
-

Chart loading is isolated from the rest of Overview. A history miss only affects this card.

+

Interactive history for the selected window. If history fails, the rest of Overview stays intact.

{chartState === "loading" ?
Loading {period.toUpperCase()} history…
: null} @@ -52,4 +52,3 @@ export function ChartCard({ symbol, period, points, chartState, chartError, onCh
); } - diff --git a/frontend/components/prism/Sidebar.tsx b/frontend/components/prism/Sidebar.tsx index 80e13f3..7f106d8 100644 --- a/frontend/components/prism/Sidebar.tsx +++ b/frontend/components/prism/Sidebar.tsx @@ -75,12 +75,12 @@ export function Sidebar({ return (
@@ -41,6 +45,7 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) { {fmtCurrency(overview.quote.change)} · {fmtPct(overview.quote.change_pct, 2, true)} Prev close {fmtCurrency(overview.quote.prev_close)} + {lastSource ? Source {lastSource.replaceAll("_", " ")} : null} @@ -48,4 +53,3 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) { ); } - diff --git a/frontend/lib/overview.ts b/frontend/lib/overview.ts index efbd9f9..d02c5d3 100644 --- a/frontend/lib/overview.ts +++ b/frontend/lib/overview.ts @@ -41,14 +41,14 @@ export function buildKpis(overview: TickerOverview): KpiItem[] { { key: "P / E", value: overview.stats.trailing_pe == null ? "Unavailable" : `${fmtNumber(overview.stats.trailing_pe)}x`, - sublabel: `EPS ${fmtCurrency(overview.stats.trailing_eps)}`, + sublabel: `P/B ${overview.ratios.price_to_book == null ? "-" : `${fmtNumber(overview.ratios.price_to_book)}x`}`, missing: overview.stats.trailing_pe == null }, { - key: "Prev Close", - value: fmtCurrency(overview.quote.prev_close), - sublabel: `Day chg ${fmtCurrency(overview.quote.change)}`, - missing: overview.quote.prev_close == null + key: "EPS · TTM", + value: fmtCurrency(overview.stats.trailing_eps), + sublabel: `Net margin ${fmtPct(overview.ratios.net_margin_ttm)}`, + missing: overview.stats.trailing_eps == null }, { key: "52W Position", @@ -95,7 +95,7 @@ export function availableFieldSummary(overview: TickerOverview): string { const fields = Object.values(overview.meta.field_availability); if (!fields.length) return "Availability metadata unavailable"; const available = fields.filter(Boolean).length; - return `${available}/${fields.length} tracked fields available`; + return `${available} of ${fields.length} tracked fields filled`; } export function watchlistSubtitle(item: WatchlistItem): string { @@ -131,4 +131,3 @@ export function marketClock(now = new Date()) { }).format(now) }; } - diff --git a/frontend/types/api.ts b/frontend/types/api.ts index 679ada9..84dfd19 100644 --- a/frontend/types/api.ts +++ b/frontend/types/api.ts @@ -44,6 +44,22 @@ export type TickerOverview = { average_volume?: number | null; beta?: number | null; }; + ratios: { + price_to_book?: number | null; + price_to_sales?: number | null; + ev_to_sales?: number | null; + ev_to_ebitda?: number | null; + gross_margin_ttm?: number | null; + operating_margin_ttm?: number | null; + net_margin_ttm?: number | null; + roe_ttm?: number | null; + roa_ttm?: number | null; + roic_ttm?: number | null; + debt_to_equity?: number | null; + current_ratio?: number | null; + dividend_yield_ttm?: number | null; + dividend_payout_ratio_ttm?: number | null; + }; range_52w: { low?: number | null; high?: number | null; -- cgit v1.3-2-g0d8e