mozaik

    1.4.4 • Public • Published

    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'

    Install

    npm i mozaik

    DownloadsWeekly Downloads

    14

    Version

    1.4.4

    License

    none

    Last publish

    Collaborators

    • plouc