Skip to main content

Dynamic Text Panel 2.2.0

· 3 min read
Mikhail Volkov

We released a new version of Dynamic Text Panel 2.2.0. In this feature release

  • Added JavaScript Code Editor to add Handlebars helpers and Event handlers.
  • Finished refactoring of internal components.
  • Migrate Styles to Grafana Theme v2.
  • Added {{json @root}} and {{split String ','}} helpers.
  • Updated CSS to fit images to screen.
  • Supported Internationalization using custom helpers.

JavaScript Code​

Community asked - we delivered JavaScript Code Editor to add Handlebars helpers and Event handlers. Take a look at the documentation for more examples.

Define Custom Handlebars helper​

A custom handlebars helper can be added to replace the field's value using a pattern.

{{replace Test "Pattern" "Replaced"}}

JavaScript Code:

handlebars.registerHelper("replace", (context, pattern, replacement) =>
  context.replace(pattern, replacement)
);
How to create a replace helper to replace text in the returned data.
How to create a replace helper to replace text in the returned data.

Add Internationalization​

Grafana 9 supports Internationalization, which is not fully exposed to plugins yet. Meanwhile, we can use getLocale() method to get a value for the selected locale and show phrases from a defined dictionary.

Content:

{{translate "Hello"}}

Default Content:

{{translate "Default"}}

JavaScript Code:

const messages = {
  Hello: {
    en: "Hello",
    fr: "Salut",
    es: "Hola",
  },
  Default: {
    en: "The query didn't return any results.",
    fr: "La requête n'a renvoyé aucun résultat.",
    es: "La consulta no arrojó ningún resultado.",
  },
};

const locale = getLocale();

handlebars.registerHelper(
  "translate",
  (message) => messages[message][locale] ?? messages[message]["en"]
);

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.

Dynamic Text Plugin for Grafana.

Release Notes​

Features / Enhancements​

  • Add JSON helper to show objects and arrays (#121)
  • Update to Grafana 9.3.1 (#122)
  • Update Documentation links (#130, #131)
  • Add Split Helper (#132)
  • Refactor Text Component and Styles (#133)
  • Add JavaScript Code to add Handlebars helpers and Event handlers (#134)
  • Update default Content to {{json @root}} and Code Editor height to 200px (#134)
  • Update CSS to fit images to screen (#135)
  • Add getLocale() parameter to JavaScript Code (#137)

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.