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

Vol Surface: move HV-vs-IV card into the toolbar row

Browse Source 
User wanted the comparison sitting alongside the Lookup / Expiry /
Load Surface controls instead of in the page header. Now it lives
on the right side of the toolbar row (ms-sm-auto), still hidden
until data is loaded.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ojy
2026-05-13 07:58:09 +00:00
parent 52af71d7f4
commit f8aa3cdaae
1 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/surface.html
View File

@@ -346,29 +346,6 @@
<h2 class="page-title">Volatility Surface</h2>
<div class="text-secondary mt-1">IV skew analysis and term structure</div>
</div>
<div class="col-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>
@@ -436,7 +413,7 @@
</button>
</div>
<div class="col-12 col-sm-auto ms-sm-auto" x-show="errorMsg" x-cloak>
<div class="col-12 col-sm-auto" x-show="errorMsg" x-cloak>
<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"
fill="none" stroke="currentColor" stroke-width="2" class="me-1">
@@ -447,6 +424,30 @@
<span x-text="errorMsg"></span>
</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>