Inspired to build a simple version of data aggregation and visualization for systems and applications, we have developed a dashboard builder tool for one of our clients. A global leader in industrial automation products and services, the client provides solution-based software and technology-driven industrial engineering solution. While there are many such tools in the market, what we have built is efficient and easy to use.

Building blocks of this tool are :

1. Widgets
2. Dashboards
3. Templates

Widgets: This is the basic component of the dashboard tool. It has configurable elements like Title, Type of Chart, and other options. These widgets can be resized to fit a specific layout and moved around the dashboard to customize the display. 

Dashboards: It is a combination of one or more widgets that provide statistics of configured motors, sensors, or other components in the plant. The dashboard can be customized to suit specific requirements in terms of features, functionalities, or visualization layout.

Templates: These are the industry-standard formats used for aggregation and display of data for individual field devices or the entire plant. The Administrator of the dashboard builder can create such templates based on preferences and requirements at various levels such as an operator, plant supervisor, or the plant head.

The primary javascript plugins used for this dashboard builder tool are:

React Grid Layout (RGL)
The RGL system is used for rendering multiple widgets in the dashboard. This helps layout mapping based on breakpoints. It provides intuitive and easy-to-use layout features for dragging and resizing the widgets that enhance the efficiency and responsiveness of the entire application.

Uplot
We experimented with different types of data visualization charting tools such as Chartjs, Victoryjs, and Uplot for rendering a large number of data points. Finally, based on the best time-series data rendering performance, we selected Uplot. With more than 1 Million points to be rendered, Uplot performed intended functions very efficiently.

Plotly
Other than time-series data, we also used 3D mesh plots and indicators for building effective data statistics features in the tool. Among multiple open source libraries, we used the Plotly library. This provided an excellent set of plots that render simple, yet insightful information for detecting anomalies.

React Table
For certain widgets, we wanted more than just regular table features like sorting (client/server-side), footers, and pagination. Among various options, we chose React Table plugin for its versatile features. We have used the standard list as well as the embedded table in the widget that gives the complete solution.

React Calendar / Date Range
The Date-range option is a very common, and also an important feature for any dashboard. For our client, we introduce predefined options for the shortcuts like last-1 Hr, last-5 Hrs, last-12 Hrs, last-1 Day, last-7 Days, and so on for capturing real-time data. Also, the custom date-range option feature for viewing historical data is a crucial dashboard feature. We found the React Date Range plugin an excellent fit for the use cases.

React Filters / Select
Searchable filters are the obvious choice for long data tables or reports. In our case, however, we needed a dynamic searchable component with intuitive selecting features. The React- select plugin provided us with the exact functionality that suited our requirements. On focus, it displays default drop-down options. Also, powerful features like search functionality with async data, and the color options matched nicely with the default bootstrap theme.

Foot Note:

The Dashboard Builder Tool was developed within a short span of 2 months. The application is live in the client’s production environment, delivering delightful performance.

Utthunga cherishes innovating value-added solutions for its customers in various fields of industrial automation. For your queries and requirements write to us at [email protected].