From 05098ec38e8e4446620c4d91086e9844a28cfdaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 5 Apr 2022 15:34:17 +0200
Subject: [PATCH] StatPanel: Fixes font size issue when there is only 1
 sparkline data point (#47075)

* StatPanel: Fixes font size issue when there is only 1 sparkline data point

* Fixed wide layout case
---
 .../BigValue/BigValueLayout.test.tsx          | 42 ++++++++++++++++++-
 .../components/BigValue/BigValueLayout.tsx    | 17 ++++----
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx
index 9f311c98719..7b7d2b6791c 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx
@@ -1,5 +1,5 @@
-import { Props, BigValueColorMode, BigValueGraphMode } from './BigValue';
-import { buildLayout, StackedWithChartLayout, WideWithChartLayout } from './BigValueLayout';
+import { Props, BigValueColorMode, BigValueGraphMode, BigValueTextMode } from './BigValue';
+import { buildLayout, StackedWithChartLayout, StackedWithNoChartLayout, WideWithChartLayout } from './BigValueLayout';
 import { ArrayVector, createTheme, FieldType } from '@grafana/data';
 
 function getProps(propOverrides?: Partial<Props>): Props {
@@ -20,6 +20,7 @@ function getProps(propOverrides?: Partial<Props>): Props {
         config: {},
       },
     },
+    count: 1,
     theme: createTheme(),
   };
 
@@ -39,6 +40,43 @@ describe('BigValueLayout', () => {
       expect(layout).toBeInstanceOf(StackedWithChartLayout);
     });
 
+    it('should not include title height when count is 1 and title is auto hidden', () => {
+      const layout = buildLayout(
+        getProps({
+          value: {
+            text: '25',
+            title: '10',
+            numeric: 25,
+          },
+          sparkline: undefined,
+          textMode: BigValueTextMode.Auto,
+          count: 1,
+        })
+      );
+      expect(layout.titleFontSize).toBe(0);
+    });
+
+    it('should not use chart layout if only one sparkline point', () => {
+      const layout = buildLayout(
+        getProps({
+          value: {
+            text: '25',
+            title: '10',
+            numeric: 25,
+          },
+          sparkline: {
+            y: {
+              name: '',
+              values: new ArrayVector([1]),
+              type: FieldType.number,
+              config: {},
+            },
+          },
+        })
+      );
+      expect(layout).toBeInstanceOf(StackedWithNoChartLayout);
+    });
+
     it('should auto select to wide layout', () => {
       const layout = buildLayout(
         getProps({
diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index a42db2a3f28..7f3bde9344f 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -38,8 +38,8 @@ export abstract class BigValueLayout {
     this.justifyCenter = shouldJustifyCenter(props.justifyMode, this.textValues.title);
     this.valueToAlignTo = this.textValues.valueToAlignTo;
     this.titleToAlignTo = this.textValues.titleToAlignTo;
-    this.titleFontSize = 14;
-    this.valueFontSize = 14;
+    this.titleFontSize = 0;
+    this.valueFontSize = 0;
     this.chartHeight = 0;
     this.chartWidth = 0;
     this.maxTextWidth = width - this.panelPadding * 2;
@@ -335,8 +335,9 @@ export class StackedWithChartLayout extends BigValueLayout {
         LINE_HEIGHT,
         MAX_TITLE_SIZE
       );
+
+      titleHeight = this.titleFontSize * LINE_HEIGHT;
     }
-    titleHeight = this.titleFontSize * LINE_HEIGHT;
 
     if (this.valueToAlignTo.length) {
       this.valueFontSize = calculateFontSize(
@@ -399,8 +400,10 @@ export class StackedWithNoChartLayout extends BigValueLayout {
       );
     }
 
-    // make title fontsize it's a bit smaller than valueFontSize
-    this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
+    if (this.titleToAlignTo?.length) {
+      // make title fontsize it's a bit smaller than valueFontSize
+      this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
+    }
   }
 
   getValueAndTitleContainerStyles() {
@@ -422,7 +425,7 @@ export function buildLayout(props: Props): BigValueLayout {
   const useWideLayout = width / height > 2.5;
 
   if (useWideLayout) {
-    if (height > 50 && !!sparkline) {
+    if (height > 50 && !!sparkline && sparkline.y.values.length > 1) {
       return new WideWithChartLayout(props);
     } else {
       return new WideNoChartLayout(props);
@@ -430,7 +433,7 @@ export function buildLayout(props: Props): BigValueLayout {
   }
 
   // stacked layouts
-  if (height > 100 && !!sparkline) {
+  if (height > 100 && sparkline && sparkline.y.values.length > 1) {
     return new StackedWithChartLayout(props);
   } else {
     return new StackedWithNoChartLayout(props);