feat: Bar Gauge Support scrolling (#46819)

* feat: Bar Gauge Support scrolling

* Update public/app/plugins/panel/bargauge/module.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/plugins/panel/bargauge/module.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* docs: Bar gauge add 'min-width' and 'min-height'

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

.betterer.results

@@ -341,7 +341,7 @@ exports[`no enzyme tests`] = {
     "public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx:1231427": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx:1206229922": [
+    "public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx:1527575498": [
       [1, 31, 13, "RegExp match", "2409514259"]
     ]
   }`

docs/sources/visualizations/bar-gauge-panel.md

@@ -59,3 +59,15 @@ Choose a display mode.
 ### Show unfilled area
 
 Select this if you want to render the unfilled region of the bars as dark gray. Not applicable to Retro LCD display mode.
+
+### Min width
+
+Limit the minimum width of the bar column in the vertical direction.
+
+Automatically show x-axis scrollbar when there is a large amount of data.
+
+### Min height
+
+Limit the minimum height of the bar row in the horizontal direction.
+
+Automatically show y-axis scrollbar when there is a large amount of data.

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

@@ -24,6 +24,7 @@ interface Props<V, D> {
   itemSpacing?: number;
   /** When orientation is set to auto layout items in a grid */
   autoGrid?: boolean;
+  minVizWidth?: number;
   minVizHeight?: number;
 }
 
@@ -138,8 +139,17 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
   }
 
   render() {
-    const { renderValue, height, width, itemSpacing, getAlignmentFactors, autoGrid, orientation, minVizHeight } = this
-      .props as PropsWithDefaults<V, D>;
+    const {
+      renderValue,
+      height,
+      width,
+      itemSpacing,
+      getAlignmentFactors,
+      autoGrid,
+      orientation,
+      minVizWidth,
+      minVizHeight,
+    } = this.props as PropsWithDefaults<V, D>;
     const { values } = this.state;
 
     if (autoGrid && orientation === VizOrientation.Auto) {
@@ -152,7 +162,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
 
     const repeaterStyle: React.CSSProperties = {
       display: 'flex',
-      overflow: minVizHeight ? 'hidden auto' : 'hidden',
+      overflow: `${minVizWidth ? 'auto' : 'hidden'} ${minVizHeight ? 'auto' : 'hidden'}`,
     };
 
     let vizHeight = height;
@@ -173,7 +183,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
         repeaterStyle.justifyContent = 'space-between';
         itemStyles.marginRight = `${itemSpacing}px`;
         vizHeight = height;
-        vizWidth = width / values.length - itemSpacing + itemSpacing / values.length;
+        vizWidth = Math.max(width / values.length - itemSpacing + itemSpacing / values.length, minVizWidth ?? 0);
     }
 
     itemStyles.width = `${vizWidth}px`;

public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx

@@ -74,6 +74,8 @@ function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<B
     },
     orientation: VizOrientation.Horizontal,
     showUnfilled: true,
+    minVizHeight: 10,
+    minVizWidth: 0,
   };
   const fieldConfig: FieldConfigSource = {
     defaults: {},

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -102,7 +102,8 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
         renderCounter={renderCounter}
         width={width}
         height={height}
-        minVizHeight={10}
+        minVizWidth={options.minVizWidth}
+        minVizHeight={options.minVizHeight}
         itemSpacing={this.getItemSpacing()}
         orientation={options.orientation}
       />

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

@@ -1,5 +1,5 @@
 import { commonOptionsBuilder, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
-import { PanelPlugin } from '@grafana/data';
+import { PanelPlugin, VizOrientation } from '@grafana/data';
 import { BarGaugePanel } from './BarGaugePanel';
 import { BarGaugeOptions, displayModes } from './types';
 import { addOrientationOption, addStandardDataReduceOptions } from '../stat/types';
@@ -28,6 +28,20 @@ export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
         description: 'When enabled renders the unfilled region as gray',
         defaultValue: true,
         showIf: (options: BarGaugeOptions) => options.displayMode !== 'lcd',
+      })
+      .addNumberInput({
+        path: 'minVizWidth',
+        name: 'Min width',
+        description: 'Minimum column width',
+        defaultValue: 0,
+        showIf: (options: BarGaugeOptions) => options.orientation === VizOrientation.Vertical,
+      })
+      .addNumberInput({
+        path: 'minVizHeight',
+        name: 'Min height',
+        description: 'Minimum row height',
+        defaultValue: 10,
+        showIf: (options: BarGaugeOptions) => options.orientation === VizOrientation.Horizontal,
       });
   })
   .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)

public/app/plugins/panel/bargauge/types.ts

@@ -4,6 +4,8 @@ import { SelectableValue } from '@grafana/data';
 export interface BarGaugeOptions extends SingleStatBaseOptions {
   displayMode: BarGaugeDisplayMode;
   showUnfilled: boolean;
+  minVizWidth: number;
+  minVizHeight: number;
 }
 
 export const displayModes: Array<SelectableValue<string>> = [