diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-21 14:49:56 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-21 14:49:56 -0700 |
| commit | 2222d8a5fac6850d7d924e9404a44a65cb10f68f (patch) | |
| tree | 2fe934024f77dcc44ec52aed9c5fe8824b535e4e /frontend/app | |
| parent | 25360aacb8aab46e7e579707eb9704759af9536d (diff) | |
fix: rewrite polar smile with correct closed-lens geometry
- Piecewise angleFor: puts go CCW (ATM→bottom), calls go CW (ATM→bottom)
so both wings meet at the same bottom point and the path closes with Z
- Dynamic ivToR computed from actual IV range across all expiries
(inner floor 60px, outer wall 240px) instead of hardcoded percentages
- IV rings: 5 evenly-spaced steps between real ivLo/ivHi
- Curve fill: rgba(194,170,122,0.12) matching design reference
- Non-selected curves: index-based styles (solid fg-1, then dashed fg-2/3/4)
- Eye price at font-size 30, label lowercase 'call · fair'
- Dashed marker-line spoke from center to selected-K dot
- Clicking a curve switches the selected expiry via onPickT
- Strike ticks use round multiples of a price-adaptive step
- Fix IvHeatmap xlabs duplicate key error (key by index, not rounded K)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'frontend/app')
| -rw-r--r-- | frontend/app/options.css | 14 |
1 files changed, 12 insertions, 2 deletions
diff --git a/frontend/app/options.css b/frontend/app/options.css index 4055041..2841932 100644 --- a/frontend/app/options.css +++ b/frontend/app/options.css @@ -456,9 +456,19 @@ .opt-polar text.tick.atm { fill: var(--brass-bright); font-weight: 500; } .opt-polar text.iv { font-family: var(--font-mono); font-size: 9px; fill: var(--fg-4); letter-spacing: 0.04em; } .opt-polar .eye { fill: var(--ink-0); stroke: var(--brass); stroke-width: 1; } -.opt-polar text.eye-lbl { font-family: var(--font-sans); font-size: 9px; fill: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-wider); } -.opt-polar text.eye-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; fill: var(--brass-bright); font-weight: 500; } +.opt-polar text.eye-lbl { + font-family: var(--font-sans); font-size: 9px; + fill: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-wider); +} +.opt-polar text.eye-num { + font-family: var(--font-mono); font-variant-numeric: tabular-nums; + fill: var(--brass-bright); font-weight: 500; +} .opt-polar .dot { fill: var(--brass-bright); stroke: var(--ink-0); stroke-width: 2; } +/* Dashed spoke from center to selected-K dot */ +.opt-polar .marker-line { stroke: var(--brass); stroke-width: 1; stroke-dasharray: 3 3; } +/* K label and general brass text */ +.opt-polar text.brass { fill: var(--brass-bright); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .opt-surface-legend { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; |