Chart monitor for Redux DevTools
npm install @redux-devtools/chart-monitorA chart monitor for Redux DevTools.
Created by @romseguy and merged from reduxjs/redux-devtools-chart-monitor.
It shows a real-time view of the store aka the current state of the app.
:rocket: Now with immutable-js support.
```
yarn add @redux-devtools/chart-monitor
You can use ChartMonitor as the only monitor in your app:
##### containers/DevTools.js
`js
import React from 'react';
import { createDevTools } from '@redux-devtools/core';
import { ChartMonitor } from '@redux-devtools/chart-monitor';
export default createDevTools(
`
Then you can render to any place inside app or even into a separate popup window.
Alternatively, you can use it together with DockMonitor to make it dockable.
Consult the DockMonitor README for details of this approach.
Read how to start using Redux DevTools.
#### ChartMonitor props
You can read the React component propTypes in addition to the details below:
| Name | Description |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| defaultIsVisible | By default, set to true. |transitionDuration
| | By default, set to 750, in milliseconds. |heightBetweenNodesCoeff
| | By default, set to 1. |widthBetweenNodesCoeff
| | By default, set to 1.3. |isSorted
| | By default, set to false. |chartStyles
| | {DockMonitor
width: '100%', height: '100%', // i.e fullscreen for textStyleOptions
} |
| | {theme.base0D
colors: {
default: ,theme.base06
hover: ,nodeStyleOptions
},
} |
| | {theme.base0B
colors: {
default: ,theme.base0B
collapsed: ,theme.base0E
parent: ,onClickText
},
radius: 7,
} |
| | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |tooltipOptions
| | {theme.base06
disabled: false,
indentationSize: 2,
styles: {
'background-color': ,
'opacity': '0.7',
'border-radius': '5px',
'padding': '5px',
},
}
More info. |
#### Redux DevTools props
| Name | Description |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| theme | Either 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'. |invertTheme
| | Boolean value that will invert the colors of the selected theme. Optional. By default, set to false |select
| | A 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`. |
MIT