feat:visitors analytics

components/main/dashboard/chart/visitor-chart.tsx

@@ -2,7 +2,10 @@
 import React, { Component, useEffect, useState } from "react";
 import ReactApexChart from "react-apexcharts";
 import dummyData from "../../../../const/dummy.json";
-import { getStatisticMonthly } from "@/services/article";
+import {
+  getStatisticMonthly,
+  getStatisticVisitorsMonthly,
+} from "@/services/article";
 
 type WeekData = {
   week: number;
@@ -50,14 +53,13 @@ function getRangeAcrossMonths(
   endMonth: number,
   endDay: number
 ) {
-  const view: number[] = [];
-  const comment: number[] = [];
-  const share: number[] = [];
+  const visitors: 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 { month, data: v } = monthData;
 
     if (month < startMonth || month > endMonth) continue;
 
@@ -68,9 +70,7 @@ function getRangeAcrossMonths(
     if (month === endMonth) endIndex = endDay - 1;
 
     for (let i = startIndex; i <= endIndex; i++) {
-      view.push(v[i]);
-      comment.push(c[i]);
-      share.push(s[i]);
+      visitors.push(v[i]);
 
       const label = `${(i + 1).toString().padStart(2, "0")} - ${month
         .toString()
@@ -79,27 +79,25 @@ function getRangeAcrossMonths(
     }
   }
 
-  return { view, comment, share, labels };
+  return { visitors, labels };
 }
 
 const ApexChartColumnVisitors = (props: {
   type: string;
   date: string;
-  view: string[];
   range: { start: any; end: any };
 }) => {
-  const { date, type, view, range } = props;
+  const { date, type, range } = 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[]>([]);
+  const [seriesVisitors, setSeriesVisitors] = useState<number[]>([]);
+
   const [years, setYear] = useState("");
   const [datas, setDatas] = useState<any>([]);
 
   useEffect(() => {
     initFetch();
-  }, [date, type, view, range]);
+  }, [date, type, range]);
 
   const initFetch = async () => {
     const splitDate = date.split(" ");
@@ -112,10 +110,11 @@ const ApexChartColumnVisitors = (props: {
     ) {
       data = datas;
     } else {
-      const res = await getStatisticMonthly(
+      const res = await getStatisticVisitorsMonthly(
         type === "monthly" ? splitDate[1] : splitDateDaily
       );
       data = res?.data?.data;
+      console.log("daaaa", data);
       setDatas(data);
     }
     const getDatas = data?.find(
@@ -123,30 +122,8 @@ const ApexChartColumnVisitors = (props: {
         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 == "monthly") {
+        setSeriesVisitors(getDatas.data);
       }
       if (type === "daily") {
         const mappedData = getRangeAcrossMonths(
@@ -157,9 +134,7 @@ const ApexChartColumnVisitors = (props: {
           range.end.day
         );
 
-        setSeriesComment(mappedData.comment);
-        setSeriesView(mappedData.view);
-        setSeriesShare(mappedData.share);
+        setSeriesVisitors(mappedData.visitors);
         setCategories(mappedData.labels);
       }
       // if (type === "weekly") {
@@ -170,7 +145,7 @@ const ApexChartColumnVisitors = (props: {
       //   setCategories(category);
       // }
     } else {
-      setSeriesComment([]);
+      setSeriesVisitors([]);
     }
 
     setYear(type === "monthly" ? splitDate[1] : splitDateDaily);
@@ -180,12 +155,12 @@ const ApexChartColumnVisitors = (props: {
     const temp = [
       {
         name: "Visitors",
-        data: view.includes("visitor") ? seriesView : [],
+        data: seriesVisitors || [],
       },
     ];
 
     setSeries(temp);
-  }, [view, seriesShare, seriesView, seriesComment]);
+  }, [seriesVisitors]);
 
   return (
     <div className="h-full">

components/main/dashboard/dashboard-container.tsx

@@ -1122,7 +1122,6 @@ export default function DashboardContainer() {
                         String(visitorSelectedMonth)
                       ).split("-")[0]
                     }`}
-                    view={["visitor"]}
                     range={visitorDailyDate}
                   />
                 </div>

services/article.ts

@@ -233,6 +233,16 @@ export async function getStatisticMonthly(year: string) {
   };
   return await httpGet(`/articles/statistic/monthly?year=${year}`, headers);
 }
+export async function getStatisticVisitorsMonthly(year: string) {
+  const headers = {
+    "content-type": "application/json",
+    Authorization: `Bearer ${token}`,
+  };
+  return await httpGet(
+    `/activity-logs/visitors-monthly-stats?year=${year}`,
+    headers
+  );
+}
 export async function getStatisticUsersMonthly(year: string) {
   const headers = {
     "content-type": "application/json",