From 751a07e3c5a4188817b49fed54feadfb71c04b3a Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 12 Aug 2020 16:26:18 +0100
Subject: [PATCH] Panel/BarGauge: Prevent overflow in panel with many series
 (#26926)

* Panel/BarGauge: Prevent overflow in panel with many series
Closes #24889
---
 .../grafana-ui/src/components/VizRepeater/VizRepeater.tsx  | 7 +++++--
 public/app/plugins/panel/bargauge/BarGaugePanel.tsx        | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
index e76d44f23d5..fdc126aa7d3 100644
--- a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
+++ b/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;
+  minVizHeight?: number;
 }
 
 export interface VizRepeaterRenderValueProps<V, D = {}> {
@@ -137,7 +138,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
   }
 
   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>;
     const { values } = this.state;
 
@@ -151,6 +152,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
 
     const repeaterStyle: React.CSSProperties = {
       display: 'flex',
+      overflow: minVizHeight ? 'hidden scroll' : 'visible',
     };
 
     let vizHeight = height;
@@ -161,9 +163,10 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
     switch (resolvedOrientation) {
       case VizOrientation.Horizontal:
         repeaterStyle.flexDirection = 'column';
+        repeaterStyle.height = `${height}px`;
         itemStyles.marginBottom = `${itemSpacing}px`;
         vizWidth = width;
-        vizHeight = height / values.length - itemSpacing + itemSpacing / values.length;
+        vizHeight = Math.max(height / values.length - itemSpacing + itemSpacing / values.length, minVizHeight ?? 0);
         break;
       case VizOrientation.Vertical:
         repeaterStyle.flexDirection = 'row';
diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
index f25be44d92b..7f9e02de58e 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
@@ -100,6 +100,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
         renderCounter={renderCounter}
         width={width}
         height={height}
+        minVizHeight={10}
         itemSpacing={this.getItemSpacing()}
         orientation={options.orientation}
       />