158 lines
3.8 KiB
TypeScript
158 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
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 [seriesComment, setSeriesComment] = useState<number[]>([]);
|
|
const [seriesView, setSeriesView] = useState<number[]>([]);
|
|
const [seriesShare, setSeriesShare] = useState<number[]>([]);
|
|
|
|
// useEffect(() => {
|
|
// initFetch();
|
|
// }, [date, type, view]);
|
|
|
|
// const initFetch = async () => {
|
|
// const splitDate = date.split(" ");
|
|
|
|
// const res = await getStatisticMonthly(splitDate[1]);
|
|
// const data = res?.data?.data;
|
|
// const getDatas = data?.find(
|
|
// (a: any) =>
|
|
// a.month == Number(splitDate[0]) && a.year === Number(splitDate[1])
|
|
// );
|
|
// if (getDatas) {
|
|
// const temp1 = processMonthlyData(getDatas?.comment);
|
|
// const temp2 = processMonthlyData(getDatas?.view);
|
|
// const temp3 = processMonthlyData(getDatas?.share);
|
|
|
|
// if (type == "weekly") {
|
|
// setSeriesComment(
|
|
// temp1.weeks.map((list) => {
|
|
// return list.total;
|
|
// })
|
|
// );
|
|
// setSeriesView(
|
|
// temp2.weeks.map((list) => {
|
|
// return list.total;
|
|
// })
|
|
// );
|
|
// setSeriesShare(
|
|
// temp3.weeks.map((list) => {
|
|
// return list.total;
|
|
// })
|
|
// );
|
|
// } else {
|
|
// setSeriesComment(getDatas.comment);
|
|
// 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 {
|
|
// setSeriesComment([]);
|
|
// }
|
|
// };
|
|
|
|
useEffect(() => {
|
|
const temp = [
|
|
{
|
|
name: "Comment",
|
|
data: view.includes("comment") ? seriesComment : [],
|
|
},
|
|
{
|
|
name: "View",
|
|
data: view.includes("view") ? seriesView : [],
|
|
},
|
|
{
|
|
name: "Share",
|
|
data: view.includes("share") ? seriesShare : [],
|
|
},
|
|
];
|
|
|
|
console.log("temp", temp);
|
|
|
|
setSeries(temp);
|
|
}, [view, seriesShare, seriesView, seriesComment]);
|
|
|
|
return (
|
|
<div className="h-full">
|
|
<div id="chart" className="h-full">
|
|
{/* <SafeReactApexChart
|
|
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;
|