Dynamic Text Panel 4.0.0

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

• Requires Grafana 9 or Grafana 10.
• Added the Event Bus object into JavaScript functions.
• Added support for dashboard variables in CSS styles.
• Added compatibility with Grafana 10.0.0 and deprecated support for Grafana 8.5.

Grafana Plugins catalog

The plugin was updated in the Grafana Plugins catalog on June 28, 2023.

3 million downloads

We celebrated 2 million downloads in February. The panel's adaptability has been extremely accelerated since then.

JavaScript code, a CSS style editor, and Grafana events offer functionalities that no native or community plugin has yet to provide.

Dynamic Text Panel was downloaded more than three million times.

Dashboard variables

Dynamic Text Panel provides helpers to support variables. You can also use variables in JavaScript code and CSS styles.

JavaScript code

Use the replaceVariables function to replace dashboard variables in the JavaScript code.

const bonjour = replaceVariables("${variable}");
console.log(bonjour.toUpperCase())

Styles

Dashboard variables are replaced automatically in CSS styles.

Content

Returns a string array of the currently selected values for a certain variable.

{{variable "hostname"}}

<!-- result: ['server1', 'server2', 'server3']  -->

You can find more examples in our documentation.

Event Bus

Grafana uses an event bus to publish application events to notify different parts of Grafana when the user interacts with it. Dynamic Text Panel can respond to these interactions by subscribing to one or more events.

Predefined Events

A full list of events is available in our Grafana Crash Course.

Subscribe to events

To avoid memory leaks, all events must be unsubscribed.

const subscription = eventBus.subscribe({ type: 'data-hover' }, () => {
  console.log('React to Data Hover')
})

return () => {
  subscription.unsubscribe();
  console.log('Unsubscribed');
}

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 for transforming data visualizations.

JavaScript code in Dynamic Text Panel.

Release Notes

Breaking changes

• Requires Grafana 9 or Grafana 10

Features / Enhancements

• Increased the test coverage and updated the library to test React code (#177).
• Added the Event Bus object into a JavaScript function (#179).
• Migrated to Plugin Tools 1.5.2 (#183).
• Added compatibility with Grafana 10.0.0 (#166, #178, #183).
• Updated the plugin to Node.js 18 and npm (#183).
• Deprecated support for Grafana 8.5 (#183).
• Integrated E2E Cypress testing into the plugin (#184).
• Added support for variables in CSS styles editor (#185).

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.