Add contribution graph mode

[MySTerY1747]

Goal

Added a new graph display mode, that renders habits in a GitHub-style contribution graph: weeks as columns, and days of the week as rows.

Changes

• src/ContributionGraph.svelte: New components that build a week by day grid from the date range given.
• src/HabitTracker.svelte: Adds in a mode setting, which renders the output as a contribution graph if mode === 'graph'
• src/main.ts: Adds a new setting to the page, mode, which is either set to default or graph
• styles.css: Add CSS grid layout for the contribution graph.

Usage

The usage works almost exactly the same way as it did before, but there's a new option that users can add, to indicate whether to use default mode or contribution graph mode:

{
    "path": "habits",
    "mode": "graph"
}

Screenshot

[zincplusplus]

I’m not able to look at it this week. I did test it quickly the day you made it and noticed that the months are not aligned with when the months actually start. Try putting a full year and you will se 13 month headers.

I’ll review it properly next week. I love github’s graph but TBH I’m not sure how I feel about the current implementation in HT21. You/we’d need to figure out how to show streaks and multiple habits in one tracker. Plus look all the other features and params and see if they are supported.

I hope this helps keep the ball rolling until I’m back.

[MySTerY1747]

@zincplusplus Thank you for the feedback. I'll try and implement some of what you mentioned this weekend 👍

[MySTerY1747]

Hi @zincplusplus

Quick update on the contribution graph PR.

I’ve made several improvements since your initial feedback:

• Streaks are now supported in graph mode (current streak 🔥 and best streak 🏆 shown in the footer).
• All existing tracker settings are supported in graph mode and use the same underlying logic as the default mode.
• Fixed the month header alignment bug (no more extra/13th month when rendering longer ranges).
• I manually tested with multiple habits and custom date ranges (daysToShow, firstDisplayedDate, lastDisplayedDate) to make sure the behavior matches the default tracker mode.

One thing I’d like to clarify from your earlier comment about “multiple habits in one tracker.”

Right now, if a folder is used as the path, each habit renders as its own contribution graph, one after the other. For example:

{
  "path": "Misc/Habits/Individual",
  "mode": "graph"
}

This produces a stack of graphs, one per habit, which seems consistent with how the default row mode displays multiple habits.

Is this the behavior you had in mind?

Happy to adjust the implementation if needed :))

[zincplusplus]

hey. checked it out. I appreciate the enthusiasm for contributing, and no judgment on using AI to write code (I do it too). The issue is that the last update shows it didn't fully grasp how the existing features work, which ends up creating more back-and-forth than necessary for both of us.

Here are some observations

• streaks are not visible in graph mode https://github.com/zincplusplus/habit-tracker/releases/tag/2.4.0
• the dots on day 20 and 23 represent when a habit is due next (missing from graph mode)
• the stats line with emojis clash with the minimalist aesthetic - please remove it
• habit name styling doesn't match base
• today is not highlighted
• the graphs don't scroll in sync
• there months in the header still don't align with the dates bellow
  • not sure why December shows up at the beginning since the first day is Jan 1st
• i'd personally remove the mon/wed/fri on the side, but if it says keep it visible while scrolling
• maybe match the font size in the header with base (also the colors)

I haven't dug into the code yet, but I think getting these right first would be a solid step forward. Happy to clarify anything.

[MySTerY1747]

Thanks again for the feedback! I genuinely do appreciate it.

I really care about getting this right, and I'll 100% keep trying. Might take a while, but I will get back to you when it's ready 🫡