diff options
Diffstat (limited to 'frontend/components')
| -rw-r--r-- | frontend/components/prism/FinancialsCard.tsx | 16 | ||||
| -rw-r--r-- | frontend/components/prism/PriceVsValueCard.tsx | 8 | ||||
| -rw-r--r-- | frontend/components/prism/TickerHeader.tsx | 14 |
3 files changed, 22 insertions, 16 deletions
diff --git a/frontend/components/prism/FinancialsCard.tsx b/frontend/components/prism/FinancialsCard.tsx index 43a2dc2..6e2fe01 100644 --- a/frontend/components/prism/FinancialsCard.tsx +++ b/frontend/components/prism/FinancialsCard.tsx @@ -1,6 +1,7 @@ "use client"; import type { FinancialRow, FinancialsResponse } from "@/types/api"; import { fmtLarge } from "@/lib/format"; +import { CurrencyWarning } from "./CurrencyWarning"; type StatementKey = "income" | "balance" | "cash_flow"; type PeriodKey = "annual" | "quarterly"; @@ -12,13 +13,13 @@ type Props = { onChangePeriod: (p: PeriodKey) => void; }; -function fmtFinVal(val: number | null | undefined, isMargin: boolean): string { +function fmtFinVal(val: number | null | undefined, isMargin: boolean, currency: string): string { if (val === null || val === undefined) return "—"; if (isMargin) return `${(val * 100).toFixed(1)}%`; - return fmtLarge(val); + return fmtLarge(val, currency); } -function FinRow({ row, lastColIdx }: { row: FinancialRow; lastColIdx: number }) { +function FinRow({ row, lastColIdx, currency }: { row: FinancialRow; lastColIdx: number; currency: string }) { if (row.is_section) { return ( <tr className="psm-fin-section-row"> @@ -52,7 +53,7 @@ function FinRow({ row, lastColIdx }: { row: FinancialRow; lastColIdx: number }) .filter(Boolean) .join(" ")} > - {fmtFinVal(val, row.is_margin)} + {fmtFinVal(val, row.is_margin, currency)} </td> ))} </tr> @@ -92,7 +93,10 @@ export function FinancialsCard({ <table className="psm-fin-table"> <thead> <tr> - <th className="psm-fin-label-col">USD (millions)</th> + <th className="psm-fin-label-col"> + {data.currency} (millions) + <CurrencyWarning warning={data.currency_warning} /> + </th> {stmt.columns.map((col, i) => ( <th key={i} @@ -105,7 +109,7 @@ export function FinancialsCard({ </thead> <tbody> {stmt.rows.map((row, i) => ( - <FinRow key={i} row={row} lastColIdx={lastColIdx} /> + <FinRow key={i} row={row} lastColIdx={lastColIdx} currency={data.currency} /> ))} </tbody> </table> diff --git a/frontend/components/prism/PriceVsValueCard.tsx b/frontend/components/prism/PriceVsValueCard.tsx index cf5a3c7..5d9291c 100644 --- a/frontend/components/prism/PriceVsValueCard.tsx +++ b/frontend/components/prism/PriceVsValueCard.tsx @@ -48,8 +48,8 @@ export function PriceVsValueCard({ overview, valuation, valState }: Props) { : `Trading at ${Math.abs(pct).toFixed(1)}% discount to DCF`; const [leftLabel, rightLabel] = isPremium - ? [`IV ${fmtCurrency(iv)}`, `Price ${fmtCurrency(price)}`] - : [`Price ${fmtCurrency(price)}`, `IV ${fmtCurrency(iv)}`]; + ? [`IV ${fmtCurrency(iv, 2, valuation?.currency ?? overview.currency)}`, `Price ${fmtCurrency(price, 2, overview.currency)}`] + : [`Price ${fmtCurrency(price, 2, overview.currency)}`, `IV ${fmtCurrency(iv, 2, valuation?.currency ?? overview.currency)}`]; return ( <section className="psm-card"> @@ -60,9 +60,9 @@ export function PriceVsValueCard({ overview, valuation, valState }: Props) { </div> </div> <div className="psm-pvv-figures"> - <span className="psm-pvv-current">{fmtCurrency(price)}</span> + <span className="psm-pvv-current">{fmtCurrency(price, 2, overview.currency)}</span> <span className={`psm-pvv-iv ${isPremium ? "negative" : "positive"}`}> - IV {fmtCurrency(iv)} + IV {fmtCurrency(iv, 2, valuation?.currency ?? overview.currency)} </span> </div> <div className="psm-pvv-rail"> diff --git a/frontend/components/prism/TickerHeader.tsx b/frontend/components/prism/TickerHeader.tsx index 804ffc0..c47f67f 100644 --- a/frontend/components/prism/TickerHeader.tsx +++ b/frontend/components/prism/TickerHeader.tsx @@ -1,6 +1,7 @@ import { deltaClass, fmtCurrency, fmtPct } from "@/lib/format"; import { rangePercent } from "@/lib/overview"; import type { TickerOverview } from "@/types/api"; +import { CurrencyWarning } from "./CurrencyWarning"; type Props = { overview: TickerOverview; @@ -25,15 +26,16 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) { <div className="psm-head-meta"> {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} + <CurrencyWarning warning={overview.currency_warning} /> </div> </div> <div className="psm-range"> <div className="psm-eyebrow">52 Week Range</div> <div className="psm-range-values"> - <span>{fmtCurrency(overview.range_52w.low)}</span> - <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price)}</span> - <span>{fmtCurrency(overview.range_52w.high)}</span> + <span>{fmtCurrency(overview.range_52w.low, 2, overview.currency)}</span> + <span className="psm-range-spot">{fmtCurrency(overview.range_52w.price ?? overview.quote.price, 2, overview.currency)}</span> + <span>{fmtCurrency(overview.range_52w.high, 2, overview.currency)}</span> </div> <div className="psm-range-rail" aria-hidden> {pct != null ? <span className="psm-range-indicator" style={{ left: `${pct}%` }} /> : null} @@ -42,11 +44,11 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) { </div> <div className="psm-price-stack"> - <span className="psm-price">{fmtCurrency(overview.quote.price)}</span> + <span className="psm-price">{fmtCurrency(overview.quote.price, 2, overview.currency)}</span> <span className={`psm-change ${deltaClass(overview.quote.change_pct)}`}> - {fmtCurrency(overview.quote.change)} · {fmtPct(overview.quote.change_pct, 2, true)} + {fmtCurrency(overview.quote.change, 2, overview.currency)} · {fmtPct(overview.quote.change_pct, 2, true)} </span> - <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close)}</span> + <span className="psm-quote-line">Prev close {fmtCurrency(overview.quote.prev_close, 2, overview.currency)}</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"} |