BonfaceKilz/mozaik

Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards.

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'