maher-tradingview-api/web/public/js/etf-renderer.js

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

/* eslint-disable linebreak-style */
/* eslint-disable no-alert */
/* eslint-disable linebreak-style */
/* eslint-disable no-param-reassign */
/* eslint-disable linebreak-style */
/* eslint-disable space-before-function-paren */
/* eslint-disable object-shorthand */
/* eslint-disable arrow-parens */
/* eslint-disable linebreak-style */
/* eslint-disable func-names */
/* eslint-disable comma-dangle */
/* eslint-disable no-new */
/* eslint-disable no-trailing-spaces */
/* eslint-disable no-use-before-define */
/* eslint-disable linebreak-style */
/* eslint-disable prefer-arrow-callback */
/* eslint-disable no-undef */
/* eslint-disable linebreak-style */
/**
 * ETF Data Renderer - لعرض وتفاعل بيانات صناديق المؤشرات المتداولة
 */

document.addEventListener('DOMContentLoaded', function() {
  // التحقق من وجود قسم ETF في الصفحة
  const etfSection = document.querySelector('.etf-section');
  if (!etfSection) return;
  
  // تهيئة عرض الرسوم البيانية المقارنة إذا كانت موجودة
  initEtfComparisonCharts();
  
  // إضافة مستمعات الأحداث لأزرار التبديل
  setupEtfTabButtons();
});

/**
 * تهيئة الرسوم البيانية المقارنة بين ETF والمؤشرات
 */
function initEtfComparisonCharts() {
  const comparisonChartEl = document.getElementById('etfComparisonChart');
  if (!comparisonChartEl) return;
  
  // الحصول على بيانات الرسم البياني من الواصفة data-chart
  const chartDataStr = comparisonChartEl.getAttribute('data-chart');
  if (!chartDataStr) return;
  
  try {
    // تحويل البيانات من سلسلة JSON إلى كائن
    const chartData = JSON.parse(chartDataStr);
    
    // إنشاء رسم بياني باستخدام Chart.js
    new Chart(comparisonChartEl, {
      type: 'line',
      data: {
        labels: chartData.labels,
        datasets: chartData.datasets
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
            align: 'end',
            labels: {
              boxWidth: 12,
              padding: 15
            }
          },
          tooltip: {
            mode: 'index',
            intersect: false
          }
        },
        scales: {
          x: {
            grid: {
              display: false
            }
          },
          y: {
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            },
            ticks: {
              callback: function(value) {
                return value.toLocaleString();
              }
            }
          }
        }
      }
    });
  } catch (e) {
    console.error('خطأ في تحميل بيانات الرسم البياني المقارن:', e);
  }
}

/**
 * إعداد أزرار التبديل بين علامات التبويب في قسم ETF
 */
function setupEtfTabButtons() {
  const tabButtons = document.querySelectorAll('.etf-tab-btn');
  if (!tabButtons.length) return;
  
  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      // إزالة الفئة النشطة من جميع الأزرار
      tabButtons.forEach(btn => btn.classList.remove('active'));
      
      // إضافة الفئة النشطة للزر الحالي
      this.classList.add('active');
      
      // عرض المحتوى المرتبط
      const targetId = this.getAttribute('data-target');
      const tabContents = document.querySelectorAll('.etf-tab-content');
      
      tabContents.forEach(content => {
        if (content.id === targetId) {
          content.style.display = 'block';
        } else {
          content.style.display = 'none';
        }
      });
    });
  });
  
  // تنشيط الزر الأول افتراضيًا
  if (tabButtons.length > 0) {
    tabButtons[0].click();
  }
}

/**
 * عرض نافذة إضافية مع معلومات مفصلة عن الـ ETF
 */
function showEtfDetails(etfSymbol) {
  // يمكن تنفيذ هذه الوظيفة لعرض نافذة منبثقة مع معلومات تفصيلية
  // هذا مجرد مثال بسيط
  alert(`سيتم عرض معلومات تفصيلية عن ${etfSymbol} قريبًا`);
}

// تصدير الوظائف للاستخدام الخارجي
window.ETFRenderer = {
  showDetails: showEtfDetails
};