public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PackageJson: Prettify markdown/mdx on commit with lint-staged (#37616)

Browse Source 
* Format md,mdx files with prettier on lint-staged

* Manually run prettier on docs/sources
This commit is contained in:
Connor Lindsey
2021-08-06 07:52:36 -06:00
committed by GitHub
parent e9c032f10f
commit b78a67cec7
301 changed files with 3216 additions and 2980 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/panels/_index.md
+1 -1
View File
@@ -6,7 +6,7 @@ weight = 70
# Panel overview
The *panel* is the basic visualization building block in Grafana. Each panel has a query editor specific to the data source selected in the panel. The query editor allows you to extract the perfect visualization to display on the panel.
The _panel_ is the basic visualization building block in Grafana. Each panel has a query editor specific to the data source selected in the panel. The query editor allows you to extract the perfect visualization to display on the panel.
There are a wide variety of styling and formatting options for each panel. Panels can be dragged and dropped and rearranged on the dashboard. They can also be resized.
docs/sources/panels/calculations-list.md
+17 -17
View File
@@ -9,21 +9,21 @@ This topic lists and defines calculations used in Grafana.
Among other places, these calculations are used in the Transform tab and the bar gauge, gauge, and stat visualizations.
| Calculation | Description |
|:---|:---|
| All nulls | true when all values are null|
| All zeros | true when all values are 0 |
| Change count | number of times the field's value changes |
| Count | number of values in a field|
| Delta | cumulative change in value |
| Difference | difference between first and last value of a field|
| Calculation | Description |
| :----------------- | :-------------------------------------------------------- |
| All nulls | true when all values are null |
| All zeros | true when all values are 0 |
| Change count | number of times the field's value changes |
| Count | number of values in a field |
| Delta | cumulative change in value |
| Difference | difference between first and last value of a field |
| Difference percent | percentage change between first and last value of a field |
| Distinct count | number of unique values in a field |
| First (not null) | first, not null value in a field|
| Max | maximum value of a field |
| Mean | mean value of all values in a field |
| Min | minimum value of a field|
| Min (above zero) | minimum, positive value of a field|
| Range | difference between maximum and minimum values of a field|
| Step | minimal interval between values of a field |
| Total | sum of all values in a field |
| Distinct count | number of unique values in a field |
| First (not null) | first, not null value in a field |
| Max | maximum value of a field |
| Mean | mean value of all values in a field |
| Min | minimum value of a field |
| Min (above zero) | minimum, positive value of a field |
| Range | difference between maximum and minimum values of a field |
| Step | minimal interval between values of a field |
| Total | sum of all values in a field |
docs/sources/panels/expressions.md
+4 -4
View File
@@ -44,10 +44,10 @@ Data source queries, when used with expressions, are executed by the expression
Currently, the only non-time series format (number) is supported when using data frames are you have a table response that returns a data frame with no time, string columns, and one number column:
Loc | Host | Avg_CPU |
----|------| ------- |
MIA | A | 1
NYC | B | 2
| Loc | Host | Avg_CPU |
| --- | ---- | ------- |
| MIA | A | 1 |
| NYC | B | 2 |
will produce a number that works with expressions. The string columns become labels and the number column the corresponding value. For example `{"Loc": "MIA", "Host": "A"}` with a value of 1.
docs/sources/panels/panel-library.md
+3 -3
View File
@@ -11,7 +11,7 @@ Library panels allow users to create reusable panels where any changes made to o
Before you can use library panels, you have to create them.
> **Note:** When you create library panels, the panel on the source dashboard is converted to a library panel as well. You will need to save the original dashboard once a panel is converted.
> **Note:** When you create library panels, the panel on the source dashboard is converted to a library panel as well. You will need to save the original dashboard once a panel is converted.
To create a library panel:
@@ -28,7 +28,7 @@ To create a library panel:
Optionally, you can click title of the panel and then click **More > Create Library panel**. Next, follow the instructions Step 5 in the procedure above.
{{< figure src="/static/img/docs/library-panels/create-from-more-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}}
{{< figure src="/static/img/docs/library-panels/create-from-more-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}}
Also, library panels can also be created using the “Share” option for any panel.
@@ -61,7 +61,7 @@ To unlink a library panel from a dashboard:
1. Hover over **Dashboard** on the left menu, and then click **Library panels**.
1. Select a library panel that is being used in different dashboards. You will see a list of all the dashboards where the library panel is used.
{{< figure src="/static/img/docs/library-panels/unlink-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}}
1. Select the panel you want to unlink and update.
1. Select the panel you want to unlink and update.
1. Click the title of the panel and then click **Edit**. The panel opens in edit mode.
1. Click the **Unlink** option on the top right corner of the UI.
docs/sources/panels/queries.md
+25 -29
View File
@@ -63,8 +63,8 @@ In addition to the data sources that you have configured in your Grafana, there
- **Grafana -** A built-in data source that generates random walk data. Useful for testing visualizations and running experiments.
- **Mixed -** Select this to query multiple data sources in the same panel. When this data source is selected, Grafana allows you to select a data source for every new query that you add.
* The first query will use the data source that was selected before you selected **Mixed**.
* You cannot change an existing query to use the Mixed Data Source.
- The first query will use the data source that was selected before you selected **Mixed**.
- You cannot change an existing query to use the Mixed Data Source.
- **Dashboard -** Select this to use a result set from another panel in the same dashboard.
### Query options
@@ -103,29 +103,25 @@ Panel data source query options:
### Examples:
- **Relative time:**
| Example | Relative time field |
| ------------------- | --------------------|
| Last 5 minutes | `now-5m` |
| The day so far | `now/d` |
| Last 5 days | `now-5d/d` |
| This week so far | `now/w` |
| Last 2 years | `now-2y/y` |
- **Time shift:**
| Example | Time shift field |
| ------------------- | --------------------|
| Last entire week | `1w/w` |
| Two entire weeks ago | `2w/w` |
| Last entire month | `1M/M` |
| This entire year | `1d/y` |
| Last entire year | `1y/y` |
- **Relative time:**
| Example | Relative time field |
| ---------------- | ------------------- |
| Last 5 minutes | `now-5m` |
| The day so far | `now/d` |
| Last 5 days | `now-5d/d` |
| This week so far | `now/w` |
| Last 2 years | `now-2y/y` |
- **Time shift:**
| Example | Time shift field |
| -------------------- | ---------------- |
| Last entire week | `1w/w` |
| Two entire weeks ago | `2w/w` |
| Last entire month | `1M/M` |
| This entire year | `1d/y` |
| Last entire year | `1y/y` |
### Query inspector button
@@ -143,13 +139,13 @@ In the UI, queries are organized in collapsible query rows. Each query row conta
You can:
| Icon | Description |
|:--:|:---|
| {{< figure src="/static/img/docs/queries/query-editor-help-7-4.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Toggle query editor help. If supported by the data source, click this icon to display information on how to use the query editor or provide quick access to common queries. |
| {{< figure src="/static/img/docs/queries/duplicate-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Copy a query. Duplicating queries is useful when working with multiple complex queries that are similar and you want to either experiment with different variants or do minor alterations. |
| {{< figure src="/static/img/docs/queries/hide-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Hide a query. Grafana does not send hidden queries to the data source. |
| {{< figure src="/static/img/docs/queries/remove-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Remove a query. Removing a query permanently deletes it, but sometimes you can recover deleted queries by reverting to previously saved versions of the panel. |
| {{< figure src="/static/img/docs/queries/query-drag-icon-7-2.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Reorder queries. Change the order of queries by clicking and holding the drag icon, then drag queries where desired. The order of results reflects the order of the queries, so you can often adjust your visual results based on query order. |
| Icon | Description |
| :-----------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| {{< figure src="/static/img/docs/queries/query-editor-help-7-4.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Toggle query editor help. If supported by the data source, click this icon to display information on how to use the query editor or provide quick access to common queries. |
| {{< figure src="/static/img/docs/queries/duplicate-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Copy a query. Duplicating queries is useful when working with multiple complex queries that are similar and you want to either experiment with different variants or do minor alterations. |
| {{< figure src="/static/img/docs/queries/hide-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Hide a query. Grafana does not send hidden queries to the data source. |
| {{< figure src="/static/img/docs/queries/remove-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Remove a query. Removing a query permanently deletes it, but sometimes you can recover deleted queries by reverting to previously saved versions of the panel. |
| {{< figure src="/static/img/docs/queries/query-drag-icon-7-2.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Reorder queries. Change the order of queries by clicking and holding the drag icon, then drag queries where desired. The order of results reflects the order of the queries, so you can often adjust your visual results based on query order. |
### Expressions
docs/sources/panels/share-query-results.md
+1 -1
View File
@@ -16,7 +16,7 @@ To share data source queries with another panel:
1. [Create a dashboard]({{< relref "../getting-started/getting-started.md#create-a-dashboard" >}}).
1. [Add a panel]({{< relref "add-a-panel.md" >}}) to the dashboard.
1. Change the title to "Source panel". You'll use this panel as a source for the other panels.
Define the [query]({{< relref "queries.md" >}}) or queries that will be shared. If you don't have a data source available at the moment, then you can use the **Grafana** data source, which returns a random time series that you can use for testing.
Define the [query]({{< relref "queries.md" >}}) or queries that will be shared. If you don't have a data source available at the moment, then you can use the **Grafana** data source, which returns a random time series that you can use for testing.
1. Add a second panel and select the **Dashboard** data source in the query editor.
1. In the **Use results from panel list**, select the first panel you created.
docs/sources/panels/standard-options.md
+11 -11
View File
@@ -104,14 +104,14 @@ Continuous color modes use the percentage of a value relative to min and max to
Select a palette from the **Color scheme** list.
| Color mode | Description |
| ------------------ | ----------------------- |
| **Single color** | Specify a single color, useful in an override rule |
| **From thresholds** | Informs Grafana to take the color from the matching threshold |
| **Classic palette** | Grafana will assign color by looking up a color in a palette by series index. Useful for Graphs and pie charts and other categorical data visualizations |
| **Green-Yellow-Red (by value)** | Continuous color scheme |
| **Blue-Yellow-Red (by value)** | Continuous color scheme |
| **Blues (by value)** | Continuous color scheme (panel background to blue) |
| **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) |
| Color mode | Description |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Single color** | Specify a single color, useful in an override rule |
| **From thresholds** | Informs Grafana to take the color from the matching threshold |
| **Classic palette** | Grafana will assign color by looking up a color in a palette by series index. Useful for Graphs and pie charts and other categorical data visualizations |
| **Green-Yellow-Red (by value)** | Continuous color scheme |
| **Blue-Yellow-Red (by value)** | Continuous color scheme |
| **Blues (by value)** | Continuous color scheme (panel background to blue) |
| **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) |
docs/sources/panels/thresholds.md
+3 -1
View File
@@ -8,6 +8,7 @@ weight = 440
Thresholds set the color of either the value text or the background depending on conditions that you define.
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.
@@ -16,6 +17,7 @@ You can apply thresholds to most, but not all, visualizations.
## Default thresholds
On visualizations that support it, Grafana sets default threshold values of:
- 80 = red
- Base = green
- Mode = Absolute
@@ -27,7 +29,7 @@ The **Base** value represents minus infinity. It is generally the “good” col
You can add as many thresholds to a panel as you want. Grafana automatically sorts thresholds from highest value to lowest.
1. Navigate to the panel you want to add a threshold to.
1. Open the category **Thresholds** in the right side options pane.
1. Open the category **Thresholds** in the right side options pane.
1. Click **Add threshold**.
1. Grafana adds a threshold with suggested numerical and color values.
1. Accept the recommendations or edit the new threshold.
docs/sources/panels/transformations/_index.md
+3 -3
View File
@@ -10,7 +10,7 @@ Transformations process the result set of a query before it’s passed on for vi
The transformations feature is accessible from the **Transform** tab of the Grafana panel editor.
Transformations sometimes result in data that cannot be graphed. When that happens, click the `Table view` toggle above the visualization to switch to a table view of the data. This can help you understand
the final result of your transformations.
the final result of your transformations.
## Order of transformations
@@ -24,7 +24,7 @@ Before you can configure and apply transformations:
- You must have entered a query that return data. For more information on queries, refer to [Queries]({{< relref "../queries.md" >}}).
## List of transformations
## List of transformations
- [Add field from calculation]({{< relref "./types-options.md#add-field-from-calculation" >}})
- [Concatenate fields]({{< relref "./types-options.md#concatenate-fields" >}})
@@ -41,4 +41,4 @@ Before you can configure and apply transformations:
- [Rename by regex]({{< relref "./types-options.md#rename-by-regex" >}})
- [Rows to fields]({{< relref "./rows-to-fields" >}})
- [Series to rows]({{< relref "./types-options.md#series-to-rows" >}})
- [Sort by]({{< relref "./types-options.md#sort-by" >}})
- [Sort by]({{< relref "./types-options.md#sort-by" >}})
docs/sources/panels/transformations/apply-transformations.md
+1 -2
View File
@@ -3,10 +3,9 @@ title = "Apply a transformation"
weight = 1
+++
# Apply transformations
You can apply transformations from the Transform tab of the Grafana panel editor, which is located next to the Queries tab. See also, [Debug transformations](#debug-transformations).
You can apply transformations from the Transform tab of the Grafana panel editor, which is located next to the Queries tab. See also, [Debug transformations](#debug-transformations).
To apply a transformation:
docs/sources/panels/transformations/config-from-query.md
+4 -4
View File
@@ -5,7 +5,7 @@ weight = 300
# Config from query results transform
> **Note:** This is a new beta transformation introduced in v8.1.
> **Note:** This is a new beta transformation introduced in v8.1.
This transformation allow you select one query and from it extract [standard options]({{< relref "../standard-options.md" >}}) like **Min**, **Max**, **Unit** and **Thresholds** and apply it to other query results. This enables dynamic query driven visualization configuration.
@@ -19,7 +19,7 @@ If you want to extract a unique config for every row in the config query result
### Field mapping table
This transformation includes a field table which lists all fields in the data returned by the config query. This table gives you control over what field should be mapped to each config property (the *Use as** option). You can also choose which value to select if there are multiple rows in the returned data.
This transformation includes a field table which lists all fields in the data returned by the config query. This table gives you control over what field should be mapped to each config property (the \*Use as\*\* option). You can also choose which value to select if there are multiple rows in the returned data.
## Example
@@ -48,7 +48,7 @@ As you can see each row in the source data becomes a separate field. Each field
## Value mappings
You can also transform a query result into value mappings. This is is a bit different as here every row in the config query result will be used to define a single value mapping row. See example below.
You can also transform a query result into value mappings. This is is a bit different as here every row in the config query result will be used to define a single value mapping row. See example below.
Config query result:
@@ -66,4 +66,4 @@ In the field mapping specify:
| Text | Value mappings / Text | All values |
| Color | Value mappings / Ciolor | All values |
Grafana will build the value mappings from you query result and apply it the the real data query results. You should see values being mapped and colored according to the config query results.
Grafana will build the value mappings from you query result and apply it the the real data query results. You should see values being mapped and colored according to the config query results.
docs/sources/panels/transformations/rows-to-fields.md
+3 -3
View File
@@ -5,9 +5,9 @@ weight = 300
# Rows to fields transform
> **Note:** This is a new beta transformation introduced in v8.1.
> **Note:** This is a new beta transformation introduced in v8.1.
This transforms rows into separate fields. This can be useful as fields can be styled and configured individually, something rows cannot. It can also use additional fields as sources for dynamic field configuration or map them to field labels. The additional labels can then be used to define better display names for the resulting fields.
This transforms rows into separate fields. This can be useful as fields can be styled and configured individually, something rows cannot. It can also use additional fields as sources for dynamic field configuration or map them to field labels. The additional labels can then be used to define better display names for the resulting fields.
Useful when visualizing data in:
@@ -69,4 +69,4 @@ Output:
| -------------------------------- | -------------------------------- |
| 10 | 20 |
The extra labels can now be used in the field display name provide more complete field names.
The extra labels can now be used in the field display name provide more complete field names.
docs/sources/panels/value-mappings.md
+1 -1
View File
@@ -72,7 +72,7 @@ You can enter any Ascii character or emoji in this field.
You can select a color to for Grafana to display the value mapping text in.
- **Set color -** Click **Set color** to see a range of recommended colors. Click **Custom** to choose your own color.
- **Text color -** The primary text color for the current theme, i.e. white in dark theme and black in light theme.
- **Text color -** The primary text color for the current theme, i.e. white in dark theme and black in light theme.
- **Transparent -** Makes the color transparent so that the value mapping color shows whatever color is behind it, such as a panel background color.
![Set color](/static/img/docs/value-mappings/set-color-8-0.png)
docs/sources/panels/visualizations/_index.md
+31 -30
View File
@@ -5,34 +5,35 @@ weight = 420
# Visualization panels
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.
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.
* Graphs & charts
* [Time series]({{< relref "./time-series/_index.md" >}}) is the default and main Graph visualization.
* [State timeline]({{< relref "./state-timeline.md" >}}) for state changes over time.
* [Status history]({{< relref "./status-history.md" >}}) for periodic state over time.
* [Bar chart]({{< relref "./bar-chart.md" >}}) shows any categorical data.
* [Histogram]({{< relref "./histogram.md" >}}) calculates and shows value distribution in a bar chart.
* [Heatmap]({{< relref "./heatmap.md" >}}).
* [Pie chart]({{< relref "./pie-chart-panel.md" >}}).
* Stats & numbers
* [Stat]({{< relref "./stat-panel.md" >}}) for big stats and optional sparkline.
* [Gauge]({{< relref "./gauge-panel.md" >}}) is a normal radial gauge.
* [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) is a horizontal or vertical bar gauge.
* Misc
* [Table]({{< relref "./table/_index.md" >}}) is the main and only table visualization.
* [Logs]({{< relref "./logs-panel.md" >}}) is the main visualization for logs.
* [Node Graph]({{< relref "./node-graph.md" >}}) for directed graphs or networks.
* Widgets
* [Dashboard list]({{< relref "./dashboard-list-panel.md" >}}) can list dashboards.
* [Alert list]({{< relref "./alert-list-panel.md" >}}) can list alerts.
* [Text panel]({{< relref "./alert-list-panel.md" >}}) can show markdown and html.
* [News panel]({{< relref "./news-panel.md" >}}) can show RSS feeds.
- Graphs & charts
- [Time series]({{< relref "./time-series/_index.md" >}}) is the default and main Graph visualization.
- [State timeline]({{< relref "./state-timeline.md" >}}) for state changes over time.
- [Status history]({{< relref "./status-history.md" >}}) for periodic state over time.
- [Bar chart]({{< relref "./bar-chart.md" >}}) shows any categorical data.
- [Histogram]({{< relref "./histogram.md" >}}) calculates and shows value distribution in a bar chart.
- [Heatmap]({{< relref "./heatmap.md" >}}).
- [Pie chart]({{< relref "./pie-chart-panel.md" >}}).
- Stats & numbers
- [Stat]({{< relref "./stat-panel.md" >}}) for big stats and optional sparkline.
- [Gauge]({{< relref "./gauge-panel.md" >}}) is a normal radial gauge.
- [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) is a horizontal or vertical bar gauge.
- Misc
- [Table]({{< relref "./table/_index.md" >}}) is the main and only table visualization.
- [Logs]({{< relref "./logs-panel.md" >}}) is the main visualization for logs.
- [Node Graph]({{< relref "./node-graph.md" >}}) for directed graphs or networks.
- Widgets
- [Dashboard list]({{< relref "./dashboard-list-panel.md" >}}) can list dashboards.
- [Alert list]({{< relref "./alert-list-panel.md" >}}) can list alerts.
- [Text panel]({{< relref "./alert-list-panel.md" >}}) can show markdown and html.
- [News panel]({{< relref "./news-panel.md" >}}) can show RSS feeds.
## Get more
## Get more
You can add more visualization types by installing panel [panel plugins](https://grafana.com/grafana/plugins/?type=panel).
## Examples
## Examples
Below you can find some good examples for how all the visualizations in Grafana can be configured. You can also explore [play.grafana.org](https://play.grafana.org) which has a large set of demo dashboards that showcase all the different visualizations.
@@ -42,7 +43,7 @@ For time based line, area and bar charts we recommend the default [Time series](
{{< figure src="/static/img/docs/time-series-panel/time_series_small_example.png" max-width="700px" caption="Time series" >}}
For categorical data use the [Bar chart]({{< relref "./bar-chart.md" >}}) visualization.
For categorical data use the [Bar chart]({{< relref "./bar-chart.md" >}}) visualization.
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="700px" caption="Bar chart" >}}
@@ -52,23 +53,23 @@ The [Stat](stat-panel/) visualization shows one large stat value with an optiona
{{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat panel" >}}
### Gauge
### Gauge
If you want to present a value as it relates to a min and max value you have two options. First a standard [Radial Gauge]({{< relref "./gauge-panel.md" >}}) shown below.
{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="700px" >}}
Secondly Grafana also has a horizontal or vertical [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) with three different distinct display modes.
Secondly Grafana also has a horizontal or vertical [Bar gauge]({{< relref "./bar-gauge-panel.md" >}}) with three different distinct display modes.
{{< figure src="/static/img/docs/v66/bar_gauge_lcd.png" max-width="700px" >}}
### Table
### Table
To show data in a table layout, use the [Table]({{< relref "./table/_index.md" >}}) visualization.
{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="700px" lightbox="true" caption="Table visualization" >}}
### Pie chart
### Pie chart
Grafana now ships with an included [Pie chart]({{< relref "./pie-chart-panel.md" >}}) visualization.
@@ -84,4 +85,4 @@ To show value distribution over, time use the [heatmap]({{< relref "./heatmap.md
The state timeline panel visualization shows discrete state changes over time. When used with time series, the thresholds are used to turn the numerical values into discrete state regions.
{{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="700px" caption="state timeline with string states" >}}
{{< figure src="/static/img/docs/v8/state_timeline_strings.png" max-width="700px" caption="state timeline with string states" >}}
docs/sources/panels/visualizations/alert-list-panel.md
+1
View File
@@ -40,6 +40,7 @@ These options allow you to limit alerts shown to only those that match the query
## State filter
Choose which alert states to display in this panel.
- Ok
- Paused
- No data
docs/sources/panels/visualizations/annotations.md
+13 -13
View File
@@ -6,31 +6,31 @@ aliases =["/docs/grafana/latest/features/panels/anotations/"]
weight = 600
+++
# Annotations
# Annotations
The Annotations panel shows a list of available annotations you can use to view annotated data. Various options are available to filter the list based on tags and on the current dashboard.
## Annotation query
The following options control the source query for the list of annotations.
The following options control the source query for the list of annotations.
### Query Filter
Use the query filter to create a list of annotations from all dashboards in your organization or the current dashboard in which this panel is located. It has the following options:
* All dashboards - List annotations from all dashboards in the current organization.
* This dashboard - Limit the list to the annotations on the current dashboard.
- All dashboards - List annotations from all dashboards in the current organization.
- This dashboard - Limit the list to the annotations on the current dashboard.
### Time Range
Use the time range option to specify whether the list should be limited to the current time range. It has the following options:
* None - no time range limit for the annotations query.
* This dashboard - Limit the list to the time range of the dashboard where the annotation list panel is available.
- None - no time range limit for the annotations query.
- This dashboard - Limit the list to the time range of the dashboard where the annotation list panel is available.
### Tags
Use the tags option to filter the annotations by tags. You can add multiple tags in order to refine the list.
Use the tags option to filter the annotations by tags. You can add multiple tags in order to refine the list.
> **Note:** Optionally, leave the tag list empty and filter on the fly by selecting tags that are listed as part of the results on the panel itself.
@@ -40,11 +40,11 @@ Use the limit option to limit the number of results returned.
## Display
These options control additional meta-data included in the annotations panel display.
These options control additional meta-data included in the annotations panel display.
### Show user
Use this option to show or hide which user created the annotation.
Use this option to show or hide which user created the annotation.
### Show time
@@ -52,7 +52,7 @@ Use this option to show or hide the time the annotation creation time.
### Show Tags
Use this option to show or hide the tags associated with an annotation. *NB*: You can use the tags to live-filter the annotation list on the panel itself.
Use this option to show or hide the tags associated with an annotation. _NB_: You can use the tags to live-filter the annotation list on the panel itself.
## Link behavior
@@ -60,12 +60,12 @@ Use this option to show or hide the tags associated with an annotation. *NB*: Yo
Use this option to chose how to view the annotated data. It has the following options.
* Panel - This option will take you directly to a full-screen view of the panel with the corresponding annotation
* Dashboard - This option will focus the annotation in the context of a complete dashboard
- Panel - This option will take you directly to a full-screen view of the panel with the corresponding annotation
- Dashboard - This option will focus the annotation in the context of a complete dashboard
### Time before
Use this option to set the time range before the annotation. Use duration string values like "1h" = 1 hour, "10m" = 10 minutes, etc.
Use this option to set the time range before the annotation. Use duration string values like "1h" = 1 hour, "10m" = 10 minutes, etc.
### Time after
docs/sources/panels/visualizations/bar-chart.md
+4 -3
View File
@@ -10,6 +10,7 @@ weight = 170
This panel visualization allows you to graph categorical data.
{{< figure src="/static/img/docs/bar-chart-panel/barchart_small_example.png" max-width="1000px" caption="Bar chart" >}}
## Supported data formats
Only one data frame is supported and it needs to have at least one string field that will be used as the category for an X or Y axis and one or more numerical fields.
@@ -25,8 +26,8 @@ If you have more than one numerical field the panel will show grouped bars.
### Visualizing time series or multiple result sets
If you have multiple time series or tables you first need to join them using a join or reduce transform. For example if you
have multiple time series and you want to compare their last and max value add the **Reduce** transform and specify **Max** and **Last** as options under **Calculations**.
If you have multiple time series or tables you first need to join them using a join or reduce transform. For example if you
have multiple time series and you want to compare their last and max value add the **Reduce** transform and specify **Max** and **Last** as options under **Calculations**.
{{< figure src="/static/img/docs/bar-chart-panel/bar-chart-time-series-v8-0.png" max-width="1025px" caption="Bar chart time series example" >}}
@@ -46,7 +47,7 @@ This controls whether values are shown on top or to the left of bars.
- **Auto** Values will be shown if there is space
- **Always** Always show values.
- **Never** Never show values.
- **Never** Never show values.
### Group width
docs/sources/panels/visualizations/bar-gauge-panel.md
+1 -1
View File
@@ -21,7 +21,7 @@ Use the following options to refine how your visualization displays the value:
### Show
Choose how Grafana displays your data.
#### Calculate
Show a calculated value based on all rows.
docs/sources/panels/visualizations/dashboard-list-panel.md
+1 -1
View File
@@ -29,6 +29,6 @@ These options only apply if the **Search** option is selected.
- **Query -** Enter the query you want to search by. Queries are case-insensitive, and partial values are accepted.
- **Folder -** Select the dashboard folders that you want to display.
- **Tags -** Here is where you enter your tags you want to search by. Note that existing tags will not appear as you type, and they *are* case sensitive.
- **Tags -** Here is where you enter your tags you want to search by. Note that existing tags will not appear as you type, and they _are_ case sensitive.
> **Note:** When multiple tags and strings appear, the dashboard list displays those matching _all_ conditions.
docs/sources/panels/visualizations/gauge-panel.md
+2 -2
View File
@@ -19,7 +19,7 @@ Use the following options to refine how your visualization displays the value:
### Show
Choose how Grafana displays your data.
#### Calculate
Show a calculated value based on all rows.
@@ -46,4 +46,4 @@ Adjust how the gauge is displayed.
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.
- **Value -** Enter a numeric value for the gauge value size.
docs/sources/panels/visualizations/geomap.md
+7 -6
View File
@@ -24,7 +24,7 @@ You can configure the default base map using config files with Grafana’s provi
Use the JSON configuration option `default_baselayer_config` to define the default base map. There are currently four base map options to choose from: `carto`, `esri-xyz`, `osm-standard`, `xyz`. Here are some provisioning examples for each base map option.
- **carto** loads the CartoDB tile server. You can choose from `auto`, `dark`, and `light` theme for the base map and can be set as shown below. The `showLabels` tag determines whether or not Grafana shows the Country details on top of the map. Here is an example:
- **carto** loads the CartoDB tile server. You can choose from `auto`, `dark`, and `light` theme for the base map and can be set as shown below. The `showLabels` tag determines whether or not Grafana shows the Country details on top of the map. Here is an example:
```ini
geomap_default_baselayer = `{
@@ -48,7 +48,7 @@ geomap_default_baselayer = `{
```
```ini
geomap_default_baselayer = `{
geomap_default_baselayer = `{
"type": "esri-xyz",
"config": {
"server": "custom",
@@ -67,7 +67,7 @@ default_baselayer_config = `{
}`
```
- **xyz** loads a custom tile server defined by the user. Set a valid tile server `url`, with {z}/{x}/{y} for this option in order to properly load a default base map. Here is an example:
- **xyz** loads a custom tile server defined by the user. Set a valid tile server `url`, with {z}/{x}/{y} for this option in order to properly load a default base map. Here is an example:
```ini
default_baselayer_config = `{
@@ -86,6 +86,7 @@ default_baselayer_config = `{
The data layer in the Geomap plugin determines how you visualize geospatial data on top of the base map.
### Location
The Geomap panel needs a source of geographical data. This data comes from a database query, and there are four mapping options for your data.
- **Auto** automatically searches for location data. Use this option when your query is based on one of the following names for data fields.
@@ -107,7 +108,7 @@ The markers layer allows you to display data points as different marker shapes s
- **Marker Color** configures the color of the marker. The default `Fixed size` keeps all points a single color. There is an alternate option to have multiple colors depending on the data point values and the threshold set at the `Thresholds` section.
- **Marker Size** configures the size of the marker. Default is `Fixed size`, making all marker size the same regardless of the data points. However, there is also an option to scale the circles to the corresponding data points. `Min` and `Max` marker size has to be set such that the Marker layer can scale within these range.
- **Marker Shape** provides you with the flexibility to visualize the data points differently.
- **Marker Shape** provides you with the flexibility to visualize the data points differently.
- Circle
- Square
- Triangle
@@ -118,7 +119,7 @@ The markers layer allows you to display data points as different marker shapes s
### Heatmap layer
The heatmap layer clusters various data points to visualize locations with different densities.
The heatmap layer clusters various data points to visualize locations with different densities.
To add a heatmap layer:
Click on the drop down menu under Data Layer and choose `Heatmap`.
@@ -131,4 +132,4 @@ Similar to `Markers`, you are prompted with various options to determine which d
- **Weight values** configures the intensity of the heatmap clusters. `Fixed value` keeps a constant weight value throughout all data points. This value should be in the range of 0~1. Similar to Markers, there is an alternate option in the drop down to automatically scale the weight values depending on data values.
- **Radius** configures the size of the heatmap clusters.
- **Blur** configures the amount of blur on each cluster.
- **Blur** configures the amount of blur on each cluster.
docs/sources/panels/visualizations/graph-panel.md
+28 -24
View File
@@ -41,7 +41,7 @@ Use these settings to refine your visualization.
- **Null value -** How null values are displayed. _This is a very important setting._ See note below.
- **connected -** If there is a gap in the series, meaning a null value or values, then the line will skip the gap and connect to the next non-null value.
- **null -** (default) If there is a gap in the series, meaning a null value, then the line in the graph will be broken and show the gap.
- **null as zero -** If there is a gap in the series, meaning a null value, then it will be displayed as a zero value in the graph panel.
- **null as zero -** If there is a gap in the series, meaning a null value, then it will be displayed as a zero value in the graph panel.
> **Note:** If you are monitoring a server's CPU load and the load reaches 100%, then the server will lock up and the agent sending statistics will not be able to collect the load statistic. This leads to a gap in the metrics and having the default as _null_ means Grafana will show the gaps and indicate that something is wrong. If this is set to _connected_, then it would be easy to miss this signal.
@@ -68,30 +68,31 @@ You can add multiple series overrides.
1. Click **Add series override**.
1. In **Alias or regex** Type or select a series. Click in the field to see a list of available series.
**Example:** `/Network.*/` would match two series named `Network out` and `Network in`.
**Example:** `/Network.*/` would match two series named `Network out` and `Network in`.
1. Click **+** and then select a style to apply to the series. You can add multiple styles to each entry.
- **Bars -** Show series as a bar graph.
- **Lines -** Show series as line graph.
- **Line fill -** Show line graph with area fill.
- **Fill gradient -** Area fill gradient amount.
- **Line width -** Set line width.
- **Null point mode -** Option to ignore null values or replace with zero. Important if you want to ignore gaps in your data.
- **Fill below to -** Fill area between two series.
- **Staircase line -** Show series as a staircase line.
- **Dashes -** Show line with dashes.
- **Hidden Series -** Hide the series.
- **Dash Length -** Dashed line length.
- **Dash Space -** Dashed line spacing.
- **Points -** Show series as separate points.
- **Point Radius -** Radius for point rendering.
- **Stack -** Set stack group for series.
- **Color -** Set series color.
- **Y-axis -** Set series y-axis.
- **Z-index -** Set series z-index (rendering order). Important when overlaying different styles (bar charts, area charts).
- **Transform -** Transform value to negative to render below the y-axis.
- **Legend -** Control if a series is shown in legend.
- **Hide in tooltip -** Control if a series is shown in graph tooltip.
- **Bars -** Show series as a bar graph.
- **Lines -** Show series as line graph.
- **Line fill -** Show line graph with area fill.
- **Fill gradient -** Area fill gradient amount.
- **Line width -** Set line width.
- **Null point mode -** Option to ignore null values or replace with zero. Important if you want to ignore gaps in your data.
- **Fill below to -** Fill area between two series.
- **Staircase line -** Show series as a staircase line.
- **Dashes -** Show line with dashes.
- **Hidden Series -** Hide the series.
- **Dash Length -** Dashed line length.
- **Dash Space -** Dashed line spacing.
- **Points -** Show series as separate points.
- **Point Radius -** Radius for point rendering.
- **Stack -** Set stack group for series.
- **Color -** Set series color.
- **Y-axis -** Set series y-axis.
- **Z-index -** Set series z-index (rendering order). Important when overlaying different styles (bar charts, area charts).
- **Transform -** Transform value to negative to render below the y-axis.
- **Legend -** Control if a series is shown in legend.
- **Hide in tooltip -** Control if a series is shown in graph tooltip.
## Axes
@@ -110,6 +111,7 @@ Options are identical for both Y-axes.
- **Label -** The Y axis label. (default “")
### Y-Axes
- **Align -** Select to align left and right Y-axes by value. (default unchecked/false)
- **Level -** Available when **Align** is selected. Value to use for alignment of left and right Y-axes, starting from Y=0. (default 0)
@@ -117,12 +119,14 @@ Options are identical for both Y-axes.
- **Show -** Click to show or hide the axis.
- **Mode -** The display mode completely changes the visualization of the graph panel. It's like three panels in one. The main mode is the time series mode with time on the X-axis. The other two modes are a basic bar chart mode with series on the X-axis instead of time and a histogram mode.
- **Time -** (default) The X-axis represents time and that the data is grouped by time (for example, by hour, or by minute).
- **Series -** The data is grouped by series and not by time. The Y-axis still represents the value.
- **Value -** The aggregation type to use for the values. The default is total (summing the values together).
- **Value -** The aggregation type to use for the values. The default is total (summing the values together).
- **Histogram -** Converts the graph into a histogram. A histogram is a kind of bar chart that groups numbers into ranges, often called buckets or bins. Taller bars show that more data falls in that range.
For more information about histograms, refer to [Introduction to histograms and heatmaps]({{< relref "../../basics/intro-histograms.md" >}}).
- **Buckets -** The number of buckets to group the values by. If left empty, then Grafana tries to calculate a suitable number of buckets.
- **X-Min -** Filters out values from the histogram that are under this minimum limit.
- **X-Max -** Filters out values that are greater than this maximum limit.
docs/sources/panels/visualizations/heatmap.md
+1
View File
@@ -50,6 +50,7 @@ The Bucket count and size options are used by Grafana to calculate how big each
#### Data format
Choose an option in the **Format** list.
- **Time series -** Grafana does the bucketing by going through all time series values. The bucket sizes and intervals are set in the Buckets options.
- **Time series buckets -** Each time series already represents a Y-Axis bucket. The time series name (alias) needs to be a numeric value representing the upper or lower interval for the bucket. Grafana does no bucketing, so the bucket size options are hidden.
docs/sources/panels/visualizations/node-graph.md
+27 -27
View File
@@ -10,7 +10,7 @@ weight = 850
The _Node graph_ can visualize directed graphs or networks. It uses a directed force layout to effectively position the nodes, so it can display complex infrastructure maps, hierarchies, or execution diagrams.
![Node graph panel](/static/img/docs/node-graph/node-graph-8-0.png "Node graph")
![Node graph panel](/static/img/docs/node-graph/node-graph-8-0.png 'Node graph')
## Data requirements
@@ -31,7 +31,7 @@ Usually, nodes show two statistical values inside the node and two identifiers j
For example, you can have the percentage of errors represented by a red portion of the circle. Additional details can be displayed in a context menu which is displayed when you click on the node. There also can be additional links in the context menu that can target either other parts of Grafana or any external link.
![Node graph navigation](/static/img/docs/node-graph/node-graph-navigation-7-4.gif "Node graph navigation")
![Node graph navigation](/static/img/docs/node-graph/node-graph-navigation-7-4.gif 'Node graph navigation')
### Edges
@@ -55,21 +55,21 @@ Use the buttons in the upper left corner or use the mouse wheel, touchpad scroll
The number of nodes shown at a given time is limited to maintain a reasonable visualization performance. Nodes that are not currently visible are hidden behind clickable markers that show an approximate number of hidden nodes that are connected by a particular edge. You can click on the marker to expand the graph around that node.
![Node graph exploration](/static/img/docs/node-graph/node-graph-exploration-8-0.png "Node graph exploration")
![Node graph exploration](/static/img/docs/node-graph/node-graph-exploration-8-0.png 'Node graph exploration')
### Grid view
You can switch to the grid view to have a better overview of the most interesting nodes in the graph. Grid view shows nodes in a grid without edges and can be sorted by stats shown inside the node or by stats represented by the a colored border of the nodes.
![Node graph grid](/static/img/docs/node-graph/node-graph-grid-8-0.png "Node graph grid")
![Node graph grid](/static/img/docs/node-graph/node-graph-grid-8-0.png 'Node graph grid')
To sort the nodes, click on the stats inside the legend. The marker next to the stat name shows which stat is currently used for sorting and sorting direction.
![Node graph legend](/static/img/docs/node-graph/node-graph-legend-8-0.png "Node graph legend")
![Node graph legend](/static/img/docs/node-graph/node-graph-legend-8-0.png 'Node graph legend')
Click on the node and select "Show in Graph layout" option to switch back to graph layout and focus on the selected node, to show it in context of the full graph.
![Node graph grid to default](/static/img/docs/node-graph/node-graph-grid-to-default-8-0.png "Node graph grid to default")
![Node graph grid to default](/static/img/docs/node-graph/node-graph-grid-to-default-8-0.png 'Node graph grid to default')
## Data API
@@ -81,35 +81,35 @@ Data source needs to return two data frames, one for nodes and one for edges, an
Required fields:
| Field name | Type | Description |
|------------|---------|-------------|
| id | string | Unique identifier of the node. This ID is referenced by edge in it's source and target field. |
| Field name | Type | Description |
| ---------- | ------ | --------------------------------------------------------------------------------------------- |
| id | string | Unique identifier of the node. This ID is referenced by edge in it's source and target field. |
Optional fields:
| Field name | Type | Description |
|------------|---------|-------------|
| title | string | Name of the node visible in just under the node. |
| subTitle | string | Additional, name, type or other identifier that will be shown right under the title. |
| mainStat | string/number | First stat shown inside the node itself. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown. |
| secondaryStat | string/number | Same as mainStat but shown right under it inside the node. |
| arc__* | number | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`. |
| detail__* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label. |
| Field name | Type | Description |
| ------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title | string | Name of the node visible in just under the node. |
| subTitle | string | Additional, name, type or other identifier that will be shown right under the title. |
| mainStat | string/number | First stat shown inside the node itself. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown. |
| secondaryStat | string/number | Same as mainStat but shown right under it inside the node. |
| arc\_\_\* | number | Any field prefixed with `arc__` will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using `config.color.fixedColor`. |
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the node. Use `config.displayName` for more human readable label. |
### Edge parameters
Required fields:
| Field name | Type | Description |
|------------|---------|-------------|
| id | string | Unique identifier of the edge. |
| source | string | Id of the source node. |
| target | string | Id of the target. |
| Field name | Type | Description |
| ---------- | ------ | ------------------------------ |
| id | string | Unique identifier of the edge. |
| source | string | Id of the source node. |
| target | string | Id of the target. |
Optional fields:
| Field name | Type | Description |
|------------|---------|-------------|
| mainStat | string/number | First stat shown in the overlay when hovering over the edge. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown |
| secondaryStat | string/number | Same as mainStat but shown right under it. |
| detail__* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for more human readable label. |
| Field name | Type | Description |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| mainStat | string/number | First stat shown in the overlay when hovering over the edge. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown |
| secondaryStat | string/number | Same as mainStat but shown right under it. |
| detail\_\_\* | string/number | Any field prefixed with `detail__` will be shown in the header of context menu when clicked on the edge. Use `config.displayName` for more human readable label. |
docs/sources/panels/visualizations/stat-panel.md
+1 -1
View File
@@ -36,7 +36,7 @@ Use the following options to refine how your visualization displays the value:
### Show
Choose how Grafana displays your data.
#### Calculate
Show a calculated value based on all rows.
docs/sources/panels/visualizations/status-history.md
+3 -3
View File
@@ -7,13 +7,13 @@ weight = 900
# Status history
The Status history visualization shows periodic states over time. Each field or series is rendered as a horizontal row. Boxes are rendered and centered around each value.
The Status history visualization shows periodic states over time. Each field or series is rendered as a horizontal row. Boxes are rendered and centered around each value.
{{< figure src="/static/img/docs/status-history-panel/status-history-example-v8-0.png" max-width="1025px" caption="Status history example" >}}
## Supported data
## Supported data
Status history visualization works with string, boolean and numerical fields or time series. A time field is required. You can use value mappings to color strings or assign text values to numerical ranges.
Status history visualization works with string, boolean and numerical fields or time series. A time field is required. You can use value mappings to color strings or assign text values to numerical ranges.
## Display options
docs/sources/panels/visualizations/table/_index.md
+1 -1
View File
@@ -19,7 +19,7 @@ Annotations are not currently supported in the new table panel. This might be ad
Click a column title to change the sort order from default to descending to ascending. Each time you click, the sort order changes to the next option in the cycle. You can only sort by one column at a time.
![Sort descending](/static/img/docs/tables/sort-descending.png "Sort descending")
![Sort descending](/static/img/docs/tables/sort-descending.png 'Sort descending')
## Table options
docs/sources/panels/visualizations/table/filter-table-columns.md
+1 -1
View File
@@ -34,4 +34,4 @@ Columns with filters applied have a blue funnel displayed next to the title.
{{< figure src="/static/img/docs/tables/filtered-column.png" max-width="500px" caption="Filtered column" class="docs-image--no-shadow" >}}
To remove the filter, click the blue funnel icon and then click **Clear filter**.
To remove the filter, click the blue funnel icon and then click **Clear filter**.
docs/sources/panels/visualizations/time-series/_index.md
+1 -1
View File
@@ -10,7 +10,7 @@ weight = 1200
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.
> **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.
## Common time series options
docs/sources/panels/visualizations/time-series/annotate-time-series.md
+2 -9
View File
@@ -17,13 +17,13 @@ This section explains how to create annotations in the Time series panel. To rea
![Add annotation popover](/static/img/docs/time-series-panel/time-series-annotations-add-annotation.png)
1. Click save.
Alternatively, to add an annotation, Ctrl/Cmd+Click on the Time series panel and the Add annotation popover will appear
Alternatively, to add an annotation, Ctrl/Cmd+Click on the Time series panel and the Add annotation popover will appear
## Add region annotation
1. In the dashboard Ctrl/Cmd+click and drag on the Time series panel.
![Add annotation popover](/static/img/docs/time-series-panel/time-series-annotations-add-region-annotation.gif)
1. Add an annotation description and tags(optional).
1. Add an annotation description and tags(optional).
1. Click save.
## Edit annotation
@@ -39,10 +39,3 @@ Alternatively, to add an annotation, Ctrl/Cmd+Click on the Time series panel and
1. In the dashboard hover over an annotation indicator on the Time series panel.
![Add annotation popover](/static/img/docs/time-series-panel/time-series-annotations-edit-annotation.gif)
1. Click on the trash icon in the annotation tooltip.
docs/sources/panels/visualizations/time-series/graph-color-scheme.md
+11 -11
View File
@@ -6,31 +6,31 @@ weight = 400
{{< figure src="/static/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" class="pull-right" >}}
# Graph and color schemes
# Graph and color schemes
Under [Standard options]({{< relref "../../standard-options.md" >}}) you find the [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. This option controls series are assigned their color.
Under [Standard options]({{< relref "../../standard-options.md" >}}) you find the [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. This option controls series are assigned their color.
## Classic palette
## Classic palette
The most common setup is to use the **Classic palette** for graphs. This scheme will automatically assign a color for each field or series based on it's order. So if the order of a field change in your query the color will also change. You can manually configure a color for a specific field using an override rule.
The most common setup is to use the **Classic palette** for graphs. This scheme will automatically assign a color for each field or series based on it's order. So if the order of a field change in your query the color will also change. You can manually configure a color for a specific field using an override rule.
## Single color
Use this mode to set a specific color. You can also click the colored line icon next to each series in the Legend to open the color picker. This will automatically create new override that sets the color scheme to single color and the selected color.
Use this mode to set a specific color. You can also click the colored line icon next to each series in the Legend to open the color picker. This will automatically create new override that sets the color scheme to single color and the selected color.
## By value color schemes
## By value color schemes
> **Note:** Starting in v8.1 the Time series panel now supports by value color schemes like **From thresholds** of the gradient color schemes.
> **Note:** Starting in v8.1 the Time series panel now supports by value color schemes like **From thresholds** of the gradient color schemes.
If you select a by value color scheme like **From thresholds (by value)** or **Green-Yellow-Red (by value)** another option named **Color series by** will show up. This option control what value (Last, Min, Max) to use to assign the series its color.
If you select a by value color scheme like **From thresholds (by value)** or **Green-Yellow-Red (by value)** another option named **Color series by** will show up. This option control what value (Last, Min, Max) to use to assign the series its color.
## Scheme gradient mode
The **Gradient mode** option located under the **Graph styles** has a mode named **Scheme**. When this mode is enabled the whole line or bar gets a gradient color defined from the selected **Color scheme**.
The **Gradient mode** option located under the **Graph styles** has a mode named **Scheme**. When this mode is enabled the whole line or bar gets a gradient color defined from the selected **Color scheme**.
### From thresholds
### From thresholds
If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme** then the line or bar color will change as they cross the thresholds defined.
If the **Color scheme** is set to **From thresholds (by value)** and **Gradient mode** is set to **Scheme** then the line or bar color will change as they cross the thresholds defined.
{{< figure src="/static/img/docs/time-series-panel/gradient_mode_scheme_thresholds_line.png" max-width="1200px" caption="Colors scheme: From thresholds" >}}
docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md
+1 -1
View File
@@ -96,7 +96,7 @@ Gradient color is generated based on the hue of the line color.
![Gradient mode hue example](/static/img/docs/time-series-panel/bar-graph-gradient-hue-7-4.png)
#### Scheme
#### Scheme
In this mode the whole bar will use a color gradient defined by your [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md
+3 -3
View File
@@ -104,7 +104,7 @@ Gradient color is generated based on the hue of the line color.
![Gradient mode hue example](/static/img/docs/time-series-panel/line-graph-gradient-hue-7-4.png)
#### Scheme
#### Scheme
In this mode the whole line will use a color gradient defined by your [Color scheme]({{< relref "../../standard-options.md#color-scheme" >}}) option. There is more information on this option in [Graph and color scheme]({{< relref "./graph-color-scheme.md" >}}).
@@ -152,7 +152,7 @@ Dot spacing set to 0, 30:
### Connect null values
Choose how null values (gaps in the data) are displayed on the graph. Null values can be connected to form a continuous line or, optionally, set a threshold above which gaps in the data should no longer be connected.
Choose how null values (gaps in the data) are displayed on the graph. Null values can be connected to form a continuous line or, optionally, set a threshold above which gaps in the data should no longer be connected.
![Image name](/static/img/docs/time-series-panel/connect-null-values-8-0.png)
@@ -166,7 +166,7 @@ Time series data points with gaps in the the data are always connected.
#### Threshold
A threshold can be set above which gaps in the data should no longer be connected. This can be useful when the connected gaps in the data are of a known size and/or within a known range and gaps outside this range should no longer be connected.
A threshold can be set above which gaps in the data should no longer be connected. This can be useful when the connected gaps in the data are of a known size and/or within a known range and gaps outside this range should no longer be connected.
![Image name](/static/img/docs/time-series-panel/connect-null-values-8-0.png)