88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
BarChart as RechartsBarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
} from 'recharts';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
interface BarChartProps {
|
|
title: string;
|
|
data: { mes: string; ingresos: number; egresos: number }[];
|
|
}
|
|
|
|
const formatCurrency = (value: number) => {
|
|
if (value >= 1000000) {
|
|
return `$${(value / 1000000).toFixed(1)}M`;
|
|
}
|
|
if (value >= 1000) {
|
|
return `$${(value / 1000).toFixed(0)}K`;
|
|
}
|
|
return `$${value}`;
|
|
};
|
|
|
|
export function BarChart({ title, data }: BarChartProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-medium">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[300px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RechartsBarChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis
|
|
dataKey="mes"
|
|
tick={{ fontSize: 12 }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
className="text-muted-foreground"
|
|
/>
|
|
<YAxis
|
|
tickFormatter={formatCurrency}
|
|
tick={{ fontSize: 12 }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
className="text-muted-foreground"
|
|
/>
|
|
<Tooltip
|
|
formatter={(value: number) =>
|
|
new Intl.NumberFormat('es-MX', {
|
|
style: 'currency',
|
|
currency: 'MXN',
|
|
}).format(value)
|
|
}
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--card))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '8px',
|
|
}}
|
|
/>
|
|
<Legend />
|
|
<Bar
|
|
dataKey="ingresos"
|
|
name="Ingresos"
|
|
fill="hsl(var(--success))"
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
<Bar
|
|
dataKey="egresos"
|
|
name="Egresos"
|
|
fill="hsl(var(--destructive))"
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
</RechartsBarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|