ojy/options-pricer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vol Surface: HV-vs-IV card as rowspan-2 to the right of toolbar

Browse Source 
Wrap the toolbar card and the skew-metric badges (ATM IV / RR25 /
Fly25) in a left column, and place the HV-vs-IV card in a sibling
right column with h-100 d-flex flex-column so it stretches to the
full height of both stacked items — effectively a rowspan=2 layout.

On screens narrower than lg the right column drops below as a
single full-width card.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ojy
2026-05-13 08:00:32 +00:00
parent f8aa3cdaae
commit d89ad179f3
1 changed files with 128 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/surface.html
View File

@@ -353,8 +353,11 @@
<div class="page-body"> <div class="page-body">
<div class="container-xl"> <div class="container-xl">
<!-- Top section: toolbar + skew badges on the left, HV/IV card (rowspan-2 style) on the right -->
<div class="row g-3 mb-4 align-items-stretch">
<div class="col-12 col-lg">
<!-- Toolbar --> <!-- Toolbar -->
<div class="card mb-4" style="background:#161824; border:1px solid #2d3045;"> <div class="card mb-3" style="background:#161824; border:1px solid #2d3045;">
<div class="card-body"> <div class="card-body">
<div class="row g-3 align-items-end"> <div class="row g-3 align-items-end">
<div class="col-12 col-sm-auto"> <div class="col-12 col-sm-auto">
@@ -413,7 +416,7 @@
</button> </button>
</div> </div>
<div class="col-12 col-sm-auto" x-show="errorMsg" x-cloak> <div class="col-12 col-sm-auto ms-sm-auto" x-show="errorMsg" x-cloak>
<div class="alert alert-danger mb-0 py-2 px-3" role="alert"> <div class="alert alert-danger mb-0 py-2 px-3" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" class="me-1"> fill="none" stroke="currentColor" stroke-width="2" class="me-1">
@@ -424,36 +427,12 @@
<span x-text="errorMsg"></span> <span x-text="errorMsg"></span>
</div> </div>
</div> </div>
<div class="col-12 col-sm-auto ms-sm-auto" x-show="hasData" x-cloak>
<div class="hviv-card">
<div class="hviv-head">
<span class="hviv-title">HV vs IV</span>
<span class="hviv-badge" :class="hvIvVerdict.cls" x-text="hvIvVerdict.label"></span>
</div>
<div class="hviv-row atm">
<span class="label">ATM IV</span>
<span class="val" x-text="formatPct(currentMetrics.atmIV)"></span>
<span class="spread">&nbsp;</span>
</div>
<template x-for="w in hvRows" :key="w.key">
<div class="hviv-row">
<span class="label" x-text="w.label"></span>
<span class="val" x-text="w.value > 0 ? formatPct(w.value) : '—'"></span>
<span class="spread"
:class="w.value > 0 ? (w.spread >= 0 ? 'positive' : 'negative') : ''"
x-text="w.value > 0 ? ((w.spread >= 0 ? '+' : '') + (w.spread * 100).toFixed(1) + ' pts') : ''"></span>
</div>
</template>
<div class="hviv-foot" x-text="hvIvFooter"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Skew metric badges --> <!-- Skew metric badges -->
<div class="mb-4" x-show="hasData" x-cloak> <div x-show="hasData" x-cloak>
<div class="d-flex flex-wrap gap-3"> <div class="d-flex flex-wrap gap-3">
<div class="stat-inline"> <div class="stat-inline">
@@ -484,6 +463,33 @@
</div> </div>
</div> </div>
</div>
<!-- HV vs IV card — spans full height of left column (toolbar + skew badges) -->
<div class="col-12 col-lg-auto" x-show="hasData" x-cloak>
<div class="hviv-card h-100 d-flex flex-column">
<div class="hviv-head">
<span class="hviv-title">HV vs IV</span>
<span class="hviv-badge" :class="hvIvVerdict.cls" x-text="hvIvVerdict.label"></span>
</div>
<div class="hviv-row atm">
<span class="label">ATM IV</span>
<span class="val" x-text="formatPct(currentMetrics.atmIV)"></span>
<span class="spread">&nbsp;</span>
</div>
<template x-for="w in hvRows" :key="w.key">
<div class="hviv-row">
<span class="label" x-text="w.label"></span>
<span class="val" x-text="w.value > 0 ? formatPct(w.value) : '—'"></span>
<span class="spread"
:class="w.value > 0 ? (w.spread >= 0 ? 'positive' : 'negative') : ''"
x-text="w.value > 0 ? ((w.spread >= 0 ? '+' : '') + (w.spread * 100).toFixed(1) + ' pts') : ''"></span>
</div>
</template>
<div class="hviv-foot mt-auto" x-text="hvIvFooter"></div>
</div>
</div>
</div>
<!-- Greeks card --> <!-- Greeks card -->
<div class="card mb-4" style="background:#161824; border:1px solid #2d3045;" x-show="hasData" x-cloak> <div class="card mb-4" style="background:#161824; border:1px solid #2d3045;" x-show="hasData" x-cloak>