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 🫡

[MySTerY1747]

Hello @zincplusplus! I've made a lot of changes, and would love your feedback.

Core functionality

• Implemented streak support in graph mode using a cleaner approach
• Ensured feature parity with default mode where applicable

Visual and UX improvements

• Added ghost dots for upcoming due days, correctly respecting the habit color
• Implemented “today” highlighting, including fixes for visibility and clipping issues
• Reworked streak visualization:
  • Removed emoji-based footer (🔥🏆) to match minimalist design
  • Introduced in-cell streak numbers with improved sizing, contrast, and readability
  • Fixed rendering issues (no more artifacts or inconsistent backgrounds)
• Improved gap day rendering (maxGap):
  • Gap days are now clearly part of a streak while remaining visually distinct
  • Uses color-based variations instead of neutral grey/white
  • Handles edge cases like very light/white colors

Layout and styling

• Fixed month header alignment:
  • Month labels now correctly align with week-based grid columns
  • Resolved overlapping labels and incorrect month placement (e.g. December appearing before January)
• Adjusted cell sizing and overall graph scale for better readability and spacing
• Ensured habit name styling matches default mode
• Matched header font size and colors with default mode
• Removed weekday labels (Mon/Wed/Fri) for a cleaner look
• Ensured graphs scroll in sync when multiple habits are displayed

I have been using this modified version of the plugin daily now, and it has brought me so muc value. I really want to work on this for as long as needed, so that people can start using it. Any feedback would be greatly appreciated!

[MySTerY1747]

Hey @zincplusplus

Have you had any time to view the above changes? I'd really appreciate any feedback :))

[zincplusplus]

I'll try over the weekend. I'm curios to see it because I tired in the past and couldn't pull it off. But so far work need all my attention

[zincplusplus]

Things have been hectick on this side of the screen. I'm sorry you had to wait so long for a reply. I finally got around to test it and here are my findings:

Blocking

1. A is allocated per cell on every render. getCellStyle(cell) is called inline for every cell in the template, and toRgb() does document.createElement('canvas') each call. Since customColor is constant for the whole habit, this re-parses the same color once per cell (hundreds of times for a year-long graph) and repeats on every reactive update (toggle, file modify). Could we compute the style once reactively and reuse it?

$: cellStyle = customColor ? buildCellStyle(customColor) : ''
…then style={cell.ticked || cell.gap || cell.deadline || cell.today ? cellStyle : ''}.

2. The streak/gap/deadline engine is duplicated from Habit.svelte. renderedDates (~80 lines) is copied almost verbatim from Habit.svelte. The "keep aligned with default mode" comment captures the risk — these two will drift. Could this be extracted into utils.js and shared by both components? That also resolves the overlap between isValidCSSColor and the manual toRgb parser.

Minor

• mode typed as string — since only 'default' and 'graph' are valid, a 'default' | 'graph' union would catch typos.
• entries = frontmatter.entries; entries.sort() crashes if getFrontmatter returns {} (its error/no-file path) — entries is undefined. A || [] guard would harden it.
• this.app usage in getFrontmatter/toggleHabit is carried over from Habit.svelte; if the extraction above happens, worth resolving the this binding at the same time.
  Happy to pair on the shared-utils extraction if useful.

[psxvoid]

Hi,

Not sure why, but after installing this version of the plugin, a habit tracker graph-mode looks like this in my vault:

[MySTerY1747]

Sorry for the slow development, had some personal things get in the way lately.

@psxvoid As for the graph mode you're showing, I'm not sure I understand what's wrong? If you increase the number of days shown to a larger number (say ~180), it should look more like the screenshots I have provided above.
If I just misunderstood the problem do let me know!

I am planning to make some further changes soon based on the feedback I got.

[psxvoid]

Sorry for the slow development, had some personal things get in the way lately.

Don't be sorry, it's free and open source, thanks for your efforts! :)

If you increase the number of days shown to a larger number (say ~180), it should look more like the screenshots I have provided above.

Yep, this is the case, setting it to 180 "fixes" it. I just wasn't expecting it to look likes this for daysToShow: 21 - it looked like something is broken because M...Jun for months and the overall layout were a bit strange due to all habits fit into a single long narrow column. I would consider limiting minDaysToShow for the graph-mode or making the layout a bit more responsive (e.g. multiple habits per row).

[MySTerY1747]

Thank you for the feedback! I genuinely really appreciate it. I'll be sure to bear this in mind when I sit down and work on this again (hopefully next week). Hope you have a very nice day.