Mozaïk is a tool based on nodejs / react / reflux / d3 / stylus to easily craft beautiful dashboards. See demo
Features:
- Scalable layout
- Themes support
- Extendable by modules
- Grid positioning
- Optimized backend communication
- Rotation support (with smooth transition)
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 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
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'
mozaik's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
Jobs
Jooble