From c2403767a0c0f222ee6cfed17aa83e583e66f2ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 7 Jul 2020 10:16:06 +0200
Subject: [PATCH] StatPanel: Fixes issue with name showing for single series /
 field results (#26070)

* StatPanel: Fix text mode auto logic

* Removed import

(cherry picked from commit c9f22b72e3c22b3e1ad446e2c63049efbc3fd94f)
---
 .../grafana-ui/src/components/BigValue/BigValue.tsx   |  6 ++++++
 .../src/components/BigValue/BigValueLayout.tsx        | 11 +++++++++--
 public/app/plugins/panel/stat/StatPanel.tsx           |  3 ++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
index bfeb9ed17fe..00fd9011df5 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx
@@ -55,6 +55,12 @@ export interface Props extends Themeable {
   justifyMode?: BigValueJustifyMode;
   alignmentFactors?: DisplayValueAlignmentFactors;
   textMode?: BigValueTextMode;
+
+  /**
+   * If part of a series of stat panes, this is the total number.
+   * Used by BigValueTextMode.Auto text mode.
+   */
+  count?: number;
 }
 
 export class BigValue extends PureComponent<Props> {
diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index 3b8c70f6a48..c7dba399c28 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -463,12 +463,18 @@ export interface BigValueTextValues extends DisplayValue {
 }
 
 function getTextValues(props: Props): BigValueTextValues {
-  const { textMode: nameAndValue, value, alignmentFactors } = props;
+  const { value, alignmentFactors, count } = props;
+  let { textMode } = props;
 
   const titleToAlignTo = alignmentFactors ? alignmentFactors.title : value.title;
   const valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : value);
 
-  switch (nameAndValue) {
+  // In the auto case we only show title if this big value is part of more panes (count > 1)
+  if (textMode === BigValueTextMode.Auto && (count ?? 1) === 1) {
+    textMode = BigValueTextMode.Value;
+  }
+
+  switch (textMode) {
     case BigValueTextMode.Name:
       return {
         ...value,
@@ -498,6 +504,7 @@ function getTextValues(props: Props): BigValueTextValues {
         valueToAlignTo: '1',
         tooltip: `Name: ${value.title}\nValue: ${formattedValueToString(value)}`,
       };
+    case BigValueTextMode.ValueAndName:
     default:
       return {
         ...value,
diff --git a/public/app/plugins/panel/stat/StatPanel.tsx b/public/app/plugins/panel/stat/StatPanel.tsx
index 85885d0483c..3b750e658b3 100644
--- a/public/app/plugins/panel/stat/StatPanel.tsx
+++ b/public/app/plugins/panel/stat/StatPanel.tsx
@@ -26,7 +26,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
     menuProps: DataLinksContextMenuApi
   ): JSX.Element => {
     const { timeRange, options } = this.props;
-    const { value, alignmentFactors, width, height } = valueProps;
+    const { value, alignmentFactors, width, height, count } = valueProps;
     const { openMenu, targetClassName } = menuProps;
     let sparkline: BigValueSparkline | undefined;
 
@@ -48,6 +48,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
     return (
       <BigValue
         value={value.display}
+        count={count}
         sparkline={sparkline}
         colorMode={options.colorMode}
         graphMode={options.graphMode}