← back to blog
quantified self

Streak Tracking and Heatmaps — Visualize Your Consistency

4 min read

GitHub's contribution graph is one of the most effective behavior design patterns in software. A grid of green squares makes consistency visible — and makes breaking a streak feel costly. xeve applies the same idea to every metric it tracks.

The Streaks Page

The Streaks page shows heatmap grids for multiple metrics. Each grid covers the last 12 months, with each cell representing one day. The color intensity maps to the metric value — light for low activity, full orange for high activity. Empty cells (no data) are visually distinct from zero-value cells.

The default view tracks these metrics:

  • Productive time — hours of focused app usage per day
  • Coding time — hours in VS Code or Claude Code per day
  • Steps — daily step count from HealthKit
  • Commits — GitHub commits per day
  • Music — hours of Spotify listening per day

Streak Counters

Below each heatmap, xeve shows your current streak (consecutive days with activity above the threshold), your longest streak ever, and the total number of active days. The threshold is configurable — you might want "coding streak" to mean 30+ minutes, not just one heartbeat.

Streaks reset at midnight in your local timezone. The timezone handling uses the same getDateRange utility as the rest of the dashboard, ensuring your Monday is your actual Monday regardless of where the server thinks you are.

Monthly Summary Bars

Each heatmap also includes a monthly summary bar below the grid — a horizontal bar chart showing the total for each month. This makes seasonal patterns visible: maybe you code more in winter, walk more in summer, or have a consistent dip every December.

Hover Details

Hovering over any cell shows a tooltip with the exact date and value. This makes the heatmap useful as a lookup tool, not just a visualization. "What day last month did I code 6+ hours?" — hover across the bright cells to find it.

The Psychology of Streaks

Streak tracking is a double-edged sword. It motivates consistency but can also create unhealthy pressure. xeve shows streaks without gamification — no badges, no achievements, no social comparison. The data is for you, and breaking a streak has no consequence beyond the visual gap in your grid.

The goal is awareness, not guilt. If your coding heatmap shows a three-week gap, maybe that was vacation. Maybe it was burnout. The heatmap does not judge — it just makes the pattern visible so you can decide what to do about it.

Written by Kevin — builder of xeve

Track your apps, coding, music, and health — all in one place.

try xeve free