mirror of
https://github.com/FxPouya/FxMathQuantWebApp.git
synced 2026-08-06 14:47:44 +00:00
Add files via upload
This commit is contained in:
FxPouya
@@ -0,0 +1,272 @@
|
||||
/**
|
||||
* HTML Report Generator - Creates interactive performance reports
|
||||
*/
|
||||
class ReportGenerator {
|
||||
constructor(strategy, strategyName) {
|
||||
this.strategy = strategy;
|
||||
this.name = strategyName || 'Strategy Report';
|
||||
}
|
||||
|
||||
generate() {
|
||||
const m = this.strategy.metrics;
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${this.name} - Performance Report</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
|
||||
color: #ffffff;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.container { max-width: 1200px; margin: 0 auto; }
|
||||
h1 { font-size: 32px; margin-bottom: 10px; color: #667eea; }
|
||||
.subtitle { color: #a0aec0; margin-bottom: 30px; }
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.metric-card {
|
||||
background: #1a1f3a;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2d3748;
|
||||
}
|
||||
.metric-label {
|
||||
font-size: 12px;
|
||||
color: #718096;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.positive { color: #48bb78; }
|
||||
.negative { color: #f56565; }
|
||||
.neutral { color: #667eea; }
|
||||
.chart-container {
|
||||
background: #1a1f3a;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #2d3748;
|
||||
}
|
||||
.rules-section {
|
||||
background: #1a1f3a;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #2d3748;
|
||||
}
|
||||
.rule {
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
background: #0a0e27;
|
||||
border-radius: 6px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #1a1f3a;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
th, td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #2d3748;
|
||||
}
|
||||
th {
|
||||
background: #0a0e27;
|
||||
color: #a0aec0;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
}
|
||||
tr:hover { background: #252b4a; }
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
color: #718096;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>${this.name}</h1>
|
||||
<p class="subtitle">Generated by FxMathQuant Web - AI-Powered Strategy Generator</p>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Profit Factor</div>
|
||||
<div class="metric-value ${m.profitFactor >= 1.5 ? 'positive' : 'negative'}">
|
||||
${m.profitFactor.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Win Rate</div>
|
||||
<div class="metric-value neutral">${m.winRate.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Total Trades</div>
|
||||
<div class="metric-value neutral">${m.totalTrades}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Max Drawdown</div>
|
||||
<div class="metric-value negative">${m.maxDrawdown.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Total Profit</div>
|
||||
<div class="metric-value ${m.totalProfit >= 0 ? 'positive' : 'negative'}">
|
||||
$${m.totalProfit.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Final Balance</div>
|
||||
<div class="metric-value positive">$${m.finalBalance.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Avg Win</div>
|
||||
<div class="metric-value positive">$${m.avgWin.toFixed(2)}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Avg Loss</div>
|
||||
<div class="metric-value negative">$${Math.abs(m.avgLoss).toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<h2 style="margin-bottom: 20px;">Equity Curve</h2>
|
||||
<canvas id="equityChart"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="rules-section">
|
||||
<h2 style="margin-bottom: 20px;">Strategy Rules</h2>
|
||||
<p style="margin-bottom: 15px; color: #a0aec0;">BUY when ALL of the following conditions are true:</p>
|
||||
${this.generateRulesHTML()}
|
||||
<div style="margin-top: 20px; padding: 15px; background: #0a0e27; border-radius: 6px;">
|
||||
<strong>Parameters:</strong><br>
|
||||
ATR Period: ${this.strategy.atrPeriod} |
|
||||
SL Multiplier: ${this.strategy.slMultiplier.toFixed(2)} |
|
||||
TP Multiplier: ${this.strategy.tpMultiplier.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this.generateTradesTable()}
|
||||
|
||||
<div class="footer">
|
||||
<p>© 2025 FxMathQuant. All rights reserved.</p>
|
||||
<p>This report was generated automatically by AI-powered genetic algorithms.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Equity Curve Chart
|
||||
const ctx = document.getElementById('equityChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ${JSON.stringify(m.equity.map((_, i) => i))},
|
||||
datasets: [{
|
||||
label: 'Account Balance',
|
||||
data: ${JSON.stringify(m.equity)},
|
||||
borderColor: '#667eea',
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: '#1a1f3a',
|
||||
titleColor: '#fff',
|
||||
bodyColor: '#a0aec0',
|
||||
borderColor: '#2d3748',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
grid: { color: '#2d3748' },
|
||||
ticks: { color: '#a0aec0' }
|
||||
},
|
||||
x: {
|
||||
grid: { color: '#2d3748' },
|
||||
ticks: { color: '#a0aec0' }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
generateRulesHTML() {
|
||||
return this.strategy.rules.map((rule, index) => {
|
||||
let ruleText = '';
|
||||
if (rule.type === 'simple') {
|
||||
ruleText = `${rule.left.price.toUpperCase()}[${rule.left.shift}] ${rule.operator} ${rule.right.price.toUpperCase()}[${rule.right.shift}]`;
|
||||
} else {
|
||||
ruleText = `(${rule.left.price1.toUpperCase()}[${rule.left.shift1}] ${rule.left.op} ${rule.left.price2.toUpperCase()}[${rule.left.shift2}]) ${rule.operator} (${rule.right.price.toUpperCase()}[${rule.right.shift}] × ${rule.right.multiplier})`;
|
||||
}
|
||||
return `<div class="rule">${index + 1}. ${ruleText}</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
generateTradesTable() {
|
||||
const trades = this.strategy.metrics.trades || [];
|
||||
if (trades.length === 0) return '';
|
||||
|
||||
// Show first 50 trades
|
||||
const displayTrades = trades.slice(0, 50);
|
||||
|
||||
return `
|
||||
<div style="background: #1a1f3a; padding: 30px; border-radius: 12px; border: 1px solid #2d3748;">
|
||||
<h2 style="margin-bottom: 20px;">Trade History ${trades.length > 50 ? '(First 50 trades)' : ''}</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Type</th>
|
||||
<th>Entry</th>
|
||||
<th>Exit</th>
|
||||
<th>Profit</th>
|
||||
<th>Reason</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${displayTrades.map((trade, i) => `
|
||||
<tr>
|
||||
<td>${i + 1}</td>
|
||||
<td>${trade.type}</td>
|
||||
<td>${trade.entry.toFixed(5)}</td>
|
||||
<td>${trade.exit.toFixed(5)}</td>
|
||||
<td class="${trade.profit >= 0 ? 'positive' : 'negative'}">
|
||||
$${trade.profit.toFixed(2)}
|
||||
</td>
|
||||
<td>${trade.reason.replace('_', ' ')}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user