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

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

  useEffect(() => {
    if (!reportsData || !reportsData.chart_data || reportsData.chart_data.length === 0) {
      console.warn('No chart data available.');
      return;
    }

    const chartData = reportsData.chart_data;

    // Process data for the chart
    let xAxisData = [];
    let seriesData = [];

    if (timeRange === 'echo_range_year') {
      // Group data by month for yearly range
      const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      const monthlyData = {};

      chartData.forEach(item => {
        const [, month] = item.order_date.split('-');
        const monthName = monthNames[parseInt(month, 10) - 1];
        monthlyData[monthName] = (monthlyData[monthName] || 0) + parseInt(item.referral_order_count || 0);
      });

      xAxisData = Object.keys(monthlyData);
      seriesData = Object.values(monthlyData);
    } else {
      // Use raw dates for other time ranges
      xAxisData = chartData.map(item => item.order_date);
      seriesData = chartData.map(item => parseInt(item.referral_order_count || 0));
    }

    // Calculate label interval for better visibility
    const maxLabels = 15;
    const interval = Math.ceil(xAxisData.length / maxLabels);

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

    const option = {
      color: ['#0080FF'],
      legend: {
        bottom: '0',
        itemWidth: 14,
      },
      grid: {
        top: '30px',
        bottom: '100px',
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          let axisValue = params[0].axisValue;
          let fullLabel = axisValue;

          // If yearly range, expand month names
          if (timeRange === 'echo_range_year') {
            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'];

            const monthIndex = monthShortNames.indexOf(axisValue);
            if (monthIndex >= 0) {
              fullLabel = monthFullNames[monthIndex];
            }
          }

          return `
            <strong>${fullLabel}</strong><br>
            ${params[0].marker} ${params[0].seriesName}: <strong>${params[0].value}</strong>
          `;
        },
      },
      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: 'Referral Orders',
          type: 'bar',
          data: seriesData,
          barWidth: '50%',
        },
      ],
    };

    myChart.setOption(option);

    // Resize chart on window resize
    const handleResize = () => {
      myChart.resize();
    };
    window.addEventListener('resize', handleResize);

    // Clean up on component unmount
    return () => {
      window.removeEventListener('resize', handleResize);
      myChart.dispose();
    };
  }, [timeRange, reportsData]);

  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 ChartBar;
Path: home/mkuwqnjx/palaknaturals.com/wp-content/plugins/echo-rewards/react-app/components