90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
|
import PageContainer from "~/components/page-container";
|
||
|
|
import { DataTable } from "~/components/table/data-table";
|
||
|
|
import Spinner from "~/components/ui/spinner";
|
||
|
|
import { useGetHistoryTokenByID } from "~/services/history-token/get-by-id";
|
||
|
|
import { columns } from "./table/columns";
|
||
|
|
import { useParams } from "@remix-run/react";
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||
|
|
import {
|
||
|
|
CartesianGrid,
|
||
|
|
Line,
|
||
|
|
LineChart,
|
||
|
|
ResponsiveContainer,
|
||
|
|
Tooltip,
|
||
|
|
XAxis,
|
||
|
|
YAxis,
|
||
|
|
} from "recharts";
|
||
|
|
|
||
|
|
export default function ThirdSection() {
|
||
|
|
const { id } = useParams<{ id: string }>();
|
||
|
|
const { data, isLoading } = useGetHistoryTokenByID(id ?? "");
|
||
|
|
|
||
|
|
const transformedData =
|
||
|
|
data
|
||
|
|
?.map((item) => ({
|
||
|
|
date: new Date(item.created_at).toLocaleDateString("id-ID", {
|
||
|
|
month: "short",
|
||
|
|
year: "2-digit",
|
||
|
|
}),
|
||
|
|
value: item.nilai,
|
||
|
|
}))
|
||
|
|
.sort((a, b) => {
|
||
|
|
const dateA = new Date(a.date).getTime();
|
||
|
|
const dateB = new Date(b.date).getTime();
|
||
|
|
return dateA - dateB;
|
||
|
|
}) || [];
|
||
|
|
|
||
|
|
const formatNumber = (value: number) => {
|
||
|
|
return new Intl.NumberFormat("id-ID").format(Number(value));
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PageContainer>
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="space-y-4">
|
||
|
|
<Card className="col-span-2">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
||
|
|
<CardTitle>Grafik Performa Penyertaan Modal Usaha</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="w-full">
|
||
|
|
<ResponsiveContainer width="100%" height={300} className="w-full overflow-auto">
|
||
|
|
<LineChart data={transformedData}>
|
||
|
|
<CartesianGrid strokeDasharray="3 3" />
|
||
|
|
<XAxis dataKey="date" tick={{ fontSize: 14 }} />
|
||
|
|
<YAxis dataKey="value" tick={{ fontSize: 14 }} tickFormatter={formatNumber} />
|
||
|
|
<Tooltip
|
||
|
|
formatter={(value: number) => formatNumber(value)}
|
||
|
|
labelFormatter={(label) => `Periode: ${label}`}
|
||
|
|
/>
|
||
|
|
<Line
|
||
|
|
type="monotone"
|
||
|
|
dataKey="value"
|
||
|
|
stroke="#16A34A"
|
||
|
|
strokeWidth={2}
|
||
|
|
dot={{ fill: "#16A34A", r: 4 }}
|
||
|
|
activeDot={{ r: 6 }}
|
||
|
|
/>
|
||
|
|
</LineChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-3 overflow-hidden rounded-md bg-white p-5 shadow-md">
|
||
|
|
{isLoading ? (
|
||
|
|
<div className="mx-auto flex items-center justify-center">
|
||
|
|
<Spinner />
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<DataTable
|
||
|
|
columns={columns}
|
||
|
|
data={data ?? []}
|
||
|
|
searchKey="created_at"
|
||
|
|
searchLabel="tanggal"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</PageContainer>
|
||
|
|
);
|
||
|
|
}
|