56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Bar, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, BarChart } from "recharts";
|
|
import { useI18n } from "@/lib/i18n/useI18n";
|
|
|
|
type Row = {
|
|
reasonLabel: string;
|
|
minutes: number;
|
|
count: number;
|
|
};
|
|
|
|
type Props = {
|
|
rows: Row[];
|
|
};
|
|
|
|
export default function RecapDowntimeTop({ rows }: Props) {
|
|
const { t } = useI18n();
|
|
const data = rows.slice(0, 3).map((row) => ({ ...row, label: row.reasonLabel.slice(0, 20) }));
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-black/40 p-4">
|
|
<div className="mb-3 text-sm font-semibold text-white">{t("recap.downtime.title")}</div>
|
|
{data.length === 0 ? (
|
|
<div className="text-sm text-zinc-400">{t("recap.empty.production")}</div>
|
|
) : (
|
|
<>
|
|
<div className="h-[170px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.08)" />
|
|
<XAxis dataKey="label" tick={{ fill: "#a1a1aa", fontSize: 11 }} />
|
|
<YAxis tick={{ fill: "#a1a1aa", fontSize: 11 }} />
|
|
<Tooltip
|
|
contentStyle={{ background: "rgba(0,0,0,0.85)", border: "1px solid rgba(255,255,255,0.12)" }}
|
|
labelStyle={{ color: "#e4e4e7" }}
|
|
/>
|
|
<Bar dataKey="minutes" fill="#34d399" radius={[6, 6, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
<div className="mt-2 space-y-1">
|
|
{data.map((row) => (
|
|
<div key={row.reasonLabel} className="flex items-center justify-between text-xs text-zinc-300">
|
|
<span className="truncate">{row.reasonLabel}</span>
|
|
<span>
|
|
{row.minutes.toFixed(1)} min · {row.count}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|