85 lines
2.0 KiB
TypeScript
85 lines
2.0 KiB
TypeScript
import {
|
|
Box,
|
|
Card,
|
|
Group,
|
|
Stack,
|
|
Text,
|
|
useMantineColorScheme,
|
|
} from "@mantine/core";
|
|
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
|
|
|
|
const progressData = [
|
|
{ name: "Selesai", value: 83.33, color: "#22C55E" },
|
|
{ name: "Dikerjakan", value: 16.67, color: "#F59E0B" },
|
|
{ name: "Segera Dikerjakan", value: 0, color: "#3B82F6" },
|
|
{ name: "Dibatalkan", value: 0, color: "#EF4444" },
|
|
];
|
|
|
|
export function ProgressChart() {
|
|
const { colorScheme } = useMantineColorScheme();
|
|
const dark = colorScheme === "dark";
|
|
|
|
return (
|
|
<Card
|
|
p="md"
|
|
radius="xl"
|
|
withBorder
|
|
bg={dark ? "#1E293B" : "white"}
|
|
style={{
|
|
borderColor: dark ? "#334155" : "white",
|
|
boxShadow: dark
|
|
? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
|
|
: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
|
}}
|
|
h="100%"
|
|
>
|
|
<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"} mb="md">
|
|
Progres Kegiatan
|
|
</Text>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<PieChart>
|
|
<Pie
|
|
data={progressData}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={60}
|
|
outerRadius={80}
|
|
paddingAngle={2}
|
|
dataKey="value"
|
|
>
|
|
{progressData.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: dark ? "#1E293B" : "white",
|
|
borderColor: dark ? "#334155" : "#e5e7eb",
|
|
borderRadius: "8px",
|
|
}}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
<Stack gap="xs" mt="md">
|
|
{progressData.map((item, index) => (
|
|
<Group key={index} justify="space-between">
|
|
<Group gap="xs">
|
|
<Box
|
|
w={12}
|
|
h={12}
|
|
style={{ backgroundColor: item.color, borderRadius: 2 }}
|
|
/>
|
|
<Text size="sm" c={dark ? "white" : "gray.7"}>
|
|
{item.name}
|
|
</Text>
|
|
</Group>
|
|
<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
|
|
{item.value.toFixed(2)}%
|
|
</Text>
|
|
</Group>
|
|
))}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|