description

dashboard-utils is a collection of useful modules for building interactive dashboards. It is built on top of the original adt library that Sony Mobile was so generous to open source.

installing

browser

Just include the required modules (and their dependencies):

<script src='module_name.min.js'></script>

node

npm install dashboard-utils

requirements

Some of the modules rely on external libraries. Here is a complete list of all dependencies:

d3@4: SVG manipulation library. [ website ]
topojson: Module for reading TopoJSON files. [ github ]

For module specific dependencies, see the documentation.

catalogue

Here is a list of some example code and features to help you start off with the library.

docs

Below you find the contents of the API documentation for the modules. With the exception of the widgets, each module is a standalone script that can be loaded and used as it is right out of the box. For the widgets, the module du.widget needs to be loaded first.

data

A collection of useful data structures for representing and manipulating various data sets.
documentation source

math

Various mathematical structures and methods.

math.la

Linear algebra related classes and methods
documentation source

rest

Some convenience methods for accessing REST APIs for different file formats.
documentation source

signals

A module for managing event subscriptions and event emitters.
documentation source

system

Namespace for system related operations such as logging and version management.

system.log

An enhanced logger for development and monitoring during production.
documentation source

system.version

Module for automatic version checking and version updates.
documentation source

user

Collection of methods for handling different user inputs
documentation sourceThe base class for all widgets. Methods implemented for this class are available for all dashboard components.
documentation source

widgets

The namespace of all available dashboard widgets. Widgets can be charts showing data, control elements to interact with the data or static labels or hints.

widgets.areachart

An interactive area chart for volume like data.
example documentation source

widgets.barchart

An interactive bar chart for categorical data.
example documentation source

widgets.boxplot

An interactive box plot for multiple distributions.
example documentation source

widgets.bubblechart

An interactive bubble chart for small multidimensional data.
example documentation source

widgets.checkbox

Clean checkboxes.
example documentation source

widgets.chordchart

An interactive chord chart to visualize flow data.
example documentation source

widgets.grid

A flexible grid that can contain and manage multiple other widgets.
example documentation source

widgets.hint

Small text bubbles for providing aid to the user about the dashboard elements.
example documentation source

widgets.histogram

An interactive histogram for simple distributions.
example documentation source

widgets.infobox

An information window that can be used to provide more detailed description (help menu, about) for the dashboard
example documentation source

widgets.label

A static piece of text.
example documentation source

widgets.legend

A block of labels with colored squares to interact with the different quantities shown on the dashboard.
example documentation source

widgets.lineargauge

Gauge bar to show meaning of a value.
example documentation source

widgets.linechart

An interactive line chart for trend type data.
example documentation source

widgets.map

An interactive world map with convenience methods to show static or dynamic data.
example documentation source

widgets.multibarchart

Bar chart with multiple plots.
example documentation source

widgets.picture

A static image.
example documentation source

widgets.piechart

An interactive pie chart for visualizing low dimensional categorical data.
example documentation source

widgets.progressbar

Widget showing the status of a progress.
example documentation source

widgets.scatterplot

An interactive scatter plot for large correlated data sets.
example documentation source

widgets.semicirculargauge

Semi-circular shaped gauge bar to show meaning of a value.
example documentation source

widgets.slider

A slider control element to interact with the data in one dimension.
example documentation source

widgets.status

A static label with a value that can be dynamically updated.
example documentation source

widgets.trackpad

A two dimensional slider.
example documentation source

widgets.violinplot

An interactive violin plot for detailed comparison of distributions.
example documentation source