JavaScript Code

Dynamic Text Panel supports the integration of JavaScript code snippets that can add Handlebars helpers and event handlers.

Version

Dynamic Text Panel supports JavaScript starting from version 2.2.0.

JavaScript code in Dynamic Text Panel.

Parameters

Parameter	Description
data	Data from data sources. The display of one or multiple data rows is determined by the Every Row and All Rows options respectively.
eventBus	Publish and subscribe to application events. Supported since Dynamic Text Panel 4.0.0.
getLocale()	Returns the user's locale: 'en', 'fr', 'es', and so on.
handlebars	Handlebars library.
locationService	The locationService works with the browser location and history. Supported since Dynamic Text Panel 3.1.0.
replaceVariables	The replaceVariables() function to interpolate variables. Supported since Dynamic Text Panel 3.1.0.
timeRange	Time range of the current dashboard. Supported since Dynamic Text Panel 3.1.0.
timeZone	Time zone of the current dashboard. Supported since Dynamic Text Panel 3.1.0.

Custom Handlebars helper

You can add a custom Handlebars helper to replace the field's value according to some pattern.

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

JavaScript Code

Here we register a function with the replace helper that takes three arguments:

1. context is an object that contains the data for the template.
2. pattern is the text to be searched for.
3. replacement is the text to be used to replace the pattern.

Then we call this function and pass the pattern and replacement arguments to it.

handlebars.registerHelper("replace", (context, pattern, replacement) =>
  context.replace(pattern, replacement)
);

A custom helper to replace data in the returned data.

Event Handler

To respond to a button click, you can add a custom event handler.

<button onclick="myFunc()">{{test}}</button>

JavaScript Code

This code snippet defines a function called myFunc. The function takes no arguments and returns no value. The body of the function calls the alert() function to display the text "Bonjour!" in a dialog box.

myFunc = () => {
  alert("Bonjour!");
};

Internationalization

Grafana 9 offers internationalization, which plugins do not yet have full access to.

Meanwhile, you can use the getLocale() method to get a value for the chosen locale and display terms from a defined dictionary.

Content

This code snippet uses the translate helper to translate the text "Hello" to the current language. Text translation will be performed if the translate helper is defined, otherwise the text "Hello" will be displayed.

{{translate "Hello"}}

Default content

This code snippet uses the translate helper to show the translation of a default message if the query does not return any results.

{{translate "Default"}}

JavaScript Code

docs/volkovlabs-dynamictext-panel/js/translate.js

loading...

Time Zone and Range

You can display the selected dashboard, browser's time zone, and time ranges in Grafana.

Content

<h2>Dashboard {{tz}}</h1>
<h2>Browser {{browser}}</h1>

```json
{{{json (range)}}}
```

JavaScript Code

handlebars.registerHelper('tz', () => timeZone);
handlebars.registerHelper('range', () => timeRange);
handlebars.registerHelper('browser', () => Intl.DateTimeFormat().resolvedOptions().timeZone);

Dynamic Text Panel allows displaying an updated time zone and time ranges in Grafana.

Automatic scrolling

If the table does not fit into the allocated panel area, you can add automatic scrolling using JavaScript with an adjustable interval.

Automatic scrolling of a table using Dynamic Text Panel.

Content

<table id="dataTable" width="100%">
  <tr>
    <th>Title</th>
    <th>Date</th>
    <th>Category</th>
  </tr>
  {{#each data}}
  <tr>
    <td>{{title}}</td>
    <td>{{date pubDate 'MMM, DD YYYY'}}</td>
    <td>{{category}}</td>
  </tr>
  {{/each}}
</table>

JavaScript Code

docs/volkovlabs-dynamictext-panel/js/scroll.js

loading...

Unique values

You can sort out unique values from the data object using the unique helper that was implemented by the community member goncalobsantos.

Content

<div>{{#each (unique data "hostname.keyword")}}{{this}}; {{/each}}</div>

JavaScript Code

handlebars.registerHelper("unique", (context, key) => {
  return [...new Set(context.map((item) => item[key]))];
});

Dashboard Variables

You can use the replaceVariables function to replace dashboard variables in the JavaScript code.

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