StatPanel: Option showing name instead of value and more (#25676)

* StatPanel: Option showing name instead of value and more

* rename option to textMode

* Move the logic of only showing name if more than one value to gauge and bar gauge panels

* Got tooltip working

* Updated devenv test dashboard

* Added docs for text mode

* Added migration logic

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* docs fix

* Fixed ts issue

* review changes

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

devenv/dev-dashboards/panel-stat/panel-stat-tests.json

@@ -19,22 +19,12 @@
   "panels": [
     {
       "datasource": null,
-      "gridPos": {
-        "h": 3,
-        "w": 24,
-        "x": 0,
-        "y": 0
-      },
-      "id": 6,
-      "interval": "6m",
-      "options": {
-        "colorMode": "background",
-        "fieldOptions": {
-          "calcs": ["mean"],
+      "fieldConfig": {
         "defaults": {
           "color": {
             "mode": "thresholds"
           },
+          "custom": {},
           "mappings": [],
           "thresholds": {
             "mode": "absolute",
@@ -63,17 +53,32 @@
           },
           "unit": "areaM2"
         },
-          "overrides": [],
-          "values": false
+        "overrides": []
       },
+      "gridPos": {
+        "h": 3,
+        "w": 24,
+        "x": 0,
+        "y": 0
+      },
+      "id": 6,
+      "interval": "6m",
+      "options": {
+        "colorMode": "background",
         "graphMode": "area",
         "justifyMode": "auto",
         "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
         "sparkline": {
           "show": true
-        }
         },
-      "pluginVersion": "6.6.0-pre",
+        "textMode": "auto"
+      },
+      "pluginVersion": "7.1.0-pre",
       "targets": [
         {
           "alias": "__house_locations",
@@ -93,6 +98,42 @@
     },
     {
       "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {},
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "blue",
+                "value": null
+              },
+              {
+                "color": "green",
+                "value": 10
+              },
+              {
+                "color": "purple",
+                "value": 20
+              },
+              {
+                "color": "orange",
+                "value": 40
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          },
+          "unit": "areaM2"
+        },
+        "overrides": []
+      },
       "gridPos": {
         "h": 6,
         "w": 24,
@@ -103,12 +144,44 @@
       "interval": "7m",
       "options": {
         "colorMode": "background",
-        "fieldOptions": {
+        "graphMode": "area",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
           "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
+        "sparkline": {
+          "show": true
+        },
+        "textMode": "auto"
+      },
+      "pluginVersion": "7.1.0-pre",
+      "targets": [
+        {
+          "alias": "__house_locations",
+          "min": 0,
+          "noise": 10,
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "seriesCount": 6,
+          "spread": 10
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Panel Title",
+      "type": "stat"
+    },
+    {
+      "datasource": null,
+      "fieldConfig": {
         "defaults": {
           "color": {
             "mode": "thresholds"
           },
+          "custom": {},
           "mappings": [],
           "thresholds": {
             "mode": "absolute",
@@ -137,35 +210,8 @@
           },
           "unit": "areaM2"
         },
-          "overrides": [],
-          "values": false
+        "overrides": []
       },
-        "graphMode": "area",
-        "justifyMode": "auto",
-        "orientation": "auto",
-        "sparkline": {
-          "show": true
-        }
-      },
-      "pluginVersion": "6.6.0-pre",
-      "targets": [
-        {
-          "alias": "__house_locations",
-          "min": 0,
-          "noise": 10,
-          "refId": "A",
-          "scenarioId": "random_walk",
-          "seriesCount": 6,
-          "spread": 10
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Panel Title",
-      "type": "stat"
-    },
-    {
-      "datasource": null,
       "gridPos": {
         "h": 6,
         "w": 24,
@@ -176,51 +222,20 @@
       "interval": "7m",
       "options": {
         "colorMode": "value",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "color": {
-              "mode": "thresholds"
-            },
-            "mappings": [],
-            "thresholds": {
-              "mode": "absolute",
-              "steps": [
-                {
-                  "color": "blue",
-                  "value": null
-                },
-                {
-                  "color": "green",
-                  "value": 10
-                },
-                {
-                  "color": "purple",
-                  "value": 20
-                },
-                {
-                  "color": "orange",
-                  "value": 40
-                },
-                {
-                  "color": "red",
-                  "value": 80
-                }
-              ]
-            },
-            "unit": "areaM2"
-          },
-          "overrides": [],
-          "values": false
-        },
         "graphMode": "area",
         "justifyMode": "auto",
         "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
         "sparkline": {
           "show": true
-        }
         },
-      "pluginVersion": "6.6.0-pre",
+        "textMode": "auto"
+      },
+      "pluginVersion": "7.1.0-pre",
       "targets": [
         {
           "alias": "__house_locations",
@@ -239,22 +254,12 @@
     },
     {
       "datasource": null,
-      "gridPos": {
-        "h": 14,
-        "w": 6,
-        "x": 0,
-        "y": 15
-      },
-      "id": 13,
-      "interval": "5m",
-      "options": {
-        "colorMode": "background",
-        "fieldOptions": {
-          "calcs": ["mean"],
+      "fieldConfig": {
         "defaults": {
           "color": {
             "mode": "thresholds"
           },
+          "custom": {},
           "mappings": [],
           "thresholds": {
             "mode": "absolute",
@@ -283,17 +288,32 @@
           },
           "unit": "areaM2"
         },
-          "overrides": [],
-          "values": false
+        "overrides": []
       },
+      "gridPos": {
+        "h": 18,
+        "w": 6,
+        "x": 0,
+        "y": 15
+      },
+      "id": 13,
+      "interval": "5m",
+      "options": {
+        "colorMode": "background",
         "graphMode": "area",
         "justifyMode": "auto",
         "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
         "sparkline": {
           "show": true
-        }
         },
-      "pluginVersion": "6.6.0-pre",
+        "textMode": "auto"
+      },
+      "pluginVersion": "7.1.0-pre",
       "targets": [
         {
           "alias": "__server_names",
@@ -306,13 +326,49 @@
       ],
       "timeFrom": null,
       "timeShift": null,
-      "title": "Panel Title",
+      "title": "Horizontal with graph",
       "type": "stat"
     },
     {
       "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {},
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "blue",
+                "value": null
+              },
+              {
+                "color": "green",
+                "value": 10
+              },
+              {
+                "color": "purple",
+                "value": 20
+              },
+              {
+                "color": "orange",
+                "value": 40
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          },
+          "unit": "areaM2"
+        },
+        "overrides": []
+      },
       "gridPos": {
-        "h": 11,
+        "h": 9,
         "w": 4,
         "x": 6,
         "y": 15
@@ -321,51 +377,20 @@
       "interval": "10m",
       "options": {
         "colorMode": "background",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "color": {
-              "mode": "thresholds"
-            },
-            "mappings": [],
-            "thresholds": {
-              "mode": "absolute",
-              "steps": [
-                {
-                  "color": "blue",
-                  "value": null
-                },
-                {
-                  "color": "green",
-                  "value": 10
-                },
-                {
-                  "color": "purple",
-                  "value": 20
-                },
-                {
-                  "color": "orange",
-                  "value": 40
-                },
-                {
-                  "color": "red",
-                  "value": 80
-                }
-              ]
-            },
-            "unit": "areaM2"
-          },
-          "overrides": [],
-          "values": false
-        },
         "graphMode": "line",
         "justifyMode": "auto",
         "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
         "sparkline": {
           "show": true
-        }
         },
-      "pluginVersion": "6.6.0-pre",
+        "textMode": "auto"
+      },
+      "pluginVersion": "7.1.0-pre",
       "targets": [
         {
           "refId": "A",
@@ -398,14 +423,50 @@
       ],
       "timeFrom": null,
       "timeShift": null,
-      "title": "Panel Title",
+      "title": "Auto grid",
       "type": "stat"
     },
     {
       "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {},
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "blue",
+                "value": null
+              },
+              {
+                "color": "green",
+                "value": 10
+              },
+              {
+                "color": "purple",
+                "value": 20
+              },
+              {
+                "color": "orange",
+                "value": 40
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          },
+          "unit": "areaM2"
+        },
+        "overrides": []
+      },
       "gridPos": {
         "h": 9,
-        "w": 8,
+        "w": 6,
         "x": 10,
         "y": 15
       },
@@ -413,51 +474,20 @@
       "interval": "10m",
       "options": {
         "colorMode": "background",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "color": {
-              "mode": "thresholds"
-            },
-            "mappings": [],
-            "thresholds": {
-              "mode": "absolute",
-              "steps": [
-                {
-                  "color": "blue",
-                  "value": null
-                },
-                {
-                  "color": "green",
-                  "value": 10
-                },
-                {
-                  "color": "purple",
-                  "value": 20
-                },
-                {
-                  "color": "orange",
-                  "value": 40
-                },
-                {
-                  "color": "red",
-                  "value": 80
-                }
-              ]
-            },
-            "unit": "areaM2"
-          },
-          "overrides": [],
-          "values": false
-        },
         "graphMode": "line",
         "justifyMode": "auto",
         "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
         "sparkline": {
           "show": true
-        }
         },
-      "pluginVersion": "6.6.0-pre",
+        "textMode": "auto"
+      },
+      "pluginVersion": "7.1.0-pre",
       "targets": [
         {
           "refId": "A",
@@ -490,11 +520,257 @@
       ],
       "timeFrom": null,
       "timeShift": null,
-      "title": "Panel Title",
+      "title": "Horizontal",
+      "type": "stat"
+    },
+    {
+      "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {},
+          "mappings": [],
+          "max": 200,
+          "min": 0,
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "blue",
+                "value": null
+              },
+              {
+                "color": "green",
+                "value": 10
+              },
+              {
+                "color": "purple",
+                "value": 20
+              },
+              {
+                "color": "orange",
+                "value": 40
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          },
+          "unit": "areaM2"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 8,
+        "x": 16,
+        "y": 15
+      },
+      "id": 15,
+      "interval": "5m",
+      "options": {
+        "colorMode": "background",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
+        "sparkline": {
+          "show": true
+        },
+        "textMode": "name"
+      },
+      "pluginVersion": "7.1.0-pre",
+      "targets": [
+        {
+          "alias": "__server_names",
+          "max": 200,
+          "min": 0,
+          "noise": 5,
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "seriesCount": 7,
+          "spread": 20,
+          "startValue": 0
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Text mode name",
+      "type": "stat"
+    },
+    {
+      "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {},
+          "mappings": [],
+          "max": 200,
+          "min": 0,
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "blue",
+                "value": null
+              },
+              {
+                "color": "green",
+                "value": 10
+              },
+              {
+                "color": "purple",
+                "value": 20
+              },
+              {
+                "color": "orange",
+                "value": 40
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          },
+          "unit": "areaM2"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 18,
+        "x": 6,
+        "y": 24
+      },
+      "id": 16,
+      "interval": "5m",
+      "options": {
+        "colorMode": "background",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
+        "sparkline": {
+          "show": true
+        },
+        "textMode": "value"
+      },
+      "pluginVersion": "7.1.0-pre",
+      "targets": [
+        {
+          "alias": "__server_names",
+          "max": 200,
+          "min": 0,
+          "noise": 15,
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "seriesCount": 45,
+          "spread": 1,
+          "startValue": 0
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Value only",
+      "type": "stat"
+    },
+    {
+      "datasource": null,
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {},
+          "mappings": [],
+          "max": 200,
+          "min": 0,
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "blue",
+                "value": null
+              },
+              {
+                "color": "green",
+                "value": 10
+              },
+              {
+                "color": "purple",
+                "value": 20
+              },
+              {
+                "color": "orange",
+                "value": 40
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          },
+          "unit": "areaM2"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 24,
+        "x": 0,
+        "y": 33
+      },
+      "id": 17,
+      "interval": "5m",
+      "options": {
+        "colorMode": "background",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": ["mean"],
+          "fields": "",
+          "values": false
+        },
+        "sparkline": {
+          "show": true
+        },
+        "textMode": "none"
+      },
+      "pluginVersion": "7.1.0-pre",
+      "targets": [
+        {
+          "alias": "__server_names",
+          "max": 200,
+          "min": 0,
+          "noise": 15,
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "seriesCount": 200,
+          "spread": 1,
+          "startValue": 0
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "No text",
       "type": "stat"
     }
   ],
-  "schemaVersion": 22,
+  "schemaVersion": 26,
   "style": "dark",
   "tags": ["gdev", "panel-tests"],
   "templating": {
@@ -508,5 +784,7 @@
     "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"]
   },
   "timezone": "",
-  "title": "Panel Tests - Stat"
+  "title": "Panel Tests - Stat",
+  "uid": "EJ8_d9jZk",
+  "version": 1
 }

docs/sources/panels/visualizations/stat-panel.md

@@ -48,3 +48,24 @@ Use the following options to refine your visualization:
 - **Alignment mode -** Choose an alignment mode.
   - **Auto -** If only a single value is shown (no repeat), then the value is centered. If multiple series or rows are shown, then the value is left-aligned.
   - **Center -** Stat value is centered.
+- **Text mode** (Only available in Grafana 7.1+.)
+  - **Auto -** If the data contains multiple series or fields, show both name and value..
+  - **Value -** Show only value, never name. Name is displayed in the hover tooltip instead.
+  - **Value and name -** Always show value and name.
+  - **Name -** Show name instead of value. Value is displayed in the hover tooltip.
+  - **None -** Show nothing (empty). Name and value are displayed in the hover tooltip.
+
+## Text mode
+
+> Only available in Grafana 7.1+.
+
+By default, the Stat panel displays:
+
+- Just the value for a single series or field.
+- Both the value and name for multiple series or fields.
+
+You can use the Text mode option to control what text the panel renders. If the value is not important, only name and color is, then change the `Text mode` to **Name**. The value will still be used to determine color and is displayed in a tooltip.
+
+Example screenshot:
+
+{{< docs-imagebox img="/img/docs/v71/stat-panel-text-modes.png" max-width="1025px" caption="Stat panel" >}}

packages/grafana-data/src/field/fieldDisplay.ts

@@ -84,7 +84,7 @@ export interface GetFieldDisplayValuesOptions {
 export const DEFAULT_FIELD_DISPLAY_VALUES_LIMIT = 25;
 
 export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): FieldDisplay[] => {
-  const { replaceVariables, reduceOptions, fieldConfig, timeZone } = options;
+  const { replaceVariables, reduceOptions, timeZone } = options;
   const calcs = reduceOptions.calcs.length ? reduceOptions.calcs : [ReducerID.last];
 
   const values: FieldDisplay[] = [];
@@ -223,9 +223,6 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
 
   if (values.length === 0) {
     values.push(createNoValuesFieldDisplay(options));
-  } else if (values.length === 1 && !fieldConfig.defaults.displayName) {
-    // Don't show title for single item
-    values[0].display.title = undefined;
   }
 
   return values;

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

@@ -1,5 +1,5 @@
 import { text, select, number, color } from '@storybook/addon-knobs';
-import { BigValue, BigValueColorMode, BigValueGraphMode } from './BigValue';
+import { BigValue, BigValueColorMode, BigValueGraphMode, BigValueTextMode } from './BigValue';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 
@@ -8,10 +8,15 @@ const getKnobs = () => {
     value: text('value', '$5022'),
     title: text('title', 'Total Earnings'),
     colorMode: select('Color mode', [BigValueColorMode.Value, BigValueColorMode.Background], BigValueColorMode.Value),
-    graphMode: select('Graph mode', [BigValueGraphMode.Area, BigValueGraphMode.Line], BigValueGraphMode.Area),
+    graphMode: select('Graph mode', [BigValueGraphMode.Area, BigValueGraphMode.None], BigValueGraphMode.Area),
     width: number('Width', 400, { range: true, max: 800, min: 200 }),
     height: number('Height', 300, { range: true, max: 800, min: 200 }),
     color: color('Value color', 'red'),
+    textMode: select(
+      'Text mode',
+      [BigValueTextMode.Auto, BigValueTextMode.Name, BigValueTextMode.ValueAndName, BigValueTextMode.None],
+      BigValueTextMode.Auto
+    ),
   };
 };
 
@@ -22,13 +27,14 @@ export default {
 };
 
 export const basic = () => {
-  const { value, title, colorMode, graphMode, height, width, color } = getKnobs();
+  const { value, title, colorMode, graphMode, height, width, color, textMode } = getKnobs();
 
   return renderComponentWithTheme(BigValue, {
     width: width,
     height: height,
     colorMode: colorMode,
     graphMode: graphMode,
+    textMode,
     value: {
       text: value,
       numeric: 5022,

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

@@ -32,6 +32,17 @@ export enum BigValueJustifyMode {
   Center = 'center',
 }
 
+/**
+ * Options for how the value & title are to be displayed
+ */
+export enum BigValueTextMode {
+  Auto = 'auto',
+  Value = 'value',
+  ValueAndName = 'value_and_name',
+  Name = 'name',
+  None = 'none',
+}
+
 export interface Props extends Themeable {
   height: number;
   width: number;
@@ -43,6 +54,7 @@ export interface Props extends Themeable {
   graphMode: BigValueGraphMode;
   justifyMode?: BigValueJustifyMode;
   alignmentFactors?: DisplayValueAlignmentFactors;
+  textMode?: BigValueTextMode;
 }
 
 export class BigValue extends PureComponent<Props> {
@@ -51,19 +63,20 @@ export class BigValue extends PureComponent<Props> {
   };
 
   render() {
-    const { value, onClick, className } = this.props;
+    const { onClick, className } = this.props;
 
     const layout = buildLayout(this.props);
     const panelStyles = layout.getPanelStyles();
     const valueAndTitleContainerStyles = layout.getValueAndTitleContainerStyles();
     const valueStyles = layout.getValueStyles();
     const titleStyles = layout.getTitleStyles();
+    const textValues = layout.textValues;
 
     return (
-      <div className={className} style={panelStyles} onClick={onClick}>
+      <div className={className} style={panelStyles} onClick={onClick} title={textValues.tooltip}>
         <div style={valueAndTitleContainerStyles}>
-          {value.title && <div style={titleStyles}>{value.title}</div>}
-          <FormattedValueDisplay value={value} style={valueStyles} />
+          {textValues.title && <div style={titleStyles}>{textValues.title}</div>}
+          <FormattedValueDisplay value={textValues} style={valueStyles} />
         </div>
         {layout.renderChart()}
       </div>

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

@@ -4,11 +4,11 @@ import tinycolor from 'tinycolor2';
 import { Chart, Geom } from 'bizcharts';
 
 // Utils
-import { getColorFromHexRgbOrName, formattedValueToString } from '@grafana/data';
+import { getColorFromHexRgbOrName, formattedValueToString, DisplayValue } from '@grafana/data';
 import { calculateFontSize } from '../../utils/measureText';
 
 // Types
-import { BigValueColorMode, Props, BigValueJustifyMode } from './BigValue';
+import { BigValueColorMode, Props, BigValueJustifyMode, BigValueTextMode } from './BigValue';
 
 const LINE_HEIGHT = 1.2;
 const MAX_TITLE_SIZE = 30;
@@ -25,16 +25,17 @@ export abstract class BigValueLayout {
   valueToAlignTo: string;
   maxTextWidth: number;
   maxTextHeight: number;
+  textValues: BigValueTextValues;
 
   constructor(private props: Props) {
-    const { width, height, value, alignmentFactors, theme } = props;
+    const { width, height, value, theme } = props;
 
     this.valueColor = getColorFromHexRgbOrName(value.color || 'green', theme.type);
-    this.justifyCenter = shouldJustifyCenter(props);
     this.panelPadding = height > 100 ? 12 : 8;
-    this.titleToAlignTo = alignmentFactors ? alignmentFactors.title : value.title;
-    this.valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : value);
-
+    this.textValues = getTextValues(props);
+    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.chartHeight = 0;
@@ -447,10 +448,61 @@ export function buildLayout(props: Props): BigValueLayout {
   }
 }
 
-export function shouldJustifyCenter(props: Props) {
-  const { value, justifyMode } = props;
+export function shouldJustifyCenter(justifyMode?: BigValueJustifyMode, title?: string) {
   if (justifyMode === BigValueJustifyMode.Center) {
     return true;
   }
-  return (value.title ?? '').length === 0;
+
+  return (title ?? '').length === 0;
+}
+
+export interface BigValueTextValues extends DisplayValue {
+  valueToAlignTo: string;
+  titleToAlignTo?: string;
+  tooltip?: string;
+}
+
+function getTextValues(props: Props): BigValueTextValues {
+  const { textMode: nameAndValue, value, alignmentFactors } = props;
+
+  const titleToAlignTo = alignmentFactors ? alignmentFactors.title : value.title;
+  const valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : value);
+
+  switch (nameAndValue) {
+    case BigValueTextMode.Name:
+      return {
+        ...value,
+        title: undefined,
+        prefix: undefined,
+        suffix: undefined,
+        text: value.title || '',
+        titleToAlignTo: undefined,
+        valueToAlignTo: titleToAlignTo ?? '',
+        tooltip: formattedValueToString(value),
+      };
+    case BigValueTextMode.Value:
+      return {
+        ...value,
+        title: undefined,
+        titleToAlignTo: undefined,
+        valueToAlignTo,
+        tooltip: value.title,
+      };
+    case BigValueTextMode.None:
+      return {
+        numeric: value.numeric,
+        color: value.color,
+        title: undefined,
+        text: '',
+        titleToAlignTo: undefined,
+        valueToAlignTo: '1',
+        tooltip: `Name: ${value.title}\nValue: ${formattedValueToString(value)}`,
+      };
+    default:
+      return {
+        ...value,
+        titleToAlignTo,
+        valueToAlignTo,
+      };
+  }
 }

packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap

@@ -40,6 +40,8 @@ exports[`BigValue Render with basic options should render 1`] = `
         Object {
           "numeric": 25,
           "text": "25",
+          "titleToAlignTo": undefined,
+          "valueToAlignTo": "25",
         }
       }
     />

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

@@ -32,6 +32,10 @@ export interface VizRepeaterRenderValueProps<V, D = {}> {
   height: number;
   orientation: VizOrientation;
   alignmentFactors: D;
+  /**
+   * Total number of values being shown in repeater
+   */
+  count: number;
 }
 
 interface DefaultProps {
@@ -110,7 +114,14 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
 
       items.push(
         <div key={i} style={itemStyles}>
-          {renderValue({ value, width: itemWidth, height: itemHeight, alignmentFactors, orientation })}
+          {renderValue({
+            value,
+            width: itemWidth,
+            height: itemHeight,
+            alignmentFactors,
+            orientation,
+            count: values.length,
+          })}
         </div>
       );
 
@@ -178,6 +189,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
                 height: vizHeight,
                 alignmentFactors,
                 orientation: resolvedOrientation,
+                count: values.length,
               })}
             </div>
           );

packages/grafana-ui/src/components/index.ts

@@ -65,6 +65,7 @@ export {
   BigValueSparkline,
   BigValueGraphMode,
   BigValueJustifyMode,
+  BigValueTextMode,
 } from './BigValue/BigValue';
 
 export { Gauge } from './Gauge/Gauge';

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

@@ -5,6 +5,8 @@ import {
   getDisplayValueAlignmentFactors,
   getFieldDisplayValues,
   PanelProps,
+  FieldConfig,
+  DisplayValue,
 } from '@grafana/data';
 import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
 
@@ -18,13 +20,13 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
     menuProps: DataLinksContextMenuApi
   ): JSX.Element => {
     const { options } = this.props;
-    const { value, alignmentFactors, orientation, width, height } = valueProps;
+    const { value, alignmentFactors, orientation, width, height, count } = valueProps;
     const { field, display, view, colIndex } = value;
     const { openMenu, targetClassName } = menuProps;
 
     return (
       <BarGauge
-        value={display}
+        value={clearNameForSingleSeries(count, field, display)}
         width={width}
         height={height}
         orientation={orientation}
@@ -97,3 +99,14 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
     );
   }
 }
+
+export function clearNameForSingleSeries(count: number, field: FieldConfig<any>, display: DisplayValue): DisplayValue {
+  if (count === 1 && !field.displayName) {
+    return {
+      ...display,
+      title: undefined,
+    };
+  }
+
+  return display;
+}

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -5,6 +5,7 @@ import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/Da
 
 import { config } from 'app/core/config';
 import { GaugeOptions } from './types';
+import { clearNameForSingleSeries } from '../bargauge/BarGaugePanel';
 
 export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
   renderComponent = (
@@ -12,13 +13,13 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
     menuProps: DataLinksContextMenuApi
   ): JSX.Element => {
     const { options } = this.props;
-    const { value, width, height } = valueProps;
+    const { width, height, count, value } = valueProps;
     const { field, display } = value;
     const { openMenu, targetClassName } = menuProps;
 
     return (
       <Gauge
-        value={display}
+        value={clearNameForSingleSeries(count, field, display)}
         width={width}
         height={height}
         field={field}

public/app/plugins/panel/stat/StatMigrations.test.ts

@@ -1,6 +1,7 @@
 import { PanelModel } from '@grafana/data';
 import { statPanelChangedHandler } from './StatMigrations';
 import { BigValueGraphMode, BigValueColorMode } from '@grafana/ui';
+import { BigValueTextMode } from '@grafana/ui/src/components/BigValue/BigValue';
 
 describe('Stat Panel Migrations', () => {
   it('change from angular singlestat sparkline disabled', () => {
@@ -48,4 +49,16 @@ describe('Stat Panel Migrations', () => {
     const options = statPanelChangedHandler(panel, 'singlestat', old);
     expect(options.colorMode).toBe(BigValueColorMode.Background);
   });
+
+  it('change from angular singlestat with name stat', () => {
+    const old: any = {
+      angular: {
+        valueName: 'name',
+      },
+    };
+
+    const panel = {} as PanelModel;
+    const options = statPanelChangedHandler(panel, 'singlestat', old);
+    expect(options.textMode).toBe(BigValueTextMode.Name);
+  });
 });

public/app/plugins/panel/stat/StatMigrations.ts

@@ -1,6 +1,7 @@
 import { sharedSingleStatPanelChangedHandler, BigValueGraphMode, BigValueColorMode } from '@grafana/ui';
 import { PanelModel } from '@grafana/data';
 import { StatPanelOptions } from './types';
+import { BigValueTextMode } from '@grafana/ui/src/components/BigValue/BigValue';
 
 // This is called when the panel changes from another panel
 export const statPanelChangedHandler = (
@@ -23,6 +24,10 @@ export const statPanelChangedHandler = (
     } else {
       options.colorMode = BigValueColorMode.Value;
     }
+
+    if (oldOptions.valueName === 'name') {
+      options.textMode = BigValueTextMode.Name;
+    }
   }
 
   return options;

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

@@ -52,6 +52,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
         colorMode={options.colorMode}
         graphMode={options.graphMode}
         justifyMode={options.justifyMode}
+        textMode={options.textMode}
         alignmentFactors={alignmentFactors}
         width={width}
         height={height}

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

@@ -1,4 +1,4 @@
-import { sharedSingleStatMigrationHandler } from '@grafana/ui';
+import { sharedSingleStatMigrationHandler, BigValueTextMode } from '@grafana/ui';
 import { PanelPlugin } from '@grafana/data';
 import { StatPanelOptions, addStandardDataReduceOptions } from './types';
 import { StatPanel } from './StatPanel';
@@ -9,6 +9,22 @@ export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
   .setPanelOptions(builder => {
     addStandardDataReduceOptions(builder);
 
+    builder.addSelect({
+      path: 'textMode',
+      name: 'Text mode',
+      description: 'Control if name and value is displayed or just name',
+      settings: {
+        options: [
+          { value: BigValueTextMode.Auto, label: 'Auto' },
+          { value: BigValueTextMode.Value, label: 'Value' },
+          { value: BigValueTextMode.ValueAndName, label: 'Value and name' },
+          { value: BigValueTextMode.Name, label: 'Name' },
+          { value: BigValueTextMode.None, label: 'None' },
+        ],
+      },
+      defaultValue: 'auto',
+    });
+
     builder
       .addRadio({
         path: 'colorMode',

public/app/plugins/panel/stat/types.ts

@@ -1,7 +1,12 @@
-import { SingleStatBaseOptions, BigValueColorMode, BigValueGraphMode, BigValueJustifyMode } from '@grafana/ui';
+import {
+  SingleStatBaseOptions,
+  BigValueColorMode,
+  BigValueGraphMode,
+  BigValueJustifyMode,
+  BigValueTextMode,
+} from '@grafana/ui';
 import {
   ReducerID,
-  SelectableValue,
   standardEditorsRegistry,
   FieldOverrideContext,
   getFieldDisplayName,
@@ -14,23 +19,9 @@ export interface StatPanelOptions extends SingleStatBaseOptions {
   graphMode: BigValueGraphMode;
   colorMode: BigValueColorMode;
   justifyMode: BigValueJustifyMode;
+  textMode: BigValueTextMode;
 }
 
-export const colorModes: Array<SelectableValue<BigValueColorMode>> = [
-  { value: BigValueColorMode.Value, label: 'Value' },
-  { value: BigValueColorMode.Background, label: 'Background' },
-];
-
-export const graphModes: Array<SelectableValue<BigValueGraphMode>> = [
-  { value: BigValueGraphMode.None, label: 'None' },
-  { value: BigValueGraphMode.Area, label: 'Area graph' },
-];
-
-export const justifyModes: Array<SelectableValue<BigValueJustifyMode>> = [
-  { value: BigValueJustifyMode.Auto, label: 'Auto' },
-  { value: BigValueJustifyMode.Center, label: 'Center' },
-];
-
 export function addStandardDataReduceOptions(
   builder: PanelOptionsEditorBuilder<SingleStatBaseOptions>,
   includeOrientation = true,
@@ -65,7 +56,7 @@ export function addStandardDataReduceOptions(
   builder.addCustomEditor({
     id: 'reduceOptions.calcs',
     path: 'reduceOptions.calcs',
-    name: 'Value',
+    name: 'Calculation',
     description: 'Choose a reducer function / calculation',
     editor: standardEditorsRegistry.get('stats-picker').editor as any,
     defaultValue: [ReducerID.mean],