Mozaïk is a tool based on nodejs / react / reflux / d3 / stylus to easily craft beautiful dashboards. See demo
Features:
- Scalable layout
- Themes support
- Extendable by modules
- Grid positioning
- Optimized backend communication
- Rotation support (with smooth transition)
Getting started
Easy way to get started is using the demo dashboard. Look at the instructions on the dedicated repository https://github.com/plouc/mozaik-demo.
Alternatively, use provided Yeoman generator available to start with new dashboard or widget:
npm install -g yo gulp generator-mozaikyo mozaiknpm installgulp buildnode app.js
Visit the Wiki for further information/doc.
Widgets
Widgets are maintained as separate modules, thus available via mozaik-ext-name in npm.js. To install an extension:
-
Install modules from npmjs:
npm install --save mozaik-ext-example -
Register widgets by adding to dashboard
src/App.jsx
:;MozaikRegistry;Configure size, widget placement and params in
config.js
:moduleexports =// ...dashboards:// Dashboard 1columns: 2 rows: 2 // Dashboard grid layoutwidgets:type: 'example.widget_name' // WidgetName -> widget_nameparam1: 'value1' // See widget documentationcolumns: 1 rows: 1 // Sizex: 0 y: 0 // Position -
If widget needs to communicate with backend (see widget documentation), register its client api by adding to dashboard
app.js
:mozaikbus;If client api requires configuration, it is provided in dashboard's
config.js
:moduleexports =env: processenvNODE_ENV || 'production'host: 'localhost'port: processenvPORT || 5000// Server-side client configuration.// By convention, the name follow the moduleapi:example:foo: 'bar'// ... -
(Re)build the dashboard:
gulp build
Themes
Mozaïk dashboard comes with 5 themes and makes it easy to develop your own theme. Set theme name in config.js
:
// Options: bordeau, night-blue, light-grey, light-yellow, yellowtheme: 'night-blue'