Gauge: Simplify gauge dimension panel options #76216

nmarrs · 2023-10-09T20:46:11Z

Update the gauge panel with a similar approach taken in bar gauge panel (see this PR) for handling auto / manual gauge sizing options. By default auto size will use a reasonable hardcoded value (though in the future this could be made smarter) while manual allows user to explicitly determine the size of their gauge.

UX

Screen.Recording.2023-11-07.at.1.43.59.PM.mov

Demo dashboard.txt

Related to #71690 + #46819

For docs changes see #76240

Created a follow-up issue for adding an overflow notice inside of VizRepeater

…om gauge panel

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

torkelo

yes, something like this was what I had in mind. It could even be a bit smarter, if where to use alignment factors like BarGauge, then it would know the longest gauge name and value and have a better sense of size constraint (but maybe not needed for a first iteration)

…-options

nmarrs · 2023-11-07T22:12:42Z

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

@@ -29,8 +29,9 @@ composableKinds: PanelCfg: {
 					common.SingleStatBaseOptions
 					showThresholdLabels:  bool | *false
 					showThresholdMarkers: bool | *true
-					minVizWidth:          uint32 | *75
-					minVizHeight:         uint32 | *75
+					sizing:               common.BarGaugeSizing & (*"auto" | _)


We can rename the BarGaugeSizing to just GaugeSizing or maybe even something even more generic like VizSizing to make it more universal if desired - I don't feel too strongly on need to do this 🤷‍♂️

nmarrs · 2023-11-07T22:47:55Z

@torkelo I've updated this PR to have the same handling of gauge dimensions as recent bar gauge PR (Auto / Manual sizing option that hides extra panel options by default)

Develer · 2023-11-16T16:11:06Z

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

+        },
+        defaultValue: defaultOptions.sizing,
+        showIf: (options: Options) => options.orientation !== VizOrientation.Auto,
+      })
      .addNumberInput({


Hey @nmarrs Would you mind to replace number input with slider input?

Suggested change

.addNumberInput({

.addSliderInput({

path: 'minVizWidth',

name: 'Min width',

description: 'Minimum column width (vertical orientation)',

defaultValue: defaultOptions.minVizWidth,

settings: {

min: 0,

max: 300,

step: 1,

},

showIf: (options: Options) =>

options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Vertical,

})

.addSliderInput({

path: 'minVizHeight',

name: 'Min height',

description: 'Minimum row height (horizontal orientation)',

defaultValue: defaultOptions.minVizHeight,

settings: {

min: 0,

max: 300,

step: 1,

},

showIf: (options: Options) =>

options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Horizontal,

});

please, adjust max value as needed 🙂

600 max value should be more than enough. In other cases, if e.g. user wants a bigger gauge - auto move should cover that. Let me know what you think.

checking it out locally now :) goal is to get this merged today (and associated docs PR) 👍

600 seems reasonable enough 👍 updated PR with requested changes

Develer · 2023-11-17T18:46:45Z

@nmarrs btw, just noticed, shouldn't Gauge size show also in auto layout orientation mode?

…-options

nmarrs · 2023-11-17T19:31:34Z

@nmarrs btw, just noticed, shouldn't Gauge size show also in auto layout orientation mode?

@Develer for the gauge panel auto layout behaves differently from the bar gauge panel (no need for overflow handling as it lays out gauges neatly in available space) so including the gauge size option in that case doesn't really make as much sense IMO (nor do the gauge size options have any impact on gauge behavior when in auto mode (in the code))

torkelo · 2024-01-02T09:28:08Z

public/app/plugins/panel/gauge/panelcfg.gen.ts

-  minVizHeight: 75,
-  minVizWidth: 75,
+  minVizHeight: 200,
+  minVizWidth: 200,


@nmarrs this is a pretty big breaking change, radically changing the look of thousands of panels that used to show many gauges now just show a few and with a scrollbar.

You bet it caused regression issues.. Not cool nmarrs.

melroy89 · 2024-01-03T23:31:29Z

I bet I got regression on this PR .....

nmarrs added 2 commits October 9, 2023 13:15

initial rough POC for removing minViz height / width panel options fr…

6de6bdf

…om gauge panel

make overflow badge smaller

dd3eb61

nmarrs added type/refactor area/panel/gauge area/panel/bargauge labels Oct 9, 2023

nmarrs requested a review from torkelo October 9, 2023 20:46

nmarrs self-assigned this Oct 9, 2023

grafana-delivery-bot bot added this to the 10.2.x milestone Oct 9, 2023

grafana-pr-automation bot added the area/frontend label Oct 9, 2023

github-actions bot added the levitate breaking change A label indicating a breaking change and assigned by Levitate. label Oct 9, 2023

torkelo reviewed Oct 10, 2023

View reviewed changes

public/app/plugins/panel/gauge/GaugePanel.tsx Outdated Show resolved Hide resolved

torkelo reviewed Oct 10, 2023

View reviewed changes

nmarrs mentioned this pull request Oct 30, 2023

Bar Gauge: Add max height option #76042

Merged

3 tasks

nmarrs added 2 commits November 7, 2023 07:55

Merge remote-tracking branch 'origin' into cleanup-gauge-panel-layout…

8928e95

…-options

Update gauge sizing approach to match bar gauge

0fa9a8f

grafana-pr-automation bot added the type/docs label Nov 7, 2023

move overflow code inside VizRepeater

fd87964

github-actions bot removed the levitate breaking change A label indicating a breaking change and assigned by Levitate. label Nov 7, 2023

remove overflow UI for now

722a522

nmarrs force-pushed the cleanup-gauge-panel-layout-options branch from c86c496 to 722a522 Compare November 7, 2023 21:57

hide gauge sizing option if orientation in auto mode

b8f390d

nmarrs changed the title ~~[POC] Gauge Panels: Simplify / remove min viz height panel options~~ Gauge: Simplify gauge dimension panel options Nov 7, 2023

nmarrs marked this pull request as ready for review November 7, 2023 22:08

nmarrs requested review from a team and Eve832 as code owners November 7, 2023 22:08

nmarrs requested review from Develer and adela-almasan and removed request for a team November 7, 2023 22:08

nmarrs requested review from Clarity-89, eledobleefe and academo and removed request for a team November 7, 2023 22:08

nmarrs modified the milestones: 10.2.x, 10.3.x Nov 7, 2023

nmarrs added add to changelog no-backport Skip backport of PR labels Nov 7, 2023

nmarrs commented Nov 7, 2023

View reviewed changes

nmarrs mentioned this pull request Nov 7, 2023

Docs: Gauge and Bar Gauge updates #76240

Merged

3 tasks

Develer added 2 commits November 13, 2023 15:20

Merge branch 'main' into cleanup-gauge-panel-layout-options

275662d

Merge branch 'main' into cleanup-gauge-panel-layout-options

f229c52

Develer reviewed Nov 16, 2023

View reviewed changes

Develer approved these changes Nov 16, 2023

View reviewed changes

Merge remote-tracking branch 'origin' into cleanup-gauge-panel-layout…

3eb0f2f

…-options

nmarrs added 2 commits November 17, 2023 11:49

update to slider input with max of 600

3c18b1a

remove space

eb04701

nmarrs enabled auto-merge (squash) November 17, 2023 19:51

nmarrs merged commit 3e08abf into main Nov 17, 2023
21 checks passed

nmarrs deleted the cleanup-gauge-panel-layout-options branch November 17, 2023 19:59

aangelisc modified the milestones: 10.3.x, 10.2.3 Dec 21, 2023

torkelo reviewed Jan 2, 2024

View reviewed changes

torkelo mentioned this pull request Jan 2, 2024

Gauges: Fixing broken auto sizing #79926

Merged

2 tasks

grafana-delivery-bot bot mentioned this pull request Jan 2, 2024

[v10.2.x] Gauges: Fixing broken auto sizing #79940

Merged

2 tasks

melroy89 mentioned this pull request Jan 3, 2024

Dashboards: Regression on InfluxQL query variable: found $, expected ) #80003

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gauge: Simplify gauge dimension panel options #76216

Gauge: Simplify gauge dimension panel options #76216

nmarrs commented Oct 9, 2023 •

edited

torkelo left a comment

nmarrs Nov 7, 2023 •

edited

nmarrs commented Nov 7, 2023

Develer Nov 16, 2023

Develer Nov 17, 2023

Develer Nov 17, 2023

nmarrs Nov 17, 2023

nmarrs Nov 17, 2023

Develer commented Nov 17, 2023

nmarrs commented Nov 17, 2023

torkelo Jan 2, 2024

melroy89 Jan 3, 2024 •

edited

melroy89 commented Jan 3, 2024

-      .addNumberInput({
+.addSliderInput({
+        path: 'minVizWidth',
+        name: 'Min width',
+        description: 'Minimum column width (vertical orientation)',
+        defaultValue: defaultOptions.minVizWidth,
+        settings: {
+          min: 0,
+          max: 300,
+          step: 1,
+        },
+        showIf: (options: Options) =>
+          options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Vertical,
+      })
+      .addSliderInput({
+        path: 'minVizHeight',
+        name: 'Min height',
+        description: 'Minimum row height (horizontal orientation)',
+        defaultValue: defaultOptions.minVizHeight,
+        settings: {
+          min: 0,
+          max: 300,
+          step: 1,
+        },
+        showIf: (options: Options) =>
+          options.sizing === BarGaugeSizing.Manual && options.orientation === VizOrientation.Horizontal,
+      });

Gauge: Simplify gauge dimension panel options #76216

Gauge: Simplify gauge dimension panel options #76216

Conversation

nmarrs commented Oct 9, 2023 • edited

torkelo left a comment

Choose a reason for hiding this comment

nmarrs Nov 7, 2023 • edited

Choose a reason for hiding this comment

nmarrs commented Nov 7, 2023

Develer Nov 16, 2023

Choose a reason for hiding this comment

Develer Nov 17, 2023

Choose a reason for hiding this comment

Develer Nov 17, 2023

Choose a reason for hiding this comment

nmarrs Nov 17, 2023

Choose a reason for hiding this comment

nmarrs Nov 17, 2023

Choose a reason for hiding this comment

Develer commented Nov 17, 2023

nmarrs commented Nov 17, 2023

torkelo Jan 2, 2024

Choose a reason for hiding this comment

melroy89 Jan 3, 2024 • edited

Choose a reason for hiding this comment

melroy89 commented Jan 3, 2024

nmarrs commented Oct 9, 2023 •

edited

nmarrs Nov 7, 2023 •

edited

melroy89 Jan 3, 2024 •

edited