Skip to main content

Context Parameters

context.data​

Data from data sources. The display of one or multiple data rows from the selected data frame or from all data frames is determined by the Render template option. It can be one of three values: Every Row, All Rows, and All data.

Usage​

context.data;

Example​

const data = context.data;

context.element​

Current HTML element.

Usage​

context.element;

Example​

const element = context.element;

context.dataFrame​

Selected Data Frame for Every Row, All Rows templates.

Usage​

context.dataFrame;

Example​

const frame = context.dataFrame;

Panel​

panel.handlebars​

Handlebars library.

Usage​

context.handlebars;

Example​

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

panel.panelData​

Panel data.

Usage​

context.panelData;

Example​

const dashboardTimeZone = context.panelData.timeZone;
const dashboardTimeRange = context.panelData.timeRange;

context.handlebars.registerHelper("tz", () => dashboardTimeZone);
context.handlebars.registerHelper("range", () => dashboardTimeRange);
context.handlebars.registerHelper(
  "browser",
  () => Intl.DateTimeFormat().resolvedOptions().timeZone
);

Grafana​

grafana.eventBus​

Publish and subscribe to application events.

Usage​

context.grafana.eventBus;

Example​

const subscriber = eventBus.getStream(RefreshEvent).subscribe(() => {
  // to do
});

grafana.getLocale()​

Returns the user's locale: 'en', 'fr', 'es', and so on.

Usage​

context.grafana.getLocale();

Example​

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();

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

grafana.locationService​

The locationService works with the browser location and history.

Usage​

context.grafana.locationService;

Example​

context.grafana.locationService.reload();

const history = context.grafana.locationService.history;

grafana.replaceVariables()​

The replaceVariables() function to interpolate variables.

Usage​

context.grafana.replaceVariables();

Example​

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

grafana.timeRange​

Time range of the current dashboard.

Usage​

context.grafana.timeRange;

Example​

const timeRange = context.grafana.timeRange;
console.log(timeRange);

grafana.timeZone​

Time zone of the current dashboard.

Usage​

context.grafana.timeZone;

Example​

const timeZone = context.grafana.timeZone;
console.log(timeZone);

grafana.notifyError([header, message])​

Displays an error notification.

Usage​

context.grafana.notifyError([header, message]);

Example​

context.grafana.notifyError(["Error Title", `Show error message`]);

Arguments​

  • header string. Error title
  • message string. Error message

grafana.notifySuccess([header, message])​

Displays a success notification.

Usage​

context.grafana.notifySuccess([header, message]);

Example​

context.grafana.notifySuccess(["Success Title", `Success message`]);

Arguments​

  • header string. Success title
  • message string. Success message

grafana.theme​

Contains grafana Theme object.

Usage​

context.grafana.theme;

Example​

const theme = context.grafana.theme;
console.log(theme);

grafana.refresh()​

Function to refresh dashboard panels using application events.

Usage​

context.grafana.refresh();