sqa 0.0.32 → 0.0.37

data/examples/sinatra_app/views/dashboard.erb

@@ -1,831 +0,0 @@
-<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>