diff --git a/docs/sources/panels-visualizations/visualizations/table/index.md b/docs/sources/panels-visualizations/visualizations/table/index.md index eb47c849ca1..9a7f97b13e4 100644 --- a/docs/sources/panels-visualizations/visualizations/table/index.md +++ b/docs/sources/panels-visualizations/visualizations/table/index.md @@ -59,6 +59,11 @@ refs: destination: /docs/grafana//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//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. -| Cell type | Description | -| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Auto | Automatically displays values with sensible defaults applied. | -| [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. | + +| Cell type | Description | +| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | +| [Auto](#auto) | A basic text and number cell. | +| [Sparkline](#sparkline) | Shows values rendered as a sparkline. | +| [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. | -| [Actions](#actions) | The cell displays a button that triggers a basic, unauthenticated API call when clicked. | +| [JSON View](#json-view) | Shows values formatted as code. | +| [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. | + -##### 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="" >}} + +#### 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. ![Table using sparkline cell type](/media/docs/grafana/panels-visualizations/screenshot-table-as-sparkline-v11.3.png) -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 + +| 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:
  • **Linear** - Points are joined by straight lines.
  • **Smooth** - Points are joined by curved lines that smooths transitions between points.
  • **Step before** - The line is displayed as steps between points. Points are rendered at the end of the step.
  • **Step after** - The line is displayed as steps between points. Points are rendered at the beginning of the step.
| +| 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:
  • **None** - No gradient fill. This is the default setting.
  • **Opacity** - An opacity gradient where the opacity of the fill increases as y-axis values increase.
  • **Hue** - A subtle gradient that's based on the hue of the series color.
| +| Line style | Choose from:
  • **Solid**
  • **Dash** - Select the length and gap for the line dashes. Default dash spacing is 10, 10.
  • **Dots** - Select the gap for the dot spacing. Default dot spacing is 0, 10.
| +| 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:
  • **Never** - Time series data points with gaps in the data are never connected.
  • **Always** - Time series data points with gaps in the data are always connected.
  • **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.
| +| Show points | Whether to show data points to lines or bars. Choose from:
  • **Auto** - Grafana determines a point's visibility based on the density of the data. If the density is low, then points appear.
  • **Always** - Show the points regardless of how dense the dataset is.
  • **Never** - Don't show points.
| +| 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. | + -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. ![Table with colored text cell type](/media/docs/grafana/panels-visualizations/screenshot-table-colored-text-v11.3-2.png) -{{< 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="" >}} -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. ![Table with colored background cell type](/media/docs/grafana/panels-visualizations/screenshot-table-colored-bkgrnd-v11.3-2.png) -- **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: ![Table with background cell color applied to row](/media/docs/grafana/panels-visualizations/screenshot-table-colored-row-v11.3.png) -##### Gauge +The colored background cell type has the following options: + + +| 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 |

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.

Text wrapping is in [public preview](https://grafana.com/docs/release-life-cycle/#public-preview), however, it’s available to use by default.

| +| Cell value inspect |

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.

| + + + + +#### 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. - | 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" >}} | - -###### 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. - | 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" >}} | - -##### 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. ![Table with image cell type](/media/docs/grafana/panels-visualizations/screenshot-table-cell-image-v11.3.png) -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. | - -#### 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="" >}} diff --git a/docs/sources/shared/visualizations/cell-options.md b/docs/sources/shared/visualizations/cell-options.md new file mode 100644 index 00000000000..03c0e4a76dc --- /dev/null +++ b/docs/sources/shared/visualizations/cell-options.md @@ -0,0 +1,10 @@ +--- +title: Cell options +--- + + +| Option | Description | +| ------ | ----------- | +| Wrap text |

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//panels-visualizations/configure-overrides/), select the **Cell options > Cell type** override property, and toggle on the **Wrap text** switch.

Text wrapping is in [public preview](https://grafana.com/docs/release-life-cycle/#public-preview), however, it’s available to use by default.

| +| Cell value inspect |

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.

| +