From 1795a2b4e3a88d0fcdf562d6fdfffbd47ef8bdab Mon Sep 17 00:00:00 2001 From: Kristina Date: Wed, 29 Jan 2025 13:02:56 -0600 Subject: [PATCH] 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 --- .../src/components/BarGauge/BarGauge.test.tsx | 1 + .../src/components/BarGauge/BarGauge.tsx | 29 ++++++++++++++++--- .../components/VizRepeater/VizRepeater.tsx | 1 + .../plugins/panel/bargauge/BarGaugePanel.tsx | 6 +++- 4 files changed, 32 insertions(+), 5 deletions(-) diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx index c8b76542ba5..df45a86942a 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx @@ -56,6 +56,7 @@ function getProps(propOverrides?: Partial): Props { theme, orientation: VizOrientation.Horizontal, namePlacement: BarGaugeNamePlacement.Auto, + isOverflow: false, }; Object.assign(props, propOverrides); diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 1048d86253a..043578ff10a 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/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 { @@ -73,6 +75,7 @@ export class BarGauge extends PureComponent { }, itemSpacing: 8, showUnfilled: true, + isOverflow: false, }; render() { @@ -145,6 +148,7 @@ export class BarGauge extends PureComponent { 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 { 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; } diff --git a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx index fab514bde4b..7fe09d92777 100644 --- a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx +++ b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx @@ -181,6 +181,7 @@ export class VizRepeater extends PureComponent { 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 { 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 { showUnfilled={options.showUnfilled} valueDisplayMode={options.valueMode} namePlacement={options.namePlacement} + isOverflow={isOverflow} /> ); };