maher-tradingview-api/web/public/js/chart-interactions.js

Tradingview instant stocks API, indicator alerts, trading bot, and more !

// Chart Interactions Manager
class ChartInteractionsManager {
    constructor() {
        this.currentTimeframe = '1d';
        this.activeIndicators = new Set();
        this.setupEventListeners();
    }

    setupEventListeners() {
        // تفعيل أزرار الفترات الزمنية
        document.querySelectorAll('.timeframe-button').forEach(button => {
            button.addEventListener('click', () => this.handleTimeframeChange(button));
        });

        // إضافة استمع للتكبير/التصغير
        document.addEventListener('wheel', (e) => {
            if (e.ctrlKey) {
                e.preventDefault();
                const chart = window.EnhancedChartRenderer.charts.get('priceChart');
                if (chart) {
                    const zoomLevel = e.deltaY > 0 ? 1.1 : 0.9;
                    chart.zoom(zoomLevel);
                }
            }
        });

        // إضافة استمع للمس للأجهزة المحمولة
        const hammer = new Hammer(document.getElementById('priceChart'));
        hammer.get('pinch').set({ enable: true });
        hammer.on('pinch', (e) => {
            const chart = window.EnhancedChartRenderer.charts.get('priceChart');
            if (chart) {
                chart.zoom(e.scale);
            }
        });
    }

    handleTimeframeChange(button) {
        const interval = button.dataset.interval;
        if (interval === this.currentTimeframe) return;

        // تحديث الواجهة
        document.querySelectorAll('.timeframe-button').forEach(btn => {
            btn.classList.remove('active');
        });
        button.classList.add('active');

        // تحديث الفترة الزمنية وإعادة تحميل البيانات
        this.currentTimeframe = interval;
        this.loadChartData();
    }

    async loadChartData() {
        const symbol = window.currentSymbol; // يجب تعريفه في الصفحة
        const container = document.querySelector('.chart-container');
        
        try {
            container?.classList.add('loading');
            
            const response = await fetch(`/api/market-data/${symbol}?timeframe=${this.currentTimeframe}`);
            if (!response.ok) throw new Error('فشل تحميل البيانات');
            
            const data = await response.json();
            this.updateChart(data);
            
            // تحديث المؤشرات الفنية
            this.updateTechnicalIndicators(data);
            
        } catch (error) {
            console.error('خطأ في تحميل البيانات:', error);
            // عرض رسالة خطأ للمستخدم
            const errorElement = document.createElement('div');
            errorElement.className = 'chart-error';
            errorElement.textContent = 'حدث خطأ أثناء تحميل البيانات. يرجى المحاولة مرة أخرى.';
            container?.appendChild(errorElement);
        } finally {
            container?.classList.remove('loading');
        }
    }

    updateChart(data) {
        const chart = window.EnhancedChartRenderer.charts.get('priceChart');
        if (!chart) return;

        const chartData = {
            labels: data.map(candle => new Date(candle.time).toLocaleDateString('ar-SA')),
            datasets: [{
                label: window.currentSymbol,
                data: data.map(candle => candle.close),
                borderColor: '#0088cc',
                backgroundColor: 'rgba(0, 136, 204, 0.1)',
                borderWidth: 2,
                pointRadius: 0,
                pointHoverRadius: 4
            }]
        };

        chart.data = chartData;
        chart.update();
    }

    updateTechnicalIndicators(data) {
        if (!data || !Array.isArray(data)) return;

        // تحديث كل المؤشرات النشطة
        this.activeIndicators.forEach(indicator => {
            switch (indicator) {
                case 'rsi':
                    this.updateRSI(data);
                    break;
                case 'macd':
                    this.updateMACD(data);
                    break;
                case 'bb':
                    this.updateBollingerBands(data);
                    break;
                case 'ichimoku':
                    this.updateIchimoku(data);
                    break;
            }
        });
    }

    updateRSI(data) {
        const prices = data.map(candle => candle.close);
        const rsiValues = window.AdvancedTechnicalIndicators.calculateRSI(prices);
        
        const rsiChart = window.EnhancedChartRenderer.charts.get('rsiChart');
        if (rsiChart) {
            rsiChart.data.datasets[0].data = rsiValues;
            rsiChart.update();
        }
    }

    updateMACD(data) {
        const prices = data.map(candle => candle.close);
        const macdData = window.AdvancedTechnicalIndicators.calculateMACD(prices);
        
        const macdChart = window.EnhancedChartRenderer.charts.get('macdChart');
        if (macdChart) {
            macdChart.data.datasets[0].data = macdData.macdLine;
            macdChart.data.datasets[1].data = macdData.signalLine;
            macdChart.data.datasets[2].data = macdData.histogram;
            macdChart.update();
        }
    }

    updateBollingerBands(data) {
        const prices = data.map(candle => candle.close);
        const bbData = window.AdvancedTechnicalIndicators.calculateBollingerBands(prices);
        
        const bbChart = window.EnhancedChartRenderer.charts.get('bbChart');
        if (bbChart) {
            bbChart.data.datasets[0].data = bbData.middle;
            bbChart.data.datasets[1].data = bbData.upper;
            bbChart.data.datasets[2].data = bbData.lower;
            bbChart.update();
        }
    }

    updateIchimoku(data) {
        const high = data.map(candle => candle.high);
        const low = data.map(candle => candle.low);
        const ichimokuData = window.AdvancedTechnicalIndicators.calculateIchimoku(high, low);
        
        const ichimokuChart = window.EnhancedChartRenderer.charts.get('ichimokuChart');
        if (ichimokuChart) {
            ichimokuChart.data.datasets[0].data = ichimokuData.conversion;
            ichimokuChart.data.datasets[1].data = ichimokuData.base;
            ichimokuChart.data.datasets[2].data = ichimokuData.spanA;
            ichimokuChart.data.datasets[3].data = ichimokuData.spanB;
            ichimokuChart.update();
        }
    }

    toggleIndicator(indicatorType) {
        if (this.activeIndicators.has(indicatorType)) {
            this.activeIndicators.delete(indicatorType);
            // إزالة المؤشر من الرسم البياني
            window.EnhancedChartRenderer.removeIndicator('priceChart', indicatorType);
        } else {
            this.activeIndicators.add(indicatorType);
            // إضافة المؤشر إلى الرسم البياني
            const candleData = this.getCurrentData();
            if (candleData) {
                this.updateTechnicalIndicators(candleData);
            }
        }
    }

    getCurrentData() {
        const chart = window.EnhancedChartRenderer.charts.get('priceChart');
        return chart ? chart.data.datasets[0].data : null;
    }
}

// تصدير مدير التفاعلات
window.chartInteractions = new ChartInteractionsManager();