fix:dashboard chart accross year

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);
+  const sortedData = [...data].sort(
-  for (const monthData of sortedData) {
+    (a, b) => a.year - b.year || a.month - b.month
-    const { month, view: v, comment: c, share: s } = monthData;
+  );
 
-    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 (year === startYear && month === startMonth) {
-    if (month === endMonth) endIndex = endDay - 1;
+      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
+      labels.push(
-        .toString()
+        `${String(i + 1).padStart(2, "0")}-${String(month).padStart(
-        .padStart(2, "0")}`;
+          2,
-      labels.push(label);
+          "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(
+      if (isAccrossYear && type === "daily") {
-        type === "monthly" ? splitDate[1] : splitDateDaily,
+        const resStart = await getStatisticMonthly(
-        getUnixTimestamp()
+          splitDateDaily,
-      );
+          getUnixTimestamp()
-      data = res?.data?.data;
+        );
-      setDatas(data);
+        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
         );

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;
+    const { year, month, user_levels: u } = monthData;
-    if (month < startMonth || month > endMonth) continue;
+
-    console.log("uuu", month, startMonth, endMonth, u.length);
+    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 (year === startYear && month === startMonth) {
-    if (month === endMonth) endIndex = endDay - 1;
+      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: number[] = [];
-      const temp = [];
+
       for (let i = startIndex; i <= endIndex; i++) {
+        if (now[i] == null) continue;
+
         temp.push(now[i]);
 
-        if (j == 0) {
+        if (j === 0) {
-          const label = `${(i + 1).toString().padStart(2, "0")} - ${month
+          labels.push(
-            .toString()
+            `${String(i + 1).padStart(2, "0")}-${String(month).padStart(
-            .padStart(2, "0")}`;
+              2,
-
+              "0"
-          labels.push(label);
+            )}-${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(
+      if (isAccrossYear && type === "daily") {
-        type === "monthly" ? splitDate[1] : splitDateDaily
+        const resStart = await getStatisticUsersMonthly(splitDateDaily);
-      );
+        const resEnd = await getStatisticUsersMonthly(splitDateDailyEnd);
-      data = res?.data?.data;
+        data = [...resStart?.data?.data, ...resEnd?.data?.data];
-      // data = dummy.data;
+        setDatas(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
       );

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);
+  const sortedData = [...data].sort(
-  for (const monthData of sortedData) {
+    (a, b) => a.year - b.year || a.month - b.month
-    const { month, data: v } = monthData;
+  );
 
-    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 (year === startYear && month === startMonth) {
-    if (month === endMonth) endIndex = endDay - 1;
+      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
+      visitors.push(v[i]);
-        .toString()
+      labels.push(
-        .padStart(2, "0")} `;
+        `${String(i + 1).padStart(2, "0")}-${String(month).padStart(
-      labels.push(label);
+          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(
+      if (isAccrossYear && type === "daily") {
-        type === "monthly" ? splitDate[1] : splitDateDaily
+        const resStart = await getStatisticVisitorsMonthly(splitDateDaily);
-      );
+        const resEnd = await getStatisticVisitorsMonthly(splitDateDailyEnd);
-      data = res?.data?.data;
+        data = [...resStart?.data?.data, ...resEnd?.data?.data];
-      console.log("daaaa", data);
+        setDatas(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
         );

components/main/dashboard/dashboard-container.tsx

@@ -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"