From b5960313fb90ed77ac5238bb8ee3e2ea909eadd4 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 26 Nov 2021 08:15:46 -0500
Subject: [PATCH] BarGauge: Limit title width when name is really long (#42346)
 (#42354)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 5c4fd91cd365c00b9524291a08f584a6753a3021)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 .../src/components/BarGauge/BarGauge.test.tsx     | 15 +++++++++++++--
 .../src/components/BarGauge/BarGauge.tsx          |  5 ++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
index 307473a6924..886ebf439e1 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
@@ -218,9 +218,7 @@ describe('BarGauge', () => {
       const styles = getTitleStyles(props);
       expect(styles.wrapper.flexDirection).toBe('column');
     });
-  });
 
-  describe('Horizontal bar with title', () => {
     it('should place below if height < 40', () => {
       const props = getProps({
         height: 30,
@@ -249,6 +247,19 @@ describe('BarGauge', () => {
       expect(styles2.title.width).toBe('43px');
     });
 
+    it('Should limit text length to 40%', () => {
+      const props = getProps({
+        height: 30,
+        value: getValue(
+          100,
+          'saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
+        ),
+        orientation: VizOrientation.Horizontal,
+      });
+      const styles = getTitleStyles(props);
+      expect(styles.title.width).toBe('119px');
+    });
+
     it('should use alignmentFactors if provided', () => {
       const props = getProps({
         height: 30,
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index 5f6641c819e..65c1357d51d 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -268,10 +268,13 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
   const titleFontSize = titleHeight / TITLE_LINE_HEIGHT;
   const textSize = measureText(title, titleFontSize);
 
+  // Do not allow title to take up more than 40% width
+  const textWidth = Math.min(textSize.width + 15, width * 0.4);
+
   return {
     fontSize: text?.titleSize ?? titleFontSize,
     height: 0,
-    width: textSize.width + 15,
+    width: textWidth,
     placement: 'left',
   };
 }