Dashboard: Add series color shades #61300
Conversation
Add color option "Shades of a color" which gives each series a color derived from a user-selected base color.
Describe color option "Shades of a color" in documentation.
|
What do I need to do to accept the CLA? edit: done, CLAassistant took care of it |
|
|
Fall back to a gray color if the configured color cannot be parsed.
jkraml-staffbase
requested review from
joshhunt,
ashharrison90,
academo,
oscarkilhed,
zoltanbedi,
JStickler and
GrafanaWriter
and removed request for
a team
|
This pull request has been automatically marked as stale because it has not had activity in the last 30 days. It will be closed in 2 weeks if no further activity occurs. Please feel free to give a status update now, ping for review, or re-open when it's ready. Thank you for your contributions! |
There was a problem hiding this comment.
Hey @jkraml-staffbase 😄 ,
Thank you for your valuable contribution to Grafana 🙌🏾 . I've had a chance to review your PR and I think the feature makes sense.
I've noticed that adding the new option to the color scheme field works really well with timeseries panels. Here's an example of what I mean:
However, I've also observed that the shades are less noticeable in other visualizations, like this one:
That being said, I would love to get some feedback from the @grafana/dataviz-squad. I believe they could provide better insights into how useful this option would be for different visualizations.
There was a problem hiding this comment.
This feature seems reasonable / useful - @leeoniya interested in your thoughts on this feature / option. Is something similar to this possible with an override or should this maybe be an override instead of an additional standard option?
|
Hi @jkraml-staffbase, thanks for this contribution! I have included this PR on our squads grooming review list - once reviewed we will provide an update on how we will proceed with this PR / feature request. |
|
@axelavargas oh, you're right. I admit, I only tried it with timeseries. @nmarrs cool, thanks for letting me know |
|
This pull request has been automatically marked as stale because it has not had activity in the last 30 days. It will be closed in 2 weeks if no further activity occurs. Please feel free to give a status update now, ping for review, or re-open when it's ready. Thank you for your contributions! |
grafanabot
added
stale
docs/sources/panels-visualizations/configure-standard-options/index.md
Outdated
Show resolved
Hide resolved
|
@nmarrs Hi, any news on reviewing this PR? |
|
@jkraml-staffbase pushed an update, sorry if I messed things up. I think the changes make sense but please tweak it further. I removed all the custom color parsing as we already use a color manipulation lib in tinycolor2 that can handle att that. I changed and simplified the logic a bit by using tinycolor2 and also added a tiny bit of color hue spin to create more slight share difference |
|
Demo dashboard |
There was a problem hiding this comment.
I'm happy with this, especially with the refactoring via tinycolor lib as I wasn't as comfortable with us owning the custom logic 👍
@jkraml-staffbase let us know if you're good with the refactor, after that in my opinion this is ready to be merged -> degree of shade variance can always be tweaked in future PRs based on wider community feedback. Great job on this contribution! ⭐
|
looks like shaded by value, but isn't 🤯. works well for lines, but imo not so well for filled viz regions 🤷 |
* Dashboard: Add series color shades Add color option "Shades of a color" which gives each series a color derived from a user-selected base color. * Documentation: Add entry for color shades Describe color option "Shades of a color" in documentation. * Chore: formatting fixes * Dashboard: Use better fallback color for color shades in fieldColor.ts Fall back to a gray color if the configured color cannot be parsed. * Chore: fix typo in fieldColor.test.ts * Documentation: fix a sentence * remove custom color parsing and change logic a bit * Fix prettier issue --------- Co-authored-by: Torkel Ödegaard <torkel@grafana.com> Co-authored-by: nmarrs <nathanielmarrs@gmail.com> Co-authored-by: Kristina Durivage <kristina.durivage@grafana.com>
Add color option "Shades of a color" which gives each series a color derived from a user-selected base color.
What is this feature?
Add a color option "Shades of a color" to give series a similar (but not identical) color.
E.g. Let's say I have a CPU-usage metric for all my k8s pods. I would like to make the series for backend pods blue and the one for database pods yellow. But I don't want them to be the same color so that I can still differentiate between them visually.
Why do we need this feature?
To give groups of series a similar color. Currently they can only be assigned the same color or be colored by value.
Who is this feature for?
People designing dashboards.
Which issue(s) does this PR fix?:
Fixes #4555
Special notes for your reviewer: