mirror of https://github.com/grafana/grafana.git
Docs: Document cell options by cell type (#106961)
This commit is contained in:
Isabel Matwawana
GitHub
parent
16aee8047c
commit
227a33fadd
|
|
@ -59,6 +59,11 @@ refs:
|
|||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/query-transform-data/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/
|
||||
graph-styles:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/time-series/#graph-styles-options
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/#graph-styles-options
|
||||
---
|
||||
|
||||
# Table
|
||||
|
|
@ -217,11 +222,8 @@ After you activate the table footer, make selections for the following options:
|
|||
### Cell options
|
||||
|
||||
Cell options allow you to control how data is displayed in a table.
|
||||
The options are:
|
||||
|
||||
- [Cell type](#cell-type) - Control the default cell display settings.
|
||||
- [Wrap text](#wrap-text) - Wrap text in the cell that contains the longest content in your table.
|
||||
- [Cell value inspect](#cell-value-inspect) - Enables value inspection from table cells.
|
||||
The options are differ based on the cell type that you select and are outlined within the descriptions of each cell type.
|
||||
The following table provides short descriptions for each cell type and links to a longer description and the cell type options.
|
||||
|
||||
#### Cell type
|
||||
|
||||
|
|
@ -231,50 +233,88 @@ Additional configuration is available for some cell types.
|
|||
|
||||
If you want to apply a cell type to only some fields instead of all fields, you can do so using the **Cell options > Cell type** field override.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Cell type | Description |
|
||||
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Auto | Automatically displays values with sensible defaults applied. |
|
||||
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [Auto](#auto) | A basic text and number cell. |
|
||||
| [Sparkline](#sparkline) | Shows values rendered as a sparkline. |
|
||||
| [Colored text](#colored-text) | If thresholds are set, then the field text is displayed in the appropriate threshold color. |
|
||||
| [Colored background](#colored-background) | If thresholds are set, then the field background is displayed in the appropriate threshold color. |
|
||||
| [Gauge](#gauge) | Cells can be displayed as a graphical gauge, with several different presentation types. You can set the [Gauge display mode](#gauge-display-mode) and the [Value display](#value-display) options. |
|
||||
| [Colored text](#colored-text) | If thresholds, value mappings, or color schemes are set, then the cell text is displayed in the appropriate color. |
|
||||
| [Colored background](#colored-background) | If thresholds, value mappings, or color schemes are set, then the cell background is displayed in the appropriate color. |
|
||||
| [Gauge](#gauge) | Values are displayed as a horizontal bar gauge. You can set the [Gauge display mode](#gauge-display-mode) and the [Value display](#value-display) options. |
|
||||
| Data links | If you've configured data links, when the cell type is **Auto**, the cell text becomes clickable. If you change the cell type to **Data links**, the cell text reflects the titles of the configured data links. To control the application of data link text more granularly, use a **Cell option > Cell type > Data links** field override. |
|
||||
| [JSON View](#json-view) | Shows values formatted as code. |
|
||||
| [Image](#image) | If the field value is an image URL or a base64 encoded image, the table displays the image. |
|
||||
| [Image](#image) | Displays an image when the value is a URL or a base64 encoded image. |
|
||||
| [Actions](#actions) | The cell displays a button that triggers a basic, unauthenticated API call when clicked. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
##### Sparkline
|
||||
#### Auto
|
||||
|
||||
This is a basic text and number cell.
|
||||
|
||||
It has the following cell options:
|
||||
|
||||
{{< docs/shared lookup="visualizations/cell-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
#### Sparkline
|
||||
|
||||
This cell type shows values rendered as a sparkline.
|
||||
To show sparklines on data with multiple time series, use the [Time series to table transformation](ref:time-series-to-table-transformation) to process it into a format the table can show.
|
||||
|
||||
|
||||
|
||||
You can customize sparklines with many of the same options as the [time series visualization](ref:time-series-panel) including line style and width, fill opacity, gradient mode, and more.
|
||||
You can also change the color of the sparkline by updating the [color scheme](ref:color-scheme) in the **Standard options** section of the panel configuration.
|
||||
The sparkline cell type options are described in the following table.
|
||||
For more detailed information about all of the sparkline styling options (except **Hide value**), refer to the [time series graph styles documentation](ref:graph-styles).
|
||||
|
||||
##### Colored text
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| Hide value | Toggle the switch on or off to display or hide the cell value on the sparkline. |
|
||||
| Style | Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**. You can use overrides to combine multiple styles in the same graph. |
|
||||
| Line interpolation | How the graph interpolates the series line. Choose from:<ul><li>**Linear** - Points are joined by straight lines.</li><li>**Smooth** - Points are joined by curved lines that smooths transitions between points.</li><li>**Step before** - The line is displayed as steps between points. Points are rendered at the end of the step.</li><li>**Step after** - The line is displayed as steps between points. Points are rendered at the beginning of the step.</li></ul> |
|
||||
| Line width | The thickness of the series lines or the outline for bars using the **Line width** slider. |
|
||||
| Fill opacity | The series area fill color using the **Fill opacity** slider. |
|
||||
| Gradient mode | Gradient mode controls the gradient fill, which is based on the series color. Gradient appearance is influenced by the **Fill opacity** setting. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme](ref:color-scheme). Choose from:<ul><li>**None** - No gradient fill. This is the default setting.</li><li>**Opacity** - An opacity gradient where the opacity of the fill increases as y-axis values increase.</li><li>**Hue** - A subtle gradient that's based on the hue of the series color.</li></ul> |
|
||||
| Line style | Choose from:<ul><li>**Solid**</li><li>**Dash** - Select the length and gap for the line dashes. Default dash spacing is 10, 10.</li><li>**Dots** - Select the gap for the dot spacing. Default dot spacing is 0, 10.</li></ul> |
|
||||
| Connect null values | How null values, which are gaps in the data, appear on the graph. Null values can be connected to form a continuous line or set to a threshold above which gaps in the data are no longer connected. Choose from:<ul><li>**Never** - Time series data points with gaps in the data are never connected.</li><li>**Always** - Time series data points with gaps in the data are always connected.</li><li>**Threshold** - Specify a threshold above which gaps in the data are no longer connected. This can be useful when the connected gaps in the data are of a known size or within a known range, and gaps outside this range should no longer be connected.</li></ul> |
|
||||
| Show points | Whether to show data points to lines or bars. Choose from: <ul><li>**Auto** - Grafana determines a point's visibility based on the density of the data. If the density is low, then points appear.</li><li>**Always** - Show the points regardless of how dense the dataset is.</li><li>**Never** - Don't show points.</li></ul> |
|
||||
| Point size | Set the size of the points, from 1 to 40 pixels in diameter. |
|
||||
| Bar alignment | Set the position of the bar relative to a data point. |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If thresholds are set, with this cell type, the field text is displayed in the appropriate threshold color.
|
||||
#### Colored text
|
||||
|
||||
If thresholds, value mappings, or color schemes are set, the cell text is displayed in the appropriate color.
|
||||
|
||||
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
This is an experimental feature.
|
||||
{{< /admonition >}}
|
||||
The colored text cell type has the following options:
|
||||
|
||||
##### Colored background
|
||||
{{< docs/shared lookup="visualizations/cell-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
||||
If thresholds are set, with this cell type, the field background is displayed in the appropriate threshold color.
|
||||
#### Colored background
|
||||
|
||||
If thresholds, value mappings, or color schemes are set, the cell background is displayed in the appropriate color.
|
||||
|
||||
|
||||
|
||||
- **Background display mode** - Choose between **Basic** and **Gradient**.
|
||||
- **Apply to entire row** - Toggle the switch on to apply the background color that's configured for the cell to the whole row.
|
||||
You can also set background cell color by row:
|
||||
|
||||
|
||||
|
||||
##### Gauge
|
||||
The colored background cell type has the following options:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Background display mode | Choose between **Basic** and **Gradient**. |
|
||||
| Apply to entire row | Toggle the switch on to apply the background color that's configured for the cell to the whole row. |
|
||||
| Wrap text | <p>Toggle the **Wrap text** switch to wrap text in the cell that contains the longest content in your table. To wrap the text _in a specific column only_, use a **Fields with name** [field override](ref:field-override), select the **Cell options > Cell type** override property, and toggle on the **Wrap text** switch.</p><p>Text wrapping is in [public preview](https://grafana.com/docs/release-life-cycle/#public-preview), however, it’s available to use by default.</p> |
|
||||
| Cell value inspect | <p>Enables value inspection from table cells. When the switch is toggled on, clicking the inspect icon in a cell opens the **Inspect value** drawer which contains two tabs: **Plain text** and **Code editor**.</p><p>Grafana attempts to automatically detect the type of data in the cell and opens the drawer with the associated tab showing. However, you can switch back and forth between tabs.</p> |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<!-- The wrap text and cell value inspect descriptions above should be copied from docs/sources/shared/visualizations/cell-options.md -->
|
||||
|
||||
#### Gauge
|
||||
|
||||
With this cell type, cells can be displayed as a graphical gauge, with several different presentation types controlled by the [gauge display mode](#gauge-display-mode) and the [value display](#value-display).
|
||||
|
||||
|
|
@ -283,53 +323,58 @@ The maximum and minimum values of the gauges are configured automatically from t
|
|||
If you don't want the max/min values to be pulled from the whole dataset, you can configure them for each column using [field overrides](#field-overrides).
|
||||
{{< /admonition >}}
|
||||
|
||||
###### Gauge display mode
|
||||
##### Gauge display mode
|
||||
|
||||
You can set three gauge display modes.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Basic | Shows a simple gauge with the threshold levels defining the color of gauge. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-gauge-mode-basic-v11.3.png" alt="Table cell with basic gauge mode" >}} |
|
||||
| Gradient | The threshold levels define a gradient. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-gauge-mode-gradient-v11.3.png" alt="Table cell with gradient gauge mode" >}} |
|
||||
| Retro LCD | The gauge is split up in small cells that are lit or unlit. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-gauge-mode-retro-v11.3.png" alt="Table cell with retro LCD gauge mode" >}} |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
###### Value display
|
||||
##### Value display
|
||||
|
||||
Labels displayed alongside of the gauges can be set to be colored by value, match the theme text color, or be hidden.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Value color | Labels are colored by value. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-labels-value-color-v11.3.png" alt="Table with labels in value color" >}} |
|
||||
| Text color | Labels match the theme text color. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-labels-text-color-v11.3.png" alt="Table with labels in theme color" >}} |
|
||||
| Hidden | Labels are hidden. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-labels-hidden-v11.3.png" alt="Table with labels hidden" >}} |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
##### JSON View
|
||||
#### JSON View
|
||||
|
||||
This cell type shows values formatted as code.
|
||||
If a value is an object the JSON view allowing browsing the JSON object will appear on hover.
|
||||
|
||||
{{< figure src="/static/img/docs/tables/json-view.png" max-width="350px" alt="JSON view" class="docs-image--no-shadow" >}}
|
||||
|
||||
##### Image
|
||||
For the JSON view cell type, you can set enable **Cell value inspect**.
|
||||
This enables value inspection from table cells.
|
||||
When the switch is toggled on, clicking the inspect icon in a cell opens the **Inspect value** drawer which contains two tabs: **Plain text** and **Code editor**.
|
||||
|
||||
Grafana attempts to automatically detect the type of data in the cell and opens the drawer with the associated tab showing.
|
||||
However, you can switch back and forth between tabs
|
||||
|
||||
#### Image
|
||||
|
||||
If you have a field value that is an image URL or a base64 encoded image, this cell type displays it as an image.
|
||||
|
||||
|
||||
|
||||
Set the following options:
|
||||
It has the following options:
|
||||
|
||||
- **Alt text** - Set the alternative text of an image. The text will be available for screen readers and in cases when images can't be loaded.
|
||||
- **Title text** - Set the text that's displayed when the image is hovered over with a cursor.
|
||||
| Option | Description |
|
||||
| ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Alt text | Set the alternative text of an image. The text will be available for screen readers and in cases when images can't be loaded. |
|
||||
| Title text | Set the text that's displayed when the image is hovered over with a cursor. |
|
||||
|
||||
##### Actions
|
||||
#### Actions
|
||||
|
||||
The cell displays a button that triggers a basic, unauthenticated API call when clicked.
|
||||
Configure the API call with the following options:
|
||||
|
|
@ -343,34 +388,8 @@ Configure the API call with the following options:
|
|||
| Query parameters | Enter as many **Key**, **Value** pairs as you need. |
|
||||
| Header parameters | Enter as many **Key**, **Value** pairs as you need. |
|
||||
| Payload | Enter the body of the API call. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Wrap text
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Text wrapping is in [public preview](https://grafana.com/docs/release-life-cycle/#public-preview), however, it’s available to use by default.
|
||||
We’d love hear from you about how this new feature is working. To provide feedback, you can open an issue in the [Grafana GitHub repository](https://github.com/grafana/grafana).
|
||||
{{< /admonition >}}
|
||||
|
||||
Toggle the **Wrap text** switch to wrap text in the cell that contains the longest content in your table.
|
||||
|
||||
To wrap the text _in a specific column only_, use a **Fields with name** [field override](ref:field-override), select the **Cell options > Cell type** override property, and toggle on the **Wrap text** switch.
|
||||
|
||||
This option is available for the following cell types: **Auto**, **Colored text**, and **Colored background**.
|
||||
|
||||
#### Cell value inspect
|
||||
|
||||
Enables value inspection from table cells. When the **Cell inspect value** switch is toggled on, clicking the inspect icon in a cell opens the **Inspect value** drawer.
|
||||
|
||||
The **Inspect value** drawer has two tabs, **Plain text** and **Code editor**.
|
||||
Grafana attempts to automatically detect the type of data in the cell and opens the drawer with the associated tab showing.
|
||||
However, you can switch back and forth between tabs.
|
||||
|
||||
This option is available for the following cell types: **Auto**, **Colored text**, **Colored background**, and **JSON View**.
|
||||
|
||||
If you want to apply this setting to only some fields instead of all fields, you can do so using the **Cell options > Cell value inspect** field override.
|
||||
|
||||
### Standard options
|
||||
|
||||
{{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Cell options
|
||||
---
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Wrap text | <p>Toggle the **Wrap text** switch to wrap text in the cell that contains the longest content in your table. To wrap the text _in a specific column only_, use a **Fields with name** [field override](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/), select the **Cell options > Cell type** override property, and toggle on the **Wrap text** switch.</p><p>Text wrapping is in [public preview](https://grafana.com/docs/release-life-cycle/#public-preview), however, it’s available to use by default.</p> |
|
||||
| Cell value inspect | <p>Enables value inspection from table cells. When the switch is toggled on, clicking the inspect icon in a cell opens the **Inspect value** drawer which contains two tabs: **Plain text** and **Code editor**.</p><p>Grafana attempts to automatically detect the type of data in the cell and opens the drawer with the associated tab showing. However, you can switch back and forth between tabs.</p> |
|
||||
<!-- prettier-ignore-end -->
|
||||
Loading…
Reference in New Issue