redux-devtools-chart-monitor

Chart monitor for Redux DevTools

Redux DevTools Chart Monitor

A chart monitor for Redux DevTools. It shows a real-time view of the store aka the current state of the app.

:rocket: Now with immutable-js support.

Demo(Source)

Installation

npm install --save-dev redux-devtools-chart-monitor

Usage

You can use ChartMonitoras the only monitor in your app:

containers/DevTools.js
import React from 'react';
import { createDevTools } from 'redux-devtools';
import ChartMonitor from 'redux-devtools-chart-monitor';

export default createDevTools(
  <ChartMonitor />
);

Then you can render <DevTools>to any place inside app or even into a separate popup window.

Alternatively, you can use it together with DockMonitorto make it dockable.
Consult the DockMonitorREADMEfor details of this approach.

Read how to start using Redux DevTools.

Features

Props

ChartMonitor props

You can read the React component propTypesin addition to the details below:

NameDescription
defaultIsVisibleBy default, set to true.
transitionDurationBy default, set to 750, in milliseconds.
heightBetweenNodesCoeffBy default, set to 1.
widthBetweenNodesCoeffBy default, set to 1.3.
isSortedBy default, set to false.
style{
width: '100%', height: '100%', // i.e fullscreen for DockMonitor
text: {
colors: {
'default': theme.base0D,
hover: theme.base06
}
},
node: {
colors: {
'default': theme.base0B,
collapsed: theme.base0B,
parent: theme.base0E
},
radius: 7
}
}
onClickTextFunction called with a reference to the clicked node as first argument when clicking on the text next to a node.
tooltipOptions{
disabled: false,
indentationSize: 2,
style: {
'background-color': theme.base06,
'opacity': '0.7',
'border-radius': '5px',
'padding': '5px'
}
}
More info.

Redux DevTools props

NameDescription
themeEither a string referring to one of the themes provided by redux-devtools-themes(feel free to contribute!) or a custom object of the same format. Optional. By default, set to 'nicinabox'.
invertThemeBoolean value that will invert the colors of the selected theme. Optional. By default, set to false
selectA function that selects the slice of the state for DevTools to show. For example, state => state.thePart.iCare.about. Optional. By default, set to state => state.

License

MIT

HomePage

https://github.com/romseguy/redux-devtools-chart-monitor

Repository

https://github.com/romseguy/redux-devtools-chart-monitor.git


上一篇:d3-state-visualizer
下一篇:redux-grid-core

相关推荐

官方社区

扫码加入 JavaScript 社区