GaugePanel: Setting the neutral-point of a gauge #53989

sfranzis · 2022-08-20T08:18:23Z

What this PR does / why we need it:
The neutral or zero point of a gauge is at the left of the panel. When I set the range from e.g. Min=-5 to Max = 5 then the display of negative values looks not natural.
I would like the neutral-point to be configurable in the standard field options (where we have Min, Max, ...).

Example use case: a solar battery inverter, which shows positive values when charging and negative values when discharging.

Fixes #38273

Usage: If min and max of a gauge panel are additive inverse numbers, e.g. min=-500, max=500 then the neutral point of the gauge is put at 12 o'clock. Negative values are plotted to the left side, positive values to the right side.

If min and max of a gauge panel are opposite numbers, e.g. min=-500, max=500 then the neutral point of the gauge is put at 12 o'clock. Negative values are plotted to the left side, positive values to the right side. See Gitlab discussions #38273

remove unneded const angularModules

CLAassistant · 2022-08-20T08:18:28Z

All committers have signed the CLA.

tclausing · 2022-09-08T21:25:34Z

I'm happy to see this feature. Though, limiting to inverse min/max scenario seems arbitrary. Why not expose a setting for "fill from zero" regardless of the angle of the zero point?

Perhaps this should even be default behavior of a gauge. I can't think of an example where painting from a negative min to a positive value would be desired since a gauge is meant to show relative magnitudes, which implies painting from zero to represent magnitude correctly.

mellieA · 2022-09-09T22:02:05Z

@sfranzis thank you for this contribution! I've moved this to the to the User Essentials dev project for review and comments

mellieA · 2022-09-09T22:03:38Z

Approvers, here are some images copied over from the feature discussion that this PR resolves:

sfranzis · 2022-09-10T16:40:24Z

I'm happy to see this feature. Though, limiting to inverse min/max scenario seems arbitrary. Why not expose a setting for "fill from zero" regardless of the angle of the zero point?

Perhaps this should even be default behavior of a gauge. I can't think of an example where painting from a negative min to a positive value would be desired since a gauge is meant to show relative magnitudes, which implies painting from zero to represent magnitude correctly.

An additional setting would require changes on the data model and more. For this I'm not yet deep enough in the code. This is my first change.
I agree with the idea making this to the default behavior. But also in this case you need to set min and max values to have a fixed scale.

gguillotte-grafana

There are some phrasing changes that could make the docs addition clearer and require less domain knowledge to apply.

gguillotte-grafana · 2022-09-15T19:52:56Z

docs/sources/visualizations/gauge-panel.md

+
+Adjust various options.
+
+- **Min/Max -** If the values of min and max are additive inverse numbers (e.g. min=-500, max=500), then the neutral point of the gauge is put at 12 o'clock. Negative values are plotted to the left side, positive values to the right side.


Aiming for clarity with plainer language here, while understanding the limitations in the comments:

Suggested change

- **Min/Max -** If the values of min and max are additive inverse numbers (e.g. min=-500, max=500), then the neutral point of the gauge is put at 12 o'clock. Negative values are plotted to the left side, positive values to the right side.

- **Min/Max -** Define a range to gauge, with the neutral point plotted at the center of the gauge. Values higher or lower than the neutral point plotted to the left or right of center, respectfully. The values of min and max must be opposite numbers; for instance, if the min is -500, the max must be 500.

gguillotte-grafana · 2022-09-15T19:53:11Z

public/vendor/flot/jquery.flot.gauge.js

                c1,           // line color
                1,            // line width
                c1,           // fill color
                blur);
        }

+
+        /**
+         * if gauge min is negative and has the absolute value of min and max are the same


Suggested change

* if gauge min is negative and has the absolute value of min and max are the same

* if gauge min is negative and the absolute value of min and max are the same

gguillotte-grafana · 2022-09-15T19:55:22Z

docs/sources/visualizations/gauge-panel.md

+## Standard options
+
+Adjust various options.


With only one setting listed, "various options" doesn't work well here. If I understand the comments, this is changing a default behavior of gauges, so would "Adjust default gauge behaviors" work instead?

Hi @gguillotte-grafana thanks for your review.

JoaoSilvaGrafana · 2022-09-16T16:51:45Z

public/vendor/flot/jquery.flot.gauge.js

+        /**
+         * if gauge min is negative and has the absolute value of min and max are the same
+         * then calculate a1 and a2 in a way, that zero is at 12 o'clock
+         * 
+         * @method calculateAnglesForGauge
+         * @param {Object} gaugeOptionsi the options of the gauge
+         * @returns {Object}
+         */
+        function calculateAnglesForGauge(gaugeOptionsi, layout, data) {
+            let angles = {};
+            var setNorth = (gaugeOptionsi.gauge.min + gaugeOptionsi.gauge.max) == 0.0
+
+            angles.a1 = gaugeOptionsi.gauge.startAngle;
+            angles.a2 = calculateAngle(gaugeOptionsi, layout, data);
+
+            if(setNorth && angles.a2<=1.5) {
+                angles.a1 = angles.a2;
+                angles.a2 = 1.5;
+            }
+            if(setNorth && angles.a2>1.5) {
+                angles.a1 = 1.5;
+            }
+
+            return angles;
+        }


Hey @sfranzis thank you for contributing to Grafana! 🎉

I have to agree with the sentence "limiting to inverse min/max scenario seems arbitrary", I think it would end up being almost a "hidden feature" that if you set min and max to the same absolute value you get this extra feature on the Gauges that have negative numbers.

I think ideally this should always happen if the minimum of the gauge is < 0, and then we should be able to see some kind of indication of where 0 is as well, maybe with a dotted line or with the actual number 0 next to that point.
So I feel like in order for us to merge this it would need a little bit more work. This is my suggestion for what this function should look like:

/** * Calcualte the angles for the gauge, depending on if there are * negative numbers or not. * * @method calculateAnglesForGauge * @param {Object} gaugeOptionsi the options of the gauge * @param {Number} data the value of the gauge * @returns {Object} */ function calculateAnglesForGauge(gaugeOptionsi, layout, data) { let angles = {}; var hasNegative = gaugeOptionsi.gauge.min < 0.0 var isNegative = data < 0.0 if (hasNegative) { if (isNegative) { angles.a1 = calculateAngle(gaugeOptionsi, layout, data); angles.a2 = calculateAngle(gaugeOptionsi, layout, 0.0); } else { angles.a1 = calculateAngle(gaugeOptionsi, layout, 0.0); angles.a2 = calculateAngle(gaugeOptionsi, layout, data); } } else { angles.a1 = gaugeOptionsi.gauge.startAngle; angles.a2 = calculateAngle(gaugeOptionsi, layout, data); } return angles; }

What do you think? Then the only thing left would be to find a way to represent where the 0 is when the min is negative. Would you like to give that a go?

Hey @JoaoSilvaGrafana thanks for your suggestion. I'm fine with it. 👍

sfranzis · 2022-09-18T12:28:42Z

Working on it.

Regarding the modified logic, (when minimum < 0) it works is general, but is a bit tricky when no values for min/max are set. In this case the values vor min/max are calculated. Any idea how to check if no value is set in the GUI?
Zero marker - I implemented this:

LarsStegman · 2022-09-24T12:38:58Z

Thanks for the pull request. Just my 2 cents: I would prefer to be able to override the neutral point to set it to any arbitrary value. The current implementation would be fine for the default, i.e. the neutral point is always at min, unless the user overrides it.

JoaoSilvaGrafana · 2022-09-30T15:24:56Z

Working on it.

Regarding the modified logic, (when minimum < 0) it works is general, but is a bit tricky when no values for min/max are set. In this case the values vor min/max are calculated. Any idea how to check if no value is set in the GUI?

Zero marker - I implemented this:

Hey @sfranzis sorry for the delay, been on holiday 😄

I'm not sure I understand your point, could you give me an example of where it doesn't work? I tried it with various values and no min/max and it behaves correctly:

2. I think we might need to put this through a UX check, could you push your changes and I can ask some designers here and see what they think? 🙂

Thanks for working on this!

JoaoSilvaGrafana · 2022-09-30T15:27:17Z

Thanks for the pull request. Just my 2 cents: I would prefer to be able to override the neutral point to set it to any arbitrary value. The current implementation would be fine for the default, i.e. the neutral point is always at min, unless the user overrides it.

Hey @LarsStegman , just trying to understand your point. Could you give an example of what you expected to happen with some values? By neutral point do you mean the point in the middle of the Gauge?

LarsStegman · 2022-09-30T16:40:04Z

Thanks for the pull request. Just my 2 cents: I would prefer to be able to override the neutral point to set it to any arbitrary value. The current implementation would be fine for the default, i.e. the neutral point is always at min, unless the user overrides it.

Hey @LarsStegman , just trying to understand your point. Could you give an example of what you expected to happen with some values? By neutral point do you mean the point in the middle of the Gauge?

Hi, I would like the "zero point" settable. For example:

the current value is 3
The minimum value is -5
The maximum value is 5
the neutral point is manually set to -1

The gauge would then be drawn from -1 to 3

This could be useful to show how far away from a setpoint the current value is, e.g. a speed setting and the actual speed.

JoaoSilvaGrafana · 2022-11-15T11:52:35Z

Oh fantastic!
Could you merge that with this branch then? We are having a quick call with UX tomorrow about this and I can demo it to them 😄
Thanks and great job!

sfranzis · 2022-11-15T11:55:12Z

Example use case for neutral value different from 0:
Monitoring the divergence of line frequency (50.0 Hz in Europe 60.0 Hz in the US and other countries)

sfranzis · 2022-11-15T11:57:30Z

Oh fantastic!
Could you merge that with this branch then? We are having a quick call with UX tomorrow about this and I can demo it to them 😄
Thanks and great job!

Ok, I will do it later today when I have no disturbance. :-)

sfranzis · 2022-11-15T17:07:53Z

Hey @JoaoSilvaGrafana,
merged & synced with main. Build passed. If you accept my changes I will also add a few lines to documentation.
Regards :-)

JoaoSilvaGrafana

Great job on this! I showed your work to some colleagues and they really like the NumberInput option you created! 🎉 Just left some comments on it

packages/grafana-ui/src/components/Gauge/Gauge.tsx

public/app/plugins/panel/gauge/module.tsx

public/app/plugins/panel/gauge/models.cue

public/vendor/flot/jquery.flot.gauge.js

sfranzis · 2022-11-16T18:45:30Z

Thanks for your review and comments. Implemented it and pushed.
Just one idea left. I would like to have the Neutral option also in the Overrides section. In some panels the Overrides offer only Standard options, Data Links and Thresholds. I've already searched hours, but still no idea how to get Gauge > Neutral into the overrides. 🙈
With this feature you could build Gauge panels with different data (e.g. Voltage neutral at 230, Frequency at 50):

Do you have an idea or hint how to implement this?

JoaoSilvaGrafana · 2022-11-17T17:57:44Z

Do you have an idea or hint how to implement this?

I'm not really sure how to implement overrides no... I had a quick look around and couldn't get it to work properly. I think what we have right now in this PR is already really valuable for us to merge it, and then if you figure out the overrides you can do it as a separate PR what do you think? 😄

sfranzis · 2022-11-17T18:06:57Z

I think what we have right now in this PR is already really valuable for us to merge it, and then if you figure out the overrides you can do it as a separate PR what do you think? 😄

Go for it 👍 I'm looking forward to seeing the current change in an official release. 😊

sfranzis · 2022-11-18T06:36:56Z

@JoaoSilvaGrafana found the override thing.
You have to implement the property as a custom field config, not as an option.
Changed it and pushed. If I implemented in a later request, it would get a breaking change.
Please see again and tell me what you think. 🙂

JoaoSilvaGrafana

Great job on this, we really appreciate all the work you've put into it 👏

(cherry picked from commit e823a90)

sfranzis added 2 commits August 20, 2022 10:00

GraphPanel: Setting the neutral-point of a gauge

aac8708

remove unneded const angularModules

grafanabot added pr/external This PR is from external contributor area/frontend labels Aug 20, 2022

sfranzis changed the title ~~Setting the neutral-point of a gauge #38273~~ Setting the neutral-point of a gauge Aug 20, 2022

Update gauge docs

a3e0a9d

sfranzis requested a review from a team as a code owner August 20, 2022 09:19

sfranzis requested review from gguillotte-grafana and knylander-grafana and removed request for a team August 20, 2022 09:19

grafanabot added the type/docs label Aug 20, 2022

mellieA added area/panel/gauge and removed type/docs labels Sep 9, 2022

gguillotte-grafana reviewed Sep 15, 2022

View reviewed changes

ashharrison90 requested review from a team, joshhunt, ashharrison90 and JoaoSilvaGrafana and removed request for a team September 16, 2022 08:40

JoaoSilvaGrafana reviewed Sep 16, 2022

View reviewed changes

sfranzis added 4 commits November 15, 2022 15:10

Make neutral value configurable

8b44b1f

fixing merge glitch

586f7d8

fixed type check

80038be

Merge branch 'grafana:main' into #38273

cacadc9

JoaoSilvaGrafana reviewed Nov 16, 2022

View reviewed changes

JoaoSilvaGrafana removed the migrate/status-icebox Temporary label that can be deleted after 2022 Nov label Nov 16, 2022

sfranzis added 2 commits November 16, 2022 19:37

implement suggestions from review

13876b0

implement suggestions from review

fb7c215

run make gen-cue

eac63f2

JoaoSilvaGrafana added the add to changelog label Nov 17, 2022

JoaoSilvaGrafana added this to the 9.2.6 milestone Nov 17, 2022

JoaoSilvaGrafana changed the title ~~Setting the neutral-point of a gauge~~ Gauge: Setting the neutral-point of a gauge Nov 17, 2022

JoaoSilvaGrafana changed the title ~~Gauge: Setting the neutral-point of a gauge~~ GaugePanel: Setting the neutral-point of a gauge Nov 17, 2022

JoaoSilvaGrafana modified the milestones: 9.2.6, 9.3.0 Nov 17, 2022

JoaoSilvaGrafana added the backport v9.3.x label Nov 17, 2022

move neutral to custom field config

145bba3

JoaoSilvaGrafana approved these changes Nov 18, 2022

View reviewed changes

JoaoSilvaGrafana merged commit e823a90 into grafana:main Nov 18, 2022

grafanabot mentioned this pull request Nov 18, 2022

[v9.3.x] GaugePanel: Setting the neutral-point of a gauge #58949

Merged

grafanabot pushed a commit that referenced this pull request Nov 18, 2022

GaugePanel: Setting the neutral-point of a gauge (#53989)

b56c2e3

(cherry picked from commit e823a90)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GaugePanel: Setting the neutral-point of a gauge #53989

GaugePanel: Setting the neutral-point of a gauge #53989

sfranzis commented Aug 20, 2022 •

edited

CLAassistant commented Aug 20, 2022 •

edited

tclausing commented Sep 8, 2022 •

edited

mellieA commented Sep 9, 2022

mellieA commented Sep 9, 2022

sfranzis commented Sep 10, 2022

gguillotte-grafana left a comment

gguillotte-grafana Sep 15, 2022

gguillotte-grafana Sep 15, 2022

gguillotte-grafana Sep 15, 2022

sfranzis Sep 17, 2022

JoaoSilvaGrafana Sep 16, 2022

sfranzis Sep 17, 2022

sfranzis commented Sep 18, 2022

LarsStegman commented Sep 24, 2022 •

edited

JoaoSilvaGrafana commented Sep 30, 2022

JoaoSilvaGrafana commented Sep 30, 2022

LarsStegman commented Sep 30, 2022 •

edited

JoaoSilvaGrafana commented Nov 15, 2022

sfranzis commented Nov 15, 2022 •

edited

sfranzis commented Nov 15, 2022

sfranzis commented Nov 15, 2022

JoaoSilvaGrafana left a comment

sfranzis commented Nov 16, 2022 •

edited

JoaoSilvaGrafana commented Nov 17, 2022

sfranzis commented Nov 17, 2022 •

edited

sfranzis commented Nov 18, 2022

JoaoSilvaGrafana left a comment


		Adjust various options.

		- Min/Max - If the values of min and max are additive inverse numbers (e.g. min=-500, max=500), then the neutral point of the gauge is put at 12 o'clock. Negative values are plotted to the left side, positive values to the right side.

	- Min/Max - If the values of min and max are additive inverse numbers (e.g. min=-500, max=500), then the neutral point of the gauge is put at 12 o'clock. Negative values are plotted to the left side, positive values to the right side.
	- Min/Max - Define a range to gauge, with the neutral point plotted at the center of the gauge. Values higher or lower than the neutral point plotted to the left or right of center, respectfully. The values of min and max must be opposite numbers; for instance, if the min is -500, the max must be 500.

	* if gauge min is negative and has the absolute value of min and max are the same
	* if gauge min is negative and the absolute value of min and max are the same

GaugePanel: Setting the neutral-point of a gauge #53989

GaugePanel: Setting the neutral-point of a gauge #53989

Conversation

sfranzis commented Aug 20, 2022 • edited

CLAassistant commented Aug 20, 2022 • edited

tclausing commented Sep 8, 2022 • edited

mellieA commented Sep 9, 2022

mellieA commented Sep 9, 2022

sfranzis commented Sep 10, 2022

gguillotte-grafana left a comment

Choose a reason for hiding this comment

gguillotte-grafana Sep 15, 2022

Choose a reason for hiding this comment

gguillotte-grafana Sep 15, 2022

Choose a reason for hiding this comment

gguillotte-grafana Sep 15, 2022

Choose a reason for hiding this comment

sfranzis Sep 17, 2022

Choose a reason for hiding this comment

JoaoSilvaGrafana Sep 16, 2022

Choose a reason for hiding this comment

sfranzis Sep 17, 2022

Choose a reason for hiding this comment

sfranzis commented Sep 18, 2022

LarsStegman commented Sep 24, 2022 • edited

JoaoSilvaGrafana commented Sep 30, 2022

JoaoSilvaGrafana commented Sep 30, 2022

LarsStegman commented Sep 30, 2022 • edited

JoaoSilvaGrafana commented Nov 15, 2022

sfranzis commented Nov 15, 2022 • edited

sfranzis commented Nov 15, 2022

sfranzis commented Nov 15, 2022

JoaoSilvaGrafana left a comment

Choose a reason for hiding this comment

sfranzis commented Nov 16, 2022 • edited

JoaoSilvaGrafana commented Nov 17, 2022

sfranzis commented Nov 17, 2022 • edited

sfranzis commented Nov 18, 2022

JoaoSilvaGrafana left a comment

Choose a reason for hiding this comment

sfranzis commented Aug 20, 2022 •

edited

CLAassistant commented Aug 20, 2022 •

edited

tclausing commented Sep 8, 2022 •

edited

LarsStegman commented Sep 24, 2022 •

edited

LarsStegman commented Sep 30, 2022 •

edited

sfranzis commented Nov 15, 2022 •

edited

sfranzis commented Nov 16, 2022 •

edited

sfranzis commented Nov 17, 2022 •

edited