Introducing Dashbored — Generate Static Dashboards Using Gatsby
Based on Gatsby, Dashbored aims to fill the void for simple, free and open source dashboards.
The goal is not to rival with big names like Periscope but to live alongside them by providing an alternative for smaller companies or agencies that don’t need the full power of those products and definitely not the price of them.
The creation of these dashboards and data visualizations shouldn’t need to be limited to developers, we’d like our Product Manager and Account Managers to be able to contribute by entering simple SQL queries. Of course, not before their contributions have passed our Code Review process 😉.
How and why we are using Gatsby
Our first iteration was using Nextjs, but pretty soon we realised we didn’t need that much complexity and a static dashboard will be a perfect fit for our needs.
Most people imagine a dashboard as a real-time interface, but the truth is, most of the time you don’t really need the real-time component. A dashboard showing the data from yesterday is already giving you most of the valuable information you are looking for from a dashboard.
The other problem we faced was how to deliver this dashboard to everyone if it’s built on top of Next.js. Next.js has no easy, extensible system for building packages on top of it.
And then Gatsby, I’d heard of Gatsby for a while now but never had the chance to use it. Once we’d realised our dashboard could be static, Gatsby seemed like a perfect choice. Pretty early, we were faced we the same issue as Nextjs, a Gatsby plugin wasn’t enough to provide the kind of functionality we wanted for our project, but 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 (you should definitely take a look) but the general idea is to provide a way to extend Gatsby with a pre-designed/themed website based on Gatsby while allowing the user to use all the power of Gatsby.
In practice your Dashbored repository will look like this thanks to Gatsby themes:
Your gatsby-config.js will look like this:
Pretty simple right?
The queryfile
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, each object will represent a page in your dashboard. Each page has multiple properties (title, queries, …).
At the moment, you can create 5 kinds of widgets: number, pie, bar, line and scatter charts. They are all based on Nivo, and Dashbored allows you to 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.
What’s next?
We’ll be starting to use Dashbored in a number of our client projects and providing them with useful information in a minimalist dashboard.
We’ll be improving Dashbored over the coming months by adding more Widgets and perhaps creating a CLI to make adding it to your project even easier! Contributions and feature requests welcome via GitHub Issues 😁.
