Back to learn

Introducing Dashbored: Generate static dashboards using Gatsby

by Willoo Koko22 March 2019 3 Min Read

Based on Gatsby, Dashbored works to fill the void for simple, free and open-source dashboards. The goal is not to rival big names like Periscope but provide an alternative for smaller outfits that don’t require the full power of those products (or the accompanying price tags).

And the creation of these dashboards and data visualisations need not be limited to developers. Indeed, our Product Managers and Account Managers should be able to contribute with simple SQL queries (once their contributions have passed our Code Review process, that is). 😉

How and why we are using Gatsby

Our first iteration was using Nextjs, but we soon realised we didn’t need the complexity of a real-time interface. Because, most of the time, a dashboard showing the data from yesterday gives you most of the valuable information you are looking for from a dashboard. The other problem we faced was how to deliver a dashboard built on top of Next.js to everyone, given Next.js has no easy, extensible system for building packages on top of it.

I’d been aware of Gatsby for a but never had the chance to use it, and once we’d realised our dashboard could be static, Gatsby seemed like the perfect choice. However, pretty early on, we faced the same issue as Nextjs: a Gatsby plugin wasn’t enough to provide the kind of functionality we wanted for our project. That was when the Spectrum community of Gatsby sent me this article.

Voila! Gatsby themes were exactly what we were looking for and provided us with the right tool for our project.

This article isn’t about Gatsby themes, which you should definitely check out, but rather how to extend Gatsby to a pre-designed/themed website based on Gatsby, allowing the user to access the power of Gatsby.

Thanks to Gatsby themes, your Dashbored repository will look like this:

Your gatsby-config.js will look like this:

Pretty simple right? Most of the ‘complexity’ will be in your queryfile. This is where you are going to define your pages and the widgets for each of them. A pretty simple example could look like this:

First, your queryfile will export an array of objects, and each object will represent a page in your dashboard. Each page has multiple properties (title, queries, etc.).

Presently, you can create 5 kinds of widgets, number, pie, bar, line and scatter charts, all based on Nivo, and Dashbored lets you pass configuration to your Nivo widgets.

If you’d like to learn more about using Dashbored, check out the Getting Started Guide or the Demo.

Copied to clipboard!
Get more fresh ideas like this in your inbox
Get more fresh ideas like this in your inbox
Pages loaded on average in 1.0s, emitting
~0.46g of CO2
Let's shake things up
For clients
CJ Daniel-Nield
For careers
Sophie Aspden
People Lead
Everything else
Say hello
Drop us a line