sqa 0.0.24 → 0.0.31

data/examples/sinatra_app/views/backtest.erb

@@ -0,0 +1,325 @@
+<div class="dashboard">
+  <div class="dashboard-header">
+    <div class="ticker-info">
+      <h1><%= @ticker %> - Strategy Backtesting</h1>
+    </div>
+    <div class="header-actions">
+      <button onclick="location.href='/dashboard/<%= @ticker %>'" class="btn btn-secondary">
+        <i class="fas fa-chart-line"></i> Dashboard
+      </button>
+      <button onclick="location.href='/analyze/<%= @ticker %>'" class="btn btn-secondary">
+        <i class="fas fa-analytics"></i> Analysis
+      </button>
+    </div>
+  </div>
+
+  <!-- Strategy Selection -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-cogs"></i> Select Strategy</h2>
+    </div>
+    <div class="strategy-selector">
+      <div class="strategy-grid">
+        <div class="strategy-option" onclick="selectStrategy('RSI')">
+          <div class="strategy-icon"><i class="fas fa-wave-square"></i></div>
+          <h3>RSI</h3>
+          <p>Relative Strength Index</p>
+        </div>
+        <div class="strategy-option" onclick="selectStrategy('MACD')">
+          <div class="strategy-icon"><i class="fas fa-signal"></i></div>
+          <h3>MACD</h3>
+          <p>Moving Average Convergence Divergence</p>
+        </div>
+        <div class="strategy-option" onclick="selectStrategy('SMA')">
+          <div class="strategy-icon"><i class="fas fa-chart-line"></i></div>
+          <h3>SMA</h3>
+          <p>Simple Moving Average</p>
+        </div>
+        <div class="strategy-option" onclick="selectStrategy('EMA')">
+          <div class="strategy-icon"><i class="fas fa-chart-area"></i></div>
+          <h3>EMA</h3>
+          <p>Exponential Moving Average</p>
+        </div>
+        <div class="strategy-option" onclick="selectStrategy('BollingerBands')">
+          <div class="strategy-icon"><i class="fas fa-chart-candlestick"></i></div>
+          <h3>Bollinger Bands</h3>
+          <p>Volatility-based bands</p>
+        </div>
+        <div class="strategy-option" onclick="selectStrategy('KBS')">
+          <div class="strategy-icon"><i class="fas fa-brain"></i></div>
+          <h3>KBS</h3>
+          <p>Knowledge-Based Strategy</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Backtest Results -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-chart-bar"></i> Backtest Results</h2>
+    </div>
+    <div id="backtestResults" class="backtest-results">
+      <p class="hint">Select a strategy above to run backtest</p>
+    </div>
+  </div>
+
+  <!-- Strategy Comparison -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-trophy"></i> Compare All Strategies</h2>
+      <button onclick="compareStrategies()" class="btn btn-primary">
+        <i class="fas fa-play"></i> Run Comparison
+      </button>
+    </div>
+    <div id="comparisonResults" class="comparison-results">
+      <p class="hint">Click "Run Comparison" to backtest all strategies</p>
+    </div>
+  </div>
+</div>
+
+<style>
+.strategy-selector {
+  padding: 1rem 0;
+}
+
+.strategy-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1.5rem;
+}
+
+.strategy-option {
+  background: var(--light-bg);
+  padding: 2rem 1.5rem;
+  border-radius: 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.strategy-option:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary-color);
+}
+
+.strategy-icon {
+  font-size: 3rem;
+  color: var(--primary-color);
+  margin-bottom: 1rem;
+}
+
+.strategy-option h3 {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+}
+
+.strategy-option p {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.backtest-results,
+.comparison-results {
+  padding: 1rem 0;
+}
+
+.results-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.result-metric {
+  background: var(--light-bg);
+  padding: 1.5rem;
+  border-radius: 8px;
+  border-left: 4px solid var(--primary-color);
+}
+
+.result-metric-label {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 0.5rem;
+}
+
+.result-metric-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.result-metric-value.positive {
+  color: var(--positive-color);
+}
+
+.result-metric-value.negative {
+  color: var(--negative-color);
+}
+</style>
+
+<script>
+const ticker = '<%= @ticker %>';
+let selectedStrategy = null;
+
+async function selectStrategy(strategy) {
+  selectedStrategy = strategy;
+
+  // Visual feedback
+  document.querySelectorAll('.strategy-option').forEach(el => {
+    el.style.borderColor = '';
+  });
+  event.currentTarget.style.borderColor = 'var(--primary-color)';
+
+  // Run backtest
+  await runBacktest(strategy);
+}
+
+async function runBacktest(strategy) {
+  const resultsDiv = document.getElementById('backtestResults');
+  resultsDiv.innerHTML = '<p class="loading"><i class="fas fa-spinner fa-spin"></i> Running backtest...</p>';
+
+  try {
+    const formData = new FormData();
+    formData.append('strategy', strategy);
+
+    const response = await fetch(`/api/backtest/${ticker}`, {
+      method: 'POST',
+      body: formData
+    });
+
+    const results = await response.json();
+
+    const html = `
+      <h3 style="margin-bottom: 1.5rem; color: var(--text-primary);">
+        ${strategy} Strategy Results
+      </h3>
+      <div class="results-metrics">
+        <div class="result-metric">
+          <div class="result-metric-label">Total Return</div>
+          <div class="result-metric-value ${results.total_return >= 0 ? 'positive' : 'negative'}">
+            ${results.total_return.toFixed(2)}%
+          </div>
+        </div>
+        <div class="result-metric">
+          <div class="result-metric-label">Annualized Return</div>
+          <div class="result-metric-value ${results.annualized_return >= 0 ? 'positive' : 'negative'}">
+            ${results.annualized_return.toFixed(2)}%
+          </div>
+        </div>
+        <div class="result-metric">
+          <div class="result-metric-label">Sharpe Ratio</div>
+          <div class="result-metric-value">
+            ${results.sharpe_ratio.toFixed(2)}
+          </div>
+        </div>
+        <div class="result-metric">
+          <div class="result-metric-label">Max Drawdown</div>
+          <div class="result-metric-value negative">
+            ${results.max_drawdown.toFixed(2)}%
+          </div>
+        </div>
+        <div class="result-metric">
+          <div class="result-metric-label">Win Rate</div>
+          <div class="result-metric-value">
+            ${results.win_rate.toFixed(2)}%
+          </div>
+        </div>
+        <div class="result-metric">
+          <div class="result-metric-label">Total Trades</div>
+          <div class="result-metric-value">
+            ${results.total_trades}
+          </div>
+        </div>
+        <div class="result-metric">
+          <div class="result-metric-label">Profit Factor</div>
+          <div class="result-metric-value ${results.profit_factor >= 1 ? 'positive' : 'negative'}">
+            ${results.profit_factor.toFixed(2)}
+          </div>
+        </div>
+        <div class="result-metric">
+          <div class="result-metric-label">Avg Win / Loss</div>
+          <div class="result-metric-value">
+            ${results.avg_win.toFixed(2)}% / ${results.avg_loss.toFixed(2)}%
+          </div>
+        </div>
+      </div>
+      <div style="padding: 1.5rem; background: var(--light-bg); border-radius: 8px; margin-top: 1rem;">
+        <h4 style="margin-bottom: 1rem; color: var(--text-primary);">Strategy Performance Summary</h4>
+        <p style="color: var(--text-secondary); line-height: 1.8;">
+          The ${strategy} strategy generated a total return of
+          <strong class="${results.total_return >= 0 ? 'positive' : 'negative'}">
+            ${results.total_return.toFixed(2)}%
+          </strong> over the backtest period with ${results.total_trades} trades.
+          The win rate of ${results.win_rate.toFixed(2)}% and Sharpe ratio of ${results.sharpe_ratio.toFixed(2)}
+          ${results.sharpe_ratio > 1 ? 'indicates good risk-adjusted returns' : 'suggests room for improvement'}.
+          Maximum drawdown was ${results.max_drawdown.toFixed(2)}%.
+        </p>
+      </div>
+    `;
+
+    resultsDiv.innerHTML = html;
+  } catch (error) {
+    console.error('Error running backtest:', error);
+    resultsDiv.innerHTML = '<p class="error">Failed to run backtest. Please try again.</p>';
+  }
+}
+
+async function compareStrategies() {
+  const resultsDiv = document.getElementById('comparisonResults');
+  resultsDiv.innerHTML = '<p class="loading"><i class="fas fa-spinner fa-spin"></i> Comparing strategies...</p>';
+
+  try {
+    const response = await fetch(`/api/compare/${ticker}`, { method: 'POST' });
+    const results = await response.json();
+
+    let html = '<table class="results-table"><thead><tr>';
+    html += '<th>Rank</th><th>Strategy</th><th>Return</th><th>Sharpe</th><th>Drawdown</th><th>Win Rate</th><th>Trades</th>';
+    html += '</tr></thead><tbody>';
+
+    results.forEach((result, i) => {
+      const returnClass = result.return >= 0 ? 'positive' : 'negative';
+      const medal = i === 0 ? '<i class="fas fa-trophy" style="color: #FFD700;"></i>' :
+                    i === 1 ? '<i class="fas fa-medal" style="color: #C0C0C0;"></i>' :
+                    i === 2 ? '<i class="fas fa-medal" style="color: #CD7F32;"></i>' : '';
+
+      html += `<tr>
+        <td style="text-align: center;">${medal || (i + 1)}</td>
+        <td><strong>${result.strategy}</strong></td>
+        <td class="${returnClass}"><strong>${result.return.toFixed(2)}%</strong></td>
+        <td>${result.sharpe.toFixed(2)}</td>
+        <td>${result.drawdown.toFixed(2)}%</td>
+        <td>${result.win_rate.toFixed(2)}%</td>
+        <td>${result.trades}</td>
+      </tr>`;
+    });
+
+    html += '</tbody></table>';
+
+    html += `
+      <div style="margin-top: 2rem; padding: 1.5rem; background: var(--light-bg); border-radius: 8px;">
+        <h4 style="margin-bottom: 1rem;">
+          <i class="fas fa-trophy" style="color: #FFD700;"></i>
+          Winner: ${results[0].strategy}
+        </h4>
+        <p style="color: var(--text-secondary); line-height: 1.8;">
+          Based on total return, the ${results[0].strategy} strategy performed best with a
+          ${results[0].return.toFixed(2)}% return and ${results[0].trades} trades.
+          Consider the Sharpe ratio and drawdown when evaluating risk-adjusted performance.
+        </p>
+      </div>
+    `;
+
+    resultsDiv.innerHTML = html;
+  } catch (error) {
+    console.error('Error comparing strategies:', error);
+    resultsDiv.innerHTML = '<p class="error">Failed to compare strategies. Please try again.</p>';
+  }
+}
+</script>