legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add pie chart component and integrate it into the dashboard

Browse Source
This commit is contained in:
fredy.siswanto 2025-02-25 22:52:26 +07:00
parent b7e029546f
commit bd92f9a09f
2 changed files with 106 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app/components/ui/chart.tsx Normal file
View File

@ -0,0 +1,66 @@
import {
Chart as ChartJS,
ArcElement,
Tooltip,
Legend,
type ChartOptions,
} from 'chart.js'
import { Pie } from 'react-chartjs-2'
ChartJS.register(ArcElement, Tooltip, Legend)
export const ChartPie = () => {
const data = {
labels: [
'Pidana',
'Perdata',
'Perceraian',
'Surat Bisnis',
'Surat Tanah',
'Lainnya',
],
datasets: [
{
data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
backgroundColor: [
'#FFB300',
'#4CAF50',
'#3F51B5',
'#F44336',
'#2196F3',
'#FF9800',
],
hoverOffset: 4,
},
],
}
const options: ChartOptions<'pie'> = {
maintainAspectRatio: true,
responsive: false,
plugins: {
legend: {
position: 'right',
labels: {
usePointStyle: true,
pointStyle: 'circle',
padding: 20,
},
},
},
layout: {
padding: 0,
},
}
return (
<div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center">
<h2 className="text-xl font-bold">Top 5 Konten</h2>
<Pie
height={225}
width={450}
data={data}
options={options}
/>
</div>
)
}

93
app/pages/dashboard/index.tsx
View File

@ -1,68 +1,55 @@
import { CardReport } from '~/components/ui/card-report'
import { ChartPie } from '~/components/ui/chart'
import { HISTORY, REPORT } from './data'
export const DashboardPage = () => {
return (
<div className="relative">
<div className="container mx-auto">
<section className="mb-5 flex items-center justify-between">
<h1 className="text-xl font-bold">Dashboard</h1>
<div className="flex items-center gap-2">
<span>Tanggal:</span>
<input
type="date"
className="rounded border p-2"
/>
<input
type="date"
className="rounded border p-2"
/>
</div>
</section>
<div className="mt-5 grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-3">
{REPORT.map(({ title, amount, icon }, index) => (
<CardReport
key={index}
title={title}
amount={amount}
icon={icon}
/>
))}
</div>
<div className="mb-5 grid grid-cols-3 gap-4">
{REPORT.map(({ title, amount, icon }, index) => (
<CardReport
key={index}
title={title}
amount={amount}
icon={icon}
/>
))}
<div className="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-3 sm:grid-rows-2">
{HISTORY.map(({ title, amount, icon, counter }, index) => (
<CardReport
key={index}
title={title}
amount={amount}
icon={icon}
counter={counter}
/>
))}
<div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
<ChartPie />
</div>
</div>
<div className="grid grid-cols-3 gap-x-4 gap-y-4">
<div className="grid gap-y-4">
{HISTORY.map(({ title, amount, icon, counter }, index) => (
<CardReport
key={index}
title={title}
amount={amount}
icon={icon}
counter={counter}
<div className="my-5 grid grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-5 sm:grid-rows-1">
<div className="sm:col-span-3">
<div className="h-30 w-full">
<div className="shadow-sm">
<img
src="/images/dummy-chart-1.svg"
alt=""
/>
))}
</div>
<div className="col-span-2">
<img
src="/images/dummy-chart-2.svg"
alt=""
/>
</div>
</div>
</div>
<div className="mt-5 flex justify-between gap-5">
<div className="w-[600px] shadow-sm">
<img
src="/images/dummy-chart-1.svg"
alt=""
/>
</div>
<div className="w-[480px] shadow-sm">
<img
src="/images/dummy-chart-3.svg"
alt=""
/>
<div className="sm:col-span-2 sm:col-start-4">
<div className="h-30 w-full">
<div className="shadow-sm">
<img
src="/images/dummy-chart-3.svg"
alt=""
/>
</div>
</div>
</div>
</div>