humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:dashboard chart accross year

This commit is contained in:
Rama Priyanto 2026-01-02 11:28:49 +07:00
parent 4959dbfa2e
commit 5407da9771
4 changed files with 152 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
components/main/dashboard/chart/column-chart.tsx
View File

@ -46,8 +46,10 @@ function processMonthlyData(count: number[]): {
function getRangeAcrossMonths(
data: any[],
startYear: number,
startMonth: number,
startDay: number,
endYear: number,
endMonth: number,
endDay: number
) {
@ -56,27 +58,42 @@ function getRangeAcrossMonths(
const share: number[] = [];
const labels: string[] = [];
const sortedData = data.sort((a, b) => a.month - b.month);
for (const monthData of sortedData) {
const { month, view: v, comment: c, share: s } = monthData;
const sortedData = [...data].sort(
(a, b) => a.year - b.year || a.month - b.month
);
if (month < startMonth || month > endMonth) continue;
for (const monthData of sortedData) {
const { year, month, view: v, comment: c, share: s } = monthData;
if (year < startYear || (year === startYear && month < startMonth))
continue;
if (year > endYear || (year === endYear && month > endMonth)) continue;
let startIndex = 0;
let endIndex = v.length - 1;
if (month === startMonth) startIndex = startDay - 1;
if (month === endMonth) endIndex = endDay - 1;
if (year === startYear && month === startMonth) {
startIndex = startDay - 1;
}
if (year === endYear && month === endMonth) {
endIndex = endDay - 1;
}
for (let i = startIndex; i <= endIndex; i++) {
if (v[i] == null) continue;
view.push(v[i]);
comment.push(c[i]);
share.push(s[i]);
const label = `${(i + 1).toString().padStart(2, "0")} - ${month
.toString()
.padStart(2, "0")}`;
labels.push(label);
labels.push(
`${String(i + 1).padStart(2, "0")}-${String(month).padStart(
2,
"0"
)}-${year}`
);
}
}
@ -115,20 +132,36 @@ const ApexChartColumn = (props: {
const initFetch = async () => {
const splitDate = date.split(" ");
const splitDateDaily = String(range.start.year);
const splitDateDailyEnd = String(range.end.year);
const isAccrossYear = splitDateDaily !== splitDateDailyEnd;
let data = [];
if (
(type === "monthly" && splitDate[1] === years) ||
(type === "daily" && splitDateDaily === years)
(type === "daily" && splitDateDaily === years && !isAccrossYear)
) {
data = datas;
} else {
const res = await getStatisticMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily,
getUnixTimestamp()
);
data = res?.data?.data;
setDatas(data);
if (isAccrossYear && type === "daily") {
const resStart = await getStatisticMonthly(
splitDateDaily,
getUnixTimestamp()
);
const resEnd = await getStatisticMonthly(
splitDateDailyEnd,
getUnixTimestamp()
);
data = [...resStart?.data?.data, ...resEnd?.data?.data];
setDatas(data);
} else {
const res = await getStatisticMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily,
getUnixTimestamp()
);
data = res?.data?.data;
setDatas(data);
}
}
const getDatas = data?.find(
(a: any) =>
@ -170,8 +203,10 @@ const ApexChartColumn = (props: {
if (type === "daily") {
const mappedData = getRangeAcrossMonths(
data,
range.start.year,
range.start.month,
range.start.day,
range.end.year,
range.end.month,
range.end.day
);

79
components/main/dashboard/chart/multiline-chart.tsx
View File

@ -6,53 +6,67 @@ import { getStatisticUsersMonthly } from "@/services/article";
function getRangeAcrossMonths(
data: any[],
startYear: number,
startMonth: number,
startDay: number,
endYear: number,
endMonth: number,
endDay: number
) {
const labels: string[] = [];
const users: { name: string; data: number[] }[] = [];
const sortedData = data.sort((a, b) => a.month - b.month);
console.log("sorted,data", sortedData);
const sortedData = [...data].sort(
(a, b) => a.year - b.year || a.month - b.month
);
for (const monthData of sortedData) {
const { month, user_levels: u } = monthData;
if (month < startMonth || month > endMonth) continue;
console.log("uuu", month, startMonth, endMonth, u.length);
const { year, month, user_levels: u } = monthData;
if (year < startYear || (year === startYear && month < startMonth))
continue;
if (year > endYear || (year === endYear && month > endMonth)) continue;
let startIndex = 0;
let endIndex = u[0].data.length - 1;
if (month === startMonth) startIndex = startDay - 1;
if (month === endMonth) endIndex = endDay - 1;
if (year === startYear && month === startMonth) {
startIndex = startDay - 1;
}
if (year === endYear && month === endMonth) {
endIndex = endDay - 1;
}
console.log("start,eend", startIndex, endIndex, month);
for (let j = 0; j < u.length; j++) {
const now = u[j].data;
// console.log("u.j", now);
const temp = [];
const temp: number[] = [];
for (let i = startIndex; i <= endIndex; i++) {
if (now[i] == null) continue;
temp.push(now[i]);
if (j == 0) {
const label = `${(i + 1).toString().padStart(2, "0")} - ${month
.toString()
.padStart(2, "0")}`;
labels.push(label);
if (j === 0) {
labels.push(
`${String(i + 1).padStart(2, "0")}-${String(month).padStart(
2,
"0"
)}-${year}`
);
}
}
const existing = users.find((item) => item.name === u[j].name);
if (existing) {
existing.data.push(...temp); // gabungkan data
existing.data.push(...temp);
} else {
users.push({ name: u[j].name, data: temp }); // tambahkan baru
users.push({ name: u[j].name, data: temp });
}
}
}
console.log("users", users);
return { users, labels };
}
@ -75,27 +89,38 @@ const ApexMultiLineChart = (props: {
const initFetch = async () => {
const splitDate = date.split(" ");
const splitDateDaily = String(range.start.year);
const splitDateDailyEnd = String(range.end.year);
const isAccrossYear = splitDateDaily !== splitDateDailyEnd;
let data: any = [];
if (
(type === "monthly" && splitDate[1] === years) ||
(type === "daily" && splitDateDaily === years)
(type === "daily" && splitDateDaily === years && !isAccrossYear)
) {
data = datas;
} else {
const res = await getStatisticUsersMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily
);
data = res?.data?.data;
// data = dummy.data;
setDatas(data);
if (isAccrossYear && type === "daily") {
const resStart = await getStatisticUsersMonthly(splitDateDaily);
const resEnd = await getStatisticUsersMonthly(splitDateDailyEnd);
data = [...resStart?.data?.data, ...resEnd?.data?.data];
setDatas(data);
} else {
const res = await getStatisticUsersMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily
);
data = res?.data?.data;
setDatas(data);
}
}
if (type === "daily") {
const mappedData = getRangeAcrossMonths(
data,
range.start.year,
range.start.month,
range.start.day,
range.end.year,
range.end.month,
range.end.day
);

65
components/main/dashboard/chart/visitor-chart.tsx
View File

@ -48,34 +48,49 @@ function processMonthlyData(count: number[]): {
function getRangeAcrossMonths(
data: any[],
startYear: number,
startMonth: number,
startDay: number,
endYear: 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;
const sortedData = [...data].sort(
(a, b) => a.year - b.year || a.month - b.month
);
if (month < startMonth || month > endMonth) continue;
for (const item of sortedData) {
const { year, month, data: v } = item;
if (year < startYear || (year === startYear && month < startMonth))
continue;
if (year > endYear || (year === endYear && month > endMonth)) continue;
let startIndex = 0;
let endIndex = v.length - 1;
if (month === startMonth) startIndex = startDay - 1;
if (month === endMonth) endIndex = endDay - 1;
if (year === startYear && month === startMonth) {
startIndex = startDay - 1;
}
if (year === endYear && month === endMonth) {
endIndex = endDay - 1;
}
for (let i = startIndex; i <= endIndex; i++) {
visitors.push(v[i]);
if (v[i] == null) continue;
const label = `${(i + 1).toString().padStart(2, "0")} - ${month
.toString()
.padStart(2, "0")} `;
labels.push(label);
visitors.push(v[i]);
labels.push(
`${String(i + 1).padStart(2, "0")}-${String(month).padStart(
2,
"0"
)}-${year}`
);
}
}
@ -103,20 +118,30 @@ const ApexChartColumnVisitors = (props: {
const initFetch = async () => {
const splitDate = date.split(" ");
const splitDateDaily = String(range.start.year);
const splitDateDailyEnd = String(range.end.year);
const isAccrossYear = splitDateDaily !== splitDateDailyEnd;
let data = [];
if (
(type === "monthly" && splitDate[1] === years) ||
(type === "daily" && splitDateDaily === years)
(type === "daily" && splitDateDaily === years && !isAccrossYear)
) {
data = datas;
} else {
const res = await getStatisticVisitorsMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily
);
data = res?.data?.data;
console.log("daaaa", data);
setDatas(data);
if (isAccrossYear && type === "daily") {
const resStart = await getStatisticVisitorsMonthly(splitDateDaily);
const resEnd = await getStatisticVisitorsMonthly(splitDateDailyEnd);
data = [...resStart?.data?.data, ...resEnd?.data?.data];
setDatas(data);
} else {
const res = await getStatisticVisitorsMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily
);
data = res?.data?.data;
setDatas(data);
}
}
const getDatas = data?.find(
(a: any) =>
@ -130,8 +155,10 @@ const ApexChartColumnVisitors = (props: {
if (type === "daily") {
const mappedData = getRangeAcrossMonths(
data,
range.start.year,
range.start.month,
range.start.day,
range.end.year,
range.end.month,
range.end.day
);

4
components/main/dashboard/dashboard-container.tsx
View File

@ -924,7 +924,7 @@ export default function DashboardContainer() {
<ChevronLeftIcon />
</button>
<span className="font-semibold text-center">
{year}
{usersYear}
</span>
<button
className="text-gray-500 hover:text-black"
@ -1031,7 +1031,7 @@ export default function DashboardContainer() {
<ChevronLeftIcon />
</button>
<span className="font-semibold text-center">
{year}
{visitorYear}
</span>
<button
className="text-gray-500 hover:text-black"