[FEATURE] Dashboards Technologies Research

[ianmuchyri]

Is there an existing feature request for this?

• [X] I have searched the existing feature requests

Is your feature request related to a problem? Please describe.

No

Describe the feature you are requesting, as well as the possible use case(s) for it.

We would like to implement dashboards in our UI. This issue is for researching dashboard implementation, the technologies used, the most efficient approach, etc.

Indicate the importance of this feature to you.

• [ ] Must-have
• [X] Should-have
• [ ] Nice-to-have

Anything else?

No response

[ianmuchyri]

For the dashboard, we will need to have a grid that supports drag and dropping of widgets on the dashboard. For this functionality we can utilize gridster.js It is an opensource jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns

[ianmuchyri]

For creating charts we can use plotly.js.

[drasko]

D3S is the most famous data visualization library. We should use this one.

But I think that the important question would be - can we use Acpache Superset and integrate it in our deployment somehow? Is this an overkill, or it would make sense? How would it work with our users and policies?

[drasko]

On the quick look, apache Superset is really an overkill.

We'll have to implement our own.

For charts - I was using previously Chart JS. It has a nice look and feel, and this it will be a perfect fit for our UI.

another interesting one is Billboard JS which uses D3S in the background, which can be a plus (and also have bunch of components - like gauges).

Some references:

• https://www.atatus.com/blog/javascript-chart-libraries/
• https://github.com/zingchart/awesome-charting
• https://www.youtube.com/watch?v=myU9vgweJUA
• https://www.youtube.com/watch?v=gZDQLe6mQXA

[ianmuchyri]

Based on viewing some dashboards such as that on thingsboard, I have come up with a list of widgets that we may need going forward. This list will help us in determining which library we will use for charting. Let me know if there are more to be added, we can also always add more later

Widgets

Charts

• [x] Time series line chart
• [x] state chart
• [x] range chart
• [x] time series bar chart
• [x] pie chart
• [x] Doughnout
• [x] bars

Cards

• [x] Value card
• [x] value and chart card
• [x] progress bar
• [x] label widget

Tables

• [x] Entities tables
• [x] Alarms tables

Count widgets

• [x] Alarm count
• [x] Entity count

Analogue gauges

• [x] Speed gauge
• [x] Radial gauge
• [ ] Thermometer scale
• [x] Temperature radial gauge

Status indicators

• [ ] Signal strength
• [ ] Progress bar
• [ ] Battery level

Digital gauges

• [ ] Simple gauge
• [ ] vertical bar
• [ ] horizontal bar
• [ ] gauge

Control widgets

• [ ] switch control
• [ ] slide toggle control
• [ ] round switch
• [ ] LED indicator
• [ ] knob control

[ianmuchyri]

CHARTING

Billboard.js

These are the supported charts by billboard.js

For examples of how to implement these charts check out this page https://naver.github.io/billboard.js/demo/

Pros

• MIT license
• It supports most of the charts we need to implement in our dashboard
• Based on D3.js

Apache ECharts

This is a free and powerful charting and visualization library offering easy ways to add intuitive, interactive, and highly customizable charts to our products.

Pros

• Has a wide variety of charts
• has a lot of Github stars 57.7k
• Apache License V2
• Easy to use in javascript

Furthermore, It has a library for Golang called go-echarts where one can carry out data visualization in go. This could be worth looking into.

RECOMMENDATION

I would recommend we use Apache ECharts, and see if we can implement its go-echarts library. It has a broad range of nice charts and is used by a lot of people. Furthermore, the code looks easy to integrate into our UI.

For more insights and rankings of javascript charting libraries check out this page

[ianmuchyri]

LAYOUT

For the dashboard, we need to be able to create a layout page that enables us to place widgets on the page and be able to move the widgets around, resize the widgets, etc. Some of the libraries we can use for this are explained below:

MUURI

The main benefit of this is that it is a vanilla JavaScript layout engine. It allows us to build all kinds of layouts and make them responsive, sortable, filterable, draggable, and/or animated.

pros

• Has 10.6k stars on GitHub
• Fully customizable layout
• Drag and drop even between grids
• Autoscrolling during drag
• Nested grids
• Fast animations
• Filtering
• Sorting

Gridster

This is a jQuery plugin that allows the building of intuitive draggable layouts from elements spanning multiple columns. Allows a user to dynamically add and remove elements from the grid. The downside is that it depends on jQuery

Gridstack

This is a typescript library used to create draggable, resizable, and responsive layouts. Allows a user to persist changes, and create a sidebar of widgets to drag into your grid, nested grids, etc. It is inspired by Gridster, with the benefit of no external dependency on jQuery.

pros

• Has 5.6k stars on GitHub
• pure TS
• Mobile support
• draggable, resizable items
• drag and drop from the sidebar to insert/delete
• responsive layouts, column-based
• save/restore
• drag between multiple grids
• nested grids, including creation on the fly to any depth

RECOMMENDATION

I recommend we check Muuri for implementation of our UI as the first option

[ianmuchyri]

Meeting discussion 01/18/2024

• We will begin implementation with user-level dashboards. This is where a user can create only their dashboards and they are only able to see their dashboards. Ideally how it should be (will be) is domain-level dashboards, where dashboards are created on the domain level and assigned to users in the domain. For example, a domain admin can create multiple domains, each having separate features based on what a user needs. Then the admin can be able to assign a dashboard to a user. Once the user logs in, they will be able to view their dashboards and the ones they have been assigned. Or we could have public dashboards, where all the dashboards in the domain are visible to all members of the domain with the correct level of access.
• It was suggested we implement the dashboard service within the UI service. We enrich the UI with the code and databases to handle and save dashboards since they are mostly directly correlated.
• Update Magistrala readers to be able to handle populating widgets with either historical or near-real-time data.

[ianmuchyri]

Storing User Dashboards

We will store the user dashboards in JSON format.

We should go with a JSON database such as MongoDB for this work. It stores the data in a JSON-like format (binary JSON), which is the binary encoded version of JSON, and is optimized for performance and space. We can also use PostgreSQL which has made significant advances with JSON and JSONB, transforming its ability to support document databases. Furthermore, it will enable us to combine structured and unstructured data if the need arises.

some references are:

• http://tiborsimko.org/postgresql-mongodb-json-select-speed.html
• https://www.enterprisedb.com/blog/postgres-outperforms-mongodb-and-ushers-new-developer-reality
• https://community.sisense.com/t5/knowledge/postgres-vs-mongodb-for-storing-json-data-which-should-you/ta-p/111

[dborovcanin]

While it looks like a good fit and it is pure JS, the MUURI project hasn't been updated in over 2 years now.

[drasko]

@ianmuchyri I think Draggable should be considered as well, due to the Shopify support:

• https://shopify.github.io/draggable/
• https://github.com/Shopify/draggable

@dborovcanin looks like Muuri is still maintained, based on this: https://github.com/haltu/muuri/discussions/532 and this: https://github.com/haltu/muuri/issues/556

I think we should make a PoC and decide between Muuri and Draggable (although Muuri looks easier to customize).

[ianmuchyri]

@ianmuchyri I think Draggable should be considered as well, due to the Shopify support:

• https://shopify.github.io/draggable/
• https://github.com/Shopify/draggable

@dborovcanin looks like Muuri is still maintained, based on this: haltu/muuri#532 and this: haltu/muuri#556

I think we should make a PoC and decide between Muuri and Draggable (although Muuri looks easier to customize).

I have made a PoC for Muuri the code is here https://github.com/absmach/magistrala-ui/pull/91, I will look at Draggable and see if it will be easy to integrate with our system, if so I will also come up with it's PoC

[ianmuchyri]

CHARTING

Billboard.js

These are the supported charts by billboard.js

For examples of how to implement these charts check out this page https://naver.github.io/billboard.js/demo/

Pros

• MIT license
• It supports most of the charts we need to implement in our dashboard
• Based on D3.js

Apache ECharts

This is a free and powerful charting and visualization library offering easy ways to add intuitive, interactive, and highly customizable charts to our products.

Pros

• Has a wide variety of charts
• has a lot of Github stars 57.7k
• Apache License V2
• Easy to use in javascript

Furthermore, It has a library for Golang called go-echarts where one can carry out data visualization in go. This could be worth looking into.

RECOMMENDATION

I would recommend we use Apache ECharts, and see if we can implement its go-echarts library. It has a broad range of nice charts and is used by a lot of people. Furthermore, the code looks easy to integrate into our UI.

For more insights and rankings of javascript charting libraries check out this page

The downside of the go-echarts package could be this: https://levelup.gitconnected.com/frontend-go-interacting-with-graphics-and-charts-70201c3f03e1#:~:text=The%20comprehensive%20go,controlled%20via%20Go.