maher-tradingview-api/web/public/js/technical-indicators-chart-utils.js

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

/* eslint-disable linebreak-style */
/* eslint-disable no-restricted-properties */
/* eslint-disable linebreak-style */
/* eslint-disable no-unused-vars */
/* eslint-disable prefer-const */
/* eslint-disable linebreak-style */
/* eslint-disable space-before-function-paren */
/* eslint-disable no-const-assign */
/* eslint-disable arrow-parens */
/* eslint-disable no-use-before-define */
/* eslint-disable comma-dangle */
/* eslint-disable no-plusplus */
/* eslint-disable no-trailing-spaces */
/* eslint-disable object-shorthand */
/* eslint-disable func-names */
/* eslint-disable linebreak-style */
/* eslint-disable no-undef */
/* eslint-disable linebreak-style */

/**
 * technical-indicators-chart-utils.js
 * ملف مساعد لإعداد وتحسين المؤشرات الفنية في تطبيق TradingView API
 */

/**
 * وظيفة للتحقق من جاهزية DOM والمكتبات قبل رسم الرسوم البيانية
 * @param {Function} callback الوظيفة التي يتم تنفيذها بعد التأكد من الجاهزية
 */
function ensureReadyForCharts(callback) {
  // التحقق من اكتمال تحميل DOM
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', checkDependencies);
  } else {
    checkDependencies();
  }
  
  // التحقق من وجود المكتبات اللازمة
  function checkDependencies() {
    console.log('التحقق من توفر مكتبات الرسم البياني...');
    
    // التحقق من وجود Chart.js
    if (typeof Chart === 'undefined') {
      console.error('مكتبة Chart.js غير موجودة. جاري محاولة إعادة التحميل...');
      loadScript('https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js', checkAnnotations);
    } else {
      checkAnnotations();
    }
  }
  
  // التحقق من وجود مكون Annotation
  function checkAnnotations() {
    const hasAnnotations = Chart.registry && Chart.registry.plugins &&
      Chart.registry.plugins.items && Chart.registry.plugins.items.annotation;
    
    if (!hasAnnotations) {
      console.log('مكون Annotation غير موجود. جاري تحميل المكون...');
      loadScript('https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.4.0/dist/chartjs-plugin-annotation.min.js', checkTechnicalIndicators);
    } else {
      checkTechnicalIndicators();
    }
  }
  
  // التحقق من وجود مكتبة المؤشرات الفنية
  function checkTechnicalIndicators() {
    if (typeof window.TechnicalIndicators === 'undefined') {
      console.error('ملف المؤشرات الفنية غير موجود. يرجى التأكد من تضمين technical-indicators.js');
      loadScript('/js/technical-indicators.js', () => {
        if (typeof callback === 'function') {
          console.log('تم تحميل جميع المكتبات اللازمة. بدء تنفيذ عملية الرسم...');
          callback();
        }
      });
    } else {
      if (typeof callback === 'function') {
        console.log('جميع المكتبات اللازمة موجودة. بدء تنفيذ عملية الرسم...');
        callback();
      }
    }
  }
  
  // وظيفة تحميل سكريبت خارجي
  function loadScript(url, callback) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    script.onerror = function() {
      console.error(`فشل في تحميل السكريبت: ${url}`);
      // محاولة بديلة باستخدام مصدر آخر
      if (url.includes('chart.js') && !url.includes('cdnjs')) {
        loadScript('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js', callback);
      }
    };
    document.head.appendChild(script);
  }
}

/**
 * وظيفة لإصلاح وإعادة محاولة رسم المؤشرات الفنية التي فشلت
 * @param {Array} chartIds معرفات الرسوم البيانية التي يجب التحقق منها
 * @param {Object} candleData بيانات الشموع اليابانية
 */
function retryFailedCharts(chartIds, candleData) {
  if (!Array.isArray(chartIds) || !candleData) return;
  
  console.log('التحقق من المؤشرات الفنية التي فشلت في العرض...');
  
  chartIds.forEach(function(id) {
    const canvas = document.getElementById(id);
    if (!canvas) return;
    
    try {
      // محاولة الحصول على بيانات الصورة من canvas
      const context = canvas.getContext('2d');
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      
      // التحقق ما إذا كان الرسم البياني فارغًا
      const isEmpty = !imageData.data.some(channel => channel !== 0);
      
      if (isEmpty) {
        console.warn(`المؤشر ${id} فارغ. محاولة إعادة رسمه...`);
        
        // إضافة علامة للعنصر الأب مع زر إعادة المحاولة
        const container = canvas.parentElement;
        if (!container.classList.contains('chart-error')) {
          // إضافة طبقة CSS للإشارة إلى وجود خطأ
          container.classList.add('chart-error');
          
          // إنشاء زر إعادة المحاولة
          const retryButton = document.createElement('button');
          retryButton.textContent = 'إعادة تحميل المؤشر';
          retryButton.className = 'retry-chart-btn';
          retryButton.style.cssText = 'background-color: #0088cc; color: white; border: none; padding: 5px 10px; border-radius: 3px; margin-top: 5px; cursor: pointer;';
          
          retryButton.onclick = function() {
            console.log(`محاولة إعادة رسم ${id}...`);
            // إزالة الطبقة الخاصة بالخطأ
            container.classList.remove('chart-error');
            
            // محاولة إعادة رسم المؤشر
            redrawChart(id, candleData);
            
            // إزالة الزر نفسه
            this.remove();
          };
          
          container.appendChild(retryButton);
          
          // محاولة فورية واحدة لإعادة الرسم
          setTimeout(() => redrawChart(id, candleData), 500);
        }
      } else {
        console.log(`المؤشر ${id} تم رسمه بنجاح.`);
      }
    } catch (error) {
      console.error(`خطأ أثناء التحقق من المؤشر ${id}:`, error);
    }
  });
  
  // إضافة أنماط CSS للإشارة إلى وجود خطأ
  const style = document.createElement('style');
  style.textContent = `
    .chart-error {
      border: 2px solid #f23645 !important;
      position: relative;
    }
    .chart-error::before {
      content: "لم يتم عرض المؤشر بشكل صحيح";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #f23645;
      font-size: 12px;
      background-color: rgba(255, 255, 255, 0.85);
      padding: 3px 8px;
      border-radius: 3px;
      z-index: 1;
    }
    .retry-chart-btn:hover {
      background-color: #006699 !important;
    }
  `;
  document.head.appendChild(style);
  
  /**
   * وظيفة لإعادة رسم مؤشر معين
   * @param {String} chartId معرف الرسم البياني
   * @param {Array} data بيانات الشموع اليابانية
   */
  function redrawChart(chartId, data) {
    if (!window.TechnicalIndicators) {
      console.error('مكتبة المؤشرات الفنية غير موجودة!');
      return;
    }
    
    try {
      // تحديد نوع المؤشر من المعرف وإعادة رسمه
      const indicatorType = chartId.replace('Chart', '').toLowerCase();
      
      switch (indicatorType) {
        case 'ma':
          window.TechnicalIndicators.renderMAChart(chartId, data, [20, 50, 200]);
          break;
        case 'bb':
          window.TechnicalIndicators.renderBollingerBandsChart(chartId, data, 20, 2);
          break;
        case 'rsi':
          window.TechnicalIndicators.renderRSIChart(chartId, data, 14);
          break;
        case 'macd':
          window.TechnicalIndicators.renderMACDChart(chartId, data, 12, 26, 9);
          break;
        case 'volume':
          console.log('مؤشر الحجم غير مدعوم بعد.');
          break;
        default:
          console.warn(`نوع المؤشر غير معروف: ${indicatorType}`);
      }
    } catch (error) {
      console.error(`خطأ أثناء إعادة رسم المؤشر ${chartId}:`, error);
    }
  }
}

// تصدير الوظائف للاستخدام العالمي
window.ChartUtils = {
  ensureReadyForCharts: ensureReadyForCharts,
  retryFailedCharts: retryFailedCharts
};