Step 2: Risk and Stops - Generating reports with pdf. It is missing to reorder the PDF.

This commit is contained in:
DaM
2026-02-13 07:01:44 +01:00
parent 4d769af8bf
commit 44667df3dd
27 changed files with 4318 additions and 103 deletions

View File

@@ -0,0 +1,809 @@
// src/web/ui/v2/static/js/pages/calibration_risk.js
console.log(
"[calibration_risk] script loaded ✅",
new Date().toISOString()
);
// =================================================
// INSPECT RISK & STOPS
// =================================================
async function inspectCalibrationRisk() {
console.log("[calibration_risk] inspectCalibrationRisk() START ✅");
// --------------------------------------------------
// Load calibration context from Step 1
// --------------------------------------------------
const symbol = localStorage.getItem("calibration.symbol");
const timeframe = localStorage.getItem("calibration.timeframe");
if (!symbol || !timeframe) {
alert("Calibration context not found. Please complete Step 1 (Data) first.");
return;
}
// --------------------------------------------------
// Read form inputs
// --------------------------------------------------
const accountEquityEl = document.getElementById("account_equity");
const riskFractionEl = document.getElementById("risk_fraction");
const maxPositionEl = document.getElementById("max_position_fraction");
const stopTypeEl = document.getElementById("stop_type");
const stopFractionEl = document.getElementById("stop_fraction");
const atrPeriodEl = document.getElementById("atr_period");
const atrMultiplierEl = document.getElementById("atr_multiplier");
const maxDrawdownEl = document.getElementById("max_drawdown_pct");
if (!accountEquityEl || !riskFractionEl || !maxPositionEl || !stopTypeEl || !maxDrawdownEl) {
console.error("[calibration_risk] Missing required form elements");
alert("Internal error: risk form is incomplete.");
return;
}
// --------------------------------------------------
// Build stop config
// --------------------------------------------------
const stopType = stopTypeEl.value;
let stopConfig = { type: stopType };
if (stopType === "fixed" || stopType === "trailing") {
if (!stopFractionEl) {
alert("Stop fraction input missing");
return;
}
stopConfig.stop_fraction = parseFloat(stopFractionEl.value) / 100;
}
if (stopType === "atr") {
if (!atrPeriodEl || !atrMultiplierEl) {
alert("ATR parameters missing");
return;
}
stopConfig.atr_period = parseInt(atrPeriodEl.value);
stopConfig.atr_multiplier = parseFloat(atrMultiplierEl.value);
}
// --------------------------------------------------
// Build payload
// --------------------------------------------------
const payload = buildRiskPayload();
console.log("[calibration_risk] inspect payload:", payload);
// --------------------------------------------------
// Disable next step while inspecting
// --------------------------------------------------
disableNextStep();
// --------------------------------------------------
// Call API
// --------------------------------------------------
try {
const res = await fetch("/api/v2/calibration/risk/inspect", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
const data = await res.json();
console.log("[calibration_risk] inspect response:", data);
renderRiskResult(payload, data);
// --------------------------------------------------
// Enable next step if OK or WARNING
// --------------------------------------------------
if (data.valid && data.status !== "fail") {
enableNextStep();
}
} catch (err) {
console.error("[calibration_risk] inspect FAILED", err);
alert("Error inspecting risk configuration");
disableNextStep();
}
}
// =================================================
// VALIDATE RISK & STOPS
// =================================================
async function validateCalibrationRisk() {
console.log("[calibration_risk] inspectCalibrationRisk() START ✅");
// --------------------------------------------------
// Load calibration context from Step 1
// --------------------------------------------------
const symbol = localStorage.getItem("calibration.symbol");
const timeframe = localStorage.getItem("calibration.timeframe");
if (!symbol || !timeframe) {
alert("Calibration context not found. Please complete Step 1 (Data) first.");
return;
}
// --------------------------------------------------
// Read form inputs
// --------------------------------------------------
const accountEquityEl = document.getElementById("account_equity");
const riskFractionEl = document.getElementById("risk_fraction");
const maxPositionEl = document.getElementById("max_position_fraction");
const stopTypeEl = document.getElementById("stop_type");
const stopFractionEl = document.getElementById("stop_fraction");
const atrPeriodEl = document.getElementById("atr_period");
const atrMultiplierEl = document.getElementById("atr_multiplier");
const maxDrawdownEl = document.getElementById("max_drawdown_pct");
if (!accountEquityEl || !riskFractionEl || !maxPositionEl || !stopTypeEl || !maxDrawdownEl) {
console.error("[calibration_risk] Missing required form elements");
alert("Internal error: risk form is incomplete.");
return;
}
// --------------------------------------------------
// Build stop config
// --------------------------------------------------
const stopType = stopTypeEl.value;
let stopConfig = { type: stopType };
if (stopType === "fixed" || stopType === "trailing") {
if (!stopFractionEl) {
alert("Stop fraction input missing");
return;
}
stopConfig.stop_fraction = parseFloat(stopFractionEl.value) / 100;
}
if (stopType === "atr") {
if (!atrPeriodEl || !atrMultiplierEl) {
alert("ATR parameters missing");
return;
}
stopConfig.atr_period = parseInt(atrPeriodEl.value);
stopConfig.atr_multiplier = parseFloat(atrMultiplierEl.value);
}
// --------------------------------------------------
// Build payload
// --------------------------------------------------
const payload = buildRiskPayload();
console.log("[calibration_risk] inspect payload:", payload);
// --------------------------------------------------
// Disable next step while inspecting
// --------------------------------------------------
disableNextStep();
// --------------------------------------------------
// Call API
// --------------------------------------------------
try {
const res = await fetch("/api/v2/calibration/risk/validate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
const data = await res.json();
console.log("[calibration_risk] inspect response:", data);
renderRiskResult(payload, data);
// --------------------------------------------------
// Enable next step if OK or WARNING
// --------------------------------------------------
if (data.valid && data.status !== "fail") {
enableNextStep();
}
} catch (err) {
console.error("[calibration_risk] inspect FAILED", err);
alert("Error inspecting risk configuration");
disableNextStep();
}
}
// =================================================
// PDF REPORT RISK & STOPS
// =================================================
async function generateRiskReport() {
console.log("[calibration_risk] generateRiskReport() START");
const payload = buildRiskPayload(); // reutiliza la misma función que validate
const res = await fetch("/api/v2/calibration/risk/report", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
if (!res.ok) {
console.error("Failed to generate report");
return;
}
const blob = await res.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "risk_report.pdf";
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}
// =================================================
// WIZARD NAVIGATION
// =================================================
function enableNextStep() {
const btn = document.getElementById("next-step-btn");
if (!btn) return;
btn.classList.remove("btn-outline-secondary");
btn.classList.add("btn-outline-primary");
btn.setAttribute("aria-disabled", "false");
}
function disableNextStep() {
const btn = document.getElementById("next-step-btn");
if (!btn) return;
btn.classList.remove("btn-outline-primary");
btn.classList.add("btn-outline-secondary");
btn.setAttribute("aria-disabled", "true");
}
// =================================================
// RENDER RESULT
// =================================================
function renderRiskResult(payload, data) {
const container = document.getElementById("risk_result");
const badge = document.getElementById("risk_status_badge");
const message = document.getElementById("risk_message");
const debug = document.getElementById("risk_debug");
if (!container || !badge || !message || !debug) {
console.warn("[calibration_risk] Result elements missing");
return;
}
container.classList.remove("d-none");
badge.className = "badge";
if (data.status === "ok") {
badge.classList.add("bg-success");
} else if (data.status === "warning") {
badge.classList.add("bg-warning");
} else {
badge.classList.add("bg-danger");
}
badge.textContent = data.status.toUpperCase();
message.textContent = data.message;
debug.textContent = JSON.stringify(data.checks, null, 2);
renderRiskChecks(data.checks);
if (data.checks?.stop_sanity?.metrics) {
renderStopQuantiles(data.checks.stop_sanity.metrics);
}
renderRiskFormulas(payload, data)
if (!data.series) {
console.warn("[calibration_risk] No series returned, skipping plots");
return;
}
if (data.series?.timestamps && data.series?.position_size_pct) {
renderPositionSizePlot({
timestamps: data.series.timestamps,
positionSizePct: data.series.position_size_pct,
maxPositionFraction: payload.risk.max_position_fraction
});
renderEffectiveRiskPlot({
timestamps: data.series.timestamps,
effectiveRiskPct: data.series.effective_risk_pct,
targetRiskFraction: payload.risk.risk_fraction
});
renderStopDistanceDistribution({
stopDistances: data.series.stop_distances,
quantiles: data.checks?.stop_sanity?.metrics
});
}
}
// =================================================
// RENDER RISK CHECKS
// =================================================
function renderRiskChecks(checks) {
const list = document.getElementById("risk_checks_list");
if (!list || !checks) return;
list.innerHTML = "";
Object.entries(checks).forEach(([key, check]) => {
const li = document.createElement("li");
li.classList.add("mb-1");
let icon = "❌";
let color = "text-danger";
if (check.status === "ok") {
icon = "✅";
color = "text-success";
} else if (check.status === "warning") {
icon = "⚠️";
color = "text-warning";
}
const title = key.replace(/_/g, " ");
li.innerHTML = `
<span class="${color}">
${icon} <strong>${title}</strong>
</span>
${check.message ? `<span class="text-muted"> — ${check.message}</span>` : ""}
`;
list.appendChild(li);
});
}
function renderStopQuantiles(metrics) {
const el = document.getElementById("stop_quantiles");
if (!el || !metrics) return;
el.innerHTML = `
<li>P50 (typical): ${(metrics.p50 * 100).toFixed(2)}%</li>
<li>P90 (wide): ${(metrics.p90 * 100).toFixed(2)}%</li>
<li>P99 (extreme): ${(metrics.p99 * 100).toFixed(2)}%</li>
`;
}
// =================================================
// RENDER RISK FORMULAS
// =================================================
function renderRiskFormulas(payload, result) {
const el = document.getElementById("risk_formulas");
if (!el) return;
const equity = payload.account_equity;
const riskFraction = payload.risk.risk_fraction;
const maxPositionFraction = payload.risk.max_position_fraction;
const stopMetrics = result.checks?.stop_sanity?.metrics;
if (!stopMetrics || stopMetrics.p50 == null) {
el.textContent = "Unable to compute risk formulas (missing stop metrics)";
return;
}
const stopP50 = stopMetrics.p50;
const idealPosition = (equity * riskFraction) / stopP50;
const maxPosition = equity * maxPositionFraction;
const effectivePosition = Math.min(idealPosition, maxPosition);
const effectiveRisk = (effectivePosition * stopP50) / equity;
el.innerHTML = `
<li>Position size (ideal)
= ${equity.toLocaleString()} × ${(riskFraction * 100).toFixed(2)}% ÷ ${(stopP50 * 100).toFixed(2)}%
${idealPosition.toFixed(0)}</li>
<li>Max position size
= ${equity.toLocaleString()} × ${(maxPositionFraction * 100).toFixed(2)}%
= ${maxPosition.toFixed(0)}</li>
<li>Effective position
= min(${idealPosition.toFixed(0)}, ${maxPosition.toFixed(0)})
= ${effectivePosition.toFixed(0)}</li>
<li>Effective risk
= ${effectivePosition.toFixed(0)} × ${(stopP50 * 100).toFixed(2)}% ÷ ${equity.toLocaleString()}
${(effectiveRisk * 100).toFixed(2)}%</li>
`;
}
// =================================================
// STOP TYPE UI LOGIC
// =================================================
function updateStopParamsUI() {
const stopType = document.getElementById("stop_type")?.value;
if (!stopType) return;
// Hide all stop param blocks
document.querySelectorAll(".stop-param").forEach(el => {
el.classList.add("d-none");
});
// Show relevant blocks
if (stopType === "fixed" || stopType === "trailing") {
document.querySelectorAll(".stop-fixed, .stop-trailing").forEach(el => {
el.classList.remove("d-none");
});
}
if (stopType === "atr") {
document.querySelectorAll(".stop-atr").forEach(el => {
el.classList.remove("d-none");
});
}
}
// =================================================
// RENDER PLOTS
// =================================================
function renderPositionSizePlot({
timestamps,
positionSizePct,
maxPositionFraction
}) {
const el = document.getElementById("position_size_plot");
if (!el) {
console.warn("[calibration_risk] position_size_plot not found");
return;
}
if (!timestamps || !positionSizePct || timestamps.length === 0) {
el.innerHTML = "<em>No position size data available</em>";
return;
}
const trace = {
x: timestamps,
y: positionSizePct.map(v => v * 100),
type: "scatter",
mode: "lines",
name: "Position size",
line: {
color: "#59a14f",
width: 2
}
};
const layout = {
yaxis: {
title: "Position size (% equity)",
rangemode: "tozero"
},
xaxis: {
title: "Time"
},
shapes: [
{
type: "line",
xref: "paper",
x0: 0,
x1: 1,
y0: maxPositionFraction * 100,
y1: maxPositionFraction * 100,
line: {
dash: "dot",
color: "#e15759",
width: 2
}
}
],
annotations: [
{
xref: "paper",
x: 1,
y: maxPositionFraction * 100,
xanchor: "left",
text: "Max position cap",
showarrow: false,
font: {
size: 11,
color: "#e15759"
}
}
],
margin: { t: 20 }
};
Plotly.newPlot(el, [trace], layout, {
responsive: true,
displayModeBar: true
});
}
function renderEffectiveRiskPlot({
timestamps,
effectiveRiskPct,
targetRiskFraction
}) {
const el = document.getElementById("effective_risk_plot");
if (!el) {
console.warn("[calibration_risk] effective_risk_plot not found");
return;
}
if (!timestamps || !effectiveRiskPct || timestamps.length === 0) {
el.innerHTML = "<em>No effective risk data available</em>";
return;
}
const trace = {
x: timestamps,
y: effectiveRiskPct.map(v => v * 100),
type: "scatter",
mode: "lines",
name: "Effective risk",
line: {
color: "#f28e2b",
width: 2
}
};
const layout = {
yaxis: {
title: "Effective risk (% equity)",
rangemode: "tozero"
},
xaxis: {
title: "Time"
},
shapes: [
{
type: "line",
xref: "paper",
x0: 0,
x1: 1,
y0: targetRiskFraction * 100,
y1: targetRiskFraction * 100,
line: {
dash: "dot",
color: "#4c78a8",
width: 2
}
}
],
annotations: [
{
xref: "paper",
x: 1,
y: targetRiskFraction * 100,
xanchor: "left",
text: "Target risk",
showarrow: false,
font: {
size: 11,
color: "#4c78a8"
}
}
],
margin: { t: 20 }
};
Plotly.newPlot(el, [trace], layout, {
responsive: true,
displayModeBar: true
});
}
function renderStopDistanceDistribution({
stopDistances,
quantiles
}) {
const el = document.getElementById("stop_distance_plot");
if (!el) {
console.warn("[calibration_risk] stop_distance_plot not found");
return;
}
if (!stopDistances || stopDistances.length === 0) {
el.innerHTML = "<em>No stop distance data available</em>";
return;
}
const valuesPct = stopDistances
.filter(v => v != null && v > 0)
.map(v => v * 100);
const trace = {
x: valuesPct,
type: "histogram",
nbinsx: 40,
name: "Stop distance",
marker: {
color: "#bab0ac"
}
};
const shapes = [];
const annotations = [];
if (quantiles) {
const qMap = [
{ key: "p50", label: "P50 (typical)", color: "#4c78a8" },
{ key: "p90", label: "P90 (wide)", color: "#f28e2b" },
{ key: "p99", label: "P99 (extreme)", color: "#e15759" }
];
qMap.forEach(q => {
const val = quantiles[q.key];
if (val != null) {
shapes.push({
type: "line",
xref: "x",
yref: "paper",
x0: val * 100,
x1: val * 100,
y0: 0,
y1: 1,
line: {
dash: "dot",
width: 2,
color: q.color
}
});
annotations.push({
x: val * 100,
y: 1,
yref: "paper",
xanchor: "left",
text: q.label,
showarrow: false,
font: {
size: 11,
color: q.color
}
});
}
});
}
const layout = {
xaxis: {
title: "Stop distance (% price)"
},
yaxis: {
title: "Frequency"
},
shapes: shapes,
annotations: annotations,
margin: { t: 20 }
};
Plotly.newPlot(el, [trace], layout, {
responsive: true,
displayModeBar: true
});
}
// =================================================
// UTILS
// =================================================
function num(id) {
const el = document.getElementById(id);
if (!el) return null;
const val = el.value;
if (val === "" || val === null || val === undefined) return null;
const n = Number(val);
return Number.isFinite(n) ? n : null;
}
function buildRiskPayload() {
const symbol = localStorage.getItem("calibration.symbol");
const timeframe = localStorage.getItem("calibration.timeframe");
const stopType = document.getElementById("stop_type")?.value;
const stop = { type: stopType };
if (stopType === "fixed" || stopType === "trailing") {
stop.stop_fraction = num("stop_fraction");
}
if (stopType === "atr") {
stop.atr_period = num("atr_period");
stop.atr_multiplier = num("atr_multiplier");
}
const payload = {
symbol,
timeframe,
account_equity: num("account_equity"),
risk: {
risk_fraction: num("risk_fraction") / 100,
max_position_fraction: num("max_position_fraction") / 100,
},
stop,
global_rules: {
max_drawdown_pct: num("max_drawdown_pct") / 100,
daily_loss_limit_pct: num("daily_loss_limit_pct")
? num("daily_loss_limit_pct") / 100
: null,
max_consecutive_losses: num("max_consecutive_losses"),
cooldown_bars: num("cooldown_bars"),
},
};
console.log("[calibration_risk] FINAL PAYLOAD:", payload);
return payload;
}
// =================================================
// INIT
// =================================================
document.addEventListener("DOMContentLoaded", () => {
console.log("[calibration_risk] DOMContentLoaded ✅");
document
.getElementById("inspect_risk_btn")
?.addEventListener("click", inspectCalibrationRisk);
const stopTypeSelect = document.getElementById("stop_type");
stopTypeSelect?.addEventListener("change", updateStopParamsUI);
const symbol = localStorage.getItem("calibration.symbol");
const timeframe = localStorage.getItem("calibration.timeframe");
if (symbol && timeframe) {
const symbolEl = document.getElementById("ctx_symbol");
const timeframeEl = document.getElementById("ctx_timeframe");
if (symbolEl) symbolEl.textContent = symbol;
if (timeframeEl) timeframeEl.textContent = timeframe;
}
// Initial state
updateStopParamsUI();
});
document.addEventListener("DOMContentLoaded", () => {
console.log("[calibration_risk] DOMContentLoaded ✅");
document
.getElementById("validate_risk_btn")
?.addEventListener("click", validateCalibrationRisk);
const stopTypeSelect = document.getElementById("stop_type");
stopTypeSelect?.addEventListener("change", updateStopParamsUI);
const symbol = localStorage.getItem("calibration.symbol");
const timeframe = localStorage.getItem("calibration.timeframe");
if (symbol && timeframe) {
const symbolEl = document.getElementById("ctx_symbol");
const timeframeEl = document.getElementById("ctx_timeframe");
if (symbolEl) symbolEl.textContent = symbol;
if (timeframeEl) timeframeEl.textContent = timeframe;
}
// Initial state
updateStopParamsUI();
});
document.addEventListener("DOMContentLoaded", () => {
console.log("[calibration_risk] DOMContentLoaded ✅");
document
.getElementById("generate_report_btn")
?.addEventListener("click", generateRiskReport);
});