Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Dividend Harvesting - FinWise</title> | |
| <link rel="stylesheet" href="shared.css"/> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> | |
| <style> | |
| :root { | |
| --cyan:#22d3ee; --emerald:#10b981; --violet:#8b5cf6; | |
| --amber:#f59e0b; --rose:#f43f5e; --card:#1e2535; | |
| --border:#2a3347; --bg3:#151c2c; --text2:#94a3b8; | |
| --bg:#0f1623; --text:#e2e8f0; | |
| --gold:#fbbf24; --lime:#84cc16; | |
| } | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex} | |
| /* ── Sidebar ── */ | |
| .sidebar{width:240px;min-height:100vh;background:var(--bg3);border-right:1px solid var(--border);padding:1.5rem 1rem;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:100} | |
| .sidebar-logo{font-size:1.4rem;font-weight:800;color:var(--cyan);letter-spacing:-.5px;margin-bottom:2rem;padding-left:.5rem;display:flex;align-items:center;gap:.5rem} | |
| .sidebar-logo span{color:var(--text)} | |
| .nav-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text2);padding:.5rem .5rem .25rem;margin-top:.75rem} | |
| .nav-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:8px;color:var(--text2);text-decoration:none;font-size:.875rem;font-weight:500;transition:all .15s} | |
| .nav-item:hover{background:var(--card);color:var(--text)} | |
| .nav-item.active{background:rgba(251,191,36,.1);color:var(--gold)} | |
| .nav-icon{font-size:1rem;width:20px;text-align:center} | |
| .nav-badge{margin-left:auto;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px} | |
| .nav-badge.new{background:var(--emerald);color:#000} | |
| .nav-badge.picks{background:var(--emerald);color:#000} | |
| /* ── Main ── */ | |
| .main-content{margin-left:240px;padding:1.5rem;flex:1;min-width:0} | |
| /* ── Hero banner ── */ | |
| .div-hero{ | |
| background:linear-gradient(135deg,rgba(251,191,36,.08) 0%,rgba(16,185,129,.05) 100%); | |
| border:1px solid rgba(251,191,36,.25);border-radius:14px; | |
| padding:24px 28px;margin-bottom:1.5rem; | |
| display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; | |
| position:relative;overflow:hidden; | |
| } | |
| .div-hero::before{content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(251,191,36,.1) 0%,transparent 70%);pointer-events:none} | |
| .hero-title{font-size:1.7rem;font-weight:800;letter-spacing:-.5px} | |
| .hero-title span{color:var(--gold)} | |
| .hero-sub{color:var(--text2);font-size:.875rem;margin-top:.3rem} | |
| .hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center} | |
| /* ── Btn ── */ | |
| .btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;border-radius:8px;border:none;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none} | |
| .btn-gold{background:var(--gold);color:#000} | |
| .btn-gold:hover{opacity:.88} | |
| .btn-gold:disabled{background:var(--border);color:var(--text2);cursor:not-allowed} | |
| .btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)} | |
| .btn-ghost:hover{background:var(--card);color:var(--text)} | |
| .btn-emerald{background:var(--emerald);color:#000} | |
| .btn-emerald:hover{opacity:.88} | |
| /* ── Status bar ── */ | |
| .status-bar{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.6rem 1rem;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem} | |
| .data-badge{display:inline-flex;align-items:center;gap:.3rem;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700} | |
| .data-badge.live{background:rgba(16,185,129,.15);color:var(--emerald);border:1px solid rgba(16,185,129,.3)} | |
| .data-badge.cached{background:rgba(245,158,11,.12);color:var(--amber);border:1px solid rgba(245,158,11,.3)} | |
| .data-badge.seed{background:rgba(148,163,184,.1);color:var(--text2);border:1px solid var(--border)} | |
| .data-badge.error{background:rgba(244,63,94,.12);color:var(--rose);border:1px solid rgba(244,63,94,.3)} | |
| .status-msg{font-size:.75rem;color:var(--text2)} | |
| .status-msg span{color:var(--cyan)} | |
| /* ── Stat grid ── */ | |
| .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1.5rem} | |
| .stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;position:relative;overflow:hidden} | |
| .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--gold))} | |
| .stat-label{font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;font-weight:600} | |
| .stat-value{font-size:1.65rem;font-weight:800;margin:.25rem 0 .1rem;font-variant-numeric:tabular-nums} | |
| .stat-sub{font-size:.72rem;color:var(--text2)} | |
| /* ── Layout ── */ | |
| .div-layout{display:grid;grid-template-columns:280px 1fr;gap:1.25rem;align-items:start} | |
| /* ── Filter panel ── */ | |
| .filter-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.25rem;position:sticky;top:1.5rem} | |
| .filter-section{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)} | |
| .filter-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none} | |
| .filter-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem} | |
| .filter-group{margin-bottom:.85rem} | |
| .filter-group:last-child{margin-bottom:0} | |
| .filter-group label{display:block;font-size:.75rem;color:var(--text2);margin-bottom:.3rem;font-weight:600} | |
| .filter-group input[type=range]{width:100%;accent-color:var(--gold);cursor:pointer} | |
| .range-row{display:flex;justify-content:space-between;margin-top:.2rem} | |
| .range-val{font-size:.78rem;color:var(--gold);font-weight:700} | |
| .range-label{font-size:.72rem;color:var(--text2)} | |
| .filter-group select{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:.4rem .6rem;font-size:.82rem} | |
| .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0} | |
| .toggle-label{font-size:.82rem;color:var(--text);font-weight:500} | |
| .toggle{position:relative;width:38px;height:20px;flex-shrink:0} | |
| .toggle input{opacity:0;width:0;height:0} | |
| .toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:20px;cursor:pointer;transition:.2s} | |
| .toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s} | |
| .toggle input:checked+.toggle-slider{background:var(--gold)} | |
| .toggle input:checked+.toggle-slider::before{transform:translateX(18px)} | |
| .checkboxes{display:flex;flex-direction:column;gap:.3rem} | |
| .checkboxes label{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text);cursor:pointer} | |
| .checkboxes input[type=checkbox]{accent-color:var(--gold)} | |
| .search-box{display:flex;align-items:center;gap:.4rem;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.4rem .7rem;margin-bottom:1rem} | |
| .search-box input{background:transparent;border:none;outline:none;color:var(--text);font-size:.82rem;flex:1} | |
| .search-box input::placeholder{color:var(--text2)} | |
| /* ── Sort bar ── */ | |
| .sort-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;flex-wrap:wrap;gap:.5rem} | |
| .results-count{font-size:.82rem;color:var(--text2)} | |
| .results-count strong{color:var(--text)} | |
| .sort-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} | |
| .sort-label{font-size:.75rem;color:var(--text2)} | |
| .sort-btn{padding:.3rem .7rem;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s} | |
| .sort-btn.active{background:var(--gold);color:#000;border-color:var(--gold)} | |
| .export-btn{display:flex;align-items:center;gap:.35rem;padding:.35rem .8rem;border-radius:6px;border:1px solid var(--emerald);background:transparent;color:var(--emerald);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s} | |
| .export-btn:hover{background:rgba(16,185,129,.1)} | |
| /* ── Dividend table ── */ | |
| .table-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden} | |
| .table-scroll{overflow-x:auto} | |
| table{width:100%;border-collapse:collapse;font-size:.82rem} | |
| thead tr{background:var(--bg3);border-bottom:1px solid var(--border)} | |
| thead th{padding:.7rem .9rem;text-align:left;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);white-space:nowrap;cursor:pointer;user-select:none;transition:color .15s} | |
| thead th:hover{color:var(--gold)} | |
| thead th .si{margin-left:.25rem;opacity:.4;font-size:.65rem} | |
| thead th.sorted .si{opacity:1;color:var(--gold)} | |
| tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s} | |
| tbody tr:last-child{border-bottom:none} | |
| tbody tr:hover{background:rgba(251,191,36,.04)} | |
| tbody tr.expanded{background:rgba(251,191,36,.06);border-bottom:none} | |
| td{padding:.7rem .9rem;white-space:nowrap;vertical-align:middle} | |
| /* ── Ex-div badges ── */ | |
| .exdiv-badge{display:inline-flex;align-items:center;gap:.3rem;padding:3px 8px;border-radius:6px;font-size:.72rem;font-weight:700} | |
| .exdiv-hot{background:rgba(16,185,129,.2);color:var(--emerald);border:1px solid rgba(16,185,129,.4)} | |
| .exdiv-soon{background:rgba(245,158,11,.15);color:var(--amber);border:1px solid rgba(245,158,11,.35)} | |
| .exdiv-upcoming{background:rgba(148,163,184,.1);color:var(--text2);border:1px solid var(--border)} | |
| /* ── Ticker cell ── */ | |
| .ticker-cell{display:flex;flex-direction:column;gap:.15rem} | |
| .ticker-sym{font-size:.9rem;font-weight:800;font-family:'Courier New',monospace;color:var(--text)} | |
| .ticker-name{font-size:.7rem;color:var(--text2);max-width:140px;white-space:normal;line-height:1.3} | |
| /* ── Freq badge ── */ | |
| .freq-badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:.65rem;font-weight:700} | |
| .freq-q{background:rgba(34,211,238,.12);color:var(--cyan)} | |
| .freq-m{background:rgba(16,185,129,.15);color:var(--emerald)} | |
| .freq-s{background:rgba(139,92,246,.12);color:var(--violet)} | |
| .freq-a{background:rgba(245,158,11,.12);color:var(--amber)} | |
| /* ── Sector badge ── */ | |
| .badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:.65rem;font-weight:700} | |
| .badge-tech{background:rgba(34,211,238,.12);color:var(--cyan)} | |
| .badge-energy{background:rgba(245,158,11,.12);color:var(--amber)} | |
| .badge-health{background:rgba(16,185,129,.12);color:var(--emerald)} | |
| .badge-finance{background:rgba(139,92,246,.12);color:var(--violet)} | |
| .badge-consumer{background:rgba(244,63,94,.1);color:var(--rose)} | |
| .badge-industrial{background:rgba(148,163,184,.1);color:var(--text2)} | |
| .badge-reit{background:rgba(251,191,36,.12);color:var(--gold)} | |
| .badge-telecom{background:rgba(34,211,238,.08);color:var(--cyan)} | |
| /* ── Yield bar ── */ | |
| .yield-bar-wrap{display:flex;align-items:center;gap:.5rem} | |
| .yield-bar{background:var(--bg3);border-radius:3px;height:5px;width:50px;overflow:hidden} | |
| .yield-fill{height:100%;border-radius:3px;background:var(--gold)} | |
| .yield-val{font-family:monospace;font-weight:700;font-size:.82rem} | |
| /* ── Consistency meter ── */ | |
| .consistency-dots{display:flex;gap:2px} | |
| .c-dot{width:8px;height:8px;border-radius:2px;background:var(--bg3)} | |
| .c-dot.filled{background:var(--emerald)} | |
| .c-dot.partial{background:var(--amber)} | |
| /* ── Expand drawer ── */ | |
| .drawer-row{display:none} | |
| .drawer-row.open{display:table-row} | |
| .drawer-cell{padding:0!important} | |
| .drawer-inner{padding:1.25rem 1.5rem;background:rgba(251,191,36,.03);border-bottom:1px solid var(--border)} | |
| .drawer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem} | |
| .drawer-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);margin-bottom:.6rem} | |
| .drawer-stat-row{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.8rem} | |
| .drawer-stat-row:last-child{border-bottom:none} | |
| .drawer-stat-label{color:var(--text2)} | |
| .drawer-stat-val{font-weight:600;font-family:monospace} | |
| .hist-chart-wrap{height:80px;position:relative} | |
| .div-event-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.85rem;margin-top:.5rem} | |
| .div-event-card .event-row{display:flex;justify-content:space-between;font-size:.78rem;padding:.25rem 0;border-bottom:1px solid rgba(255,255,255,.04)} | |
| .div-event-card .event-row:last-child{border-bottom:none} | |
| .event-label{color:var(--text2)} | |
| .event-val{font-weight:600} | |
| .howto-note{font-size:.75rem;color:var(--text2);line-height:1.6;margin-top:.75rem;padding:.7rem .85rem;background:var(--bg3);border-radius:8px;border-left:3px solid var(--gold)} | |
| /* ── Cooldown ring ── */ | |
| .cooldown-ring{width:16px;height:16px;border-radius:50%;border:2px solid var(--text2);border-top-color:var(--gold);animation:spin .8s linear infinite;display:none} | |
| .cooldown-ring.visible{display:inline-block} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| /* ── Empty state ── */ | |
| .empty-state{text-align:center;padding:3rem 1rem;color:var(--text2)} | |
| .empty-state .ei{font-size:2.5rem;margin-bottom:.75rem} | |
| /* ── Modal ── */ | |
| .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)} | |
| .modal-backdrop.hidden{display:none} | |
| .modal-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;width:min(460px,92vw);box-shadow:0 24px 64px rgba(0,0,0,.5)} | |
| .modal-title{font-size:1.1rem;font-weight:800;margin-bottom:.4rem} | |
| .modal-title span{color:var(--gold)} | |
| .modal-sub{font-size:.82rem;color:var(--text2);margin-bottom:1.25rem;line-height:1.65} | |
| .modal-sub a{color:var(--cyan);text-decoration:none} | |
| .modal-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:.65rem .85rem;font-size:.88rem;font-family:monospace;outline:none;transition:border-color .15s} | |
| .modal-input:focus{border-color:var(--gold)} | |
| .modal-actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap} | |
| .modal-note{font-size:.72rem;color:var(--text2);margin-top:.85rem;line-height:1.55;padding:.65rem .75rem;background:var(--bg3);border-radius:8px} | |
| .modal-note strong{color:var(--emerald)} | |
| /* ── Loading overlay ── */ | |
| .table-loading{position:relative} | |
| .tbl-overlay{position:absolute;inset:0;background:rgba(15,22,35,.8);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:12px;backdrop-filter:blur(2px)} | |
| .tbl-overlay.hidden{display:none} | |
| .spin-lg{width:40px;height:40px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--gold);animation:spin .7s linear infinite} | |
| /* ── Mobile bottom nav ── */ | |
| .bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg3);border-top:1px solid var(--border);z-index:200;padding:.4rem 0} | |
| .bottom-nav-inner{display:flex;justify-content:space-around;align-items:center} | |
| .bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text2);text-decoration:none;font-size:.65rem;font-weight:600;padding:.3rem .5rem;border-radius:8px} | |
| .bottom-nav-item .bn-icon{font-size:1.1rem} | |
| .bottom-nav-item.active{color:var(--gold)} | |
| /* ── up/down ── */ | |
| .up{color:var(--emerald);font-weight:600} | |
| .down{color:var(--rose);font-weight:600} | |
| @media(max-width:1024px){.div-layout{grid-template-columns:1fr}.filter-panel{position:static}} | |
| @media(max-width:768px){ | |
| .sidebar{display:none} | |
| .main-content{margin-left:0;padding:1rem;padding-bottom:5rem} | |
| .bottom-nav{display:block} | |
| .stat-grid{grid-template-columns:1fr 1fr} | |
| .drawer-grid{grid-template-columns:1fr} | |
| } | |
| @media(max-width:480px){.stat-grid{grid-template-columns:1fr}} | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ═══════════ SIDEBAR ═══════════ --> | |
| <nav class="sidebar"> | |
| <div class="sidebar-logo">📈 <span>Fin</span>Wise</div> | |
| <div class="nav-label">Main</div> | |
| <a href="index.html" class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a> | |
| <a href="portfolio.html" class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a> | |
| <a href="risk.html" class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a> | |
| <a href="tracker.html" class="nav-item"><span class="nav-icon">📈</span> Tracker</a> | |
| <div class="nav-label">Tools</div> | |
| <a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a> | |
| <a href="insights.html" class="nav-item"><span class="nav-icon">💡</span> Insights <span class="nav-badge">New</span></a> | |
| <a href="picks.html" class="nav-item"><span class="nav-icon">🏹</span> Stock & Option Picks <span class="nav-badge picks">New</span></a> | |
| <a href="dividends.html" class="nav-item active"><span class="nav-icon">💰</span> Dividend Harvesting <span class="nav-badge new">New</span></a> | |
| </nav> | |
| <!-- ═══════════ MAIN ═══════════ --> | |
| <main class="main-content"> | |
| <!-- Hero --> | |
| <div class="div-hero"> | |
| <div> | |
| <div class="hero-title">💰 <span>Dividend Harvesting</span></div> | |
| <div class="hero-sub">Upcoming dividends in the next 6–8 weeks · Filter by date, yield, sector · Click any row to expand details</div> | |
| </div> | |
| <div class="hero-actions"> | |
| <div class="search-box" style="margin-bottom:0;width:200px"> | |
| <span>🔍</span> | |
| <input type="text" id="globalSearch" placeholder="Search ticker…" oninput="applyFilters()"/> | |
| </div> | |
| <button class="btn btn-gold" id="fetchBtn" onclick="userFetch()"> | |
| <span class="cooldown-ring" id="cdRing"></span> | |
| <span id="fetchLabel">⬇️ Fetch Live Data</span> | |
| </button> | |
| <button class="btn btn-ghost" onclick="showKeyModal()" title="Manage API key">🔑</button> | |
| </div> | |
| </div> | |
| <!-- Status bar --> | |
| <div class="status-bar"> | |
| <div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap"> | |
| <span id="statusBadge" class="data-badge seed">📦 Seed Data</span> | |
| <span class="status-msg" id="statusMsg">Press "Fetch Live Data" to load real dividend data from Finnhub</span> | |
| </div> | |
| <div style="font-size:.72rem;color:var(--text2)"> | |
| Source: Finnhub.io · <span style="cursor:pointer;color:var(--cyan)" onclick="showKeyModal()">🔑 Manage key</span> · 10-min cooldown · Dividend history per stock | |
| </div> | |
| </div> | |
| <!-- Stat strip --> | |
| <div class="stat-grid"> | |
| <div class="stat-card" style="--accent:var(--gold)"> | |
| <div class="stat-label">Upcoming Events</div> | |
| <div class="stat-value" id="statTotal" style="color:var(--gold)">—</div> | |
| <div class="stat-sub">ex-div in next 8 weeks</div> | |
| </div> | |
| <div class="stat-card" style="--accent:var(--emerald)"> | |
| <div class="stat-label">Avg Dividend Yield</div> | |
| <div class="stat-value" id="statAvgYield" style="color:var(--emerald)">—</div> | |
| <div class="stat-sub">filtered results</div> | |
| </div> | |
| <div class="stat-card" style="--accent:var(--cyan)"> | |
| <div class="stat-label">Avg Days to Ex-Div</div> | |
| <div class="stat-value" id="statAvgDays" style="color:var(--cyan)">—</div> | |
| <div class="stat-sub">from today</div> | |
| </div> | |
| <div class="stat-card" style="--accent:var(--amber)"> | |
| <div class="stat-label">High Yield (>4%)</div> | |
| <div class="stat-value" id="statHighYield" style="color:var(--amber)">—</div> | |
| <div class="stat-sub">picks in filtered view</div> | |
| </div> | |
| <div class="stat-card" style="--accent:var(--rose)"> | |
| <div class="stat-label">Ex-Div This Week</div> | |
| <div class="stat-value" id="statThisWeek" style="color:var(--rose)">—</div> | |
| <div class="stat-sub">act fast — buy before ex-date</div> | |
| </div> | |
| </div> | |
| <!-- Main layout: filters + table --> | |
| <div class="div-layout"> | |
| <!-- ── Filter Panel ── --> | |
| <aside class="filter-panel"> | |
| <div class="filter-section"> | |
| <div class="filter-section-title">📅 Ex-Dividend Date Range</div> | |
| <div class="filter-group"> | |
| <label>Max days out</label> | |
| <input type="range" min="7" max="60" value="56" id="fDays" | |
| oninput="document.getElementById('fDaysVal').textContent=this.value+'d (~'+Math.round(this.value/7)+'wk)';applyFilters()"> | |
| <div class="range-row"> | |
| <span class="range-val" id="fDaysVal">56d (~8wk)</span> | |
| <span class="range-label">Today → +8 wk</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="filter-section"> | |
| <div class="filter-section-title">💸 Dividend Yield</div> | |
| <div class="filter-group"> | |
| <label>Min yield (%)</label> | |
| <input type="range" min="0" max="10" step="0.5" value="0" id="fYieldMin" | |
| oninput="document.getElementById('fYieldMinVal').textContent=this.value+'%';applyFilters()"> | |
| <div class="range-row"> | |
| <span class="range-val" id="fYieldMinVal">0%</span> | |
| <span class="range-label">Min threshold</span> | |
| </div> | |
| </div> | |
| <div class="filter-group"> | |
| <label>Max yield (%)</label> | |
| <input type="range" min="1" max="15" step="0.5" value="15" id="fYieldMax" | |
| oninput="document.getElementById('fYieldMaxVal').textContent=this.value+'%';applyFilters()"> | |
| <div class="range-row"> | |
| <span class="range-val" id="fYieldMaxVal">15%</span> | |
| <span class="range-label">Max threshold</span> | |
| </div> | |
| </div> | |
| <div class="filter-group"> | |
| <label>Yield type</label> | |
| <select id="fYieldType" onchange="applyFilters()"> | |
| <option value="ttm">Trailing 12-Month (TTM)</option> | |
| <option value="fwd">Forward Yield</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="filter-section"> | |
| <div class="filter-section-title">🏢 Company Filters</div> | |
| <div class="filter-group"> | |
| <label>Market Cap</label> | |
| <div class="checkboxes"> | |
| <label><input type="checkbox" checked value="Large" class="f-cap" onchange="applyFilters()"> Large Cap (>$10B)</label> | |
| <label><input type="checkbox" checked value="Mid" class="f-cap" onchange="applyFilters()"> Mid Cap ($2B–$10B)</label> | |
| <label><input type="checkbox" checked value="Small" class="f-cap" onchange="applyFilters()"> Small Cap (<$2B)</label> | |
| </div> | |
| </div> | |
| <div class="filter-group"> | |
| <label>Sector</label> | |
| <select id="fSector" onchange="applyFilters()"> | |
| <option value="">All Sectors</option> | |
| <option>Technology</option> | |
| <option>Healthcare</option> | |
| <option>Finance</option> | |
| <option>Energy</option> | |
| <option>Consumer</option> | |
| <option>Industrial</option> | |
| <option>Telecom</option> | |
| <option>REIT</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label>Frequency</label> | |
| <select id="fFreq" onchange="applyFilters()"> | |
| <option value="">All</option> | |
| <option value="Monthly">Monthly</option> | |
| <option value="Quarterly">Quarterly</option> | |
| <option value="Semi-Annual">Semi-Annual</option> | |
| <option value="Annual">Annual</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="filter-section"> | |
| <div class="filter-section-title">⚙️ Toggles</div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Exclude ETFs</span> | |
| <label class="toggle"><input type="checkbox" id="tExclETF" onchange="applyFilters()"><span class="toggle-slider"></span></label> | |
| </div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Exclude REITs</span> | |
| <label class="toggle"><input type="checkbox" id="tExclREIT" onchange="applyFilters()"><span class="toggle-slider"></span></label> | |
| </div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">High Yield Only (>4%)</span> | |
| <label class="toggle"><input type="checkbox" id="tHighYield" onchange="applyFilters()"><span class="toggle-slider"></span></label> | |
| </div> | |
| <div class="toggle-row"> | |
| <span class="toggle-label">Consistent Payers Only</span> | |
| <label class="toggle"><input type="checkbox" id="tConsistent" onchange="applyFilters()"><span class="toggle-slider"></span></label> | |
| </div> | |
| <div style="margin-top:.85rem"> | |
| <label style="font-size:.72rem;color:var(--text2);font-weight:600;margin-bottom:.35rem;display:block">Min Avg Volume</label> | |
| <select id="fVolume" onchange="applyFilters()"> | |
| <option value="0">Any</option> | |
| <option value="500000">500K+</option> | |
| <option value="1000000">1M+</option> | |
| <option value="5000000">5M+</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button class="btn btn-ghost" style="width:100%;justify-content:center;margin-top:.5rem" onclick="resetFilters()">↺ Reset Filters</button> | |
| </aside> | |
| <!-- ── Results Panel ── --> | |
| <div> | |
| <!-- Sort + export bar --> | |
| <div class="sort-bar"> | |
| <div class="results-count">Found <strong id="resultCount">—</strong> dividend events</div> | |
| <div class="sort-controls"> | |
| <span class="sort-label">Sort:</span> | |
| <button class="sort-btn active" id="sb-date" onclick="setSort('daysOut',this)">Soonest</button> | |
| <button class="sort-btn" id="sb-yield" onclick="setSort('yield',this)">Highest Yield</button> | |
| <button class="sort-btn" id="sb-cap" onclick="setSort('marketCapRank',this)">Market Cap</button> | |
| <button class="sort-btn" id="sb-cons" onclick="setSort('consistency',this)">Consistency</button> | |
| <button class="export-btn" onclick="exportCSV()">⬇ Export CSV</button> | |
| </div> | |
| </div> | |
| <!-- Table --> | |
| <div class="table-wrap table-loading" style="position:relative"> | |
| <div class="tbl-overlay hidden" id="tableOverlay"> | |
| <div style="text-align:center"> | |
| <div class="spin-lg"></div> | |
| <div style="color:var(--text2);font-size:.8rem;margin-top:.75rem" id="overlayMsg">Fetching dividend data…</div> | |
| </div> | |
| </div> | |
| <div class="table-scroll"> | |
| <table id="divTable"> | |
| <thead><tr> | |
| <th onclick="setSort('ticker',null)">Ticker <span class="si">⇅</span></th> | |
| <th onclick="setSort('daysOut',null)">Ex-Div Date <span class="si">⇅</span></th> | |
| <th onclick="setSort('amount',null)">Amount <span class="si">⇅</span></th> | |
| <th onclick="setSort('yield',null)">Yield <span class="si">⇅</span></th> | |
| <th onclick="setSort('price',null)">Price <span class="si">⇅</span></th> | |
| <th onclick="setSort('chg1d',null)">1D % <span class="si">⇅</span></th> | |
| <th>Pay Date</th> | |
| <th>Frequency</th> | |
| <th>Sector</th> | |
| <th onclick="setSort('marketCapRank',null)">Mkt Cap <span class="si">⇅</span></th> | |
| <th onclick="setSort('consistency',null)">Consistency <span class="si">⇅</span></th> | |
| </tr></thead> | |
| <tbody id="divBody"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- How to read note --> | |
| <div class="howto-note" style="margin-top:1rem"> | |
| 💡 <strong>How to read this:</strong> You must own shares <em>before the close of the day prior to the Ex-Dividend Date</em> to receive the dividend. The Payment Date is when cash hits your account. Breakeven = Stock Price − Dividend Amount. | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Mobile Bottom Nav --> | |
| <nav class="bottom-nav"> | |
| <div class="bottom-nav-inner"> | |
| <a href="index.html" class="bottom-nav-item"><span class="bn-icon">🏠</span>Home</a> | |
| <a href="portfolio.html" class="bottom-nav-item"><span class="bn-icon">📊</span>Portfolio</a> | |
| <a href="picks.html" class="bottom-nav-item"><span class="bn-icon">🏹</span>Picks</a> | |
| <a href="calculators.html" class="bottom-nav-item"><span class="bn-icon">🧮</span>Calc</a> | |
| <a href="dividends.html" class="bottom-nav-item active"><span class="bn-icon">💰</span>Divs</a> | |
| </div> | |
| </nav> | |
| <!-- API Key Modal --> | |
| <div class="modal-backdrop hidden" id="keyModal" onclick="if(event.target===this)hideKeyModal()"> | |
| <div class="modal-box"> | |
| <div class="modal-title">🔑 Finnhub <span>API Key</span></div> | |
| <div class="modal-sub"> | |
| Same key as Stock & Option Picks page. Get a free key at | |
| <a href="https://finnhub.io/register" target="_blank">finnhub.io/register</a> | |
| — takes 30 seconds, no credit card.<br><br> | |
| Dividend data uses <code>/stock/dividend</code> + <code>/quote</code> endpoints (both free tier). | |
| </div> | |
| <input class="modal-input" id="keyInput" type="text" | |
| placeholder="e.g. d0abc123xyz456..." autocomplete="off" spellcheck="false"/> | |
| <div class="modal-actions"> | |
| <button class="btn btn-gold" onclick="confirmKey()">✅ Save & Fetch</button> | |
| <button class="btn btn-ghost" onclick="hideKeyModal()">Cancel</button> | |
| <button class="btn btn-ghost" onclick="clearKey()" style="margin-left:auto;color:var(--rose);border-color:var(--rose)">🗑 Clear</button> | |
| </div> | |
| <div class="modal-note"> | |
| <strong>🔒 Privacy:</strong> Key stored only in your browser's localStorage. Never sent anywhere except Finnhub directly. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══════════ SCRIPT ═══════════ --> | |
| <script> | |
| ; | |
| /* ───────────────────────────────────────────── | |
| CONSTANTS | |
| ───────────────────────────────────────────── */ | |
| const COOLDOWN_MS = 10 * 60 * 1000; | |
| const CACHE_TTL = 15 * 60 * 1000; | |
| const CACHE_KEY = 'fw_div_data'; | |
| const CACHE_TIME = 'fw_div_time'; | |
| const CD_KEY = 'fw_div_cd'; | |
| const KEY_STORE = 'fw_finnhub_key'; // shared with picks.html | |
| const FH_BASE = 'https://finnhub.io/api/v1'; | |
| let FINNHUB_KEY = localStorage.getItem(KEY_STORE) || ''; | |
| let cdTimer = null; | |
| let currentSort = { key:'daysOut', asc:true }; | |
| let activeDrawer = null; // ticker of open drawer | |
| let histCharts = {}; // Chart instances keyed by ticker | |
| let filteredData = []; | |
| /* ───────────────────────────────────────────── | |
| HELPERS | |
| ───────────────────────────────────────────── */ | |
| const $ = id => document.getElementById(id); | |
| const fv = (id,v) => { const e=$(id); if(e) e.textContent=v; }; | |
| const hasKey = () => FINNHUB_KEY.length > 0; | |
| const today = () => { const d=new Date(); d.setHours(0,0,0,0); return d; }; | |
| const addDays = (d,n) => { const r=new Date(d); r.setDate(r.getDate()+n); return r; }; | |
| const fmtDate = d => { | |
| if(!d) return '—'; | |
| const dt = typeof d==='string' ? new Date(d) : d; | |
| return dt.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'2-digit'}); | |
| }; | |
| const daysFromToday = dateStr => { | |
| if(!dateStr) return 999; | |
| const d = new Date(dateStr); | |
| d.setHours(0,0,0,0); | |
| return Math.round((d - today()) / 86400000); | |
| }; | |
| const sleep = ms => new Promise(r => setTimeout(r, ms)); | |
| function exDivBadge(dateStr) { | |
| const days = daysFromToday(dateStr); | |
| const label = fmtDate(dateStr); | |
| if (days < 0) return `<span class="exdiv-badge exdiv-upcoming" title="Already passed">${label} ✓</span>`; | |
| if (days <= 7) return `<span class="exdiv-badge exdiv-hot">🔥 ${label} (${days}d)</span>`; | |
| if (days <= 14)return `<span class="exdiv-badge exdiv-soon">⚡ ${label} (${days}d)</span>`; | |
| return `<span class="exdiv-badge exdiv-upcoming">${label} (${days}d)</span>`; | |
| } | |
| function freqBadge(f) { | |
| const m={Monthly:'freq-m',Quarterly:'freq-q','Semi-Annual':'freq-s',Annual:'freq-a'}; | |
| return `<span class="freq-badge ${m[f]||'freq-q'}">${f||'Quarterly'}</span>`; | |
| } | |
| function sectorBadge(s) { | |
| const m={Technology:'badge-tech',Healthcare:'badge-health',Finance:'badge-finance', | |
| Energy:'badge-energy',Consumer:'badge-consumer',Industrial:'badge-industrial', | |
| REIT:'badge-reit',Telecom:'badge-telecom'}; | |
| return `<span class="badge ${m[s]||'badge-tech'}">${s}</span>`; | |
| } | |
| function yieldBar(y) { | |
| const pct = Math.min(100, (y/10)*100); | |
| const col = y>=6?'var(--amber)':y>=4?'var(--gold)':'var(--emerald)'; | |
| return `<div class="yield-bar-wrap"> | |
| <div class="yield-bar"><div class="yield-fill" style="width:${pct}%;background:${col}"></div></div> | |
| <span class="yield-val" style="color:${col}">${y.toFixed(2)}%</span> | |
| </div>`; | |
| } | |
| function consistencyDots(pct) { | |
| const filled = Math.round(pct/12.5); // 8 dots = 100% | |
| let html = '<div class="consistency-dots">'; | |
| for(let i=0;i<8;i++) html+=`<div class="c-dot ${i<filled?'filled':''}"></div>`; | |
| html += `</div><span style="font-size:.7rem;color:var(--text2);margin-left:.3rem">${pct}%</span>`; | |
| return html; | |
| } | |
| function chgCell(v){ | |
| if(v==null||isNaN(v)) return '<span style="color:var(--text2)">—</span>'; | |
| if(v>0) return `<span class="up">▲ ${v.toFixed(2)}%</span>`; | |
| if(v<0) return `<span class="down">▼ ${Math.abs(v).toFixed(2)}%</span>`; | |
| return '<span style="color:var(--text2)">0.00%</span>'; | |
| } | |
| function fmtPrice(p){return p==null?'—':'$'+p.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2});} | |
| function capLabel(r){return r<=1?'Large':r<=2?'Mid':'Small';} | |
| function capBadge(r){ | |
| const cls=r<=1?'badge-tech':r<=2?'badge-health':'badge-industrial'; | |
| return `<span class="badge ${cls}">${capLabel(r)}</span>`; | |
| } | |
| /* ───────────────────────────────────────────── | |
| SEED DATA | |
| Ex-div dates ~8 weeks from May 7, 2026 | |
| ───────────────────────────────────────────── */ | |
| const SEED = [ | |
| // === HOT (≤7 days) === | |
| {ticker:'AAPL', company:'Apple Inc.', sector:'Technology', exDivDate:'2026-05-09', payDate:'2026-05-15', recordDate:'2026-05-10', annDate:'2026-04-30', amount:0.25, yield:0.47, fwdYield:0.48, annualDiv:1.00, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:58000000, price:211.30, chg1d:0.4, consistency:100, history:[0.23,0.23,0.24,0.24,0.25,0.25,0.25,0.25]}, | |
| {ticker:'JNJ', company:'Johnson & Johnson', sector:'Healthcare', exDivDate:'2026-05-12', payDate:'2026-06-03', recordDate:'2026-05-13', annDate:'2026-04-15', amount:1.24, yield:3.12, fwdYield:3.15, annualDiv:4.96, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:7200000, price:158.40, chg1d:0.2, consistency:100, history:[1.19,1.19,1.24,1.24,1.24,1.24,1.24,1.24]}, | |
| {ticker:'O', company:'Realty Income Corp', sector:'REIT', exDivDate:'2026-05-13', payDate:'2026-05-31', recordDate:'2026-05-14', annDate:'2026-04-28', amount:0.264,yield:5.82, fwdYield:5.85, annualDiv:3.17, frequency:'Monthly', marketCapRank:1, isETF:false, isREIT:true, avgVolume:8100000, price:54.50, chg1d:-0.3, consistency:100, history:[0.257,0.258,0.258,0.260,0.261,0.262,0.263,0.264]}, | |
| {ticker:'MAIN', company:'Main Street Capital Corp', sector:'Finance', exDivDate:'2026-05-14', payDate:'2026-05-31', recordDate:'2026-05-15', annDate:'2026-04-20', amount:0.245,yield:5.92, fwdYield:5.95, annualDiv:2.94, frequency:'Monthly', marketCapRank:2, isETF:false, isREIT:false, avgVolume:1200000, price:49.60, chg1d:0.5, consistency:96, history:[0.235,0.235,0.240,0.240,0.240,0.245,0.245,0.245]}, | |
| // === SOON (8-14 days) === | |
| {ticker:'PG', company:'Procter & Gamble Co', sector:'Consumer', exDivDate:'2026-05-15', payDate:'2026-06-15', recordDate:'2026-05-16', annDate:'2026-04-10', amount:1.01, yield:2.48, fwdYield:2.50, annualDiv:4.04, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:6800000, price:162.70, chg1d:0.1, consistency:100, history:[0.94,0.94,0.97,0.97,1.01,1.01,1.01,1.01]}, | |
| {ticker:'KO', company:'Coca-Cola Company', sector:'Consumer', exDivDate:'2026-05-16', payDate:'2026-06-30', recordDate:'2026-05-17', annDate:'2026-04-18', amount:0.485,yield:3.14, fwdYield:3.16, annualDiv:1.94, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:14600000, price:61.80, chg1d:0.3, consistency:100, history:[0.46,0.46,0.46,0.475,0.475,0.485,0.485,0.485]}, | |
| {ticker:'VZ', company:'Verizon Communications', sector:'Telecom', exDivDate:'2026-05-19', payDate:'2026-06-30', recordDate:'2026-05-20', annDate:'2026-04-01', amount:0.675,yield:6.48, fwdYield:6.50, annualDiv:2.70, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:18000000, price:41.65, chg1d:-0.4, consistency:100, history:[0.665,0.665,0.665,0.665,0.670,0.675,0.675,0.675]}, | |
| {ticker:'T', company:'AT&T Inc', sector:'Telecom', exDivDate:'2026-05-21', payDate:'2026-06-30', recordDate:'2026-05-22', annDate:'2026-04-05', amount:0.2775,yield:5.28,fwdYield:5.30, annualDiv:1.11, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:32000000, price:21.00, chg1d:0.2, consistency:88, history:[0.2775,0.2775,0.2775,0.2775,0.2775,0.2775,0.2775,0.2775]}, | |
| // === UPCOMING (>14 days) === | |
| {ticker:'XOM', company:'ExxonMobil Corp', sector:'Energy', exDivDate:'2026-05-28', payDate:'2026-06-10', recordDate:'2026-05-29', annDate:'2026-04-25', amount:0.99, yield:3.35, fwdYield:3.38, annualDiv:3.96, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:18000000, price:118.25, chg1d:1.8, consistency:100, history:[0.91,0.91,0.91,0.95,0.95,0.99,0.99,0.99]}, | |
| {ticker:'CVX', company:'Chevron Corp', sector:'Energy', exDivDate:'2026-06-02', payDate:'2026-06-10', recordDate:'2026-06-03', annDate:'2026-04-30', amount:1.71, yield:4.26, fwdYield:4.28, annualDiv:6.84, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:9800000, price:160.20, chg1d:0.7, consistency:100, history:[1.51,1.51,1.63,1.63,1.71,1.71,1.71,1.71]}, | |
| {ticker:'MCD', company:"McDonald's Corp", sector:'Consumer', exDivDate:'2026-06-05', payDate:'2026-06-18', recordDate:'2026-06-06', annDate:'2026-05-01', amount:1.77, yield:2.43, fwdYield:2.44, annualDiv:7.08, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:3100000, price:291.60, chg1d:0.2, consistency:100, history:[1.67,1.67,1.67,1.73,1.73,1.77,1.77,1.77]}, | |
| {ticker:'WMT', company:'Walmart Inc', sector:'Consumer', exDivDate:'2026-06-09', payDate:'2026-07-01', recordDate:'2026-06-10', annDate:'2026-05-10', amount:0.235,yield:1.38, fwdYield:1.39, annualDiv:0.94, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:11200000, price:68.40, chg1d:0.3, consistency:100, history:[0.21,0.21,0.21,0.22,0.22,0.235,0.235,0.235]}, | |
| {ticker:'HD', company:'Home Depot Inc', sector:'Consumer', exDivDate:'2026-06-12', payDate:'2026-06-26', recordDate:'2026-06-13', annDate:'2026-05-15', amount:2.25, yield:2.52, fwdYield:2.53, annualDiv:9.00, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:4200000, price:357.40, chg1d:0.5, consistency:100, history:[2.09,2.09,2.09,2.03,2.25,2.25,2.25,2.25]}, | |
| {ticker:'GS', company:'Goldman Sachs Group', sector:'Finance', exDivDate:'2026-06-10', payDate:'2026-06-27', recordDate:'2026-06-11', annDate:'2026-05-05', amount:3.00, yield:2.60, fwdYield:2.62, annualDiv:12.00,frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:2800000, price:461.50, chg1d:-0.5, consistency:96, history:[2.75,2.75,2.75,3.00,3.00,3.00,3.00,3.00]}, | |
| {ticker:'IBM', company:'IBM Corp', sector:'Technology', exDivDate:'2026-06-16', payDate:'2026-06-30', recordDate:'2026-06-17', annDate:'2026-05-05', amount:1.67, yield:2.94, fwdYield:2.96, annualDiv:6.68, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:4800000, price:227.40, chg1d:0.3, consistency:100, history:[1.65,1.65,1.65,1.65,1.67,1.67,1.67,1.67]}, | |
| {ticker:'ABBV', company:'AbbVie Inc', sector:'Healthcare', exDivDate:'2026-06-19', payDate:'2026-07-01', recordDate:'2026-06-20', annDate:'2026-05-10', amount:1.64, yield:3.62, fwdYield:3.65, annualDiv:6.56, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:6200000, price:180.90, chg1d:0.8, consistency:100, history:[1.48,1.48,1.55,1.55,1.64,1.64,1.64,1.64]}, | |
| {ticker:'MMM', company:'3M Company', sector:'Industrial', exDivDate:'2026-06-17', payDate:'2026-06-30', recordDate:'2026-06-18', annDate:'2026-05-12', amount:0.70, yield:2.48, fwdYield:2.50, annualDiv:2.80, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:3900000, price:112.80, chg1d:0.1, consistency:88, history:[1.51,1.51,0.70,0.70,0.70,0.70,0.70,0.70]}, | |
| {ticker:'MO', company:'Altria Group Inc', sector:'Consumer', exDivDate:'2026-06-22', payDate:'2026-07-09', recordDate:'2026-06-23', annDate:'2026-05-18', amount:1.02, yield:7.91, fwdYield:7.95, annualDiv:4.08, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:9500000, price:51.58, chg1d:0.4, consistency:100, history:[0.94,0.94,0.94,0.98,0.98,1.02,1.02,1.02]}, | |
| {ticker:'JPM', company:'JPMorgan Chase & Co', sector:'Finance', exDivDate:'2026-06-25', payDate:'2026-07-10', recordDate:'2026-06-26', annDate:'2026-05-20', amount:1.40, yield:2.64, fwdYield:2.65, annualDiv:5.60, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:11800000, price:212.70, chg1d:-0.5, consistency:96, history:[1.15,1.15,1.25,1.25,1.40,1.40,1.40,1.40]}, | |
| {ticker:'BAC', company:'Bank of America Corp', sector:'Finance', exDivDate:'2026-06-27', payDate:'2026-07-14', recordDate:'2026-06-28', annDate:'2026-05-22', amount:0.26, yield:2.75, fwdYield:2.76, annualDiv:1.04, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:38000000, price:37.85, chg1d:0.3, consistency:92, history:[0.22,0.22,0.24,0.24,0.26,0.26,0.26,0.26]}, | |
| {ticker:'PEP', company:'PepsiCo Inc', sector:'Consumer', exDivDate:'2026-06-30', payDate:'2026-07-17', recordDate:'2026-07-01', annDate:'2026-05-28', amount:1.355,yield:3.55, fwdYield:3.58, annualDiv:5.42, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:5400000, price:152.60, chg1d:-0.2, consistency:100, history:[1.265,1.265,1.265,1.325,1.325,1.355,1.355,1.355]}, | |
| {ticker:'PM', company:'Philip Morris Intl', sector:'Consumer', exDivDate:'2026-07-01', payDate:'2026-07-18', recordDate:'2026-07-02', annDate:'2026-06-02', amount:1.35, yield:4.88, fwdYield:4.90, annualDiv:5.40, frequency:'Quarterly', marketCapRank:1, isETF:false, isREIT:false, avgVolume:5800000, price:110.45, chg1d:0.6, consistency:100, history:[1.27,1.27,1.27,1.31,1.31,1.35,1.35,1.35]}, | |
| {ticker:'STAG', company:'STAG Industrial Inc', sector:'REIT', exDivDate:'2026-05-13', payDate:'2026-05-30', recordDate:'2026-05-14', annDate:'2026-04-22', amount:0.124,yield:3.88, fwdYield:3.90, annualDiv:1.49, frequency:'Monthly', marketCapRank:2, isETF:false, isREIT:true, avgVolume:2900000, price:38.40, chg1d:0.3, consistency:100, history:[0.122,0.122,0.122,0.122,0.123,0.124,0.124,0.124]}, | |
| {ticker:'SCHD', company:'Schwab US Dividend ETF', sector:'Consumer', exDivDate:'2026-06-20', payDate:'2026-06-26', recordDate:'2026-06-21', annDate:'2026-06-01', amount:0.778,yield:3.52, fwdYield:3.54, annualDiv:3.11, frequency:'Quarterly', marketCapRank:1, isETF:true, isREIT:false, avgVolume:9800000, price:88.20, chg1d:0.2, consistency:92, history:[0.72,0.72,0.745,0.745,0.765,0.778,0.778,0.778]}, | |
| {ticker:'JEPI', company:'JPMorgan Equity Premium ETF',sector:'Finance', exDivDate:'2026-06-25', payDate:'2026-07-01', recordDate:'2026-06-26', annDate:'2026-06-05', amount:0.42, yield:6.12, fwdYield:6.15, annualDiv:5.04, frequency:'Monthly', marketCapRank:1, isETF:true, isREIT:false, avgVolume:11200000, price:56.30, chg1d:0.1, consistency:88, history:[0.40,0.41,0.41,0.42,0.42,0.42,0.42,0.42]}, | |
| ]; | |
| /* Working copy — prices updated by Finnhub */ | |
| let DATA = JSON.parse(JSON.stringify(SEED)); | |
| /* ───────────────────────────────────────────── | |
| CACHE | |
| ───────────────────────────────────────────── */ | |
| function saveCache(d) { | |
| try { localStorage.setItem(CACHE_KEY,JSON.stringify(d)); localStorage.setItem(CACHE_TIME,Date.now()); } catch{} | |
| } | |
| function loadCache() { | |
| try { | |
| const t=+localStorage.getItem(CACHE_TIME)||0; | |
| if(Date.now()-t>CACHE_TTL) return null; | |
| const r=localStorage.getItem(CACHE_KEY); | |
| return r?JSON.parse(r):null; | |
| } catch{ return null; } | |
| } | |
| function remainingCD() { | |
| const t=+localStorage.getItem(CD_KEY)||0; | |
| return Math.max(0, COOLDOWN_MS-(Date.now()-t)); | |
| } | |
| function setCD(){ try{localStorage.setItem(CD_KEY,Date.now());}catch{} } | |
| function canFetch(){ return remainingCD()===0; } | |
| /* ───────────────────────────────────────────── | |
| FINNHUB FETCH | |
| ───────────────────────────────────────────── */ | |
| async function finnhubQuote(sym) { | |
| const url=`${FH_BASE}/quote?symbol=${sym}&token=${FINNHUB_KEY}`; | |
| const r=await fetch(url,{signal:AbortSignal.timeout(8000)}); | |
| if(!r.ok) throw new Error('HTTP '+r.status); | |
| const j=await r.json(); | |
| return j.c>0 ? {price:j.c, chg1d:j.dp||0} : null; | |
| } | |
| async function finnhubDividend(sym) { | |
| const now = new Date(); | |
| const from = new Date(now); from.setMonth(from.getMonth()-3); | |
| const to = new Date(now); to.setMonth(to.getMonth()+3); | |
| const fmt = d => d.toISOString().split('T')[0]; | |
| const url = `${FH_BASE}/stock/dividend?symbol=${sym}&from=${fmt(from)}&to=${fmt(to)}&token=${FINNHUB_KEY}`; | |
| try { | |
| const r=await fetch(url,{signal:AbortSignal.timeout(10000)}); | |
| if(!r.ok) return null; | |
| const j=await r.json(); | |
| const divs=(j.data||[]).sort((a,b)=>new Date(b.date)-new Date(a.date)); | |
| if(!divs.length) return null; | |
| const upcoming=divs.find(d=>new Date(d.date)>=new Date()); | |
| const recent =divs[0]; | |
| return { exDivDate: upcoming?.date||recent?.date, amount: upcoming?.amount||recent?.amount, payDate: upcoming?.payDate||recent?.payDate, recordDate: upcoming?.recordDate||recent?.recordDate }; | |
| } catch { return null; } | |
| } | |
| async function fetchLiveData() { | |
| if(!hasKey()) { showKeyModal(); return; } | |
| showOverlay(true,'Fetching quotes and dividend data…'); | |
| updateStatus('loading'); | |
| const CONCURRENCY=4; | |
| const tickers=DATA.map(d=>d.ticker); | |
| let successCount=0; | |
| for(let i=0;i<tickers.length;i+=CONCURRENCY) { | |
| const chunk=tickers.slice(i,i+CONCURRENCY); | |
| await Promise.all(chunk.map(async sym => { | |
| try { | |
| const [q,div]=await Promise.all([finnhubQuote(sym), finnhubDividend(sym)]); | |
| const idx=DATA.findIndex(d=>d.ticker===sym); | |
| if(idx<0) return; | |
| if(q) { DATA[idx].price=q.price; DATA[idx].chg1d=q.chg1d; } | |
| if(div) { | |
| if(div.exDivDate) DATA[idx].exDivDate=div.exDivDate; | |
| if(div.amount) DATA[idx].amount=div.amount; | |
| if(div.payDate) DATA[idx].payDate=div.payDate; | |
| if(div.recordDate)DATA[idx].recordDate=div.recordDate; | |
| // Recalculate yield | |
| if(q&&div.amount) DATA[idx].yield=parseFloat(((div.amount*4)/q.price*100).toFixed(2)); | |
| } | |
| successCount++; | |
| } catch(e){ console.warn('[Divs]',sym,e.message); } | |
| })); | |
| showOverlay(true,`Fetched ${Math.min(i+CONCURRENCY,tickers.length)}/${tickers.length} tickers…`); | |
| if(i+CONCURRENCY<tickers.length) await sleep(280); // ~rate-limit safe | |
| } | |
| saveCache(DATA); | |
| showOverlay(false); | |
| updateStatus(successCount>0?'live':'error'); | |
| applyFilters(); | |
| } | |
| /* ───────────────────────────────────────────── | |
| USER ACTIONS | |
| ───────────────────────────────────────────── */ | |
| async function userFetch() { | |
| if(!hasKey()) { showKeyModal(); return; } | |
| if(!canFetch()) { flashCD(); return; } | |
| // Check cache first | |
| const cached=loadCache(); | |
| if(cached) { | |
| DATA=cached; | |
| updateStatus('cached'); | |
| applyFilters(); | |
| startCDDisplay(); | |
| return; | |
| } | |
| setCD(); | |
| startCDDisplay(); | |
| await fetchLiveData(); | |
| } | |
| function startCDDisplay() { | |
| clearInterval(cdTimer); | |
| const btn=$('fetchBtn'); const lbl=$('fetchLabel'); const ring=$('cdRing'); | |
| btn.disabled=true; ring.classList.add('visible'); | |
| cdTimer=setInterval(()=>{ | |
| const r=remainingCD(); | |
| if(r<=0){ clearInterval(cdTimer); btn.disabled=false; ring.classList.remove('visible'); lbl.textContent='⬇️ Fetch Live Data'; return; } | |
| const m=Math.floor(r/60000), s=Math.floor((r%60000)/1000); | |
| lbl.textContent=`⏳ ${m}m ${s}s`; | |
| },1000); | |
| } | |
| function flashCD() { | |
| const lbl=$('fetchLabel'), orig=lbl.textContent; | |
| const r=remainingCD(); | |
| lbl.textContent=`⛔ Wait ${Math.ceil(r/60000)}m`; | |
| setTimeout(()=>lbl.textContent=orig,2000); | |
| } | |
| /* ───────────────────────────────────────────── | |
| STATUS BAR | |
| ───────────────────────────────────────────── */ | |
| function updateStatus(state) { | |
| const badge=$('statusBadge'), msg=$('statusMsg'); | |
| const ts=+localStorage.getItem(CACHE_TIME)||0; | |
| const ago=ts?Math.round((Date.now()-ts)/60000):null; | |
| const map={ | |
| loading:{cls:'seed', icon:'⏳', text:'Fetching from Finnhub…'}, | |
| live: {cls:'live', icon:'🟢', text:`Finnhub · ${ago===0?'just now':ago+'min ago'} · real-time quotes`}, | |
| cached: {cls:'cached', icon:'📦', text:`Cached · ${ago} min ago · press Fetch to refresh`}, | |
| error: {cls:'error', icon:'❌', text:'Finnhub error — check API key. Showing best available data.'}, | |
| nokey: {cls:'seed', icon:'🔑', text:'No API key — click Fetch Live Data to enter your free Finnhub key'}, | |
| seed: {cls:'seed', icon:'📦', text:'Seed data — press Fetch Live Data to load real Finnhub prices'}, | |
| }; | |
| const s=map[state]||map.seed; | |
| badge.className=`data-badge ${s.cls}`; | |
| badge.textContent=`${s.icon} ${state==='live'?'Live':state==='cached'?'Cached':state==='error'?'Error':state==='nokey'?'No Key':'Seed Data'}`; | |
| msg.textContent=s.text; | |
| } | |
| /* ───────────────────────────────────────────── | |
| OVERLAY | |
| ───────────────────────────────────────────── */ | |
| function showOverlay(show, msg='') { | |
| const el=$('tableOverlay'); | |
| el.classList.toggle('hidden',!show); | |
| if(msg) $('overlayMsg').textContent=msg; | |
| } | |
| /* ───────────────────────────────────────────── | |
| FILTERS & RENDER | |
| ───────────────────────────────────────────── */ | |
| function getFilterValues() { | |
| return { | |
| days: +$('fDays').value, | |
| yieldMin: +$('fYieldMin').value, | |
| yieldMax: +$('fYieldMax').value, | |
| yieldType: $('fYieldType').value, | |
| caps: [...document.querySelectorAll('.f-cap:checked')].map(e=>e.value), | |
| sector: $('fSector').value, | |
| freq: $('fFreq').value, | |
| exclETF: $('tExclETF').checked, | |
| exclREIT: $('tExclREIT').checked, | |
| highYield: $('tHighYield').checked, | |
| consistent: $('tConsistent').checked, | |
| volume: +$('fVolume').value, | |
| q: ($('globalSearch').value||'').trim().toUpperCase(), | |
| }; | |
| } | |
| function applyFilters() { | |
| const f=getFilterValues(); | |
| const td=today(); | |
| const maxDate=addDays(td,f.days); | |
| filteredData = DATA.filter(d => { | |
| const exDate = new Date(d.exDivDate); | |
| exDate.setHours(0,0,0,0); | |
| if(exDate<td || exDate>maxDate) return false; | |
| const y = f.yieldType==='fwd' ? (d.fwdYield||d.yield) : d.yield; | |
| if(y<f.yieldMin || y>f.yieldMax) return false; | |
| if(!f.caps.includes(capLabel(d.marketCapRank))) return false; | |
| if(f.sector && d.sector!==f.sector) return false; | |
| if(f.freq && d.frequency!==f.freq) return false; | |
| if(f.exclETF && d.isETF) return false; | |
| if(f.exclREIT && d.isREIT) return false; | |
| if(f.highYield && y<4) return false; | |
| if(f.consistent && d.consistency<90) return false; | |
| if(d.avgVolume<f.volume) return false; | |
| if(f.q && !d.ticker.includes(f.q) && !d.company.toUpperCase().includes(f.q)) return false; | |
| return true; | |
| }); | |
| // Sort | |
| filteredData.sort((a,b) => { | |
| const k=currentSort.key; | |
| let av=a[k], bv=b[k]; | |
| if(k==='yield') { av=f.yieldType==='fwd'?(a.fwdYield||a.yield):a.yield; bv=f.yieldType==='fwd'?(b.fwdYield||b.yield):b.yield; } | |
| if(k==='daysOut') { av=daysFromToday(a.exDivDate); bv=daysFromToday(b.exDivDate); } | |
| if(typeof av==='string') return currentSort.asc?av.localeCompare(bv):bv.localeCompare(av); | |
| return currentSort.asc ? av-bv : bv-av; | |
| }); | |
| renderTable(); | |
| updateStats(); | |
| } | |
| function renderTable() { | |
| const tbody=$('divBody'); | |
| if(!filteredData.length) { | |
| tbody.innerHTML=`<tr><td colspan="11"><div class="empty-state"><div class="ei">📭</div><p>No dividend events match your filters.<br><span style="font-size:.8rem">Try widening the date range or yield window.</span></p></div></td></tr>`; | |
| $('resultCount').textContent='0'; | |
| return; | |
| } | |
| $('resultCount').textContent=filteredData.length; | |
| tbody.innerHTML = filteredData.map(d => { | |
| const yld = d.yield; | |
| const rowId = 'row-' + d.ticker; | |
| const drawId = 'draw-' + d.ticker; | |
| return `<tr id="${rowId}" onclick="toggleDrawer('${d.ticker}')"> | |
| <td><div class="ticker-cell"><span class="ticker-sym">${d.ticker}${d.isETF?' <span style="font-size:.6rem;color:var(--text2)">ETF</span>':''}</span><span class="ticker-name">${d.company}</span></div></td> | |
| <td>${exDivBadge(d.exDivDate)}</td> | |
| <td style="font-family:monospace;font-weight:700;color:var(--gold)">$${d.amount.toFixed(3)}</td> | |
| <td>${yieldBar(yld)}</td> | |
| <td style="font-family:monospace">${fmtPrice(d.price)}</td> | |
| <td>${chgCell(d.chg1d)}</td> | |
| <td style="color:var(--text2);font-size:.8rem">${fmtDate(d.payDate)}</td> | |
| <td>${freqBadge(d.frequency)}</td> | |
| <td>${sectorBadge(d.sector)}</td> | |
| <td>${capBadge(d.marketCapRank)}</td> | |
| <td>${consistencyDots(d.consistency)}</td> | |
| </tr> | |
| <tr class="drawer-row" id="${drawId}"> | |
| <td class="drawer-cell" colspan="11"> | |
| <div class="drawer-inner" id="drawerContent-${d.ticker}"></div> | |
| </td> | |
| </tr>`; | |
| }).join(''); | |
| } | |
| /* ───────────────────────────────────────────── | |
| DRAWER | |
| ───────────────────────────────────────────── */ | |
| function toggleDrawer(ticker) { | |
| const drawEl = document.getElementById('draw-' + ticker); | |
| const rowEl = document.getElementById('row-' + ticker); | |
| if(!drawEl) return; | |
| const isOpen = drawEl.classList.contains('open'); | |
| // Close any open drawer | |
| if(activeDrawer && activeDrawer!==ticker) { | |
| const prev = document.getElementById('draw-' + activeDrawer); | |
| const prevRow = document.getElementById('row-' + activeDrawer); | |
| if(prev) prev.classList.remove('open'); | |
| if(prevRow) prevRow.classList.remove('expanded'); | |
| // Destroy chart | |
| if(histCharts[activeDrawer]) { histCharts[activeDrawer].destroy(); delete histCharts[activeDrawer]; } | |
| } | |
| if(isOpen) { | |
| drawEl.classList.remove('open'); | |
| rowEl.classList.remove('expanded'); | |
| if(histCharts[ticker]) { histCharts[ticker].destroy(); delete histCharts[ticker]; } | |
| activeDrawer=null; | |
| } else { | |
| drawEl.classList.add('open'); | |
| rowEl.classList.add('expanded'); | |
| activeDrawer=ticker; | |
| renderDrawer(ticker); | |
| } | |
| } | |
| function renderDrawer(ticker) { | |
| const d = DATA.find(x=>x.ticker===ticker); | |
| if(!d) return; | |
| const el = document.getElementById('drawerContent-'+ticker); | |
| const days = daysFromToday(d.exDivDate); | |
| const annDiv = d.annualDiv.toFixed(2); | |
| const breakeven = d.price ? (d.price - d.amount).toFixed(2) : '—'; | |
| el.innerHTML = ` | |
| <div class="drawer-grid"> | |
| <div> | |
| <div class="drawer-section-title">📅 Upcoming Dividend Event</div> | |
| <div class="div-event-card"> | |
| <div class="event-row"><span class="event-label">Ex-Dividend Date</span><span class="event-val" style="color:${days<=7?'var(--emerald)':days<=14?'var(--amber)':'var(--text)'}">${fmtDate(d.exDivDate)} (${days}d away)</span></div> | |
| <div class="event-row"><span class="event-label">Record Date</span><span class="event-val">${fmtDate(d.recordDate)}</span></div> | |
| <div class="event-row"><span class="event-label">Payment Date</span><span class="event-val">${fmtDate(d.payDate)}</span></div> | |
| <div class="event-row"><span class="event-label">Announced</span><span class="event-val">${fmtDate(d.annDate)}</span></div> | |
| <div class="event-row"><span class="event-label">Dividend Amount</span><span class="event-val" style="color:var(--gold)">$${d.amount.toFixed(3)} / share</span></div> | |
| <div class="event-row"><span class="event-label">Annual Dividend</span><span class="event-val">$${annDiv}</span></div> | |
| <div class="event-row"><span class="event-label">Frequency</span><span class="event-val">${d.frequency}</span></div> | |
| <div class="event-row"><span class="event-label">Breakeven Price</span><span class="event-val">$${breakeven}</span></div> | |
| </div> | |
| <div style="margin-top:.6rem;font-size:.72rem;color:var(--text2);line-height:1.5"> | |
| ⚠️ <strong>Must own shares by:</strong> Close of <strong style="color:var(--amber)">${fmtDate(addDays(new Date(d.exDivDate),-1))}</strong> to receive this dividend. | |
| </div> | |
| </div> | |
| <div> | |
| <div class="drawer-section-title">📊 Yield & Valuation</div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">TTM Yield</span><span class="drawer-stat-val" style="color:var(--gold)">${d.yield.toFixed(2)}%</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Forward Yield</span><span class="drawer-stat-val" style="color:var(--gold)">${(d.fwdYield||d.yield).toFixed(2)}%</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Annual Dividend</span><span class="drawer-stat-val">$${annDiv}</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Current Price</span><span class="drawer-stat-val">${fmtPrice(d.price)}</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">1D Change</span><span class="drawer-stat-val">${chgCell(d.chg1d)}</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Market Cap</span><span class="drawer-stat-val">${capLabel(d.marketCapRank)}</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Avg Volume</span><span class="drawer-stat-val">${(d.avgVolume/1e6).toFixed(1)}M</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Payout Consistency</span><span class="drawer-stat-val" style="color:var(--emerald)">${d.consistency}%</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Sector</span><span class="drawer-stat-val">${d.sector}</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Is ETF</span><span class="drawer-stat-val">${d.isETF?'Yes':'No'}</span></div> | |
| <div class="drawer-stat-row"><span class="drawer-stat-label">Is REIT</span><span class="drawer-stat-val">${d.isREIT?'Yes':'No'}</span></div> | |
| </div> | |
| <div> | |
| <div class="drawer-section-title">📈 Dividend History (Last 8 Qtrs)</div> | |
| <div class="hist-chart-wrap"><canvas id="histChart-${ticker}"></canvas></div> | |
| <div style="margin-top:.5rem;font-size:.72rem;color:var(--text2)"> | |
| Each bar = one dividend payment. Height = per-share amount. | |
| </div> | |
| <div style="margin-top:.85rem"> | |
| <a href="https://finance.yahoo.com/quote/${ticker}" target="_blank" | |
| class="btn btn-ghost" style="font-size:.78rem;padding:.35rem .75rem;text-decoration:none"> | |
| 📊 Yahoo Finance → | |
| </a> | |
| <a href="https://www.dividend.com/stocks/${ticker.toLowerCase()}" target="_blank" | |
| class="btn btn-ghost" style="font-size:.78rem;padding:.35rem .75rem;text-decoration:none;margin-left:.4rem"> | |
| 💰 Dividend.com → | |
| </a> | |
| </div> | |
| </div> | |
| </div>`; | |
| // Draw history chart | |
| setTimeout(() => { | |
| const canvas = document.getElementById('histChart-'+ticker); | |
| if(!canvas || !d.history?.length) return; | |
| if(histCharts[ticker]) histCharts[ticker].destroy(); | |
| const trending = d.history[d.history.length-1] >= d.history[0]; | |
| histCharts[ticker] = new Chart(canvas, { | |
| type:'bar', | |
| data:{ | |
| labels: d.history.map((_,i)=>`Q${i+1}`), | |
| datasets:[{ | |
| data: d.history, | |
| backgroundColor: d.history.map(v => v===Math.max(...d.history)?'rgba(251,191,36,.9)':'rgba(251,191,36,.4)'), | |
| borderColor:'rgba(251,191,36,.6)', | |
| borderWidth:1, | |
| borderRadius:3, | |
| }] | |
| }, | |
| options:{ | |
| responsive:true, maintainAspectRatio:false, animation:false, | |
| plugins:{legend:{display:false},tooltip:{callbacks:{label:c=>`$${c.raw.toFixed(3)}`}}}, | |
| scales:{ | |
| x:{grid:{display:false},ticks:{color:'#94a3b8',font:{size:10}}}, | |
| y:{grid:{color:'rgba(255,255,255,.05)'},ticks:{color:'#94a3b8',font:{size:10},callback:v=>'$'+v.toFixed(2)}} | |
| } | |
| } | |
| }); | |
| }, 50); | |
| } | |
| /* ───────────────────────────────────────────── | |
| SORT | |
| ───────────────────────────────────────────── */ | |
| function setSort(key, btn) { | |
| if(currentSort.key===key) currentSort.asc=!currentSort.asc; | |
| else { currentSort={key,asc:key==='daysOut'}; } | |
| // Update sort buttons | |
| document.querySelectorAll('.sort-btn').forEach(b=>b.classList.remove('active')); | |
| if(btn) btn.classList.add('active'); | |
| applyFilters(); | |
| } | |
| /* ───────────────────────────────────────────── | |
| STAT STRIP | |
| ───────────────────────────────────────────── */ | |
| function updateStats() { | |
| fv('statTotal', filteredData.length); | |
| if(!filteredData.length) { fv('statAvgYield','—'); fv('statAvgDays','—'); fv('statHighYield','—'); fv('statThisWeek','—'); return; } | |
| const avgY = filteredData.reduce((a,d)=>a+d.yield,0)/filteredData.length; | |
| fv('statAvgYield', avgY.toFixed(2)+'%'); | |
| const avgD = filteredData.reduce((a,d)=>a+daysFromToday(d.exDivDate),0)/filteredData.length; | |
| fv('statAvgDays', Math.round(avgD)+'d'); | |
| const high = filteredData.filter(d=>d.yield>=4).length; | |
| fv('statHighYield', high); | |
| const week = filteredData.filter(d=>daysFromToday(d.exDivDate)<=7).length; | |
| fv('statThisWeek', week); | |
| } | |
| /* ───────────────────────────────────────────── | |
| EXPORT CSV | |
| ───────────────────────────────────────────── */ | |
| function exportCSV() { | |
| const headers=['Ticker','Company','Sector','Ex-Div Date','Pay Date','Amount','Yield%','Annual Div','Frequency','Market Cap','Price','1D%','Consistency%','Is ETF','Is REIT']; | |
| const rows = filteredData.map(d=>[ | |
| d.ticker, `"${d.company}"`, d.sector, d.exDivDate, d.payDate, | |
| d.amount, d.yield, d.annualDiv, d.frequency, capLabel(d.marketCapRank), | |
| d.price||'', d.chg1d||'', d.consistency, d.isETF?'Yes':'No', d.isREIT?'Yes':'No' | |
| ]); | |
| const csv=[headers,...rows].map(r=>r.join(',')).join('\n'); | |
| const a=document.createElement('a'); | |
| a.href='data:text/csv;charset=utf-8,'+encodeURIComponent(csv); | |
| a.download=`finwise_dividends_${new Date().toISOString().slice(0,10)}.csv`; | |
| a.click(); | |
| } | |
| /* ───────────────────────────────────────────── | |
| RESET FILTERS | |
| ───────────────────────────────────────────── */ | |
| function resetFilters() { | |
| $('fDays').value=56; fv('fDaysVal','56d (~8wk)'); | |
| $('fYieldMin').value=0; fv('fYieldMinVal','0%'); | |
| $('fYieldMax').value=15; fv('fYieldMaxVal','15%'); | |
| $('fSector').value=''; $('fFreq').value=''; $('fVolume').value=0; | |
| $('tExclETF').checked=false; $('tExclREIT').checked=false; | |
| $('tHighYield').checked=false; $('tConsistent').checked=false; | |
| $('globalSearch').value=''; | |
| document.querySelectorAll('.f-cap').forEach(c=>c.checked=true); | |
| applyFilters(); | |
| } | |
| /* ───────────────────────────────────────────── | |
| API KEY MODAL | |
| ───────────────────────────────────────────── */ | |
| function showKeyModal(){ $('keyModal').classList.remove('hidden'); $('keyInput').value=FINNHUB_KEY; setTimeout(()=>$('keyInput').focus(),50); } | |
| function hideKeyModal(){ $('keyModal').classList.add('hidden'); } | |
| async function confirmKey(){ | |
| const k=$('keyInput').value.trim(); | |
| if(!k){ $('keyInput').style.borderColor='var(--rose)'; return; } | |
| FINNHUB_KEY=k; localStorage.setItem(KEY_STORE,k); | |
| hideKeyModal(); | |
| setCD(); startCDDisplay(); | |
| await fetchLiveData(); | |
| } | |
| function clearKey(){ FINNHUB_KEY=''; localStorage.removeItem(KEY_STORE); $('keyInput').value=''; updateStatus('nokey'); } | |
| document.addEventListener('keydown', e=>{ | |
| if(e.key==='Escape') hideKeyModal(); | |
| }); | |
| $('keyInput')?.addEventListener('keydown',e=>{ if(e.key==='Enter') confirmKey(); }); | |
| /* ───────────────────────────────────────────── | |
| INIT | |
| ───────────────────────────────────────────── */ | |
| document.addEventListener('DOMContentLoaded',()=>{ | |
| // Load from cache if fresh | |
| const cached=loadCache(); | |
| if(cached) { DATA=cached; updateStatus('cached'); } | |
| else updateStatus(hasKey()?'seed':'nokey'); | |
| // Restore cooldown | |
| if(remainingCD()>0) startCDDisplay(); | |
| applyFilters(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |