Adriano/PythagorasGoal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): tooltip equity allineato al mouse (responsive canvas)

Browse Source 
Forzare l'altezza del canvas via CSS !important con maintainAspectRatio default
sfalsava la risoluzione interna vs quella mostrata -> hit-test tooltip offset dal
mouse. Fix canonico: canvas in contenitore .chartbox ad altezza fissa + chart
responsive:true/maintainAspectRatio:false + interaction index su tutti e 3 i grafici
(equity, modal, paper).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Adriano Dal Pastro
2026-06-13 21:35:15 +00:00
parent 37ffe92498
commit e311d00fe4
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/live/dashboard.py
+10 -7
View File
@@ -386,7 +386,10 @@ HTML = r"""<!doctype html><html lang="it"><head><meta charset="utf-8">
.ov.on{display:flex}.modal{background:var(--card);border:1px solid var(--bd);border-radius:12px;max-width:820px;width:94%;margin:40px 0;padding:20px} .ov.on{display:flex}.modal{background:var(--card);border:1px solid var(--bd);border-radius:12px;max-width:820px;width:94%;margin:40px 0;padding:20px}
.modal h3{margin:0 0 4px}.x{float:right;cursor:pointer;color:var(--mut);font-size:20px;line-height:1} .modal h3{margin:0 0 4px}.x{float:right;cursor:pointer;color:var(--mut);font-size:20px;line-height:1}
.btn{display:inline-block;background:#1f6feb;color:#fff;padding:7px 12px;border-radius:7px;text-decoration:none;font-size:13px;margin-top:10px} .btn{display:inline-block;background:#1f6feb;color:#fff;padding:7px 12px;border-radius:7px;text-decoration:none;font-size:13px;margin-top:10px}
canvas{width:100%!important;height:220px!important}#mchart{height:240px!important}#eq{height:300px!important}#peq{height:200px!important} /* contenitore ad altezza fissa + canvas responsive: l'hit-test del tooltip combacia
col mouse (forzare l'altezza del canvas via CSS sfalsa la risoluzione interna) */
.chartbox{position:relative;width:100%}.chartbox canvas{width:100%!important;height:100%!important}
.chartbox.eq{height:300px}.chartbox.peq{height:200px}.chartbox.m{height:240px}
.paperzone{margin-top:22px;border:1px dashed #6e552233;border-radius:12px;padding:14px;background:linear-gradient(180deg,rgba(210,153,34,.05),transparent)} .paperzone{margin-top:22px;border:1px dashed #6e552233;border-radius:12px;padding:14px;background:linear-gradient(180deg,rgba(210,153,34,.05),transparent)}
#eqcard{background:linear-gradient(180deg,#11161d,#0d1117)} #eqcard{background:linear-gradient(180deg,#11161d,#0d1117)}
.eqhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} .eqhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
@@ -397,7 +400,7 @@ HTML = r"""<!doctype html><html lang="it"><head><meta charset="utf-8">
<div class="grid kpis" id="kpis"></div> <div class="grid kpis" id="kpis"></div>
<div class="card sec" id="eqcard"><div class="eqhead"><h2 style="margin:0">Equity</h2> <div class="card sec" id="eqcard"><div class="eqhead"><h2 style="margin:0">Equity</h2>
<div><span class="big" id="eqval">—</span> <span class="pc" id="eqpc"></span></div></div> <div><span class="big" id="eqval">—</span> <span class="pc" id="eqpc"></span></div></div>
<canvas id="eq"></canvas></div> <div class="chartbox eq"><canvas id="eq"></canvas></div></div>
<div class="card sec"><h2>PnL per strategia REALE (realizzato, netto fee)</h2><div id="strat"></div></div> <div class="card sec"><h2>PnL per strategia REALE (realizzato, netto fee)</h2><div id="strat"></div></div>
<div class="card sec"><h2>Trade attivi — stato in tempo reale</h2><div id="active"></div></div> <div class="card sec"><h2>Trade attivi — stato in tempo reale</h2><div id="active"></div></div>
<div class="card sec"><h2>Trade chiusi (ultimi 50)</h2><div id="closed"></div></div> <div class="card sec"><h2>Trade chiusi (ultimi 50)</h2><div id="closed"></div></div>
@@ -406,7 +409,7 @@ HTML = r"""<!doctype html><html lang="it"><head><meta charset="utf-8">
<div class="eqhead"><h2 style="margin:0;color:#d29922">📄 Area PAPER — multi-asset (solo statistica, fuori dal pool reale)</h2> <div class="eqhead"><h2 style="margin:0;color:#d29922">📄 Area PAPER — multi-asset (solo statistica, fuori dal pool reale)</h2>
<div><span class="big" id="peqval">—</span> <span class="pc" id="peqpc"></span></div></div> <div><span class="big" id="peqval">—</span> <span class="pc" id="peqpc"></span></div></div>
<div class="sub">TR01 / ROT02 / TSM01 / XS01 girano con capitale nozionale fisso per valutarne l'edge in vista di un'esecuzione reale futura (bloccata dal capitale a €2k). Equity e PnL separati dal portafoglio reale.</div> <div class="sub">TR01 / ROT02 / TSM01 / XS01 girano con capitale nozionale fisso per valutarne l'edge in vista di un'esecuzione reale futura (bloccata dal capitale a €2k). Equity e PnL separati dal portafoglio reale.</div>
<div class="card" style="margin:10px 0"><canvas id="peq"></canvas></div> <div class="card" style="margin:10px 0"><div class="chartbox peq"><canvas id="peq"></canvas></div></div>
<div class="card"><div id="pstrat"></div></div> <div class="card"><div id="pstrat"></div></div>
</div> </div>
@@ -419,7 +422,7 @@ HTML = r"""<!doctype html><html lang="it"><head><meta charset="utf-8">
<div class="ver" id="mver"></div> <div class="ver" id="mver"></div>
<div id="mpos" class="sub"></div> <div id="mpos" class="sub"></div>
<h2 style="font-size:13px;color:var(--acc);margin:14px 0 6px">PnL cumulato (reale vs sim)</h2> <h2 style="font-size:13px;color:var(--acc);margin:14px 0 6px">PnL cumulato (reale vs sim)</h2>
<canvas id="mchart"></canvas><div id="mempty" class="mut"></div> <div class="chartbox m"><canvas id="mchart"></canvas></div><div id="mempty" class="mut"></div>
<a class="btn" id="mfull" href="/report/strategie_attive.html" target="_blank">📊 Scheda dettagliata con grafici della strategia</a> <a class="btn" id="mfull" href="/report/strategie_attive.html" target="_blank">📊 Scheda dettagliata con grafici della strategia</a>
<h2 style="font-size:13px;color:var(--acc);margin:16px 0 6px">Trade di questa strategia</h2> <h2 style="font-size:13px;color:var(--acc);margin:16px 0 6px">Trade di questa strategia</h2>
<div id="mtrades"></div> <div id="mtrades"></div>
@@ -451,7 +454,7 @@ function renderChart(curve,init){const ctx=document.getElementById('eq');
chart=new Chart(ctx,{type:'line',data:{labels,datasets:[{data,borderColor:`rgb(${col})`, chart=new Chart(ctx,{type:'line',data:{labels,datasets:[{data,borderColor:`rgb(${col})`,
backgroundColor:grad,fill:true,pointRadius:0,pointHoverRadius:5,pointHoverBackgroundColor:'#fff', backgroundColor:grad,fill:true,pointRadius:0,pointHoverRadius:5,pointHoverBackgroundColor:'#fff',
borderWidth:2.5,tension:.25}]}, borderWidth:2.5,tension:.25}]},
options:{interaction:{mode:'index',intersect:false},plugins:{legend:{display:false}, options:{responsive:true,maintainAspectRatio:false,interaction:{mode:'index',intersect:false},plugins:{legend:{display:false},
tooltip:{backgroundColor:'#161b22',borderColor:'#30363d',borderWidth:1,titleColor:'#8b949e', tooltip:{backgroundColor:'#161b22',borderColor:'#30363d',borderWidth:1,titleColor:'#8b949e',
bodyColor:'#c9d1d9',padding:10,displayColors:false, bodyColor:'#c9d1d9',padding:10,displayColors:false,
callbacks:{label:c=>'€'+c.parsed.y.toFixed(2)+' ('+(c.parsed.y-init>=0?'+':'')+(c.parsed.y-init).toFixed(2)+'€)'}}}, callbacks:{label:c=>'€'+c.parsed.y.toFixed(2)+' ('+(c.parsed.y-init>=0?'+':'')+(c.parsed.y-init).toFixed(2)+'€)'}}},
@@ -492,7 +495,7 @@ async function openModal(wid){const ov=document.getElementById('ov');ov.classLis
data:{labels:lab,datasets:[ data:{labels:lab,datasets:[
{label:'reale',data:c.map(x=>x.real),borderColor:'#3fb950',backgroundColor:'rgba(63,185,80,.08)',fill:true,pointRadius:0,borderWidth:2,tension:.15}, {label:'reale',data:c.map(x=>x.real),borderColor:'#3fb950',backgroundColor:'rgba(63,185,80,.08)',fill:true,pointRadius:0,borderWidth:2,tension:.15},
{label:'sim',data:c.map(x=>x.sim),borderColor:'#8b949e',borderDash:[5,4],pointRadius:0,borderWidth:1.5,tension:.15}]}, {label:'sim',data:c.map(x=>x.sim),borderColor:'#8b949e',borderDash:[5,4],pointRadius:0,borderWidth:1.5,tension:.15}]},
options:{plugins:{legend:{labels:{color:'#c9d1d9'}}},scales:{x:{ticks:{color:'#8b949e',maxTicksLimit:7},grid:{display:false}},y:{ticks:{color:'#8b949e'},grid:{color:'#21262d'}}}}});} options:{responsive:true,maintainAspectRatio:false,interaction:{mode:'index',intersect:false},plugins:{legend:{labels:{color:'#c9d1d9'}}},scales:{x:{ticks:{color:'#8b949e',maxTicksLimit:7},grid:{display:false}},y:{ticks:{color:'#8b949e'},grid:{color:'#21262d'}}}}});}
// trade // trade
const mt=document.getElementById('mtrades'); const mt=document.getElementById('mtrades');
if(!d.trades.length){mt.innerHTML='<div class=mut>nessun trade</div>';} if(!d.trades.length){mt.innerHTML='<div class=mut>nessun trade</div>';}
@@ -530,7 +533,7 @@ function renderPaper(p){
peqchart=new Chart(ctx,{type:'line',data:{labels:lab.length?lab:['inizio'],datasets:[{ peqchart=new Chart(ctx,{type:'line',data:{labels:lab.length?lab:['inizio'],datasets:[{
data:data.length?data:[p.init],borderColor:'#d29922',backgroundColor:'rgba(210,153,34,.12)', data:data.length?data:[p.init],borderColor:'#d29922',backgroundColor:'rgba(210,153,34,.12)',
fill:true,pointRadius:c.length<30?3:0,borderWidth:2,tension:.2}]}, fill:true,pointRadius:c.length<30?3:0,borderWidth:2,tension:.2}]},
options:{plugins:{legend:{display:false},tooltip:{callbacks:{label:x=>'€'+x.parsed.y.toFixed(2)}}}, options:{responsive:true,maintainAspectRatio:false,interaction:{mode:'index',intersect:false},plugins:{legend:{display:false},tooltip:{callbacks:{label:x=>'€'+x.parsed.y.toFixed(2)}}},
scales:{x:{ticks:{color:'#6e7681',maxTicksLimit:7,font:{size:10}},grid:{display:false}}, scales:{x:{ticks:{color:'#6e7681',maxTicksLimit:7,font:{size:10}},grid:{display:false}},
y:{ticks:{color:'#6e7681',callback:v=>'€'+v},grid:{color:'rgba(48,54,61,.5)'}}}}});} y:{ticks:{color:'#6e7681',callback:v=>'€'+v},grid:{color:'rgba(48,54,61,.5)'}}}}});}
function renderDescs(d){const wrap=document.getElementById('descs');if(!wrap)return;wrap.innerHTML=''; function renderDescs(d){const wrap=document.getElementById('descs');if(!wrap)return;wrap.innerHTML='';