Multi-symbol strategy baskets + symbol picker
The store now keeps one basket per symbol (v2 schema, auto-migrates v1). Adding a leg from a different symbol no longer wipes the basket — it creates that symbol's basket and makes it active. The Strategy page shows a symbol picker at the top (when >1 symbol is saved) to switch between them; switching auto-fetches that symbol's live marks. "Clear all" clears only the current symbol's legs; new StrategyStore.clearAll() wipes everything. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,24 +1,28 @@
|
||||
/**
|
||||
* Strategy basket persistence — localStorage-backed.
|
||||
* Strategy basket persistence — localStorage-backed, multi-symbol.
|
||||
* Exposed as window.StrategyStore. No modules, no deps.
|
||||
*
|
||||
* Stored shape (key "optionsPricer:strategy"):
|
||||
* Stored shape (key "optionsPricer:strategy", v2):
|
||||
* {
|
||||
* v: 1,
|
||||
* symbol: "SPY",
|
||||
* spotSnapshot: 738.18, // spot when last leg was added (reference only)
|
||||
* v: 2,
|
||||
* active: "SPY", // currently-shown symbol
|
||||
* updatedAt: "2026-05-13T...Z",
|
||||
* legs: [
|
||||
* { id, symbol, expiry:"YYYY-MM-DD", type:"call"|"put",
|
||||
* strike, side:"long"|"short", qty, entryPrice, iv }
|
||||
* ]
|
||||
* baskets: {
|
||||
* "SPY": { spotSnapshot: 738.18, legs: [ ...legs ] },
|
||||
* "AAPL": { spotSnapshot: 0, legs: [ ...legs ] }
|
||||
* }
|
||||
* }
|
||||
* leg = { id, symbol, expiry:"YYYY-MM-DD", type:"call"|"put", strike, side:"long"|"short",
|
||||
* qty, entryPrice, iv, locked:bool, currentMark:number|null }
|
||||
*
|
||||
* `load()` returns the *active* basket in a flat back-compat shape, plus a
|
||||
* `symbols` array of all symbols that currently have legs.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const KEY = "optionsPricer:strategy";
|
||||
const VERSION = 1;
|
||||
const VERSION = 2;
|
||||
const MULTIPLIER = 100; // standard equity option contract size
|
||||
|
||||
/** Round a price to 2 decimals (kills float artifacts like 15.000000001). */
|
||||
@@ -27,72 +31,145 @@
|
||||
return Number.isFinite(n) ? Math.round(n * 100) / 100 : 0;
|
||||
}
|
||||
|
||||
function empty() {
|
||||
return { v: VERSION, symbol: "", spotSnapshot: 0, updatedAt: null, legs: [] };
|
||||
}
|
||||
function emptyDoc() { return { v: VERSION, active: "", updatedAt: null, baskets: {} }; }
|
||||
|
||||
function load() {
|
||||
try {
|
||||
const raw = localStorage.getItem(KEY);
|
||||
if (!raw) return empty();
|
||||
const obj = JSON.parse(raw);
|
||||
if (!obj || obj.v !== VERSION || !Array.isArray(obj.legs)) return empty();
|
||||
// sanitize: drop legs with no usable strike / type; round prices to 2dp (self-heal)
|
||||
obj.legs = obj.legs
|
||||
function sanitizeLegs(legs) {
|
||||
if (!Array.isArray(legs)) return [];
|
||||
return legs
|
||||
.filter((l) => l && Number.isFinite(Number(l.strike)) && (l.type === "call" || l.type === "put"))
|
||||
.map((l) => ({
|
||||
...l,
|
||||
strike: round2(l.strike),
|
||||
entryPrice: round2(l.entryPrice),
|
||||
currentMark: (typeof l.currentMark === "number" ? round2(l.currentMark) : (l.currentMark ?? null)),
|
||||
currentMark: typeof l.currentMark === "number" ? round2(l.currentMark) : (l.currentMark ?? null),
|
||||
locked: l.locked === true,
|
||||
}));
|
||||
return obj;
|
||||
} catch {
|
||||
return empty();
|
||||
}
|
||||
}
|
||||
|
||||
function save(state) {
|
||||
const s = state || empty();
|
||||
s.v = VERSION;
|
||||
s.updatedAt = new Date().toISOString();
|
||||
function loadDoc() {
|
||||
try {
|
||||
localStorage.setItem(KEY, JSON.stringify(s));
|
||||
} catch (e) {
|
||||
console.warn("[StrategyStore] save failed:", e);
|
||||
const raw = localStorage.getItem(KEY);
|
||||
if (!raw) return emptyDoc();
|
||||
const obj = JSON.parse(raw);
|
||||
if (!obj || typeof obj !== "object") return emptyDoc();
|
||||
|
||||
// migrate v1 (single basket) -> v2
|
||||
if (obj.v === 1 && Array.isArray(obj.legs)) {
|
||||
const doc = emptyDoc();
|
||||
const sym = obj.symbol || "";
|
||||
const legs = sanitizeLegs(obj.legs);
|
||||
if (sym && legs.length) {
|
||||
doc.baskets[sym] = { spotSnapshot: Number(obj.spotSnapshot) || 0, legs };
|
||||
doc.active = sym;
|
||||
}
|
||||
return s;
|
||||
return doc;
|
||||
}
|
||||
|
||||
if (obj.v !== VERSION || !obj.baskets || typeof obj.baskets !== "object") return emptyDoc();
|
||||
|
||||
const doc = emptyDoc();
|
||||
for (const sym of Object.keys(obj.baskets)) {
|
||||
const b = obj.baskets[sym] || {};
|
||||
const legs = sanitizeLegs(b.legs);
|
||||
if (legs.length) doc.baskets[sym] = { spotSnapshot: Number(b.spotSnapshot) || 0, legs };
|
||||
}
|
||||
doc.active = obj.active && doc.baskets[obj.active] ? obj.active : (Object.keys(doc.baskets)[0] || "");
|
||||
doc.updatedAt = obj.updatedAt || null;
|
||||
return doc;
|
||||
} catch {
|
||||
return emptyDoc();
|
||||
}
|
||||
}
|
||||
|
||||
function saveDoc(doc) {
|
||||
doc.v = VERSION;
|
||||
// drop empty baskets
|
||||
for (const sym of Object.keys(doc.baskets)) {
|
||||
const b = doc.baskets[sym];
|
||||
if (!b || !Array.isArray(b.legs) || b.legs.length === 0) delete doc.baskets[sym];
|
||||
}
|
||||
if (!doc.baskets[doc.active]) doc.active = Object.keys(doc.baskets)[0] || "";
|
||||
doc.updatedAt = new Date().toISOString();
|
||||
try { localStorage.setItem(KEY, JSON.stringify(doc)); }
|
||||
catch (e) { console.warn("[StrategyStore] save failed:", e); }
|
||||
}
|
||||
|
||||
// ---- active-basket view (flat, back-compat) -----------------------------
|
||||
function load() {
|
||||
const doc = loadDoc();
|
||||
const sym = doc.active;
|
||||
const b = (sym && doc.baskets[sym]) || { spotSnapshot: 0, legs: [] };
|
||||
return {
|
||||
v: VERSION,
|
||||
symbol: sym || "",
|
||||
spotSnapshot: b.spotSnapshot || 0,
|
||||
updatedAt: doc.updatedAt,
|
||||
legs: (b.legs || []).map((l) => ({ ...l })),
|
||||
symbols: Object.keys(doc.baskets),
|
||||
};
|
||||
}
|
||||
|
||||
/** Write a flat {symbol, spotSnapshot, legs} state back into that symbol's basket. */
|
||||
function save(state) {
|
||||
const doc = loadDoc();
|
||||
const sym = state && state.symbol;
|
||||
if (sym) {
|
||||
const legs = sanitizeLegs(state.legs);
|
||||
if (legs.length) {
|
||||
doc.baskets[sym] = { spotSnapshot: Number(state.spotSnapshot) || 0, legs };
|
||||
doc.active = sym;
|
||||
} else {
|
||||
delete doc.baskets[sym];
|
||||
if (doc.active === sym) doc.active = Object.keys(doc.baskets)[0] || "";
|
||||
}
|
||||
}
|
||||
saveDoc(doc);
|
||||
return load();
|
||||
}
|
||||
|
||||
/** Clear the ACTIVE basket only. */
|
||||
function clear() {
|
||||
try { localStorage.removeItem(KEY); } catch {}
|
||||
return empty();
|
||||
const doc = loadDoc();
|
||||
if (doc.active) {
|
||||
delete doc.baskets[doc.active];
|
||||
doc.active = Object.keys(doc.baskets)[0] || "";
|
||||
}
|
||||
saveDoc(doc);
|
||||
return load();
|
||||
}
|
||||
|
||||
/** Wipe every basket. */
|
||||
function clearAll() {
|
||||
try { localStorage.removeItem(KEY); } catch {}
|
||||
return load();
|
||||
}
|
||||
|
||||
function listSymbols() { return Object.keys(loadDoc().baskets); }
|
||||
|
||||
function setActive(symbol) {
|
||||
const doc = loadDoc();
|
||||
if (!symbol) return load();
|
||||
if (!doc.baskets[symbol]) doc.baskets[symbol] = { spotSnapshot: 0, legs: [] };
|
||||
doc.active = symbol;
|
||||
saveDoc(doc);
|
||||
return load();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a leg. `leg` should provide: symbol, expiry, type, strike, side, qty, entryPrice, iv.
|
||||
* Returns { state, replacedSymbol } — replacedSymbol is the old symbol if the basket
|
||||
* was wiped due to a symbol mismatch (caller should have confirmed first via mismatch()).
|
||||
*/
|
||||
function addLeg(leg) {
|
||||
const strike = Number(leg && leg.strike);
|
||||
if (!Number.isFinite(strike) || strike <= 0) {
|
||||
console.warn("[StrategyStore] addLeg: invalid strike", leg);
|
||||
return { state: load(), replacedSymbol: null };
|
||||
return { state: load() };
|
||||
}
|
||||
let state = load();
|
||||
let replacedSymbol = null;
|
||||
if (state.legs.length > 0 && state.symbol && leg.symbol && state.symbol !== leg.symbol) {
|
||||
replacedSymbol = state.symbol;
|
||||
state = empty();
|
||||
}
|
||||
state.symbol = leg.symbol || state.symbol || "";
|
||||
const doc = loadDoc();
|
||||
const sym = leg.symbol || doc.active || "MANUAL";
|
||||
if (!doc.baskets[sym]) doc.baskets[sym] = { spotSnapshot: 0, legs: [] };
|
||||
if (typeof leg.spotSnapshot === "number" && leg.spotSnapshot > 0) {
|
||||
state.spotSnapshot = leg.spotSnapshot;
|
||||
doc.baskets[sym].spotSnapshot = leg.spotSnapshot;
|
||||
}
|
||||
state.legs.push({
|
||||
id: ((typeof crypto !== "undefined" && crypto.randomUUID) ? crypto.randomUUID() : "id-" + Date.now() + "-" + Math.random().toString(36).slice(2)),
|
||||
symbol: leg.symbol || state.symbol,
|
||||
doc.baskets[sym].legs.push({
|
||||
id: (typeof crypto !== "undefined" && crypto.randomUUID) ? crypto.randomUUID() : "id-" + Date.now() + "-" + Math.random().toString(36).slice(2),
|
||||
symbol: sym,
|
||||
expiry: leg.expiry,
|
||||
type: leg.type,
|
||||
strike: round2(strike),
|
||||
@@ -101,23 +178,39 @@
|
||||
entryPrice: round2(leg.entryPrice),
|
||||
iv: Number(leg.iv) || 0,
|
||||
locked: leg.locked === true,
|
||||
currentMark: (typeof leg.currentMark === "number" ? round2(leg.currentMark) : null),
|
||||
currentMark: typeof leg.currentMark === "number" ? round2(leg.currentMark) : null,
|
||||
});
|
||||
save(state);
|
||||
return { state, replacedSymbol };
|
||||
doc.active = sym;
|
||||
saveDoc(doc);
|
||||
return { state: load() };
|
||||
}
|
||||
|
||||
function basketOf(doc, id) {
|
||||
for (const sym of Object.keys(doc.baskets)) {
|
||||
if (doc.baskets[sym].legs.some((l) => l.id === id)) return sym;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function removeLeg(id) {
|
||||
const state = load();
|
||||
state.legs = state.legs.filter((l) => l.id !== id);
|
||||
if (state.legs.length === 0) { return clear(); }
|
||||
save(state);
|
||||
return state;
|
||||
const doc = loadDoc();
|
||||
const sym = basketOf(doc, id);
|
||||
if (sym) {
|
||||
doc.baskets[sym].legs = doc.baskets[sym].legs.filter((l) => l.id !== id);
|
||||
if (doc.baskets[sym].legs.length === 0) {
|
||||
delete doc.baskets[sym];
|
||||
if (doc.active === sym) doc.active = Object.keys(doc.baskets)[0] || "";
|
||||
}
|
||||
}
|
||||
saveDoc(doc);
|
||||
return load();
|
||||
}
|
||||
|
||||
function updateLeg(id, patch) {
|
||||
const state = load();
|
||||
const leg = state.legs.find((l) => l.id === id);
|
||||
const doc = loadDoc();
|
||||
const sym = basketOf(doc, id);
|
||||
if (sym) {
|
||||
const leg = doc.baskets[sym].legs.find((l) => l.id === id);
|
||||
if (leg) {
|
||||
const p = { ...patch };
|
||||
if ("entryPrice" in p) p.entryPrice = round2(p.entryPrice);
|
||||
@@ -125,24 +218,24 @@
|
||||
if ("strike" in p) p.strike = round2(p.strike);
|
||||
Object.assign(leg, p);
|
||||
}
|
||||
save(state);
|
||||
return state;
|
||||
}
|
||||
saveDoc(doc);
|
||||
return load();
|
||||
}
|
||||
|
||||
/** True if adding a leg of `symbol` would wipe an existing different-symbol basket. */
|
||||
function mismatch(symbol) {
|
||||
const state = load();
|
||||
return state.legs.length > 0 && state.symbol && symbol && state.symbol !== symbol
|
||||
? state.symbol
|
||||
: null;
|
||||
}
|
||||
/** multi-basket: adding a different symbol no longer wipes anything. */
|
||||
function mismatch() { return null; }
|
||||
|
||||
/** legs in the active basket. */
|
||||
function count() {
|
||||
return load().legs.length;
|
||||
const doc = loadDoc();
|
||||
const b = doc.baskets[doc.active];
|
||||
return b ? b.legs.length : 0;
|
||||
}
|
||||
|
||||
window.StrategyStore = {
|
||||
KEY, VERSION, MULTIPLIER,
|
||||
empty, load, save, clear, addLeg, removeLeg, updateLeg, mismatch, count,
|
||||
empty: () => ({ v: VERSION, symbol: "", spotSnapshot: 0, updatedAt: null, legs: [], symbols: [] }),
|
||||
load, save, clear, clearAll, addLeg, removeLeg, updateLeg, mismatch, count, listSymbols, setActive,
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -55,13 +55,20 @@
|
||||
<div class="page-header d-print-none">
|
||||
<div class="container-xl">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-auto" x-show="symbols.length > 1" x-cloak>
|
||||
<label class="form-label text-secondary mb-1" for="symPicker">Strategy</label>
|
||||
<select id="symPicker" class="form-select form-select-sm fw-bold" style="min-width:7rem" :value="symbol" @change="switchSymbol($event.target.value)" aria-label="Pick strategy symbol">
|
||||
<template x-for="s in symbols" :key="s"><option :value="s" x-text="s"></option></template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2 class="page-title">Strategy P/L Analyzer</h2>
|
||||
<div class="text-secondary mt-1" x-show="legs.length > 0" x-cloak>
|
||||
<span class="badge bg-purple-lt fs-6 me-2" x-text="strategyName"></span>
|
||||
<span x-text="symbol"></span> ·
|
||||
<span x-show="symbols.length <= 1" x-text="symbol"></span><span x-show="symbols.length <= 1"> · </span>
|
||||
<span x-text="legs.length + ' leg' + (legs.length===1?'':'s')"></span> ·
|
||||
Spot <strong class="mono" x-text="spot > 0 ? '$'+spot.toFixed(2) : '—'"></strong>
|
||||
<span x-show="symbols.length > 1" class="ms-2 text-secondary" x-text="'(' + symbols.length + ' symbols saved)'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto" x-show="legs.length > 0" x-cloak>
|
||||
@@ -291,7 +298,7 @@
|
||||
function strategyApp() {
|
||||
return {
|
||||
// state
|
||||
symbol: '', spot: 0, legs: [],
|
||||
symbol: '', symbols: [], spot: 0, legs: [],
|
||||
dteOffset: 0,
|
||||
refreshing: false, showManual: false, toast: '',
|
||||
manual: { side:'long', type:'call', qty:1, strike:null, expiry:'', entryPrice:null, ivPct:null },
|
||||
@@ -308,10 +315,19 @@
|
||||
reload() {
|
||||
const st = StrategyStore.load();
|
||||
this.symbol = st.symbol || '';
|
||||
this.symbols = st.symbols || [];
|
||||
this.spot = st.spotSnapshot || 0;
|
||||
this.legs = st.legs || [];
|
||||
if (this.dteOffset > this.maxDTE) this.dteOffset = this.maxDTE;
|
||||
if (this.legs.length > 0) this.$nextTick(() => this.renderChart());
|
||||
if (this.legs.length > 0) this.$nextTick(() => this.renderChart()); else if (this.chart) this.chart.updateSeries([{name:'P/L',data:[]},{name:'P/L',data:[]}]);
|
||||
},
|
||||
|
||||
switchSymbol(sym) {
|
||||
if (!sym || sym === this.symbol) return;
|
||||
StrategyStore.setActive(sym);
|
||||
this.dteOffset = 0;
|
||||
this.reload();
|
||||
if (this.legs.length > 0) this.reloadMarket(false);
|
||||
},
|
||||
|
||||
// ── derived ───────────────────────────────────────────
|
||||
@@ -421,10 +437,11 @@
|
||||
this.reload();
|
||||
},
|
||||
clearAll() {
|
||||
if (!confirm('Clear all legs?')) return;
|
||||
if (!confirm('Clear all ' + (this.symbol || '') + ' legs?')) return;
|
||||
StrategyStore.clear();
|
||||
this.reload();
|
||||
this.dteOffset = 0;
|
||||
if (this.chart) { this.chart.destroy(); this.chart = null; }
|
||||
this.reload(); // re-renders the chart if another symbol's basket is now active
|
||||
},
|
||||
addManualLeg() {
|
||||
const m = this.manual;
|
||||
|
||||
Reference in New Issue
Block a user