feat:users & maps api

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

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import ReactApexChart from "react-apexcharts";
 import dummy from "../../../../const/dummy.json";
+import { getStatisticUsersMonthly } from "@/services/article";
 
 function getRangeAcrossMonths(
   data: any[],
@@ -85,10 +86,11 @@ const ApexMultiLineChart = (props: {
     ) {
       data = datas;
     } else {
-      //   const res = await getStatisticMonthly(
+      const res = await getStatisticUsersMonthly(
-      //     type === "monthly" ? splitDate[1] : splitDateDaily
+        type === "monthly" ? splitDate[1] : splitDateDaily
-      //   );
+      );
-      //   data = res?.data?.data;
+      console.log("fetch", res?.data?.data);
+      data = res?.data?.data;
       data = dummy.data;
       setDatas(data);
     }

components/main/dashboard/dashboard-container.tsx

@@ -223,7 +223,11 @@ export default function DashboardContainer() {
   const [year, setYear] = useState(today.getFullYear());
   const [selectedMonth, setSelectedMonth] = useState<Date | null>(today);
   const [viewsDailyDate, setViewsDailyDate] = useState({
-    start: parseDate(convertDateFormatNoTimeV2(today)),
+    start: parseDate(
+      convertDateFormatNoTimeV2(
+        new Date(new Date().setDate(new Date().getDate() - 7))
+      )
+    ),
     end: parseDate(convertDateFormatNoTimeV2(today)),
   });
 
@@ -235,7 +239,7 @@ export default function DashboardContainer() {
   const [visitorDailyDate, setVisitorDailyDate] = useState({
     start: parseDate(
       convertDateFormatNoTimeV2(
-        new Date(new Date().setDate(new Date().getDate() - 30))
+        new Date(new Date().setDate(new Date().getDate() - 7))
       )
     ),
     end: parseDate(convertDateFormatNoTimeV2(today)),
@@ -249,7 +253,7 @@ export default function DashboardContainer() {
   const [usersDailyDate, setUsersDailyDate] = useState({
     start: parseDate(
       convertDateFormatNoTimeV2(
-        new Date(new Date().setDate(new Date().getDate() - 30))
+        new Date(new Date().setDate(new Date().getDate() - 7))
       )
     ),
     end: parseDate(convertDateFormatNoTimeV2(today)),

components/ui/maps-charts.tsx

@@ -1,6 +1,14 @@
 import React, { useEffect, useRef, useState } from "react";
 import * as echarts from "echarts";
 import indonesiaGeo from "../../public/assets/geo/indonesia.json";
+import { getStatisticForMaps } from "@/services/article";
+import { convertDateFormatNoTimeV2 } from "@/utils/global";
+import {
+  parseDate,
+  getLocalTimeZone,
+  parseZonedDateTime,
+  parseAbsoluteToLocal,
+} from "@internationalized/date";
 
 const IndonesiaMap = (props: { data: any }) => {
   const chartRef = useRef<HTMLDivElement>(null);
@@ -9,6 +17,39 @@ const IndonesiaMap = (props: { data: any }) => {
 
   const selectedProvinceRef = useRef<string | null>(null);
   const chartOptionRef = useRef<any>(null);
+  const today = new Date();
+
+  const [typeDate, setTypeDate] = useState("daily");
+  const [year, setYear] = useState(today.getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState<Date | null>(today);
+  const [viewsDailyDate, setViewsDailyDate] = useState({
+    start: parseDate(
+      convertDateFormatNoTimeV2(
+        new Date(new Date().setDate(new Date().getDate() - 7))
+      )
+    ),
+    end: parseDate(convertDateFormatNoTimeV2(today)),
+  });
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    const getDate = (data: any) => {
+      return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
+        data.day < 10 ? `0${data.day}` : data.day
+      }`;
+    };
+
+    const res = await getStatisticForMaps(
+      getDate(viewsDailyDate.start),
+      getDate(viewsDailyDate.end)
+    );
+    setData(res?.data?.data);
+  };
 
   const option = {
     backgroundColor: "#d3d3d3",
@@ -50,7 +91,7 @@ const IndonesiaMap = (props: { data: any }) => {
             areaColor: "#ffcccc",
           },
         },
-        data: props.data,
+        data: data,
       },
     ],
   };

services/article.ts

@@ -215,6 +215,17 @@ export async function getUserLevelDataStat(
     }`
   );
 }
+
+export async function getStatisticForMaps(startDate: string, endDate: string) {
+  const headers = {
+    "content-type": "application/json",
+    // Authorization: `Bearer ${token}`,
+  };
+  return await httpGet(
+    `/activity-logs/visitors-by-reesgion-stats?startDate=${startDate}&endDate=${endDate}`,
+    headers
+  );
+}
 export async function getStatisticMonthly(year: string) {
   const headers = {
     "content-type": "application/json",
@@ -222,6 +233,16 @@ export async function getStatisticMonthly(year: string) {
   };
   return await httpGet(`/articles/statistic/monthly?year=${year}`, headers);
 }
+export async function getStatisticUsersMonthly(year: string) {
+  const headers = {
+    "content-type": "application/json",
+    Authorization: `Bearer ${token}`,
+  };
+  return await httpGet(
+    `/articles/statistic/monthly-per-user-level?year=${year}`,
+    headers
+  );
+}
 export async function getStatisticMonthlyFeedback(year: string) {
   const headers = {
     "content-type": "application/json",