mirror of
https://github.com/Alkatrazz24/Funk-lab.git
synced 2026-07-08 22:24:42 +02:00
ALI YESILKAYA
99ff32158a
Rebasé sur main (post-#72). Refonte de l'interface inspirée de Revolut : - En-tête : valeur totale + variation sur la période (1J/1S/1M/6M/1A/Tous) + courbe de valeur du portefeuille (area chart) - Tableau de positions style Revolut par compte (avatar, nom+ticker, quantité, prix moyen, cours, valeur, P&L €, taux %, variation jour, répartition, ▲▼) - Onglets de comptes (Tous/Revolut/BNP) en barre du haut - Clic sur une ligne → fiche action : chandeliers (MM50+volume), tabs période, chips techniques, boutons Analyse/Plan/Fondamentaux - Sidebar (actions rapides, alertes, secteurs) + couches IA ; import image/CSV conservé Backend : /api/portfolio-history (courbe valeur, alignée date US/EU, « Tous » 2 ans), /api/portfolio enrichi (nom société + variation jour), data.day_change/company_name. Validé navigateur (Playwright) + endpoints (TestClient) ; JS node --check OK. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
386 lines
29 KiB
HTML
386 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>FinLab</title>
|
|
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
|
|
<style>
|
|
:root{
|
|
--bg:#0a0b0e; --panel:#121419; --panel2:#1a1d24; --line:#232730;
|
|
--txt:#e6e9ef; --mut:#8b93a3; --acc:#3d7bff; --up:#1fcf8f; --down:#ff5d6c; --warn:#e9c46a;
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,sans-serif}
|
|
a{color:var(--acc);text-decoration:none}
|
|
h1,h2,h3,h4{margin:0;font-weight:600}
|
|
.mono{font-variant-numeric:tabular-nums}
|
|
.pos{color:var(--up)} .neg{color:var(--down)} .muted{color:var(--mut)}
|
|
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:7px 13px;border-radius:20px;cursor:pointer;font-size:13px}
|
|
.btn:hover{border-color:var(--acc)} .btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
|
|
/* Topbar */
|
|
.topbar{display:flex;align-items:center;gap:16px;padding:12px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10}
|
|
.brand{font-size:20px;font-weight:800;letter-spacing:.5px}
|
|
.brand b{color:var(--acc)}
|
|
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:3px}
|
|
.seg button{background:none;border:0;color:var(--mut);padding:6px 16px;border-radius:18px;cursor:pointer;font-size:13px;font-weight:600}
|
|
.seg button.on{background:var(--panel2);color:#fff}
|
|
.spacer{flex:1}
|
|
/* Layout */
|
|
.wrap{display:grid;grid-template-columns:1fr 340px;gap:18px;padding:18px 22px;max-width:1600px;margin:0 auto}
|
|
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:18px}
|
|
.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
|
|
/* Header valeur + chart */
|
|
.pf-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}
|
|
.pf-value{font-size:34px;font-weight:800;letter-spacing:-.5px}
|
|
.pf-change{font-size:15px;font-weight:600;margin-top:2px}
|
|
.range{display:flex;gap:2px;background:var(--panel2);border-radius:18px;padding:3px}
|
|
.range button{background:none;border:0;color:var(--mut);padding:5px 12px;border-radius:14px;cursor:pointer;font-size:12.5px;font-weight:600}
|
|
.range button.on{background:var(--bg);color:#fff}
|
|
#pfChart{height:260px;width:100%;margin-top:8px}
|
|
/* Tableau positions Revolut */
|
|
.acct-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
|
|
.acct-head .nm{font-size:15px;font-weight:700}
|
|
.acct-pill{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:10px;padding:1px 8px}
|
|
table{width:100%;border-collapse:collapse;font-size:13px}
|
|
thead th{color:var(--mut);font-weight:500;text-transform:none;font-size:11.5px;text-align:right;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
|
|
thead th:first-child{text-align:left}
|
|
tbody td{padding:11px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
|
|
tbody td:first-child{text-align:left}
|
|
tbody tr{cursor:pointer}
|
|
tbody tr:hover{background:var(--panel2)}
|
|
.asset{display:flex;align-items:center;gap:10px}
|
|
.av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex:0 0 auto}
|
|
.asset .nm{font-weight:600;color:#fff}
|
|
.asset .tk{font-size:11.5px;color:var(--mut)}
|
|
.cashrow{display:flex;justify-content:space-between;padding:10px 8px;border-bottom:1px solid var(--line);color:var(--mut)}
|
|
.cashrow b{color:var(--txt)}
|
|
.arrow{font-size:10px;vertical-align:1px}
|
|
/* Sidebar widgets */
|
|
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
|
|
.btn.qa{text-align:left;border-radius:10px;padding:9px 11px;font-size:12.5px}
|
|
.wrow{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
|
|
.wrow:hover{background:var(--panel2)}
|
|
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
|
|
/* Modals */
|
|
.modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;z-index:30;padding:20px}
|
|
.modal.on{display:flex}
|
|
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;width:100%;max-width:920px;max-height:92vh;overflow:auto}
|
|
.modal pre{background:var(--bg);padding:12px;border-radius:8px;white-space:pre-wrap;font-size:12.5px}
|
|
.modal table{width:100%}
|
|
.kv{display:flex;justify-content:space-between;padding:6px 4px;border-bottom:1px solid var(--line)}
|
|
.kv b{color:#fff}
|
|
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
|
|
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:3px 10px;font-size:12px}
|
|
.chip b{color:#fff}
|
|
.signals{margin-top:8px;font-size:12.5px;color:var(--mut)}
|
|
#detChart{height:340px;width:100%;margin-top:6px}
|
|
.det-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
|
|
.det-price{font-size:26px;font-weight:800}
|
|
.loading{color:var(--mut);font-size:12px;padding:8px}
|
|
.err{color:var(--down);font-size:12.5px}
|
|
.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}
|
|
.layer-h{display:flex;gap:8px;align-items:center;margin-bottom:8px}.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)} .lchip.up{border-color:var(--up);color:#9ff0d4} .lchip.down{border-color:var(--down);color:#ffb3ba}
|
|
@media(max-width:1200px){.wrap{grid-template-columns:1fr} .layers{grid-template-columns:repeat(2,1fr)}}
|
|
input[type=file]{display:none}
|
|
.ctrls{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
|
|
input,select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:6px 8px;font-size:12.5px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<div class="brand">Fin<b>Lab</b></div>
|
|
<div class="seg" id="acctTabs"></div>
|
|
<div class="spacer"></div>
|
|
<button class="btn" onclick="document.getElementById('importFile').click()">📥 Importer</button>
|
|
<input type="file" id="importFile" accept="image/*,.csv" onchange="uploadImport(this.files[0])">
|
|
<a class="btn" href="/console/" target="_blank">⌨ Console IA</a>
|
|
<button class="btn" onclick="refreshAll()">↻</button>
|
|
</div>
|
|
|
|
<div class="wrap">
|
|
<!-- Colonne principale -->
|
|
<div>
|
|
<div class="panel">
|
|
<div class="pf-head">
|
|
<div>
|
|
<div class="pf-value mono" id="pfValue">—</div>
|
|
<div class="pf-change mono" id="pfChange">—</div>
|
|
</div>
|
|
<div class="range" id="rangeTabs"></div>
|
|
</div>
|
|
<div id="pfChart"></div>
|
|
</div>
|
|
<div id="accounts"></div>
|
|
|
|
<!-- Chaîne de valeur IA -->
|
|
<div class="panel">
|
|
<h3>Chaîne de valeur IA <span class="muted" style="text-transform:none;letter-spacing:0">⚡→🔧→🏢→🔌→☁️ · clic = fiche</span></h3>
|
|
<div class="layers" id="layers"><div class="loading">…</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<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>
|
|
<div class="panel">
|
|
<h3>Alertes du jour <select id="alertWatch" 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>
|
|
|
|
<!-- Modal fiche action -->
|
|
<div class="modal" id="stockModal" onclick="if(event.target===this)this.classList.remove('on')">
|
|
<div class="box">
|
|
<div class="det-head">
|
|
<div>
|
|
<h3 id="detName" style="text-transform:none;letter-spacing:0;color:#fff;font-size:18px">—</h3>
|
|
<div class="det-price mono" id="detPrice">—</div>
|
|
<div class="mono" id="detDay">—</div>
|
|
</div>
|
|
<div class="range" id="detRange"></div>
|
|
</div>
|
|
<div id="detChart"></div>
|
|
<div class="chiprow" id="detChips"></div>
|
|
<div class="signals" id="detSignals"></div>
|
|
<div class="ctrls" style="margin-top:14px">
|
|
<button class="btn acc" onclick="qaAnalyze(detTicker)">📊 Analyse complète</button>
|
|
<button class="btn" onclick="qaPlanQuick(detTicker)">📐 Plan R:R</button>
|
|
<button class="btn" onclick="qaFundamentals(detTicker)">📈 Fondamentaux</button>
|
|
<button class="btn" onclick="document.getElementById('stockModal').classList.remove('on')">Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal import -->
|
|
<div class="modal" id="importModal" onclick="if(event.target===this)this.classList.remove('on')">
|
|
<div class="box" style="max-width:560px"><h3 style="text-transform:none;color:#fff;font-size:16px;margin-bottom:10px">Importer un relevé</h3>
|
|
<div id="importOut" class="muted">—</div>
|
|
<div class="ctrls" style="margin-top:12px"><button class="btn" onclick="document.getElementById('importModal').classList.remove('on')">Fermer</button></div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal résultat -->
|
|
<div class="modal" id="resModal" onclick="if(event.target===this)this.classList.remove('on')">
|
|
<div class="box" style="max-width:680px"><h3 id="resTitle" style="text-transform:none;color:#fff;font-size:16px;margin-bottom:10px">Résultat</h3>
|
|
<div id="resBody">—</div>
|
|
<div class="ctrls" style="margin-top:12px"><button class="btn" onclick="document.getElementById('resModal').classList.remove('on')">Fermer</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let PF=null, ACC='*', RANGE='1M', CCY='€';
|
|
let pfChart, pfArea, detChart, detCandle, detMa50, detVol, detTicker=null, detRange='6mo';
|
|
const RANGES=['1J','1S','1M','6M','1A','Tous'];
|
|
|
|
const fmt=(n,d=0)=> n==null?'—':Number(n).toLocaleString('fr-FR',{minimumFractionDigits:d,maximumFractionDigits:d});
|
|
const sign=n=>(n>=0?'+':'')+fmt(n,0);
|
|
const sgn2=n=>(n>=0?'+':'')+fmt(n,2);
|
|
const cls=n=>n==null?'':(n>=0?'pos':'neg');
|
|
const arr=n=>n==null?'':(n>=0?'▲':'▼');
|
|
const esc=s=>(s||'').replace(/[&<>]/g,c=>({'&':'&','<':'<','>':'>'}[c]));
|
|
async function api(p){const r=await fetch(p);const j=await r.json();if(j&&j.error)throw new Error(j.error);return j;}
|
|
const COLORS=['#3d7bff','#1fcf8f','#e9c46a','#ff5d6c','#a78bfa','#f59e0b','#22d3ee','#f472b6','#34d399','#fb923c'];
|
|
const avatar=t=>`<div class="av" style="background:${COLORS[(t.charCodeAt(0)+ (t.charCodeAt(1)||0))%COLORS.length]}">${t.slice(0,2)}</div>`;
|
|
|
|
// ── Portefeuille ───────────────────────────────────────────
|
|
const acctIcon=t=>t==='banque'?'🏦':(t==='crypto'?'🪙':'📊');
|
|
async function loadPortfolio(){
|
|
try{ PF=await api('/api/portfolio'); CCY=PF.base==='EUR'?'€':PF.base; renderTabs(); renderAccounts(); renderSectors(); loadPfChart(); }
|
|
catch(e){ document.getElementById('accounts').innerHTML='<div class="panel err">'+e.message+'</div>'; }
|
|
}
|
|
function renderTabs(){
|
|
document.getElementById('acctTabs').innerHTML =
|
|
`<button class="${ACC==='*'?'on':''}" onclick="selAcct('*')">Tous</button>`+
|
|
(PF.accounts||[]).map(a=>`<button class="${ACC===a.name?'on':''}" onclick="selAcct('${a.name.replace(/'/g,"\\'")}')">${acctIcon(a.type)} ${a.name}</button>`).join('');
|
|
}
|
|
function selAcct(n){ ACC=n; renderTabs(); renderAccounts(); renderSectors(); loadPfChart(); }
|
|
function scopeAccounts(){ return ACC==='*'?(PF.accounts||[]):(PF.accounts||[]).filter(a=>a.name===ACC); }
|
|
function scopeTotal(){ return scopeAccounts().reduce((s,a)=>s+a.total,0); }
|
|
|
|
function renderAccounts(){
|
|
const accs=scopeAccounts();
|
|
document.getElementById('accounts').innerHTML = accs.map(a=>{
|
|
const rows=a.positions.map(p=>{
|
|
const poids=a.total?(p.valeur/a.total*100):0;
|
|
return `<tr onclick="openStock('${p.ticker}')">
|
|
<td><div class="asset">${avatar(p.ticker)}<div><div class="nm">${p.name||p.ticker}</div><div class="tk">${p.ticker} · ${p.secteur||''}</div></div></div></td>
|
|
<td class="mono">${fmt(p.qte,p.qte<10?4:2)}</td>
|
|
<td class="mono">${fmt(p.pru,2)} ${p.dev}</td>
|
|
<td class="mono">${fmt(p.cours,2)} ${p.dev}</td>
|
|
<td class="mono">${fmt(p.valeur)} ${CCY}</td>
|
|
<td class="mono ${cls(p.pnl)}">${sgn2(p.pnl)} ${CCY}</td>
|
|
<td class="mono ${cls(p.pnl_pct)}"><span class="arrow">${arr(p.pnl_pct)}</span> ${fmt(Math.abs(p.pnl_pct),2)}%</td>
|
|
<td class="mono ${cls(p.day_pct)}">${p.day_pct==null?'—':`<span class="arrow">${arr(p.day_pct)}</span> ${fmt(Math.abs(p.day_pct),2)}%`}</td>
|
|
<td class="mono muted">${fmt(poids,1)}%</td></tr>`;
|
|
}).join('');
|
|
return `<div class="panel">
|
|
<div class="acct-head">${acctIcon(a.type)}<span class="nm">${a.name}</span><span class="acct-pill">${a.type}</span>
|
|
<span class="spacer"></span><span class="mono" style="font-weight:700">${fmt(a.total)} ${CCY}</span>
|
|
<span class="mono ${cls(a.pnl_pct)}">${sgn2(a.pnl_pct)}%</span></div>
|
|
<div class="cashrow"><span>💶 Solde en devise</span><b class="mono">${fmt(a.cash,2)} ${CCY}</b></div>
|
|
<table><thead><tr><th>Actif</th><th>Quantité</th><th>Prix moyen</th><th>Cours</th><th>Valeur</th><th>P&L</th><th>Taux %</th><th>Var. jour</th><th>Répart.</th></tr></thead>
|
|
<tbody>${rows}</tbody></table></div>`;
|
|
}).join('');
|
|
}
|
|
function renderSectors(){
|
|
const agg={}; scopeAccounts().forEach(a=>Object.entries(a.by_sector||{}).forEach(([s,w])=>{
|
|
agg[s]=(agg[s]||0)+w*a.total; }));
|
|
const tot=scopeTotal()||1;
|
|
const secs=Object.entries(agg).map(([s,v])=>[s,v/tot]).sort((a,b)=>b[1]-a[1]);
|
|
document.getElementById('sectors').innerHTML = secs.length?secs.map(([s,w])=>`
|
|
<div class="wrow"><div class="dot" style="background:var(--acc)"></div><div style="flex:1">${s}</div><b class="mono">${fmt(w,1)}%</b></div>`).join(''):'<div class="muted">—</div>';
|
|
}
|
|
|
|
// ── Courbe de valeur ───────────────────────────────────────
|
|
function initPfChart(){
|
|
const el=document.getElementById('pfChart');
|
|
pfChart=LightweightCharts.createChart(el,{width:el.clientWidth,height:260,
|
|
layout:{background:{color:'transparent'},textColor:'#8b93a3'},
|
|
grid:{vertLines:{visible:false},horzLines:{color:'#1a1d24'}},
|
|
rightPriceScale:{borderVisible:false},timeScale:{borderVisible:false,timeVisible:RANGE==='1J'},
|
|
crosshair:{mode:1,horzLine:{visible:true},vertLine:{visible:true}}});
|
|
pfArea=pfChart.addAreaSeries({lineColor:'#1fcf8f',topColor:'rgba(31,207,143,.25)',bottomColor:'rgba(31,207,143,0)',lineWidth:2,priceLineVisible:false});
|
|
window.addEventListener('resize',()=>pfChart.applyOptions({width:el.clientWidth}));
|
|
document.getElementById('rangeTabs').innerHTML=RANGES.map(r=>`<button class="${r===RANGE?'on':''}" onclick="setRange('${r}')">${r}</button>`).join('');
|
|
}
|
|
function setRange(r){ RANGE=r; document.querySelectorAll('#rangeTabs button').forEach(b=>b.classList.toggle('on',b.textContent===r)); loadPfChart(); }
|
|
async function loadPfChart(){
|
|
document.getElementById('pfValue').textContent=fmt(scopeTotal())+' '+CCY;
|
|
try{
|
|
const acc=ACC==='*'?'*':ACC;
|
|
const d=await api(`/api/portfolio-history?range=${RANGE}&account=${encodeURIComponent(acc)}`);
|
|
const up=d.change>=0;
|
|
pfArea.applyOptions({lineColor:up?'#1fcf8f':'#ff5d6c',topColor:up?'rgba(31,207,143,.25)':'rgba(255,93,108,.22)',bottomColor:'rgba(0,0,0,0)'});
|
|
pfArea.setData(d.points.map(p=>({time:p.time,value:p.value})));
|
|
pfChart.timeScale().fitContent();
|
|
document.getElementById('pfChange').innerHTML=`<span class="${up?'pos':'neg'}">${sign(d.change)} ${CCY} ${arr(d.change)} ${fmt(Math.abs(d.change_pct),2)}%</span> <span class="muted">· ${RANGE}</span>`;
|
|
}catch(e){ document.getElementById('pfChange').innerHTML='<span class="err">'+e.message+'</span>'; }
|
|
}
|
|
|
|
// ── Fiche action (modal) ───────────────────────────────────
|
|
function initDetChart(){
|
|
const el=document.getElementById('detChart');
|
|
detChart=LightweightCharts.createChart(el,{width:el.clientWidth,height:340,
|
|
layout:{background:{color:'#121419'},textColor:'#8b93a3'},
|
|
grid:{vertLines:{color:'#1a1d24'},horzLines:{color:'#1a1d24'}},
|
|
rightPriceScale:{borderVisible:false},timeScale:{borderVisible:false}});
|
|
detCandle=detChart.addCandlestickSeries({upColor:'#1fcf8f',downColor:'#ff5d6c',borderVisible:false,wickUpColor:'#1fcf8f',wickDownColor:'#ff5d6c'});
|
|
detMa50=detChart.addLineSeries({color:'#e9c46a',lineWidth:1,priceLineVisible:false,lastValueVisible:false});
|
|
detVol=detChart.addHistogramSeries({priceScaleId:'',priceFormat:{type:'volume'}});
|
|
detVol.priceScale().applyOptions({scaleMargins:{top:0.85,bottom:0}});
|
|
}
|
|
const DET_RANGES={'1M':'1mo','3M':'3mo','6M':'6mo','1A':'1y'};
|
|
function openStock(ticker){
|
|
detTicker=ticker; document.getElementById('qaTicker').textContent='· '+ticker;
|
|
document.getElementById('stockModal').classList.add('on');
|
|
document.getElementById('detRange').innerHTML=Object.keys(DET_RANGES).map(r=>`<button class="${DET_RANGES[r]===detRange?'on':''}" onclick="setDetRange('${DET_RANGES[r]}')">${r}</button>`).join('');
|
|
if(!detChart) initDetChart();
|
|
loadDet();
|
|
}
|
|
function setDetRange(p){ detRange=p; document.querySelectorAll('#detRange button').forEach(b=>b.classList.toggle('on',DET_RANGES[b.textContent]===p)); loadDet(); }
|
|
async function loadDet(){
|
|
document.getElementById('detName').textContent=detTicker;
|
|
document.getElementById('detChips').innerHTML='<span class="loading">Chargement…</span>';
|
|
document.getElementById('detSignals').textContent='';
|
|
try{
|
|
const d=await api(`/api/ohlc?ticker=${encodeURIComponent(detTicker)}&period=${detRange}`);
|
|
detCandle.setData(d.candles); detMa50.setData(d.ma50); detVol.setData(d.volume);
|
|
detChart.timeScale().fitContent();
|
|
const last=d.candles[d.candles.length-1], first=d.candles[0];
|
|
const ch=last&&first?(last.close-first.close)/first.close*100:0;
|
|
document.getElementById('detPrice').textContent=last?last.close+' '+(d.technical?'':''):'';
|
|
document.getElementById('detDay').innerHTML=`<span class="${ch>=0?'pos':'neg'}">${arr(ch)} ${fmt(Math.abs(ch),2)}% sur ${Object.keys(DET_RANGES).find(k=>DET_RANGES[k]===detRange)}</span>`;
|
|
const t=d.technical;
|
|
if(t){ const mc=t.MACD==='haussier'?'pos':'neg', rc=t.RSI14>=70?'neg':(t.RSI14<=30?'pos':'');
|
|
document.getElementById('detName').textContent=detTicker;
|
|
document.getElementById('detChips').innerHTML=[
|
|
`<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>`].join('');
|
|
document.getElementById('detSignals').textContent='▸ '+(t.signaux||[]).join(' · ');
|
|
} else document.getElementById('detChips').innerHTML='';
|
|
}catch(e){ document.getElementById('detChips').innerHTML='<span class="err">'+e.message+'</span>'; }
|
|
}
|
|
|
|
// ── Actions rapides ────────────────────────────────────────
|
|
function showRes(t,h){document.getElementById('resTitle').innerHTML=t;document.getElementById('resBody').innerHTML=h;document.getElementById('resModal').classList.add('on');}
|
|
function needTk(tk){ const t=tk||detTicker; if(!t){alert('Sélectionne une action (clique une ligne du portefeuille).');return null;} return t; }
|
|
async function qaRun(t,fn){showRes(t,'<div class="loading">Calcul…</div>');try{await fn();}catch(e){document.getElementById('resBody').innerHTML='<div class="err">'+e.message+'</div>';}}
|
|
const setB=h=>document.getElementById('resBody').innerHTML=h;
|
|
function qaDigest(){qaRun('📋 Digest',async()=>{const d=await api('/api/digest');setB('<pre>'+esc(d.text)+'</pre>');});}
|
|
function qaPlanQuick(tk){const t=needTk(tk);if(!t)return;qaRun('📐 Plan R:R — '+t,async()=>{const d=await api('/api/plan?ticker='+t);setB('<pre>'+esc(d.render)+'</pre>');});}
|
|
function qaOpportunities(){qaRun('🔭 Opportunités',async()=>{const d=await api('/api/scan?theme=all&bullish=true');setB(scanTable(d.rows));});}
|
|
function qaAlerts(){qaRun('🔔 Alertes du jour',async()=>{const d=await api('/api/alerts?watch=all');setB(alertsHtml(d.hits));});}
|
|
function qaFundamentals(tk){const t=needTk(tk);if(!t)return;qaRun('📈 Fondamentaux — '+t,async()=>{const d=await api('/api/fundamentals?ticker='+t);setB(fundHtml(d.snapshot));});}
|
|
function qaAnalyze(tk){const t=needTk(tk);if(!t)return;qaRun('📊 Analyse — '+t,async()=>{const d=await api('/api/analyze?ticker='+t);setB(analyzeHtml(d));});}
|
|
const kvR=(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',f.reco],['Cible moy.',f.cible_moy]].map(([k,v])=>kvR(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">Vol <b>${t['vol_%']}%</b></span></div><div class="signals">▸ ${(t.signaux||[]).join(' · ')}</div>`;}
|
|
function analyzeHtml(d){return `<h4 style="margin:4px 0 6px">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>'+esc(d.plan_render)+'</pre>':'<div class="muted">—</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>';}
|
|
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="document.getElementById('resModal').classList.remove('on');openStock('${r.ticker}')"><td class="nm">${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="wrow" onclick="openStock('${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('');}
|
|
|
|
// ── Alertes (sidebar) ──────────────────────────────────────
|
|
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);el.innerHTML=alertsHtml(d.hits);}catch(e){el.innerHTML='<div class="err">'+e.message+'</div>';}}
|
|
|
|
// ── Couches IA ─────────────────────────────────────────────
|
|
const LM={energy_power:{ic:'⚡',lb:'Énergie'},chips:{ic:'🔧',lb:'Puces'},datacenter_infra:{ic:'🏢',lb:'Datacenter'},cables_optical_network:{ic:'🔌',lb:'Câbles/Optique'},software_cloud:{ic:'☁️',lb:'Software'}};
|
|
const LO=['energy_power','chips','datacenter_infra','cables_optical_network','software_cloud'];
|
|
function bcl(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');let t;
|
|
try{t=(await api('/api/themes')).themes;}catch(e){wrap.innerHTML='<div class="err">'+e.message+'</div>';return;}
|
|
const order=LO.filter(k=>t[k]).concat(Object.keys(t).filter(k=>!LO.includes(k)));
|
|
wrap.innerHTML=order.map(k=>{const m=LM[k]||{ic:'•',lb:k};
|
|
return `<div class="layer-card" data-layer="${k}"><div class="layer-h"><span style="font-size:18px">${m.ic}</span><b>${m.lb}</b></div><div class="lchips">${(t[k]||[]).map(tk=>`<span class="lchip" data-tk="${tk}" onclick="openStock('${tk}')">${tk}</span>`).join('')}</div></div>`;}).join('');
|
|
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=bcl(r.biais);if(c)el.classList.add(c);el.title=`${r.cours??''} · RSI ${r.RSI??''} · ${r.biais??''}`;}}));}catch(e){}
|
|
}
|
|
|
|
// ── Import ─────────────────────────────────────────────────
|
|
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);
|
|
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><a class="btn acc" href="/console/" target="_blank">Console IA ↗</a>`;
|
|
}catch(e){out.innerHTML='<div class="err">Erreur: '+e.message+'</div>';}finally{inp.value='';}}
|
|
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> (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="nm">${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">⚠ ${d.warnings.join('<br>⚠ ')}</div>`:'')+`<div class="ctrls" style="margin-top:12px"><button class="btn acc" onclick="revolutApply('${rel}')">✅ Appliquer au compte Revolut</button></div>`;
|
|
}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…</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). Rechargement…</p>`;
|
|
setTimeout(()=>{document.getElementById('importModal').classList.remove('on');loadPortfolio();},1200);
|
|
}catch(e){out.innerHTML='<div class="err">Erreur: '+e.message+'</div>';}}
|
|
|
|
// ── Init ───────────────────────────────────────────────────
|
|
function refreshAll(){loadPortfolio();loadAlerts();loadLayers();}
|
|
initPfChart(); loadPortfolio(); loadAlerts(); loadLayers();
|
|
</script>
|
|
</body>
|
|
</html>
|