Heatmap: hue gradient instead of saturation #2823

Originally created by @davidak on GitHub (Jan 26, 2019).

Gitea version (or commit ref): 1.7
Git version:
Operating system:
Database (use [x]):
- PostgreSQL
- MySQL
- MSSQL
- SQLite
Can you reproduce the bug at https://try.gitea.io:
- Yes (provide example URL)
- No
- Not relevant
Log gist:

Description

GitHub is perfect.

Screenshots

Gitea

GitHub

GitLab

Originally created by @davidak on GitHub (Jan 26, 2019). - Gitea version (or commit ref): 1.7 - Git version: - Operating system: - Database (use `[x]`): - [ ] PostgreSQL - [ ] MySQL - [ ] MSSQL - [ ] SQLite - Can you reproduce the bug at https://try.gitea.io: - [ ] Yes (provide example URL) - [ ] No - [ ] Not relevant - Log gist: ## Description GitHub is perfect. ## Screenshots ### Gitea ![screenshot from 2019-01-26 17-44-33](https://user-images.githubusercontent.com/91113/51790180-10a98e00-2192-11e9-9cfc-f1eca0c265f0.png) ### GitHub ![screenshot from 2019-01-26 17-44-53](https://user-images.githubusercontent.com/91113/51790186-1b642300-2192-11e9-9e49-101ef06740fa.png) ### GitLab ![screenshot from 2019-01-26 17-45-23](https://user-images.githubusercontent.com/91113/51790196-346cd400-2192-11e9-89c4-04a8fbbae706.png)

GiteaMirror added the issue/confirmed topic/ui labels 2025-11-02 04:49:41 -06:00

GiteaMirror closed this issue

GiteaMirror commented

@zeripath commented on GitHub (Jan 26, 2019):

I'm not sure. I've never quite been able to understand GitHubs hue gradient - saturation seems intuitive to me.

@zeripath commented on GitHub (Jan 26, 2019): I'm not sure. I've never quite been able to understand GitHubs hue gradient - saturation seems intuitive to me.

GiteaMirror commented

@davidak commented on GitHub (Jan 27, 2019):

@zeripath darker color means more activity. I think that's commonly used for visualization.

The current implementation seems too simple in that space.

It looks too dark and feels depressing to me. It should have the bright green of the logo included.

@davidak commented on GitHub (Jan 27, 2019): @zeripath darker color means more activity. I think that's commonly used for visualization. The current implementation seems too simple in that space. It looks too dark and feels depressing to me. It should have the bright green of the logo included.

GiteaMirror commented

@0x5c commented on GitHub (Jan 27, 2019):

Ah yes, that's the problem that I was having with it, without knowing what it was.

I might be able to make a palette today.

@0x5c commented on GitHub (Jan 27, 2019): Ah yes, that's the problem that I was having with it, without knowing what it was. I might be able to make a palette today.

GiteaMirror commented

@0x5c commented on GitHub (Jan 27, 2019):

Okay, so I took a look at the three palettes, and they all are gradient on hue, saturation, and value.
What seems to be different is the curves done on the colour-picker; GitHub and GitLab both do a curve towards the saturated/high-value corner, while Gitea does a curve in the opposite direction.

@0x5c commented on GitHub (Jan 27, 2019): Okay, so I took a look at the three palettes, and they all are gradient on hue, saturation, *and* value. What seems to be different is the curves done on the colour-picker; GitHub and GitLab both do a curve towards the saturated/high-value corner, while Gitea does a curve in the opposite direction.

GiteaMirror commented

@0x5c commented on GitHub (Jan 27, 2019):

I've done some work on colouring

Current palette

Proposed palette n°1

Partial, not really suitable as-is.

Proposed palette n°2

Those proposition only contain 5 colours; it is assumed that the first one is the current (#F4F4F4).
The Gitea colour (#609926) is included in both, at the before-last position.
Feel free to modify or expand on these.

@0x5c commented on GitHub (Jan 27, 2019): I've done some work on colouring ## Current palette ![](https://coolors.co/export/png/d0e7da-a0cca8-6fb078-399778-007616) ## Proposed palette n°1 Partial, not really suitable as-is. ![](https://coolors.co/export/png/e8fccf-b2e898-4eab6b-609926-134611) ## Proposed palette n°2 ![](https://coolors.co/export/png/cde5b3-9fdb81-71bc5c-609926-025900) Those proposition only contain 5 colours; it is assumed that the first one is the current (`#F4F4F4`). The Gitea colour (`#609926`) is included in both, at the before-last position. Feel free to modify or expand on these.

GiteaMirror commented

https://codeberg.org/hw?tab=activity
https://codeberg.org/wahn?tab=activity

@davidak commented on GitHub (Jan 27, 2019):

@0x5c thank you!

The gradient in the first palette looks a bit hard. The color in the middle looks very unnatural. Maybe that is what you mean with "not suitable as-is".

The seconds palette looks great! Could you try it out with the actual heatmap in the browser?

Here are profiles i found with actual activity:

@davidak commented on GitHub (Jan 27, 2019): @0x5c thank you! The gradient in the first palette looks a bit hard. The color in the middle looks very unnatural. Maybe that is what you mean with "not suitable as-is". The seconds palette looks great! Could you try it out with the actual heatmap in the browser? Here are profiles i found with actual activity: https://codeberg.org/hw?tab=activity https://codeberg.org/wahn?tab=activity

GiteaMirror commented

@0x5c commented on GitHub (Jan 28, 2019):

No problem!
I'll try it, and maybe tweak prop2 a slight bit.
As for prop1, this is exactly what I meant, but I included it as a possible starting point for someone else, as it's what I used as a base for prop2.

@0x5c commented on GitHub (Jan 28, 2019): No problem! I'll try it, and maybe tweak prop2 a slight bit. As for prop1, this is exactly what I meant, but I included it as a possible starting point for someone else, as it's what I used as a base for prop2.

GiteaMirror commented

@0x5c commented on GitHub (Jan 28, 2019):

Ewwwwww
So the boxes are not coloured by CSS styles, which means I'll have to manually replace the colours.

@0x5c commented on GitHub (Jan 28, 2019): Ewwwwww So the boxes are not coloured by CSS styles, which means I'll have to manually replace the colours.

GiteaMirror commented

@davidak commented on GitHub (Jan 28, 2019):

@0x5c maybe just take a screenshot and replace color with gimp or so...

@davidak commented on GitHub (Jan 28, 2019): @0x5c maybe just take a screenshot and replace color with gimp or so...

GiteaMirror commented

@0x5c commented on GitHub (Jan 28, 2019):

I have not yet been able to try recoloring, but I suspect that it will cause problems as the squares are somehow anti-aliased (why?).

I was able, however, to create this 3rd version, which now follows an entirely convex curve.

Proposed palette n°3

@0x5c commented on GitHub (Jan 28, 2019): I have not yet been able to try recoloring, but I suspect that it will cause problems as the squares are somehow anti-aliased *(why?)*. I was able, however, to create this 3rd version, which now follows an entirely convex curve. ## Proposed palette n°3 ![](https://coolors.co/export/png/cde5b3-9fdb81-66c74b-609926-025900)

GiteaMirror commented

@davidak commented on GitHub (Jan 28, 2019):

@0x5c 3. looks good!

I just used GIMPs replace color tool on a screenshot. Looks perfect!

When it's this small and i go back 1 meter from the display, the contrast is not that high. I can hardly tell a difference between the 2. and 3. color. I think it's a little better on GitHub since it's a different color tone.

@davidak commented on GitHub (Jan 28, 2019): @0x5c 3. looks good! I just used GIMPs replace color tool on a screenshot. Looks perfect! ![screenshot from 2019-01-28 17-55-32](https://user-images.githubusercontent.com/91113/51853075-b4787280-2327-11e9-93e3-cc218bbe3720.png) When it's this small and i go back 1 meter from the display, the contrast is not that high. I can hardly tell a difference between the 2. and 3. color. I think it's a little better on GitHub since it's a different color tone.

GiteaMirror commented

@0x5c commented on GitHub (Jan 28, 2019):

Oh nice!
I see what you mean for colour 2/3, but I don't think that it would be that much of a problem?
I could try a slight variation on colour 2 (one in the palettes).

@0x5c commented on GitHub (Jan 28, 2019): Oh nice! I see what you mean for colour 2/3, but I don't think that it would be *that* much of a problem? I could try a slight variation on colour 2 (one in the palettes).

GiteaMirror commented

@0x5c commented on GitHub (Jan 28, 2019):

Palette proposition v4

Slightly tweaked the first one from #cde5b3 to #d8efbf.
(actual first is still #f4f4f4)

@0x5c commented on GitHub (Jan 28, 2019): ## Palette proposition v4 Slightly tweaked the first one from `#cde5b3` to `#d8efbf`. (actual first is still `#f4f4f4`) ![](https://coolors.co/export/png/d8efbf-9fdb81-66c74b-609926-025900)

GiteaMirror commented

@davidak commented on GitHub (Jan 28, 2019):

Yeah, it might not be a problem. Already a huge improvement to the current colors.

@davidak commented on GitHub (Jan 28, 2019): Yeah, it might not be a problem. Already a huge improvement to the current colors.

GiteaMirror commented

@0x5c commented on GitHub (Jan 29, 2019):

Welp
The colours are auto-generated by cal-heatmap, which seems to have no concept of humans are supposed to see this.
It takes two colours, and then proceeds to create the most eye-stabbing gradient possible. It's also the reason why the heatmap squares have fudgy edges, even on the showcase site.

I do not see how, using this library, the colours of the heatmap could be fixed.

Edit:
Note that github uses absolute and defined values (the ones in the legend) for the colours.

@0x5c commented on GitHub (Jan 29, 2019): Welp The colours are auto-generated by [cal-heatmap](https://cal-heatmap.com/), which seems to have no concept of *humans are supposed to see this*. It takes two colours, and then proceeds to create the most eye-stabbing gradient possible. It's also the reason why the heatmap squares have fudgy edges, even on the showcase site. I do not see how, using this library, the colours of the heatmap could be fixed. **Edit:** Note that github uses absolute and defined values (the ones in the legend) for the colours.

GiteaMirror commented

@davidak commented on GitHub (Jan 29, 2019):

@0x5c so, when there is no better library we have to submit bugreports upstream and maybe find someone who can fix it. It could optionally be possible to set the colors manually.

@davidak commented on GitHub (Jan 29, 2019): @0x5c so, when there is no better library we have to submit bugreports upstream and maybe find someone who can fix it. It could optionally be possible to set the colors manually.

GiteaMirror commented

@zeripath commented on GitHub (Jan 29, 2019):

Looking at the upstream if we just don't set the legendColors we should be able to use the .q1-.q5 css to set the colors

@zeripath commented on GitHub (Jan 29, 2019): Looking at the upstream if we just don't set the legendColors we should be able to use the .q1-.q5 css to set the colors

GiteaMirror commented

@0x5c commented on GitHub (Jan 29, 2019):

Seems to be an issue of how thing are done (upstream, that is).
As for better libraries, I think that the issues is of actually choosing, as there seems to be a ton of heatmap libraries that use the exact same dataset (would only need changes on the client side).

@0x5c commented on GitHub (Jan 29, 2019): Seems to be an issue of how thing are done (upstream, that is). As for better libraries, I think that the issues is of actually choosing, as there seems to be a ton of heatmap libraries that use the exact same dataset (would only need changes on the client side).

GiteaMirror commented

@0x5c commented on GitHub (Jan 29, 2019):

Nice of the upstream documentation to making this clear 😅.

@0x5c commented on GitHub (Jan 29, 2019): Nice of the upstream documentation to making this clear 😅.

GiteaMirror commented

@zeripath commented on GitHub (Jan 29, 2019):

Actually I think it's not q1 but in here: 0b510725c9/public/less/_base.less (L609)

@zeripath commented on GitHub (Jan 29, 2019): Actually I think it's not q1 but in here: https://github.com/go-gitea/gitea/blob/0b510725c97452bac57ff0080df10f6177aa2a6e/public/less/_base.less#L609

GiteaMirror commented

@0x5c commented on GitHub (Jan 29, 2019):

If the palette I proposed is liked, I'd like to attempt making a PR, although I could need pointers on how to tackle Gitea's code.

@0x5c commented on GitHub (Jan 29, 2019): If the palette I proposed is liked, I'd like to attempt making a PR, although I could need pointers on how to tackle Gitea's code.

GiteaMirror commented

@zeripath commented on GitHub (Jan 29, 2019):

So simply changing those 6 classes should do it?

@zeripath commented on GitHub (Jan 29, 2019): So simply changing those 6 classes should do it?

GiteaMirror commented

@zeripath commented on GitHub (Jan 29, 2019):

@0x5c I think would be a quite simple PR - just change the less code, commit and put up a pr with screenshots of what it used to look like and what it now looks like.

@zeripath commented on GitHub (Jan 29, 2019): @0x5c I think would be a quite simple PR - just change the less code, commit and put up a pr with screenshots of what it used to look like and what it now looks like.

GiteaMirror commented

@0x5c commented on GitHub (Jan 29, 2019):

That's if changing the values is actually possible.
Still looking at the docs

@0x5c commented on GitHub (Jan 29, 2019): That's if changing the values is actually possible. *Still looking at the docs*

GiteaMirror commented

@zeripath commented on GitHub (Jan 29, 2019):

Changing the values in the less file, then run make generate-stylesheetsshould do it afaics

@zeripath commented on GitHub (Jan 29, 2019): Changing the values in the less file, then run `make generate-stylesheets`should do it afaics

GiteaMirror commented

@0x5c commented on GitHub (Jan 29, 2019):

Okay, so

Each colors correspond to a CSS class, formatted like .q{n}.

That's clearly definable in CSS, which means that

It would actually fix #5164
It would supersede PR Commit and Changed Files tab broken (#5165)

@0x5c commented on GitHub (Jan 29, 2019): Okay, so ```none Each colors correspond to a CSS class, formatted like .q{n}. ``` That's clearly definable in CSS, which means that - It would actually fix #5164 - It would supersede #5165

GiteaMirror commented

@zeripath commented on GitHub (Jan 29, 2019):

At least in master we're actually using the vue-calendar-heatmap module rather than that cal-heatmap package.

@zeripath commented on GitHub (Jan 29, 2019): At least in master we're actually using the vue-calendar-heatmap module rather than that cal-heatmap package.

GiteaMirror commented

@0x5c commented on GitHub (Jan 29, 2019):

What? Where is the PR for that?

@0x5c commented on GitHub (Jan 29, 2019): *What?* Where is the PR for that?

GiteaMirror commented

https://github.com/go-gitea/gitea/pull/5401

@jolheiser commented on GitHub (Jan 29, 2019):

@jolheiser commented on GitHub (Jan 29, 2019): https://github.com/go-gitea/gitea/pull/5401

GiteaMirror commented

@davidak commented on GitHub (Jan 29, 2019):

You can also change it via CSS: https://github.com/go-gitea/gitea/pull/5401/files#diff-55ceecf712d36e64d0cc61b96617263aR609

@davidak commented on GitHub (Jan 29, 2019): You can also change it via CSS: https://github.com/go-gitea/gitea/pull/5401/files#diff-55ceecf712d36e64d0cc61b96617263aR609

GiteaMirror commented

@zeripath commented on GitHub (Jan 29, 2019):

Those are actually less files so you then need to generate-stylesheet but yes.

@zeripath commented on GitHub (Jan 29, 2019): Those are actually less files so you then need to generate-stylesheet but yes.

GiteaMirror commented

@0x5c commented on GitHub (Jan 29, 2019):

Simple PR then :)
~~Would setting up a dev environment be required?~~ Edit: When I think, things become clear: TESTING

@0x5c commented on GitHub (Jan 29, 2019): Simple PR then :) ~~Would setting up a dev environment be required?~~ *Edit: When I think, things become clear: **TESTING***

GiteaMirror commented

@cdlm commented on GitHub (Feb 11, 2019):

Please take care of reversing the palette in the dark theme, so that higher contrast to the background color (more visual pop) signifies more contributions. I've just updated to 1.7.1 and it's backwards :-)

@cdlm commented on GitHub (Feb 11, 2019): Please take care of reversing the palette in the dark theme, so that higher contrast to the background color (more visual pop) signifies more contributions. I've just updated to 1.7.1 and it's backwards :-) ![gitea arc-theme backwards heatmap gradient](https://user-images.githubusercontent.com/136339/52567533-dc2e0700-2e0c-11e9-861a-01c1a8bd5545.png)

GiteaMirror commented

@0x5c commented on GitHub (Feb 11, 2019):

The dark theme will need its own palette

@0x5c commented on GitHub (Feb 11, 2019): The dark theme will need its own palette

GiteaMirror commented

@zeripath commented on GitHub (Feb 13, 2019):

How's things with this? Are you ready for a pr? I know the deadline for 1.8 is coming up so if want this change in 1.8 a PR is needed soon.

@zeripath commented on GitHub (Feb 13, 2019): How's things with this? Are you ready for a pr? I know the deadline for 1.8 is coming up so if want this change in 1.8 a PR is needed soon.

GiteaMirror commented

@0x5c commented on GitHub (Feb 13, 2019):

I had massive issues with my computer, but that is solved now. I will be working on that today.

@0x5c commented on GitHub (Feb 13, 2019): I had *massive* issues with my computer, but that is solved now. I will be working on that today.

GiteaMirror commented

@kolaente commented on GitHub (Apr 9, 2019):

@0x5c Any updates on this?

@kolaente commented on GitHub (Apr 9, 2019): @0x5c Any updates on this?

GiteaMirror commented

@stale[bot] commented on GitHub (Jun 8, 2019):

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

@stale[bot] commented on GitHub (Jun 8, 2019): This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

GiteaMirror commented

@0x5c commented on GitHub (Jun 9, 2019):

Oh damn, I had forgotten about this.

@0x5c commented on GitHub (Jun 9, 2019): Oh damn, I had forgotten about this.

GiteaMirror commented