Closed ianmuchyri closed 5 months ago
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
For creating charts we can use plotly.js.
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?
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:
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
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/
This is a free and powerful charting and visualization library offering easy ways to add intuitive, interactive, and highly customizable charts to our products.
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.
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
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:
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.
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
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.
I recommend we check Muuri for implementation of our UI as the first option
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:
While it looks like a good fit and it is pure JS, the MUURI project hasn't been updated in over 2 years now.
@ianmuchyri I think Draggable should be considered as well, due to the Shopify support:
@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 I think Draggable should be considered as well, due to the Shopify support:
@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
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.
Is there an existing feature request for this?
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.
Anything else?
No response