Dynamic Text Panel 3.0.0

We released a new version of Dynamic Text Panel 3.0.0. This major release

• Added Styles editor.
• Added Code Syntax Highlight.
• Introduced selecting optional editors to display, which are hidden by default. Editors with updated values are always displayed.
• Removed panel padding. Padding can be added using the Styles editor.
• Updated to the latest Grafana 9.3.6 toolkit and workflows.

Grafana Catalog

The plugin was updated in Grafana Catalog on February 21, 2023.

2 Million downloads

The Dynamic Text panel was downloaded more than two million times.

Two million downloads in two years.

Community Use case

We are impressed with the everyday creations from the community using the latest features in the Dynamic Text panel for Grafana.

One of the interesting use cases is creating tabs with styles, JavaScript Code, and a mix of Handlebars with HTML. Previously it can be possible only with custom panels.

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

Magic (JavaScript) Trio

Dynamic Text is one of the three plugins that make Grafana complete. Dynamic Text, Data Manipulation and Apache ECharts are all you need to create functional real-world web applications.

Dynamic Text, Data Manipulation and Apache ECharts plugins.

Select Editor to display

To simplify panel options we decided to hide Default Content, JavaScript Code and Styles editors by default.

If you changed the value of Default Content or already using the JavaScript Code, then editors will be displayed even if not selected.

Select optional editors for Default Content and JavaScript Code to display.

In many cases, you don't need to update the Default Content or use JavaScript Code and Styles. We love the minimalistic design with only the Content editor displayed and I hope you will too.

Styles editor

You can add custom styles or override the default using the dedicated code editor with CSS syntax highlight.

Add custom styles for table cells and bold text.

Default styles

src/styles.ts

loading...

Padding and margins

To display content without padding and margins override the parent CSS style.

& {
  padding: 0;
  margin: 0;
}

Code Syntax Highlight

The code syntax highlight is based on the highlight.js library, which supports major languages.

Random Walk data displayed with highlight and no margins or paddings.

Styling

We included the Accessibility (a11y) syntax highlight 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

src/styles/a11y-light.css

loading...

a11y Dark

src/styles/a11y-dark.css

loading...

Getting Started

The Dynamic Text visualization panel can be installed from the Grafana Catalog or utilizing the Grafana command line tool.

For the latter, use the following command.

grafana-cli plugins install marcusolsson-dynamictext-panel

YouTube Tutorial

The Dynamic Text visualization panel lets you define a text template using the data from your 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 by default unless values were modified. To display required editors, including the new Styles, they should be selected in the list.

Features / Enhancements

• Update README features with new JavaScript Code Editor tutorial (#141)
• Update to Grafana 9.3.6 (#147)
• Update CI and Release workflows (#147)
• Update README to include JavaScript tutorial (#148)
• Add custom styles (#149)
• Add option to display optional editors (#149)
• Remove Panel Padding (#150)
• Add Code Syntax Highlight (#151)
• Add Breaking Changes for displaying optional editors (#152)

Feedback

We love to hear from you. There are various ways to get in touch with us.

• Ask a question, request a new feature, and file a bug with GitHub issues.
• Sponsor our open-source plugins for Grafana with GitHub Sponsor.
• Star the repository to show your support.