sqa 0.0.31 → 0.0.32

data/examples/sinatra_app/RUNNING_WITHOUT_TALIB.md

@@ -0,0 +1,90 @@
+# Running the Sinatra App Without TA-Lib
+
+The SQA Sinatra web app can run with **limited functionality** when the TA-Lib system library is not installed. This is useful for development, testing, or deployments where installing TA-Lib is difficult.
+
+## What Works Without TA-Lib
+
+✅ **Basic Stock Data Display**
+- Loading stock price history from cached CSV files
+- Displaying price charts (candlestick and line)
+- Volume charts
+- Price statistics (current price, 52-week high/low)
+
+✅ **Advanced Analysis Features**
+- Market regime detection (bull/bear/sideways)
+- Seasonal pattern analysis
+- Risk metrics (VaR, Sharpe ratio, max drawdown)
+- FPOP (Future Period Profit/Loss) analysis
+
+✅ **Strategy Comparison**
+- Comparing different trading strategies via backtesting
+
+## What Doesn't Work Without TA-Lib
+
+❌ **Technical Indicators**
+- RSI (Relative Strength Index)
+- MACD (Moving Average Convergence Divergence)
+- Bollinger Bands
+- Moving Averages (SMA, EMA)
+- All other TA-Lib indicators (150+ total)
+
+These endpoints will return errors:
+- `GET /api/indicators/:ticker` - Returns error when indicators are called
+
+## Running the App
+
+### With Cached Data (No API Key Required)
+
+1. Ensure you have cached stock data in `~/sqa_data/`:
+   ```
+   ~/sqa_data/
+   ├── aapl.csv   # Price history
+   ├── aapl.json  # Stock metadata
+   ```
+
+2. Install dependencies:
+   ```bash
+   cd examples/sinatra_app
+   bundle install
+   ```
+
+3. Start the server:
+   ```bash
+   bundle exec ruby app.rb
+   ```
+
+4. Visit http://localhost:4567
+
+### Installing TA-Lib (Optional)
+
+To enable technical indicators, install the TA-Lib system library:
+
+**macOS:**
+```bash
+brew install ta-lib
+```
+
+**Ubuntu/Debian:**
+```bash
+wget http://prdownloads.sourceforge.net/ta-lib/ta-lib-0.4.0-src.tar.gz
+tar -xzf ta-lib-0.4.0-src.tar.gz
+cd ta-lib/
+./configure --prefix=/usr
+make
+sudo make install
+sudo ldconfig
+```
+
+**Note:** After installing TA-Lib, you may need to reinstall the gems:
+```bash
+bundle install
+```
+
+## Error Handling
+
+The app gracefully handles missing indicators by:
+- Starting successfully without TA-Lib
+- Showing helpful error messages when indicator endpoints are accessed
+- Allowing all non-indicator features to work normally
+
+If you see errors about indicators, it's expected behavior when TA-Lib is not available.

data/examples/sinatra_app/TROUBLESHOOTING.md

@@ -0,0 +1,95 @@
+# Troubleshooting the Sinatra App
+
+## Dashboard page loads but buttons/charts don't work
+
+This usually means JavaScript errors are preventing the page from functioning.
+
+### Quick Fix Checklist
+
+1. **Install dependencies first:**
+   ```bash
+   cd examples/sinatra_app
+   bundle install
+   ```
+
+2. **Start the server with bundle exec:**
+   ```bash
+   bundle exec ruby app.rb
+   # OR
+   bundle exec rackup
+   ```
+
+3. **Check browser console for errors:**
+   - Open browser DevTools (F12 or Ctrl+Shift+I)
+   - Go to "Console" tab
+   - Look for red error messages
+   - Take a screenshot and check what's failing
+
+4. **Check Network tab:**
+   - Open DevTools → Network tab
+   - Reload the dashboard page
+   - Look for failed requests (red status codes)
+   - Check if `/api/stock/AAPL`, `/api/indicators/AAPL`, `/api/analyze/AAPL` are returning 200 or errors
+
+### Common Issues
+
+#### Issue: "ApexCharts is not defined"
+**Symptom:** Charts don't render, console shows `Uncaught ReferenceError: ApexCharts is not defined`
+
+**Fix:** The CDN link for ApexCharts is missing or blocked. Check `views/layout.erb`:
+```html
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+```
+
+#### Issue: API calls failing with 500 errors
+**Symptom:** Network tab shows `/api/indicators/AAPL` returns 500
+
+**Fix:** This is expected if TA-Lib isn't installed. The app should handle this gracefully.
+
+#### Issue: Buttons don't respond
+**Symptom:** Clicking buttons does nothing
+
+**Possible causes:**
+1. JavaScript not loaded (check console for errors)
+2. Event handlers not attached (check if page finished loading)
+3. JavaScript errors earlier in the file preventing execution
+
+### Debug Mode
+
+Run the server with verbose logging:
+```bash
+RACK_ENV=development bundle exec ruby app.rb
+```
+
+### Test API Endpoints Manually
+
+While server is running, test in another terminal:
+
+```bash
+# Test stock data
+curl -s "http://localhost:4567/api/stock/AAPL?period=30d" | python3 -m json.tool
+
+# Test indicators (may fail without TA-Lib - that's OK)
+curl -s "http://localhost:4567/api/indicators/AAPL?period=30d"
+
+# Test analysis
+curl -s "http://localhost:4567/api/analyze/AAPL" | python3 -m json.tool
+```
+
+All should return JSON. If you get HTML error pages, there's a server-side issue.
+
+### Check if all gems are installed
+
+```bash
+bundle check
+```
+
+If it says "The Gemfile's dependencies are satisfied", you're good.
+
+### Still not working?
+
+Please provide:
+1. Screenshot of browser console (DevTools → Console tab)
+2. Screenshot of network tab showing failed requests
+3. Output of `bundle check`
+4. Any errors from server console

data/examples/sinatra_app/app.rb

@@ -35,6 +35,47 @@ helpers do
   def format_number(value)
     value.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse
   end
+
+  # Filter data arrays by time period
+  # period can be: "30d", "60d", "90d", "1q", "2q", "3q", "4q", "all"
+  def filter_by_period(dates, *data_arrays, period: 'all')
+    return [dates, *data_arrays] if period == 'all' || dates.empty?
+
+    require 'date'
+
+    # Parse dates (they're strings in YYYY-MM-DD format)
+    parsed_dates = dates.map { |d| Date.parse(d) }
+    latest_date = parsed_dates.max
+
+    # Calculate cutoff date based on period
+    cutoff_date = case period
+                  when '30d'
+                    latest_date - 30
+                  when '60d'
+                    latest_date - 60
+                  when '90d'
+                    latest_date - 90
+                  when '1q'
+                    latest_date - 63  # ~3 months = 1 quarter (63 trading days)
+                  when '2q'
+                    latest_date - 126 # ~6 months = 2 quarters
+                  when '3q'
+                    latest_date - 189 # ~9 months = 3 quarters
+                  when '4q'
+                    latest_date - 252 # ~12 months = 4 quarters
+                  else
+                    parsed_dates.min # "all" - keep everything
+                  end
+
+    # Find indices where date >= cutoff_date
+    indices = parsed_dates.each_with_index.select { |d, i| d >= cutoff_date }.map(&:last)
+
+    # Filter all arrays by the same indices
+    filtered_dates = indices.map { |i| dates[i] }
+    filtered_data = data_arrays.map { |arr| indices.map { |i| arr[i] } }
+
+    [filtered_dates, *filtered_data]
+  end
 end
 
 # Routes
@@ -98,38 +139,48 @@ get '/api/stock/:ticker' do
   content_type :json
 
   ticker = params[:ticker].upcase
+  period = params[:period] || 'all'
 
   begin
     stock = SQA::Stock.new(ticker: ticker)
     df = stock.df
 
-    # Get price data
-    dates = df["date"].to_a.map(&:to_s)
+    # Get price data (all data first)
+    dates = df["timestamp"].to_a.map(&:to_s)
     opens = df["open_price"].to_a
     highs = df["high_price"].to_a
     lows = df["low_price"].to_a
     closes = df["adj_close_price"].to_a
     volumes = df["volume"].to_a
 
+    # Filter by period
+    filtered_dates, filtered_opens, filtered_highs, filtered_lows, filtered_closes, filtered_volumes =
+      filter_by_period(dates, opens, highs, lows, closes, volumes, period: period)
+
     # Calculate basic stats
-    current_price = closes.last
-    prev_price = closes[-2]
+    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 = closes.last(252).max rescue closes.max
+    low_52w = closes.last(252).min rescue closes.min
+
     {
       ticker: ticker,
+      period: period,
       current_price: current_price,
       change: change,
       change_percent: change_pct,
-      high_52w: closes.last(252).max,
-      low_52w: closes.last(252).min,
-      dates: dates,
-      open: opens,
-      high: highs,
-      low: lows,
-      close: closes,
-      volume: volumes
+      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
@@ -142,6 +193,7 @@ get '/api/indicators/:ticker' do
   content_type :json
 
   ticker = params[:ticker].upcase
+  period = params[:period] || 'all'
 
   begin
     stock = SQA::Stock.new(ticker: ticker)
@@ -150,9 +202,9 @@ get '/api/indicators/:ticker' do
     prices = df["adj_close_price"].to_a
     highs = df["high_price"].to_a
     lows = df["low_price"].to_a
-    dates = df["date"].to_a.map(&:to_s)
+    dates = df["timestamp"].to_a.map(&:to_s)
 
-    # Calculate indicators
+    # Calculate indicators on full dataset (they need historical context)
     rsi = SQAI.rsi(prices, period: 14)
     macd_result = SQAI.macd(prices)
     bb_result = SQAI.bbands(prices)
@@ -160,18 +212,26 @@ get '/api/indicators/:ticker' do
     sma_50 = SQAI.sma(prices, period: 50)
     ema_20 = SQAI.ema(prices, period: 20)
 
+    # Filter results by period (keep indicators aligned with dates)
+    filtered_dates, filtered_rsi, filtered_macd, filtered_macd_signal, filtered_macd_hist,
+      filtered_bb_upper, filtered_bb_middle, filtered_bb_lower, filtered_sma_20, filtered_sma_50, filtered_ema_20 =
+      filter_by_period(dates, rsi, macd_result[0], macd_result[1], macd_result[2],
+                       bb_result[0], bb_result[1], bb_result[2],
+                       sma_20, sma_50, ema_20, period: period)
+
     {
-      dates: dates,
-      rsi: rsi,
-      macd: macd_result[0],        # MACD line
-      macd_signal: macd_result[1], # Signal line
-      macd_hist: macd_result[2],   # Histogram
-      bb_upper: bb_result[0],
-      bb_middle: bb_result[1],
-      bb_lower: bb_result[2],
-      sma_20: sma_20,
-      sma_50: sma_50,
-      ema_20: ema_20
+      period: period,
+      dates: filtered_dates,
+      rsi: filtered_rsi,
+      macd: filtered_macd,
+      macd_signal: filtered_macd_signal,
+      macd_hist: filtered_macd_hist,
+      bb_upper: filtered_bb_upper,
+      bb_middle: filtered_bb_middle,
+      bb_lower: filtered_bb_lower,
+      sma_20: filtered_sma_20,
+      sma_50: filtered_sma_50,
+      ema_20: filtered_ema_20
     }.to_json
   rescue => e
     status 500

data/examples/sinatra_app/public/css/style.css

@@ -6,24 +6,26 @@
 }
 
 :root {
-  --primary-color: #2196F3;
-  --secondary-color: #1976D2;
-  --success-color: #4CAF50;
-  --danger-color: #F44336;
-  --warning-color: #FF9800;
-  --dark-bg: #1a1a2e;
-  --light-bg: #f5f7fa;
-  --card-bg: #ffffff;
-  --text-primary: #2c3e50;
-  --text-secondary: #7f8c8d;
-  --border-color: #e0e0e0;
-  --positive-color: #26a69a;
-  --negative-color: #ef5350;
+  --primary-color: #00d4ff;
+  --secondary-color: #00a8cc;
+  --success-color: #00ff88;
+  --danger-color: #ff3366;
+  --warning-color: #ffaa00;
+  --dark-bg: #0a0e27;
+  --card-bg: #151b3d;
+  --card-bg-lighter: #1e2749;
+  --text-primary: #e8eaf6;
+  --text-secondary: #9fa8da;
+  --border-color: #2a3154;
+  --positive-color: #00ff88;
+  --negative-color: #ff3366;
+  --chart-bg: #0f1535;
+  --grid-color: #2a3154;
 }
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  background-color: var(--light-bg);
+  background-color: var(--dark-bg);
   color: var(--text-primary);
   line-height: 1.6;
 }
@@ -88,7 +90,7 @@ body {
 
 /* Hero Section */
 .hero {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1a237e 0%, #4a148c 100%);
   color: white;
   padding: 4rem 2rem;
   text-align: center;
@@ -184,7 +186,7 @@ body {
 }
 
 .btn-secondary {
-  background: white;
+  background: var(--card-bg-lighter);
   color: var(--text-primary);
   border: 2px solid var(--border-color);
 }
@@ -192,6 +194,7 @@ body {
 .btn-secondary:hover {
   border-color: var(--primary-color);
   color: var(--primary-color);
+  background: var(--card-bg);
 }
 
 .btn-large {
@@ -202,15 +205,63 @@ body {
 .btn-small {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
-  background: white;
+  background: var(--card-bg-lighter);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
 }
 
 .btn-small.active {
   background: var(--primary-color);
-  color: white;
+  color: var(--dark-bg);
+  border-color: var(--primary-color);
+  font-weight: 700;
+}
+
+/* Period Selector */
+.period-selector {
+  background: var(--card-bg);
+  padding: 1.5rem;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.period-selector label {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.75rem;
+  display: block;
+}
+
+.period-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.btn-period {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  background: var(--card-bg-lighter);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.btn-period:hover {
+  background: var(--card-bg);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.btn-period.active {
+  background: var(--primary-color);
+  color: var(--dark-bg);
   border-color: var(--primary-color);
+  font-weight: 700;
 }
 
 /* Container */
@@ -223,7 +274,7 @@ body {
 /* Features Section */
 .features {
   padding: 4rem 0;
-  background: white;
+  background: var(--card-bg);
 }
 
 .features h2 {
@@ -241,7 +292,7 @@ body {
 
 .feature-card {
   padding: 2rem;
-  background: var(--card-bg);
+  background: var(--card-bg-lighter);
   border-radius: 12px;
   border: 1px solid var(--border-color);
   transition: all 0.3s ease;
@@ -249,7 +300,8 @@ body {
 
 .feature-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 30px rgba(0, 217, 255, 0.2);
+  border-color: var(--primary-color);
 }
 
 .feature-icon {
@@ -272,7 +324,7 @@ body {
 /* Info Section */
 .info-section {
   padding: 4rem 0;
-  background: var(--light-bg);
+  background: var(--dark-bg);
 }
 
 .info-content h2 {
@@ -311,7 +363,8 @@ body {
 
 /* Dashboard */
 .dashboard {
-  max-width: 1400px;
+  width: 100%;
+  max-width: 100%;
   margin: 0 auto;
   padding: 2rem;
 }
@@ -322,9 +375,10 @@ body {
   align-items: center;
   margin-bottom: 2rem;
   padding: 1.5rem;
-  background: white;
+  background: var(--card-bg);
   border-radius: 12px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border-color);
 }
 
 .ticker-info h1 {
@@ -376,10 +430,12 @@ body {
 }
 
 .metric-card {
-  background: white;
+  background: var(--card-bg);
   padding: 1.5rem;
   border-radius: 12px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  border-left: 4px solid var(--primary-color);
+  border: 1px solid var(--border-color);
   border-left: 4px solid var(--primary-color);
 }
 
@@ -434,11 +490,12 @@ body {
 
 /* Charts */
 .chart-container {
-  background: white;
+  background: var(--card-bg);
   padding: 1.5rem;
   border-radius: 12px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   margin-bottom: 2rem;
+  border: 1px solid var(--border-color);
 }
 
 .chart-header {
@@ -466,16 +523,18 @@ body {
 }
 
 .chart {
-  min-height: 300px;
+  width: 100%;
+  height: 500px;
 }
 
 .chart-small {
-  min-height: 200px;
+  width: 100%;
+  height: 350px;
 }
 
 .indicators-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  display: flex;
+  flex-direction: column;
   gap: 1.5rem;
   margin-bottom: 2rem;
 }
@@ -492,7 +551,7 @@ body {
 }
 
 .results-table thead {
-  background: var(--light-bg);
+  background: var(--card-bg-lighter);
 }
 
 .results-table th,
@@ -500,6 +559,7 @@ body {
   padding: 1rem;
   text-align: left;
   border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
 }
 
 .results-table th {
@@ -515,7 +575,7 @@ body {
 }
 
 .results-table tr:hover {
-  background: var(--light-bg);
+  background: var(--card-bg-lighter);
 }
 
 .results-table .positive {
@@ -562,13 +622,14 @@ body {
 }
 
 .modal-content {
-  background-color: white;
+  background-color: var(--card-bg);
   margin: 15% auto;
   padding: 2rem;
   border-radius: 12px;
   width: 90%;
   max-width: 500px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--border-color);
 }
 
 .modal-content h2 {
@@ -584,10 +645,13 @@ body {
   font-size: 1.1rem;
   margin-bottom: 1rem;
   outline: none;
+  background: var(--card-bg-lighter);
+  color: var(--text-primary);
 }
 
 .modal-content input:focus {
   border-color: var(--primary-color);
+  background: var(--card-bg);
 }
 
 .close {