web-humas-fe/components/main/dashboard/chart/visitor-chart.tsx

"use client";
import React, { Component, useEffect, useState } from "react";
import ReactApexChart from "react-apexcharts";
import dummyData from "../../../../const/dummy.json";
import {
  getStatisticMonthly,
  getStatisticVisitorsMonthly,
} from "@/services/article";

type WeekData = {
  week: number;
  days: number[];
  total: number;
};

type RemainingDays = {
  days: number[];
  total: number;
};

function processMonthlyData(count: number[]): {
  weeks: WeekData[];
  remaining_days: RemainingDays;
} {
  const weeks: WeekData[] = [];
  let weekIndex = 1;

  for (let i = 0; i < count.length; i += 7) {
    const weekData = count.slice(i, i + 7);
    weeks.push({
      week: weekIndex,
      days: weekData,
      total: weekData.reduce((sum, day) => sum + day, 0),
    });
    weekIndex++;
  }

  const remainingDays: RemainingDays = {
    days: count.length % 7 === 0 ? [] : count.slice(-count.length % 7),
    total: count.slice(-count.length % 7).reduce((sum, day) => sum + day, 0),
  };

  return {
    weeks,
    remaining_days: remainingDays,
  };
}

function getRangeAcrossMonths(
  data: any[],
  startMonth: number,
  startDay: number,
  endMonth: number,
  endDay: number
) {
  const visitors: number[] = [];

  const labels: string[] = [];

  const sortedData = data.sort((a, b) => a.month - b.month);
  for (const monthData of sortedData) {
    const { month, data: v } = monthData;

    if (month < startMonth || month > endMonth) continue;

    let startIndex = 0;
    let endIndex = v.length - 1;

    if (month === startMonth) startIndex = startDay - 1;
    if (month === endMonth) endIndex = endDay - 1;

    for (let i = startIndex; i <= endIndex; i++) {
      visitors.push(v[i]);

      const label = `${(i + 1).toString().padStart(2, "0")} - ${month
        .toString()
        .padStart(2, "0")} `;
      labels.push(label);
    }
  }

  return { visitors, labels };
}

const ApexChartColumnVisitors = (props: {
  type: string;
  date: string;
  range: { start: any; end: any };
}) => {
  const { date, type, range } = props;
  const [categories, setCategories] = useState<string[]>([]);
  const [series, setSeries] = useState<{ name: string; data: number[] }[]>([]);
  const [seriesVisitors, setSeriesVisitors] = useState<number[]>([]);

  const [years, setYear] = useState("");
  const [datas, setDatas] = useState<any>([]);

  useEffect(() => {
    initFetch();
  }, [date, type, range]);

  const initFetch = async () => {
    const splitDate = date.split(" ");
    const splitDateDaily = String(range.start.year);
    let data = [];

    if (
      (type === "monthly" && splitDate[1] === years) ||
      (type === "daily" && splitDateDaily === years)
    ) {
      data = datas;
    } else {
      const res = await getStatisticVisitorsMonthly(
        type === "monthly" ? splitDate[1] : splitDateDaily
      );
      data = res?.data?.data;
      console.log("daaaa", data);
      setDatas(data);
    }
    const getDatas = data?.find(
      (a: any) =>
        a.month == Number(splitDate[0]) && a.year === Number(splitDate[1])
    );
    if (getDatas) {
      if (type == "monthly") {
        setSeriesVisitors(getDatas.data);
      }
      if (type === "daily") {
        const mappedData = getRangeAcrossMonths(
          data,
          range.start.month,
          range.start.day,
          range.end.month,
          range.end.day
        );

        setSeriesVisitors(mappedData.visitors);
        setCategories(mappedData.labels);
      }
      // if (type === "weekly") {
      //   const category = [];
      //   for (let i = 1; i <= temp1.weeks.length; i++) {
      //     category.push(`Week ${i}`);
      //   }
      //   setCategories(category);
      // }
    } else {
      setSeriesVisitors([]);
    }

    setYear(type === "monthly" ? splitDate[1] : splitDateDaily);
  };

  useEffect(() => {
    const temp = [
      {
        name: "Visitors",
        data: seriesVisitors || [],
      },
    ];

    setSeries(temp);
  }, [seriesVisitors]);

  return (
    <div className="h-full">
      <div id="chart" className="h-full">
        <ReactApexChart
          options={{
            chart: {
              height: "100%",
              type: "area",
            },
            stroke: {
              curve: "smooth",
            },
            dataLabels: {
              enabled: false,
            },
            xaxis: {
              categories: type == "daily" ? categories : [],
            },
          }}
          series={series}
          type="area"
          height="100%"
        />
      </div>
      <div id="html-dist"></div>
    </div>
  );
};

export default ApexChartColumnVisitors;