// Stocks page — Sector clouds with ticker chips + index summary // StocksPage & WatchlistPage both live here // ── Watchlist storage ───────────────────────────────────────────────────────── const WL_KEY = 'jastocks-watchlist'; function loadWatchlist() { try { return JSON.parse(localStorage.getItem(WL_KEY) || '[]'); } catch { return []; } } function saveWatchlist(list) { localStorage.setItem(WL_KEY, JSON.stringify(list)); } // ── Portfolio storage (re-use existing key) ─────────────────────────────────── const PF_KEY = 'jastocks-manual-portfolio'; function loadPortfolio() { try { return JSON.parse(localStorage.getItem(PF_KEY) || '[]'); } catch { return []; } } function savePortfolio(list) { localStorage.setItem(PF_KEY, JSON.stringify(list)); } // ── Sector colour map (matches api.js SECTOR_COLORS) ───────────────────────── const SECTOR_PALETTE = { 'Financials': { bg: 'oklch(0.72 0.14 240 / 0.13)', border: 'oklch(0.72 0.14 240 / 0.35)', text: 'oklch(0.82 0.14 240)', header: 'oklch(0.72 0.14 240)' }, 'Consumer': { bg: 'oklch(0.75 0.14 145 / 0.13)', border: 'oklch(0.75 0.14 145 / 0.35)', text: 'oklch(0.85 0.14 145)', header: 'oklch(0.75 0.14 145)' }, 'Conglomerate': { bg: 'oklch(0.75 0.16 290 / 0.13)', border: 'oklch(0.75 0.16 290 / 0.35)', text: 'oklch(0.85 0.16 290)', header: 'oklch(0.75 0.16 290)' }, 'Insurance': { bg: 'oklch(0.78 0.14 200 / 0.13)', border: 'oklch(0.78 0.14 200 / 0.35)', text: 'oklch(0.88 0.14 200)', header: 'oklch(0.78 0.14 200)' }, 'Real Estate': { bg: 'oklch(0.75 0.15 75 / 0.13)', border: 'oklch(0.75 0.15 75 / 0.35)', text: 'oklch(0.85 0.15 75)', header: 'oklch(0.75 0.15 75)' }, 'Utilities': { bg: 'oklch(0.75 0.14 30 / 0.13)', border: 'oklch(0.75 0.14 30 / 0.35)', text: 'oklch(0.85 0.14 30)', header: 'oklch(0.75 0.14 30)' }, 'Industrial': { bg: 'oklch(0.75 0.12 60 / 0.13)', border: 'oklch(0.75 0.12 60 / 0.35)', text: 'oklch(0.85 0.12 60)', header: 'oklch(0.75 0.12 60)' }, 'Logistics': { bg: 'oklch(0.78 0.14 320 / 0.13)', border: 'oklch(0.78 0.14 320 / 0.35)', text: 'oklch(0.88 0.14 320)', header: 'oklch(0.78 0.14 320)' }, 'Retail': { bg: 'oklch(0.75 0.14 170 / 0.13)', border: 'oklch(0.75 0.14 170 / 0.35)', text: 'oklch(0.85 0.14 170)', header: 'oklch(0.75 0.14 170)' }, 'Technology': { bg: 'oklch(0.75 0.16 260 / 0.13)', border: 'oklch(0.75 0.16 260 / 0.35)', text: 'oklch(0.85 0.16 260)', header: 'oklch(0.75 0.16 260)' }, 'Media': { bg: 'oklch(0.78 0.13 350 / 0.13)', border: 'oklch(0.78 0.13 350 / 0.35)', text: 'oklch(0.88 0.13 350)', header: 'oklch(0.78 0.13 350)' }, 'Healthcare': { bg: 'oklch(0.75 0.14 155 / 0.13)', border: 'oklch(0.75 0.14 155 / 0.35)', text: 'oklch(0.85 0.14 155)', header: 'oklch(0.75 0.14 155)' }, 'Education': { bg: 'oklch(0.78 0.13 45 / 0.13)', border: 'oklch(0.78 0.13 45 / 0.35)', text: 'oklch(0.88 0.13 45)', header: 'oklch(0.78 0.13 45)' }, 'Gaming': { bg: 'oklch(0.75 0.16 310 / 0.13)', border: 'oklch(0.75 0.16 310 / 0.35)', text: 'oklch(0.85 0.16 310)', header: 'oklch(0.75 0.16 310)' }, 'Entertainment': { bg: 'oklch(0.75 0.14 280 / 0.13)', border: 'oklch(0.75 0.14 280 / 0.35)', text: 'oklch(0.85 0.14 280)', header: 'oklch(0.75 0.14 280)' }, 'Infrastructure':{ bg: 'oklch(0.78 0.12 90 / 0.13)', border: 'oklch(0.78 0.12 90 / 0.35)', text: 'oklch(0.88 0.12 90)', header: 'oklch(0.78 0.12 90)' }, 'Other': { bg: 'oklch(0.6 0.04 240 / 0.10)', border: 'oklch(0.6 0.04 240 / 0.25)', text: 'oklch(0.75 0.04 240)', header: 'oklch(0.6 0.04 240)' }, }; function sectorPalette(s) { return SECTOR_PALETTE[s] || SECTOR_PALETTE['Other']; } // ── Index bar — computed from live stock data ───────────────────────────────── const IndexBar = ({ stocks }) => { const main = stocks.filter(s => s.market === 'Main'); const junior = stocks.filter(s => s.market === 'Junior'); function mktStats(arr) { const advancers = arr.filter(s => s.change > 0).length; const decliners = arr.filter(s => s.change < 0).length; const unchanged = arr.filter(s => s.change === 0).length; // Weighted average % change by price (proxy for index move) const totalPrice = arr.reduce((s, x) => s + x.price, 0); const wavg = totalPrice > 0 ? arr.reduce((s, x) => s + x.changePct * (x.price / totalPrice), 0) : 0; return { advancers, decliners, unchanged, wavg, total: arr.length }; } const ms = mktStats(main); const js = mktStats(junior); const Stat = ({ label, stat }) => (
{label}
0 ? 'var(--up)' : stat.wavg < 0 ? 'var(--down)' : 'var(--text-2)', }}> {stat.wavg >= 0 ? '+' : ''}{stat.wavg.toFixed(2)}% avg move · {stat.total} stocks
▲ {stat.advancers} ▼ {stat.decliners} — {stat.unchanged}
); return (
Index moves are weighted-average price change across all listed stocks.
Data from Stacks JSE API · refreshes every 90s
); }; // ── Ticker chip ─────────────────────────────────────────────────────────────── const TickerChip = ({ stock, palette, inPortfolio, inWatchlist, onAdd, onWatch, goTo }) => { const [hover, setHover] = React.useState(false); const up = stock.changePct > 0; const down = stock.changePct < 0; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 0, borderRadius: 8, border: `1px solid ${hover ? palette.border : 'var(--border)'}`, background: hover ? palette.bg : 'var(--bg-2)', transition: 'all 0.15s', overflow: 'hidden', cursor: 'default', }} > {/* Ticker button */} {/* + Add to portfolio button */}
); }; // ── Sector cloud card ───────────────────────────────────────────────────────── const SectorCloud = ({ sector, stocks, portfolio, watchlist, onAdd, goTo }) => { const pal = sectorPalette(sector); const sorted = [...stocks].sort((a, b) => Math.abs(b.changePct) - Math.abs(a.changePct)); const advancers = stocks.filter(s => s.changePct > 0).length; const decliners = stocks.filter(s => s.changePct < 0).length; const avgChange = stocks.length > 0 ? stocks.reduce((s, x) => s + x.changePct, 0) / stocks.length : 0; return (
{/* Header */}
{sector} {stocks.length} stocks
0 ? 'var(--up)' : avgChange < 0 ? 'var(--down)' : 'var(--text-3)', }}> {avgChange >= 0 ? '+' : ''}{avgChange.toFixed(2)}%
{/* Ticker chips cloud */}
{sorted.map(stock => ( h.sym === stock.sym)} inWatchlist={watchlist.includes(stock.sym)} onAdd={onAdd} goTo={goTo} /> ))}
{/* Footer breadth */}
▲ {advancers} up ▼ {decliners} down — {stocks.length - advancers - decliners} flat
); }; // ── Add-to-portfolio toast ──────────────────────────────────────────────────── const AddToast = ({ stock, onClose, onConfirm }) => { const [shares, setShares] = React.useState(''); const [cost, setCost] = React.useState(stock.price > 0 ? stock.price.toFixed(2) : ''); return (
{stock.sym}
{stock.name}
setShares(e.target.value)} autoFocus style={{ padding: '8px 10px', background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 7, color: 'var(--text)', fontSize: 13, fontFamily: 'Geist Mono, monospace' }} /> 0 ? stock.price.toFixed(2) : '0.00'})`} value={cost} onChange={e => setCost(e.target.value)} style={{ padding: '8px 10px', background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 7, color: 'var(--text)', fontSize: 13, fontFamily: 'Geist Mono, monospace' }} />
); }; // ── Main StocksPage ─────────────────────────────────────────────────────────── window.StocksPage = ({ currency, goTo, setPage, setSelectedStock }) => { const { stocks, bySym } = window.JASTOCKS_DATA; const [portfolio, setPortfolio] = React.useState(() => loadPortfolio()); const [watchlist, setWatchlist] = React.useState(() => loadWatchlist()); const [addingStock, setAddingStock] = React.useState(null); const [filterMarket, setFilterMarket] = React.useState('all'); // 'all' | 'Main' | 'Junior' const [search, setSearch] = React.useState(''); const [toast, setToast] = React.useState(null); // { message } // Filter stocks const filtered = React.useMemo(() => { let s = stocks; if (filterMarket !== 'all') s = s.filter(x => x.market === filterMarket); if (search.trim()) { const q = search.trim().toUpperCase(); s = s.filter(x => x.sym.includes(q) || x.name.toUpperCase().includes(q)); } return s; }, [stocks, filterMarket, search]); // Group by sector const sectors = React.useMemo(() => { const map = {}; filtered.forEach(s => { if (!map[s.sector]) map[s.sector] = []; map[s.sector].push(s); }); // Sort sectors: by total stocks descending, with 'Other' always last return Object.entries(map) .sort(([a, as], [b, bs]) => { if (a === 'Other') return 1; if (b === 'Other') return -1; return bs.length - as.length; }); }, [filtered]); const handleAdd = (stock) => { // If already in portfolio, just show a quick toast if (portfolio.some(h => h.sym === stock.sym)) { setToast(`${stock.sym} is already in your portfolio`); setTimeout(() => setToast(null), 2500); return; } setAddingStock(stock); }; const confirmAdd = (stock, shares, avgCost) => { const existing = portfolio.find(h => h.sym === stock.sym); let next; if (existing) { next = portfolio.map(h => h.sym === stock.sym ? { ...h, shares: h.shares + shares } : h); } else { const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5); next = [...portfolio, { id, sym: stock.sym, shares, avgCost, addedAt: new Date().toISOString() }]; } savePortfolio(next); setPortfolio(next); setToast(`Added ${shares} × ${stock.sym} to portfolio`); setTimeout(() => setToast(null), 2500); }; return (
{/* Header */}

Markets

JSE stocks by sector — click any ticker to view, + to add to portfolio
{/* Search */}
setSearch(e.target.value)} />
{/* Market filter */}
{['all', 'Main', 'Junior'].map(m => ( ))}
{/* Index bar */} {/* Sector legend */}
{sectors.map(([sector]) => { const pal = sectorPalette(sector); return (
{sector}
); })}
{/* Sector clouds grid */} {sectors.length === 0 ? (
No stocks found
Try a different search or market filter.
) : (
{sectors.map(([sector, sStocks]) => ( ))}
)} {/* Add-to-portfolio modal */} {addingStock && ( setAddingStock(null)} onConfirm={confirmAdd} /> )} {/* Toast notification */} {toast && (
{toast}
)}
); }; // ── WatchlistPage ───────────────────────────────────────────────────────────── window.WatchlistPage = ({ currency, goTo, setPage, setSelectedStock }) => { const { stocks, bySym } = window.JASTOCKS_DATA; const [watchlist, setWatchlist] = React.useState(() => loadWatchlist()); const watched = watchlist.map(sym => bySym[sym]).filter(Boolean); const remove = (sym) => { const next = watchlist.filter(s => s !== sym); saveWatchlist(next); setWatchlist(next); }; return (

Watchlist

Stocks you're keeping an eye on
{watched.length === 0 ? (
👁
Your watchlist is empty
Browse the Markets page and add stocks to track them here.
) : (
{watched.map(s => ( goTo && goTo('stock', s.sym)}> ))}
Stock Price Change % Change Yield Market
{s.sym}
{s.name}
 {fmtPrice(s.price, currency)} = 0 ? 'var(--up)' : 'var(--down)' }}> {s.change >= 0 ? '+' : ''}{s.change.toFixed(2)} = 0 ? 'var(--up)' : 'var(--down)' }}> {s.changePct >= 0 ? '+' : ''}{s.changePct.toFixed(2)}% {s.yield > 0 ? `${s.yield.toFixed(2)}%` : '—'} {s.market}
)}
); };