BarGuage: Fixes vertical view flip and bar misalignment when used with datalinks (#43655)

* BarGauge: fix vertical view flip issue

* fix bar misalignment in vertical and horizontal orientations

* add test to prevent bar misalignment in the future

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

@@ -170,6 +170,18 @@ describe('BarGauge', () => {
     });
   });
 
+  describe('Vertical bar', () => {
+    it('should adjust empty region to always have same width as colored bar', () => {
+      const props = getProps({
+        width: 150,
+        value: getValue(100),
+        orientation: VizOrientation.Vertical,
+      });
+      const styles = getBasicAndGradientStyles(props);
+      expect(styles.emptyBar.width).toBe('150px');
+    });
+  });
+
   describe('Vertical bar without title', () => {
     it('should not include title height in height', () => {
       const props = getProps({
@@ -273,6 +285,16 @@ describe('BarGauge', () => {
       const styles = getTitleStyles(props);
       expect(styles.title.width).toBe('37px');
     });
+
+    it('should adjust empty region to always have same height as colored bar', () => {
+      const props = getProps({
+        height: 150,
+        value: getValue(100),
+        orientation: VizOrientation.Horizontal,
+      });
+      const styles = getBasicAndGradientStyles(props);
+      expect(styles.emptyBar.height).toBe('150px');
+    });
   });
 
   describe('Gradient', () => {

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

@@ -486,6 +486,9 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
     // adjust so that filled in bar is at the bottom
     emptyBar.bottom = '-3px';
 
+    //adjust empty region to always have same width as colored bar
+    emptyBar.width = `${valueWidth}px`;
+
     if (isBasic) {
       // Basic styles
       barStyles.background = `${tinycolor(valueColor).setAlpha(0.35).toRgbString()}`;
@@ -509,6 +512,9 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
     // shift empty region back to fill gaps due to border radius
     emptyBar.left = '-3px';
 
+    //adjust empty region to always have same height as colored bar
+    emptyBar.height = `${valueHeight}px`;
+
     if (isBasic) {
       // Basic styles
       barStyles.background = `${tinycolor(valueColor).setAlpha(0.35).toRgbString()}`;

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

@@ -56,6 +56,7 @@ exports[`BarGauge Render with basic options should render 1`] = `
           "borderRadius": "3px",
           "display": "flex",
           "flexGrow": 1,
+          "height": "300px",
           "left": "-3px",
           "position": "relative",
         }

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

@@ -8,6 +8,7 @@ import {
   FieldConfig,
   DisplayProcessor,
   DisplayValue,
+  VizOrientation,
 } from '@grafana/data';
 import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
 
@@ -52,12 +53,12 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
   };
 
   renderValue = (valueProps: VizRepeaterRenderValueProps<FieldDisplay, DisplayValueAlignmentFactors>): JSX.Element => {
-    const { value } = valueProps;
+    const { value, orientation } = valueProps;
     const { hasLinks, getLinks } = value;
 
     if (hasLinks && getLinks) {
       return (
-        <div style={{ width: '100%' }}>
+        <div style={{ width: '100%', display: orientation === VizOrientation.Vertical ? 'flex' : 'initial' }}>
           <DataLinksContextMenu links={getLinks} config={value.field}>
             {(api) => this.renderComponent(valueProps, api)}
           </DataLinksContextMenu>