106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
'use client'
|
|
import dataPendidikan from '@/app/admin/(dashboard)/_state/pendidikan/data-pendidikan';
|
|
import { Box, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
|
import { useShallowEffect } from '@mantine/hooks';
|
|
import { IconSchool } from '@tabler/icons-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
|
import { useProxy } from 'valtio/utils';
|
|
import BackButton from '../../desa/layanan/_com/BackButto';
|
|
import colors from '@/con/colors';
|
|
|
|
function Page() {
|
|
type DPMrafik = {
|
|
id: string;
|
|
name: string;
|
|
jumlah: number;
|
|
};
|
|
|
|
const stateDPM = useProxy(dataPendidikan);
|
|
const [chartData, setChartData] = useState<DPMrafik[]>([]);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useShallowEffect(() => {
|
|
setMounted(true);
|
|
stateDPM.findMany.load();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (stateDPM.findMany.data) {
|
|
setChartData(
|
|
stateDPM.findMany.data.map((item) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
jumlah: Number(item.jumlah),
|
|
}))
|
|
);
|
|
}
|
|
}, [stateDPM.findMany.data]);
|
|
|
|
if (!stateDPM.findMany.data) {
|
|
return (
|
|
<Stack px="md" py="xl">
|
|
<Skeleton h={400} radius="lg" />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack bg="var(--mantine-color-gray-0)" py="xl" gap="lg" pos="relative">
|
|
<Box px={{ base: 'md', md: 100 }}>
|
|
<BackButton />
|
|
</Box>
|
|
|
|
<Box px={{ base: 'md', md: 100 }}>
|
|
<Stack gap="xs" align="center" pb="lg">
|
|
<IconSchool size={48} stroke={1.5} color={colors['blue-button']} />
|
|
<Title order={1} fw={700} ta="center" c={colors['blue-button']}>
|
|
Statistik Data Pendidikan
|
|
</Title>
|
|
<Text c="dimmed" size="sm" ta="center">
|
|
Visualisasi jumlah pendidikan berdasarkan kategori yang tersedia
|
|
</Text>
|
|
</Stack>
|
|
|
|
{!mounted || chartData.length === 0 ? (
|
|
<Paper radius="lg" p="xl" withBorder shadow="sm" bg="var(--mantine-color-white)">
|
|
<Stack align="center" gap="sm" justify="center" h={350}>
|
|
<IconSchool size={40} stroke={1.5} color="var(--mantine-color-gray-5)" />
|
|
<Title order={4} fw={600}>
|
|
Belum Ada Data
|
|
</Title>
|
|
<Text c="dimmed" size="sm">
|
|
Data pendidikan belum tersedia. Silakan tambahkan data untuk melihat grafik.
|
|
</Text>
|
|
</Stack>
|
|
</Paper>
|
|
) : (
|
|
<Paper radius="lg" p="xl" withBorder shadow="sm" bg="var(--mantine-color-white)">
|
|
<Title order={4} fw={600} mb="md">
|
|
Grafik Pendidikan
|
|
</Title>
|
|
<ResponsiveContainer width="100%" height={350}>
|
|
<BarChart data={chartData}>
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip
|
|
contentStyle={{
|
|
borderRadius: 12,
|
|
background: 'var(--mantine-color-gray-0)',
|
|
border: '1px solid var(--mantine-color-gray-3)',
|
|
}}
|
|
cursor={{ fill: 'var(--mantine-color-gray-1)' }}
|
|
/>
|
|
<Legend />
|
|
<Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Penduduk dengan Pendidikan" radius={[8, 8, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</Paper>
|
|
)}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Page;
|