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

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

/* eslint-disable linebreak-style */
/* eslint-disable eol-last */
/* eslint-disable linebreak-style */
/* eslint-disable object-shorthand */
/* eslint-disable linebreak-style */
/* eslint-disable no-trailing-spaces */
/* eslint-disable comma-dangle */
/* eslint-disable consistent-return */
/* eslint-disable no-undef */
/* eslint-disable linebreak-style */

/**
 * chart-renderer.js
 * ملف معالجة الرسوم البيانية لتطبيق TradingView API
 */

function createGradient(ctx) {
  const gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
  gradient.addColorStop(0, 'rgba(0, 136, 204, 0.3)');
  gradient.addColorStop(1, 'rgba(0, 136, 204, 0.05)');
  return gradient;
}

// تنفيذ رسم بياني للأسعار
function renderPriceChart(chartId, labels, values, symbol) {
  try {
    console.log(`renderPriceChart: بدء إنشاء الرسم البياني للسهم ${symbol}...`);
    
    // التأكد من وجود الرسم البياني والبيانات
    if (!chartId || !labels || !values || labels.length === 0 || values.length === 0) {
      console.error('بيانات الرسم البياني غير كاملة', { chartId, labels: labels?.length, values: values?.length });
      return;
    }
    
    // التحقق من وجود Chart.js
    if (typeof Chart === 'undefined') {
      console.error('مكتبة Chart.js غير محملة!');
      return;
    }
    
    const chartElement = document.getElementById(chartId);
    if (!chartElement) {
      console.error(`لم يتم العثور على عنصر الرسم البياني بالمعرف: ${chartId}`);
      return;
    }
    
    // الحصول على سياق canvas
    const ctx = chartElement.getContext('2d');
    
    // تدمير أي رسم بياني موجود مسبقًا على نفس العنصر
    const existingChart = Chart.getChart(ctx.canvas);
    if (existingChart) {
      existingChart.destroy();
    }
    
    console.log(`إنشاء رسم بياني جديد مع ${values.length} نقطة بيانات`);
    
    // إنشاء الرسم البياني
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: symbol,
          data: values,
          borderColor: '#0088cc',
          backgroundColor: createGradient(ctx),
          borderWidth: 2,
          fill: true,
          pointRadius: (context) => {
            // فقط إظهار النقاط على آخر قيمة ومتى ما كان المؤشر فوقها
            return context.dataIndex === values.length - 1 ? 4 : 0;
          },
          pointHoverRadius: 6,
          pointBackgroundColor: '#0088cc',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: '#0088cc',
          pointHoverBorderWidth: 2,
          tension: 0.1 // لتنعيم المنحنى قليلاً
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        animations: {
          tension: {
            duration: 750,
            easing: 'linear' 
          },
          numbers: {
            type: 'number',
            duration: 500,
            delay: (context) => context.dataIndex * 10
          }
        },
        interaction: {
          mode: 'index',
          intersect: false
        },
        plugins: {
          legend: {
            display: true,
            position: 'top',
            rtl: true,
            labels: {
              font: {
                family: 'Arial'
              }
            }
          },
          tooltip: {
            enabled: true,
            mode: 'index',
            intersect: false,
            rtl: true,
            backgroundColor: 'rgba(255, 255, 255, 0.95)',
            titleColor: '#333',
            bodyColor: '#666',
            borderColor: '#ddd',
            borderWidth: 1,
            padding: 10,
            boxPadding: 5,
            cornerRadius: 4,
            titleFont: {
              weight: '600'
            },
            callbacks: {
              label: function(context) {
                let label = context.dataset.label || '';
                if (label) {
                  label += ': ';
                }
                label += context.parsed.y.toFixed(2);
                return label;
              }
            }
          },
          crosshair: {
            line: {
              color: '#666',
              width: 1,
              dashPattern: [5, 5]
            }
          },
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
                speed: 0.1
              },
              pinch: {
                enabled: true
              },
              mode: 'x',
              onZoomComplete: () => {
                // تحديث المقياس عند انتهاء التكبير/التصغير
                chart.update('none');
              }
            },
            pan: {
              enabled: true,
              mode: 'x',
              modifierKey: 'shift'
            }
          }
        },
        scales: {
          x: {
            grid: {
              display: false
            },
            ticks: {
              maxRotation: 0,
              autoSkip: true,
              maxTicksLimit: 10,
              font: {
                family: 'Arial'
              }
            }
          },
          y: {
            position: 'right',
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            },
            ticks: {
              font: {
                family: 'Arial'
              },
              callback: function(value) {
                return value.toFixed(2);
              }
            }
          }
        }
      }
    });

    // إضافة عناصر التحكم في التكبير/التصغير
    addZoomControls(chartId, chart);
    
    return chart;
  } catch (error) {
    console.error('حدث خطأ أثناء إنشاء الرسم البياني:', error);
  }
}

// دالة لإضافة عناصر التحكم في التكبير/التصغير
function addZoomControls(chartId, chart) {
  const container = document.getElementById(chartId).parentElement;
  const controls = document.createElement('div');
  controls.className = 'chart-zoom-controls';
  
  // زر التكبير
  const zoomIn = document.createElement('button');
  zoomIn.className = 'zoom-button';
  zoomIn.textContent = '+';
  zoomIn.title = 'تكبير';
  zoomIn.onclick = () => {
    chart.zoom(1.1);
    chart.update('none'); // تحديث سريع
  };
  
  // زر التصغير
  const zoomOut = document.createElement('button');
  zoomOut.className = 'zoom-button';
  zoomOut.textContent = '-';
  zoomOut.title = 'تصغير';
  zoomOut.onclick = () => {
    chart.zoom(0.9);
    chart.update('none');
  };
  
  // زر إعادة التعيين
  const reset = document.createElement('button');
  reset.className = 'zoom-button';
  reset.textContent = '↺';
  reset.title = 'إعادة تعيين المقياس';
  reset.onclick = () => {
    chart.resetZoom();
    chart.update('none');
  };
  
  controls.appendChild(zoomIn);
  controls.appendChild(zoomOut);
  controls.appendChild(reset);
  container.appendChild(controls);
}

// تصدير الدوال
window.ChartRenderer = {
  renderPriceChart: renderPriceChart,
  createGradient: createGradient,
  addZoomControls: addZoomControls
};