muety / wakapi

📊 A minimalist, self-hosted WakaTime-compatible backend for coding statistics
https://wakapi.dev
MIT License
2.74k stars 170 forks source link

Color changes for custom dynamic badges #223

Open toulzx opened 3 years ago

toulzx commented 3 years ago

image

In Wakapi.dev/settings/Integrations, I found the badges you provided for us, thank you very much.

My Idea

I would like to know if it is possible to optimize the display of badges even further by setting the color of these badges to be displayed dynamically?

More Details

For example, according to my needs, I set the color to orange when it exceeds 30mins(like this: image), green when it exceeds 1h(image), and red when it is otherwise displayed(image). This way visitors can get a more intuitive picture of your coding time today compared to the expected situation.

What I Did

I have tried to make it via shields.io, but unfortunately it doesn't support this, I found a similar issue in repo: badges/shields: Color changes for custom dynamic badges, which they suggest to implement via endpoint badge. I noticed that the badge provided by Wakapi is also implemented via it, so I think it's something to try.

B.T.W.

English is not my native language, so please forgive any possible errors I may have made. This issue was inspired by Color changes for custom dynamic badges.

muety commented 3 years ago

Great idea! This is definitely something I would like to see in Wakapi, although not with a very high priority.

One thing that has to be clarified upfront is whether the colors shall be customizable or not. If yes, this is a bigger change, as it would require data model and UI for configuring rules, just like conditional formatting in Excel. If not, what would you suggest as meaningful thresholds and according colors?

toulzx commented 3 years ago

Thanks for your reply :)

I think it would be better to provide uniform color change rules and color match.

On the one hand, it would be more convinent for developers to implement features, and on the other hand, uniform change rules would make it easier for users (often Wakapi users) to access the information corresponding to the colors.

It may be a good choice to divide the target time into three or four equal parts as thresholds. As an example, for the target time "3hrs20mins"

25% 50% 75% 100%
25% 50% 75% 100%

I don't have much experience in color matching. Among the limited colors provided by shields.io, so I chose a color match that doesn't look too aggressive. For your reference.