Mozaik
made with React

Mozaïk是一个仪表板生成器，是一个基于nodejs/react/d3的工具，可以轻松制作漂亮的仪表板。

特点:

• 可伸缩布局
• 支持主题
• 可通过模块扩展
• 网格定位
• 后端通信优化
• 支持旋转(平稳过渡)

安装

安装yo gulp generator-mozaik工具

npm install -g yo gulp generator-mozaik

初始化 mozaik

yo mozaik

安装依赖

npm install

构建

gulp build

执行 node app.js

小部件

安装一个小部件

npm install --save mozaik-ext-example

在src/App.jsx中注册

import mozaikExampleComponents from 'mozaik-ext-example';

Mozaik.Registry.addExtension('example', mozaikExampleComponents);

在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
        }
      ]
    }
  ]
}

如果小部件许可和后端通信，那么需要在app.js中注册客户端API：

mozaik.bus.registerApi('example',

   require('mozaik-ext-example/client')

);

如果客户端API需要配置，可以在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'
    },
  }

  // ...
}

构建

gulp build

可以在 config.js中设置主题

// Options: bordeau, night-blue, light-grey, light-yellow, yellow

theme: 'night-blue'