Defining-Dashboard-Components

Last Update : 07 August, 2023 | Published : 24 April, 2023 | 2 Min Read

Let’s an example of what that library might look like

Define the library namespace

local mydashboard = {};

Define a function for creating a new dashboard

mydashboard.dashboard = (title, panels) => {
  {
    title: title,
    panels: panels,
  }
};

Define a function for creating a new row

mydashboard.row = (panels) => {
  {
    panels: panels,
  }
};

Define a function for creating a new panel

mydashboard.panel = (title, datasource, charttype, xaxis, yaxis) => {
  {
    title: title,
    datasource: datasource,
    charttype: charttype,
    xaxis: xaxis,
    yaxis: yaxis,
  }
};

Define some example data sources

local datasources = {
  data1: "http://myapp/data1",
  data2: "http://myapp/data2",
};

Define an example dashboard using the library functions

local mydashboardconfig = mydashboard.dashboard("My Dashboard", [
  mydashboard.row([
    mydashboard.panel("Panel 1", datasources.data1, "bar", "x", "y"),
    mydashboard.panel("Panel 2", datasources.data2, "line", "x", "y"),
  ]),
]);

Print the resulting JSON configuration

std.manifestJsonnet(mydashboardconfig)

In this example, we define a mydashboard library namespace that contains functions for creating a dashboard, row, and panel. We also define an example set of data sources and use the library functions to create a dashboard configuration with two panels, one displaying a bar chart and the other displaying a line chart.

To use this library in your application, you can load the library into your Jsonnet code and call the library functions to generate the appropriate JSON configuration for your dashboard. You can also extend the library with additional functions and objects to support more advanced dashboard features, such as custom styling, event handlers, and user interactions.

Looking for Cloud-Native Implementation?

Finding the right talent is pain. More so, keeping up with concepts, culture, technology and tools. We all have been there. Our AI-based automated solutions helps eliminate these issues, making your teams lives easy.