Dishing the DIRK - your open source dashboard

Your new open source dashboard. We’re open sourcing a library for you to build customisable dashboards, called DIRK. We built DIRK for the Enterprise dashboard in SamKnows One. DIRK provides an intuitive drag and drop interface, using Vue.js and the HTML5 Drag and Drop API. Let us know what you think!

We’re happy to announce that we’re open sourcing the library that powers the Enterprise dashboard in SamKnows One. We have named him DIRK, I’m not sure why. Maybe it’s an acronym, we love those.

DIRK helps you create customisable dashboards from simple configuration objects and Vue components. You can design the layout yourself, and then enable users to customise their own dashboards with an intuitive drag and drop interface. Unlike some other dashboards out there, DIRK fits the data into a set space, making it perfect for viewing full screen, on a projector, or on any other application where you can see all your data at a glance without having to scroll down.

About DIRK

DIRK uses two main technologies to power the dashboards: Vue.js and the HTML5 Drag and Drop API. The library has no other dependencies so is very small — under 12KB minified and gzipped — and supports all modern desktop browsers down to IE11.

We repeat — DIRK has zero dependencies!

Watch a demo of DIRK here.

About SamKnows One

SamKnows One is our cloud-based platform and with over 1,000,000 homes relying on us — it crunches a lot of data.

Before the days of SamKnows One, we used a completely different web-based dashboard. End users occasionally asked us to provide them with a personalised splash screen — just a few graphs that would immediately appear when loading the site, before going to the analytics page with all the charting tools. Although great in theory, we had to set up the splash screens ourselves which was a bit clunky and there was definite room for improvement.

When writing Samknows One, we wanted to make it possible for users to create their own splash screens that they could change whenever they wanted. One of our keen-bean developers read Information Dashboard Design: The Effective Visual Communication of Data (catchy?) and inspired by the drag and drop layout system for iTerm2, came up with DIRK.

Why open the source…

We believe in open source. All our tech teams use open source, including the framework that powers our website, Vue.js. We also give our developers time to work on their personal open source projects, and we think it’s important to open source some of our own work sometimes (remember transform-when?).

We’ve been wanting to share DIRK with you since we wrote it a year ago but we’ve also been really busy working on SamKnows One and didn’t want to give away any spoilers… Keep an eye out for future blog posts where we’ll tell you more about new features that can help you measure internet performance.

How to use it

DIRK is available on GitHub at samknows/dirk. We’ve released it under the MIT license, so you’re free to pretty much do whatever you like with it.

DIRK is a Vue component, so you can install it from npm (or yarn, or whatever you prefer) and then import it into your app like any other component.

We hope you find it helpful, and please get in touch to let us know what you think.