IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Docs/panel refactor (#43569)

Browse Source 
* new refactored panel docs

* fixed links

* removed xtra sharing link, added links to panel display option tasks

* fixed typo

* add aliases

* incorporate PM feedback

* intermediate commit to resolve merge conflict

* final changes to resolve merge conflicts
This commit is contained in:
Christopher Moyer
2022-01-18 15:06:27 -06:00
committed by GitHub
parent 959723050f
commit 449c608ef1
118 changed files with 2043 additions and 1668 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/sources/visualizations/_index.md
View File

@@ -8,7 +8,7 @@ aliases = ["/docs/grafana/latest/panels/visualizations/"]
Grafana offers a variety of visualizations to support different use cases. This section of the documentation highlights the built-in panels, their options and typical usage.
> **Note:** If you are unsure which visualization to pick, Grafana can provide visualization suggestions based on the panel query. When you select a visualization, Grafana will show a preview with that visualization applied. For more information, see the [add a panel]({{< relref "../panels/add-a-panel.md" >}}) documentation.
> **Note:** If you are unsure which visualization to pick, Grafana can provide visualization suggestions based on the panel query. When you select a visualization, Grafana will show a preview with that visualization applied. For more information, see the [add a panel]({{< relref "../panels/working-with-panels/add-panel.md" >}}) documentation.
- Graphs & charts
- [Time series]({{< relref "./time-series/_index.md" >}}) is the default and main Graph visualization.

6
docs/sources/visualizations/bar-chart.md
View File

@@ -76,7 +76,7 @@ Controls the fill opacity bars.
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../panels/standard-options.md#color-scheme" >}}) field option.
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option.
Gradient appearance is influenced by the **Fill opacity** setting.
@@ -98,7 +98,7 @@ Gradient color is generated based on the hue of the line color.
### Legend calculations
Choose which of the [standard calculations]({{< relref "../panels/calculations-list.md">}}) to show in the legend. You can have more than one.
Choose which of the [standard calculations]({{< relref "../panels/reference-calculation-types.md">}}) to show in the legend. You can have more than one.
## Text size
@@ -148,4 +148,4 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
**Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point.
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field options]({{< relref "../panels/standard-options.md#max" >}}).
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field options]({{< relref "../panels/reference-standard-field-definitions.md#max" >}}).

2
docs/sources/visualizations/bar-gauge-panel.md
View File

@@ -26,7 +26,7 @@ Choose how Grafana displays your data.
Show a calculated value based on all rows.
- **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 [List of calculations]({{< relref "../panels/calculations-list.md" >}}).
- **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 [List of calculations]({{< relref "../panels/reference-calculation-types.md" >}}).
- **Fields -** Select the fields display in the panel.
#### All values

2
docs/sources/visualizations/gauge-panel.md
View File

@@ -24,7 +24,7 @@ Choose how Grafana displays your data.
Show a calculated value based on all rows.
- **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 [List of calculations]({{< relref "../panels/calculations-list.md" >}}).
- **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 [List of calculations]({{< relref "../panels/reference-calculation-types.md" >}}).
- **Fields -** Select the fields display in the panel.
#### All values

6
docs/sources/visualizations/graph-panel.md
View File

@@ -16,9 +16,9 @@ The graph panel can render metrics as a line, a path of dots, or a series of bar
Graph visualizations allow you to apply:
- [Alerts]({{< relref "../alerting/_index.md" >}}) - This is the only type of visualization that allows you to set alerts.
- [Data transformations]({{< relref "../panels/transformations/_index.md" >}})
- [Field overrides]({{< relref "../panels/field-overrides.md" >}})
- [Thresholds]({{< relref "../panels/thresholds.md" >}})
- [Transform data]({{< relref "../panels/transform-data/apply-transformation-to-data.md" >}})
- [Add a field override]({{< relref "../panels/override-field-values/add-a-field-override.md" >}})
- [Add a threshold]({{< relref "../panels/specify-thresholds/add-a-threshold.md" >}})
## Display options

4
docs/sources/visualizations/histogram.md
View File

@@ -42,7 +42,7 @@ Controls the fill opacity bars.
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../panels/standard-options.md#color-scheme" >}}) field option.
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../panels/working-with-panels/apply-color-to-series.md" >}}) field option.
Gradient display is influenced by the **Fill opacity** setting.
@@ -64,4 +64,4 @@ Gradient color is generated based on the hue of the line color.
### Legend calculations
Choose a [standard calculations]({{< relref "../panels/calculations-list.md">}}) to show in the legend. You can select more than one.
Choose a [standard calculations]({{< relref "../panels/reference-calculation-types.md">}}) to show in the legend. You can select more than one.

2
docs/sources/visualizations/pie-chart-panel.md
View File

@@ -24,7 +24,7 @@ Choose how much information to show.
### Calculation
Select a calculation to reduce each series when Calculate has been selected. For information about available calculations, refer to the [Calculation list]({{< relref "../panels/calculations-list.md" >}}).
Select a calculation to reduce each series when Calculate has been selected. For information about available calculations, refer to the [Calculation list]({{< relref "../panels/reference-calculation-types.md" >}}).
### Limit

2
docs/sources/visualizations/stat-panel.md
View File

@@ -41,7 +41,7 @@ Choose how Grafana displays your data.
Show a calculated value based on all rows.
- **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 [List of calculations]({{< relref "../panels/calculations-list.md" >}}).
- **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 [List of calculations]({{< relref "../panels/reference-calculation-types.md" >}}).
- **Fields -** Select the fields display in the panel.
#### All values

4
docs/sources/visualizations/state-timeline.md
View File

@@ -42,7 +42,7 @@ Controls the opacity of state regions.
## Value mappings
To assign colors to boolean or string values, use [Value mappings]({{< relref "../panels/value-mappings.md" >}}).
To assign colors to boolean or string values, use [Value mappings]({{< relref "../panels/format-data/about-value-mapping.md" >}}).
{{< figure src="/static/img/docs/v8/value_mappings_side_editor.png" max-width="300px" caption="Value mappings side editor" >}}
@@ -54,6 +54,6 @@ The panel can be used with time series data as well. In this case, the threshold
## Legend options
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` option under [Standard options]({{< relref "../panels/standard-options.md" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Apply color to a series and fields]({{< relref "../panels/working-with-panels/apply-color-to-series.md" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
{{< docs/shared "visualizations/legend-mode.md" >}}

2
docs/sources/visualizations/status-history.md
View File

@@ -51,6 +51,6 @@ use gradient color schemes to color values.
## Legend options
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` option under [Standard options]({{< relref "../panels/standard-options.md" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Apply color to a series and fields]({{< relref "../panels/working-with-panels/apply-color-to-series.md" >}}) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`.
{{< docs/shared "visualizations/legend-mode.md" >}}

2
docs/sources/visualizations/table/filter-table-columns.md
View File

@@ -12,7 +12,7 @@ If you turn on the **Column filter**, then you can filter table options.
## Turn on column filtering
1. In Grafana, navigate to the dashboard with the table with the columns that you want to filter.
1. On the table panel you want to filter, [open the panel editor]({{< relref "../../panels/panel-editor.md#open-the-panel-editor" >}}).
1. On the table panel you want to filter, open the panel editor.
1. Click the **Field** tab.
1. In Table options, turn on the **Column filter** option.

4
docs/sources/visualizations/time-series/_index.md
View File

@@ -9,7 +9,7 @@ weight = 1200
{{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="1200px" caption="Time series" >}}
Time series visualization is the default and primary way to visualize time series data. It can render as a line, a path of dots, or a series of bars. It is versatile enough to display almost any time-series data. [ This public demo dashboard](https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1) contains many different examples for how this visualization can be configured and styled.
Time series visualization is the default and primary way to visualize time series data. It can render as a line, a path of dots, or a series of bars. It is versatile enough to display almost any time-series data. [This public demo dashboard](https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1) contains many different examples for how this visualization can be configured and styled.
> **Note:** You can migrate Graph panel visualizations to Time series visualizations. To migrate, open the panel and then select the **Time series** visualization. Grafana transfers all applicable settings.
@@ -23,7 +23,7 @@ These options are available whether you are graphing your time series as lines,
### Legend calculations
Choose which of the [standard calculations]({{< relref "../../panels/calculations-list.md">}}) to show in the legend. You can have more than one.
Choose which of the [standard calculations]({{< relref "../../panels/reference-calculation-types.md">}}) to show in the legend. You can have more than one.
## Graph styles

2
docs/sources/visualizations/time-series/change-axis-display.md
View File

@@ -61,7 +61,7 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
**Soft min** and **soft max** settings can prevent blips from turning into mountains when the data is mostly flat, and hard min or max derived from standard min and max field options can prevent intermittent spikes from flattening useful detail by clipping the spikes past a defined point.
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field options]({{< relref "../../panels/standard-options.md#max" >}}).
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Reference: Standard field definitions]({{< relref "../../panels/reference-standard-field-definitions.md#max" >}}).
![Label example](/static/img/docs/time-series-panel/axis-soft-min-max-7-4.png)

2
docs/sources/visualizations/time-series/graph-color-scheme.md
View File

@@ -9,7 +9,7 @@ weight = 400
# Graph and color schemes
Under [Standard options]({{< relref "../../panels/standard-options.md" >}}) you find the [Color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) option. This option controls series are assigned their color.
To set the graph and color schemes, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}).
## Classic palette

13
docs/sources/visualizations/time-series/graph-time-series-as-bars.md
View File

@@ -9,11 +9,14 @@ weight = 200
This section explains how to use Time series field options to visualize time series data as bars and illustrates what the options do.
For more information about the time series visualization, refer to [Time series]({{< relref "_index.md" >}}).
## Create the panel
1. [Add a panel]({{< relref "../../panels/add-a-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
2. In the [Panel editor]({{< relref "../../panels/panel-editor.md" >}}) side pane, click **Graph styles** to expand it.
3. In Style, click **Bars**.
1. [Add a panel]({{< relref "../../panels/working-with-panels/add-panel.md" >}}).
1. Select the **Time series** visualization.
1. In the Panel editor side pane, click **Graph styles** to expand it.
1. In Style, click **Bars**.
## Style the bars
@@ -75,7 +78,7 @@ Fill opacity set to 95:
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) field option.
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}).
Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.
@@ -99,7 +102,7 @@ Gradient color is generated based on the hue of the line color.
#### Scheme
In this mode the whole bar will use a color gradient defined by your [Color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
In this mode the whole bar will use a color gradient defined by your Color scheme. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}). There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_bars.png" max-width="1200px" caption="Gradient color scheme mode" >}}

10
docs/sources/visualizations/time-series/graph-time-series-as-lines.md
View File

@@ -11,8 +11,8 @@ This section explains how to use Time series field options to visualize time ser
## Create the panel
1. [Add a panel]({{< relref "../../panels/add-a-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
1. In the [Panel editor]({{< relref "../../panels/panel-editor.md" >}}) side pane, click **Graph styles** to expand it.
1. [Add a panel]({{< relref "../../panels/working-with-panels/add-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
1. In the Panel editor side pane, click **Graph styles** to expand it.
1. In Style, click **Lines**.
## Style the lines
@@ -83,7 +83,7 @@ Fill opacity set to 95:
### Gradient mode
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) field option.
Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}) .
Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.
@@ -107,13 +107,13 @@ Gradient color is generated based on the hue of the line color.
#### Scheme
In this mode the whole line will use a color gradient defined by your [Color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
In this mode the whole line will use a color gradient defined by your Color scheme. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}}). There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_line.png" max-width="1200px" caption="Gradient mode scheme" >}}
### Line style
Set the style of the line. To change the color, use the standard [color scheme]({{< relref "../../panels/standard-options.md#color-scheme" >}}) field option.
Set the style of the line. To change the color, use the standard color scheme field option. For more information, refer to [Apply color to series and fields]({{< relref "../../panels/working-with-panels/apply-color-to-series.md" >}})
Line style appearance is influenced by the **Line width** and **Fill opacity** settings. In the screenshots below, **Line width** is set to 3 and **Fill opacity** is set to 20.

4
docs/sources/visualizations/time-series/graph-time-series-as-points.md
View File

@@ -11,8 +11,8 @@ This section explains how to use Time series field options to visualize time ser
## Create the panel
1. [Add a panel]({{< relref "../../panels/add-a-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
1. In the [Panel editor]({{< relref "../../panels/panel-editor.md" >}}) side pane, click **Graph styles** to expand it.
1. [Add a panel]({{< relref "../../panels/working-with-panels/add-panel.md" >}}). Select the [Time series]({{< relref "_index.md" >}}) visualization.
1. In the Panel editor side pane, click **Graph styles** to expand it.
1. In Style, click **Points**.
## Style the points

2
docs/sources/visualizations/time-series/graph-time-series-stacking.md
View File

@@ -37,7 +37,7 @@ Enable stacking series on top of each other.
The stacking group option is only available as an override.
For more information about creating field overrides, refer to [Field overrides]({{< relref "../../panels/field-overrides.md" >}}).
For more information about creating field overrides, refer to [About field overrides]({{< relref "../../panels/override-field-values/about-field-overrides.md" >}}).
Stack series in the same group. In the Overrides section: