summaryrefslogtreecommitdiff
path: root/frontend/components/prism/TickerHeader.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/components/prism/TickerHeader.tsx')
-rw-r--r--frontend/components/prism/TickerHeader.tsx14
1 files changed, 9 insertions, 5 deletions
diff --git a/frontend/components/prism/TickerHeader.tsx b/frontend/components/prism/TickerHeader.tsx
index 23254f8..369d06c 100644
--- a/frontend/components/prism/TickerHeader.tsx
+++ b/frontend/components/prism/TickerHeader.tsx
@@ -10,15 +10,18 @@ type Props = {
export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
const pct = rangePercent(overview);
+ const lastSource = overview.meta.sources["quote.price"];
return (
<header className="psm-ticker-head">
<div className="psm-header-left">
- <span className="psm-identity-line psm-eyebrow">{overview.profile.symbol}</span>
+ <div className="psm-head-meta">
+ <span className="psm-identity-line psm-eyebrow">{overview.profile.symbol}</span>
+ {overview.profile.exchange ? <span className="psm-tag">{overview.profile.exchange}</span> : null}
+ {overview.meta.is_partial ? <span className="psm-partial-chip">Partial Data</span> : null}
+ </div>
<div className="psm-heading-row">
- <span className="psm-symbol">{overview.profile.symbol}</span>
<span className="psm-company-name">{overview.profile.name || "Name unavailable"}</span>
- {overview.meta.is_partial ? <span className="psm-partial-chip">Partial Data</span> : null}
</div>
<p className="psm-subline">{buildIdentityLine(overview)}</p>
</div>
@@ -27,12 +30,13 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
<div className="psm-eyebrow">52 Week Range</div>
<div className="psm-range-values">
<span>{fmtCurrency(overview.range_52w.low)}</span>
- <span>{fmtCurrency(overview.range_52w.price ?? overview.quote.price)}</span>
+ <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price)}</span>
<span>{fmtCurrency(overview.range_52w.high)}</span>
</div>
<div className="psm-range-rail" aria-hidden>
{pct != null ? <span className="psm-range-indicator" style={{ left: `${pct}%` }} /> : null}
</div>
+ <div className="psm-range-caption">{pct == null ? "Range unavailable" : `${pct.toFixed(0)}% through the annual range`}</div>
</div>
<div className="psm-price-stack">
@@ -41,6 +45,7 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
{fmtCurrency(overview.quote.change)} ยท {fmtPct(overview.quote.change_pct, 2, true)}
</span>
<span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close)}</span>
+ {lastSource ? <span className="psm-quote-line">Source {lastSource.replaceAll("_", " ")}</span> : null}
<button type="button" className={`psm-primary-action${isSaved ? " subtle" : ""}`} onClick={onToggleWatchlist}>
{isSaved ? "Remove From Watchlist" : "Save To Watchlist"}
</button>
@@ -48,4 +53,3 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
</header>
);
}
-