Outcome
diff --git a/src/js/05c-outcome-distribution.js b/src/js/05c-outcome-distribution.js
new file mode 100644
index 0000000..70937fb
--- /dev/null
+++ b/src/js/05c-outcome-distribution.js
@@ -0,0 +1,31 @@
+// ── OUTCOME DISTRIBUTION ──────────────────────────────────────
+// Pure helper: aggregates settled trades by outcome for the
+// Position History donut. Excludes OPEN. Cash-flow lens: CLOSED
+// premium is netted by closeCost.
+//
+// Returns [{outcome, count, premium}] in canonical order
+// EXPIRED, ASSIGNED, CALLED, CLOSED. Outcomes with zero trades
+// are omitted.
+
+const _OUTCOME_ORDER = ['EXPIRED', 'ASSIGNED', 'CALLED', 'CLOSED'];
+
+function outcomeDistribution(trades, assetFilter) {
+ const filtered = (assetFilter && assetFilter !== 'ALL')
+ ? trades.filter(t => t.asset === assetFilter)
+ : trades;
+
+ const acc = {};
+ filtered.forEach(t => {
+ if (!_OUTCOME_ORDER.includes(t.outcome)) return;
+ const netPrem = (t.premium || 0) - (t.closeCost || 0);
+ const slot = acc[t.outcome] || (acc[t.outcome] = { outcome: t.outcome, count: 0, premium: 0 });
+ slot.count += 1;
+ slot.premium += netPrem;
+ });
+
+ return _OUTCOME_ORDER.filter(o => acc[o]).map(o => acc[o]);
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = { outcomeDistribution };
+}
diff --git a/src/js/06a-render-outcome-chart.js b/src/js/06a-render-outcome-chart.js
new file mode 100644
index 0000000..7978b12
--- /dev/null
+++ b/src/js/06a-render-outcome-chart.js
@@ -0,0 +1,73 @@
+// ── HISTORY OUTCOME CHART (TREEMAP) ───────────────────────────
+// Renders a horizontal treemap of settled-outcome distribution
+// above the Position History table when there are >= 10 settled
+// trades (excluding OPEN). Below threshold the existing pills
+// remain. Each cell toggles the outcome filter via setHistOutcome.
+
+const _OUTCHART_THRESHOLD = 10;
+const _OUTCHART_COLORS = {
+ EXPIRED: 'var(--green)',
+ ASSIGNED: 'var(--red)',
+ CALLED: 'var(--orange)',
+ CLOSED: 'var(--blue)',
+};
+
+function rOutcomeChart() {
+ const wrap = document.getElementById('hist-outchart');
+ const pills = document.getElementById('hist-pills');
+ if (!wrap || !pills) return;
+
+ const dist = outcomeDistribution(trades, sFilter);
+ const total = dist.reduce((s, d) => s + d.count, 0);
+
+ if (total < _OUTCHART_THRESHOLD) {
+ wrap.style.display = 'none';
+ wrap.innerHTML = '';
+ pills.style.display = '';
+ return;
+ }
+ pills.style.display = 'none';
+ wrap.style.display = '';
+
+ const active = sHistOutcome && sHistOutcome !== 'ALL' ? sHistOutcome : null;
+
+ let cellsHtml = '';
+ dist.forEach(d => {
+ let cls = 'outchart-cell';
+ if (active === d.outcome) cls += ' active';
+ else if (active) cls += ' dim';
+ const premStr = '$' + fmt(d.premium);
+ cellsHtml += '
'
+ + '' + d.outcome + ''
+ + '' + d.count + ''
+ + '' + premStr + ''
+ + '
';
+ });
+
+ wrap.innerHTML = '
'
+ + 'Outcome distribution'
+ + '' + total + ' settled · click a cell to filter'
+ + '
'
+ + '
' + cellsHtml + '
'
+ + '
';
+
+ const tip = document.getElementById('outchart-tip');
+ wrap.querySelectorAll('.outchart-cell').forEach(el => {
+ const o = el.getAttribute('data-outcome');
+ const d = dist.find(x => x.outcome === o);
+ el.addEventListener('click', () => {
+ setHistOutcome(sHistOutcome === o ? 'ALL' : o);
+ });
+ el.addEventListener('mousemove', e => {
+ if (!d || !tip) return;
+ tip.style.display = 'block';
+ tip.style.left = (e.clientX + 12) + 'px';
+ tip.style.top = (e.clientY + 12) + 'px';
+ tip.textContent = o + ' — ' + d.count + ' trade' + (d.count === 1 ? '' : 's')
+ + ', $' + fmt(d.premium) + ' total premium';
+ });
+ el.addEventListener('mouseleave', () => { if (tip) tip.style.display = 'none'; });
+ });
+}
diff --git a/src/js/08-render.js b/src/js/08-render.js
index ef29e8a..db53f4f 100644
--- a/src/js/08-render.js
+++ b/src/js/08-render.js
@@ -3,5 +3,6 @@ function render() {
const { streams, lots, allRows, displayRows } = compute(sFilter);
rStats(streams, lots, displayRows);
rTable(displayRows, streams, lots);
+ rOutcomeChart();
rCharts(displayRows, lots);
}
diff --git a/test/integration/outcome-chart-filter.test.js b/test/integration/outcome-chart-filter.test.js
new file mode 100644
index 0000000..7d30c23
--- /dev/null
+++ b/test/integration/outcome-chart-filter.test.js
@@ -0,0 +1,111 @@
+const test = require('node:test');
+const assert = require('node:assert');
+const { setupJsdom } = require('../helpers/setupJsdom');
+
+function settled(id, outcome, asset = 'BTC') {
+ return {
+ id,
+ asset,
+ type: outcome === 'CALLED' || outcome === 'CLOSED' ? 'CALL' : 'PUT',
+ date: '2026-01-' + String((id % 27) + 1).padStart(2, '0'),
+ expiry: '2026-02-' + String((id % 27) + 1).padStart(2, '0'),
+ dte: 21,
+ strike: 50000,
+ size: 0.05,
+ premium: 100,
+ outcome,
+ closeCost: 0,
+ platform: 'RYSK',
+ };
+}
+
+function makeSettledSet(n, outcome = 'EXPIRED', asset = 'BTC') {
+ const out = [];
+ for (let i = 0; i < n; i++) out.push(settled(1000 + i, outcome, asset));
+ return out;
+}
+
+test('chart hidden + pills shown when < 10 settled trades', (t) => {
+ const trades = makeSettledSet(5, 'EXPIRED');
+ const { window, teardown } = setupJsdom({ trades });
+ t.after(teardown);
+
+ const chart = window.document.getElementById('hist-outchart');
+ const pills = window.document.getElementById('hist-pills');
+ assert.strictEqual(chart.style.display, 'none', 'chart should be hidden');
+ assert.notStrictEqual(pills.style.display, 'none', 'pills should be visible');
+ assert.strictEqual(chart.querySelectorAll('.outchart-cell').length, 0);
+});
+
+test('chart shown + pills hidden when >= 10 settled trades', (t) => {
+ const trades = [
+ ...makeSettledSet(7, 'EXPIRED'),
+ ...makeSettledSet(3, 'CALLED'),
+ ];
+ const { window, teardown } = setupJsdom({ trades });
+ t.after(teardown);
+
+ const chart = window.document.getElementById('hist-outchart');
+ const pills = window.document.getElementById('hist-pills');
+ assert.notStrictEqual(chart.style.display, 'none', 'chart should be visible');
+ assert.strictEqual(pills.style.display, 'none', 'pills should be hidden');
+ const cells = chart.querySelectorAll('.outchart-cell');
+ assert.strictEqual(cells.length, 2, 'two outcomes → two cells');
+});
+
+test('clicking a cell filters the history table to that outcome', (t) => {
+ const trades = [
+ ...makeSettledSet(7, 'EXPIRED'),
+ ...makeSettledSet(3, 'CALLED'),
+ ];
+ const { window, teardown } = setupJsdom({ trades });
+ t.after(teardown);
+
+ const cells = window.document.querySelectorAll('#hist-outchart .outchart-cell');
+ const expiredCell = [...cells].find(c => c.getAttribute('data-outcome') === 'EXPIRED');
+ expiredCell.dispatchEvent(new window.Event('click', { bubbles: true }));
+
+ assert.ok(window.document.getElementById('ho-EXPIRED').classList.contains('active'));
+ const histRows = window.document.querySelectorAll('#ttbody-hist tr');
+ assert.strictEqual(histRows.length, 7);
+});
+
+test('clicking the active cell clears the filter (idempotent toggle)', (t) => {
+ const trades = [
+ ...makeSettledSet(7, 'EXPIRED'),
+ ...makeSettledSet(3, 'CALLED'),
+ ];
+ const { window, teardown } = setupJsdom({ trades });
+ t.after(teardown);
+
+ const getExpired = () => [...window.document.querySelectorAll('#hist-outchart .outchart-cell')]
+ .find(c => c.getAttribute('data-outcome') === 'EXPIRED');
+
+ getExpired().dispatchEvent(new window.Event('click', { bubbles: true }));
+ assert.ok(window.document.getElementById('ho-EXPIRED').classList.contains('active'));
+
+ getExpired().dispatchEvent(new window.Event('click', { bubbles: true }));
+ assert.ok(window.document.getElementById('ho-ALL').classList.contains('active'));
+ const histRows = window.document.querySelectorAll('#ttbody-hist tr');
+ assert.strictEqual(histRows.length, 10, 'all 10 settled rows back in history');
+});
+
+test('asset filter chip changes the chart data', (t) => {
+ const trades = [
+ ...makeSettledSet(7, 'EXPIRED', 'BTC'),
+ ...makeSettledSet(5, 'ASSIGNED', 'ETH'),
+ ];
+ const { window, teardown } = setupJsdom({ trades });
+ t.after(teardown);
+
+ let cells = window.document.querySelectorAll('#hist-outchart .outchart-cell');
+ assert.strictEqual(cells.length, 2);
+
+ window.setFilter('BTC');
+ let chart = window.document.getElementById('hist-outchart');
+ assert.strictEqual(chart.style.display, 'none', 'BTC alone is < 10 settled');
+
+ window.setFilter('ETH');
+ chart = window.document.getElementById('hist-outchart');
+ assert.strictEqual(chart.style.display, 'none', 'ETH alone is < 10 settled');
+});
diff --git a/test/unit/outcome-distribution.test.js b/test/unit/outcome-distribution.test.js
new file mode 100644
index 0000000..903b9f5
--- /dev/null
+++ b/test/unit/outcome-distribution.test.js
@@ -0,0 +1,80 @@
+const test = require('node:test');
+const assert = require('node:assert');
+const { outcomeDistribution } = require('../../src/js/05c-outcome-distribution.js');
+
+test('empty trades → empty array', () => {
+ assert.deepStrictEqual(outcomeDistribution([]), []);
+});
+
+test('OPEN-only trades → empty array', () => {
+ const trades = [
+ { id: 1, asset: 'BTC', type: 'PUT', outcome: 'OPEN', premium: 100, closeCost: 0 },
+ { id: 2, asset: 'ETH', type: 'CALL', outcome: 'OPEN', premium: 50, closeCost: 0 },
+ ];
+ assert.deepStrictEqual(outcomeDistribution(trades), []);
+});
+
+test('one trade per outcome → all four entries in canonical order', () => {
+ const trades = [
+ { id: 4, asset: 'BTC', type: 'CALL', outcome: 'CLOSED', premium: 100, closeCost: 30 },
+ { id: 3, asset: 'BTC', type: 'CALL', outcome: 'CALLED', premium: 80, closeCost: 0 },
+ { id: 1, asset: 'BTC', type: 'PUT', outcome: 'EXPIRED', premium: 50, closeCost: 0 },
+ { id: 2, asset: 'BTC', type: 'PUT', outcome: 'ASSIGNED',premium: 60, closeCost: 0 },
+ ];
+ const dist = outcomeDistribution(trades);
+ assert.deepStrictEqual(dist.map(d => d.outcome), ['EXPIRED', 'ASSIGNED', 'CALLED', 'CLOSED']);
+ assert.deepStrictEqual(dist.map(d => d.count), [1, 1, 1, 1]);
+ assert.deepStrictEqual(dist.map(d => d.premium), [50, 60, 80, 70]); // CLOSED: 100 - 30
+});
+
+test('multiple trades per outcome → counts and premium summed', () => {
+ const trades = [
+ { id: 1, asset: 'BTC', type: 'PUT', outcome: 'EXPIRED', premium: 50, closeCost: 0 },
+ { id: 2, asset: 'BTC', type: 'PUT', outcome: 'EXPIRED', premium: 70, closeCost: 0 },
+ { id: 3, asset: 'BTC', type: 'CALL', outcome: 'CALLED', premium: 80, closeCost: 0 },
+ ];
+ const dist = outcomeDistribution(trades);
+ assert.strictEqual(dist.find(d => d.outcome === 'EXPIRED').count, 2);
+ assert.strictEqual(dist.find(d => d.outcome === 'EXPIRED').premium, 120);
+ assert.strictEqual(dist.find(d => d.outcome === 'CALLED').count, 1);
+});
+
+test('asset filter applied → only matching asset trades counted', () => {
+ const trades = [
+ { id: 1, asset: 'BTC', type: 'PUT', outcome: 'EXPIRED', premium: 100, closeCost: 0 },
+ { id: 2, asset: 'ETH', type: 'PUT', outcome: 'EXPIRED', premium: 200, closeCost: 0 },
+ { id: 3, asset: 'ETH', type: 'PUT', outcome: 'ASSIGNED', premium: 50, closeCost: 0 },
+ ];
+ const dist = outcomeDistribution(trades, 'ETH');
+ assert.strictEqual(dist.find(d => d.outcome === 'EXPIRED').premium, 200);
+ assert.strictEqual(dist.find(d => d.outcome === 'EXPIRED').count, 1);
+ assert.strictEqual(dist.find(d => d.outcome === 'ASSIGNED').count, 1);
+});
+
+test('CLOSED outcome subtracts closeCost from premium', () => {
+ const trades = [
+ { id: 1, asset: 'BTC', type: 'CALL', outcome: 'CLOSED', premium: 200, closeCost: 75 },
+ { id: 2, asset: 'BTC', type: 'CALL', outcome: 'CLOSED', premium: 100, closeCost: 120 },
+ ];
+ const dist = outcomeDistribution(trades);
+ const closed = dist.find(d => d.outcome === 'CLOSED');
+ assert.strictEqual(closed.count, 2);
+ assert.strictEqual(closed.premium, 200 - 75 + 100 - 120); // 105
+});
+
+test('outcomes with zero count are omitted from result', () => {
+ const trades = [
+ { id: 1, asset: 'BTC', type: 'PUT', outcome: 'EXPIRED', premium: 50, closeCost: 0 },
+ ];
+ const dist = outcomeDistribution(trades);
+ assert.strictEqual(dist.length, 1);
+ assert.strictEqual(dist[0].outcome, 'EXPIRED');
+});
+
+test('asset filter "ALL" treated same as no filter', () => {
+ const trades = [
+ { id: 1, asset: 'BTC', type: 'PUT', outcome: 'EXPIRED', premium: 50, closeCost: 0 },
+ { id: 2, asset: 'ETH', type: 'PUT', outcome: 'EXPIRED', premium: 70, closeCost: 0 },
+ ];
+ assert.strictEqual(outcomeDistribution(trades, 'ALL').find(d => d.outcome === 'EXPIRED').count, 2);
+});