Panel/BarGauge: Prevent overflow in panel with many series (#26926)

* Panel/BarGauge: Prevent overflow in panel with many series
Closes #24889

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

@@ -24,6 +24,7 @@ interface Props<V, D> {
   itemSpacing?: number;
   itemSpacing?: number;
   /** When orientation is set to auto layout items in a grid */
   /** When orientation is set to auto layout items in a grid */
   autoGrid?: boolean;
   autoGrid?: boolean;
+  minVizHeight?: number;
 }
 }
 
 
 export interface VizRepeaterRenderValueProps<V, D = {}> {
 export interface VizRepeaterRenderValueProps<V, D = {}> {
@@ -137,7 +138,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
   }
   }
 
 
   render() {
   render() {
-    const { renderValue, height, width, itemSpacing, getAlignmentFactors, autoGrid, orientation } = this
+    const { renderValue, height, width, itemSpacing, getAlignmentFactors, autoGrid, orientation, minVizHeight } = this
       .props as PropsWithDefaults<V, D>;
       .props as PropsWithDefaults<V, D>;
     const { values } = this.state;
     const { values } = this.state;
 
 
@@ -151,6 +152,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
 
 
     const repeaterStyle: React.CSSProperties = {
     const repeaterStyle: React.CSSProperties = {
       display: 'flex',
       display: 'flex',
+      overflow: minVizHeight ? 'hidden scroll' : 'visible',
     };
     };
 
 
     let vizHeight = height;
     let vizHeight = height;
@@ -161,9 +163,10 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
     switch (resolvedOrientation) {
     switch (resolvedOrientation) {
       case VizOrientation.Horizontal:
       case VizOrientation.Horizontal:
         repeaterStyle.flexDirection = 'column';
         repeaterStyle.flexDirection = 'column';
+        repeaterStyle.height = `${height}px`;
         itemStyles.marginBottom = `${itemSpacing}px`;
         itemStyles.marginBottom = `${itemSpacing}px`;
         vizWidth = width;
         vizWidth = width;
-        vizHeight = height / values.length - itemSpacing + itemSpacing / values.length;
+        vizHeight = Math.max(height / values.length - itemSpacing + itemSpacing / values.length, minVizHeight ?? 0);
         break;
         break;
       case VizOrientation.Vertical:
       case VizOrientation.Vertical:
         repeaterStyle.flexDirection = 'row';
         repeaterStyle.flexDirection = 'row';

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

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