File size: 2,319 Bytes
66ed0c8 bf5a50c 66ed0c8 bf5a50c 66ed0c8 bf5a50c 66ed0c8 bf5a50c 66ed0c8 bf5a50c bb909a5 66ed0c8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 'use client'
import { ChartData } from '@/types/chart'
import {
Bar,
BarChart,
CartesianGrid,
Cell,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from 'recharts'
type ChartBarProps = {
loading: boolean
data: ChartData[]
}
export function ChartBar({
loading,
data
}: ChartBarProps) {
const rows = 8
// -----------------------
// 🔹 LOADING STATE
// -----------------------
if (loading) {
return (
<div
className="w-full"
style={{ height: rows * 40 }}
>
<div className="flex flex-col gap-4 animate-pulse">
{Array.from({ length: rows }).map((_, index) => (
<div key={index} className="flex items-center gap-4">
<div className="h-4 bg-gray-200 rounded w-48" />
<div
className="h-5 bg-gray-200 rounded"
style={{
width: `${40 + Math.random() * 50}%`,
}}
/>
</div>
))}
</div>
</div>
)
}
// -----------------------
// 🔹 EMPTY STATE
// -----------------------
if (!data || data.length === 0) {
return (
<div className="w-full h-60 flex flex-col items-center justify-center text-gray-400">
<div className="w-16 h-40 border-4 border-dashed border-gray-200 rounded mb-4" />
<p className="text-sm">No data available</p>
</div>
)
}
// -----------------------
// 🔹 CHART
// -----------------------
return (
<ResponsiveContainer
width="100%"
height={Math.max(250, data.length * 40)}
// height={300}
>
<BarChart
data={data}
layout="vertical"
margin={{ top: 5, right: 30, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
<XAxis type="number" />
<YAxis
dataKey="name"
type="category"
width={220}
tickFormatter={(value: string) =>
value.length > 25 ? value.slice(0, 25) + '...' : value
}
/>
<Tooltip />
<Bar dataKey="value" radius={[0, 8, 8, 0]}>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
)
} |