471 lines
14 KiB
Svelte
471 lines
14 KiB
Svelte
<script>
|
||
import { onMount } from 'svelte'
|
||
import { api } from '../lib/api.js'
|
||
import { notify } from '../lib/store.js'
|
||
|
||
let signals = []
|
||
let loading = true
|
||
let scanning = false
|
||
let etoroCount = 0
|
||
|
||
// Filtres
|
||
let filterEtoro = false
|
||
let filterMinRsi = ''
|
||
let filterMaxRsi = ''
|
||
let filterAlert = ''
|
||
let filterCap = '' // 'small' | 'mid' | 'large' | ''
|
||
let filterMinScore = ''
|
||
|
||
onMount(async () => {
|
||
load()
|
||
try {
|
||
const stats = await api.etoroStats()
|
||
etoroCount = stats.instruments ?? 0
|
||
} catch {}
|
||
})
|
||
|
||
async function load() {
|
||
loading = true
|
||
try {
|
||
signals = await api.getSignals(filterEtoro)
|
||
} catch(e) {
|
||
notify('Erreur chargement : ' + e.message, 'error')
|
||
signals = []
|
||
} finally {
|
||
loading = false
|
||
}
|
||
}
|
||
|
||
async function scan() {
|
||
scanning = true
|
||
try {
|
||
await api.triggerScan()
|
||
notify('Scan lancé — résultats dans quelques secondes', 'info')
|
||
setTimeout(load, 10000)
|
||
} catch(e) {
|
||
notify('Erreur scan : ' + e.message, 'error')
|
||
} finally {
|
||
scanning = false
|
||
}
|
||
}
|
||
|
||
async function syncEtoro() {
|
||
try {
|
||
await api.syncEtoro()
|
||
notify('Sync eToro lancé — ~5000 instruments à charger', 'info')
|
||
setTimeout(async () => {
|
||
const stats = await api.etoroStats()
|
||
etoroCount = stats.instruments ?? 0
|
||
}, 8000)
|
||
} catch(e) {
|
||
notify('Erreur sync eToro : ' + e.message, 'error')
|
||
}
|
||
}
|
||
|
||
$: filtered = signals.filter(s => {
|
||
if (filterEtoro && !s.on_etoro) return false
|
||
if (filterMinRsi !== '' && s.rsi14 < +filterMinRsi) return false
|
||
if (filterMaxRsi !== '' && s.rsi14 > +filterMaxRsi) return false
|
||
if (filterAlert && s.alert !== filterAlert) return false
|
||
if (filterMinScore !== '' && s.score < +filterMinScore) return false
|
||
if (filterCap) {
|
||
const cap = s.market_cap
|
||
if (filterCap === 'small' && !(cap > 0 && cap < 2e9)) return false
|
||
if (filterCap === 'mid' && !(cap >= 2e9 && cap < 10e9)) return false
|
||
if (filterCap === 'large' && !(cap >= 10e9)) return false
|
||
}
|
||
return true
|
||
})
|
||
|
||
function rsiClass(rsi) {
|
||
if (rsi <= 0) return ''
|
||
if (rsi < 30) return 'oversold'
|
||
if (rsi > 70) return 'overbought'
|
||
return ''
|
||
}
|
||
|
||
function alertLabel(alert) {
|
||
const map = {
|
||
mega_insider_buy: '🐋 Mega Insider',
|
||
deep_value_reversal: '📉→↑ Deep Value',
|
||
oversold: '▼ Oversold',
|
||
overbought: '▲ Overbought',
|
||
macd_cross_up: '↑ MACD bull',
|
||
macd_cross_down: '↓ MACD bear',
|
||
volume_spike: '⚡ Vol spike',
|
||
}
|
||
return map[alert] || alert
|
||
}
|
||
|
||
function alertClass(alert) {
|
||
if (['mega_insider_buy','oversold','macd_cross_up','deep_value_reversal'].includes(alert)) return 'green'
|
||
if (['overbought','macd_cross_down'].includes(alert)) return 'red'
|
||
if (alert === 'volume_spike') return 'orange'
|
||
return ''
|
||
}
|
||
|
||
function fmtInsider(v) {
|
||
if (!v) return ''
|
||
if (v >= 1e6) return '$' + (v/1e6).toFixed(1) + 'M'
|
||
if (v >= 1e3) return '$' + (v/1e3).toFixed(0) + 'K'
|
||
return '$' + v
|
||
}
|
||
|
||
function scoreClass(score) {
|
||
if (score >= 60) return 'score-high'
|
||
if (score >= 35) return 'score-mid'
|
||
return 'score-low'
|
||
}
|
||
|
||
function fmtCap(v) {
|
||
if (!v) return '—'
|
||
if (v >= 1e12) return '$' + (v / 1e12).toFixed(1) + 'T'
|
||
if (v >= 1e9) return '$' + (v / 1e9).toFixed(1) + 'B'
|
||
if (v >= 1e6) return '$' + (v / 1e6).toFixed(0) + 'M'
|
||
return '$' + v
|
||
}
|
||
|
||
function fmt(v, d = 2) {
|
||
if (v == null || v === 0) return '—'
|
||
return (+v).toFixed(d)
|
||
}
|
||
|
||
function volRatio(vol, avg) {
|
||
if (!avg) return null
|
||
return vol / avg
|
||
}
|
||
|
||
function capLabel(cap) {
|
||
if (!cap) return ''
|
||
if (cap < 2e9) return 'Small'
|
||
if (cap < 10e9) return 'Mid'
|
||
return 'Large'
|
||
}
|
||
</script>
|
||
|
||
<div class="page">
|
||
<div class="header">
|
||
<h1>Screener</h1>
|
||
<div class="header-actions">
|
||
<div class="etoro-badge" class:active={etoroCount > 0} title="Instruments eToro chargés">
|
||
eToro {etoroCount > 0 ? etoroCount.toLocaleString() : '—'}
|
||
{#if etoroCount === 0}
|
||
<button class="btn-load-etoro" on:click={syncEtoro}>Charger</button>
|
||
{/if}
|
||
</div>
|
||
<button class="btn-scan" on:click={scan} disabled={scanning}>
|
||
{scanning ? '…' : '⊙ Scanner'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<label class="toggle">
|
||
<input type="checkbox" bind:checked={filterEtoro} on:change={load} />
|
||
<span>eToro uniquement</span>
|
||
</label>
|
||
|
||
<div class="filter-group">
|
||
<label for="cap-filter">Market Cap</label>
|
||
<select id="cap-filter" bind:value={filterCap}>
|
||
<option value="">Toutes</option>
|
||
<option value="small">Small (< $2B)</option>
|
||
<option value="mid">Mid ($2B–$10B)</option>
|
||
<option value="large">Large (> $10B)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="score-min">Score min</label>
|
||
<input id="score-min" type="number" bind:value={filterMinScore} placeholder="ex: 40" min="0" max="100" />
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="rsi-min">RSI min</label>
|
||
<input id="rsi-min" type="number" bind:value={filterMinRsi} placeholder="0" min="0" max="100" />
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="rsi-max">RSI max</label>
|
||
<input id="rsi-max" type="number" bind:value={filterMaxRsi} placeholder="100" min="0" max="100" />
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<label for="alert-filter">Alerte</label>
|
||
<select id="alert-filter" bind:value={filterAlert}>
|
||
<option value="">Toutes</option>
|
||
<option value="oversold">▼ Oversold</option>
|
||
<option value="overbought">▲ Overbought</option>
|
||
<option value="macd_cross_up">↑ MACD bull</option>
|
||
<option value="macd_cross_down">↓ MACD bear</option>
|
||
<option value="volume_spike">⚡ Vol spike</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button class="btn-reset" on:click={() => { filterMinRsi=''; filterMaxRsi=''; filterAlert=''; filterCap=''; filterMinScore=''; filterEtoro=false; load() }}>
|
||
Reset
|
||
</button>
|
||
</div>
|
||
|
||
{#if loading}
|
||
<p class="muted">Chargement…</p>
|
||
{:else if signals.length === 0}
|
||
<div class="empty-state">
|
||
<div class="icon">⊞</div>
|
||
<p>Aucun signal — ajoute des tickers dans la <a href="#/watchlist">Watchlist</a> puis clique <strong>⊙ Scanner</strong>.</p>
|
||
</div>
|
||
{:else}
|
||
<div class="count">{filtered.length} / {signals.length} tickers</div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Score</th>
|
||
<th>Ticker</th>
|
||
<th>Cap</th>
|
||
<th class="num">Prix</th>
|
||
<th class="num">Chg%</th>
|
||
<th class="num">RSI(14)</th>
|
||
<th class="num">MACD histo</th>
|
||
<th class="num">Vol/Avg</th>
|
||
<th class="num">52w%</th>
|
||
<th class="num">Insider 30j</th>
|
||
<th class="num">Mkt Cap</th>
|
||
<th class="num">Short</th>
|
||
<th>Alerte</th>
|
||
<th>eToro</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{#each filtered as s}
|
||
{@const ratio = volRatio(s.volume, s.avg_volume20)}
|
||
<tr class:has-alert={s.alert} class:high-score={s.score >= 60}>
|
||
<td>
|
||
<span class="score-pill {scoreClass(s.score)}">{s.score}</span>
|
||
</td>
|
||
<td>
|
||
<div class="ticker">{s.ticker}</div>
|
||
{#if s.name && s.name !== s.ticker}
|
||
<div class="ticker-name">{s.name}</div>
|
||
{/if}
|
||
</td>
|
||
<td><span class="cap-label">{capLabel(s.market_cap)}</span></td>
|
||
<td class="num">${fmt(s.price)}</td>
|
||
<td class="num" class:green={s.change_pct > 0} class:red={s.change_pct < 0}>
|
||
{s.change_pct > 0 ? '+' : ''}{fmt(s.change_pct)}%
|
||
</td>
|
||
<td class="num rsi {rsiClass(s.rsi14)}">{fmt(s.rsi14, 1)}</td>
|
||
<td class="num" class:green={s.macd_hist > 0} class:red={s.macd_hist < 0}>
|
||
{fmt(s.macd_hist, 3)}
|
||
</td>
|
||
<td class="num" class:vol-spike={ratio && ratio > 2}>
|
||
{ratio ? ratio.toFixed(1) + 'x' : '—'}
|
||
</td>
|
||
<td class="num pct-from-high" class:deep-value={s.pct_from_high < -40}>
|
||
{s.pct_from_high ? fmt(s.pct_from_high, 1) + '%' : '—'}
|
||
</td>
|
||
<td class="num" class:insider-big={s.insider_value_30d >= 1_000_000}>
|
||
{fmtInsider(s.insider_value_30d)}
|
||
</td>
|
||
<td class="num">{fmtCap(s.market_cap)}</td>
|
||
<td class="num">{s.short_ratio > 0 ? fmt(s.short_ratio, 1) + 'd' : '—'}</td>
|
||
<td>
|
||
{#if s.alert}
|
||
<span class="badge {alertClass(s.alert)}">{alertLabel(s.alert)}</span>
|
||
{/if}
|
||
</td>
|
||
<td class="center">
|
||
{#if s.on_etoro}<span class="etoro-dot" title="Disponible sur eToro">●</span>{/if}
|
||
</td>
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
|
||
<style>
|
||
.page h1 { color: #e6edf3; font-size: 1.4rem; margin: 0; }
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
|
||
|
||
.etoro-badge {
|
||
font-size: 0.78rem;
|
||
color: #484f58;
|
||
border: 1px solid #21262d;
|
||
border-radius: 6px;
|
||
padding: 0.35rem 0.75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
.etoro-badge.active { color: #3fb950; border-color: #3fb950; }
|
||
|
||
.btn-load-etoro {
|
||
background: none;
|
||
border: none;
|
||
color: #58a6ff;
|
||
font-size: 0.78rem;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.btn-scan {
|
||
background: #1f6feb;
|
||
border: none;
|
||
border-radius: 6px;
|
||
color: #fff;
|
||
padding: 0.5rem 1.25rem;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
}
|
||
.btn-scan:disabled { opacity: 0.5; }
|
||
|
||
.filters {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
align-items: flex-end;
|
||
margin-bottom: 1.25rem;
|
||
padding: 1rem 1.25rem;
|
||
background: #161b22;
|
||
border: 1px solid #21262d;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
cursor: pointer;
|
||
font-size: 0.875rem;
|
||
color: #8b949e;
|
||
align-self: flex-end;
|
||
padding-bottom: 0.1rem;
|
||
}
|
||
.toggle input { accent-color: #3fb950; }
|
||
|
||
.filter-group { display: flex; flex-direction: column; gap: 0.3rem; }
|
||
label { font-size: 0.72rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.05em; }
|
||
|
||
input[type="number"], select {
|
||
background: #0d1117;
|
||
border: 1px solid #30363d;
|
||
border-radius: 6px;
|
||
color: #e6edf3;
|
||
padding: 0.4rem 0.6rem;
|
||
font-size: 0.875rem;
|
||
outline: none;
|
||
width: 110px;
|
||
}
|
||
input:focus, select:focus { border-color: #58a6ff; }
|
||
select option { background: #161b22; }
|
||
|
||
.btn-reset {
|
||
background: none;
|
||
border: 1px solid #30363d;
|
||
border-radius: 6px;
|
||
color: #8b949e;
|
||
padding: 0.4rem 0.75rem;
|
||
font-size: 0.8rem;
|
||
align-self: flex-end;
|
||
}
|
||
.btn-reset:hover { color: #e6edf3; }
|
||
|
||
.count { font-size: 0.78rem; color: #484f58; margin-bottom: 0.75rem; }
|
||
|
||
.table-wrap { overflow-x: auto; }
|
||
|
||
table { width: 100%; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; }
|
||
|
||
th {
|
||
text-align: left;
|
||
color: #8b949e;
|
||
font-weight: 500;
|
||
padding: 0.5rem 0.75rem;
|
||
border-bottom: 1px solid #21262d;
|
||
font-size: 0.72rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
th.num { text-align: right; }
|
||
|
||
td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #161b22; color: #c9d1d9; }
|
||
td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||
td.center { text-align: center; }
|
||
|
||
tr:hover td { background: #161b22; }
|
||
tr.has-alert td { background: #0d180d; }
|
||
tr.high-score td { background: #0d1a10; }
|
||
tr.high-score:hover td { background: #112214; }
|
||
|
||
.score-pill {
|
||
display: inline-block;
|
||
padding: 0.2rem 0.55rem;
|
||
border-radius: 12px;
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
min-width: 32px;
|
||
text-align: center;
|
||
}
|
||
.score-high { background: #0d3320; color: #3fb950; }
|
||
.score-mid { background: #2d2200; color: #d29922; }
|
||
.score-low { background: #1c1c1c; color: #484f58; }
|
||
|
||
.ticker { font-weight: 600; color: #58a6ff; }
|
||
.ticker-name { font-size: 0.72rem; color: #484f58; margin-top: 1px; }
|
||
|
||
.cap-label {
|
||
font-size: 0.7rem;
|
||
color: #8b949e;
|
||
border: 1px solid #30363d;
|
||
border-radius: 3px;
|
||
padding: 0.1rem 0.35rem;
|
||
}
|
||
|
||
.green { color: #3fb950; }
|
||
.red { color: #f85149; }
|
||
|
||
.rsi.oversold { color: #3fb950; font-weight: 600; }
|
||
.rsi.overbought { color: #f85149; font-weight: 600; }
|
||
|
||
.vol-spike { color: #d29922; font-weight: 600; }
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 0.15rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
background: #21262d;
|
||
color: #8b949e;
|
||
}
|
||
.badge.green { background: #0d2c1a; color: #3fb950; }
|
||
.badge.red { background: #2c0d0d; color: #f85149; }
|
||
.badge.orange { background: #2d1f00; color: #d29922; }
|
||
|
||
.etoro-dot { color: #3fb950; font-size: 0.9rem; }
|
||
|
||
.pct-from-high { color: #8b949e; }
|
||
.pct-from-high.deep-value { color: #d29922; font-weight: 600; }
|
||
|
||
.insider-big { color: #3fb950; font-weight: 700; }
|
||
|
||
.empty-state { text-align: center; padding: 3rem; color: #484f58; }
|
||
.empty-state .icon { font-size: 2.5rem; margin-bottom: 1rem; }
|
||
.empty-state p { font-size: 0.9rem; }
|
||
.empty-state a { color: #58a6ff; }
|
||
.empty-state strong { color: #8b949e; }
|
||
|
||
.muted { color: #484f58; font-size: 0.875rem; }
|
||
</style>
|