StatPanel: Fixes issue with name showing for single series / field results (#26070)

* StatPanel: Fix text mode auto logic

* Removed import

packages/grafana-ui/src/components/BigValue/BigValue.tsx

@@ -55,6 +55,12 @@ export interface Props extends Themeable {
   justifyMode?: BigValueJustifyMode;
   justifyMode?: BigValueJustifyMode;
   alignmentFactors?: DisplayValueAlignmentFactors;
   alignmentFactors?: DisplayValueAlignmentFactors;
   textMode?: BigValueTextMode;
   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> {
 export class BigValue extends PureComponent<Props> {

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -463,12 +463,18 @@ export interface BigValueTextValues extends DisplayValue {
 }
 }
 
 
 function getTextValues(props: Props): BigValueTextValues {
 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 titleToAlignTo = alignmentFactors ? alignmentFactors.title : value.title;
   const valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : value);
   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:
     case BigValueTextMode.Name:
       return {
       return {
         ...value,
         ...value,
@@ -498,6 +504,7 @@ function getTextValues(props: Props): BigValueTextValues {
         valueToAlignTo: '1',
         valueToAlignTo: '1',
         tooltip: `Name: ${value.title}\nValue: ${formattedValueToString(value)}`,
         tooltip: `Name: ${value.title}\nValue: ${formattedValueToString(value)}`,
       };
       };
+    case BigValueTextMode.ValueAndName:
     default:
     default:
       return {
       return {
         ...value,
         ...value,

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

@@ -26,7 +26,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
     menuProps: DataLinksContextMenuApi
     menuProps: DataLinksContextMenuApi
   ): JSX.Element => {
   ): JSX.Element => {
     const { timeRange, options } = this.props;
     const { timeRange, options } = this.props;
-    const { value, alignmentFactors, width, height } = valueProps;
+    const { value, alignmentFactors, width, height, count } = valueProps;
     const { openMenu, targetClassName } = menuProps;
     const { openMenu, targetClassName } = menuProps;
     let sparkline: BigValueSparkline | undefined;
     let sparkline: BigValueSparkline | undefined;
 
 
@@ -48,6 +48,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
     return (
     return (
       <BigValue
       <BigValue
         value={value.display}
         value={value.display}
+        count={count}
         sparkline={sparkline}
         sparkline={sparkline}
         colorMode={options.colorMode}
         colorMode={options.colorMode}
         graphMode={options.graphMode}
         graphMode={options.graphMode}