An easy-to-use, configurable visualization dashboard
npm install
.npm run start
to start developing.npm run build --production
to save production build in /build
.Implmented in
src/Layout.js
We use STRML/react-grid-layout for the layout functionality. The state of layout is stored in redux store.
Implemented in
src/route.js
We use react-router
to manage browser routing state. Each mode corresponds to one route.
Implemented in
src/connector/*
A connector should expose two function: connectorEnhancer
and connectorReducer
.
connectorReducer
The reducer has the interface (state, action) -> state
that defines the shape of the data store as well as the connection status. It should (at least) have the following structure:
{
schema: {
[key]: String, // The type of the "key" data in String format.
},
status: {
requesting: boolean,
requested: boolean,
timestamps: number,
},
data: {
[key]: {
values: [],
}
},
}
connectorEnhancer
It should be a function receiving a config object and returning the real enhancer. Inside the enhancer, backend connection is established, and an attribute is added to the main store. The content of the attribute is controlled/processed by connectorReducer
.
Implemented in
src/store/checkpointEnhancer.js
We implement a redux enhancer that watch for changes on an attribute of the store. The enhancer also adds an attribute (default to checkpoint
) to the store and expose two actions addCheckpoint
and jumpCheckpoint
to manipute the checkpoint state.
The creation of checkpointEnhancer
can optionally accept a config object with the folloing attributes:
Implemented in
src/blocks/Chart.js
Implemented in
src/blocks/components/
There can be many kinds of block elements in the layout. Each block object has an attribute type
to specify the type of the block. All block component types are defined in src/blocks/components/index.jsx
and used in src/blocks/index.jsx
.
Implemented in
src/store/store.js
We use elgerlambert/redux-localstorage to synchronize LocalStorage state witl current block contents. (This feature is only enabled in production build)
Implemented in
src/test-backend
This is used to generate fake data, so one can easily debug the dashboard. Currently only Firebase backend is supported.
Assets can be found in
src/icons
Downloaded from iconmoon.io. We modify the content of style.css
for styles when icons are hovered and disable styles.