Dashboard: Bidirectional colour gradients

[Bobblybook]

What is this feature? Adds bidirectional, mirrored colour gradients of the existing continuous gradients. These allow gradient mapping in both directions away from a center value, eg. above and below zero, or centered around a mean, etc.

Why do we need this feature? The current, single-direction gradients cannot be used for mapping deviation from a central point.

Who is this feature for? As mentioned, anyone trying to map deviation from a central value, with gradient scaling away in both directions. A real use-case which I ran into myself, which prompted me to submit this: https://community.grafana.com/t/gradient-value-mapping-centered-around-zero/76397

Notes Compiled and tested by me on 9.2.5 and it works fine. Straightforward code, just mirrored gradients added to the list. Can be renamed if needed.

[CLAassistant]

All committers have signed the CLA.

[Bobblybook]

Could someone please have a look at this, or let me know what needs to be done to get it approved for merging? Thanks

[axelavargas]

Hey @Bobblybook , thanks for contributing to Grafana! 👋🏾

I was trying to reproduce your use case and the changes from this PR locally, but I think I am not getting the expected behavior 😅 , could you please share your dashboard JSON? I read the community post and used the test data, but I think I'm not fully understanding the main goal of the PR.

My failed attempt:

Thank you 🙏🏾

Steps to share Dashboard Json

Click the Share Dashboard Icon

Click on Export, and Click on Export for sharing externally

Click View JSON and then Copy it to Clipboard

[Bobblybook]

Hi, thanks for taking a look at this :)

Sorry, I think perhaps the sample data is confusing.

Col 1 are labels, Col 2 are graphed values. Col 3 is potentially not necessary - it's just the absolute value of col 2. I was using it for colouring purposes in the "color by field" setting and it should NOT be graphed as values. I forgot to add a title row in the sample csv data, so I've done that in the below dashboard.

From your failed version, all you should probably need to do is set the "Color by field" to the third column, which will remove it as a data column and instead use the absolute value for coloration purposes.

Here is a pretty minimalist dashboard which demonstrates the intended behaviour: https://pastebin.com/raw/fPzpmCLX

Also an image:

You can see that the colour gradient progresses in both directions from the centre point (in this case it's 0, but it might be a mean or similar sort of central value from which you would want to measure deviation). I've been unable to produce this sort of graph with the current release version of grafana, without my gradients compiled.

[leeoniya]

note that this solution requires manually setting axis limits (hard or soft) around the center point. in the case of the drmo dashboard they are soft limits, so if the data exceeds them thr gradiant will no longer be centered and will diverge/mirror from another point.

for this to be a bit more explicit/stable it feels like we should have a "diverging" toggle that affects both the axis range and centers the desired number and properly generates the color gradient on demand. this way we dont need to maintain two copies of each scheme and proper rendering doesnt require explicit and stable hard/soft limits. we have a setting called "centeredZero" that works a bit like this but without the color scale regen.

[Bobblybook]

note that this solution requires manually setting axis limits (hard or soft) around the center point. in the case of the drmo dashboard they are soft limits, so if the data exceeds them thr gradiant will no longer be centered and will diverge/mirror from another point.

for this to be a bit more explicit/stable it feels like we should have a "diverging" toggle that affects both the axis range and centers the desired number and properly generates the color gradient on demand. this way we dont need to maintain two copies of each scheme and proper rendering doesnt require explicit and stable hard/soft limits. we have a setting called "centeredZero" that works a bit like this but without the color scale regen.

I agree, and yes it does require manual centering to ensure the gradient works. I think a dynamic approach to generating mirrored gradients around a center point would be the most flexible, and it would also avoid bloating the gradient list with what are otherwise just duplicates of the current gradients. However I don't know enough about the grafana code to write that up without making a mess, so this was a simple solution that I initially came up with.

[grafanabot]

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!

[Bobblybook]

Hi - Any new updates or decisions made about this?😀

[grafanabot]

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!

[natellium]

@torkelo @leeoniya any more pointers here?

[nmarrs]

Hi @Bobblybook, 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.

[Bobblybook]

Hi @Bobblybook, 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.

Great thanks, I'll keep a watch on this and wait for any updates.

[grafanabot]

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]

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]

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!

[github-actions[bot]]

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!

[github-actions[bot]]

This pull request has been automatically closed because it has not had activity in the last 2 weeks. Please feel free to give a status update now, ping for review, or re-open when it's ready. Thank you for your contributions!