of-heatmaps.html

<!DOCTYPE html>
<html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order-Flow — хитмапы параметров</title>
<style>
  :root{--bg:#0a0e17;--card:rgba(255,255,255,.04);--border:rgba(255,255,255,.09);
    --txt:#e6edf3;--muted:#8b98a9;--green:#21d07a;--red:#f6465d;--blue:#3b82f6;--amber:#f59e0b}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:radial-gradient(1200px 600px at 80% -10%,rgba(33,208,122,.10),transparent),
               radial-gradient(900px 500px at 0% 0%,rgba(59,130,246,.08),transparent),var(--bg);
    color:var(--txt);min-height:100vh;padding:22px 14px;line-height:1.45}
  .wrap{max-width:1080px;margin:0 auto}
  header{margin-bottom:12px}
  h1{font-size:21px;font-weight:700;letter-spacing:-.5px}
  h1 .em{background:linear-gradient(90deg,#10b981,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{color:var(--muted);font-size:12px;margin-top:5px}
  .glass{background:var(--card);border:1px solid var(--border);border-radius:13px}
  .warn{padding:11px 15px;margin-bottom:12px;border-left:3px solid var(--amber);font-size:11.5px;background:rgba(245,158,11,.06)}
  .warn b{color:var(--amber)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
  .section{padding:14px 16px}
  .section h2{font-size:13px;font-weight:600;margin-bottom:2px}
  .section .h{font-size:10.5px;color:var(--muted);margin-bottom:10px}
  .hm{width:100%;border-collapse:separate;border-spacing:4px}
  .hm th{color:var(--muted);font-size:10px;font-weight:500;padding:2px}
  .hm td{text-align:center;padding:10px 4px;border-radius:7px;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
  .hm td.lbl{background:none!important;color:var(--muted);font-weight:600;text-align:right;font-size:10.5px}
  .axis{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
  .verdict{padding:14px 16px;border-left:3px solid var(--green);font-size:12px}
  .verdict b{color:var(--green)}
  .legend{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);margin-top:8px}
  .legend .sw{width:60px;height:10px;border-radius:3px;background:linear-gradient(90deg,rgba(120,33,90,.5),rgba(80,120,90,.4),rgba(33,208,90,.75))}
  .foot{color:var(--muted);font-size:10px;margin-top:7px;text-align:center}
  @media(max-width:720px){.grid2{grid-template-columns:1fr}}
</style></head>
<body><div class="wrap">
  <header>
    <h1>🔥 Order-Flow — <span class="em">хитмапы параметров</span></h1>
    <div class="sub" id="sub"></div>
  </header>

  <div class="warn glass" id="warn"></div>

  <div class="grid2">
    <div class="section glass"><h2>🎯 TP × SL</h2><div class="h">тайм-стоп 10м · все conf</div><div id="hm_tpsl"></div></div>
    <div class="section glass"><h2>🎚 Confidence × TP</h2><div class="h">SL 0.5 · тайм-стоп 10м · 🔑 ключевая</div><div id="hm_conftp"></div></div>
  </div>
  <div class="grid2">
    <div class="section glass"><h2>🎚 Confidence × Тайм-стоп</h2><div class="h">TP 1.5 / SL 0.5</div><div id="hm_confhold"></div></div>
    <div class="section glass"><h2>⏱ Тайм-стоп × TP</h2><div class="h">SL 0.5 · все conf</div><div id="hm_holdtp"></div></div>
  </div>

  <div class="verdict glass" id="verdict"></div>
  <div class="foot" id="foot"></div>
</div>

<script>
const D = {"fee": 0.036, "n": 236, "total": 715, "span": ["06:51", "20:40"], "tp_sl": {"rows": [0.5, 0.8, 1.0, 1.5, 2.0], "cols": [0.3, 0.5, 0.8], "cells": [[0.024, -0.011, -0.062], [0.084, 0.055, -0.001], [0.123, 0.098, 0.041], [0.176, 0.154, 0.092], [0.222, 0.208, 0.146]]}, "conf_tp": {"rows": ["50-59", "60-69", "70+"], "cols": [0.5, 0.8, 1.0, 1.5, 2.0], "cells": [[-0.021, 0.057, 0.095, 0.132, 0.181], [0.012, -0.008, 0.038, 0.108, 0.143], [0.064, 0.244, 0.364, 0.664, 0.872]]}, "conf_hold": {"rows": ["50-59", "60-69", "70+"], "cols": [3, 5, 10, 15, 30], "cells": [[0.038, 0.097, 0.132, 0.12, 0.151], [0.04, 0.012, 0.108, 0.242, 0.186], [0.642, 0.784, 0.664, 0.664, 0.574]]}, "hold_tp": {"rows": [3, 5, 10, 15, 30], "cols": [0.5, 0.8, 1.0, 1.5, 2.0], "cells": [[-0.018, 0.016, 0.032, 0.065, 0.094], [-0.008, 0.041, 0.072, 0.113, 0.143], [-0.011, 0.055, 0.098, 0.154, 0.208], [-0.005, 0.061, 0.109, 0.167, 0.224], [-0.004, 0.066, 0.114, 0.178, 0.227]]}, "conf_n": {"50-59": 183, "60-69": 41, "70+": 12}};
const pct=(v)=>v==null?'—':(v>0?'+':'')+v.toFixed(2);
// global color scale across all grids
const all=[]; ['tp_sl','conf_tp','conf_hold','hold_tp'].forEach(g=>D[g].cells.forEach(r=>r.forEach(v=>{if(v!=null)all.push(v)})));
const mn=Math.min(...all),mx=Math.max(...all);
const col=v=>{if(v==null)return 'rgba(255,255,255,.03)';const t=(v-mn)/(mx-mn||1);
  const r=Math.round(150-t*120),g=Math.round(40+t*170),b=90;return `rgba(${r},${g},${b},${0.22+t*0.6})`};
function draw(id,G,rowLbl,colLbl,rowFmt,colFmt){
  let h=`<div class="axis">столбцы: ${colLbl}</div><table class="hm"><tr><td class="lbl">${rowLbl} ↓</td>`+
    G.cols.map(c=>`<th>${colFmt(c)}</th>`).join('')+'</tr>';
  G.cells.forEach((row,i)=>{
    h+=`<tr><td class="lbl">${rowFmt(G.rows[i])}</td>`+
      row.map(v=>`<td style="background:${col(v)}">${pct(v)}</td>`).join('')+'</tr>';
  });
  h+='</table>';
  document.getElementById(id).innerHTML=h;
}
document.getElementById('sub').textContent =
  `${D.total} сигналов за ~14ч · ${D.n} path-сделок (depth 4ч) · net P&L/сделку % (maker ${D.fee}%) · единая шкала цвета · conf-выборки: 50-59 n${D.conf_n['50-59']} / 60-69 n${D.conf_n['60-69']} / 70+ n${D.conf_n['70+']}`;
document.getElementById('warn').innerHTML =
  `⚠️ <b>~14ч сбора, но path только по 236 (depth.db 4ч). conf 70+ тут n=12 — мелко!</b> Тренды видны, но не финал. Зелёное = выше net/сделку. SL 0.3% и крайние ячейки — хрупкий in-sample оптимум (узкий стоп нереален вживую: спред+слиппедж). Смотри на НАПРАВЛЕНИЕ градиента, не на абсолют.`;

draw('hm_tpsl',D.tp_sl,'TP','SL %',v=>'TP '+v+'%',v=>'SL '+v);
draw('hm_conftp',D.conf_tp,'Conf','TP %',v=>v,v=>v+'%');
draw('hm_confhold',D.conf_hold,'Conf','мин',v=>v,v=>v+'м');
draw('hm_holdtp',D.hold_tp,'Hold','TP %',v=>v+'м',v=>v+'%');

document.getElementById('verdict').innerHTML =
  `<b>Что кричат хитмапы:</b><br>`+
  `• 🔑 <b>Confidence × TP:</b> строка 70+ вся ярко-зелёная и растёт (+0.12 → <b>+0.55</b>), строка 50-59 бледная. Сильный дисбаланс + широкий тейк = главный градиент. Слабые сигналы (50-59) почти не дают эджа.<br>`+
  `• <b>Confidence × Тайм-стоп:</b> у 70+ чем дольше держишь — тем лучше (до +0.72 на 30м!), у слабых — плоско. Сильный сигнал = можно дать прибыли течь.<br>`+
  `• <b>TP×SL и Hold×TP:</b> монотонный градиент вправо-вверх — шире TP всегда лучше; узкий SL добавляет, но это хрупко.<br>`+
  `<b>Вывод для стратегии:</b> эдж концентрируется в <b>conf≥70 + широкий тейк (1.5-2%) + держать 15-30м</b>. Кандидат: поднять порог эмита и не резать рано. ⚠️ Проверить на нескольких днях/режимах прежде чем верить абсолютам.`;

document.getElementById('foot').textContent='Реальные сигналы × path depth.db · path-resolved · maker 0.036% · единая цветовая шкала · Бендер';
</script>
</body></html>
Nothing found