File size: 4,262 Bytes
4851501 |
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 100 101 102 103 104 105 106 107 108 |
"use client";
import {
BarChart as RechartsBarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
Cell,
Label // Import Label
} from 'recharts';
interface BarChartProps {
data: Array<{ [key: string]: any }>;
title?: string;
xKey?: string;
yKey?: string;
color?: string;
height?: number;
horizontal?: boolean;
xAxisLabel?: string; // New prop
yAxisLabel?: string; // New prop
}
// Color palette for multiple bars
const COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899'];
export default function BarChart({
data,
title,
xKey = 'name',
yKey = 'value',
color = '#6366f1',
height = 300,
horizontal = false,
xAxisLabel,
yAxisLabel
}: BarChartProps) {
return (
<div className="w-full bg-white rounded-xl border border-slate-100 p-4 shadow-sm">
{title && (
<h3 className="text-sm font-semibold text-slate-700 mb-4">{title}</h3>
)}
<ResponsiveContainer width="100%" height={height}>
<RechartsBarChart
data={data}
layout={horizontal ? 'vertical' : 'horizontal'}
margin={{ top: 5, right: 30, left: 20, bottom: 20 }} // Increased bottom margin for label
>
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
{horizontal ? (
<>
<XAxis type="number" tick={{ fill: '#64748b', fontSize: 12 }}>
{xAxisLabel && <Label value={xAxisLabel} offset={-10} position="insideBottom" style={{ fill: '#64748b', fontSize: 12 }} />}
</XAxis>
<YAxis
dataKey={xKey}
type="category"
tick={{ fill: '#64748b', fontSize: 12 }}
width={100}
>
{yAxisLabel && <Label value={yAxisLabel} angle={-90} position="insideLeft" style={{ fill: '#64748b', fontSize: 12 }} />}
</YAxis>
</>
) : (
<>
<XAxis
dataKey={xKey}
tick={{ fill: '#64748b', fontSize: 12 }}
angle={-45}
textAnchor="end"
height={80}
>
{xAxisLabel && <Label value={xAxisLabel} offset={0} position="insideBottom" dy={10} style={{ fill: '#64748b', fontSize: 12 }} />}
</XAxis>
<YAxis tick={{ fill: '#64748b', fontSize: 12 }}>
{yAxisLabel && <Label value={yAxisLabel} angle={-90} position="insideLeft" style={{ fill: '#64748b', fontSize: 12 }} />}
</YAxis>
</>
)}
<Tooltip
contentStyle={{
background: 'white',
border: '1px solid #e2e8f0',
borderRadius: '8px',
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
}}
labelStyle={{ color: '#334155', fontWeight: 600 }}
/>
<Legend wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }} />
<Bar
dataKey={yKey}
radius={[4, 4, 0, 0]}
name={yAxisLabel || yKey.charAt(0).toUpperCase() + yKey.slice(1)} // Use label as legend name if available
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Bar>
</RechartsBarChart>
</ResponsiveContainer>
</div>
);
}
|