Kirubel-Kibru-Yaltopia
89440985f1
Some checks failed
Deploy to Cloudflare Workers / deploy (push) Has been cancelled
115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
BarChart,
|
|
Bar,
|
|
} from "recharts";
|
|
const COLORS = { W: "#34d399", D: "#fbbf24", L: "#f87171" };
|
|
|
|
export function FormDonutChart({
|
|
data,
|
|
}: {
|
|
data: { name: string; value: number }[];
|
|
}) {
|
|
return (
|
|
<div className="h-[180px] w-full">
|
|
<ResponsiveContainer width="100%" height={180}>
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={50}
|
|
outerRadius={70}
|
|
dataKey="value"
|
|
nameKey="name"
|
|
>
|
|
{data.map((entry) => (
|
|
<Cell key={entry.name} fill={COLORS[entry.name as keyof typeof COLORS] || "#8b95a8"} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** @deprecated Use FormDonutChart inside a Card */
|
|
export const FormDonut = FormDonutChart;
|
|
|
|
export function GoalsTrendChart({
|
|
data,
|
|
}: {
|
|
data: { matchday: number; gf: number; ga: number }[];
|
|
}) {
|
|
return (
|
|
<div className="h-[200px] w-full">
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<LineChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
|
|
<XAxis dataKey="matchday" stroke="#8b95a8" fontSize={12} />
|
|
<YAxis stroke="#8b95a8" fontSize={12} />
|
|
<Tooltip contentStyle={{ background: "#12182b", border: "1px solid rgba(255,255,255,0.1)" }} />
|
|
<Line type="monotone" dataKey="gf" stroke="#22d3ee" name="GF" strokeWidth={2} />
|
|
<Line type="monotone" dataKey="ga" stroke="#f472b6" name="GA" strokeWidth={2} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TopScorersChart({
|
|
data,
|
|
dataKey,
|
|
title,
|
|
}: {
|
|
data: { name: string; value: number }[];
|
|
dataKey: string;
|
|
title: string;
|
|
}) {
|
|
return (
|
|
<div className="h-[200px] w-full">
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<BarChart data={data} layout="vertical" margin={{ left: 60 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
|
|
<XAxis type="number" stroke="#8b95a8" fontSize={12} />
|
|
<YAxis type="category" dataKey="name" stroke="#8b95a8" fontSize={11} width={55} />
|
|
<Tooltip contentStyle={{ background: "#12182b", border: "1px solid rgba(255,255,255,0.1)" }} />
|
|
<Bar dataKey={dataKey} fill="#a78bfa" radius={[0, 4, 4, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function StatCards({
|
|
stats,
|
|
}: {
|
|
stats: { label: string; value: string | number }[];
|
|
}) {
|
|
return (
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
|
{stats.map((s) => (
|
|
<div
|
|
key={s.label}
|
|
className="rounded-xl border border-border bg-card p-4"
|
|
>
|
|
<p className="text-xs text-muted-foreground">{s.label}</p>
|
|
<p className="mt-1 text-2xl font-bold">{s.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|