humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:new analytics dashboard

This commit is contained in:
Rama Priyanto 2025-06-29 20:01:49 +07:00
parent 2717a7530d 877f2170e4
commit c82b3dfc21
15 changed files with 44237 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
components/main/dashboard/chart/column-chart.tsx
View File

@ -44,27 +44,82 @@ function processMonthlyData(count: number[]): {
};
}
function getRangeAcrossMonths(
data: any[],
startMonth: number,
startDay: number,
endMonth: number,
endDay: number
) {
const view: number[] = [];
const comment: number[] = [];
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;
if (month < startMonth || month > endMonth) continue;
let startIndex = 0;
let endIndex = v.length - 1;
if (month === startMonth) startIndex = startDay - 1;
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]);
const label = `${(i + 1).toString().padStart(2, "0")} - ${month
.toString()
.padStart(2, "0")}`;
labels.push(label);
}
}
return { view, comment, share, labels };
}
const ApexChartColumn = (props: {
type: string;
date: string;
view: string[];
range: { start: any; end: any };
}) => {
const { date, type, view } = props;
const { date, type, view, 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 [years, setYear] = useState("");
const [datas, setDatas] = useState<any>([]);
useEffect(() => {
initFetch();
}, [date, type, view]);
}, [date, type, view, range]);
const initFetch = async () => {
const splitDate = date.split(" ");
const splitDateDaily = String(range.start.year);
let data = [];
const res = await getStatisticMonthly(splitDate[1], getUnixTimestamp());
const data = res?.data?.data;
if (
(type === "monthly" && splitDate[1] === years) ||
(type === "daily" && splitDateDaily === years)
) {
data = datas;
} else {
const res = await getStatisticMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily,
getUnixTimestamp()
);
data = res?.data?.data;
setDatas(data);
}
const getDatas = data?.find(
(a: any) =>
a.month == Number(splitDate[0]) && a.year === Number(splitDate[1])
@ -95,16 +150,32 @@ const ApexChartColumn = (props: {
setSeriesView(getDatas.view);
setSeriesShare(getDatas.share);
}
if (type === "weekly") {
const category = [];
for (let i = 1; i <= temp1.weeks.length; i++) {
category.push(`Week ${i}`);
}
setCategories(category);
if (type === "daily") {
const mappedData = getRangeAcrossMonths(
data,
range.start.month,
range.start.day,
range.end.month,
range.end.day
);
setSeriesComment(mappedData.comment);
setSeriesView(mappedData.view);
setSeriesShare(mappedData.share);
setCategories(mappedData.labels);
}
// if (type === "weekly") {
// const category = [];
// for (let i = 1; i <= temp1.weeks.length; i++) {
// category.push(`Week ${i}`);
// }
// setCategories(category);
// }
} else {
setSeriesComment([]);
}
setYear(type === "monthly" ? splitDate[1] : splitDateDaily);
};
useEffect(() => {
@ -142,7 +213,7 @@ const ApexChartColumn = (props: {
enabled: false,
},
xaxis: {
categories: type == "weekly" ? categories : [],
categories: type == "daily" ? categories : [],
},
}}
series={series}

369
components/main/dashboard/chart/dynamic-bar-char.tsx Normal file
View File

@ -0,0 +1,369 @@
import React, { useState, useCallback, useEffect, useRef } from "react";
import ReactApexChart from "react-apexcharts";
import ApexCharts from "apexcharts";
import { init } from "next/dist/compiled/webpack/webpack";
const wilayah = ["sumut", "bali", "jateng", "jabar", "metro", "papua", "riau"];
type TypeItem = {
year: number;
month: number;
user: {
list: { name: string; count: number }[];
}[];
};
interface MappedData {
result: { x: string; y: number }[] | [];
details: { name: string; count: number }[][];
}
const generateDummyData = () => {
const getDaysInMonth = (year: number, month: number) => {
return new Date(year, month, 0).getDate();
};
const dummy = [];
for (let month = 1; month <= 7; month++) {
const userData = [];
const daysInMonth = getDaysInMonth(2025, month);
for (let day = 1; day <= daysInMonth; day++) {
// Buat 2-4 wilayah acak per hari
const regionCount = Math.floor(Math.random() * 3) + 2;
const usedRegions = wilayah
.sort(() => 0.5 - Math.random())
.slice(0, regionCount);
const list = usedRegions.map((name) => ({
name,
count: Math.floor(Math.random() * 10) + 1,
}));
userData.push({ list });
}
dummy.push({
year: 2025,
month,
user: userData,
});
}
return dummy;
};
const dummy = generateDummyData();
const colors = ["#008FFB"];
export const makeDataByMonth = (
data: TypeItem[],
month: number
): MappedData => {
const result: { x: string; y: number }[] = [];
const details: { name: string; count: number }[][] = [];
const filtered = data.find((entry) => entry.month === month);
if (!filtered) return { result: [], details: [] };
filtered.user.forEach((u, idx) => {
const total = u.list.reduce((sum, item) => sum + item.count, 0);
details.push(u.list);
console.log("u.list", u.list);
result.push({
x: (idx + 1).toString(),
y: total,
});
});
return { result, details };
};
export const makeDataByRange = (
data: TypeItem[],
startMonth: number,
startDay: number,
endMonth: number,
endDay: number
) => {
const user: number[] = [];
const labels: string[] = [];
const details = [];
const result: { x: string; y: number }[] = [];
const sortedData = data.sort((a, b) => a.month - b.month);
for (const monthData of sortedData) {
const { month, user: u } = monthData;
if (month < startMonth || month > endMonth) continue;
let startIndex = 0;
let endIndex = u.length - 1;
if (month === startMonth) startIndex = startDay - 1;
if (month === endMonth) endIndex = endDay - 1;
for (let i = startIndex; i <= endIndex; i++) {
const userEntry = u[i];
if (!userEntry) continue;
const total = userEntry.list.reduce((sum, item) => sum + item.count, 0);
user.push(total);
details.push(userEntry.list);
const label = `${(i + 1).toString().padStart(2, "0")} - ${month
.toString()
.padStart(2, "0")}`;
labels.push(label);
}
}
for (let i = 0; i < user.length; i++) {
result.push({ x: labels[i], y: user[i] });
}
return { result, details };
};
const ApexChartDynamic = (props: {
type: string;
date: string;
range: { start: any; end: any };
}) => {
const { date, type, range } = props;
const [state, setState] = useState<{
series: ApexAxisChartSeries;
options: ApexCharts.ApexOptions;
seriesQuarter: ApexAxisChartSeries;
}>({
series: [{ data: [] }],
options: {
chart: {
id: "barYear",
height: 600,
width: "100%",
type: "bar",
events: {
dataPointSelection: function (e, chart, opts) {
const quarterChartEl = document.querySelector("#chart-quarter");
const yearChartEl = document.querySelector("#chart-year");
if (!quarterChartEl || !yearChartEl) return;
if (opts.selectedDataPoints[0].length === 1) {
if (quarterChartEl.classList.contains("active")) {
updateQuarterChart(chart, "barQuarter");
} else {
yearChartEl.classList.add("chart-quarter-activated");
quarterChartEl.classList.add("active");
updateQuarterChart(chart, "barQuarter");
}
} else {
updateQuarterChart(chart, "barQuarter");
}
if (opts.selectedDataPoints[0].length === 0) {
yearChartEl.classList.remove("chart-quarter-activated");
quarterChartEl.classList.remove("active");
}
},
updated: function (chart) {
updateQuarterChart(chart, "barQuarter");
},
},
},
plotOptions: {
bar: {
distributed: true,
horizontal: true,
barHeight: "100%",
dataLabels: {
position: "bottom",
},
},
},
dataLabels: {
enabled: true,
textAnchor: "start",
style: {
colors: ["#fff"],
},
formatter: function (_val, opt) {
return opt.w.globals.labels[opt.dataPointIndex];
},
offsetX: 0,
dropShadow: {
enabled: true,
},
},
colors: colors,
states: {
normal: {
filter: {
type: "desaturate",
},
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: "darken",
value: 1,
},
},
},
legend: {
show: false,
},
tooltip: {
x: { show: false },
y: {
title: {
formatter: ((_seriesName: string, opts: any) =>
opts.w.globals.labels[opts.dataPointIndex]) as (
seriesName: string
) => string,
},
},
},
yaxis: {
labels: {
show: false,
},
},
},
seriesQuarter: [{ data: [] }],
});
const [years, setYear] = useState("");
const [datas, setDatas] = useState<any>([]);
const [details, setDetails] = useState<{ name: string; count: number }[][]>(
[]
);
const detailsRef = useRef(details);
useEffect(() => {
detailsRef.current = details;
}, [details]);
useEffect(() => {
initFetch();
}, [date, range.start, range.end, type]);
const initFetch = async () => {
const splitDate = date.split(" ");
const splitDateDaily = String(range.start.year);
const currentYear = type === "monthly" ? splitDate[1] : splitDateDaily;
let data = [];
if (currentYear === years) {
console.log("if", datas);
data = datas;
} else {
// const res = await getStatisticMonthly(
// type === "monthly" ? splitDate[1] : splitDateDaily
// );
// data = res?.data?.data;
data = dummy;
console.log("dataaa", data);
setDatas(data);
setYear(currentYear);
}
// console.log("datas", data);
if (data) {
if (type == "monthly") {
const mappedData: MappedData = makeDataByMonth(
data,
Number(splitDate[0])
);
console.log("mapped month", mappedData);
setDetails(mappedData.details);
setState((prev) => ({
...prev,
series: [{ data: mappedData.result }],
}));
}
if (type == "daily") {
const mappedData = makeDataByRange(
data,
range.start.month,
range.start.day,
range.end.month,
range.end.day
);
console.log("mmapped,", mappedData.details);
setDetails(mappedData.details);
setState((prev) => ({
...prev,
series: [{ data: mappedData.result }],
}));
}
} else {
setState((prev) => ({
...prev,
series: [{ data: [] }],
}));
}
};
const updateQuarterChart = useCallback(
(chart: any, id: string) => {
const selectedIndex = chart?.w?.config?.series[0]?.data?.findIndex(
(d: any, i: number) => {
return chart.w.globals.selectedDataPoints[0]?.includes(i);
}
);
if (selectedIndex !== -1) {
const counts = detailsRef.current[selectedIndex];
console.log("countres", counts, detailsRef);
const quarterData = [
{
name: `${selectedIndex + 1}`,
data: counts,
},
];
ApexCharts.exec(id, "updateSeries", quarterData);
setState((prev: any) => ({
...prev,
seriesQuarter: quarterData,
}));
}
},
[detailsRef]
);
return (
<div className="lg:h-[600px]">
<div id="wrap" className="flex flex-col lg:flex-row gap-2">
<div id="chart-year" className="lg:w-[80%] h-[600px]">
<ReactApexChart
options={state.options}
series={state.series}
type="bar"
height={600}
/>
</div>
<div id="chart-quarter" className="w-full lg:w-[20%]">
<div className="flex flex-col gap-1">
{state.seriesQuarter[0].data.map((list: any, index) => (
<div key={index} className="flex flex-row gap-2">
<p className="font-semibold capitalize">{list?.name} : </p>
<p>{list?.count}</p>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default ApexChartDynamic;

233
components/main/dashboard/chart/multiline-chart.tsx Normal file
View File

@ -0,0 +1,233 @@
"use client";
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[],
startMonth: number,
startDay: 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);
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);
let startIndex = 0;
let endIndex = u[0].data.length - 1;
if (month === startMonth) startIndex = startDay - 1;
if (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 = [];
for (let i = startIndex; i <= endIndex; i++) {
temp.push(now[i]);
if (j == 0) {
const label = `${(i + 1).toString().padStart(2, "0")} - ${month
.toString()
.padStart(2, "0")}`;
labels.push(label);
}
}
const existing = users.find((item) => item.name === u[j].name);
if (existing) {
existing.data.push(...temp); // gabungkan data
} else {
users.push({ name: u[j].name, data: temp }); // tambahkan baru
}
}
}
console.log("users", users);
return { users, labels };
}
const ApexMultiLineChart = (props: {
type: string;
date: string;
range: { start: any; end: any };
}) => {
const { date, type, range } = props;
const [datas, setDatas] = useState<any>([]);
const [years, setYear] = useState("");
const [series, setSeries] = useState<any>([]);
const [categories, setCategories] = useState<string[]>([]);
useEffect(() => {
initFetch();
}, [date, type, range.start, range.end]);
const initFetch = async () => {
const splitDate = date.split(" ");
const splitDateDaily = String(range.start.year);
let data: any = [];
if (
(type === "monthly" && splitDate[1] === years) ||
(type === "daily" && splitDateDaily === years)
) {
data = datas;
} else {
const res = await getStatisticUsersMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily
);
data = res?.data?.data;
// data = dummy.data;
setDatas(data);
}
if (type === "daily") {
const mappedData = getRangeAcrossMonths(
data,
range.start.month,
range.start.day,
range.end.month,
range.end.day
);
setSeries(mappedData.users);
setCategories(mappedData.labels);
}
if (type === "monthly") {
const getDatas = data?.find(
(a: any) =>
a.month == Number(splitDate[0]) && a.year === Number(splitDate[1])
);
if (getDatas) {
setSeries(getDatas.user_levels);
} else {
setSeries([]);
}
}
setYear(type === "monthly" ? splitDate[1] : splitDateDaily);
};
return (
<div>
<div id="chart">
<ReactApexChart
series={series}
options={{
chart: {
height: 600,
type: "line",
dropShadow: {
enabled: true,
color: "#000",
top: 18,
left: 7,
blur: 10,
opacity: 0.5,
},
zoom: {
enabled: true,
},
toolbar: {
show: false,
},
},
colors: [
"#1f77b4",
"#2ca02c",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
"#aec7e8",
"#98df8a",
"#c5b0d5",
"#c49c94",
"#9edae5",
"#393b79",
"#637939",
"#8c6d31",
"#843c39",
"#7b4173",
"#3182bd",
"#6baed6",
"#9ecae1",
"#31a354",
"#74c476",
"#a1d99b",
"#756bb1",
"#9e9ac8",
"#bcbddc",
"#636363",
"#969696",
"#bdbdbd",
"#17becf",
"#8da0cb",
"#66c2a5",
"#a6d854",
"#ffd92f",
"#b3b3b3",
"#80b1d3",
"#fdb462",
],
dataLabels: {
enabled: true,
},
stroke: {
curve: "smooth",
},
title: {
text: "Users",
align: "left",
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"],
opacity: 0.5,
},
},
markers: {
size: 0.5,
},
xaxis: {
categories: type == "daily" ? categories : [],
title: {
text: "Days",
},
},
yaxis: {
title: {
text: "Articles",
},
},
legend: {
position: "right",
horizontalAlign: "right",
floating: false,
offsetY: -25,
offsetX: -5,
},
}}
type="line"
height={600}
/>
</div>
<div id="html-dist"></div>
</div>
);
};
export default ApexMultiLineChart;

198
components/main/dashboard/chart/visitor-chart.tsx Normal file
View File

@ -0,0 +1,198 @@
"use client";
import React, { Component, useEffect, useState } from "react";
import ReactApexChart from "react-apexcharts";
import dummyData from "../../../../const/dummy.json";
import {
getStatisticMonthly,
getStatisticVisitorsMonthly,
} from "@/services/article";
type WeekData = {
week: number;
days: number[];
total: number;
};
type RemainingDays = {
days: number[];
total: number;
};
function processMonthlyData(count: number[]): {
weeks: WeekData[];
remaining_days: RemainingDays;
} {
const weeks: WeekData[] = [];
let weekIndex = 1;
for (let i = 0; i < count.length; i += 7) {
const weekData = count.slice(i, i + 7);
weeks.push({
week: weekIndex,
days: weekData,
total: weekData.reduce((sum, day) => sum + day, 0),
});
weekIndex++;
}
const remainingDays: RemainingDays = {
days: count.length % 7 === 0 ? [] : count.slice(-count.length % 7),
total: count.slice(-count.length % 7).reduce((sum, day) => sum + day, 0),
};
return {
weeks,
remaining_days: remainingDays,
};
}
function getRangeAcrossMonths(
data: any[],
startMonth: number,
startDay: 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;
if (month < startMonth || month > endMonth) continue;
let startIndex = 0;
let endIndex = v.length - 1;
if (month === startMonth) startIndex = startDay - 1;
if (month === endMonth) endIndex = endDay - 1;
for (let i = startIndex; i <= endIndex; i++) {
visitors.push(v[i]);
const label = `${(i + 1).toString().padStart(2, "0")} - ${month
.toString()
.padStart(2, "0")} `;
labels.push(label);
}
}
return { visitors, labels };
}
const ApexChartColumnVisitors = (props: {
type: string;
date: string;
range: { start: any; end: any };
total: (data: number) => void;
}) => {
const { date, type, range, total } = props;
const [categories, setCategories] = useState<string[]>([]);
const [series, setSeries] = useState<{ name: string; data: number[] }[]>([]);
const [seriesVisitors, setSeriesVisitors] = useState<number[]>([]);
const [years, setYear] = useState("");
const [datas, setDatas] = useState<any>([]);
useEffect(() => {
initFetch();
}, [date, type, range]);
const initFetch = async () => {
const splitDate = date.split(" ");
const splitDateDaily = String(range.start.year);
let data = [];
if (
(type === "monthly" && splitDate[1] === years) ||
(type === "daily" && splitDateDaily === years)
) {
data = datas;
} else {
const res = await getStatisticVisitorsMonthly(
type === "monthly" ? splitDate[1] : splitDateDaily
);
data = res?.data?.data;
console.log("daaaa", data);
setDatas(data);
}
const getDatas = data?.find(
(a: any) =>
a.month == Number(splitDate[0]) && a.year === Number(splitDate[1])
);
if (getDatas) {
if (type == "monthly") {
setSeriesVisitors(getDatas.data);
total(getDatas.data.reduce((a: number, b: number) => a + b, 0));
}
if (type === "daily") {
const mappedData = getRangeAcrossMonths(
data,
range.start.month,
range.start.day,
range.end.month,
range.end.day
);
setSeriesVisitors(mappedData.visitors);
total(mappedData.visitors.reduce((a: number, b: number) => a + b, 0));
setCategories(mappedData.labels);
}
// if (type === "weekly") {
// const category = [];
// for (let i = 1; i <= temp1.weeks.length; i++) {
// category.push(`Week ${i}`);
// }
// setCategories(category);
// }
} else {
setSeriesVisitors([]);
}
setYear(type === "monthly" ? splitDate[1] : splitDateDaily);
};
useEffect(() => {
const temp = [
{
name: "Visitors",
data: seriesVisitors || [],
},
];
setSeries(temp);
}, [seriesVisitors]);
return (
<div className="h-full">
<div id="chart" className="h-full">
<ReactApexChart
options={{
chart: {
height: "100%",
type: "area",
},
stroke: {
curve: "smooth",
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: type == "daily" ? categories : [],
},
}}
series={series}
type="area"
height="100%"
/>
</div>
<div id="html-dist"></div>
</div>
);
};
export default ApexChartColumnVisitors;

653
components/main/dashboard/dashboard-container.tsx
View File

@ -61,7 +61,17 @@ import {
parseAbsoluteToLocal,
} from "@internationalized/date";
import { Input } from "@heroui/input";
import { EyeIconMdi, SearchIcons } from "@/components/icons";
import {
ChevronLeftIcon,
ChevronRightIcon,
EyeIconMdi,
SearchIcons,
} from "@/components/icons";
import { format } from "date-fns";
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";
type ArticleData = Article & {
no: number;
@ -75,6 +85,16 @@ interface TopPages {
viewCount: number;
}
const colors = [
"#38bdf8",
"#155e75",
"#0e7490",
"#0284c7",
"#0ea5e9",
"#38bdf8",
"#7dd3fc",
];
interface PostCount {
userLevelId: number;
no: number;
@ -82,6 +102,67 @@ interface PostCount {
totalArticle: number;
}
const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"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();
@ -122,7 +203,6 @@ export default function DashboardContainer() {
endDate: parseDate(convertDateFormatNoTimeV2(new Date())),
});
const [typeDate, setTypeDate] = useState("monthly");
const [summary, setSummary] = useState<any>();
const [topPages, setTopPages] = useState<TopPages[]>([]);
@ -135,10 +215,62 @@ export default function DashboardContainer() {
name: string;
}>();
const roleId = Cookies.get("urie");
const today = new Date();
const [chartVisitorTotal, setChartVisitorTotal] = useState(0);
const [recapArticlePage, setRecapArticlePage] = useState(1);
const [recapArticleTotalPage, setRecapArticleTotalPage] = useState(1);
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 [typeDateVisitor, setTypeDateVisitor] = useState("daily");
const [visitorYear, setVisitorYear] = useState(today.getFullYear());
const [visitorSelectedMonth, setVisitorSelectedMonth] = useState<Date | null>(
today
);
const [visitorDailyDate, setVisitorDailyDate] = useState({
start: parseDate(
convertDateFormatNoTimeV2(
new Date(new Date().setDate(new Date().getDate() - 7))
)
),
end: parseDate(convertDateFormatNoTimeV2(today)),
});
const [typeDateUsers, setTypeDateUsers] = useState("daily");
const [usersYear, setUsersYear] = useState(today.getFullYear());
const [usersSelectedMonth, setUsersSelectedMonth] = useState<Date | null>(
today
);
const [usersDailyDate, setUsersDailyDate] = useState({
start: parseDate(
convertDateFormatNoTimeV2(
new Date(new Date().setDate(new Date().getDate() - 7))
)
),
end: parseDate(convertDateFormatNoTimeV2(today)),
});
const handleMonthClick = (monthIndex: number) => {
setSelectedMonth(new Date(year, monthIndex, 1));
};
const handleMonthClickVisitor = (monthIndex: number) => {
setVisitorSelectedMonth(new Date(visitorYear, monthIndex, 1));
};
const handleMonthClickUsers = (monthIndex: number) => {
setUsersSelectedMonth(new Date(usersYear, monthIndex, 1));
};
useEffect(() => {
fetchSummary();
}, []);
@ -251,32 +383,6 @@ export default function DashboardContainer() {
}
};
const getMonthYear = (date: any) => {
return date.month + " " + date.year;
};
const getMonthYearName = (date: any) => {
const newDate = new Date(date);
const months = [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember",
];
const year = newDate.getFullYear();
const month = months[newDate.getMonth()];
return month + " " + year;
};
useEffect(() => {
const temp = Array.from(selectedAccordion);
console.log("selecette", temp);
@ -593,141 +699,6 @@ export default function DashboardContainer() {
)}
</div>
</div>
<div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-sm">
<div className="flex justify-between font-semibold">
<p>Recent Article</p>
<Link href="/admin/article/create">
<Button color="primary" variant="bordered">
Buat Article
</Button>
</Link>
</div>
{article?.map((list: any) => (
<div
key={list?.id}
className="flex flex-row gap-2 items-center border-b-2 py-2"
>
<Image
alt="thumbnail"
src={list?.thumbnailUrl || `/no-image.jpg`}
className="h-[70px] w-[70px] object-cover rounded-lg"
/>
<div className="flex flex-col gap-2">
<p>{textEllipsis(list?.title, 78)}</p>
<p className="text-xs">
{convertDateFormat(list?.createdAt)}
</p>
</div>
</div>
))}
<div className="my-2 w-full flex justify-center">
<Pagination
isCompact
showControls
showShadow
color="primary"
classNames={{
base: "bg-transparent",
wrapper: "bg-transparent",
item: "w-fit px-3",
cursor: "w-fit px-3",
}}
page={page}
total={totalPage}
onChange={(page) => setPage(page)}
/>
</div>
</div>
</div>
<div className="w-full flex flex-col lg:flex-row gap-6 justify-center ">
<div className="border-1 shadow-sm w-screen rounded-lg lg:w-[55%] p-6 flex flex-col">
<div className="flex justify-between mb-3">
<div className="font-semibold flex flex-col">
Analytics
<div className="font-normal text-xs text-gray-600 flex flex-row gap-2">
<CheckboxGroup
label=""
value={analyticsView}
orientation="vertical"
onValueChange={setAnalyticView}
className="lg:hidden"
>
<Checkbox size="sm" value="comment">
Comment
</Checkbox>
<Checkbox size="sm" value="view" color="success">
View
</Checkbox>
<Checkbox size="sm" value="share" color="warning">
Share
</Checkbox>
</CheckboxGroup>
<CheckboxGroup
label=""
value={analyticsView}
orientation="horizontal"
onValueChange={setAnalyticView}
className="hidden lg:block"
>
<Checkbox size="sm" value="comment">
Comment
</Checkbox>
<Checkbox size="sm" value="view" color="success">
View
</Checkbox>
<Checkbox size="sm" value="share" color="warning">
Share
</Checkbox>
</CheckboxGroup>
</div>
</div>
<div className="flex flex-col lg:flex-row gap-2">
<Button
color="primary"
variant={typeDate === "monthly" ? "solid" : "bordered"}
onPress={() => setTypeDate("monthly")}
className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg"
>
Bulanan
</Button>
<Button
color="primary"
onPress={() => setTypeDate("weekly")}
variant={typeDate === "weekly" ? "solid" : "bordered"}
className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg"
>
Mingguan
</Button>
<div className="w-[140px]">
<Popover
placement="bottom"
classNames={{ content: ["!bg-transparent", "p-0"] }}
>
<PopoverTrigger>
<Button className="w-full">
{getMonthYearName(startDateValue)}
</Button>
</PopoverTrigger>
<PopoverContent className="bg-transparent">
<Calendar
value={startDateValue}
onChange={setStartDateValue}
/>
</PopoverContent>
</Popover>
</div>
</div>
</div>
<div className="flex flex-row w-full h-full">
<div className="w-full h-[30vh] lg:h-full text-black">
<ApexChartColumn
type={typeDate}
date={`${startDateValue.month} ${startDateValue.year}`}
view={analyticsView}
/>
</div>
</div>
</div>
<div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-xs lg:text-sm">
<div className="flex justify-between font-semibold">
<p>Top Pages</p>
@ -817,6 +788,360 @@ export default function DashboardContainer() {
)}
</div>
</div>
<div className="w-full flex flex-col gap-6 justify-center">
<div className="border-1 shadow-sm w-full rounded-lg p-6 flex flex-col">
<div className="flex justify-between mb-3">
<div className="font-semibold flex flex-col">
Engagement Analytics
<div className="font-normal text-xs text-gray-600 flex flex-row gap-2">
<CheckboxGroup
label=""
value={analyticsView}
orientation="vertical"
onValueChange={setAnalyticView}
className="lg:hidden"
>
<Checkbox size="sm" value="comment">
Comment
</Checkbox>
<Checkbox size="sm" value="view" color="success">
View
</Checkbox>
<Checkbox size="sm" value="share" color="warning">
Share
</Checkbox>
</CheckboxGroup>
<CheckboxGroup
label=""
value={analyticsView}
orientation="horizontal"
onValueChange={setAnalyticView}
className="hidden lg:block"
>
<Checkbox size="sm" value="comment">
Comment
</Checkbox>
<Checkbox size="sm" value="view" color="success">
View
</Checkbox>
<Checkbox size="sm" value="share" color="warning">
Share
</Checkbox>
</CheckboxGroup>
</div>
</div>
<div className="flex flex-col lg:flex-row gap-2">
<Select
className="w-full md:w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px]"
label=""
labelPlacement="outside"
selectedKeys={[typeDate]}
onChange={(e) =>
e.target.value !== "" && setTypeDate(e.target.value)
}
>
<SelectItem key="monthly">Bulanan</SelectItem>
<SelectItem key="daily">Harian</SelectItem>
</Select>
{typeDate === "monthly" ? (
<Popover
placement="bottom"
showArrow={true}
className="w-full"
>
<PopoverTrigger>
<Button className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg">
{" "}
{selectedMonth
? format(selectedMonth, "MMMM yyyy")
: "Pilih Bulan"}
</Button>
</PopoverTrigger>
<PopoverContent className="p-4 w-[200px]">
<div className="flex items-center justify-between mb-2 px-1 w-full">
<button
className="text-gray-500 hover:text-black"
onClick={() => setYear((prev) => prev - 1)}
>
<ChevronLeftIcon />
</button>
<span className="font-semibold text-center">
{year}
</span>
<button
className="text-gray-500 hover:text-black"
onClick={() => setYear((prev) => prev + 1)}
>
<ChevronRightIcon />
</button>
</div>
<div className="grid grid-cols-3 gap-2 w-full">
{months.map((month, idx) => (
<button
key={idx}
onClick={() => handleMonthClick(idx)}
className={`py-1 rounded-md text-sm transition-colors ${
selectedMonth &&
selectedMonth.getMonth() === idx &&
selectedMonth.getFullYear() === year
? "bg-blue-500 text-white"
: "hover:bg-gray-200 text-gray-700"
}`}
>
{month}
</button>
))}
</div>
</PopoverContent>
</Popover>
) : (
<div className="w-[220px]">
<DateRangePicker
className="h-[40px]"
value={viewsDailyDate}
onChange={(e) => e !== null && setViewsDailyDate(e)}
label=""
/>
</div>
)}
</div>
</div>
<div className="flex flex-row w-full h-full">
<div className="w-full h-[30vh] lg:h-full text-black">
<ApexChartColumn
type={typeDate}
date={`${
convertDateFormatNoTimeV2(String(selectedMonth)).split(
"-"
)[1]
} ${
convertDateFormatNoTimeV2(String(selectedMonth)).split(
"-"
)[0]
}`}
view={analyticsView}
range={viewsDailyDate}
/>
</div>
</div>
</div>
<div className="border-1 shadow-sm w-full rounded-lg p-6 flex flex-col h-[700px]">
<div className="flex justify-between mb-3">
<div className="font-semibold flex flex-col">
Article Contribution Analytics
</div>
<div className="flex flex-col lg:flex-row gap-2">
<Select
className="w-full md:w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px]"
label=""
labelPlacement="outside"
selectedKeys={[typeDateUsers]}
onChange={(e) =>
e.target.value !== "" && setTypeDateUsers(e.target.value)
}
>
<SelectItem key="monthly">Bulanan</SelectItem>
<SelectItem key="daily">Harian</SelectItem>
</Select>
{typeDateUsers === "monthly" ? (
<Popover
placement="bottom"
showArrow={true}
className="w-full"
>
<PopoverTrigger>
<Button className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg">
{" "}
{usersSelectedMonth
? format(usersSelectedMonth, "MMMM yyyy")
: "Pilih Bulan"}
</Button>
</PopoverTrigger>
<PopoverContent className="p-4 w-[200px]">
<div className="flex items-center justify-between mb-2 px-1 w-full">
<button
className="text-gray-500 hover:text-black"
onClick={() => setUsersYear((prev) => prev - 1)}
>
<ChevronLeftIcon />
</button>
<span className="font-semibold text-center">
{year}
</span>
<button
className="text-gray-500 hover:text-black"
onClick={() => setUsersYear((prev) => prev + 1)}
>
<ChevronRightIcon />
</button>
</div>
<div className="grid grid-cols-3 gap-2 w-full">
{months.map((month, idx) => (
<button
key={idx}
onClick={() => handleMonthClickUsers(idx)}
className={`py-1 rounded-md text-sm transition-colors ${
usersSelectedMonth &&
usersSelectedMonth.getMonth() === idx &&
usersSelectedMonth.getFullYear() === year
? "bg-blue-500 text-white"
: "hover:bg-gray-200 text-gray-700"
}`}
>
{month}
</button>
))}
</div>
</PopoverContent>
</Popover>
) : (
<div className="w-[220px]">
<DateRangePicker
className="h-[40px]"
value={usersDailyDate}
onChange={(e) => e !== null && setUsersDailyDate(e)}
label=""
/>
</div>
)}
</div>
</div>
<div className="flex flex-row w-full h-full">
<div className="w-full h-[30vh] lg:h-full text-black">
<ApexMultiLineChart
type={typeDateUsers}
date={`${
convertDateFormatNoTimeV2(String(usersSelectedMonth)).split(
"-"
)[1]
} ${
convertDateFormatNoTimeV2(String(usersSelectedMonth)).split(
"-"
)[0]
}`}
range={usersDailyDate}
/>
</div>
</div>
</div>
</div>
{roleId && Number(roleId) < 3 && (
<div>
<IndonesiaMap />
<div className="border-1 shadow-sm w-full rounded-lg p-6 flex flex-col mt-4 h-[600px]">
<div className="flex justify-between mb-3">
<div className="font-semibold flex flex-col">
Visitor Analytics
</div>
<div className="flex flex-col lg:flex-row gap-2">
<Select
className="w-full md:w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px]"
label=""
labelPlacement="outside"
selectedKeys={[typeDateVisitor]}
onChange={(e) =>
e.target.value !== "" &&
setTypeDateVisitor(e.target.value)
}
>
<SelectItem key="monthly">Bulanan</SelectItem>
<SelectItem key="daily">Harian</SelectItem>
</Select>
{typeDateVisitor === "monthly" ? (
<Popover
placement="bottom"
showArrow={true}
className="w-full"
>
<PopoverTrigger>
<Button className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg">
{" "}
{visitorSelectedMonth
? format(visitorSelectedMonth, "MMMM yyyy")
: "Pilih Bulan"}
</Button>
</PopoverTrigger>
<PopoverContent className="p-4 w-[200px]">
<div className="flex items-center justify-between mb-2 px-1 w-full">
<button
className="text-gray-500 hover:text-black"
onClick={() => setVisitorYear((prev) => prev - 1)}
>
<ChevronLeftIcon />
</button>
<span className="font-semibold text-center">
{year}
</span>
<button
className="text-gray-500 hover:text-black"
onClick={() => setVisitorYear((prev) => prev + 1)}
>
<ChevronRightIcon />
</button>
</div>
<div className="grid grid-cols-3 gap-2 w-full">
{months.map((month, idx) => (
<button
key={idx}
onClick={() => handleMonthClickVisitor(idx)}
className={`py-1 rounded-md text-sm transition-colors ${
visitorSelectedMonth &&
visitorSelectedMonth.getMonth() === idx &&
visitorSelectedMonth.getFullYear() === year
? "bg-blue-500 text-white"
: "hover:bg-gray-200 text-gray-700"
}`}
>
{month}
</button>
))}
</div>
</PopoverContent>
</Popover>
) : (
<div className="w-[220px]">
<DateRangePicker
className="h-[40px]"
value={visitorDailyDate}
onChange={(e) => e !== null && setVisitorDailyDate(e)}
label=""
/>
</div>
)}
</div>
</div>
<div className="flex flex-row w-full h-full">
<div className="w-full h-[30vh] lg:h-full text-black">
<ApexChartColumnVisitors
type={typeDateVisitor}
date={`${
convertDateFormatNoTimeV2(
String(visitorSelectedMonth)
).split("-")[1]
} ${
convertDateFormatNoTimeV2(
String(visitorSelectedMonth)
).split("-")[0]
}`}
range={visitorDailyDate}
total={(data) => setChartVisitorTotal(data)}
/>
</div>
</div>
<div className="flex flex-row gap-2 mt-5 border-1 p-5 rounded-lg">
<div className="w-1/5 text-center">Chart Total</div>
<div className="w-4/5 text-center">{chartVisitorTotal}</div>
</div>
</div>
</div>
)}
</div>
<Modal isOpen={isOpen} onOpenChange={onOpenChange} size="3xl">
<ModalContent>

116
components/table/article-table.tsx
View File

@ -28,6 +28,7 @@ import {
Autocomplete,
AutocompleteItem,
Calendar,
Checkbox,
Chip,
ChipProps,
Dropdown,
@ -50,7 +51,7 @@ import {
TableRow,
} from "@heroui/react";
import Link from "next/link";
import { Key, useCallback, useEffect, useState } from "react";
import { Key, useCallback, useEffect, useRef, useState } from "react";
import Datepicker from "react-tailwindcss-datepicker";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
@ -112,6 +113,8 @@ export default function ArticleTable() {
endDate: null,
});
const [selectedArticles, setSelectedArticles] = useState<any>(new Set([]));
const [articleDate, setArticleDate] = useState<{
startDate: any;
endDate: any;
@ -290,27 +293,66 @@ export default function ArticleTable() {
}
};
const selectedArticlesRef = useRef(selectedArticles);
const articlesRef = useRef(article);
useEffect(() => {
selectedArticlesRef.current = selectedArticles;
articlesRef.current = article;
}, [selectedArticles, article]);
const doBulkDelete = useCallback(() => {
console.log("issame", Array.from(selectedArticlesRef.current));
const now = Array.from(selectedArticlesRef.current);
if (now.length < 1) {
error("Pilih Article");
return false;
}
const isAll = now.join("") === "all";
MySwal.fire({
title: "Hapus Artikel yang Dipilih?",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#3085d6",
confirmButtonColor: "#d33",
confirmButtonText: "Hapus",
}).then((result) => {
if (result.isConfirmed) {
if (isAll) {
const temp = [];
for (const element of articlesRef.current) {
temp.push(String(element.id));
}
deleteBulkProcess(temp);
} else {
deleteBulkProcess(now as string[]);
}
}
});
}, []);
const deleteBulkProcess = async (data: string[]) => {
loading();
for (const element of data) {
const resDelete = await deleteArticle(element);
}
close();
success("Berhasil Hapus");
setPage(1);
initState();
};
const renderCell = useCallback(
(article: any, columnKey: Key) => {
const cellValue = article[columnKey as keyof any];
switch (columnKey) {
case "isPublish":
return (
// <Chip
// className="capitalize "
// color={statusColorMap[article.status]}
// size="lg"
// variant="flat"
// >
// <div className="flex flex-row items-center gap-2 justify-center">
// {article.status}
// </div>
// </Chip>
<p>{article.isPublish ? "Publish" : "Draft"}</p>
);
return <p>{article.isPublish ? "Publish" : "Draft"}</p>;
case "isBanner":
return <p>{article.isBanner ? "Ya" : "Tidak"}</p>;
case "createdAt":
return <p>{convertDateFormat(article.createdAt)}</p>;
case "category":
@ -400,6 +442,23 @@ export default function ArticleTable() {
</>
)}
</DropdownItem>
<DropdownItem
key="deleteBulk"
onPress={doBulkDelete}
className={roleId && Number(roleId) < 3 ? "" : "hidden"}
>
{roleId && Number(roleId) < 3 && (
<>
{" "}
<DeleteIcon
color="red"
size={18}
className="inline ml-1 mr-2 mb-1"
/>
Bulk Delete
</>
)}
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
@ -409,7 +468,7 @@ export default function ArticleTable() {
return cellValue;
}
},
[article, page]
[article, page, selectedArticles]
);
let typingTimer: NodeJS.Timeout;
@ -499,30 +558,6 @@ export default function ArticleTable() {
placeholder="Kategori..."
name="sub-module"
options={categories}
// styles={{
// control: (base) => ({
// ...base,
// width: "100%",
// overflowX: "auto",
// }),
// valueContainer: (base) => ({
// ...base,
// display: "flex",
// flexWrap: "nowrap",
// overflowX: "auto",
// whiteSpace: "nowrap",
// gap: "4px",
// }),
// multiValue: (base) => ({
// ...base,
// whiteSpace: "nowrap",
// flexShrink: 0,
// }),
// multiValueLabel: (base) => ({
// ...base,
// whiteSpace: "nowrap",
// }),
// }}
/>
</div>
{roleId && Number(roleId) < 3 && (
@ -642,6 +677,9 @@ export default function ArticleTable() {
wrapper:
"min-h-[50px] bg-transpararent text-black dark:text-white ",
}}
selectionMode={roleId && Number(roleId) < 3 ? "multiple" : "none"}
selectedKeys={selectedArticles}
onSelectionChange={setSelectedArticles}
>
<TableHeader
columns={

2
components/ui/breadcrumb.tsx
View File

@ -34,8 +34,6 @@ export const Breadcrumb = () => {
return capitalizedWords.join(" ");
});
console.log("pathname : ", pathnameTransformed);
useEffect(() => {
setCurrentPage(pathnameSplit[pathnameSplit.length - 1]);
}, [pathnameSplit]);

312
components/ui/maps-charts.tsx Normal file
View File

@ -0,0 +1,312 @@
import React, { useEffect, useMemo, 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";
import {
Button,
DateRangePicker,
Popover,
PopoverContent,
PopoverTrigger,
Select,
SelectItem,
} from "@heroui/react";
import { format } from "date-fns";
import { ChevronLeftIcon, ChevronRightIcon } from "../icons";
const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const IndonesiaMap = () => {
const chartRef = useRef<HTMLDivElement>(null);
const myChart = useRef<echarts.EChartsType | null>(null);
const [selectedProvince, setSelectedProvince] = useState("");
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 handleMonthClick = (monthIndex: number) => {
setSelectedMonth(new Date(year, monthIndex, 1));
};
const [minMax, setMinMax] = useState({ min: 0, max: 0 });
const [data, setData] = useState<{ name: string; value: number }[]>([]);
useEffect(() => {
fetchData();
}, [viewsDailyDate]);
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)
);
if (res?.data?.data) {
const temp = [];
let min = Infinity;
let max = -Infinity;
for (const element of res?.data?.data) {
const value = element.totalVisitor;
const now = {
name: element.regionName.toUpperCase(),
value,
};
if (value < min) min = value;
if (value > max) max = value;
temp.push(now);
}
setData(temp);
setMinMax({ min: min, max: max });
} else {
setData([]);
setMinMax({ min: 0, max: 0 });
}
};
const option = useMemo(
() => ({
backgroundColor: "#d3d3d3",
title: {
text: "Data Distribution",
left: "center",
textStyle: { color: "#000" },
},
visualMap: {
min: minMax.min,
max: minMax.max,
show: true,
seriesIndex: 0,
inRange: {
color: ["#ff0000", "#ffffff"],
},
},
series: [
{
type: "map",
map: "indonesia",
roam: true,
zoom: 1.2,
center: [118, -2],
label: {
show: false,
color: "#000",
},
itemStyle: {
borderColor: "#999",
},
emphasis: {
label: {
show: true,
color: "#000",
},
itemStyle: {
areaColor: "#ffcccc",
},
},
data: data,
},
],
}),
[data, minMax]
);
useEffect(() => {
if (!chartRef.current) return;
(window as any).echarts = echarts;
const fixedGeo = {
...indonesiaGeo,
features: indonesiaGeo.features.map((f) => ({
...f,
properties: {
...f.properties,
name: f.properties.PROVINSI,
},
})),
};
echarts.registerMap("indonesia", fixedGeo as any);
const chart = echarts.init(chartRef.current);
myChart.current = chart;
chart.on("click", (params: any) => {
highlightProvince(params.name);
});
chartOptionRef.current = option;
chart.setOption(option);
return () => {
chart.dispose();
};
}, []);
useEffect(() => {
if (!myChart.current) return;
chartOptionRef.current = option;
myChart.current.setOption(option);
}, [option]);
const highlightProvince = (name: string) => {
if (!myChart.current || !chartOptionRef.current) return;
myChart.current.clear();
myChart.current.setOption(chartOptionRef.current);
myChart.current.dispatchAction({
type: "highlight",
name,
});
myChart.current.dispatchAction({
type: "showTip",
name,
});
selectedProvinceRef.current = name;
setSelectedProvince(name);
};
return (
<div className="flex flex-col lg:flex-row gap-6 w-full pr-2 md:pr-0">
<div className="w-screen md:w-[70%] h-[360px] lg:h-[600px]">
<div ref={chartRef} style={{ height: "100%", width: "100%" }} />
</div>
<div className="w-screen md:w-[30%] h-[360px] lg:h-[600px] overflow-auto flex flex-col">
<div className="flex flex-col lg:flex-row gap-2">
{/* <Select
className="w-full md:w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px]"
label=""
labelPlacement="outside"
selectedKeys={[typeDate]}
onChange={(e) =>
e.target.value !== "" && setTypeDate(e.target.value)
}
>
<SelectItem key="monthly">Bulanan</SelectItem>
<SelectItem key="daily">Harian</SelectItem>
</Select> */}
{typeDate === "monthly" ? (
<Popover placement="bottom" showArrow={true} className="w-full">
<PopoverTrigger>
<Button className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg">
{" "}
{selectedMonth
? format(selectedMonth, "MMMM yyyy")
: "Pilih Bulan"}
</Button>
</PopoverTrigger>
<PopoverContent className="p-4 w-[200px]">
<div className="flex items-center justify-between mb-2 px-1 w-full">
<button
className="text-gray-500 hover:text-black"
onClick={() => setYear((prev) => prev - 1)}
>
<ChevronLeftIcon />
</button>
<span className="font-semibold text-center">{year}</span>
<button
className="text-gray-500 hover:text-black"
onClick={() => setYear((prev) => prev + 1)}
>
<ChevronRightIcon />
</button>
</div>
<div className="grid grid-cols-3 gap-2 w-full">
{months.map((month, idx) => (
<button
key={idx}
onClick={() => handleMonthClick(idx)}
className={`py-1 rounded-md text-sm transition-colors ${
selectedMonth &&
selectedMonth.getMonth() === idx &&
selectedMonth.getFullYear() === year
? "bg-blue-500 text-white"
: "hover:bg-gray-200 text-gray-700"
}`}
>
{month}
</button>
))}
</div>
</PopoverContent>
</Popover>
) : (
<div className="w-full mb-3">
<DateRangePicker
className="h-[40px] self-end"
value={viewsDailyDate}
onChange={(e) => e !== null && setViewsDailyDate(e)}
label=""
/>
</div>
)}
</div>
{data?.length > 0 &&
data?.map((list: any) => (
<a
key={list.name}
onClick={() => highlightProvince(list.name)}
className={`w-full flex flex-row cursor-pointer gap-2 ${
selectedProvince === list.name ? "bg-slate-300" : ""
}`}
>
<p className="w-4/5">{list.name}</p>{" "}
<p
className={`w-1/5 ${
selectedProvince === list.name
? "bg-slate-300"
: "bg-[#a9d7e4]"
} text-black border-white text-center`}
>
{list.value}
</p>
</a>
))}
</div>
</div>
);
};
export default IndonesiaMap;

164
const/dummy.json
View File

@ -1,46 +1,148 @@
{
"data": [
{
"id": 1,
"year": 2024,
"month": 11,
"suggestions": [
14, 32, 10, 21, 15, 18, 24, 30, 12, 25, 19, 28, 14, 17, 22, 31, 27, 13,
20, 24, 29, 18, 21, 26, 23, 14, 19, 17, 28, 22
]
},
{
"id": 2,
"year": 2024,
"month": 12,
"suggestions": [
15, 23, 19, 14, 18, 20, 22, 17, 21, 19, 23, 16, 25, 20, 18, 19, 22, 24,
15, 18, 21, 26, 28, 23, 17, 20, 19, 22, 22, 42, 32
]
},
{
"id": 3,
"year": 2025,
"month": 1,
"suggestions": [
14, 32, 10, 21, 15, 18, 24, 30, 12, 25, 19, 28, 14, 17, 22, 31, 27, 13,
20, 24, 29, 18, 21, 26, 23, 14, 19, 17, 28, 22, 21
"month": 4,
"users": [
{
"name": "Polda Aceh",
"data": [
12, 7, 5, 19, 3, 8, 15, 4, 9, 6, 14, 11, 13, 10, 2, 18, 7, 5, 8, 17,
4, 6, 14, 15, 3, 10, 12, 9, 6, 13
]
},
{
"name": "Polda Sumatera Utara",
"data": [
10, 4, 6, 7, 9, 8, 14, 13, 5, 12, 11, 3, 17, 16, 7, 9, 10, 8, 5, 14,
11, 4, 6, 9, 15, 13, 3, 7, 10, 12
]
},
{
"name": "Polda Sumatera Barat",
"data": [
7, 6, 3, 8, 12, 4, 6, 10, 11, 14, 13, 5, 9, 10, 6, 7, 8, 13, 15, 6,
7, 5, 8, 14, 11, 13, 4, 6, 12, 10
]
},
{
"name": "Polda Metro Jaya",
"data": [
12, 7, 5, 19, 3, 8, 15, 4, 9, 6, 14, 11, 13, 10, 2, 18, 7, 5, 8, 17,
4, 6, 9, 6, 13, 5, 14, 15, 3, 10
]
},
{
"name": "Polda Jabar",
"data": [
10, 4, 6, 17, 16, 7, 9, 10, 8, 5, 14, 11, 4, 6, 9, 15, 13, 3, 7, 10,
12, 9, 8, 14, 13, 21, 5, 12, 11
]
},
{
"name": "Polda Jateng",
"data": [
7, 6, 3, 13, 5, 9, 10, 6, 7, 8, 13, 15, 6, 7, 5, 8, 14, 11, 13, 4,
4, 6, 10, 11, 14, 2, 6, 12, 10, 8
]
}
]
},
{
"id": 4,
"year": 2025,
"month": 2,
"suggestions": [
15, 23, 19, 14, 18, 20, 22, 17, 21, 19, 23, 16, 25, 20, 18, 19, 22, 24,
15, 18, 21, 26, 28, 23, 17, 20, 19, 22
"month": 5,
"users": [
{
"name": "Polda Aceh",
"data": [
12, 7, 5, 19, 3, 8, 15, 4, 9, 6, 14, 11, 13, 10, 2, 18, 7, 5, 8, 17,
4, 6, 14, 15, 3, 10, 12, 9, 6, 13, 5
]
},
{
"name": "Polda Sumatera Utara",
"data": [
10, 4, 6, 7, 5, 12, 11, 3, 17, 16, 7, 9, 10, 8, 5, 14, 11, 4, 6, 9,
15, 13, 3, 7, 10, 12, 9, 8, 14, 13, 4
]
},
{
"name": "Polda Sumatera Barat",
"data": [
7, 6, 3, 13, 5, 9, 10, 6, 7, 8, 13, 15, 6, 7, 5, 8, 14, 11, 13, 4,
6, 12, 10, 8, 12, 4, 6, 10, 11, 14, 2
]
},
{
"name": "Polda Metro Jaya",
"data": [
12, 7, 5, 19, 3, 8, 15, 4, 9, 6, 14, 11, 13, 10, 2, 18, 7, 5, 8, 17,
4, 6, 9, 6, 13, 5, 14, 15, 3, 10, 12
]
},
{
"name": "Polda Jabar",
"data": [
10, 4, 6, 17, 16, 7, 9, 10, 8, 5, 14, 11, 4, 6, 9, 15, 13, 3, 7, 10,
12, 9, 8, 14, 13, 2, 5, 12, 11, 3, 2
]
},
{
"name": "Polda Jateng",
"data": [
7, 6, 3, 13, 5, 9, 10, 6, 7, 8, 13, 15, 6, 7, 5, 8, 14, 11, 13, 4,
4, 6, 10, 11, 14, 2, 6, 12, 10, 8, 12
]
}
]
},
{
"id": 5,
"year": 2025,
"month": 3,
"suggestions": [14, 32, 10, 21, 15, 18]
"month": 6,
"users": [
{
"name": "Polda Aceh",
"data": [
12, 7, 5, 19, 3, 8, 15, 4, 9, 6, 14, 11, 13, 10, 2, 18, 7, 5, 8, 17,
4, 6, 14, 15, 3, 10, 12, 9, 6, 13, 5
]
},
{
"name": "Polda Sumatera Utara",
"data": [
10, 4, 6, 7, 5, 12, 11, 3, 17, 16, 7, 9, 10, 8, 5, 14, 11, 4, 6, 9,
15, 13, 3, 7, 10, 12, 9, 8, 14, 13, 4
]
},
{
"name": "Polda Sumatera Barat",
"data": [
7, 6, 3, 13, 5, 9, 10, 6, 7, 8, 13, 15, 6, 7, 5, 8, 14, 11, 13, 4,
6, 12, 10, 8, 12, 4, 6, 10, 11, 14, 2
]
},
{
"name": "Polda Metro Jaya",
"data": [
12, 7, 5, 19, 3, 8, 15, 4, 9, 6, 14, 11, 13, 10, 2, 18, 7, 5, 8, 17,
4, 6, 9, 6, 13, 5, 14, 15, 3, 10, 12
]
},
{
"name": "Polda Jabar",
"data": [
10, 4, 6, 17, 16, 7, 9, 10, 8, 5, 14, 11, 4, 6, 9, 15, 13, 3, 7, 10,
12, 9, 8, 14, 13, 20, 5, 12, 11, 3
]
},
{
"name": "Polda Jateng",
"data": [
7, 6, 3, 13, 5, 9, 10, 6, 7, 8, 13, 15, 6, 7, 5, 8, 14, 11, 13, 4,
4, 6, 10, 11, 14, 2, 6, 12, 10, 8, 12
]
}
]
}
]
}

100
package-lock.json generated
View File

@ -26,11 +26,13 @@
"@react-aria/ssr": "^3.8.0",
"@react-aria/visually-hidden": "^3.8.6",
"@tawk.to/tawk-messenger-react": "^2.0.2",
"@types/echarts": "^5.0.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "20.5.7",
"@types/node": "^20.5.7",
"@types/react": "19.1.2",
"@types/react-datepicker": "^6.0.1",
"@types/react-dom": "19.1.2",
"@types/topojson-client": "^3.1.5",
"apexcharts": "^3.48.0",
"autoprefixer": "10.4.16",
"axios": "^1.6.8",
@ -39,6 +41,8 @@
"dayjs": "^1.11.13",
"docx": "^9.3.0",
"dompurify": "^3.2.0",
"echarts": "^5.6.0",
"echarts-gl": "^2.0.9",
"eslint": "8.48.0",
"eslint-config-next": "15.3.0",
"framer-motion": "^10.18.0",
@ -68,6 +72,7 @@
"swiper": "^11.0.6",
"tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5",
"topojson-client": "^3.1.0",
"typescript": "5.0.4",
"xlsx": "^0.18.5",
"zod": "^3.23.8",
@ -9397,6 +9402,15 @@
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.5.tgz",
"integrity": "sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg=="
},
"node_modules/@types/echarts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-5.0.0.tgz",
"integrity": "sha512-5uc/16BlYpzH8kU/u8aeRRgY2FV6yRY7RjPnYfUFPowl0F3kvNgfaz09PmeVdLkqdAtMft3XkCfqiJPJjG2DNQ==",
"deprecated": "This is a stub types definition. echarts provides its own type definitions, so you do not need this installed.",
"dependencies": {
"echarts": "*"
}
},
"node_modules/@types/eslint": {
"version": "9.6.1",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@ -9423,6 +9437,11 @@
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
"dev": true
},
"node_modules/@types/geojson": {
"version": "7946.0.16",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
},
"node_modules/@types/glob": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@ -9522,6 +9541,23 @@
"@types/react": "*"
}
},
"node_modules/@types/topojson-client": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@types/topojson-client/-/topojson-client-3.1.5.tgz",
"integrity": "sha512-C79rySTyPxnQNNguTZNI1Ct4D7IXgvyAs3p9HPecnl6mNrJ5+UhvGNYcZfpROYV2lMHI48kJPxwR+F9C6c7nmw==",
"dependencies": {
"@types/geojson": "*",
"@types/topojson-specification": "*"
}
},
"node_modules/@types/topojson-specification": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.5.tgz",
"integrity": "sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==",
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@ -10903,6 +10939,11 @@
"resolved": "vendor/ckeditor5",
"link": true
},
"node_modules/claygl": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
},
"node_modules/clean-stack": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@ -11695,6 +11736,32 @@
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
},
"node_modules/echarts": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.6.1"
}
},
"node_modules/echarts-gl": {
"version": "2.0.9",
"resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
"integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
"dependencies": {
"claygl": "^1.2.1",
"zrender": "^5.1.1"
},
"peerDependencies": {
"echarts": "^5.1.2"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/electron-to-chromium": {
"version": "1.5.140",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.140.tgz",
@ -17563,6 +17630,24 @@
"node": ">=8.0"
}
},
"node_modules/topojson-client": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
"integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
"dependencies": {
"commander": "2"
},
"bin": {
"topo2geo": "bin/topo2geo",
"topomerge": "bin/topomerge",
"topoquantize": "bin/topoquantize"
}
},
"node_modules/topojson-client/node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
},
"node_modules/ts-api-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@ -18599,6 +18684,19 @@
"url": "https://github.com/sponsors/colinhacks"
}
},
"node_modules/zrender": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/zustand": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.3.tgz",

7
package.json
View File

@ -27,11 +27,13 @@
"@react-aria/ssr": "^3.8.0",
"@react-aria/visually-hidden": "^3.8.6",
"@tawk.to/tawk-messenger-react": "^2.0.2",
"@types/echarts": "^5.0.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "20.5.7",
"@types/node": "^20.5.7",
"@types/react": "19.1.2",
"@types/react-datepicker": "^6.0.1",
"@types/react-dom": "19.1.2",
"@types/topojson-client": "^3.1.5",
"apexcharts": "^3.48.0",
"autoprefixer": "10.4.16",
"axios": "^1.6.8",
@ -40,6 +42,8 @@
"dayjs": "^1.11.13",
"docx": "^9.3.0",
"dompurify": "^3.2.0",
"echarts": "^5.6.0",
"echarts-gl": "^2.0.9",
"eslint": "8.48.0",
"eslint-config-next": "15.3.0",
"framer-motion": "^10.18.0",
@ -69,6 +73,7 @@
"swiper": "^11.0.6",
"tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5",
"topojson-client": "^3.1.0",
"typescript": "5.0.4",
"xlsx": "^0.18.5",
"zod": "^3.23.8",

BIN
public/assets/data/gps_0.bin Normal file
View File

Binary file not shown.

25072
public/assets/geo/indonesia.json Normal file
View File

File diff suppressed because it is too large Load Diff

17136
public/assets/geo/indonesiav2.json Normal file
View File

File diff suppressed because it is too large Load Diff

31
services/article.ts
View File

@ -215,6 +215,17 @@ export async function getUserLevelDataStat(
}&timeStamp=${timeStamp}`
);
}
export async function getStatisticForMaps(startDate: string, endDate: string) {
const headers = {
"content-type": "application/json",
// Authorization: `Bearer ${token}`,
};
return await httpGet(
`/activity-logs/visitors-by-region-stats?startDate=${startDate}&endDate=${endDate}`,
headers
);
}
export async function getStatisticMonthly(year: string, timeStamp: number) {
const headers = {
"content-type": "application/json",
@ -224,6 +235,26 @@ export async function getStatisticMonthly(year: string, timeStamp: number) {
`/articles/statistic/monthly?year=${year}&timeStamp=${timeStamp}`
);
}
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",
Authorization: `Bearer ${token}`,
};
return await httpGet(
`/articles/statistic/monthly-per-user-level?year=${year}`,
headers
);
}
export async function getStatisticMonthlyFeedback(
year: string,
timeStamp: number