1.4.4 • Published 9 years ago

mozaik v1.4.4

Weekly downloads
95
License
-
Repository
github
Last release
9 years ago

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'
2.0.0-alpha.13

9 years ago

2.0.0-alpha.12

9 years ago

2.0.0-alpha.11

9 years ago

2.0.0-alpha.10

9 years ago

2.0.0-alpha.9

9 years ago

2.0.0-alpha.8

9 years ago

2.0.0-alpha.7

9 years ago

2.0.0-alpha.6

9 years ago

2.0.0-alpha.5

9 years ago

2.0.0-alpha.4

9 years ago

2.0.0-alpha.3

9 years ago

2.0.0-alpha.2

9 years ago

2.0.0-alpha.1

9 years ago

2.0.0-alpha.0

9 years ago

1.4.4

9 years ago

1.4.3

9 years ago

1.4.2

9 years ago

1.4.1

9 years ago

1.4.0

9 years ago

1.3.0

9 years ago

1.2.1

9 years ago

1.2.0

9 years ago

1.1.0

9 years ago

1.1.0-rc.1

9 years ago

1.1.0-alpha.1

9 years ago

1.1.0-alpha1

9 years ago

1.0.13

9 years ago

1.0.12

9 years ago

1.0.11

9 years ago

1.0.10

9 years ago

1.0.9

10 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.13-beta

10 years ago

0.0.12-beta

10 years ago

0.0.11-beta

10 years ago

0.0.10-beta

10 years ago

0.0.9-beta

10 years ago

0.0.8-beta

10 years ago

0.0.7-beta

10 years ago

0.0.6-beta

10 years ago

0.0.5-beta

10 years ago

0.0.4-beta

10 years ago

0.0.3-beta

10 years ago

0.0.2-beta

10 years ago

0.0.1-beta

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago