feat:pie chart
This commit is contained in:
Rama Priyanto
parent
278dd75a61
commit
70e2fb006e
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
"use-client";
|
||||
|
||||
export default function VisitorsTable() {
|
||||
return <div className="flex flex-col gap-2">aaa</div>;
|
||||
}
|
||||
Loading…
Reference in New Issue