Explore dashboarding frontend capabilities with Analytics Vision POC

Goals

• Have a base Dashboard with https://gridstackjs.com/
• Have a switch between display + edit mode
• Show couple of fake data points + Charts by echarts on Dashboard

Demo

https://www.loom.com/share/814f3cf52d8d4e63bd56605da84a22a3

• Layout for multiple dashboards.
• Each dashboard is composed of charts (with placeholder data), which are shown in a grid using gridstack.js
• There is a toggable "Edit" mode. Which allows moving and resizing charts.
• ECharts handles resizing pretty well. With sane constraints, we could provide a flexible dashboard builder. Real-time charts are also feasible.
• There was a disabled "Add chart" button meant for going into a new page with the form for setting up the chart.

Conclusions/Feedback

• The goals were fulfilled. A similar experience is demoed at cube's React Dashboard.
• With a supporting backend data layer, we could avoid data transformations in the frontend and improve performance.
• Dashboards and charts are data-driven, so it's possible to define them using YAML files (related conversation in Slack).