Function ActivityHeatmap

src/components/ActivityHeatmap.tsx:29–199

()

}

export function ActivityHeatmap() {
  const [stats, setStats] = useState<HeatmapStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [tooltip, setTooltip] = useState<{ day: string; count: number; x: number; y: number } | null>(null);

  useEffect(() => {
    fetch("/api/activities/stats")
      .then((r) => r.json())
      .then((data) => { setStats(data); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div style={{ padding: "1.5rem", backgroundColor: "var(--card)", borderRadius: "0.75rem", border: "1px solid var(--border)" }}>
        <div style={{ height: "100px", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", fontSize: "0.875rem" }}>
          Loading heatmap...
        </div>
      </div>
    );
  }

  if (!stats) return null;

  // Build 52-week grid
  const today = new Date();
  const startDay = subDays(today, 364);
  const days = eachDayOfInterval({ start: startDay, end: today });
  
  // Pad to start from Sunday
  const firstDayOfWeek = startOfWeek(startDay, { weekStartsOn: 0 });
  const paddedDays = eachDayOfInterval({ start: firstDayOfWeek, end: today });

  // Map data
  const dayMap: Record<string, number> = {};
  for (const d of stats.heatmap) {
    dayMap[d.day] = d.count;
  }

  const maxCount = Math.max(...Object.values(dayMap), 1);

  // Group into weeks (columns)
  const weeks: Array<Array<{ date: Date; count: number }>> = [];
  let currentWeek: Array<{ date: Date; count: number }> = [];
  
  for (const day of paddedDays) {
    const key = format(day, "yyyy-MM-dd");
    currentWeek.push({ date: day, count: dayMap[key] || 0 });
    if (currentWeek.length === 7) {
      weeks.push(currentWeek);
      currentWeek = [];
    }
  }
  if (currentWeek.length > 0) weeks.push(currentWeek);

  const totalActivities = Object.values(dayMap).reduce((a, b) => a + b, 0);
  const topTypes = Object.entries(stats.byType).sort(([, a], [, b]) => b - a).slice(0, 5);