alcrxm/optionsflow-tracker-pro

1// Initialize dark mode based on user preference2if (localStorage.getItem('darkMode') === 'true' || 3    (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {4    document.documentElement.classList.add('dark');5    localStorage.setItem('darkMode', 'true');6}7 8// Theme toggle functionality9document.getElementById('theme-toggle').addEventListener('click', function() {10    document.documentElement.classList.toggle('dark');11    localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));12});13 14// Symbol search functionality15document.querySelector('input[type="text"]').addEventListener('input', function(e) {16    // Implement search functionality here17    console.log('Searching for:', e.target.value);18});19 20// Update chart with new data (placeholder function)21function updateChart(data) {22    console.log('Updating chart with:', data);23    // In a real implementation, this would update the chart data24}25 26// Format numbers with commas27function formatNumber(num) {28    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");29}30 31// Format currency32function formatCurrency(num) {33    return '$' + formatNumber(num.toFixed(2));34}35 36// Format large numbers (millions)37function formatMillions(num) {38    return (num / 1000000).toFixed(2) + 'M';39}40// Fetch options data from API41async function fetchOptionsData(symbol, expiration) {42    try {43        const response = await fetch(`https://api.polygon.io/v2/reference/options/contracts/${symbol}?expiration=${expiration}&apiKey=YOUR_API_KEY`);44        const data = await response.json();45        return {46            symbol: symbol,47            expiration: expiration,48            data: data.results || []49        };50    } catch (error) {51        console.error('Error fetching options data:', error);52        return {53            symbol: symbol,54            expiration: expiration,55            data: [],56            error: error.message57        };58    }59}60 61// Cache for symbols data62const symbolsCache = new Map();63 64// Get symbols with caching65async function getSymbols() {66    if (symbolsCache.has('all')) {67        return symbolsCache.get('all');68    }69 70    try {71        const response = await fetch('https://api.twelvedata.com/stocks?source=docs');72        const data = await response.json();73        symbolsCache.set('all', data.data);74        return data.data;75    } catch (error) {76        console.error('Error fetching symbols:', error);77        return [];78    }79}80// Event listener for update button81document.querySelector('button').addEventListener('click', function() {82    const symbol = document.querySelector('select').value;83    const expiration = document.querySelector('input[type="date"]').value;84    85    fetchOptionsData(symbol, expiration)86        .then(data => {87            console.log('Data received:', data);88            // Update UI with new data89        })90        .catch(error => {91            console.error('Error fetching data:', error);92        });93});94 95// Initialize tooltips96function initTooltips() {97    const tooltipElements = document.querySelectorAll('[data-tooltip]');98    tooltipElements.forEach(el => {99        const tooltipText = el.getAttribute('data-tooltip');100        const tooltip = document.createElement('div');101        tooltip.className = 'hidden bg-gray-900 text-white text-xs rounded py-1 px-2 absolute z-50';102        tooltip.textContent = tooltipText;103        el.appendChild(tooltip);104        105        el.addEventListener('mouseenter', () => {106            tooltip.classList.remove('hidden');107            positionTooltip(el, tooltip);108        });109        110        el.addEventListener('mouseleave', () => {111            tooltip.classList.add('hidden');112        });113    });114}115 116// Position tooltip relative to element117function positionTooltip(element, tooltip) {118    const rect = element.getBoundingClientRect();119    tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;120    tooltip.style.left = `${rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2)}px`;121}122// Initialize when DOM is loaded123document.addEventListener('DOMContentLoaded', function() {124    initTooltips();125    126    // Set default date to today + 2 years (for the demo)127    const today = new Date();128    const futureDate = new Date(today.getFullYear() + 2, today.getMonth(), today.getDate());129    const formattedDate = futureDate.toISOString().split('T')[0];130    document.querySelector('input[type="date"]').value = formattedDate;131 132    // Load symbols on startup133    getSymbols().then(symbols => {134        const select = document.querySelector('select');135        select.innerHTML = '';136        symbols.forEach(symbol => {137            const option = document.createElement('option');138            option.value = symbol.symbol;139            option.textContent = symbol.symbol;140            select.appendChild(option);141        });142    });143});144