From 59c081e89697da576c339eed3fe4966be47c8b58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sun, 7 Apr 2019 14:32:41 +0200
Subject: [PATCH] BarGauge: Fixed minor margin issue (#16419)

Fixed margin issue that was not accounted for in width calc (#16419)
---
 .../grafana-ui/src/components/BarGauge/BarGauge.tsx    | 10 ++++++++--
 .../BarGauge/__snapshots__/BarGauge.test.tsx.snap      |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index 6622545229e..ea73c74e153 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -286,7 +286,7 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C
 
       titleStyles.width = `${titleDim.width}px`;
       titleStyles.textAlign = 'right';
-      titleStyles.marginRight = '10px';
+      titleStyles.paddingRight = '10px';
     }
   }
 
@@ -344,6 +344,11 @@ function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions {
     }
   }
 
+  // console.log('titleDim', titleDim);
+  // console.log('valueWidth', valueWidth);
+  // console.log('width', width);
+  // console.log('total', titleDim.width + maxBarWidth + valueWidth);
+
   return {
     valueWidth,
     valueHeight,
@@ -409,7 +414,8 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
     barStyles.transition = 'width 1s';
     barStyles.height = `${maxBarHeight}px`;
     barStyles.width = `${barWidth}px`;
-    barStyles.marginRight = '10px';
+
+    valueStyles.paddingLeft = '10px';
 
     if (isBasic) {
       // Basic styles
diff --git a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
index 7a9fb4b468b..4bb9395dd96 100644
--- a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
+++ b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`BarGauge Render with basic options should render 1`] = `
         "display": "flex",
         "fontSize": "27.27px",
         "height": "300px",
+        "paddingLeft": "10px",
         "width": "60px",
       }
     }
@@ -33,7 +34,6 @@ exports[`BarGauge Render with basic options should render 1`] = `
         "borderRadius": "3px",
         "borderRight": "2px solid #73BF69",
         "height": "300px",
-        "marginRight": "10px",
         "transition": "width 1s",
         "width": "60px",
       }