Dynamic Text Panel 3.0.0

We're excited to announce the release of the Dynamic Text Panel 3.0.0. This major release includes the following updates:

• Added the style editor.
• Added the code syntax highlighting.
• Added an option to select optional editors for display, by default, they are hidden. Editors with modified values are always displayed.
• Removed the panel padding. You can add the padding through the style editor.
• Added compatibility with Grafana 9.3.6 and updated workflows.

Grafana Catalog

The plugin was updated in the Grafana Plugins catalog on February 21, 2023.

2 Million downloads

Dynamic Text Panel was downloaded more than two million times.

Two million plugin downloads in two years.

Community use case

We are consistently impressed by the innovative ways that the Grafana community uses the latest features of Dynamic Text Panel. One particularly fascinating use case is the creation of tabs using CSS styles, JavaScript code, and a combination of Handlebars and HTML. This functionality was previously only available with custom panels, but our plugin makes it possible to implement these tabs.

JavaScript code with CSS styles and a mix of Handlebars with HTML to display navigation tabs.

Magic (JavaScript) Trio

One of the three plugins that complete Grafana is Dynamic Text Panel. With Dynamic Text, Data Manipulation, and Business Charts Panel you can create fully functional web applications meeting your needs and expectations.

Dynamic Text, Data Manipulation, and Business Charts Panel plugins.

Select Editor to display

To make the plugin's panel easier to use, we have hidden the default Content, JavaScript code, and styles editors by default. However, if you have modified the default content or are already using JavaScript code or CSS styles, the editors will be displayed even if they are not selected.

Enable display of optional editors for default content and JavaScript code.

In most cases, you won't need to modify the default content, JavaScript code, or CSS styles. We prefer the minimalist design of displaying only one content editor, and we hope you will too.

Styles editor

Using the dedicated code editor with CSS syntax highlighting, you can create new CSS styles or alter the default ones.

Add custom styles for table cells and bold text.

Default styles

src/components/Text/Text.styles.ts

loading...

Padding and margins

To display content without padding and margins, you need to override the parent CSS style.

& {
  padding: 0;
  margin: 0;
}

Code Syntax Highlighting

Code syntax highlighting is based on the highlight.js library, which supports key programming languages.

Random Walk data displayed with the highlighting and without margins or paddings.

Styling

We included the Accessibility (A11Y) syntax highlighting style for light and dark themes. You can override it in the styles editor by copying one of the styles from the project source files.

A11Y light theme

src/styles/a11y-light.css

loading...

A11Y dark theme

src/styles/a11y-dark.css

loading...

Getting Started

You can install Dynamic Text Panel from the Grafana Plugins catalog or using the Grafana command line tool.

For the latter, please use the following command:

grafana-cli plugins install marcusolsson-dynamictext-panel

YouTube Tutorial

Dynamic Text Panel is a Grafana visualization plugin that converts plain text and table data into visually appealing, easy-to-read information cards. You can use variables, Markdown, and Handlebars to customize the look of the outputted cards.

The Dynamic Text Panel plugin allows you to construct a text visualization template from the values of a dataset returned by a data source query.

Markdown, HTML and Handlebars to transform data visualizations.

JavaScript code in the Dynamic text panel.

Release Notes

Breaking changes

The default Content and JavaScript editors are not displayed unless values are modified. To display required editors, including the new Styles, they should be selected in the list.

Features / Enhancements

• Updated the features section in the README file with a new tutorial about JavaScript code editor (#141).
• Added compatibility with Grafana 9.3.6 (#147).
• Update the CI and release workflows (#147).
• Update the README file with a tutorial about using JavaScript (#148).
• Added custom styles (#149).
• Added an option to display optional editors (#149).
• Removed the panel padding (#150).
• Added the code syntax highlighting (#151).
• Introduced the breaking changes that impact the display of optional editors (#152).

Feedback

We're looking forward to hearing from you. You can use different ways to get in touch with us.

• Ask a question, request a new feature, or report an issue at GitHub issues.
• Subscribe to our YouTube Channel and leave your comments.
• Sponsor our open-source plugins for Grafana at GitHub Sponsor.
• Support our project by starring the repository.