From 5407da97710a9a2bfed078d80fabb01d4e9bbc97 Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Fri, 2 Jan 2026 11:28:49 +0700 Subject: [PATCH] fix:dashboard chart accross year --- .../main/dashboard/chart/column-chart.tsx | 69 ++++++++++++---- .../main/dashboard/chart/multiline-chart.tsx | 79 ++++++++++++------- .../main/dashboard/chart/visitor-chart.tsx | 65 ++++++++++----- .../main/dashboard/dashboard-container.tsx | 4 +- 4 files changed, 152 insertions(+), 65 deletions(-) diff --git a/components/main/dashboard/chart/column-chart.tsx b/components/main/dashboard/chart/column-chart.tsx index ae0efa4..cf62f58 100644 --- a/components/main/dashboard/chart/column-chart.tsx +++ b/components/main/dashboard/chart/column-chart.tsx @@ -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 ); diff --git a/components/main/dashboard/chart/multiline-chart.tsx b/components/main/dashboard/chart/multiline-chart.tsx index aa139a6..08a32e9 100644 --- a/components/main/dashboard/chart/multiline-chart.tsx +++ b/components/main/dashboard/chart/multiline-chart.tsx @@ -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 ); diff --git a/components/main/dashboard/chart/visitor-chart.tsx b/components/main/dashboard/chart/visitor-chart.tsx index 26a6738..478449a 100644 --- a/components/main/dashboard/chart/visitor-chart.tsx +++ b/components/main/dashboard/chart/visitor-chart.tsx @@ -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 ); diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx index 5739349..1c8a65c 100644 --- a/components/main/dashboard/dashboard-container.tsx +++ b/components/main/dashboard/dashboard-container.tsx @@ -924,7 +924,7 @@ export default function DashboardContainer() { - {year} + {usersYear} - {year} + {visitorYear}