Hello and welcome. My name is Daria Volkova, and I can bring
style to any visualization. Today's video is about these three plugins. I like to call them the Magic Trio. Let me explain. Lately, we at Volkov Labs realized that the
Magic Trio provides all the required extra functionality that does not exist in the core
Grafana and is necessary when you create functional web applications. In other words, core Grafana PLUS these three
plugins are all you need to build commercial and industrial applications. Let's go! I have Apache ECharts, Data manipulation,
and Dynamic Text plugins in my Magic Trio. All three allow the incorporation of JavaScript
into their configurations. JavaScript in the configuration is a breakthrough
for Grafana plugins. It removes the most known barriers to real-world
applications your user would love. In this example, the requirement was to show
a device-specific dashboard. So, here, I have all devices listed in a drop-down. When I change it, the other dashboard appears. Switching back, and here you go, I have my
first dashboard. The users do not know they are switching dashboards. They enjoy the appropriate analytics for the
device they selected. To make it possible, we added this hidden
panel. The users do not see it, I have it displayed since I have admin privileges. Let me open it in the 'edit' mode. It is an Apache ECharts where the only thing
needed is in this JavaScript code. I have a function here that opens another
dashboard. Do you know another way to display a specific
dashboard depending on a variable value? Please, let us know. Otherwise, feel free to use our solution. Alright, now let's review more typical JavaScript
applications in the Magic Trio. I start with the Data Manipulation plugin. This plugin manifests a unique concept. It allows a user to interact with the database
via an API server. I have it as the 'Update data' feature. The data can flow in both directions. That's why it has a symbol of a two-way street
with the motto 'beyond observability'. We have various API servers on our GitHub,
which you can use as your starter. Let me add a Data Manipulation plugin and open
it in Edit mode. You describe the interaction with your database
in 'Custom code' in the 'Initial request' section and 'Custom code'
in the 'Update request' section. Here you can request and update data in your
database. The other feature is 'dynamic forms'. That means the user interface can be dynamic. In other words, it can be created on the fly
by reading the configuration from the data source. For instance, here is the configuration using
Static Data Source. On the left side, we specify which form elements
we want. 2 strings, 1 radio and 1 text area. Then in the Initial Request JavaScript area,
I read the values into arrays and then use this code to create a form. Apache ECharts. With the Apache ECharts, you can write a JavaScript
function here to build charts following your business requirements. I have a schema for this area. It is a function that you write. It has two purposes. The first is to work with input parameters. The most commonly used parameter is 'data',
which is retrieved by your data source data in a JSON format. The complete list of all input parameters
is in our documentation. The second purpose is to describe the visualization
chart as a JavaScript object. That description goes into the setOption()
function as an input parameter. The plugin motto says 'ANY charts'. And I want to point out two in particular. An excellent example of dynamic charts is
Streaming. Streaming is the ability to display events
as they occur in real life. Or simply put, the dynamic charts get updated
when the data is updated. An example of that is in our documentation. You need to employ the Grafana Live engine
or choose a streaming Data source. We favor the WebSocket API data source. Interactive charts is when the user actions
trigger changes. For instance, here I have a button. I click on it and see a different chart displaying
the same data. Click again, and it shows the original graph. Also, a user can select a time range like
this. That changes the graphs, and the Grafana dashboard
time range also reflects the modification. And if any other panels depend on that range,
they will also get updated. The last to go over today is the Dynamic text
panel. Let me create a new panel and select it from
the drop-down list. So, Dynamic text has many areas here. This schema depicts the rendering order to
clarify how all these parts interact. 'Content' is where you describe a template
for your records using handlebars, Markdown, and HMTL. The JavaScript area is where you define helpers
and event handlers. And CSS is where you describe the style. The default styling is in our documentation. The CCS styling will only override the settings
that you specify. With all that arsenal, I hope you agree that
Dynamic Text is a pro in web style. In here, you can choose which areas to display. It helps to keep things organized—an amazing
new feature. The other new valuable feature is the code
syntax highlight. We use the highlight.js library for that. For example, when you need to display a nicely-formatted
JSON code on your panel, in the 'Content' you surround that part with a triple backtick
character. --- JavaScript makes the trio adjustable according
to any industrial or business needs. The main complaint we heard about those plugins
is that they are not 'drag and drop'. That in order to configure and work with them,
a person must have a solid developer background. It is true. It is also true there will be a learning curve. The good news is that detailed documentation
and the many articles describing a wide range of actual use cases already exist and are
collected in one place. Once the learning curve is behind, you can
enjoy the ability to implement ALL the needed features from your list. With drag-and-drop plugins, you will forever
bargain with requirements, and that deal is never in your favor. Remember to subscribe. Every notification about a new subscriber
puts a big smile on our faces. That is all for now. Thanks for watching, and see you next time.
