158 lines
3.8 KiB
TypeScript
158 lines
3.8 KiB
TypeScript
"use client";
|
|
import React, { Component, useEffect, useState } from "react";
|
|
import ReactApexChart from "react-apexcharts";
|
|
import dummyData from "../../../../const/dummy.json";
|
|
|
|
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,
|
|
};
|
|
}
|
|
|
|
const ApexChartColumn = (props: {
|
|
type: string;
|
|
date: string;
|
|
view: string[];
|
|
}) => {
|
|
const { date, type, view } = props;
|
|
const [categories, setCategories] = useState<string[]>([]);
|
|
const [series, setSeries] = useState<{ name: string; data: number[] }[]>([]);
|
|
const [seriesVisit, setSeriesVisit] = useState<number[]>([]);
|
|
const [seriesView, setSeriesView] = useState<number[]>([]);
|
|
const [seriesShare, setSeriesShare] = 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 temp1 = processMonthlyData(getDatas?.visit);
|
|
const temp2 = processMonthlyData(getDatas?.view);
|
|
const temp3 = processMonthlyData(getDatas?.share);
|
|
|
|
if (type == "weekly") {
|
|
setSeriesVisit(
|
|
temp1.weeks.map((list) => {
|
|
return list.total;
|
|
})
|
|
);
|
|
setSeriesView(
|
|
temp2.weeks.map((list) => {
|
|
return list.total;
|
|
})
|
|
);
|
|
setSeriesShare(
|
|
temp3.weeks.map((list) => {
|
|
return list.total;
|
|
})
|
|
);
|
|
} else {
|
|
console.log("sadadad", getDatas.visit, getDatas.view, getDatas.share);
|
|
setSeriesVisit(getDatas.visit);
|
|
setSeriesView(getDatas.view);
|
|
setSeriesShare(getDatas.share);
|
|
}
|
|
if (type === "weekly") {
|
|
const category = [];
|
|
for (let i = 1; i <= temp1.weeks.length; i++) {
|
|
category.push(`Week ${i}`);
|
|
}
|
|
setCategories(category);
|
|
}
|
|
} else {
|
|
setSeriesVisit([]);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
console.log("view", view);
|
|
const temp = [
|
|
{
|
|
name: "Visit",
|
|
data: view.includes("visit") ? seriesVisit : [],
|
|
},
|
|
{
|
|
name: "View",
|
|
data: view.includes("view") ? seriesView : [],
|
|
},
|
|
{
|
|
name: "Share",
|
|
data: view.includes("share") ? seriesShare : [],
|
|
},
|
|
];
|
|
|
|
console.log("temp", temp);
|
|
|
|
setSeries(temp);
|
|
}, [view, seriesShare, seriesView, seriesVisit]);
|
|
|
|
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 == "weekly" ? categories : [],
|
|
},
|
|
}}
|
|
series={series}
|
|
type="area"
|
|
height="100%"
|
|
/>
|
|
</div>
|
|
<div id="html-dist"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApexChartColumn;
|