Recently, I found a browser extension called isometric-contributions which displays the GitHub commit calendar in an isometric view. It looked quite neat, but it can't be used as a standalone...
So I decided to make a similar render as part of my metrics plugins suite, which executes itself either as a GitHub action or as a NodeJS server.
Below is the final render, generated with about 80 lines of code :
You can test it with your own GitHub account here by checking "Isometric commit calendar" option !
๐ง Under the hood
Using GitHub GraphQL API, it retrieves the contributionCalendar from the contributionsCollection.
To ensure the last row get a full week, the start date queried is always set to a monday.
Then, it iterates a first time over the contribution calendar to find the highest number of contributions in a single day, the current commits streak and the average commits per day.
Then, it iterates once again over the calendar, but this time to generate the SVG.
Each day creates a new isometric rectangle, with its height depending on the contributionCount of said day scaled to the highest count found previously.
Color is already given by GitHub API (which allows easier supports for the Haloween theme), though it adds brightness filters to simulate shadows and make render nicer.
Pretty simple, no ๐ ?
Top comments (1)
Someone should implement a specific commit schedule to replicate some block of NY or Chicago ๐๐