From cbe1d7b08c8d1a9338e86df7efe56f0b139b29fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 28 Jul 2020 07:28:50 +0200
Subject: [PATCH] StatPanel: Fix stat panel display name not showing when
 explicitly set (#26616)

* StatPanel: Fix stat panel display name now showing when explicitly set

* StatPanel: Updarted auto mode to also take panel title into consideration

* fixed test
---
 packages/grafana-data/src/types/panel.ts          |  2 ++
 .../features/dashboard/dashgrid/PanelChrome.tsx   |  1 +
 .../plugins/panel/bargauge/BarGaugePanel.test.tsx |  1 +
 public/app/plugins/panel/stat/StatPanel.tsx       | 15 ++++++++++++++-
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-data/src/types/panel.ts b/packages/grafana-data/src/types/panel.ts
index ad51625f04c..1c1ca6aa821 100644
--- a/packages/grafana-data/src/types/panel.ts
+++ b/packages/grafana-data/src/types/panel.ts
@@ -69,6 +69,8 @@ export interface PanelProps<T = any> {
   onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
   /** @internal */
   renderCounter: number;
+  /** Panel title */
+  title: string;
 }
 
 export interface PanelEditorProps<T = any> {
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 667c3c78630..a0a385cf3f2 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -273,6 +273,7 @@ export class PanelChrome extends PureComponent<Props, State> {
           <PanelComponent
             id={panel.id}
             data={data}
+            title={panel.title}
             timeRange={timeRange}
             timeZone={this.props.dashboard.getTimezone()}
             options={panelOptions}
diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx
index b54e58d48ed..93cc8b74ba7 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx
@@ -84,6 +84,7 @@ function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<B
       timeRange={timeRange}
       timeZone={'utc'}
       options={options}
+      title="hello"
       fieldConfig={fieldConfig}
       onFieldConfigChange={() => {}}
       onOptionsChange={() => {}}
diff --git a/public/app/plugins/panel/stat/StatPanel.tsx b/public/app/plugins/panel/stat/StatPanel.tsx
index 3b750e658b3..6eb9470e1dc 100644
--- a/public/app/plugins/panel/stat/StatPanel.tsx
+++ b/public/app/plugins/panel/stat/StatPanel.tsx
@@ -6,6 +6,7 @@ import {
   DataLinksContextMenu,
   VizRepeater,
   VizRepeaterRenderValueProps,
+  BigValueTextMode,
 } from '@grafana/ui';
 import {
   DisplayValueAlignmentFactors,
@@ -53,7 +54,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
         colorMode={options.colorMode}
         graphMode={options.graphMode}
         justifyMode={options.justifyMode}
-        textMode={options.textMode}
+        textMode={this.getTextMode()}
         alignmentFactors={alignmentFactors}
         width={width}
         height={height}
@@ -63,6 +64,18 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
       />
     );
   };
+
+  getTextMode() {
+    const { options, fieldConfig, title } = this.props;
+
+    // If we have manually set displayName or panel title switch text mode to value and name
+    if (options.textMode === BigValueTextMode.Auto && (fieldConfig.defaults.displayName || !title)) {
+      return BigValueTextMode.ValueAndName;
+    }
+
+    return options.textMode;
+  }
+
   renderValue = (valueProps: VizRepeaterRenderValueProps<FieldDisplay, DisplayValueAlignmentFactors>): JSX.Element => {
     const { value } = valueProps;
     const { getLinks, hasLinks } = value;