mozaik v1.4.4
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.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
: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'
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago