plouc
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-mozaik
yo mozaik
npm install
gulp build
node app.jsVisit 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-exampleRegister widgets by adding to dashboard
src/App.jsx:import mozaikExampleComponents from 'mozaik-ext-example'; Mozaik.Registry.addExtension('example', mozaikExampleComponents);Configure size, widget placement and params in
config.js:module.exports = { // ... dashboards: [ // Dashboard 1 { columns: 2, rows: 2, // Dashboard grid layout widgets: [ { type: 'example.widget_name', // WidgetName -> widget_name param1: 'value1', // See widget documentation columns: 1, rows: 1, // Size x: 0, y: 0 // Position } ] } ] }If widget needs to communicate with backend (see widget documentation), register its client api by adding to dashboard
app.js:mozaik.bus.registerApi('example', require('mozaik-ext-example/client') );If client api requires configuration, it is provided in dashboard's
config.js:module.exports = { env: process.env.NODE_ENV || 'production', host: 'localhost', port: process.env.PORT || 5000, // Server-side client configuration. // By convention, the name follow the module api: { 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, yellow
theme: 'night-blue'