mirror of
https://github.com/Alkatrazz24/Funk-lab.git
synced 2026-07-09 00:24:41 +02:00
alkatrazz
72f22a7063
Process dédié pour actualiser le portefeuille à partir d'une capture de relevé :
- Dashboard : bouton « 📥 Importer un relevé » (panneau Mes comptes) → upload de
l'image vers le workspace (imports/) via POST /api/import ; une modale donne la
phrase exacte à dire à la console + un lien direct
- Backend : endpoints /api/import (UploadFile, refuse les non-images) et /api/imports
(listing), dossier imports/ sous FINLAB_HOME (workspace, persistant)
- Persona console (CLAUDE.md) : workflow « Import d'un relevé » — lire l'image,
extraire compte/positions, mapper vers tickers Yahoo en VÉRIFIANT les cours,
confirmer, puis mettre à jour portfolio.yaml
Le scan vision se fait dans la Console IA (abonnement, pas de clé API). Le dashboard
n'est que le pont d'upload. Testé : POST image→200 + listing OK, non-image→400 ;
JS node --check OK.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
471 lines
25 KiB
HTML
471 lines
25 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}
|
|
.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="Importer une capture de relevé (la Console IA la scanne)" onclick="document.getElementById('importFile').click()">📥 Importer un relevé</button>
|
|
</h3>
|
|
<input type="file" id="importFile" accept="image/*" 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 : alertes -->
|
|
<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>
|
|
|
|
<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('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);
|
|
out.innerHTML = `<p style="color:var(--up)">✅ Relevé enregistré : <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=''; }
|
|
}
|
|
|
|
// ── 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>
|