Mozaik
made with React

Mozaik

这是一个仪表板生成器。

相关问答
暂无相关问题
查看全部
简介及使用教程

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'

作者

Raphaël Benitte

@benitteraphael

相关项目

这是一个用于使用React构建可访问的富Web应用程序的工具包。
这是一个轻松维护的开源文档网站框架。
这是一个免费的基于Material Design的管理仪表板。
这是一个具有GraphQL API的产品信息管理(PIM)系统。
这是一个React代码库生成器。
这是一个基于Reactstrap的免费仪表板。