mirror of
https://github.com/Alkatrazz24/Funk-lab.git
synced 2026-07-08 05:34:43 +02:00
ALI YESILKAYA
9d55cc803d
Procédure de mise à jour du portefeuille « à chaque trade » à partir des relevés Revolut, sans IA (exact). - finlab/revolut.py : reconstruit les positions depuis le « trading account statement » (toutes transactions) par COÛT MOYEN (achats − ventes, PRU pondéré), mappe les tickers Revolut→Yahoo (ASME→ASML.AS, TOTB→TTE.PA, BNP→BNP.PA, AXA→CS.PA, FTE→ORA.PA, AIR1→AI.PA) et vérifie les cours. Idempotent, ne touche qu'un compte, préserve les autres comptes/cash/commentaires (round-trip ruamel.yaml) - CLI : python -m finlab.cli import-revolut <csv> [--write] [--account] - Dashboard : le bouton « Importer un relevé » accepte les CSV → endpoints /api/revolut/preview (aperçu) + /api/revolut/apply (écrit), avec garde anti-évasion de chemin ; le front affiche les positions + bouton « Appliquer » - portfolio.yaml : compte Revolut reconstruit depuis l'historique complet → ajoute AMAT (achetée le 29/06, manquait) ; valeurs alignées au centime - requirements : + ruamel.yaml ; persona console + admin/ia/finlab.md documentés Validé sur l'historique réel : 11 positions reconstruites = portfolio.yaml existant (cours vérifiés, 0 warning) + AMAT. Flux dashboard upload→preview→apply testé (TestClient), JS OK. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
585 lines
33 KiB
HTML
585 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>FinLab — Dashboard</title>
|
|
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
|
|
<style>
|
|
:root{
|
|
--bg:#0b0e14; --panel:#11151f; --panel2:#161b27; --line:#222a3a;
|
|
--txt:#c8d0e0; --mut:#7a869e; --acc:#5b8cff;
|
|
--up:#2a9d8f; --down:#e76f51; --warn:#e9c46a;
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif}
|
|
a{color:var(--acc);text-decoration:none}
|
|
h1,h2,h3{margin:0;font-weight:600}
|
|
.topbar{display:flex;align-items:center;gap:18px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
|
|
.topbar .brand{font-size:18px;font-weight:700;color:#fff;letter-spacing:.5px}
|
|
.topbar .brand small{color:var(--mut);font-weight:400;font-size:12px}
|
|
.kpi{display:flex;gap:16px;align-items:center;margin-left:auto}
|
|
.kpi .v{font-size:15px;font-weight:600}
|
|
.kpi .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
|
|
.badge{padding:2px 8px;border-radius:6px;font-weight:600}
|
|
.pos{color:var(--up)} .neg{color:var(--down)}
|
|
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:6px 12px;border-radius:7px;cursor:pointer;font-size:13px}
|
|
.btn:hover{border-color:var(--acc);color:#fff}
|
|
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
|
|
.grid{display:grid;grid-template-columns:300px 1fr 300px;gap:12px;padding:12px;min-height:calc(100vh - 53px)}
|
|
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
|
|
.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
|
|
.row{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;align-items:center}
|
|
.row:hover{background:var(--panel2)}
|
|
.row.sel{background:#1b2334;outline:1px solid var(--acc)}
|
|
.acct-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
|
|
.atab{padding:3px 9px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);font-size:12px;cursor:pointer;color:var(--mut)}
|
|
.atab:hover{border-color:var(--acc);color:#fff}
|
|
.atab.on{background:var(--acc);border-color:var(--acc);color:#fff}
|
|
.atag{font-size:11px;opacity:.85}
|
|
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
|
|
.btn.qa{text-align:left;padding:8px 10px;font-size:12.5px}
|
|
#resBody table{width:100%}
|
|
#resBody pre{background:var(--bg);padding:12px;border-radius:8px;white-space:pre-wrap;font-size:12.5px}
|
|
#resBody .kv{display:flex;justify-content:space-between;padding:4px 6px;border-bottom:1px solid var(--line);font-size:13px}
|
|
#resBody .kv b{color:#fff}
|
|
.row .t{font-weight:600;color:#fff}
|
|
.row .s{font-size:12px;color:var(--mut)}
|
|
.mono{font-variant-numeric:tabular-nums}
|
|
table{width:100%;border-collapse:collapse;font-size:12.5px}
|
|
th,td{text-align:right;padding:5px 6px;border-bottom:1px solid var(--line)}
|
|
th{color:var(--mut);font-weight:500;text-transform:uppercase;font-size:10.5px;letter-spacing:.4px}
|
|
th:first-child,td:first-child{text-align:left}
|
|
tbody tr{cursor:pointer}
|
|
tbody tr:hover{background:var(--panel2)}
|
|
.controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
|
|
select,input{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:5px 7px;font-size:12.5px}
|
|
input[type=number]{width:64px}
|
|
#chart{height:420px;width:100%}
|
|
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
|
|
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:12px}
|
|
.chip b{color:#fff}
|
|
.signals{margin-top:8px;font-size:12.5px;color:var(--mut)}
|
|
.perbtn{padding:4px 9px}
|
|
.perbtn.on{background:var(--acc);border-color:var(--acc);color:#fff}
|
|
.alert{display:flex;gap:8px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--line);font-size:12.5px}
|
|
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
|
|
.muted{color:var(--mut)}
|
|
.modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:20}
|
|
.modal.on{display:flex}
|
|
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:380px;max-width:90vw}
|
|
.modal pre{background:var(--bg);padding:12px;border-radius:8px;overflow:auto;white-space:pre-wrap;font-size:13px;color:var(--txt)}
|
|
.err{color:var(--down);font-size:12px}
|
|
.loading{color:var(--mut);font-size:12px;padding:8px}
|
|
/* Console embarquée */
|
|
#consoleFrame{width:100%;height:340px;border:0;border-radius:8px;background:#0b0e14}
|
|
/* Chaîne de valeur IA */
|
|
.layers-wrap{padding:0 12px 16px}
|
|
.layers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
|
|
.layer-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;position:relative}
|
|
.layer-card:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:14px;z-index:1}
|
|
.layer-h{display:flex;gap:8px;align-items:center;margin-bottom:9px}
|
|
.layer-ic{font-size:20px;line-height:1}
|
|
.layer-h b{color:#fff}
|
|
.lchips{display:flex;flex-wrap:wrap;gap:5px}
|
|
.lchip{background:#0e131d;border:1px solid var(--line);border-radius:6px;padding:3px 7px;font-size:12px;cursor:pointer;font-weight:600}
|
|
.lchip:hover{border-color:var(--acc);color:#fff}
|
|
.lchip.up{border-color:var(--up);color:#7fdfd0}
|
|
.lchip.down{border-color:var(--down);color:#f0a08c}
|
|
.lchip.sel{outline:1px solid var(--acc)}
|
|
@media(max-width:1100px){.layers{grid-template-columns:repeat(2,1fr)} .layer-card::after{display:none}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<div class="brand">Fin<span style="color:var(--acc)">Lab</span> <small>dashboard</small></div>
|
|
<div class="kpi">
|
|
<div><div class="l">Portefeuille</div><div class="v mono" id="kTotal">—</div></div>
|
|
<div><div class="l">P&L</div><div class="v mono" id="kPnl">—</div></div>
|
|
<div><div class="l">Cash</div><div class="v mono" id="kCash">—</div></div>
|
|
<div><div class="l">Concentration</div><div class="v" id="kConc">—</div></div>
|
|
<button class="btn" onclick="refreshAll()">↻ Rafraîchir</button>
|
|
<a class="btn acc" href="/console/" target="_blank">⌨ Console IA ↗</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<!-- Colonne gauche : portefeuille + watchlists -->
|
|
<div>
|
|
<div class="panel">
|
|
<h3>Mes comptes <span class="muted" id="pfCount"></span>
|
|
<button class="btn perbtn" style="font-size:11px" title="Image (scannée par l'IA) ou CSV Revolut (import déterministe)" onclick="document.getElementById('importFile').click()">📥 Importer un relevé</button>
|
|
</h3>
|
|
<input type="file" id="importFile" accept="image/*,.csv" style="display:none" onchange="uploadImport(this.files[0])">
|
|
<div class="acct-tabs" id="acctTabs"></div>
|
|
<div id="pfList"><div class="loading">Chargement…</div></div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Watchlists</h3>
|
|
<div class="controls">
|
|
<select id="theme" onchange="loadScan()"></select>
|
|
<label class="muted">cible%<input type="number" id="target" value="5" step="0.5" onchange="loadScan()"></label>
|
|
<label class="muted"><input type="checkbox" id="bullish" onchange="loadScan()"> haussiers</label>
|
|
</div>
|
|
<div id="scanWrap"><div class="loading">—</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonne centre : graphique -->
|
|
<div>
|
|
<div class="panel">
|
|
<h3>
|
|
<span id="chartTitle">Graphique</span>
|
|
<span>
|
|
<button class="btn perbtn" data-p="1mo" onclick="setPeriod('1mo')">1M</button>
|
|
<button class="btn perbtn" data-p="3mo" onclick="setPeriod('3mo')">3M</button>
|
|
<button class="btn perbtn on" data-p="6mo" onclick="setPeriod('6mo')">6M</button>
|
|
<button class="btn perbtn" data-p="1y" onclick="setPeriod('1y')">1A</button>
|
|
</span>
|
|
</h3>
|
|
<div id="chart"></div>
|
|
<div id="legend" class="muted" style="font-size:12px;margin-top:6px">
|
|
<span style="color:#f4a261">— MM50</span> <span style="color:#5b8cff">— MM200</span>
|
|
</div>
|
|
<div class="chiprow" id="techChips"></div>
|
|
<div class="signals" id="techSignals"></div>
|
|
<div class="controls" style="margin-top:12px">
|
|
<button class="btn acc" onclick="openPlan()">📐 Plan de trade</button>
|
|
<button class="btn" onclick="loadAlerts()">🔔 Recharger alertes</button>
|
|
</div>
|
|
</div>
|
|
<!-- Console IA embarquée, sous le graphique -->
|
|
<div class="panel">
|
|
<h3>Console IA
|
|
<span>
|
|
<button class="btn perbtn" onclick="document.getElementById('consoleFrame').src='/console/'">↻ reconnecter</button>
|
|
<a class="btn perbtn" href="/console/" target="_blank">plein écran ↗</a>
|
|
</span>
|
|
</h3>
|
|
<iframe id="consoleFrame" src="/console/" title="Console Claude Code"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonne droite : actions rapides + alertes -->
|
|
<div>
|
|
<div class="panel">
|
|
<h3>Actions rapides <span class="muted" id="qaTicker" style="text-transform:none;letter-spacing:0"></span></h3>
|
|
<div class="qa-grid">
|
|
<button class="btn qa" onclick="qaDigest()">📋 Digest</button>
|
|
<button class="btn qa" onclick="qaAnalyze()">📊 Analyse</button>
|
|
<button class="btn qa" onclick="qaPlanQuick()">📐 Plan R:R</button>
|
|
<button class="btn qa" onclick="qaFundamentals()">📈 Fondamentaux</button>
|
|
<button class="btn qa" onclick="qaOpportunities()">🔭 Opportunités</button>
|
|
<button class="btn qa" onclick="qaAlerts()">🔔 Alertes</button>
|
|
</div>
|
|
<div class="muted" style="font-size:11px;margin-top:7px">Analyse / Plan / Fondamentaux → sur l'action <b>sélectionnée</b> (clique une ligne ou un titre). Le reste = global.</div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Alertes du jour <select id="alertWatch" style="font-size:11px" onchange="loadAlerts()">
|
|
<option value="all">tous</option><option value="portfolio">portefeuille</option></select></h3>
|
|
<div id="alertList"><div class="loading">—</div></div>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Exposition sectorielle</h3>
|
|
<div id="sectors"><div class="loading">—</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chaîne de valeur IA — pleine largeur -->
|
|
<div class="layers-wrap">
|
|
<div class="panel">
|
|
<h3>Chaîne de valeur IA — par couche
|
|
<span class="muted" style="text-transform:none;letter-spacing:0">de l'électron au logiciel ⚡→🔧→🏢→🔌→☁️ ·
|
|
<span class="pos">haussier</span> / <span class="neg">baissier</span> · clic = graphique</span>
|
|
</h3>
|
|
<div class="layers" id="layers"><div class="loading">Analyse des couches…</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal plan de trade -->
|
|
<div class="modal" id="planModal" onclick="if(event.target===this)this.classList.remove('on')">
|
|
<div class="box">
|
|
<h3 style="margin-bottom:10px">Plan de trade — <span id="planTicker"></span></h3>
|
|
<div class="controls">
|
|
<label class="muted">Capital<input type="number" id="planCapital" value="1427" step="50"></label>
|
|
<button class="btn acc" onclick="runPlan()">Calculer</button>
|
|
<button class="btn" onclick="document.getElementById('planModal').classList.remove('on')">Fermer</button>
|
|
</div>
|
|
<pre id="planOut">—</pre>
|
|
<div class="muted" style="font-size:11px">Analyse — pas une recommandation. R:R < 1 = trade structurellement perdant.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal import de relevé -->
|
|
<div class="modal" id="importModal" onclick="if(event.target===this)this.classList.remove('on')">
|
|
<div class="box">
|
|
<h3 style="margin-bottom:10px">Importer un relevé (image)</h3>
|
|
<div id="importOut" class="muted">—</div>
|
|
<div class="controls" style="margin-top:12px">
|
|
<button class="btn" onclick="document.getElementById('importModal').classList.remove('on')">Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal résultats (actions rapides) -->
|
|
<div class="modal" id="resModal" onclick="if(event.target===this)this.classList.remove('on')">
|
|
<div class="box" style="min-width:520px;max-width:760px">
|
|
<h3 style="margin-bottom:10px" id="resTitle">Résultat</h3>
|
|
<div id="resBody" style="max-height:70vh;overflow:auto">—</div>
|
|
<div class="controls" style="margin-top:12px">
|
|
<button class="btn" onclick="document.getElementById('resModal').classList.remove('on')">Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let CHART, S = {}, SEL=null, PERIOD='6mo', CCY='$';
|
|
const fmt = (n,d=0)=> n==null? '—' : Number(n).toLocaleString('fr-FR',{minimumFractionDigits:d,maximumFractionDigits:d});
|
|
const cls = n => n==null?'' : (n>=0?'pos':'neg');
|
|
const sign = n => (n>=0?'+':'')+fmt(n,0);
|
|
|
|
async function api(path){
|
|
const r = await fetch(path);
|
|
const j = await r.json();
|
|
if(j && j.error) throw new Error(j.error);
|
|
return j;
|
|
}
|
|
|
|
// ── Graphique ──────────────────────────────────────────────
|
|
function initChart(){
|
|
const el = document.getElementById('chart');
|
|
CHART = LightweightCharts.createChart(el,{
|
|
width: el.clientWidth, height: 420,
|
|
layout:{background:{color:'#11151f'},textColor:'#7a869e'},
|
|
grid:{vertLines:{color:'#1a2030'},horzLines:{color:'#1a2030'}},
|
|
rightPriceScale:{borderColor:'#222a3a'},
|
|
timeScale:{borderColor:'#222a3a'},
|
|
crosshair:{mode:0},
|
|
});
|
|
S.candle = CHART.addCandlestickSeries({upColor:'#2a9d8f',downColor:'#e76f51',borderVisible:false,wickUpColor:'#2a9d8f',wickDownColor:'#e76f51'});
|
|
S.ma50 = CHART.addLineSeries({color:'#f4a261',lineWidth:1,priceLineVisible:false,lastValueVisible:false});
|
|
S.ma200= CHART.addLineSeries({color:'#5b8cff',lineWidth:1,priceLineVisible:false,lastValueVisible:false});
|
|
S.vol = CHART.addHistogramSeries({priceScaleId:'',priceFormat:{type:'volume'}});
|
|
S.vol.priceScale().applyOptions({scaleMargins:{top:0.82,bottom:0}});
|
|
window.addEventListener('resize',()=>CHART.applyOptions({width:el.clientWidth}));
|
|
}
|
|
|
|
async function loadChart(ticker){
|
|
if(!ticker) return;
|
|
SEL = ticker;
|
|
document.querySelectorAll('.row.sel,tr.sel').forEach(e=>e.classList.remove('sel'));
|
|
document.querySelectorAll('[data-tk="'+ticker+'"]').forEach(e=>e.classList.add('sel'));
|
|
document.getElementById('chartTitle').textContent = ticker + ' · ' + PERIOD;
|
|
document.getElementById('qaTicker').textContent = '· ' + ticker;
|
|
document.getElementById('techChips').innerHTML='<span class="loading">Chargement…</span>';
|
|
document.getElementById('techSignals').textContent='';
|
|
try{
|
|
const d = await api('/api/ohlc?ticker='+encodeURIComponent(ticker)+'&period='+PERIOD);
|
|
S.candle.setData(d.candles);
|
|
S.ma50.setData(d.ma50); S.ma200.setData(d.ma200);
|
|
S.vol.setData(d.volume);
|
|
CHART.timeScale().fitContent();
|
|
renderTech(d.technical);
|
|
}catch(e){
|
|
document.getElementById('techChips').innerHTML='<span class="err">'+e.message+'</span>';
|
|
}
|
|
}
|
|
|
|
function renderTech(t){
|
|
const c = document.getElementById('techChips');
|
|
if(!t){c.innerHTML='<span class="muted">pas de synthèse technique</span>';return;}
|
|
const macdCls = t.MACD==='haussier'?'pos':'neg';
|
|
const rsiCls = t.RSI14>=70?'neg':(t.RSI14<=30?'pos':'');
|
|
c.innerHTML = [
|
|
`<span class="chip">Cours <b>${t.cours}</b></span>`,
|
|
`<span class="chip">RSI <b class="${rsiCls}">${t.RSI14}</b></span>`,
|
|
`<span class="chip">MACD <b class="${macdCls}">${t.MACD}</b></span>`,
|
|
`<span class="chip">MM50 <b>${t.MM50}</b></span>`,
|
|
`<span class="chip">MM200 <b>${t.MM200??'—'}</b></span>`,
|
|
`<span class="chip">Volatilité <b>${t['vol_%']}%</b></span>`,
|
|
].join('');
|
|
document.getElementById('techSignals').textContent = '▸ ' + (t.signaux||[]).join(' · ');
|
|
}
|
|
|
|
function setPeriod(p){
|
|
PERIOD=p;
|
|
document.querySelectorAll('.perbtn').forEach(b=>b.classList.toggle('on',b.dataset.p===p));
|
|
if(SEL) loadChart(SEL);
|
|
}
|
|
|
|
// ── Portefeuille multi-comptes ─────────────────────────────
|
|
let PF=null, ACC='*';
|
|
const acctIcon = t => t==='banque'?'🏦':(t==='crypto'?'🪙':'📊');
|
|
|
|
async function loadPortfolio(){
|
|
try{ PF = await api('/api/portfolio'); CCY = PF.base==='EUR'?'€':PF.base;
|
|
renderAccountTabs(); renderPortfolio(); }
|
|
catch(e){ document.getElementById('pfList').innerHTML='<div class="err">'+e.message+'</div>'; }
|
|
}
|
|
function renderAccountTabs(){
|
|
const tabs = [`<span class="atab${ACC==='*'?' on':''}" onclick="selAcct('*')">Tous</span>`]
|
|
.concat((PF.accounts||[]).map(a=>{
|
|
const nm=a.name.replace(/'/g,"\\'");
|
|
return `<span class="atab${ACC===a.name?' on':''}" onclick="selAcct('${nm}')">${acctIcon(a.type)} ${a.name}</span>`;
|
|
}));
|
|
document.getElementById('acctTabs').innerHTML = tabs.join('');
|
|
}
|
|
function selAcct(name){ ACC=name; renderAccountTabs(); renderPortfolio(); }
|
|
function scope(){
|
|
if(ACC==='*') return {total:PF.total,cash:PF.cash,pnl_total:PF.pnl_total,pnl_pct:PF.pnl_pct,
|
|
by_sector:PF.by_sector, positions:(PF.accounts||[]).flatMap(a=>a.positions.map(p=>({...p,_type:a.type})))};
|
|
const a=(PF.accounts||[]).find(x=>x.name===ACC)||PF.accounts[0];
|
|
return {total:a.total,cash:a.cash,pnl_total:a.pnl_total,pnl_pct:a.pnl_pct,
|
|
by_sector:a.by_sector, positions:a.positions.map(p=>({...p,_type:a.type}))};
|
|
}
|
|
function renderPortfolio(){
|
|
const s=scope();
|
|
document.getElementById('kTotal').textContent = fmt(s.total)+' '+CCY;
|
|
const pnlEl=document.getElementById('kPnl');
|
|
pnlEl.textContent = sign(s.pnl_total)+' '+CCY+' ('+sign(s.pnl_pct)+'%)';
|
|
pnlEl.className = 'v mono '+cls(s.pnl_total);
|
|
document.getElementById('kCash').textContent = fmt(s.cash)+' '+CCY;
|
|
const sectors = Object.entries(s.by_sector||{}).sort((a,b)=>b[1]-a[1]);
|
|
document.getElementById('kConc').textContent = sectors.length?`${sectors[0][0]} ${fmt(sectors[0][1])}%`:'—';
|
|
document.getElementById('pfCount').textContent = s.positions.length+' lignes';
|
|
const showAcct = ACC==='*';
|
|
document.getElementById('pfList').innerHTML = s.positions.map(p=>{
|
|
const poids = s.total ? (p.valeur/s.total*100) : 0; // poids relatif au périmètre courant
|
|
return `<div class="row" data-tk="${p.ticker}" onclick="loadChart('${p.ticker}')">
|
|
<div><div class="t">${p.ticker}${showAcct?` <span class="atag">${acctIcon(p._type)}</span>`:''}</div>
|
|
<div class="s">${p.secteur} · ${fmt(poids,1)}%</div></div>
|
|
<div style="text-align:right"><div class="mono">${fmt(p.valeur)} ${CCY}</div>
|
|
<div class="s mono ${cls(p.pnl)}">${sign(p.pnl_pct)}%</div></div></div>`;
|
|
}).join('');
|
|
document.getElementById('sectors').innerHTML = sectors.map(([sec,w])=>`
|
|
<div class="alert"><div class="dot" style="background:var(--acc)"></div>
|
|
<div style="flex:1">${sec}</div><b class="mono">${fmt(w,1)}%</b></div>`).join('') || '<div class="muted">—</div>';
|
|
if(!SEL && s.positions.length) loadChart(s.positions[0].ticker);
|
|
}
|
|
|
|
// ── Watchlists / scan ──────────────────────────────────────
|
|
async function loadThemes(){
|
|
const d = await api('/api/themes');
|
|
const sel = document.getElementById('theme');
|
|
sel.innerHTML = '<option value="all">— tous —</option><option value="portfolio">portefeuille</option>'
|
|
+ Object.keys(d.themes).map(t=>`<option value="${t}">${t}</option>`).join('');
|
|
loadScan();
|
|
}
|
|
|
|
async function loadScan(){
|
|
const theme=document.getElementById('theme').value;
|
|
const target=document.getElementById('target').value;
|
|
const bullish=document.getElementById('bullish').checked;
|
|
const wrap=document.getElementById('scanWrap');
|
|
wrap.innerHTML='<div class="loading">Scan…</div>';
|
|
try{
|
|
const d = await api(`/api/scan?theme=${theme}&target=${target}&bullish=${bullish}`);
|
|
if(!d.rows.length){wrap.innerHTML='<div class="muted">Aucun résultat.</div>';return;}
|
|
const tcol = Object.keys(d.rows[0]).find(k=>k.startsWith('peut_'))||'';
|
|
wrap.innerHTML = `<table><thead><tr><th>Tkr</th><th>Cours</th><th>Sem%</th><th>RSI</th><th>M</th><th>Biais</th></tr></thead><tbody>`
|
|
+ d.rows.map(r=>`<tr data-tk="${r.ticker}" onclick="loadChart('${r.ticker}')">
|
|
<td class="t">${r.ticker}</td><td class="mono">${r.cours??'—'}</td>
|
|
<td class="mono">${r['range_sem_%']??'—'}</td><td class="mono">${r.RSI??'—'}</td>
|
|
<td class="${r.MACD==='↑'?'pos':'neg'}">${r.MACD??''}</td>
|
|
<td style="text-align:left;font-size:11px">${biasFmt(r.biais)}</td></tr>`).join('')
|
|
+ '</tbody></table>';
|
|
}catch(e){ wrap.innerHTML='<div class="err">'+e.message+'</div>'; }
|
|
}
|
|
function biasFmt(b){
|
|
if(!b) return '';
|
|
if(b.includes('haussier')||b.includes('survendu')) return '<span class="pos">'+b+'</span>';
|
|
if(b.includes('baissier')||b.includes('surachat')) return '<span class="neg">'+b+'</span>';
|
|
return '<span class="muted">'+b+'</span>';
|
|
}
|
|
|
|
// ── Alertes ────────────────────────────────────────────────
|
|
async function loadAlerts(){
|
|
const w=document.getElementById('alertWatch').value;
|
|
const el=document.getElementById('alertList');
|
|
el.innerHTML='<div class="loading">…</div>';
|
|
try{
|
|
const d = await api('/api/alerts?watch='+w);
|
|
if(!d.hits.length){el.innerHTML='<div class="muted">Aucune alerte aujourd\'hui.</div>';return;}
|
|
el.innerHTML = d.hits.map(h=>{
|
|
const up = /hausse|survente|rebond|haussier|golden/i.test(h.alerte);
|
|
return `<div class="alert" data-tk="${h.ticker}" style="cursor:pointer" onclick="loadChart('${h.ticker}')">
|
|
<div class="dot" style="background:${up?'var(--up)':'var(--down)'}"></div>
|
|
<div style="flex:1"><b>${h.ticker}</b> <span class="muted">${h.alerte}</span></div>
|
|
<span class="mono">${h.prix}</span></div>`;
|
|
}).join('');
|
|
}catch(e){ el.innerHTML='<div class="err">'+e.message+'</div>'; }
|
|
}
|
|
|
|
// ── Plan de trade ──────────────────────────────────────────
|
|
function openPlan(){
|
|
if(!SEL){alert('Sélectionne un titre');return;}
|
|
document.getElementById('planTicker').textContent=SEL;
|
|
document.getElementById('planOut').textContent='—';
|
|
document.getElementById('planModal').classList.add('on');
|
|
}
|
|
async function runPlan(){
|
|
const cap=document.getElementById('planCapital').value;
|
|
const out=document.getElementById('planOut');
|
|
out.textContent='Calcul…';
|
|
try{
|
|
const d = await api(`/api/plan?ticker=${SEL}&capital=${cap}`);
|
|
out.textContent = d.render;
|
|
}catch(e){ out.textContent='Erreur: '+e.message; }
|
|
}
|
|
|
|
// ── Import de relevé (image → scannée par la Console IA) ────
|
|
async function uploadImport(f){
|
|
const inp=document.getElementById('importFile');
|
|
if(!f){ return; }
|
|
const m=document.getElementById('importModal'), out=document.getElementById('importOut');
|
|
m.classList.add('on'); out.innerHTML='<div class="loading">Envoi de '+f.name+'…</div>';
|
|
try{
|
|
const fd=new FormData(); fd.append('file', f);
|
|
const r=await fetch('/api/import',{method:'POST',body:fd});
|
|
const j=await r.json();
|
|
if(j.error) throw new Error(j.error);
|
|
if(j.kind==='csv') return revolutPreview(j.rel); // relevé Revolut → import déterministe
|
|
out.innerHTML = `<p style="color:var(--up)">✅ Capture enregistrée : <code>${j.rel}</code></p>
|
|
<p>Ouvre la <b>Console IA</b> et demande :</p>
|
|
<pre>importe le relevé ${j.rel} et mets à jour mon portefeuille</pre>
|
|
<p class="muted" style="font-size:12px">Je lirai l'image, je mapperai chaque ligne vers son ticker Yahoo (en vérifiant le cours), puis je mettrai à jour <code>portfolio.yaml</code> <b>après ta confirmation</b>.</p>
|
|
<a class="btn acc" href="/console/" target="_blank">Ouvrir la Console IA ↗</a>`;
|
|
}catch(e){ out.innerHTML='<div class="err">Erreur: '+e.message+'</div>'; }
|
|
finally{ inp.value=''; }
|
|
}
|
|
// Relevé de compte Revolut (CSV) : aperçu déterministe des positions, puis « Appliquer ».
|
|
async function revolutPreview(rel){
|
|
const out=document.getElementById('importOut');
|
|
out.innerHTML='<div class="loading">Reconstruction des positions Revolut…</div>';
|
|
try{
|
|
const d=await api('/api/revolut/preview?file='+encodeURIComponent(rel));
|
|
out.innerHTML = `<p style="color:var(--up)">📄 Relevé Revolut — <b>${d.positions.length} positions</b> reconstruites (compte « ${d.account} ») :</p>`
|
|
+ '<table><thead><tr><th>Ticker</th><th>Quantité</th><th>PRU</th><th>Dev</th></tr></thead><tbody>'
|
|
+ d.positions.map(p=>`<tr><td class="t">${p.ticker}</td><td class="mono">${p.shares}</td><td class="mono">${p.avg_price}</td><td>${p.avg_currency}</td></tr>`).join('')
|
|
+ '</tbody></table>'
|
|
+ (d.warnings.length?`<div class="err" style="margin-top:6px">⚠ ${d.warnings.join('<br>⚠ ')}</div>`:'')
|
|
+ `<div class="controls" style="margin-top:12px">
|
|
<button class="btn acc" onclick="revolutApply('${rel}')">✅ Appliquer au compte Revolut</button>
|
|
</div>
|
|
<p class="muted" style="font-size:11px">Remplace les positions du compte Revolut dans portfolio.yaml (cash + autres comptes préservés). Coût moyen. Re-déposer un relevé à jour à chaque trade.</p>`;
|
|
}catch(e){ out.innerHTML='<div class="err">Erreur: '+e.message+'</div>'; }
|
|
}
|
|
async function revolutApply(rel){
|
|
const out=document.getElementById('importOut');
|
|
out.innerHTML='<div class="loading">Mise à jour de portfolio.yaml…</div>';
|
|
try{
|
|
const r=await fetch('/api/revolut/apply?file='+encodeURIComponent(rel),{method:'POST'});
|
|
const d=await r.json(); if(d.error) throw new Error(d.error);
|
|
out.innerHTML=`<p style="color:var(--up)">✅ Compte Revolut mis à jour (${d.positions.length} positions). Le dashboard se recharge…</p>`;
|
|
setTimeout(()=>{ document.getElementById('importModal').classList.remove('on'); loadPortfolio(); }, 1200);
|
|
}catch(e){ out.innerHTML='<div class="err">Erreur: '+e.message+'</div>'; }
|
|
}
|
|
|
|
// ── Actions rapides (finlab pur, one-click) ────────────────
|
|
const escapeHtml = s => (s||'').replace(/[&<>]/g,c=>({'&':'&','<':'<','>':'>'}[c]));
|
|
function showRes(title, html){
|
|
document.getElementById('resTitle').innerHTML=title;
|
|
document.getElementById('resBody').innerHTML=html;
|
|
document.getElementById('resModal').classList.add('on');
|
|
}
|
|
function needTicker(){ if(!SEL){ alert("Sélectionne d'abord une action (clique une ligne ou un titre)."); return null; } return SEL; }
|
|
async function qaRun(title, fn){ showRes(title,'<div class="loading">Calcul…</div>'); try{ await fn(); }catch(e){ document.getElementById('resBody').innerHTML='<div class="err">'+e.message+'</div>'; } }
|
|
const setBody = h => document.getElementById('resBody').innerHTML = h;
|
|
|
|
function qaDigest(){ qaRun('📋 Digest', async()=>{ const d=await api('/api/digest'); setBody('<pre>'+escapeHtml(d.text)+'</pre>'); }); }
|
|
function qaPlanQuick(){ const t=needTicker(); if(!t)return; qaRun('📐 Plan R:R — '+t, async()=>{ const d=await api('/api/plan?ticker='+t); setBody('<pre>'+escapeHtml(d.render)+'</pre>'); }); }
|
|
function qaOpportunities(){ qaRun('🔭 Opportunités (haussières)', async()=>{ const d=await api('/api/scan?theme=all&bullish=true'); setBody(scanTable(d.rows)); }); }
|
|
function qaAlerts(){ qaRun('🔔 Alertes du jour', async()=>{ const d=await api('/api/alerts?watch=all'); setBody(alertsHtml(d.hits)); }); }
|
|
function qaFundamentals(){ const t=needTicker(); if(!t)return; qaRun('📈 Fondamentaux — '+t, async()=>{ const d=await api('/api/fundamentals?ticker='+t); setBody(fundHtml(d.snapshot)); }); }
|
|
function qaAnalyze(){ const t=needTicker(); if(!t)return; qaRun('📊 Analyse — '+t, async()=>{ const d=await api('/api/analyze?ticker='+t); setBody(analyzeHtml(d)); }); }
|
|
|
|
const kvRow = (k,v) => `<div class="kv"><span class="muted">${k}</span><b>${v==null?'—':v}</b></div>`;
|
|
function fundHtml(f){
|
|
if(!f||f.error) return '<div class="err">'+((f&&f.error)||'indisponible')+'</div>';
|
|
return [['Nom',f.nom],['Secteur',f.secteur],['Cours',f.cours],['PER',f.PER],['PER fwd',f.PER_fwd],
|
|
['PEG',f.PEG],['P/S',f['P/S']],['P/B',f['P/B']],['Marge nette %',f['marge_nette_%']],['ROE %',f['ROE_%']],
|
|
['Croiss. CA %',f['croiss_CA_%']],['Dette/FP',f['dette/FP']],['Div %',f['div_%']],['Capi',f.capi],
|
|
['Reco analystes',f.reco],['Cible moy.',f.cible_moy]].map(([k,v])=>kvRow(k,v)).join('');
|
|
}
|
|
function techHtml(t){
|
|
if(!t||t.error) return '<div class="err">'+((t&&t.error)||'indisponible')+'</div>';
|
|
const mc=t.MACD==='haussier'?'pos':'neg', rc=t.RSI14>=70?'neg':(t.RSI14<=30?'pos':'');
|
|
return `<div class="chiprow">
|
|
<span class="chip">Cours <b>${t.cours}</b></span><span class="chip">RSI <b class="${rc}">${t.RSI14}</b></span>
|
|
<span class="chip">MACD <b class="${mc}">${t.MACD}</b></span><span class="chip">MM50 <b>${t.MM50}</b></span>
|
|
<span class="chip">MM200 <b>${t.MM200??'—'}</b></span><span class="chip">Volatilité <b>${t['vol_%']}%</b></span></div>
|
|
<div class="signals">▸ ${(t.signaux||[]).join(' · ')}</div>`;
|
|
}
|
|
function analyzeHtml(d){
|
|
return `<h4 style="margin:4px 0 8px">Technique</h4>${techHtml(d.technical)}
|
|
<h4 style="margin:14px 0 6px">Fondamental</h4>${fundHtml(d.fundamental)}
|
|
<h4 style="margin:14px 0 6px">Plan R:R</h4>${d.plan_render?'<pre>'+escapeHtml(d.plan_render)+'</pre>':'<div class="muted">—</div>'}`;
|
|
}
|
|
function scanTable(rows){
|
|
if(!rows||!rows.length) return '<div class="muted">Aucun résultat.</div>';
|
|
return '<table><thead><tr><th>Tkr</th><th>Cours</th><th>Sem%</th><th>RSI</th><th>M</th><th>Biais</th></tr></thead><tbody>'
|
|
+ rows.map(r=>`<tr style="cursor:pointer" onclick="loadChart('${r.ticker}');document.getElementById('resModal').classList.remove('on')">
|
|
<td class="t">${r.ticker}</td><td class="mono">${r.cours??'—'}</td><td class="mono">${r['range_sem_%']??'—'}</td>
|
|
<td class="mono">${r.RSI??'—'}</td><td class="${r.MACD==='↑'?'pos':'neg'}">${r.MACD??''}</td>
|
|
<td style="text-align:left;font-size:11px">${biasFmt(r.biais)}</td></tr>`).join('')+'</tbody></table>';
|
|
}
|
|
function alertsHtml(hits){
|
|
if(!hits||!hits.length) return '<div class="muted">Aucune alerte aujourd\'hui.</div>';
|
|
return hits.map(h=>{ const up=/hausse|survente|rebond|haussier|golden/i.test(h.alerte);
|
|
return `<div class="alert"><div class="dot" style="background:${up?'var(--up)':'var(--down)'}"></div>
|
|
<div style="flex:1"><b>${h.ticker}</b> <span class="muted">${h.alerte}</span></div><span class="mono">${h.prix}</span></div>`;
|
|
}).join('');
|
|
}
|
|
|
|
// ── Chaîne de valeur IA (couches) ──────────────────────────
|
|
const LAYER_META = {
|
|
energy_power: {ic:'⚡', lb:'Énergie', ds:'alimente les datacenters'},
|
|
chips: {ic:'🔧', lb:'Puces / Semi', ds:'le calcul'},
|
|
datacenter_infra: {ic:'🏢', lb:'Datacenter / Infra', ds:'serveurs · refroidissement'},
|
|
cables_optical_network: {ic:'🔌', lb:'Câbles / Optique', ds:'interconnexion'},
|
|
software_cloud: {ic:'☁️', lb:'Software / Cloud', ds:'la couche logicielle'},
|
|
};
|
|
const LAYER_ORDER = ['energy_power','chips','datacenter_infra','cables_optical_network','software_cloud'];
|
|
function biasCls(b){
|
|
if(!b) return '';
|
|
if(b.includes('haussier')||b.includes('survendu')) return 'up';
|
|
if(b.includes('baissier')||b.includes('surachat')) return 'down';
|
|
return '';
|
|
}
|
|
async function loadLayers(){
|
|
const wrap=document.getElementById('layers');
|
|
// 1) structure instantanée depuis /api/themes
|
|
let t;
|
|
try{ t=(await api('/api/themes')).themes; }
|
|
catch(e){ wrap.innerHTML='<div class="err">'+e.message+'</div>'; return; }
|
|
const order=LAYER_ORDER.filter(k=>t[k]).concat(Object.keys(t).filter(k=>!LAYER_ORDER.includes(k)));
|
|
wrap.innerHTML=order.map(k=>{
|
|
const m=LAYER_META[k]||{ic:'•',lb:k,ds:''};
|
|
const chips=(t[k]||[]).map(tk=>`<span class="lchip" data-tk="${tk}" onclick="loadChart('${tk}')">${tk}</span>`).join('');
|
|
return `<div class="layer-card" data-layer="${k}">
|
|
<div class="layer-h"><span class="layer-ic">${m.ic}</span>
|
|
<div><b>${m.lb}</b><div class="muted" style="font-size:11px">${m.ds}</div></div></div>
|
|
<div class="lchips">${chips}</div></div>`;
|
|
}).join('');
|
|
// 2) enrichissement biais (scan de toutes les couches — peut être un peu long, caché ensuite)
|
|
try{
|
|
const d=await api('/api/layers');
|
|
d.layers.forEach(L=>(L.tickers||[]).forEach(r=>{
|
|
const el=document.querySelector(`.layer-card[data-layer="${L.key}"] .lchip[data-tk="${r.ticker}"]`);
|
|
if(el){ const c=biasCls(r.biais); if(c) el.classList.add(c);
|
|
el.title=`${r.ticker} · ${r.cours??'—'} · RSI ${r.RSI??'—'} · MACD ${r.MACD??''} · ${r.biais??''}`; }
|
|
}));
|
|
}catch(e){ /* on garde la structure non colorée */ }
|
|
}
|
|
|
|
// ── Init ───────────────────────────────────────────────────
|
|
function refreshAll(){ loadPortfolio(); loadScan(); loadAlerts(); loadLayers(); if(SEL) loadChart(SEL); }
|
|
initChart();
|
|
loadPortfolio();
|
|
loadThemes();
|
|
loadAlerts();
|
|
loadLayers();
|
|
</script>
|
|
</body>
|
|
</html>
|