dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added a feature for the git heatmap which shows the amount of commits done on the cell youre hovering over

Browse source
This commit is contained in:
dvorakmortonxd 2026-05-15 23:54:18 +02:00
commit bf03908323
1 changed files with 21 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/app/components/ContributionHeatmap.tsx
View file

@ -31,6 +31,7 @@ export default function ContributionHeatmap() {
const [error, setError] = useState(false);
const [totalContribs, setTotalContribs] = useState(0);
const [activities, setActivities] = useState<Activity[]>([]);
const [hoveredCell, setHoveredCell] = useState<{ date: string; contribs: number } | null>(null);
useEffect(() => {
async function fetchHeatmap() {
@ -45,7 +46,7 @@ export default function ContributionHeatmap() {
data.forEach((item) => {
const d = new Date(item.timestamp * 1000);
const dateStr = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
map.set(dateStr, item.contributions);
map.set(dateStr, (map.get(dateStr) || 0) + item.contributions);
total += item.contributions;
});
@ -135,20 +136,31 @@ export default function ContributionHeatmap() {
data-level={day.level >= 0 ? day.level : undefined}
style={{ visibility: day.level === -1 ? "hidden" : "visible" }}
title={day.level >= 0 ? `${day.contribs} contributions on ${day.date}` : undefined}
onMouseEnter={() => day.level >= 0 && setHoveredCell({ date: day.date, contribs: day.contribs })}
onMouseLeave={() => setHoveredCell(null)}
>
</div>
))}
</div>
))}
</div>
<div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "4px", fontSize: "0.75rem", color: "var(--gray)" }}>
<span>Less</span>
<div className="heatmap-legend-cell" data-level="0"></div>
<div className="heatmap-legend-cell" data-level="1"></div>
<div className="heatmap-legend-cell" data-level="2"></div>
<div className="heatmap-legend-cell" data-level="3"></div>
<div className="heatmap-legend-cell" data-level="4"></div>
<span>More</span>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.75rem", color: "var(--gray)", marginTop: "4px" }}>
<div>
{hoveredCell ? (
<span><strong style={{ color: "var(--fg)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
) : (
<span>Hover over a day to see contributions</span>
)}
</div>
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<span>Less</span>
<div className="heatmap-legend-cell" data-level="0"></div>
<div className="heatmap-legend-cell" data-level="1"></div>
<div className="heatmap-legend-cell" data-level="2"></div>
<div className="heatmap-legend-cell" data-level="3"></div>
<div className="heatmap-legend-cell" data-level="4"></div>
<span>More</span>
</div>
</div>
{activities.length > 0 && (