Docs: 8.0 panel edit prelim (#34247)

* Update whats-new-in-v8-0.md

* reordered and moved files

* moving content

* moving items

* moving content and updating links
This commit is contained in:
Diana Payton 2021-05-18 07:21:34 -07:00 committed by GitHub
parent 2aa1a051f0
commit bbaa7a9b62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 111 additions and 55 deletions

View File

@ -0,0 +1,60 @@
+++
draft = "true"
+++
Task: Add panel
Default visualization: Time series
- change if you want to, or go to query
Get data into your panel
- Select data source
- Add query and/or expression
- Transform data
- Troubleshoot
- Query options
- Inspect query
- Table view
Make it look good
- Change the visualization
- Panel options
- Visualization-specific options
- Thresholds
- Standard options
- Value mappings
- Data links
- Overrides
Next steps
- Set up alert
TOC
# General
Add a panel
Panel editor
# Work with your metrics
Queries
- Share query results
- Mixed data source queries
Expressions
Transformations
Inspect a panel
# Adjust appearance
Panel options
Visualization-specific settings (Visualizations)
Thresholds
Value mappings
Data links (can be for all fields or one)
Visualizations > specific options
Overrides
# Reference
Calculations list

View File

@ -1,6 +1,6 @@
+++
title = "Calculations list"
weight = 300
weight = 700
+++
# List of calculations

View File

@ -5,8 +5,6 @@ weight = 400
# Inspect a panel
> **Note:** This documentation refers to a feature only available in Grafana 7.0+.
The panel inspector helps you understand and troubleshoot your panels. You can inspect the raw data for any Grafana panel, export that data to a comma-separated values (CSV) file, view query requests, and export panel and data JSON.
## Panel inspector UI

View File

@ -1,16 +1,17 @@
+++
title = "Panel legend options"
weight = 50
title = "Legend options"
aliases = ["/docs/grafana/latest/panels/visualizations/panel-legend/"]
weight = 500
+++
# Legend
# Legend options
Use the legend to adjust how a visualization displays series. This legend functionality only applies to a few panels now, but it will eventually be common to all visualizations.
This topic currently applies to the following visualizations:
- [Pie chart panel]({{< relref "pie-chart-panel.md">}})
- [Time series panel]({{< relref "time-series/_index.md" >}})
- [Pie chart panel]({{< relref "visualizations/pie-chart-panel.md">}})
- [Time series panel]({{< relref "visualizations/time-series/_index.md" >}})
## Toggle series

View File

@ -1,22 +1,18 @@
+++
title = "Standard field options"
keywords = ["grafana", "table options", "documentation", "format tables"]
aliases = ["/docs/grafana/latest/panels/field-options/standard-field-options/"]
weight = 400
+++
# Standard field options
This section explains all available field options. They are listed in alphabetical order.
This section explains all available standard options. They are listed in alphabetical order.
You can apply standard field options to most built-in Grafana panels. Some older panels and community panels that have not updated to the new panel and data model will be missing either all or some of these field options.
You can apply standard options to most built-in Grafana panels. Some older panels and community panels that have not updated to the new panel and data model will be missing either all or some of these field options.
Most field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.
For more information about applying these options, refer to:
- [Configure all fields]({{< relref "configure-all-fields.md" >}})
- [Configure specific fields]({{< relref "configure-specific-fields.md" >}})
> **Note:** We are constantly working to add and expand options for all visualization, so all options might not be available for all visualizations.
## Decimals
@ -29,11 +25,11 @@ To change this setting, type a number in the field and then click outside the fi
Lets you control the URL to which a value or visualization link.
For more information and instructions, refer to [Data links]({{< relref "../../linking/data-links.md" >}}).
For more information and instructions, refer to [Data links]({{< relref "../linking/data-links.md" >}}).
## Display name
Lets you set the display title of all fields. You can use [variables]({{< relref "../../variables/_index.md" >}}) in the field title.
Lets you set the display title of all fields. You can use [variables]({{< relref "../variables/_index.md" >}}) in the field title.
When multiple stats, fields, or series are shown, this field controls the title in each stat. You can use expressions like `${__field.name}` to use only the series name or the field name in title.
@ -59,7 +55,7 @@ Lets you set the minimum value used in percentage threshold calculations. Leave
## No value
Enter what Grafana should display if the field value is empty or null.
Enter what Grafana should display if the field value is empty or null. The default value is a hyphen (-).
## Unit
@ -90,17 +86,24 @@ Grafana can sometime be too aggressive in parsing strings and displaying them as
## Color scheme
> **Note:** Only available in Grafana 7.3+.
{{< figure src="/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" class="pull-right" >}}
The color scheme option defines how Grafana colors series or fields. There are multiple modes here that work very differently and their utility depends largely on what visualization you currently have selected.
**Color by value**
In addition to deriving color from thresholds there are also continuous (gradient) color schemes. Useful for visualizations that color individual values. For example stat panels and the table panel. Continuous color modes use the percentage of a value relative to min and max to interpolate a color.
Some visualizations have different color options.
### Color by value
In addition to deriving color from thresholds there are also continuous (gradient) color schemes. These are useful for visualizations that color individual values. For example, stat panels and the table panel.
Continuous color modes use the percentage of a value relative to min and max to interpolate a color.
<div class="clearfix"></div>
### Palettes
Select a palette from the **Color scheme** list.
| Color mode | Description |
| ------------------ | ----------------------- |
| **Single color** | Specify a single color, useful in an override rule |
@ -112,21 +115,3 @@ In addition to deriving color from thresholds there are also continuous (gradien
| **Reds (by value)** | Continuous color scheme (panel background color to blue) |
| **Greens (by value)** | Continuous color scheme (panel background color to blue) |
| **Purple (by value)** | Continuous color scheme (panel background color to blue) |
## Thresholds
Thresholds allow you to change the color of a field based on the value.
For more information and instructions, refer to [Thresholds]({{< relref "../thresholds.md" >}}).
## Value mapping
Value mappings come in different types.
* **Range** maps numerical ranges to a display text and color.
* **Value** maps text values to a color or different display text.
* **Special** maps special values like `Null`, `NaN` and boolean values like `true` and `false` to a display text and color.
The display text and color are both optional. If you only want to assign colors to text values you can leave the display text empty and the original value will be used for display.
Values mapped via value mappings will skip the unit formatting. This means that a text value mapped to a numerical value will not be formatted using the configured unit.

View File

@ -1,6 +1,6 @@
+++
title = "Thresholds"
weight = 300
weight = 600
+++
# Thresholds
@ -11,13 +11,7 @@ You can define thresholds one of two ways:
- **Absolute** thresholds are defined based on a number. For example, 80 on a scale of 1 to 150.
- **Percentage** thresholds are defined relative to minimum or maximum. For example, 80 percent.
You can apply thresholds to the following visualizations:
- [Bar gauge]({{< relref "visualizations/bar-gauge-panel.md" >}})
- [Gauge]({{< relref "visualizations/gauge-panel.md" >}})
- [Graph]({{< relref "visualizations/graph-panel.md" >}})
- [Stat]({{< relref "visualizations/stat-panel.md" >}})
- [Table]({{< relref "visualizations/table/_index.md" >}})
You can apply thresholds to most, but not all, visualizations.
## Default thresholds
@ -44,7 +38,7 @@ You can add as many thresholds to a panel as you want. Grafana automatically sor
- **Thresholds mode -** Click the mode to change it for all thresholds on this panel.
1. Click **Save** to save the changes in the dashboard.
## Add a threshold to a Graph panel
## Add a threshold to a Graph (old) panel
In the Graph panel visualization, thresholds allow you to add arbitrary lines or sections to the graph to make it easier to see when the graph crosses a particular threshold.

View File

@ -0,0 +1,16 @@
+++
title = "Value mappings"
weight = 600
+++
## Value mappings
Value mappings come in different types.
* **Range** maps numerical ranges to a display text and color.
* **Value** maps text values to a color or different display text.
* **Special** maps special values like `Null`, `NaN` and boolean values like `true` and `false` to a display text and color.
The display text and color are both optional. If you only want to assign colors to text values you can leave the display text empty and the original value will be used for display.
Values mapped via value mappings will skip the unit formatting. This means that a text value mapped to a numerical value will not be formatted using the configured unit.

View File

@ -1,6 +1,6 @@
+++
title = "Visualizations"
weight = 600
weight = 300
+++
# Visualizations

View File

@ -65,7 +65,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 "../../field-options/standard-field-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 "../../standard-options.md#max" >}}).
![Label example](/img/docs/time-series-panel/axis-soft-min-max-7-4.png)

View File

@ -81,7 +81,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 "../../field-options/standard-field-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 "../../standard-options.md#color-scheme" >}}) field option.
Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.

View File

@ -89,7 +89,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 "../../field-options/standard-field-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 "../../standard-options.md#color-scheme" >}}) field option.
Gradient appearance is influenced by the **Fill opacity** setting. In the screenshots below, **Fill opacity** is set to 50.
@ -113,7 +113,7 @@ Gradient color is generated based on the hue of the line color.
### Line style
Set the style of the line. To change the color, use the standard [color scheme]({{< relref "../../field-options/standard-field-options.md#color-scheme" >}}) field option.
Set the style of the line. To change the color, use the standard [color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) field option.
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.

View File

@ -34,7 +34,7 @@ Another new feature that can be seen in the image above is the new image cell di
{{< figure src="/img/docs/v73/color_scheme_dropdown.png" max-width="450px" caption="Color scheme" class="pull-right" >}}
A new standard field [color scheme]({{< relref "../panels/field-options/standard-field-options.md#color-scheme" >}}) option has been added. This new option will provide a unified way for all new panels to specify how colors should be assigned.
A new standard field [color scheme]({{< relref "../panels/standard-options.md#color-scheme" >}}) option has been added. This new option will provide a unified way for all new panels to specify how colors should be assigned.
- **Single color**: Specifies a single color. Useful in an override rule.
- **From thresholds**: Informs Grafana to take color from the matching threshold.

View File

@ -35,6 +35,7 @@ New visualization that allows categorical data display. Following the new panel
The Time series is out of beta! We are removing the `Beta`tag and graduating the Time series panel to a stable state.
- **Time series** is now the default visualization option, replacing the **Graph (old)**.
- The Time series panel now supports stacking. For more information, refer to [Graph stacked time series]({{< relref "../panels/visualizations/time-series/graph-time-series-stacking.md" >}}).
- You can now add alerts in the Time series panel, just like the old Graph panel.
- We added support for a shared crosshair and a tooltip thats now smarter when it comes to data display in the tooltip.
- Various performance improvements.
@ -43,6 +44,7 @@ The Time series is out of beta! We are removing the `Beta`tag and graduating th
- All options are now shown in a single pane.
- You can now search panel options.
- Value mapping has been completely redesigned.
- New **Table view** option is always available.
### Look and feel update