sqa 0.0.24 → 0.0.32

data/examples/sinatra_app/views/dashboard.erb

@@ -0,0 +1,831 @@
+<div class="dashboard">
+  <div class="dashboard-header">
+    <div class="ticker-info">
+      <h1><%= @ticker %></h1>
+      <div id="priceInfo" class="price-info">
+        <span class="current-price">Loading...</span>
+        <span class="price-change">--</span>
+      </div>
+    </div>
+    <div class="header-actions">
+      <button onclick="location.href='/analyze/<%= @ticker %>'" class="btn btn-secondary">
+        <i class="fas fa-analytics"></i> Analysis
+      </button>
+      <button onclick="location.href='/backtest/<%= @ticker %>'" class="btn btn-secondary">
+        <i class="fas fa-history"></i> Backtest
+      </button>
+      <button onclick="refreshData()" class="btn btn-secondary">
+        <i class="fas fa-sync-alt"></i> Refresh
+      </button>
+    </div>
+  </div>
+
+  <!-- Key Metrics Cards -->
+  <div class="metrics-grid">
+    <div class="metric-card">
+      <div class="metric-label">52-Week High</div>
+      <div id="high52w" class="metric-value">--</div>
+    </div>
+    <div class="metric-card">
+      <div class="metric-label">52-Week Low</div>
+      <div id="low52w" class="metric-value">--</div>
+    </div>
+    <div class="metric-card">
+      <div class="metric-label">Current RSI</div>
+      <div id="currentRSI" class="metric-value">--</div>
+      <div id="rsiSignal" class="metric-signal"></div>
+    </div>
+    <div class="metric-card">
+      <div class="metric-label">Market Regime</div>
+      <div id="marketRegime" class="metric-value">--</div>
+      <div id="regimeDetail" class="metric-signal"></div>
+    </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">
+      <h2><i class="fas fa-chart-candlestick"></i> Price Chart</h2>
+      <div class="chart-controls">
+        <button onclick="updateChartType('candlestick')" class="btn-small active" data-chart="candlestick">
+          Candlestick
+        </button>
+        <button onclick="updateChartType('line')" class="btn-small" data-chart="line">
+          Line
+        </button>
+      </div>
+    </div>
+    <div id="priceChart" class="chart"></div>
+  </div>
+
+  <!-- Volume Chart -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-chart-bar"></i> Volume</h2>
+    </div>
+    <div id="volumeChart" class="chart"></div>
+  </div>
+
+  <!-- Technical Indicators Grid -->
+  <div class="indicators-grid">
+    <!-- RSI Chart -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <h3><i class="fas fa-wave-square"></i> RSI (14)</h3>
+      </div>
+      <div id="rsiChart" class="chart chart-small"></div>
+    </div>
+
+    <!-- MACD Chart -->
+    <div class="chart-container">
+      <div class="chart-header">
+        <h3><i class="fas fa-signal"></i> MACD</h3>
+      </div>
+      <div id="macdChart" class="chart chart-small"></div>
+    </div>
+  </div>
+
+  <!-- Strategy Comparison -->
+  <div class="chart-container">
+    <div class="chart-header">
+      <h2><i class="fas fa-trophy"></i> Strategy Comparison</h2>
+      <button onclick="runStrategyComparison()" class="btn btn-primary">
+        <i class="fas fa-play"></i> Compare Strategies
+      </button>
+    </div>
+    <div id="strategyResults" class="strategy-results">
+      <p class="hint">Click "Compare Strategies" to see backtest results for different trading strategies.</p>
+    </div>
+  </div>
+</div>
+
+<script>
+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() {
+  await loadStockData();
+  await loadIndicators();
+  await loadAnalysis();
+});
+
+async function loadStockData() {
+  try {
+    const response = await fetch(`/api/stock/${ticker}?period=${currentPeriod}`);
+    stockData = await response.json();
+
+    // Update price info
+    document.querySelector('.current-price').textContent = `$${stockData.current_price.toFixed(2)}`;
+
+    const changeClass = stockData.change >= 0 ? 'positive' : 'negative';
+    const changeSign = stockData.change >= 0 ? '+' : '';
+    document.querySelector('.price-change').className = `price-change ${changeClass}`;
+    document.querySelector('.price-change').textContent =
+      `${changeSign}${stockData.change.toFixed(2)} (${changeSign}${stockData.change_percent.toFixed(2)}%)`;
+
+    // Update metrics
+    document.getElementById('high52w').textContent = `$${stockData.high_52w.toFixed(2)}`;
+    document.getElementById('low52w').textContent = `$${stockData.low_52w.toFixed(2)}`;
+
+    // Render charts
+    renderPriceChart();
+    renderVolumeChart();
+  } catch (error) {
+    console.error('Error loading stock data:', error);
+    alert('Failed to load stock data. Please try again.');
+  }
+}
+
+async function loadIndicators() {
+  try {
+    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];
+    document.getElementById('currentRSI').textContent = currentRSI.toFixed(2);
+
+    let rsiSignal = '';
+    let rsiClass = '';
+    if (currentRSI < 30) {
+      rsiSignal = 'Oversold';
+      rsiClass = 'signal-buy';
+    } else if (currentRSI > 70) {
+      rsiSignal = 'Overbought';
+      rsiClass = 'signal-sell';
+    } else {
+      rsiSignal = 'Neutral';
+      rsiClass = 'signal-neutral';
+    }
+    const rsiSignalEl = document.getElementById('rsiSignal');
+    rsiSignalEl.textContent = rsiSignal;
+    rsiSignalEl.className = `metric-signal ${rsiClass}`;
+
+    // Render indicator charts
+    renderRSIChart();
+    renderMACDChart();
+  } catch (error) {
+    console.error('Error loading indicators:', error);
+    document.getElementById('currentRSI').textContent = 'Error';
+    document.getElementById('rsiSignal').textContent = 'Failed to load';
+  }
+}
+
+async function loadAnalysis() {
+  try {
+    const response = await fetch(`/api/analyze/${ticker}`);
+    const analysis = await response.json();
+
+    // Update market regime
+    const regime = analysis.regime.type.toUpperCase();
+    const regimeEl = document.getElementById('marketRegime');
+    regimeEl.textContent = regime;
+
+    let regimeClass = '';
+    if (regime === 'BULL') regimeClass = 'signal-buy';
+    else if (regime === 'BEAR') regimeClass = 'signal-sell';
+    else regimeClass = 'signal-neutral';
+    regimeEl.className = `metric-value ${regimeClass}`;
+
+    const regimeDetail = document.getElementById('regimeDetail');
+    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);
+  }
+}
+
+function renderPriceChart() {
+  // Destroy existing chart if it exists
+  if (priceChart) {
+    priceChart.destroy();
+  }
+
+  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]])
+      });
+    }
+
+    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() {
+  // Destroy existing chart if it exists
+  if (volumeChart) {
+    volumeChart.destroy();
+  }
+
+  // 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()
+      }
+    }
+  };
+
+  volumeChart = new ApexCharts(document.querySelector("#volumeChart"), options);
+  volumeChart.render();
+}
+
+function renderRSIChart() {
+  // Destroy existing chart if it exists
+  if (rsiChart) {
+    rsiChart.destroy();
+  }
+
+  // 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;
+  }
+
+  // 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 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
+        }
+      ]
+    }
+  };
+
+  rsiChart = new ApexCharts(document.querySelector("#rsiChart"), options);
+  rsiChart.render();
+}
+
+function renderMACDChart() {
+  // Destroy existing chart if it exists
+  if (macdChart) {
+    macdChart.destroy();
+  }
+
+  // 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;
+  }
+
+  // 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);
+    }
+  }
+
+  // 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
+    }
+  };
+
+  macdChart = new ApexCharts(document.querySelector("#macdChart"), options);
+  macdChart.render();
+}
+
+function updateChartType(type) {
+  currentChartType = type;
+
+  // Update button states
+  document.querySelectorAll('[data-chart]').forEach(btn => {
+    btn.classList.remove('active');
+  });
+  document.querySelector(`[data-chart="${type}"]`).classList.add('active');
+
+  // Re-render chart
+  renderPriceChart();
+}
+
+async function runStrategyComparison() {
+  const resultsDiv = document.getElementById('strategyResults');
+  resultsDiv.innerHTML = '<p class="loading"><i class="fas fa-spinner fa-spin"></i> Running backtests...</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>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 rank = i === 0 ? '<i class="fas fa-trophy" style="color: #FFD700;"></i> ' : '';
+      html += `<tr>
+        <td>${rank}${result.strategy}</td>
+        <td class="${returnClass}">${result.return.toFixed(2)}%</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>';
+    resultsDiv.innerHTML = html;
+  } catch (error) {
+    console.error('Error comparing strategies:', error);
+    resultsDiv.innerHTML = '<p class="error">Failed to compare strategies. Please try again.</p>';
+  }
+}
+
+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();
+}
+</script>