sqa 0.0.31 → 0.0.32

data/examples/sinatra_app/views/dashboard.erb

@@ -42,6 +42,21 @@
     </div>
   </div>
 
+  <!-- Time Period Selector -->
+  <div class="period-selector">
+    <label>Time Period:</label>
+    <div class="period-buttons">
+      <button onclick="updatePeriod('30d')" class="btn-period" data-period="30d">30 Days</button>
+      <button onclick="updatePeriod('60d')" class="btn-period" data-period="60d">60 Days</button>
+      <button onclick="updatePeriod('90d')" class="btn-period active" data-period="90d">90 Days</button>
+      <button onclick="updatePeriod('1q')" class="btn-period" data-period="1q">1 Quarter</button>
+      <button onclick="updatePeriod('2q')" class="btn-period" data-period="2q">2 Quarters</button>
+      <button onclick="updatePeriod('3q')" class="btn-period" data-period="3q">3 Quarters</button>
+      <button onclick="updatePeriod('4q')" class="btn-period" data-period="4q">4 Quarters</button>
+      <button onclick="updatePeriod('all')" class="btn-period" data-period="all">All Data</button>
+    </div>
+  </div>
+
   <!-- Main Price Chart -->
   <div class="chart-container">
     <div class="chart-header">
@@ -104,6 +119,13 @@ const ticker = '<%= @ticker %>';
 let stockData = null;
 let indicatorData = null;
 let currentChartType = 'candlestick';
+let currentPeriod = '90d';  // Default to 90 days to avoid performance issues
+
+// ApexCharts instances
+let priceChart = null;
+let volumeChart = null;
+let rsiChart = null;
+let macdChart = null;
 
 // Load data when page loads
 document.addEventListener('DOMContentLoaded', async function() {
@@ -114,7 +136,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
 async function loadStockData() {
   try {
-    const response = await fetch(`/api/stock/${ticker}`);
+    const response = await fetch(`/api/stock/${ticker}?period=${currentPeriod}`);
     stockData = await response.json();
 
     // Update price info
@@ -141,8 +163,19 @@ async function loadStockData() {
 
 async function loadIndicators() {
   try {
-    const response = await fetch(`/api/indicators/${ticker}`);
-    indicatorData = await response.json();
+    const response = await fetch(`/api/indicators/${ticker}?period=${currentPeriod}`);
+    const data = await response.json();
+
+    // Check if API returned an error
+    if (data.error) {
+      console.warn('Indicators not available:', data.error);
+      document.getElementById('currentRSI').textContent = 'N/A';
+      document.getElementById('rsiSignal').textContent = 'TA-Lib not installed';
+      document.getElementById('rsiSignal').className = 'metric-signal';
+      return;
+    }
+
+    indicatorData = data;
 
     // Update RSI metric
     const currentRSI = indicatorData.rsi[indicatorData.rsi.length - 1];
@@ -169,6 +202,8 @@ async function loadIndicators() {
     renderMACDChart();
   } catch (error) {
     console.error('Error loading indicators:', error);
+    document.getElementById('currentRSI').textContent = 'Error';
+    document.getElementById('rsiSignal').textContent = 'Failed to load';
   }
 }
 
@@ -189,7 +224,10 @@ async function loadAnalysis() {
     regimeEl.className = `metric-value ${regimeClass}`;
 
     const regimeDetail = document.getElementById('regimeDetail');
-    regimeDetail.textContent = `${analysis.regime.volatility} volatility, ${analysis.regime.strength.toFixed(2)} strength`;
+    const strengthText = typeof analysis.regime.strength === 'number'
+      ? analysis.regime.strength.toFixed(2)
+      : analysis.regime.strength || 'N/A';
+    regimeDetail.textContent = `${analysis.regime.volatility || 'unknown'} volatility, ${strengthText} strength`;
     regimeDetail.className = 'metric-signal';
   } catch (error) {
     console.error('Error loading analysis:', error);
@@ -197,174 +235,534 @@ async function loadAnalysis() {
 }
 
 function renderPriceChart() {
-  const trace = currentChartType === 'candlestick' ? {
-    type: 'candlestick',
-    x: stockData.dates,
-    open: stockData.open,
-    high: stockData.high,
-    low: stockData.low,
-    close: stockData.close,
-    name: ticker,
-    increasing: { line: { color: '#26a69a' } },
-    decreasing: { line: { color: '#ef5350' } }
-  } : {
-    type: 'scatter',
-    mode: 'lines',
-    x: stockData.dates,
-    y: stockData.close,
-    name: ticker,
-    line: { color: '#2196F3', width: 2 }
-  };
-
-  // Add moving averages if we have indicator data
-  const traces = [trace];
-  if (indicatorData) {
-    traces.push({
-      type: 'scatter',
-      mode: 'lines',
-      x: indicatorData.dates,
-      y: indicatorData.sma_20,
-      name: 'SMA 20',
-      line: { color: '#FF9800', width: 1, dash: 'dash' }
-    });
-    traces.push({
-      type: 'scatter',
-      mode: 'lines',
-      x: indicatorData.dates,
-      y: indicatorData.sma_50,
-      name: 'SMA 50',
-      line: { color: '#9C27B0', width: 1, dash: 'dash' }
-    });
+  // Destroy existing chart if it exists
+  if (priceChart) {
+    priceChart.destroy();
   }
 
-  const layout = {
-    title: '',
-    xaxis: { title: 'Date', rangeslider: { visible: false } },
-    yaxis: { title: 'Price ($)' },
-    plot_bgcolor: '#ffffff',
-    paper_bgcolor: '#ffffff',
-    margin: { l: 50, r: 50, t: 20, b: 50 },
-    height: 400,
-    showlegend: true,
-    legend: { x: 0, y: 1 }
-  };
+  let options;
+
+  if (currentChartType === 'candlestick') {
+    // Prepare candlestick data
+    const candleData = stockData.dates.map((date, i) => ({
+      x: new Date(date),
+      y: [stockData.open[i], stockData.high[i], stockData.low[i], stockData.close[i]]
+    }));
+
+    options = {
+      series: [{
+        name: ticker,
+        data: candleData
+      }],
+      chart: {
+        type: 'candlestick',
+        height: 500,
+        group: 'stock-charts',
+        background: '#151b3d',
+        foreColor: '#e8eaf6',
+        toolbar: {
+          show: true,
+          tools: {
+            download: true,
+            zoom: true,
+            zoomin: true,
+            zoomout: true,
+            pan: true,
+            reset: true
+          }
+        },
+        zoom: {
+          enabled: true,
+          type: 'x'
+        }
+      },
+      dataLabels: {
+        enabled: false  // Disable data labels for performance
+      },
+      plotOptions: {
+        candlestick: {
+          colors: {
+            upward: '#00ff88',
+            downward: '#ff3366'
+          }
+        }
+      },
+      xaxis: {
+        type: 'datetime',
+        labels: {
+          style: {
+            colors: '#9fa8da'
+          }
+        }
+      },
+      yaxis: {
+        tooltip: {
+          enabled: true
+        },
+        labels: {
+          style: {
+            colors: '#9fa8da'
+          },
+          formatter: (val) => '$' + val.toFixed(2)
+        }
+      },
+      grid: {
+        borderColor: '#2a3154',
+        strokeDashArray: 3
+      },
+      theme: {
+        mode: 'dark'
+      },
+      tooltip: {
+        theme: 'dark'
+      }
+    };
+  } else {
+    // Line chart with moving averages
+    const series = [{
+      name: ticker,
+      data: stockData.dates.map((date, i) => [new Date(date).getTime(), stockData.close[i]])
+    }];
+
+    // Add moving averages if available
+    if (indicatorData) {
+      series.push({
+        name: 'SMA 20',
+        data: indicatorData.dates.map((date, i) => [new Date(date).getTime(), indicatorData.sma_20[i]])
+      });
+      series.push({
+        name: 'SMA 50',
+        data: indicatorData.dates.map((date, i) => [new Date(date).getTime(), indicatorData.sma_50[i]])
+      });
+    }
 
-  Plotly.newPlot('priceChart', traces, layout, { responsive: true });
+    options = {
+      series: series,
+      chart: {
+        type: 'line',
+        height: 500,
+        group: 'stock-charts',
+        background: '#151b3d',
+        foreColor: '#e8eaf6',
+        toolbar: {
+          show: true,
+          tools: {
+            download: true,
+            zoom: true,
+            zoomin: true,
+            zoomout: true,
+            pan: true,
+            reset: true
+          }
+        },
+        zoom: {
+          enabled: true,
+          type: 'x'
+        }
+      },
+      colors: ['#00d4ff', '#ffaa00', '#ff66ff'],
+      stroke: {
+        width: [3, 2, 2],
+        curve: 'smooth'
+      },
+      xaxis: {
+        type: 'datetime',
+        labels: {
+          style: {
+            colors: '#9fa8da'
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          style: {
+            colors: '#9fa8da'
+          },
+          formatter: (val) => '$' + val.toFixed(2)
+        }
+      },
+      grid: {
+        borderColor: '#2a3154',
+        strokeDashArray: 3
+      },
+      legend: {
+        position: 'top',
+        horizontalAlign: 'left',
+        fontSize: '14px',
+        labels: {
+          colors: '#e8eaf6'
+        }
+      },
+      theme: {
+        mode: 'dark'
+      },
+      tooltip: {
+        theme: 'dark',
+        shared: true,
+        intersect: false
+      }
+    };
+  }
+
+  priceChart = new ApexCharts(document.querySelector("#priceChart"), options);
+  priceChart.render();
 }
 
 function renderVolumeChart() {
-  const colors = stockData.close.map((close, i) => {
-    if (i === 0) return '#2196F3';
-    return close >= stockData.close[i - 1] ? '#26a69a' : '#ef5350';
-  });
-
-  const trace = {
-    type: 'bar',
-    x: stockData.dates,
-    y: stockData.volume,
-    name: 'Volume',
-    marker: { color: colors }
-  };
+  // Destroy existing chart if it exists
+  if (volumeChart) {
+    volumeChart.destroy();
+  }
 
-  const layout = {
-    title: '',
-    xaxis: { title: 'Date' },
-    yaxis: { title: 'Volume' },
-    plot_bgcolor: '#ffffff',
-    paper_bgcolor: '#ffffff',
-    margin: { l: 50, r: 50, t: 20, b: 50 },
-    height: 200,
-    showlegend: false
+  // Prepare volume data with timestamps and colors
+  const volumeData = stockData.dates.map((date, i) => ({
+    x: new Date(date).getTime(),
+    y: stockData.volume[i],
+    fillColor: i === 0 ? '#00d4ff' : (stockData.close[i] >= stockData.close[i - 1] ? '#00ff88' : '#ff3366')
+  }));
+
+  const options = {
+    series: [{
+      name: 'Volume',
+      data: volumeData
+    }],
+    chart: {
+      type: 'bar',
+      height: 300,
+      group: 'stock-charts',
+      background: '#151b3d',
+      foreColor: '#e8eaf6',
+      toolbar: {
+        show: true,
+        tools: {
+          download: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true
+        }
+      },
+      zoom: {
+        enabled: true,
+        type: 'x'
+      }
+    },
+    dataLabels: {
+      enabled: false  // Disable data labels for performance
+    },
+    plotOptions: {
+      bar: {
+        columnWidth: '95%',
+        colors: {
+          ranges: []
+        }
+      }
+    },
+    xaxis: {
+      type: 'datetime',
+      labels: {
+        style: {
+          colors: '#9fa8da'
+        }
+      }
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: '#9fa8da'
+        },
+        formatter: (val) => {
+          if (val >= 1e9) return (val / 1e9).toFixed(1) + 'B';
+          if (val >= 1e6) return (val / 1e6).toFixed(1) + 'M';
+          if (val >= 1e3) return (val / 1e3).toFixed(1) + 'K';
+          return val.toFixed(0);
+        }
+      }
+    },
+    grid: {
+      borderColor: '#2a3154',
+      strokeDashArray: 3
+    },
+    theme: {
+      mode: 'dark'
+    },
+    tooltip: {
+      theme: 'dark',
+      y: {
+        formatter: (val) => val.toLocaleString()
+      }
+    }
   };
 
-  Plotly.newPlot('volumeChart', [trace], layout, { responsive: true });
+  volumeChart = new ApexCharts(document.querySelector("#volumeChart"), options);
+  volumeChart.render();
 }
 
 function renderRSIChart() {
-  const trace = {
-    type: 'scatter',
-    mode: 'lines',
-    x: indicatorData.dates,
-    y: indicatorData.rsi,
-    name: 'RSI',
-    line: { color: '#2196F3', width: 2 }
-  };
+  // Destroy existing chart if it exists
+  if (rsiChart) {
+    rsiChart.destroy();
+  }
 
-  const oversold = {
-    type: 'scatter',
-    mode: 'lines',
-    x: indicatorData.dates,
-    y: Array(indicatorData.dates.length).fill(30),
-    name: 'Oversold',
-    line: { color: '#4CAF50', width: 1, dash: 'dash' }
-  };
+  // Skip if indicators not available
+  if (!indicatorData || !indicatorData.rsi) {
+    document.querySelector("#rsiChart").innerHTML = '<p style="text-align: center; padding: 40px; color: #9fa8da;">Technical indicators not available (TA-Lib required)</p>';
+    return;
+  }
 
-  const overbought = {
-    type: 'scatter',
-    mode: 'lines',
-    x: indicatorData.dates,
-    y: Array(indicatorData.dates.length).fill(70),
-    name: 'Overbought',
-    line: { color: '#F44336', width: 1, dash: 'dash' }
-  };
+  // Filter out null/NaN/undefined values (RSI has warmup period)
+  const validRSIIndices = [];
+  for (let i = 0; i < indicatorData.rsi.length; i++) {
+    if (indicatorData.dates[i] !== null &&
+        indicatorData.dates[i] !== undefined &&
+        indicatorData.rsi[i] !== null &&
+        indicatorData.rsi[i] !== undefined &&
+        !isNaN(indicatorData.rsi[i])) {
+      validRSIIndices.push(i);
+    }
+  }
+
+  // If no valid data, show message
+  if (validRSIIndices.length === 0) {
+    document.querySelector("#rsiChart").innerHTML = '<p style="text-align: center; padding: 40px; color: #9fa8da;">No valid RSI data available (warmup period or data issue)</p>';
+    return;
+  }
 
-  const layout = {
-    title: '',
-    xaxis: { title: 'Date' },
-    yaxis: { title: 'RSI', range: [0, 100] },
-    plot_bgcolor: '#ffffff',
-    paper_bgcolor: '#ffffff',
-    margin: { l: 50, r: 50, t: 20, b: 50 },
-    height: 250,
-    showlegend: true,
-    legend: { x: 0, y: 1 }
+  const options = {
+    series: [
+      {
+        name: 'RSI',
+        data: validRSIIndices.map(i => [new Date(indicatorData.dates[i]).getTime(), indicatorData.rsi[i]])
+      },
+      {
+        name: 'Oversold (30)',
+        data: validRSIIndices.map(i => [new Date(indicatorData.dates[i]).getTime(), 30])
+      },
+      {
+        name: 'Overbought (70)',
+        data: validRSIIndices.map(i => [new Date(indicatorData.dates[i]).getTime(), 70])
+      }
+    ],
+    chart: {
+      type: 'line',
+      height: 350,
+      group: 'stock-charts',
+      background: '#151b3d',
+      foreColor: '#e8eaf6',
+      toolbar: {
+        show: true,
+        tools: {
+          download: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true
+        }
+      },
+      zoom: {
+        enabled: true,
+        type: 'x'
+      }
+    },
+    colors: ['#00d4ff', '#00ff88', '#ff3366'],
+    stroke: {
+      width: [3, 2, 2],
+      curve: 'smooth',
+      dashArray: [0, 5, 5]
+    },
+    xaxis: {
+      type: 'datetime',
+      labels: {
+        style: {
+          colors: '#9fa8da'
+        }
+      }
+    },
+    yaxis: {
+      min: 0,
+      max: 100,
+      labels: {
+        style: {
+          colors: '#9fa8da'
+        }
+      }
+    },
+    grid: {
+      borderColor: '#2a3154',
+      strokeDashArray: 3
+    },
+    legend: {
+      position: 'top',
+      horizontalAlign: 'left',
+      fontSize: '14px',
+      labels: {
+        colors: '#e8eaf6'
+      }
+    },
+    theme: {
+      mode: 'dark'
+    },
+    tooltip: {
+      theme: 'dark',
+      shared: true,
+      intersect: false
+    },
+    annotations: {
+      yaxis: [
+        {
+          y: 30,
+          borderColor: '#00ff88',
+          fillColor: '#00ff88',
+          opacity: 0.1
+        },
+        {
+          y: 70,
+          borderColor: '#ff3366',
+          fillColor: '#ff3366',
+          opacity: 0.1
+        }
+      ]
+    }
   };
 
-  Plotly.newPlot('rsiChart', [trace, oversold, overbought], layout, { responsive: true });
+  rsiChart = new ApexCharts(document.querySelector("#rsiChart"), options);
+  rsiChart.render();
 }
 
 function renderMACDChart() {
-  const macd = {
-    type: 'scatter',
-    mode: 'lines',
-    x: indicatorData.dates,
-    y: indicatorData.macd,
-    name: 'MACD',
-    line: { color: '#2196F3', width: 2 }
-  };
+  // Destroy existing chart if it exists
+  if (macdChart) {
+    macdChart.destroy();
+  }
 
-  const signal = {
-    type: 'scatter',
-    mode: 'lines',
-    x: indicatorData.dates,
-    y: indicatorData.macd_signal,
-    name: 'Signal',
-    line: { color: '#FF9800', width: 2 }
-  };
+  // Skip if indicators not available
+  if (!indicatorData || !indicatorData.macd) {
+    document.querySelector("#macdChart").innerHTML = '<p style="text-align: center; padding: 40px; color: #9fa8da;">Technical indicators not available (TA-Lib required)</p>';
+    return;
+  }
 
-  const hist = {
-    type: 'bar',
-    x: indicatorData.dates,
-    y: indicatorData.macd_hist,
-    name: 'Histogram',
-    marker: {
-      color: indicatorData.macd_hist.map(v => v >= 0 ? '#26a69a' : '#ef5350')
+  // Filter out null/NaN/undefined values (MACD has warmup period)
+  const validIndices = [];
+  for (let i = 0; i < indicatorData.macd.length; i++) {
+    if (indicatorData.dates[i] !== null &&
+        indicatorData.dates[i] !== undefined &&
+        indicatorData.macd[i] !== null &&
+        indicatorData.macd[i] !== undefined &&
+        indicatorData.macd_signal[i] !== null &&
+        indicatorData.macd_signal[i] !== undefined &&
+        indicatorData.macd_hist[i] !== null &&
+        indicatorData.macd_hist[i] !== undefined &&
+        !isNaN(indicatorData.macd[i]) &&
+        !isNaN(indicatorData.macd_signal[i]) &&
+        !isNaN(indicatorData.macd_hist[i])) {
+      validIndices.push(i);
     }
-  };
+  }
 
-  const layout = {
-    title: '',
-    xaxis: { title: 'Date' },
-    yaxis: { title: 'MACD' },
-    plot_bgcolor: '#ffffff',
-    paper_bgcolor: '#ffffff',
-    margin: { l: 50, r: 50, t: 20, b: 50 },
-    height: 250,
-    showlegend: true,
-    legend: { x: 0, y: 1 }
+  // If no valid data, show message
+  if (validIndices.length === 0) {
+    document.querySelector("#macdChart").innerHTML = '<p style="text-align: center; padding: 40px; color: #9fa8da;">No valid MACD data available (warmup period or data issue)</p>';
+    return;
+  }
+
+  // Prepare histogram data with colors (only valid values)
+  const histData = validIndices.map(i => ({
+    x: new Date(indicatorData.dates[i]).getTime(),
+    y: indicatorData.macd_hist[i],
+    fillColor: indicatorData.macd_hist[i] >= 0 ? '#00ff88' : '#ff3366'
+  }));
+
+  const options = {
+    series: [
+      {
+        name: 'Histogram',
+        type: 'bar',
+        data: histData
+      },
+      {
+        name: 'MACD',
+        type: 'line',
+        data: validIndices.map(i => [new Date(indicatorData.dates[i]).getTime(), indicatorData.macd[i]])
+      },
+      {
+        name: 'Signal',
+        type: 'line',
+        data: validIndices.map(i => [new Date(indicatorData.dates[i]).getTime(), indicatorData.macd_signal[i]])
+      }
+    ],
+    chart: {
+      height: 350,
+      group: 'stock-charts',
+      background: '#151b3d',
+      foreColor: '#e8eaf6',
+      toolbar: {
+        show: true,
+        tools: {
+          download: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true
+        }
+      },
+      zoom: {
+        enabled: true,
+        type: 'x'
+      }
+    },
+    plotOptions: {
+      bar: {
+        columnWidth: '80%'
+      }
+    },
+    colors: ['#00ff88', '#00d4ff', '#ffaa00'],
+    stroke: {
+      width: [0, 3, 3],
+      curve: 'smooth'
+    },
+    xaxis: {
+      type: 'datetime',
+      labels: {
+        style: {
+          colors: '#9fa8da'
+        }
+      }
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: '#9fa8da'
+        },
+        formatter: (val) => val.toFixed(2)
+      }
+    },
+    grid: {
+      borderColor: '#2a3154',
+      strokeDashArray: 3
+    },
+    legend: {
+      position: 'top',
+      horizontalAlign: 'left',
+      fontSize: '14px',
+      labels: {
+        colors: '#e8eaf6'
+      }
+    },
+    theme: {
+      mode: 'dark'
+    },
+    tooltip: {
+      theme: 'dark',
+      shared: true,
+      intersect: false
+    }
   };
 
-  Plotly.newPlot('macdChart', [hist, macd, signal], layout, { responsive: true });
+  macdChart = new ApexCharts(document.querySelector("#macdChart"), options);
+  macdChart.render();
 }
 
 function updateChartType(type) {
@@ -413,6 +811,20 @@ async function runStrategyComparison() {
   }
 }
 
+async function updatePeriod(period) {
+  currentPeriod = period;
+
+  // Update button states
+  document.querySelectorAll('[data-period]').forEach(btn => {
+    btn.classList.remove('active');
+  });
+  document.querySelector(`[data-period="${period}"]`).classList.add('active');
+
+  // Reload data with new period
+  await loadStockData();
+  await loadIndicators();
+}
+
 function refreshData() {
   location.reload();
 }