Heatmap: hue gradient instead of saturation #5864

davidak · 2019-01-26T16:46:47Z

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

The text was updated successfully, but these errors were encountered:

zeripath · 2019-01-26T18:51:16Z

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

davidak · 2019-01-27T00:57:27Z

@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.

0x5c · 2019-01-27T09:53:33Z

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 · 2019-01-27T12:55:49Z

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 · 2019-01-27T13:36:09Z

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.

davidak · 2019-01-27T14:10:36Z

@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

0x5c · 2019-01-28T00:04:58Z

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 · 2019-01-28T02:56:05Z

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

davidak · 2019-01-28T05:27:05Z

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

0x5c · 2019-01-28T15:15:36Z

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

davidak · 2019-01-28T17:15:04Z

@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.

0x5c · 2019-01-28T18:06:35Z

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 · 2019-01-28T18:17:15Z

Palette proposition v4

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

davidak · 2019-01-28T18:24:53Z

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

0x5c · 2019-01-29T15:20:50Z

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.

davidak · 2019-01-29T15:31:44Z

@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.

zeripath · 2019-01-29T15:37:58Z

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

0x5c · 2019-01-29T15:43:20Z

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 · 2019-01-29T15:45:12Z

Nice of the upstream documentation to making this clear 😅.

zeripath · 2019-01-29T15:48:13Z

Actually I think it's not q1 but in here:

gitea/public/less/_base.less

Line 609 in 0b51072

.heatmap-color-0 {

0x5c · 2019-01-29T15:49:08Z

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.

zeripath · 2019-01-29T15:49:24Z

So simply changing those 6 classes should do it?

zeripath · 2019-01-29T15:51:13Z

@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.

0x5c · 2019-01-29T15:55:41Z

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

zeripath · 2019-01-29T16:04:35Z

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

0x5c · 2019-01-29T16:11:02Z

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 Heatmap on arc-green theme looks out of place #5164
It would supersede Set heatmap color range configurable #5165

zeripath · 2019-01-29T16:22:45Z

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

0x5c · 2019-01-29T16:25:27Z

What? Where is the PR for that?

jolheiser · 2019-01-29T16:26:26Z

#5401

davidak · 2019-01-29T16:35:43Z

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

zeripath · 2019-01-29T16:37:54Z

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

0x5c · 2019-01-29T18:12:28Z

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

cdlm · 2019-02-11T13:52:02Z

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 :-)

0x5c · 2019-02-11T15:00:51Z

The dark theme will need its own palette

zeripath · 2019-02-13T07:13:12Z

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.

0x5c · 2019-02-13T11:11:27Z

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

kolaente · 2019-04-09T12:05:35Z

@0x5c Any updates on this?

stale · 2019-06-08T12:12:21Z

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.

0x5c · 2019-06-09T05:56:44Z

Oh damn, I had forgotten about this.

MayMeow · 2019-10-27T10:40:29Z

I have implemented this on https://kittyverse.co/may?tab=activity (you can check). Implemented is palette 4. If its ok i can make pull request. or implemetn any other palette. :)

davidak · 2019-10-27T13:15:36Z

@MayMeow looks good. please create a PR.

0x5c · 2019-10-31T05:46:37Z

Oh damn, I had forgotten about this.

Thank you for making the PR :)

MayMeow · 2019-11-06T08:55:18Z

@0x5c @cdlm Sorry about that :) i didnt used dark theme so i didnt know

This uses the same colors as the updated palette in the base theme. See go-gitea#8709 and go-gitea#5864, in particular [my comment showing the problem](go-gitea#5864 (comment))

* Theme arc-green: reverse heatmap colors This uses the same colors as the updated palette in the base theme. See #8709 and #5864, in particular [my comment showing the problem](#5864 (comment)) * Rebuild CSS * Use link color as hot, interpolate between hot and cold colors * Use color from a:hover

zeripath added the topic/ui Change the appearance of the Gitea UI label Jan 29, 2019

stale bot added the issue/stale label Jun 8, 2019

lafriks added the issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented label Jun 8, 2019

stale bot removed the issue/stale label Jun 8, 2019

MayMeow mentioned this issue Oct 27, 2019

Update color theme for heatmap #8709

Merged

cdlm mentioned this issue Nov 5, 2019

Theme arc-green: reverse heatmap colors #8840

Merged

denyskon closed this as completed Sep 23, 2023

github-actions bot locked as resolved and limited conversation to collaborators Nov 8, 2023

Heatmap: hue gradient instead of saturation #5864

Heatmap: hue gradient instead of saturation #5864

Comments

davidak commented Jan 26, 2019

Description

Screenshots

Gitea

GitHub

GitLab

zeripath commented Jan 26, 2019

davidak commented Jan 27, 2019

0x5c commented Jan 27, 2019

0x5c commented Jan 27, 2019 • edited Loading

0x5c commented Jan 27, 2019

Current palette

Proposed palette n°1

Proposed palette n°2

davidak commented Jan 27, 2019

0x5c commented Jan 28, 2019

0x5c commented Jan 28, 2019

davidak commented Jan 28, 2019

0x5c commented Jan 28, 2019 • edited Loading

Proposed palette n°3

davidak commented Jan 28, 2019

0x5c commented Jan 28, 2019

0x5c commented Jan 28, 2019

Palette proposition v4

davidak commented Jan 28, 2019

0x5c commented Jan 29, 2019 • edited Loading

davidak commented Jan 29, 2019

zeripath commented Jan 29, 2019

0x5c commented Jan 29, 2019

0x5c commented Jan 29, 2019

zeripath commented Jan 29, 2019

0x5c commented Jan 29, 2019

zeripath commented Jan 29, 2019

zeripath commented Jan 29, 2019 • edited Loading

0x5c commented Jan 29, 2019

zeripath commented Jan 29, 2019

0x5c commented Jan 29, 2019

zeripath commented Jan 29, 2019

0x5c commented Jan 29, 2019

jolheiser commented Jan 29, 2019

davidak commented Jan 29, 2019

zeripath commented Jan 29, 2019

0x5c commented Jan 29, 2019 • edited Loading

cdlm commented Feb 11, 2019 • edited Loading

0x5c commented Feb 11, 2019

zeripath commented Feb 13, 2019

0x5c commented Feb 13, 2019

kolaente commented Apr 9, 2019

stale bot commented Jun 8, 2019

0x5c commented Jun 9, 2019

MayMeow commented Oct 27, 2019

davidak commented Oct 27, 2019

0x5c commented Oct 31, 2019

MayMeow commented Nov 6, 2019

0x5c commented Jan 27, 2019 •

edited

Loading

0x5c commented Jan 28, 2019 •

edited

Loading

0x5c commented Jan 29, 2019 •

edited

Loading

zeripath commented Jan 29, 2019 •

edited

Loading

0x5c commented Jan 29, 2019 •

edited

Loading

cdlm commented Feb 11, 2019 •

edited

Loading