sqa 0.0.24 → 0.0.31

data/examples/sinatra_app/public/js/app.js

@@ -0,0 +1,107 @@
+// Global functions for modal and navigation
+
+function showTickerModal() {
+  document.getElementById('tickerModal').style.display = 'block';
+  document.getElementById('tickerInput').focus();
+}
+
+function closeTickerModal() {
+  document.getElementById('tickerModal').style.display = 'none';
+}
+
+function searchTicker(event) {
+  event.preventDefault();
+
+  const input = event.target.querySelector('input[type="text"]');
+  const ticker = input.value.trim().toUpperCase();
+
+  if (!ticker) {
+    alert('Please enter a stock ticker symbol');
+    return false;
+  }
+
+  // Validate ticker format (letters and optional dot)
+  if (!/^[A-Z]{1,5}(\.[A-Z]{1,2})?$/.test(ticker)) {
+    alert('Please enter a valid ticker symbol (e.g., AAPL, BRK.A)');
+    return false;
+  }
+
+  // Navigate to dashboard
+  window.location.href = `/dashboard/${ticker}`;
+  return false;
+}
+
+// Close modal when clicking outside
+window.onclick = function(event) {
+  const modal = document.getElementById('tickerModal');
+  if (event.target === modal) {
+    closeTickerModal();
+  }
+}
+
+// Keyboard shortcuts
+document.addEventListener('keydown', function(event) {
+  // Ctrl/Cmd + K to open search
+  if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+    event.preventDefault();
+    showTickerModal();
+  }
+
+  // Escape to close modal
+  if (event.key === 'Escape') {
+    closeTickerModal();
+  }
+});
+
+// Utility functions
+function formatCurrency(value) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(value);
+}
+
+function formatPercent(value) {
+  return `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`;
+}
+
+function formatNumber(value) {
+  return new Intl.NumberFormat('en-US').format(value);
+}
+
+// Show loading indicator
+function showLoading(elementId) {
+  const element = document.getElementById(elementId);
+  if (element) {
+    element.innerHTML = '<p class="loading"><i class="fas fa-spinner fa-spin"></i> Loading...</p>';
+  }
+}
+
+// Show error message
+function showError(elementId, message) {
+  const element = document.getElementById(elementId);
+  if (element) {
+    element.innerHTML = `<p class="error"><i class="fas fa-exclamation-circle"></i> ${message}</p>`;
+  }
+}
+
+// Debounce function for performance
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+// Console welcome message
+console.log('%cSQA Analytics', 'font-size: 24px; font-weight: bold; color: #2196F3;');
+console.log('%cPowered by Ruby & Plotly.js', 'font-size: 14px; color: #666;');
+console.log('');
+console.log('Keyboard shortcuts:');
+console.log('  Ctrl/Cmd + K: Open ticker search');
+console.log('  Escape: Close modal');

data/examples/sinatra_app/views/analyze.erb

@@ -0,0 +1,306 @@
+<div class="dashboard">
+  <div class="dashboard-header">
+    <div class="ticker-info">
+      <h1><%= @ticker %> - Market Analysis</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='/backtest/<%= @ticker %>'" class="btn btn-secondary">
+        <i class="fas fa-history"></i> Backtest
+      </button>
+    </div>
+  </div>
+
+  <!-- Market Regime Analysis -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-chart-area"></i> Market Regime Analysis</h2>
+    </div>
+    <div id="regimeAnalysis" class="analysis-content">
+      <p class="loading"><i class="fas fa-spinner fa-spin"></i> Loading market regime data...</p>
+    </div>
+  </div>
+
+  <!-- Seasonal Pattern Analysis -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-calendar-alt"></i> Seasonal Pattern Analysis</h2>
+    </div>
+    <div id="seasonalAnalysis" class="analysis-content">
+      <p class="loading"><i class="fas fa-spinner fa-spin"></i> Loading seasonal data...</p>
+    </div>
+  </div>
+
+  <!-- FPOP Analysis -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-crystal-ball"></i> Future Period Analysis (FPOP)</h2>
+      <p class="chart-subtitle">Potential future price movements based on historical patterns</p>
+    </div>
+    <div id="fpopAnalysis" class="analysis-content">
+      <p class="loading"><i class="fas fa-spinner fa-spin"></i> Loading FPOP analysis...</p>
+    </div>
+  </div>
+
+  <!-- Risk Metrics -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-shield-alt"></i> Risk Metrics</h2>
+    </div>
+    <div id="riskMetrics" class="analysis-content">
+      <p class="loading"><i class="fas fa-spinner fa-spin"></i> Loading risk metrics...</p>
+    </div>
+  </div>
+</div>
+
+<style>
+.analysis-content {
+  padding: 1rem 0;
+}
+
+.analysis-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.analysis-card {
+  background: var(--light-bg);
+  padding: 1.5rem;
+  border-radius: 8px;
+  border-left: 4px solid var(--primary-color);
+}
+
+.analysis-card h3 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.analysis-stat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.analysis-stat:last-child {
+  border-bottom: none;
+}
+
+.stat-label {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.stat-value {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.fpop-table {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.fpop-table th,
+.fpop-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.fpop-table thead {
+  background: var(--light-bg);
+}
+
+.chart-subtitle {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: normal;
+}
+</style>
+
+<script>
+const ticker = '<%= @ticker %>';
+
+document.addEventListener('DOMContentLoaded', async function() {
+  await loadAnalysisData();
+});
+
+async function loadAnalysisData() {
+  try {
+    const response = await fetch(`/api/analyze/${ticker}`);
+    const data = await response.json();
+
+    renderRegimeAnalysis(data.regime);
+    renderSeasonalAnalysis(data.seasonal);
+    renderFPOPAnalysis(data.fpop);
+    renderRiskMetrics(data.risk);
+  } catch (error) {
+    console.error('Error loading analysis data:', error);
+    document.querySelectorAll('.analysis-content').forEach(el => {
+      el.innerHTML = '<p class="error">Failed to load analysis data. Please try again.</p>';
+    });
+  }
+}
+
+function renderRegimeAnalysis(regime) {
+  const regimeType = regime.type.toUpperCase();
+  const regimeClass = regimeType === 'BULL' ? 'signal-buy' :
+                      regimeType === 'BEAR' ? 'signal-sell' : 'signal-neutral';
+
+  const html = `
+    <div class="analysis-grid">
+      <div class="analysis-card">
+        <h3>Current Market Regime</h3>
+        <div class="analysis-stat">
+          <span class="stat-label">Type</span>
+          <span class="stat-value ${regimeClass}">${regimeType}</span>
+        </div>
+        <div class="analysis-stat">
+          <span class="stat-label">Volatility</span>
+          <span class="stat-value">${regime.volatility.toUpperCase()}</span>
+        </div>
+        <div class="analysis-stat">
+          <span class="stat-label">Strength</span>
+          <span class="stat-value">${regime.strength.toFixed(2)}</span>
+        </div>
+        <div class="analysis-stat">
+          <span class="stat-label">Trend</span>
+          <span class="stat-value">${regime.trend.toFixed(2)}%</span>
+        </div>
+      </div>
+      <div class="analysis-card">
+        <h3>Interpretation</h3>
+        <p style="line-height: 1.8; color: var(--text-secondary);">
+          The stock is currently in a <strong class="${regimeClass}">${regimeType}</strong> market regime
+          with <strong>${regime.volatility}</strong> volatility. The regime strength of
+          <strong>${regime.strength.toFixed(2)}</strong> indicates how pronounced this regime is.
+          ${regime.type === 'bull' ? 'This is generally favorable for long positions.' :
+            regime.type === 'bear' ? 'Consider defensive strategies or short positions.' :
+            'The market is consolidating. Wait for clearer signals.'}
+        </p>
+      </div>
+    </div>
+  `;
+
+  document.getElementById('regimeAnalysis').innerHTML = html;
+}
+
+function renderSeasonalAnalysis(seasonal) {
+  const monthNames = ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const bestMonths = seasonal.best_months.map(m => monthNames[m]).join(', ');
+  const worstMonths = seasonal.worst_months.map(m => monthNames[m]).join(', ');
+
+  const html = `
+    <div class="analysis-grid">
+      <div class="analysis-card">
+        <h3>Monthly Patterns</h3>
+        <div class="analysis-stat">
+          <span class="stat-label">Best Months</span>
+          <span class="stat-value signal-buy">${bestMonths}</span>
+        </div>
+        <div class="analysis-stat">
+          <span class="stat-label">Worst Months</span>
+          <span class="stat-value signal-sell">${worstMonths}</span>
+        </div>
+      </div>
+      <div class="analysis-card">
+        <h3>Quarterly Patterns</h3>
+        <div class="analysis-stat">
+          <span class="stat-label">Best Quarters</span>
+          <span class="stat-value signal-buy">Q${seasonal.best_quarters.join(', Q')}</span>
+        </div>
+        <div class="analysis-stat">
+          <span class="stat-label">Has Seasonal Pattern</span>
+          <span class="stat-value">${seasonal.has_pattern ? 'Yes' : 'No'}</span>
+        </div>
+      </div>
+    </div>
+    <p style="margin-top: 1.5rem; color: var(--text-secondary); font-style: italic;">
+      ${seasonal.has_pattern ?
+        'This stock shows significant seasonal patterns. Consider timing trades around favorable periods.' :
+        'No strong seasonal patterns detected. Seasonal effects may not be a major factor for this stock.'}
+    </p>
+  `;
+
+  document.getElementById('seasonalAnalysis').innerHTML = html;
+}
+
+function renderFPOPAnalysis(fpop) {
+  if (!fpop || fpop.length === 0) {
+    document.getElementById('fpopAnalysis').innerHTML =
+      '<p class="hint">No FPOP data available.</p>';
+    return;
+  }
+
+  let tableHTML = `
+    <table class="fpop-table">
+      <thead>
+        <tr>
+          <th>Direction</th>
+          <th>Magnitude</th>
+          <th>Risk</th>
+          <th>Interpretation</th>
+        </tr>
+      </thead>
+      <tbody>
+  `;
+
+  fpop.forEach(f => {
+    const dirClass = f.direction === 'UP' ? 'signal-buy' :
+                     f.direction === 'DOWN' ? 'signal-sell' : 'signal-neutral';
+
+    tableHTML += `
+      <tr>
+        <td><span class="${dirClass}">${f.direction}</span></td>
+        <td>${f.magnitude.toFixed(2)}%</td>
+        <td>${f.risk.toFixed(2)}%</td>
+        <td>${f.interpretation}</td>
+      </tr>
+    `;
+  });
+
+  tableHTML += '</tbody></table>';
+
+  document.getElementById('fpopAnalysis').innerHTML = tableHTML;
+}
+
+function renderRiskMetrics(risk) {
+  const html = `
+    <div class="analysis-grid">
+      <div class="analysis-card">
+        <h3>Value at Risk (VaR)</h3>
+        <div class="analysis-stat">
+          <span class="stat-label">95% Confidence</span>
+          <span class="stat-value signal-sell">${(risk.var_95 * 100).toFixed(2)}%</span>
+        </div>
+        <p style="margin-top: 1rem; color: var(--text-secondary); font-size: 0.875rem;">
+          There's a 95% chance your loss will not exceed this amount on any given day.
+        </p>
+      </div>
+      <div class="analysis-card">
+        <h3>Performance Metrics</h3>
+        <div class="analysis-stat">
+          <span class="stat-label">Sharpe Ratio</span>
+          <span class="stat-value">${risk.sharpe_ratio.toFixed(2)}</span>
+        </div>
+        <div class="analysis-stat">
+          <span class="stat-label">Max Drawdown</span>
+          <span class="stat-value signal-sell">${(risk.max_drawdown * 100).toFixed(2)}%</span>
+        </div>
+        <p style="margin-top: 1rem; color: var(--text-secondary); font-size: 0.875rem;">
+          Sharpe ratio > 1 is good, > 2 is excellent. Lower drawdown indicates less risk.
+        </p>
+      </div>
+    </div>
+  `;
+
+  document.getElementById('riskMetrics').innerHTML = html;
+}
+</script>