https://github.com/romseguy/redux-devtools-chart-monitor
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor
https://github.com/romseguy/redux-devtools-chart-monitor
Last synced: about 1 month ago
JSON representation
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor
- Host: GitHub
- URL: https://github.com/romseguy/redux-devtools-chart-monitor
- Owner: reduxjs
- License: mit
- Archived: true
- Created: 2015-09-21T19:10:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-08-04T23:13:22.000Z (over 4 years ago)
- Last Synced: 2025-03-26T01:35:42.172Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 247 KB
- Stars: 291
- Watchers: 14
- Forks: 22
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-components-all - redux-devtools-chart-monitor - A chart monitor for Redux DevTools. (Uncategorized / Uncategorized)
- awesome-react-components - redux-devtools-chart-monitor - A chart monitor for Redux DevTools. (Dev Tools / Redux)
- awesome-react-components - redux-devtools-chart-monitor - A chart monitor for Redux DevTools. (Dev Tools / Redux)
- awesome-redux - redux-devtools-chart-monitor - Chart monitor for Redux DevTools. (Dev tools / Inspection tools / Side Effects)
- awesome-list - redux-devtools-chart-monitor - A chart monitor for Redux DevTools. (Dev Tools / Redux)
- awesome-react-components - redux-devtools-chart-monitor - A chart monitor for Redux DevTools. (Dev Tools / Redux)
- awesome-react-components - redux-devtools-chart-monitor - A chart monitor for Redux DevTools. (Dev Tools / Redux)
- awesome-react-components - redux-devtools-chart-monitor - A chart monitor for Redux DevTools. (Dev Tools / Redux)
- fucking-awesome-react-components - redux-devtools-chart-monitor - A chart monitor for Redux DevTools. (Dev Tools / Redux)
README
Redux DevTools Chart Monitor
=========================
**This package was merged into [`redux-devtools`](https://github.com/reduxjs/redux-devtools) monorepo. Please refer to that repository for the latest updates, issues and pull requests.**
A chart monitor for [Redux DevTools](https://github.com/gaearon/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](http://romseguy.github.io/redux-store-visualizer/) [(Source)](https://github.com/romseguy/redux-store-visualizer)
### Installation
```
npm install --save-dev redux-devtools-chart-monitor
```
### Usage
You can use `ChartMonitor` as the only monitor in your app:
##### `containers/DevTools.js`
```js
import React from 'react';
import { createDevTools } from 'redux-devtools';
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`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable.
Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach.
[Read how to start using Redux DevTools.](https://github.com/gaearon/redux-devtools)
### Features
### Props
#### ChartMonitor props
You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools-chart-monitor/blob/master/src/Chart.js#L11) 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`.
`style` | {
width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor)
text: {
colors: {
'default': `theme.base0D`,
hover: `theme.base06`
}
},
node: {
colors: {
'default': `theme.base0B`,
collapsed: `theme.base0B`,
parent: `theme.base0E`
},
radius: 7
}
}
`onClickText` | Function 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](https://github.com/romseguy/d3tooltip#api).
#### Redux DevTools props
Name | Description
------------- | -------------
`theme` | Either a string referring to one of the themes provided by [redux-devtools-themes](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js).
`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`.
### License
MIT