feat:pie chart

components/main/dashboard/chart/pie-chart-browser.tsx

@@ -0,0 +1,181 @@
+"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 },
+];
+
+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<number[]>([]);
+  const [labels, setLabels] = useState<string[]>([]);
+  const [data, setData] = useState<any>([]);
+  const [total, setTotal] = useState(0);
+  const [selectedLabel, setSelectedLabel] = useState<string>("");
+
+  const [topContentDate, setTopContentDate] = useState({
+    startDate: parseDate(
+      convertDateFormatNoTimeV2(
+        new Date(new Date().setDate(new Date().getDate() - 7))
+      )
+    ),
+    endDate: parseDate(convertDateFormatNoTimeV2(new Date())),
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, [topContentDate.startDate, topContentDate.endDate]);
+
+  const fetchData = async () => {
+    const data = dummy;
+    setData(data);
+    const label = data.map((a) => a.name);
+    const seriesNow = data.map((a) => a.value);
+    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 (
+    <div className="flex flex-row w-full mt-5 gap-4">
+      <div className="w-1/2  border-1 rounded-lg p-4">
+        <p className="font-bold">Browser Statistics</p>
+        <ReactApexChart
+          options={{
+            chart: {
+              width: 600,
+              type: "pie" as const,
+              events: {
+                dataPointSelection: function (
+                  event: any,
+                  chartContext: any,
+                  config: any
+                ) {
+                  const selectedIndex = config.dataPointIndex;
+                  const selected = labels[selectedIndex];
+                  setSelectedLabel(selected);
+                },
+              },
+            },
+
+            labels: labels,
+            responsive: [
+              {
+                breakpoint: 480,
+                options: {
+                  chart: {
+                    width: 200,
+                  },
+                  legend: {
+                    position: "bottom",
+                  },
+                },
+              },
+            ],
+          }}
+          series={series}
+          type="pie"
+          width={600}
+        />
+      </div>
+      <div className="w-1/2 flex flex-col border-1 rounded-lg p-4">
+        <div className="flex flex-row gap-1 justify-center">
+          <p> Browser Statistics from</p>
+          <Popover
+            placement="bottom"
+            classNames={{ content: ["!bg-transparent", "p-0"] }}
+          >
+            <PopoverTrigger>
+              <a className="cursor-pointer underline">
+                {convertDateFormatNoTime(topContentDate.startDate)}
+              </a>
+            </PopoverTrigger>
+            <PopoverContent className="bg-transparent">
+              <Calendar
+                value={topContentDate.startDate}
+                onChange={(e) =>
+                  setTopContentDate({
+                    startDate: e,
+                    endDate: topContentDate.endDate,
+                  })
+                }
+                maxValue={topContentDate.endDate}
+              />
+            </PopoverContent>
+          </Popover>
+          <p>to</p>
+          <Popover
+            placement="bottom"
+            classNames={{ content: ["!bg-transparent", "p-0"] }}
+          >
+            <PopoverTrigger>
+              <a className="cursor-pointer underline">
+                {convertDateFormatNoTime(topContentDate.endDate)}
+              </a>
+            </PopoverTrigger>
+            <PopoverContent className="bg-transparent">
+              <Calendar
+                value={topContentDate.endDate}
+                onChange={(e) =>
+                  setTopContentDate({
+                    startDate: topContentDate.startDate,
+                    endDate: e,
+                  })
+                }
+                minValue={topContentDate.startDate}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex flex-col mt-5 overflow-auto gap-3 p-4">
+          <div className="grid grid-cols-3 p-4">
+            <p>Browser</p>
+            <p>Visitors</p>
+            <p>Persentage</p>
+          </div>
+
+          {data &&
+            data?.map((list: any, index: number) => (
+              <div
+                key={list.name}
+                className={`grid grid-cols-3 p-4 ${
+                  selectedLabel === list.name
+                    ? "bg-slate-600 text-white"
+                    : index % 2 == 0
+                    ? "bg-gray-200"
+                    : "bg-white"
+                }`}
+              >
+                <p className="font-semibold">{list.name}</p>
+                <p>{list.value}</p>
+                <p>{getPersentage(list.value)}</p>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}

components/main/dashboard/dashboard-container.tsx

@@ -71,6 +71,7 @@ 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";
 
 type ArticleData = Article & {
   no: number;
@@ -116,52 +117,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();
 
@@ -1132,6 +1087,7 @@ export default function DashboardContainer() {
                 <div className="w-4/5 text-center">{chartVisitorTotal}</div>
               </div>
             </div>
+            <PieChartLoginBrowser />
           </div>
         )}
       </div>

components/table/visitors-table.tsx

@@ -0,0 +1,5 @@
+"use-client";
+
+export default function VisitorsTable() {
+  return <div className="flex flex-col gap-2">aaa</div>;
+}