133 lines
3.3 KiB
TypeScript
133 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
|
|
|
|
import { Card } from "ikoncomponents";
|
|
|
|
import { getStatusWiseProjectCount } from "@/app/utils/api/productDashboardApi";
|
|
import { StatusWiseProjectResponseData } from "@/app/utils/api/productDashboardApi/types";
|
|
|
|
const COLORS = [
|
|
"#3b82f6",
|
|
"#f59e0b",
|
|
"#ef4444",
|
|
"#06b6d4",
|
|
"#a855f7",
|
|
"#10b981",
|
|
"#f97316",
|
|
"#14b8a6",
|
|
];
|
|
|
|
export const ProjectsByStatusChartPage = () => {
|
|
const [data, setData] = useState<
|
|
{
|
|
name: string;
|
|
value: number;
|
|
color: string;
|
|
}[]
|
|
>([]);
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchStatusData = async () => {
|
|
try {
|
|
const response = await getStatusWiseProjectCount();
|
|
|
|
const formattedData = response.map(
|
|
(item: StatusWiseProjectResponseData, index: number) => ({
|
|
name: item.status,
|
|
value: item.projectCount,
|
|
color: COLORS[index % COLORS.length],
|
|
}),
|
|
);
|
|
|
|
setData(formattedData);
|
|
} catch (error) {
|
|
console.error("Error fetching status wise project data:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchStatusData();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card className="p-6 h-127 flex items-center justify-center">
|
|
<p className="text-muted-foreground">Loading chart...</p>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (!data.length) {
|
|
return (
|
|
<Card className="p-6 h-127 flex items-center justify-center">
|
|
<p className="text-muted-foreground">No data available</p>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="p-6 h-127 flex flex-col">
|
|
<h3 className="text-lg font-semibold mb-6">Projects by Status</h3>
|
|
|
|
{/* Chart */}
|
|
<div className="w-full h-100">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={90}
|
|
outerRadius={140}
|
|
paddingAngle={4}
|
|
dataKey="value"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={index} fill={entry.color} stroke="none" />
|
|
))}
|
|
</Pie>
|
|
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: "#1e293b",
|
|
border: "none",
|
|
borderRadius: "8px",
|
|
color: "#fff",
|
|
}}
|
|
itemStyle={{ color: "#fff" }}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="flex flex-wrap items-center justify-center gap-3 mt-3">
|
|
{data.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center gap-2 px-3 py-1.5"
|
|
>
|
|
<div
|
|
className="w-2.5 h-2.5 rounded-full"
|
|
style={{
|
|
backgroundColor: item.color,
|
|
}}
|
|
/>
|
|
|
|
<span className="text-sm text-muted-foreground">{item.name}</span>
|
|
|
|
<span className="text-sm font-semibold">{item.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ProjectsByStatusChartPage;
|