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 !
Using GitHub GraphQL API, it retrieves the
contributionCalendar from the
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 😁 ?