53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
CartesianGrid,
|
|
} from "recharts"
|
|
|
|
interface WeeklyData {
|
|
date: string
|
|
minutes: number
|
|
}
|
|
|
|
export function WeeklyActivityChart({ data }: { data: WeeklyData[] }) {
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="text-center text-muted-foreground italic py-8">
|
|
No hay actividad esta semana
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const daysOfWeek = ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"]
|
|
const chartData = data.map((d) => {
|
|
const day = new Date(d.date).getDay()
|
|
return {
|
|
name: daysOfWeek[day],
|
|
minutos: d.minutes,
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className="w-full h-48">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={chartData} margin={{ top: 8, right: 8, bottom: 0, left: -16 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#E8E0D8" />
|
|
<XAxis dataKey="name" tick={{ fontSize: 12, fill: "#6B7280" }} />
|
|
<YAxis tick={{ fontSize: 12, fill: "#6B7280" }} />
|
|
<Tooltip
|
|
contentStyle={{ borderRadius: 12, border: "1px solid #E8E0D8" }}
|
|
formatter={(value: number) => [`${value} min`, "Actividad"]}
|
|
/>
|
|
<Bar dataKey="minutos" fill="#8CB8A0" radius={[6, 6, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)
|
|
}
|