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

@@ -69,6 +69,8 @@ export interface PanelProps<T = any> {
   onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
   onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
   /** @internal */
   /** @internal */
   renderCounter: number;
   renderCounter: number;
+  /** Panel title */
+  title: string;
 }
 }
 
 
 export interface PanelEditorProps<T = any> {
 export interface PanelEditorProps<T = any> {

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -273,6 +273,7 @@ export class PanelChrome extends PureComponent<Props, State> {
           <PanelComponent
           <PanelComponent
             id={panel.id}
             id={panel.id}
             data={data}
             data={data}
+            title={panel.title}
             timeRange={timeRange}
             timeRange={timeRange}
             timeZone={this.props.dashboard.getTimezone()}
             timeZone={this.props.dashboard.getTimezone()}
             options={panelOptions}
             options={panelOptions}

public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx

@@ -84,6 +84,7 @@ function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<B
       timeRange={timeRange}
       timeRange={timeRange}
       timeZone={'utc'}
       timeZone={'utc'}
       options={options}
       options={options}
+      title="hello"
       fieldConfig={fieldConfig}
       fieldConfig={fieldConfig}
       onFieldConfigChange={() => {}}
       onFieldConfigChange={() => {}}
       onOptionsChange={() => {}}
       onOptionsChange={() => {}}

public/app/plugins/panel/stat/StatPanel.tsx

@@ -6,6 +6,7 @@ import {
   DataLinksContextMenu,
   DataLinksContextMenu,
   VizRepeater,
   VizRepeater,
   VizRepeaterRenderValueProps,
   VizRepeaterRenderValueProps,
+  BigValueTextMode,
 } from '@grafana/ui';
 } from '@grafana/ui';
 import {
 import {
   DisplayValueAlignmentFactors,
   DisplayValueAlignmentFactors,
@@ -53,7 +54,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
         colorMode={options.colorMode}
         colorMode={options.colorMode}
         graphMode={options.graphMode}
         graphMode={options.graphMode}
         justifyMode={options.justifyMode}
         justifyMode={options.justifyMode}
-        textMode={options.textMode}
+        textMode={this.getTextMode()}
         alignmentFactors={alignmentFactors}
         alignmentFactors={alignmentFactors}
         width={width}
         width={width}
         height={height}
         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 => {
   renderValue = (valueProps: VizRepeaterRenderValueProps<FieldDisplay, DisplayValueAlignmentFactors>): JSX.Element => {
     const { value } = valueProps;
     const { value } = valueProps;
     const { getLinks, hasLinks } = value;
     const { getLinks, hasLinks } = value;