dashblocks

Dashblocks builds interactive dashboards from a JSON or JavaScript declaration of the structure. It renders through d3, Chart.js, Dygraphs, and Plotly.js, and ships defaults for colors and themes.

The idea is that a dashboard is data. You declare its structure as JSON or a JavaScript object, and Dashblocks turns that into a rendered, interactive dashboard. Rendering happens through established charting libraries, with d3, Chart.js, Dygraphs, and Plotly.js named in the README. Because the definition is data, the dashboard can even be regenerated from the data it shows. The project description frames the whole thing as enabling analytics in your apps, and the README sums the approach up as sophisticated interactive dashboards from a simple declaration.

Several things come out of the box. Chart types get reasonable defaults, including colors, and both dark and light modes work without extra configuration. Interactivity is handled with event handling at the dashboard level, and data can be updated dynamically, for example in response to user interaction. The README frames these defaults as cutting setup work before a dashboard is even customized.

Usage is described as creating a dashboard in a Vue app as a Vue component. In that component you define the layout by adding widgets and saying how many columns and rows each takes, with Dashblocks providing a 16-column CSS grid. Widgets accept extra options to tweak appearance, and each widget gets its data set on the dashboard. A companion admin template, built on Quasar, Vuex, and Vue.js, combines the dashboard library with an admin panel structure. That way a dashboard and the screens around it can come from the same setup.

• Source 1 · Project repository
• Source 2 · README