Bar Gauge: Add extra padding for scrollbar (#99722)

* Add extra padding in bar gauge if scroll exists

* Add thin scroll bars, and fix test

* add comment about height calculation

packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx

@@ -56,6 +56,7 @@ function getProps(propOverrides?: Partial<Props>): Props {
     theme,
     orientation: VizOrientation.Horizontal,
     namePlacement: BarGaugeNamePlacement.Auto,
+    isOverflow: false,
   };
 
   Object.assign(props, propOverrides);

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

@@ -34,6 +34,7 @@ const MAX_VALUE_WIDTH = 150;
 const TITLE_LINE_HEIGHT = 1.5;
 const VALUE_LINE_HEIGHT = 1;
 const VALUE_LEFT_PADDING = 10;
+const VALUE_RIGHT_OVERFLOW_PADDING = 15;
 
 export interface Props extends Themeable2 {
   height: number;
@@ -52,6 +53,7 @@ export interface Props extends Themeable2 {
   alignmentFactors?: DisplayValueAlignmentFactors;
   valueDisplayMode?: BarGaugeValueMode;
   namePlacement?: BarGaugeNamePlacement;
+  isOverflow: boolean;
 }
 
 export class BarGauge extends PureComponent<Props> {
@@ -73,6 +75,7 @@ export class BarGauge extends PureComponent<Props> {
     },
     itemSpacing: 8,
     showUnfilled: true,
+    isOverflow: false,
   };
 
   render() {
@@ -145,6 +148,7 @@ export class BarGauge extends PureComponent<Props> {
       text,
       valueDisplayMode,
       theme,
+      isOverflow,
     } = this.props;
     const { valueHeight, valueWidth, maxBarHeight, maxBarWidth, wrapperWidth, wrapperHeight } =
       calculateBarAndValueDimensions(this.props);
@@ -160,7 +164,15 @@ export class BarGauge extends PureComponent<Props> {
     const valueColor = getTextValueColor(this.props);
 
     const valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value;
-    const valueStyles = getValueStyles(valueToBaseSizeOn, valueColor, valueWidth, valueHeight, orientation, text);
+    const valueStyles = getValueStyles(
+      valueToBaseSizeOn,
+      valueColor,
+      valueWidth,
+      valueHeight,
+      orientation,
+      isOverflow,
+      text
+    );
 
     const containerStyles: CSSProperties = {
       width: `${wrapperWidth}px`,
@@ -486,7 +498,7 @@ export function getValuePercent(value: number, minValue: number, maxValue: numbe
  * Only exported to for unit test
  */
 export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles {
-  const { displayMode, field, value, alignmentFactors, orientation, theme, text } = props;
+  const { displayMode, field, value, alignmentFactors, orientation, theme, text, isOverflow } = props;
   const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props);
 
   const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;
@@ -496,7 +508,15 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
   const barColor = value.color ?? FALLBACK_COLOR;
 
   const valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value;
-  const valueStyles = getValueStyles(valueToBaseSizeOn, textColor, valueWidth, valueHeight, orientation, text);
+  const valueStyles = getValueStyles(
+    valueToBaseSizeOn,
+    textColor,
+    valueWidth,
+    valueHeight,
+    orientation,
+    isOverflow,
+    text
+  );
 
   const isBasic = displayMode === 'basic';
   const wrapperStyles: CSSProperties = {
@@ -663,6 +683,7 @@ function getValueStyles(
   width: number,
   height: number,
   orientation: VizOrientation,
+  isOverflow: boolean,
   text?: VizTextDisplayOptions
 ): CSSProperties {
   const styles: CSSProperties = {
@@ -688,7 +709,7 @@ function getValueStyles(
       calculateFontSize(formattedValueString, textWidth - VALUE_LEFT_PADDING * 2, height, VALUE_LINE_HEIGHT);
     styles.justifyContent = `flex-end`;
     styles.paddingLeft = `${VALUE_LEFT_PADDING}px`;
-    styles.paddingRight = `${VALUE_LEFT_PADDING}px`;
+    styles.paddingRight = `${VALUE_LEFT_PADDING + (isOverflow ? VALUE_RIGHT_OVERFLOW_PADDING : 0)}px`;
     // Need to remove the left padding from the text width constraints
     textWidth -= VALUE_LEFT_PADDING;
   }

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

@@ -181,6 +181,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<PropsWithDefaults<V, D
         repeaterStyle.flexDirection = 'column';
         repeaterStyle.height = `${height}px`;
         repeaterStyle.overflowX = 'hidden';
+        repeaterStyle.scrollbarWidth = 'thin';
         itemStyles.marginBottom = `${itemSpacing}px`;
         vizWidth = width;
         vizHeight = clamp(defaultVizHeight, minVizHeight ?? 0, maxVizHeight ?? defaultVizHeight);

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

@@ -29,6 +29,9 @@ export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
     const { value, alignmentFactors, orientation, width, height, count } = valueProps;
     const { field, display, view, colIndex } = value;
     const { openMenu, targetClassName } = menuProps;
+    const spacing = this.getItemSpacing();
+    // check if the total height is bigger than the visualization height, if so, there will be scrollbars for overflow
+    const isOverflow = (height + spacing) * count - spacing > this.props.height;
 
     let processor: DisplayProcessor | undefined = undefined;
     if (view && isNumber(colIndex)) {
@@ -45,7 +48,7 @@ export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
         text={options.text}
         display={processor}
         theme={config.theme2}
-        itemSpacing={this.getItemSpacing()}
+        itemSpacing={spacing}
         displayMode={options.displayMode}
         onClick={openMenu}
         className={targetClassName}
@@ -53,6 +56,7 @@ export class BarGaugePanel extends PureComponent<BarGaugePanelProps> {
         showUnfilled={options.showUnfilled}
         valueDisplayMode={options.valueMode}
         namePlacement={options.namePlacement}
+        isOverflow={isOverflow}
       />
     );
   };