mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Docs: stat visualization refactor (#96729)
This commit is contained in:
Isabel Matwawana
GitHub
parent
39e4024f9d
commit
64dbffc372
@ -23,6 +23,11 @@ refs:
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/calculation-types/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types/
|
||||
create-dashboard:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/
|
||||
---
|
||||
|
||||
# Stat
|
||||
@ -35,7 +40,7 @@ A stat visualization displays your data in single values of interest—such
|
||||
|
||||
For example, if you're monitoring the utilization of various services, you can use a stat visualization to show their latest usage:
|
||||
|
||||
{{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" alt="A stat panel showing latest usage of various services" >}}
|
||||
|
||||
|
||||
Use a stat visualization when you need to:
|
||||
|
||||
@ -47,7 +52,7 @@ Use a stat visualization when you need to:
|
||||
|
||||
## Configure a stat visualization
|
||||
|
||||
Once you've [created a dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), the following video shows you how to configure a stat visualization:
|
||||
Once you've [created a dashboard](ref:create-dashboard), the following video shows you how to configure a stat visualization:
|
||||
|
||||
{{< youtube id="yNRnLyVntUw" start="1048" >}}
|
||||
|
||||
@ -73,9 +78,9 @@ The following tables are examples of the type of data you need for a stat visual
|
||||
| 59 |
|
||||
| 40 |
|
||||
|
||||
The data is visualized as follows, with the last value displayed, along with a sparkline and [percentage change](#show-percent-change):
|
||||
The data is visualized as follows, with the last value displayed, along with a sparkline and [percentage change](#value-options):
|
||||
|
||||
{{< figure src="/static/img/docs/stat-panel/stat_panel_single.png" max-width="1025px" alt="A stat panel showing the latest number of high priority bugs" >}}
|
||||
|
||||
|
||||
#### Time-series data
|
||||
|
||||
@ -89,7 +94,7 @@ The data is visualized as follows, with the last value displayed, along with a s
|
||||
|
||||
The data is visualized as follows, with the mean value displayed for each room, along with the room name, sparkline, and unit of measurement:
|
||||
|
||||
{{< figure src="/static/img/docs/stat-panel/stat_panel_multiple.png" max-width="1025px" alt="A stat panel showing some statistics for each room in square meters" >}}
|
||||
|
||||
|
||||
By default, a stat displays one of the following:
|
||||
|
||||
@ -98,131 +103,87 @@ By default, a stat displays one of the following:
|
||||
|
||||
You can use the [**Text mode**](#text-mode) to control how the text is displayed.
|
||||
|
||||
## Automatic layout adjustment
|
||||
## Configuration options
|
||||
|
||||
The panel automatically adjusts the layout depending on available width and height in the dashboard. It automatically hides the graph (sparkline) if the panel becomes too small.
|
||||
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Panel options
|
||||
### Panel options
|
||||
|
||||
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Value options
|
||||
### Value options
|
||||
|
||||
Use the following options to refine how your visualization displays its values:
|
||||
|
||||
### Show
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Show | Display a single value per column or series, or show values for each row. Choose from: <ul><li>**Calculate** - Display a calculated value based on all rows.</li><li>**All values** - Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display.</li> |
|
||||
| Calculation | This option is displayed when you select **Calculate** as your **Show** option. Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](ref:calculation-types). |
|
||||
| Limit | This option is displayed when you select **All values** as your **Show** option. Set the maximum number of rows to display. Default is 5,000. |
|
||||
| Fields | Select the fields displayed in the visualization. |
|
||||
|
||||
Display a single value per column or series, or show values for each row.
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Calculate
|
||||
### Stat styles
|
||||
|
||||
Display a calculated value based on all rows.
|
||||
The stat visualization automatically adjusts the layout depending on available width and height in the dashboard, but you can also use the following options to further style the visualization.
|
||||
|
||||
- **Calculation -** Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](ref:calculation-types).
|
||||
- **Fields -** Select the fields display in the visualization.
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Orientation | Select a stacking direction. Choose from: <ul><li>**Auto** - Grafana selects the ideal orientation.</li><li>**Horizontal** - Bars stretch horizontally, left to right.</li><li>**Vertical** - Bars stretch vertically, top to bottom.</li></ul> |
|
||||
| [Text mode](#text-mode) | You can use the **Text mode** option to control what text the visualization renders. If the value is not important, only the 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. |
|
||||
| [Wide layout](#wide-layout) | Set whether wide layout is enabled or not. Wide layout is enabled by default. This option is only applicable when **Text mode** is set to **Value and name**. |
|
||||
| Color mode | Select a color mode. Choose from: <ul><li>**None** - No color applied to the value.</li><li>**Value** - Applies color to the value and graph area.</li><li>**Background Gradient** - Applies color to the value, graph area, and background, with a slight background gradient.</li><li>**Background Solid** - Applies color to the value, graph area, and background, with a solid background color.</li></ul> |
|
||||
| Graph mode | Select a graph sparkline mode. Choose from: <ul><li>**None** - Hides the graph sparkline and only shows the value.</li><li>**Area** - Shows the graph sparkline below the value. This requires that your query returns a time column.</li></ul> The graph sparkline is automatically hidden if the panel becomes too small.|
|
||||
| Text alignment | Select an alignment mode. Choose from: <ul><li>**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.</li><li>**Center** - Stat value is centered.</li></ul> |
|
||||
| Show percent change | Set whether percent change is displayed or not. Disabled by default. This option is applicable when the **Show** setting, under **Value options**, is set to **Calculate**. |
|
||||
| Percent change color mode | This option is only displayed when **Show percent change** is enabled. Choose from: <ul><li>**Standard** - Green if the percent change is positive, red if the percent change is negative.</li><li>**Inverted** - Red if the percent change is positive, green if the percent change is negative.</li><li>**Same as Value** - Use the same color as the value.</li></ul> |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### All values
|
||||
|
||||
Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display.
|
||||
|
||||
- **Limit -** The maximum number of rows to display. Default is 5,000.
|
||||
- **Fields -** Select the fields display in the visualization.
|
||||
|
||||
## Stat styles
|
||||
|
||||
Style your visualization.
|
||||
|
||||
### Orientation
|
||||
|
||||
Choose a stacking direction.
|
||||
|
||||
- **Auto -** Grafana selects what it thinks is the best orientation.
|
||||
- **Horizontal -** Bars stretch horizontally, left to right.
|
||||
- **Vertical -** Bars stretch vertically, top to bottom.
|
||||
|
||||
### Text mode
|
||||
#### Text mode
|
||||
|
||||
You can use the Text mode option to control what text the visualization renders. If the value is not important, only the 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.
|
||||
|
||||
- **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.
|
||||
- **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.
|
||||
|
||||
### Wide layout
|
||||
#### Wide layout
|
||||
|
||||
Set whether wide layout is enabled or not. Wide layout is enabled by default.
|
||||
|
||||
- **On -** Wide layout is enabled.
|
||||
- **Off -** Wide layout is disabled.
|
||||
- **On** - Wide layout is enabled.
|
||||
- **Off** - Wide layout is disabled.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
This option is only applicable when **Text mode** is set to **Value and name**. When wide layout is enabled, the value and name are displayed side-by-side with the value on the right, if the panel is wide enough. When wide layout is disabled, the value is always rendered underneath the name.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Color mode
|
||||
|
||||
Select a color mode.
|
||||
|
||||
- **None -** No color applied to the value.
|
||||
- **Value -** Applies color to the value and graph area.
|
||||
- **Background Gradient -** Applies color to the value, graph area, and background, with a slight background gradient.
|
||||
- **Background Solid -** Applies color to the value, graph area, and background, with a solid background color.
|
||||
|
||||
### Graph mode
|
||||
|
||||
Select a graph and sparkline mode.
|
||||
|
||||
- **None -** Hides the graph and only shows the value.
|
||||
- **Area -** Shows the area graph below the value. This requires that your query returns a time column.
|
||||
|
||||
### Text alignment
|
||||
|
||||
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.
|
||||
|
||||
### Show percent change
|
||||
|
||||
Set whether percent change is displayed or not. Disabled by default.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
This option is not applicable when the **Show** setting, under **Value options**, is set to **All values**.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Percent change color mode
|
||||
|
||||
This option is only displayed when **Show percent change** is enabled. Choose from:
|
||||
|
||||
- **Standard -** Green if the percent change is positive, red if the percent change is negative.
|
||||
- **Inverted -** Red if the percent change is positive, green if the percent change is negative.
|
||||
- **Same as Value -** Use the same color as the value.
|
||||
|
||||
## Text size
|
||||
### Text size
|
||||
|
||||
Adjust the sizes of the gauge text.
|
||||
|
||||
- **Title -** Enter a numeric value for the gauge title size.
|
||||
- **Value -** Enter a numeric value for the gauge value size.
|
||||
- **Title** - Enter a numeric value for the gauge title size.
|
||||
- **Value** - Enter a numeric value for the gauge value size.
|
||||
|
||||
## Standard options
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Data links
|
||||
### Data links
|
||||
|
||||
{{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Value mappings
|
||||
### Value mappings
|
||||
|
||||
{{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Thresholds
|
||||
### Thresholds
|
||||
|
||||
{{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
## Field overrides
|
||||
### Field overrides
|
||||
|
||||
{{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user