1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import type { TickerOverview, ValuationResponse } from "@/types/api";
import { fmtCurrency, fmtPct } from "@/lib/format";
type ValState = "idle" | "loading" | "ready" | "error";
type Props = {
overview: TickerOverview;
valuation: ValuationResponse | null;
valState: ValState;
};
function barPositions(price: number, iv: number): {
leftPct: number;
widthPct: number;
pricePct: number;
ivPct: number;
isPremium: boolean;
} {
const padding = 0.1;
const min = Math.min(price, iv) * (1 - padding);
const max = Math.max(price, iv) * (1 + padding);
const range = max - min;
if (range === 0) return { leftPct: 50, widthPct: 0, pricePct: 50, ivPct: 50, isPremium: false };
const pricePct = ((price - min) / range) * 100;
const ivPct = ((iv - min) / range) * 100;
const leftPct = Math.min(pricePct, ivPct);
const widthPct = Math.abs(pricePct - ivPct);
return { leftPct, widthPct, pricePct, ivPct, isPremium: price > iv };
}
export function PriceVsValueCard({ overview, valuation, valState }: Props) {
if (valState === "idle" || valState === "loading" || valState === "error") return null;
const dcf = valuation?.dcf;
if (!dcf?.available || dcf.intrinsic_value_per_share == null) return null;
const price = overview.quote.price ?? overview.range_52w.price;
if (price == null) return null;
const iv = dcf.intrinsic_value_per_share;
const { leftPct, widthPct, pricePct, ivPct, isPremium } = barPositions(price, iv);
const pct = ((price - iv) / iv) * 100;
const pctLabel = isPremium
? `Trading at ${pct.toFixed(1)}% premium to DCF`
: `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)}`];
return (
<section className="psm-card">
<div className="psm-card-head">
<div>
<div className="psm-eyebrow">Price vs Value</div>
<h2 className="psm-card-title">Intrinsic Value</h2>
</div>
</div>
<div className="psm-pvv-figures">
<span className="psm-pvv-current">{fmtCurrency(price)}</span>
<span className={`psm-pvv-iv ${isPremium ? "negative" : "positive"}`}>
{isPremium ? "↑" : "↓"} IV {fmtCurrency(iv)}
</span>
</div>
<div className="psm-pvv-rail">
<div
className="psm-pvv-fill"
style={{
left: `${leftPct}%`,
width: `${widthPct}%`,
background: isPremium ? "var(--negative)" : "var(--positive)",
opacity: 0.5,
}}
/>
<div className="psm-pvv-tick price" style={{ left: `${pricePct}%` }} />
<div className="psm-pvv-tick iv" style={{ left: `${ivPct}%` }} />
</div>
<div className="psm-pvv-rail-labels">
<span>{leftLabel}</span>
<span>{rightLabel}</span>
</div>
<p className="psm-pvv-meta">
{pctLabel} · WACC {fmtPct(dcf.wacc)} · {dcf.projection_years}yr
{dcf.growth_rate_used != null ? ` · growth ${fmtPct(dcf.growth_rate_used)}` : ""}
</p>
</section>
);
}
|
