42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
interface CommitsByDateProps {
|
|
commits: Array<{ date: string; count: number }>;
|
|
className?: string;
|
|
}
|
|
|
|
export function CommitsByDateChart({ commits, className }: CommitsByDateProps) {
|
|
const sortedCommits = [...commits].sort(
|
|
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
|
|
);
|
|
|
|
const maxValue = Math.max(...sortedCommits.map(c => c.count), 1);
|
|
|
|
return (
|
|
<div className={className}>
|
|
<h4 className="text-sm font-semibold mb-4">Commits par date</h4>
|
|
<div className="flex items-end gap-2 h-40">
|
|
{sortedCommits.map((commit, idx) => {
|
|
const height = (commit.count / maxValue) * 100;
|
|
const date = new Date(commit.date);
|
|
const label = date.toLocaleDateString("fr-FR", { day: "2-digit", month: "short" });
|
|
return (
|
|
<div key={idx} className="flex-1 flex flex-col items-center gap-1">
|
|
<span className="text-xs text-muted-foreground">
|
|
{commit.count > 0 ? commit.count : ''}
|
|
</span>
|
|
<div
|
|
className="w-full bg-emerald-500 rounded-t-sm"
|
|
style={{
|
|
height: `${height}%`,
|
|
minHeight: commit.count > 0 ? '24px' : '0'
|
|
}}
|
|
title={`${label}: ${commit.count} commits`}
|
|
/>
|
|
<span className="text-xs text-muted-foreground">{label}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|