sqa_demo-sinatra 0.1.0 → 0.2.2

data/lib/sqa_demo/sinatra/public/css/style.css

@@ -31,19 +31,24 @@ body {
   line-height: 1.6;
 }
 
-/* Navigation */
-.navbar {
-  background: linear-gradient(135deg, var(--dark-bg) 0%, #16213e 100%);
-  color: white;
-  padding: 1rem 0;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+/* Sticky Header Container */
+.site-header {
   position: sticky;
   top: 0;
   z-index: 1000;
+  background: var(--dark-bg);
+}
+
+/* Primary Navigation */
+.navbar {
+  background: linear-gradient(135deg, var(--dark-bg) 0%, #16213e 100%);
+  color: white;
+  padding: 0.75rem 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }
 
 .nav-container {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
   padding: 0 2rem;
   display: flex;
@@ -52,11 +57,17 @@ body {
 }
 
 .nav-brand {
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  text-decoration: none;
+  color: white;
+}
+
+.nav-brand:hover {
+  color: white;
 }
 
 .nav-brand i {
@@ -66,21 +77,195 @@ body {
 .nav-menu {
   display: flex;
   list-style: none;
-  gap: 2rem;
+  gap: 0.5rem;
+  align-items: center;
 }
 
 .nav-link {
-  color: white;
+  color: var(--text-secondary);
   text-decoration: none;
   font-weight: 500;
-  transition: color 0.3s ease;
+  transition: all 0.2s ease;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
 }
 
 .nav-link:hover {
   color: var(--primary-color);
+  background: rgba(0, 212, 255, 0.1);
+}
+
+.nav-link i.fa-caret-down {
+  font-size: 0.75rem;
+  margin-left: 0.25rem;
+}
+
+/* Navigation Dropdowns */
+.nav-dropdown {
+  position: relative;
+}
+
+.nav-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  min-width: 180px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  padding: 0.5rem 0;
+  margin-top: 0.25rem;
+  z-index: 1001;
+}
+
+.nav-dropdown:hover .nav-dropdown-menu {
+  display: block;
+}
+
+.nav-dropdown-menu a {
+  display: block;
+  padding: 0.6rem 1rem;
+  color: var(--text-primary);
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: background 0.2s ease;
+}
+
+.nav-dropdown-menu a:hover {
+  background: var(--card-bg-lighter);
+  color: var(--primary-color);
+}
+
+.nav-dropdown-divider {
+  height: 1px;
+  background: var(--border-color);
+  margin: 0.5rem 0;
+}
+
+.nav-dropdown-label {
+  display: block;
+  padding: 0.4rem 1rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+/* Search Button in Nav */
+.nav-search-btn {
+  background: var(--card-bg-lighter);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.nav-search-btn:hover {
+  background: var(--card-bg);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+/* Context Bar - Stock-specific navigation */
+.context-bar {
+  background: var(--card-bg);
+  border-top: 2px solid var(--primary-color);
+  padding: 0.5rem 0;
+}
+
+.context-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.context-stock {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.context-ticker {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--success-color);
+}
+
+.context-name {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.context-nav {
+  display: flex;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.context-link {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.context-link:hover {
+  color: var(--text-primary);
+  background: var(--card-bg-lighter);
+  border-color: var(--border-color);
+}
+
+.context-link.active {
+  background: var(--primary-color);
+  color: var(--dark-bg);
+  font-weight: 600;
+}
+
+.context-link i {
+  font-size: 0.8rem;
+}
+
+/* Period Selector in Context Bar */
+.context-period {
+  margin-left: auto;
+}
+
+.context-period select {
+  background: var(--card-bg-lighter);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  padding: 0.4rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  outline: none;
+}
+
+.context-period select:hover,
+.context-period select:focus {
+  border-color: var(--primary-color);
 }
 
 /* Main Content */
@@ -906,6 +1091,22 @@ body {
   color: var(--text-primary);
 }
 
+.modal-hint {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  margin-top: 0.5rem;
+  text-align: center;
+}
+
+/* Ticker Search Hint */
+.ticker-hint {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin-top: 1rem;
+  text-align: center;
+  opacity: 0.8;
+}
+
 /* Footer */
 .footer {
   background: var(--dark-bg);
@@ -932,6 +1133,26 @@ body {
 }
 
 /* Responsive */
+@media (max-width: 1024px) {
+  .nav-menu {
+    gap: 0.25rem;
+  }
+
+  .nav-link {
+    padding: 0.4rem 0.6rem;
+    font-size: 0.85rem;
+  }
+
+  .context-container {
+    gap: 1rem;
+  }
+
+  .context-link {
+    padding: 0.35rem 0.6rem;
+    font-size: 0.8rem;
+  }
+}
+
 @media (max-width: 768px) {
   .hero-content h1 {
     font-size: 2rem;
@@ -955,8 +1176,64 @@ body {
     grid-template-columns: 1fr;
   }
 
+  /* Mobile Navigation */
+  .nav-container {
+    padding: 0 1rem;
+  }
+
+  .nav-brand span {
+    display: none;
+  }
+
   .nav-menu {
-    gap: 1rem;
-    font-size: 0.875rem;
+    gap: 0.25rem;
+  }
+
+  .nav-link {
+    padding: 0.4rem 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .nav-link i:first-child {
+    margin-right: 0;
+  }
+
+  .nav-link span,
+  .nav-link i.fa-caret-down {
+    display: none;
+  }
+
+  /* Context Bar Mobile */
+  .context-container {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0 1rem;
+  }
+
+  .context-stock {
+    width: 100%;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .context-nav {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+
+  .context-link {
+    padding: 0.3rem 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .context-period {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 0.5rem;
+  }
+
+  .context-period select {
+    width: 100%;
   }
 }

data/lib/sqa_demo/sinatra/public/js/app.js

@@ -1,6 +1,10 @@
 // Global functions for modal and navigation
 
-function showTickerModal() {
+// Track the target route for navigation
+let navTargetRoute = 'dashboard';
+
+function showTickerModal(targetRoute = 'dashboard') {
+  navTargetRoute = targetRoute;
   document.getElementById('tickerModal').style.display = 'block';
   document.getElementById('tickerInput').focus();
 }
@@ -9,28 +13,71 @@ function closeTickerModal() {
   document.getElementById('tickerModal').style.display = 'none';
 }
 
+function navigateToStock(route) {
+  showTickerModal(route);
+}
+
+function showCompareModal() {
+  navTargetRoute = 'compare';
+  document.getElementById('tickerModal').style.display = 'block';
+  const input = document.getElementById('tickerInput');
+  input.placeholder = 'Enter 2-5 tickers separated by spaces (e.g., AAPL MSFT GOOGL)';
+  input.focus();
+}
+
 function searchTicker(event) {
   event.preventDefault();
 
   const input = event.target.querySelector('input[type="text"]');
-  const ticker = input.value.trim().toUpperCase();
+  const inputValue = input.value.trim().toUpperCase();
 
-  if (!ticker) {
+  if (!inputValue) {
     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)');
+  // Split by whitespace to check for multiple tickers
+  const tickers = inputValue.split(/\s+/).filter(t => t.length > 0);
+
+  // Validate each ticker format (letters and optional dot)
+  const tickerPattern = /^[A-Z]{1,5}(\.[A-Z]{1,2})?$/;
+  const invalidTickers = tickers.filter(t => !tickerPattern.test(t));
+
+  if (invalidTickers.length > 0) {
+    alert(`Invalid ticker symbol(s): ${invalidTickers.join(', ')}\nPlease use valid symbols (e.g., AAPL, BRK.A)`);
+    return false;
+  }
+
+  // Check maximum of 5 tickers for comparison
+  if (tickers.length > 5) {
+    alert('Maximum of 5 tickers allowed for comparison. Please reduce your selection.');
+    return false;
+  }
+
+  // If multiple tickers, go to comparison page
+  if (tickers.length > 1) {
+    window.location.href = `/compare?tickers=${tickers.join('+')}`;
     return false;
   }
 
-  // Navigate to dashboard
-  window.location.href = `/dashboard/${ticker}`;
+  // Single ticker - navigate to the target route (dashboard, analyze, or backtest)
+  window.location.href = `/${navTargetRoute}/${tickers[0]}`;
   return false;
 }
 
+// Change period from header selector
+function changePeriod(period) {
+  // Get current URL path
+  const path = window.location.pathname;
+
+  // Construct new URL with period parameter
+  const url = new URL(window.location.href);
+  url.searchParams.set('period', period);
+
+  // Reload page with new period
+  window.location.href = url.toString();
+}
+
 // Close modal when clicking outside
 window.onclick = function(event) {
   const modal = document.getElementById('tickerModal');

data/lib/sqa_demo/sinatra/routes/api.rb

@@ -0,0 +1,235 @@
+# frozen_string_literal: true
+
+require 'date'
+
+module SqaDemo
+  module Sinatra
+    module Routes
+      module Api
+        def self.registered(app)
+          # Get stock data
+          app.get '/api/stock/:ticker' do
+            content_type :json
+
+            ticker = params[:ticker].upcase
+            period = params[:period] || 'all'
+
+            begin
+              stock = SQA::Stock.new(ticker: ticker)
+              ohlcv = extract_ohlcv(stock)
+
+              # Filter by period
+              filtered_dates, filtered_opens, filtered_highs, filtered_lows, filtered_closes, filtered_volumes =
+                filter_by_period(ohlcv[:dates], ohlcv[:opens], ohlcv[:highs], ohlcv[:lows], ohlcv[:closes], ohlcv[:volumes], period: period)
+
+              # Calculate basic stats
+              current_price = filtered_closes.last
+              prev_price = filtered_closes[-2]
+              change = current_price - prev_price
+              change_pct = (change / prev_price) * 100
+
+              # 52-week high/low uses full data for reference
+              high_52w = ohlcv[:closes].last(252).max rescue ohlcv[:closes].max
+              low_52w = ohlcv[:closes].last(252).min rescue ohlcv[:closes].min
+
+              {
+                ticker: ticker,
+                period: period,
+                current_price: current_price,
+                change: change,
+                change_percent: change_pct,
+                high_52w: high_52w,
+                low_52w: low_52w,
+                dates: filtered_dates,
+                open: filtered_opens,
+                high: filtered_highs,
+                low: filtered_lows,
+                close: filtered_closes,
+                volume: filtered_volumes
+              }.to_json
+            rescue => e
+              status 500
+              { error: e.message }.to_json
+            end
+          end
+
+          # Get technical indicators
+          app.get '/api/indicators/:ticker' do
+            content_type :json
+
+            ticker = params[:ticker].upcase
+            period = params[:period] || 'all'
+
+            begin
+              stock = SQA::Stock.new(ticker: ticker)
+              ohlcv = extract_ohlcv(stock)
+
+              prices = ohlcv[:closes]
+              opens = ohlcv[:opens]
+              highs = ohlcv[:highs]
+              lows = ohlcv[:lows]
+              volumes = ohlcv[:volumes]
+              dates = ohlcv[:dates]
+              n = prices.length
+
+              # Calculate indicators on full dataset (they need historical context)
+              indicators = calculate_all_indicators(opens, highs, lows, prices, volumes, n)
+
+              # Detect candlestick patterns
+              detected_patterns = detect_candlestick_patterns(opens, highs, lows, prices, dates, n)
+
+              # Filter results by period
+              filtered_data = filter_indicators_by_period(dates, indicators, period)
+
+              filtered_data.merge(
+                period: period,
+                patterns: detected_patterns
+              ).to_json
+            rescue => e
+              status 500
+              { error: e.message }.to_json
+            end
+          end
+
+          # Run backtest
+          app.post '/api/backtest/:ticker' do
+            content_type :json
+
+            ticker = params[:ticker].upcase
+            strategy_name = params[:strategy] || 'RSI'
+
+            begin
+              stock = SQA::Stock.new(ticker: ticker)
+
+              # Resolve strategy
+              strategy = resolve_strategy(strategy_name)
+
+              # Run backtest
+              backtest = SQA::Backtest.new(
+                stock: stock,
+                strategy: strategy,
+                initial_capital: 10_000.0,
+                commission: 1.0
+              )
+
+              results = backtest.run
+
+              {
+                total_return: results.total_return,
+                annualized_return: results.annualized_return,
+                sharpe_ratio: results.sharpe_ratio,
+                max_drawdown: results.max_drawdown,
+                win_rate: results.win_rate,
+                total_trades: results.total_trades,
+                profit_factor: results.profit_factor,
+                avg_win: results.avg_win,
+                avg_loss: results.avg_loss
+              }.to_json
+            rescue => e
+              status 500
+              { error: e.message }.to_json
+            end
+          end
+
+          # Run market analysis
+          app.get '/api/analyze/:ticker' do
+            content_type :json
+
+            ticker = params[:ticker].upcase
+
+            begin
+              stock = SQA::Stock.new(ticker: ticker)
+              prices = stock.df["adj_close_price"].to_a
+
+              # Market regime
+              regime = SQA::MarketRegime.detect(stock)
+
+              # Seasonal analysis
+              seasonal = SQA::SeasonalAnalyzer.analyze(stock)
+
+              # FPOP analysis
+              fpop_results = analyze_fpop(stock, prices)
+
+              # Risk metrics
+              returns = prices.each_cons(2).map { |a, b| (b - a) / a }
+              var_95 = SQA::RiskManager.var(returns, confidence: 0.95)
+              sharpe = SQA::RiskManager.sharpe_ratio(returns)
+              max_dd = SQA::RiskManager.max_drawdown(prices)
+
+              {
+                regime: {
+                  type: regime[:type],
+                  volatility: regime[:volatility],
+                  strength: regime[:strength_score],
+                  trend: regime[:trend_score]
+                },
+                seasonal: {
+                  best_months: seasonal[:best_months],
+                  worst_months: seasonal[:worst_months],
+                  best_quarters: seasonal[:best_quarters],
+                  has_pattern: seasonal[:has_seasonal_pattern]
+                },
+                fpop: fpop_results,
+                risk: {
+                  var_95: var_95,
+                  sharpe_ratio: sharpe,
+                  max_drawdown: max_dd[:max_drawdown]
+                }
+              }.to_json
+            rescue => e
+              status 500
+              { error: e.message }.to_json
+            end
+          end
+
+          # Compare strategies
+          app.post '/api/compare/:ticker' do
+            content_type :json
+
+            ticker = params[:ticker].upcase
+
+            begin
+              stock = SQA::Stock.new(ticker: ticker)
+
+              strategies = {
+                'RSI' => SQA::Strategy::RSI,
+                'SMA' => SQA::Strategy::SMA,
+                'EMA' => SQA::Strategy::EMA,
+                'MACD' => SQA::Strategy::MACD,
+                'BollingerBands' => SQA::Strategy::BollingerBands
+              }
+
+              results = strategies.map do |name, strategy_class|
+                backtest = SQA::Backtest.new(
+                  stock: stock,
+                  strategy: strategy_class,
+                  initial_capital: 10_000.0,
+                  commission: 1.0
+                )
+
+                result = backtest.run
+
+                {
+                  strategy: name,
+                  return: result.total_return,
+                  sharpe: result.sharpe_ratio,
+                  drawdown: result.max_drawdown,
+                  win_rate: result.win_rate,
+                  trades: result.total_trades
+                }
+              rescue => e
+                nil
+              end.compact
+
+              results.sort_by! { |r| -r[:return] }
+              results.to_json
+            rescue => e
+              status 500
+              { error: e.message }.to_json
+            end
+          end
+        end
+      end
+    end
+  end
+end