/mozaik

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

Primary LanguageJavaScriptMIT LicenseMIT

MOZAÏK

License Travis CI NPM version Quality Dependencies

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

preview

Features:

  • Scalable layout
  • Themes support
  • Extendable by modules
  • Grid positioning
  • Optimized backend communication
  • Rotation support (with smooth transition)

Getting started

Join the chat at https://gitter.im/plouc/mozaik

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'