Custom scheme as a “heatmap” w/ dynamic labels / bars

[bw-development]

Hi!

Which tool set (Volkov’s Business Charts, ECharts, etc.) we need to use to create a custom dashboard:

• dashboard are a graphic representation of functional scheme of whole infrastructure and devices (switches, routers, firewalls): in case of infrastructure are big (with hundreds of devices, for example) displaying only a part of it (enlarged on some scale factor x3, x1,7, x10) to fit important part in a view area - may be as option;
• each device on a scheme have a several different points in which are text or graphics labels appear;
• some text labels are host names / IPs, actual and peak speed on port, total ingress/egress volumes, etc.., and linked to certain device;
• some image badge appear near device form in case of extreme (triggered) situation: “temperature” icon together with text label - in case of overheating, “overloading” icon together with dynamic text label - in case the device near of max bandwidth,…
• each device may be only in two states: “active” (drawing by dark color lines) and “inactive” (drawings by grayed or less contrast color line) based on received data from device (ordinary SNMP);
• custom pop-up appear on mouse over area of each device;
• each device may be visualized as rounded box or simplified drawings (separate SVG or GIF/JPG for each type of device);

Graphics representation of devices and overall network scheme are not far from Geo Intelligence Map for Grafana/Prometheus, so we sure this idea are not so difficult to realize, isn’t it?

Thank You for perfect web site and YouTube tutorials,- AMAZING and QUALITY WORK!

[bw-development]

UPDATE (According heatmap view)

If I understand correctly, must be 2(two) main ways to show COMPLEX schemes (ok, let them calling “heat-schemes” for better reflection the sense of it usecase):

1. DISPLAYS ONLY PART by automatically (or pre-defined in settings) zooming whole heat-scheme to place important part inside block view area.

In this case may be a huge (2-50 times more) overhead to making selections from datasourse for ALL elements in whole heat-scheme.

2. DISPLAY ONLY PART of whole heat-scheme according pre-defined settings.

In this case selections from datasourse would be made ONLY for elements that are placed inside block view area. So, no overheads and data requests only for SMALL amount of elements.

Looks reasonable?

[vitPinchuk]

@bw-development Good afternoon

Thank you for your question.

The question is quite large and interesting and is complex.

First, of course, you will need to use a dataSource to grab and transfer data to the panels.

Business Charts gives you the opportunity to work with a large library such as ApacheEcharts. This library allows you to draw a wide range of different visualizations.

To draw ApacheEcharts graphics, you need to set the correct graphic options. Please, check the examples on the Apache website and the documentation. echarts echarts option configuration

The documentation of our plugin allows you to understand how to configure and transfer options for Apache. Business Chart
Business Chart Functions
Examples

Apache has examples of the implementation of the heatmap type. chart-type-heatmap chart-type-heatmap example chart-type-heatmapexample 2

Our plugin allows you to work with the chart instance via context.panel.chart instance

It also supports imports imports

I would like to draw your attention to the fact that in such matters we can help with advice, but we do not assume the development of such a comprehensive solution

We can additionally implement a solution and a custom request at the sponsorship level or a separate request.

The second option that may suit you is using the Business Text plugin.

This plugin also allows you to accept large data and select the rendering mode.

For example, you can map your data and render each element separately or, whichever suits you best, collect data and render the layout based on it. Rendering

Adding styles to elements will help you style your elements on the panel. Styles

The panel supports importing libraries. You can find examples of using imports here: external

This panel also allows you to use JS scripts and code to add dynamics, events, and other dynamic improvements to your layout. JS code

Business Text in the content (option) section allows you to create exactly the layout you want to see, add all the necessary text labels for each device, as well as icons and colors. Additionally, you can handle cursor hovering and pop-up tooltips.

The third option is to add two more panels to your dashboard.

Business variable.

You will need to set each device as a variable.

The variables panel will allow you to switch each device. Flow

The third panel on the dashboard can display detailed information about the device you selected.

Thank you for contacting us. We are glad that you like our plugins. We are always delighted to have new sponsors.