root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 142 Packages Projects Releases Wiki Activity

[release-11.6.1] Docs: text visualization refactor (#103121) 

Docs: text visualization refactor (#102939)

* Added Config options section, bumped heading levels, added missing options, and restructured Text options section

* Moved variables content

* Replaced screenshot

* Moved sentence

* Used previous wording

* test commit

* Revert test commit

* Ran prettier

(cherry picked from commit 608a2a7535)
This commit is contained in:
Isabel Matwawana 2025-03-31 11:19:29 -04:00 committed by GitHub
parent cbcfe0bcff
commit bff03b904d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/sources/panels-visualizations/visualizations/text/index.md
View File

@ -32,11 +32,12 @@ refs:
# Text
Text visualizations enable you to directly include text or HTML in your dashboards. This can be used to add contextual information and descriptions or embed complex HTML.
Text visualizations let you include text or HTML in your dashboards.
This can be used to add contextual information and descriptions or embed complex HTML.
For example, if you want to display important links to your dashboard, you can use a text visualization to add these links:
For example, if you want to display important links on your dashboard, you can use a text visualization to add these links:
{{< figure src="/static/img/docs/text-panel/text-panel.png" max-width="1025px" alt="A text panel showing important links" >}}
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-text-visualization-v11.6.png" max-width="750px" alt="A text panel showing important links" >}}
{{< docs/play title="Text Panel" url="https://play.grafana.org/d/adl33bxy1ih34b/" >}}
@ -46,36 +47,25 @@ Use a text visualization when you need to:
- Provide instructions or guidance on how to interpret different panels, configure settings, or take specific actions based on the displayed data.
- Announce any scheduled maintenance or downtime that might impact your dashboards.
## Panel options
## Configuration options
{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
### Panel options
{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
## Text options
### Text options
Use the following options to refine your text visualization.
### Mode
<!-- prettier-ignore-start -->
**Mode** determines how embedded content appears.
| Option | Description |
| ------ | ----------- |
| Mode | Determines how embedded content appears. Choose from:<ul><li>**Markdown** - Formats the content as [markdown](https://en.wikipedia.org/wiki/Markdown).</li><li>**HTML** - Renders the content as [sanitized](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/text/sanitize.ts) HTML. If you require more direct control over the output, you can set the [disable_sanitize_html](ref:disable_sanitize_html) flag which enables you to directly enter HTML.</li><li>**Code** - Renders content inside a read-only code editor. [Variables](ref:variables) in the content are expanded for display.</li></ul><p>To allow embedding of iframes and other websites, you need set `allow_embedding = true` in your Grafana `config.ini` or environment variables (depending on your employment).</p> |
| Language | When you choose **Code** as your text mode, select an appropriate language to apply syntax highlighting to the embedded text. |
| Show line numbers | Displays line numbers in the panel preview when you choose **Code** as your text mode. |
| Show mini map | Displays a small outline of the embedded text in the panel preview when you choose **Code** as your text mode. |
{{< admonition type="note" >}}
To allow embedding of iframes and other websites, you need set `allow_embedding = true` in your Grafana `config.ini` or environment variables (depending on your employment).
{{< /admonition >}}
### Markdown
This option formats the content as [markdown](https://en.wikipedia.org/wiki/Markdown).
### HTML
This setting renders the content as [sanitized](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/text/sanitize.ts) HTML. If you require more direct control over the output, you can set the
[disable_sanitize_html](ref:disable_sanitize_html) flag which enables you to directly enter HTML.
### Code
This setting renders content inside a read-only code editor. Select an appropriate language to apply syntax highlighting
to the embedded text.
## Variables
[Variables](ref:variables) in the content will be expanded for display.
<!-- prettier-ignore-end -->