[release-11.2.11] Docs: Document cell options by cell type (#108640)

docs/sources/panels-visualizations/visualizations/table/index.md

@@ -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,49 +233,87 @@ 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. |
+<!-- 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.
 
 ![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
+<!-- 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.
 
 ![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="<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:
+
+<!-- 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).
 
@@ -282,76 +322,56 @@ 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.
 
 ![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.
-
-#### 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.
+| 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.                                                   |
 
 ### Standard options
 

docs/sources/shared/visualizations/cell-options.md

@@ -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 -->