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

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

type WeekData = {
  week: number; // Minggu ke-
  days: number[]; // Data jumlah view per hari dalam minggu tersebut
  total: number; // Total jumlah view dalam minggu tersebut
};

// Struktur untuk sisa hari
type RemainingDays = {
  days: number[]; // Data jumlah view untuk sisa hari
  total: number; // Total jumlah view untuk sisa hari
};

// Struktur data per bulan setelah diolah
type ProcessedMonthlyData = {
  id: string; // ID bulan
  month: string; // Nama bulan
  weeks: WeekData[]; // Data per minggu
  remaining_days: RemainingDays; // Data sisa hari
};

// Struktur data input awal
type MonthlyDataInput = {
  id: string; // ID bulan
  month: string; // Nama bulan
  count: number[]; // Jumlah view per hari selama 1 bulan
};

// Struktur array data awal
type MonthlyDataInputArray = MonthlyDataInput[];

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

  // Kelompokkan data per 7 hari (minggu)
  for (let i = 0; i < count.length; i += 7) {
    const weekData = count.slice(i, i + 7); // Ambil 7 hari
    weeks.push({
      week: weekIndex,
      days: weekData,
      total: weekData.reduce((sum, day) => sum + day, 0), // Total view per minggu
    });
    weekIndex++;
  }

  // Cek sisa hari
  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,
  };
}

const ApexChartColumn = (props: { type: string; date: string }) => {
  const { date, type } = props;
  const [categories, setCategories] = useState<string[]>([]);
  const [series, setSeries] = useState<number[]>([]);

  useEffect(() => {
    initFetch();
  }, [props]);

  const initFetch = async () => {
    const res = dummyData?.data;
    const splitDate = date.split(" ");
    const getDatas = res?.find(
      (a) => a.month == splitDate[0] && a.year === splitDate[1]
    );
    if (getDatas) {
      const temp = processMonthlyData(getDatas?.count);
      setSeries(
        temp.weeks.map((list) => {
          return list.total;
        })
      );
      if (type == "weekly") {
      } else {
        setSeries(getDatas.count);
      }
      if (type === "weekly") {
        const category = [];
        for (let i = 1; i <= temp.weeks.length; i++) {
          category.push(`Week ${i}`);
        }
        setCategories(category);
      }
    } else {
      setSeries([]);
    }
  };

  const [state, setState] = useState({
    series: [
      {
        name: "Visit",
        data: [
          15, 23, 19, 14, 18, 20, 22, 17, 21, 19, 23, 16, 25, 20, 18, 19, 22,
          24, 15, 18, 21, 26, 28, 23, 17, 20, 19, 22,
        ],
      },
    ],
    options: {
      chart: {
        height: 350,
        type: "line",
        zoom: {
          enabled: false,
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: "straight",
      },

      grid: {
        row: {
          colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
          opacity: 0.5,
        },
      },
    },
  });

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={{
            chart: {
              height: 350,
              type: "line",
              zoom: {
                enabled: false,
              },
            },
            xaxis: {
              categories: type == "weekly" ? categories : [],
            },
          }}
          series={[
            {
              name: "Visit",
              data: series,
            },
          ]}
          type="line"
          height={350}
        />
      </div>
      <div id="html-dist"></div>
    </div>
  );
};

export default ApexChartColumn;