Position History: outcome donut with click-to-filter

[heyitsStylez]

Parent

PRD #34

What to build

Add an outcome-distribution donut to the Position History section that doubles as the outcome filter. Above the threshold of ≥ 10 settled trades (outcome ≠ OPEN), the donut replaces the existing outcome filter pills. Each slice (EXPIRED / ASSIGNED / CALLED / CLOSED) both shows its share and acts as the filter toggle — clicking a slice invokes the existing setHistOutcome setter.

Includes a new pure helper outcomeDistribution(trades, assetFilter) → [{outcome, count, premium}] that prepares the donut's data and is unit-tested in isolation. Donut respects the active asset-filter chips above the hero. Donut does NOT respect the From/To date pickers in the history section header.

Below 10 settled trades, the existing pills render as today.

Acceptance criteria

• New pure helper outcomeDistribution(trades, assetFilter) lives in its own numbered file under src/js/, dual-exported (browser global + Node module.exports)
• Helper excludes OPEN trades and orders results EXPIRED / ASSIGNED / CALLED / CLOSED
• Helper subtracts closeCost from premium for CLOSED outcomes (cash-flow lens convention)
• At ≥ 10 settled trades: donut renders in place of the outcome pills
• Below 10 settled trades: existing outcome pills render unchanged
• Hover tooltip on a slice shows <OUTCOME> — N trades, $X total premium
• Clicking a slice toggles that outcome's filter via setHistOutcome and re-renders the table
• Clicking the active slice clears the filter (idempotent toggle)
• Active slice is opaque + outlined; inactive slices are dimmed
• Donut respects the active asset-filter chips
• Donut does NOT respect the From/To date pickers
• Donut uses CSS variables only (no hardcoded colours)
• Unit tests in test/unit/outcome-distribution.test.js cover: empty trades, OPEN-only, one trade per outcome, multiple trades per outcome, asset filter applied, CLOSED outcome closeCost handling
• Integration tests in test/integration/donut-filter.test.js cover: donut renders above threshold (pills hidden), pills render below threshold (donut hidden), slice click filters table, second click on active slice clears filter, asset-filter chip changes the donut data
• python3 build.py --check passes
• npm test passes

Blocked by

None - can start immediately

[heyitsStylez]

Implementation in PR #44.

Design pivot: the spec called for a donut, but on a wide row a 160px donut felt too small and left-anchored. After mocking 8 layout variations and 5 chart-type alternatives, settled on a horizontal treemap — full-width row, four cells sized by trade count, with outcome / count / premium inline in each cell (no tooltip needed for the basics). Click-to-filter behaviour is unchanged from the spec.

All acceptance criteria still met (helper, threshold, ordering, CLOSED closeCost, asset-filter respect, date-pickers ignored, CSS-vars-only, unit + integration tests). Original outcomeDistribution(trades, assetFilter) helper unchanged — only the renderer differs.