PNG %k25u25%fgd5n!
/home/mkuwqnjx/palaknaturals.com/wp-content/plugins/echo-rewards/react-app/components/ChartLine.jsx
import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const ChartLine = ({ activeReportTab, reportsData, timeRange }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    // Define series names and keys dynamically
    let seriesOneName = '';
    let seriesTwoName = '';
    let seriesOneKey = '';
    let seriesTwoKey = '';

    switch (activeReportTab) {
      case 'total_discount_coupons':
        seriesOneName = 'Discount with Referral Coupon';
        seriesTwoName = 'Total Discount';
        seriesOneKey = 'total_discount_with_referral';
        seriesTwoKey = 'total_discount';
        break;

      case 'total_sales_coupons':
        seriesOneName = 'Sales with Referral Coupon';
        seriesTwoName = 'Total Sales';
        seriesOneKey = 'total_sales_with_referral';
        seriesTwoKey = 'total_sales';
        break;

      default:
        console.warn('Invalid activeReportTab value:', activeReportTab);
        return;
    }

    // Process chart data
    const chartData = reportsData.chart_data || [];
    if (!chartData.length) {
      console.warn('No chart data available.');
      return;
    }

    // Handle timeRange-based transformations
    const monthShortNames = [
      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
    ];

    const monthFullNames = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December',
    ];

    let xAxisData = [];
    if (timeRange === 'echo_range_year') {
      xAxisData = chartData.map((item) => {
        const [, month] = item.order_date.split('-');
        return monthShortNames[parseInt(month, 10) - 1];
      });
    } else {
      xAxisData = chartData.map((item) => item.order_date);
    }

    const seriesOneData = chartData.map((item) => parseFloat(item[seriesOneKey] || 0));
    const seriesTwoData = chartData.map((item) => parseFloat(item[seriesTwoKey] || 0));

    const maxLabels = 15;
    const interval = Math.ceil(xAxisData.length / maxLabels);

    // Initialize chart
    const chartDom = chartRef.current;
    const myChart = echarts.init(chartDom);

    const option = {
      color: ['#F97316', '#3B82F6'],
      legend: {
        bottom: '0',
        itemWidth: 14,
      },
      grid: {
        top: '30px',
        bottom: '100px',
      },
      tooltip: {
        trigger: 'axis',
        formatter: timeRange === 'echo_range_year'
          ? function (params) {
              const axisValue = params[0].axisValue; // Short month name
              const monthIndex = monthShortNames.indexOf(axisValue);
              const fullMonthName = monthFullNames[monthIndex];
    
              let content = `<strong>${fullMonthName}</strong><br>`;
              params.forEach((item) => {
                content += `
                  <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${item.color};"></span>
                  ${item.seriesName}: <strong>${item.value}</strong><br>
                `;
              });
              return content;
            }
          : undefined, // Default formatter or no formatter for other cases
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
          interval: interval - 1,
          rotate: 45,
        },
      },
      yAxis: {
        type: 'value',
        axisLine: { show: false },
      },
      series: [
        {
          name: seriesOneName,
          type: 'line',
          smooth: true,
          data: seriesOneData,
        },
        {
          name: seriesTwoName,
          type: 'line',
          smooth: true,
          data: seriesTwoData,
        },
      ],
    };

    myChart.setOption(option);

    // Handle resize
    const handleResize = () => myChart.resize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      myChart.dispose();
    };
  }, [activeReportTab, reportsData, timeRange]);

  return (
    <div className="ecre-bg-white ecre-rounded-lg ecre-pb-4">
      <div ref={chartRef} className="ecre-w-full ecre-h-[400px] sm:ecre-h-[500px]"></div>
    </div>
  );
};

export default ChartLine;
Path: home/mkuwqnjx/palaknaturals.com/wp-content/plugins/echo-rewards/react-app/components