gitea contribution heatmap
Everyone knows the contribution calendar heatmap from github profiles, which shows the activity of a developer.
With the announcement of Microsoft to take-over github.com, many people start moving to gitlab.com or self-hosted solutions such as gitea.io
Currently gitea.io has a lack of this heatmap feature. In this article I will show you how to easily add such heatmap to your gitea instance with the help of grafana.
Requirements
- you need a gitea installation with MariaDB, Postgres os MySQL backend. SQLite won’t work.
- a grafana installation with anonymous access enabled. I recommend an extra grafana installation for that.
- you need this grafana plugin: https://grafana.com/plugins/neocat-cal-heatmap-panel
SQL Preparation
For security reasons, you should add a new “select-only” database user which will access the action table of gitea.
Use this credentials for the datasource in grafana.
Grafana Panel Setup
Create a new “Cal-HeadMap” panel, select the previous added datasource and use this SQL statement.
You must replace the “user_id” by the id of your user of interest. On a single user gitea instance, you probably don’t need to change it.
The time range is controlled by grafana. I recommend to set and save the default time range from now to “Last Month”. But it depends where you want to put the headmap on your gitea templates.
You can now change colors and other settings for the heatmap as you like. FYI: this is my
The last step is to share your created panel and choose “embed”. Furthermore, uncheck “current time range”, because we want the time range “This month” from now on. Copy the html string… we need it later.
customize gitea template
Go to your gitea root and create templates/user/profile.tmpl
You can take the origin from here: https://github.com/go-gitea/gitea/blob/master/templates/user/profile.tmpl
Now you need to decide where to put the headmap on the profile page. I put it below the “Joined on …” line.
This is how the edit looks like here
You should display the headmap only for your user (in case there are more users on your gitea instance.
Furthermore, you should reduce the with of the grafana iframe to 250px, when adding it to the sidebar as I did.
Basically, that’s all. Restart gitea to apply the template change.
