diff --git a/app/layout.tsx b/app/layout.tsx index 511eb5e..a396d8a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -66,7 +66,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
{children}
 - + {/* */} ); diff --git a/components/main/dashboard/chart/column-chart.tsx b/components/main/dashboard/chart/column-chart.tsx index 400fa13..ae0efa4 100644 --- a/components/main/dashboard/chart/column-chart.tsx +++ b/components/main/dashboard/chart/column-chart.tsx @@ -97,11 +97,21 @@ const ApexChartColumn = (props: { const [seriesShare, setSeriesShare] = useState([]); const [years, setYear] = useState(""); const [datas, setDatas] = useState([]); + const [totalChart, setTotalChart] = useState({ + views: 0, + comment: 0, + share: 0, + }); useEffect(() => { initFetch(); }, [date, type, view, range]); + const counting = (data: number[]) => { + const total = data.reduce((a: number, b: number) => a + b, 0); + return total; + }; + const initFetch = async () => { const splitDate = date.split(" "); const splitDateDaily = String(range.start.year); @@ -149,6 +159,13 @@ const ApexChartColumn = (props: { setSeriesComment(getDatas.comment); setSeriesView(getDatas.view); setSeriesShare(getDatas.share); + + const totalChartNow = { + views: counting(getDatas.view), + share: counting(getDatas.share), + comment: counting(getDatas.comment), + }; + setTotalChart(totalChartNow); } if (type === "daily") { const mappedData = getRangeAcrossMonths( @@ -163,6 +180,12 @@ const ApexChartColumn = (props: { setSeriesView(mappedData.view); setSeriesShare(mappedData.share); setCategories(mappedData.labels); + const totalChartNow = { + views: counting(mappedData.view), + share: counting(mappedData.share), + comment: counting(mappedData.comment), + }; + setTotalChart(totalChartNow); } // if (type === "weekly") { // const category = []; @@ -198,7 +221,7 @@ const ApexChartColumn = (props: { }, [view, seriesShare, seriesView, seriesComment]); return ( -
+
+
+
Chart Total
+
+ {totalChart.views} {totalChart.views > 1 ? "Views" : "View"}{" "} + {totalChart.comment} {totalChart.comment > 1 ? "Comments" : "Comment"}{" "} + {totalChart.share} {totalChart.share > 1 ? "Shares" : "Share"}{" "} +
+
{" "}
); }; diff --git a/components/main/dashboard/chart/pie-chart-browser.tsx b/components/main/dashboard/chart/pie-chart-browser.tsx new file mode 100644 index 0000000..2d41765 --- /dev/null +++ b/components/main/dashboard/chart/pie-chart-browser.tsx @@ -0,0 +1,197 @@ +"use client"; + +const dummy = [ + { name: "Chrome", value: 42 }, + { name: "Firefox", value: 23 }, + { name: "Edge", value: 15 }, + { name: "Safari", value: 37 }, + { name: "Opera", value: 8 }, + { name: "Brave", value: 29 }, +]; + +interface BrowserVisitor { + browserName: string; + totalVisitor: number; +} + +import { getStatisticVisitorsBrowser } from "@/services/article"; +import { + convertDateFormatNoTime, + convertDateFormatNoTimeV2, +} from "@/utils/global"; +import { + Calendar, + Popover, + PopoverContent, + PopoverTrigger, +} from "@heroui/react"; +import { parseDate } from "@internationalized/date"; +import { Fragment, useEffect, useState } from "react"; +import ReactApexChart from "react-apexcharts"; + +export default function PieChartLoginBrowser() { + const [series, setSeries] = useState([]); + const [labels, setLabels] = useState([]); + const [data, setData] = useState([]); + const [total, setTotal] = useState(0); + const [selectedLabel, setSelectedLabel] = useState(""); + + const [visitorBrowserDate, setVisitorBrowserDate] = useState({ + startDate: parseDate( + convertDateFormatNoTimeV2( + new Date(new Date().setDate(new Date().getDate() - 7)) + ) + ), + endDate: parseDate(convertDateFormatNoTimeV2(new Date())), + }); + + useEffect(() => { + fetchData(); + }, [visitorBrowserDate.startDate, visitorBrowserDate.endDate]); + + 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 getStatisticVisitorsBrowser( + getDate(visitorBrowserDate.startDate), + getDate(visitorBrowserDate.endDate) + ); + const data: BrowserVisitor[] = res?.data?.data; + setData(data); + const label = data.map((a) => a.browserName); + const seriesNow = data.map((a) => a.totalVisitor); + const totalNow = seriesNow.reduce((a, c) => a + c, 0); + setTotal(totalNow); + setLabels(label); + setSeries(seriesNow); + }; + + const getPersentage = (value: number) => { + const count = ((value / total) * 100).toFixed(1); + return `${count}%`; + }; + + return ( +
+
+

Browser Statistics

+ +
+
+
+

Browser Statistics from

+ + + + {convertDateFormatNoTime(visitorBrowserDate.startDate)} + + + + + setVisitorBrowserDate({ + startDate: e, + endDate: visitorBrowserDate.endDate, + }) + } + maxValue={visitorBrowserDate.endDate} + /> + + +

to

+ + + + {convertDateFormatNoTime(visitorBrowserDate.endDate)} + + + + + setVisitorBrowserDate({ + startDate: visitorBrowserDate.startDate, + endDate: e, + }) + } + minValue={visitorBrowserDate.startDate} + /> + + +
+
+
+

Browser

+

Visitors

+

Persentage

+
+ + {data && + data?.map((list, index) => ( +
+

{list.browserName}

+

{list.totalVisitor}

+

{getPersentage(list.totalVisitor)}

+
+ ))} +
+
+
+ ); +} diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx index 3221174..911fa9f 100644 --- a/components/main/dashboard/dashboard-container.tsx +++ b/components/main/dashboard/dashboard-container.tsx @@ -72,6 +72,8 @@ import ApexChartColumnVisitors from "./chart/visitor-chart"; import IndonesiaMap from "@/components/ui/maps-charts"; import ApexChartDynamic from "./chart/dynamic-bar-char"; import ApexMultiLineChart from "./chart/multiline-chart"; +import PieChartLoginBrowser from "./chart/pie-chart-browser"; +import DashboardVisitorsTable from "@/components/table/dashboard-visitors-table"; type ArticleData = Article & { no: number; @@ -117,52 +119,6 @@ const months = [ "Dec", ]; -const rawData = [ - { name: "Aceh", value: 32 }, - { name: "Sumatera Utara", value: 78 }, - { name: "Sumatera Barat", value: 45 }, - { name: "Riau", value: 63 }, - { name: "Jambi", value: 21 }, - { name: "Sumatera Selatan", value: 56 }, - { name: "Bengkulu", value: 11 }, - { name: "Lampung", value: 49 }, - { name: "Kepulauan Bangka Belitung", value: 27 }, - { name: "Kepulauan Riau", value: 19 }, - { name: "DKI Jakarta", value: 97 }, - { name: "Jawa Barat", value: 84 }, - { name: "Jawa Tengah", value: 88 }, - { name: "Daerah Istimewa Yogyakarta", value: 36 }, - { name: "Jawa Timur", value: 91 }, - { name: "Banten", value: 52 }, - { name: "Bali", value: 66 }, - { name: "Nusa Tenggara Barat", value: 40 }, - { name: "Nusa Tenggara Timur", value: 59 }, - { name: "Kalimantan Barat", value: 61 }, - { name: "Kalimantan Tengah", value: 29 }, - { name: "Kalimantan Selatan", value: 71 }, - { name: "Kalimantan Timur", value: 76 }, - { name: "Kalimantan Utara", value: 18 }, - { name: "Sulawesi Utara", value: 55 }, - { name: "Sulawesi Tengah", value: 31 }, - { name: "Sulawesi Selatan", value: 80 }, - { name: "Sulawesi Tenggara", value: 34 }, - { name: "Gorontalo", value: 23 }, - { name: "Sulawesi Barat", value: 12 }, - { name: "Maluku", value: 25 }, - { name: "Maluku Utara", value: 30 }, - { name: "Papua", value: 37 }, - { name: "Papua Barat", value: 33 }, - { name: "Papua Tengah", value: 16 }, - { name: "Papua Pegunungan", value: 8 }, - { name: "Papua Selatan", value: 14 }, - { name: "Papua Barat Daya", value: 6 }, -]; - -const getTotalData: number[] = []; -rawData.map((list) => { - getTotalData.push(list.value); -}); - export default function DashboardContainer() { const { isOpen, onOpen, onOpenChange } = useDisclosure(); @@ -1137,9 +1093,13 @@ export default function DashboardContainer() {
Chart Total
-
{chartVisitorTotal}
+
+ {chartVisitorTotal} Visitors +
+ + )} diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx index 5d551c4..90c9215 100644 --- a/components/table/article-table.tsx +++ b/components/table/article-table.tsx @@ -129,14 +129,15 @@ export default function ArticleTable() { useEffect(() => { initState(); - }, [ - page, - showData, - startDateValue, - selectedCategories, - articleDate, - selectedUsers, - ]); + }, [page, showData]); + + useEffect(() => { + if (page == 1) { + initState(); + } else { + setPage(1); + } + }, [selectedCategories, selectedUsers, articleDate, startDateValue]); useEffect(() => { getCategories(); diff --git a/components/table/dashboard-visitors-table.tsx b/components/table/dashboard-visitors-table.tsx new file mode 100644 index 0000000..f0cab2e --- /dev/null +++ b/components/table/dashboard-visitors-table.tsx @@ -0,0 +1,313 @@ +"use client"; + +import { getVisitorLog } from "@/services/activity-log"; +import { + convertDateFormat, + convertDateFormatNoTime, + convertDateFormatNoTimeV2, +} from "@/utils/global"; +import { + Button, + Calendar, + Pagination, + Popover, + PopoverContent, + PopoverTrigger, + Select, + SelectItem, + Spinner, + Table, + TableBody, + TableCell, + TableColumn, + TableHeader, + TableRow, +} from "@heroui/react"; +import { Key, useCallback, useEffect, useState } from "react"; +import { parseDate } from "@internationalized/date"; +import Link from "next/link"; +import { close, loading } from "@/config/swal"; + +const columns = [ + { name: "No", uid: "no" }, + { name: "Browser", uid: "browserName" }, + { name: "Date & Time ", uid: "createdAt" }, + { name: "IP Visitors", uid: "visitorIp" }, + { name: "URL", uid: "url" }, + { name: "City", uid: "visitorCity" }, + { name: "Region", uid: "visitorRegion" }, + // { name: "Country", uid: "visitorCountry" }, +]; + +const provinces = [ + { engName: "ACEH", inName: "ACEH" }, + { engName: "NORTH SUMATRA", inName: "SUMATERA UTARA" }, + { engName: "WEST SUMATRA", inName: "SUMATERA BARAT" }, + { engName: "RIAU", inName: "RIAU" }, + { engName: "JAMBI", inName: "JAMBI" }, + { engName: "SOUTH SUMATRA", inName: "SUMATERA SELATAN" }, + { engName: "BENGKULU", inName: "BENGKULU" }, + { engName: "LAMPUNG", inName: "LAMPUNG" }, + { engName: "BANGKA BELITUNG ISLANDS", inName: "KEPULAUAN BANGKA BELITUNG" }, + { engName: "RIAU ISLANDS", inName: "KEPULAUAN RIAU" }, + { engName: "JAKARTA", inName: "DKI JAKARTA" }, + { engName: "WEST JAVA", inName: "JAWA BARAT" }, + { engName: "CENTRAL JAVA", inName: "JAWA TENGAH" }, + { engName: "YOGYAKARTA", inName: "DI YOGYAKARTA" }, + { engName: "EAST JAVA", inName: "JAWA TIMUR" }, + { engName: "BANTEN", inName: "BANTEN" }, + { engName: "BALI", inName: "BALI" }, + { engName: "WEST NUSA TENGGARA", inName: "NUSA TENGGARA BARAT" }, + { engName: "EAST NUSA TENGGARA", inName: "NUSA TENGGARA TIMUR" }, + { engName: "WEST KALIMANTAN", inName: "KALIMANTAN BARAT" }, + { engName: "CENTRAL KALIMANTAN", inName: "KALIMANTAN TENGAH" }, + { engName: "SOUTH KALIMANTAN", inName: "KALIMANTAN SELATAN" }, + { engName: "EAST KALIMANTAN", inName: "KALIMANTAN TIMUR" }, + { engName: "NORTH KALIMANTAN", inName: "KALIMANTAN UTARA" }, + { engName: "NORTH SULAWESI", inName: "SULAWESI UTARA" }, + { engName: "CENTRAL SULAWESI", inName: "SULAWESI TENGAH" }, + { engName: "SOUTH SULAWESI", inName: "SULAWESI SELATAN" }, + { engName: "SOUTHEAST SULAWESI", inName: "SULAWESI TENGGARA" }, + { engName: "GORONTALO", inName: "GORONTALO" }, + { engName: "WEST SULAWESI", inName: "SULAWESI BARAT" }, + { engName: "MALUKU", inName: "MALUKU" }, + { engName: "NORTH MALUKU", inName: "MALUKU UTARA" }, + { engName: "PAPUA", inName: "PAPUA" }, + { engName: "WEST PAPUA", inName: "PAPUA BARAT" }, + { engName: "SOUTH PAPUA", inName: "PAPUA SELATAN" }, + { engName: "CENTRAL PAPUA", inName: "PAPUA TENGAH" }, + { engName: "HIGHLAND PAPUA", inName: "PAPUA PEGUNUNGAN" }, + { engName: "SOUTHWEST PAPUA", inName: "PAPUA BARAT DAYA" }, +]; + +const findRegion = (name: string): string => { + const find = provinces.find((a) => a.engName === name); + return find ? find.inName : ""; +}; +export default function DashboardVisitorsTable() { + const [page, setPage] = useState(0); + const [totalPage, setTotalPage] = useState(1); + const [showData, setShowData] = useState("10"); + const [tableVisitorData, setTableVisitorData] = useState([]); + const [visitorBrowserDate, setVisitorBrowserDate] = useState({ + startDate: parseDate( + convertDateFormatNoTimeV2( + new Date(new Date().setDate(new Date().getDate() - 7)) + ) + ), + endDate: parseDate(convertDateFormatNoTimeV2(new Date())), + }); + useEffect(() => { + initFetch(); + }, [page, showData]); + + useEffect(() => { + if (page == 0) { + initFetch(); + } else { + setPage(0); + } + }, [visitorBrowserDate.startDate, visitorBrowserDate.endDate]); + + const initFetch = async () => { + const getDate = (data: any) => { + return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${ + data.day < 10 ? `0${data.day}` : data.day + }`; + }; + loading(); + const res = await getVisitorLog({ + page: page, + limit: showData, + startDate: getDate(visitorBrowserDate.startDate), + endDate: getDate(visitorBrowserDate.endDate), + }); + getTableNumber(Number(showData), res?.data?.data); + setTotalPage(res?.data?.meta?.totalPage); + close(); + }; + + const getTableNumber = (limit: number, data: any) => { + if (data) { + const startIndex = limit * page; + let iterate = 0; + const newData = data.map((value: any) => { + iterate++; + value.no = startIndex + iterate; + return value; + }); + setTableVisitorData(newData); + } else { + setTableVisitorData([]); + } + }; + + const renderCell = useCallback( + (visitor: any, columnKey: Key) => { + const cellValue = visitor[columnKey as keyof any]; + + switch (columnKey) { + case "url": + return ( + + {cellValue.replace("new-", "")} + + ); + case "browserName": + return ( +
+ {cellValue}{" "} + {cellValue !== null ? "Ver " + visitor.browserVersion : ""} +
+ ); + case "visitorRegion": + return ( +

+ {cellValue + ? findRegion(cellValue.toUpperCase()).toLowerCase() + : ""} +

+ ); + case "createdAt": + return

{convertDateFormat(visitor.createdAt)}

; + + default: + return cellValue; + } + }, + [tableVisitorData] + ); + return ( +
+
+

Visitors Table

+
+
+

Show Data

+ +
+
+

Start Date

+ + + + + + + + setVisitorBrowserDate({ + startDate: e, + endDate: visitorBrowserDate.endDate, + }) + } + maxValue={visitorBrowserDate.endDate} + /> + + +
+
+

End Date

+ + + + + + + + setVisitorBrowserDate({ + startDate: visitorBrowserDate.startDate, + endDate: e, + }) + } + minValue={visitorBrowserDate.startDate} + /> + + +
+
+
+ + + {(column) => ( + {column.name} + )} + + } + > + {(item: any) => ( + + {(columnKey) => ( + {renderCell(item, columnKey)} + )} + + )} + +
+
+ setPage(page)} + /> +
+
+
+
+ ); +} diff --git a/components/table/visitors-table.tsx b/components/table/visitors-table.tsx new file mode 100644 index 0000000..1e0cfef --- /dev/null +++ b/components/table/visitors-table.tsx @@ -0,0 +1,5 @@ +"use-client"; + +export default function VisitorsTable() { + return
aaa
; +} diff --git a/services/activity-log.ts b/services/activity-log.ts index 2056d6f..3f685c8 100644 --- a/services/activity-log.ts +++ b/services/activity-log.ts @@ -19,3 +19,12 @@ export async function getActivity() { const pathUrl = `/activity-logs/statistics`; return await httpGet(pathUrl, headers); } + +export async function getVisitorLog(data: any) { + const { page, limit, startDate, endDate } = data; + const headers = { "content-type": "application/json" }; + const pathUrl = `/activity-logs?purpose=visitor-summary&page=${ + page || 0 + }&limit=${limit || 10}&startDate=${startDate || ""}&endDate=${endDate || ""}`; + return await httpGet(pathUrl, headers); +} diff --git a/services/article.ts b/services/article.ts index 1aae414..6088084 100644 --- a/services/article.ts +++ b/services/article.ts @@ -226,6 +226,20 @@ export async function getStatisticForMaps(startDate: string, endDate: string) { headers ); } + +export async function getStatisticVisitorsBrowser( + startDate: string, + endDate: string +) { + const headers = { + "content-type": "application/json", + // Authorization: `Bearer ${token}`, + }; + return await httpGet( + `/activity-logs/visitors-by-browser-stats?startDate=${startDate}&endDate=${endDate}`, + headers + ); +} export async function getStatisticMonthly(year: string, timeStamp: number) { const headers = { "content-type": "application/json",