mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-30 13:33:52 +03:00
b323f77d31
* Update packages * Fix after update * Update some types * Remove attr * Finish d3tooltip * Update style option * Updates * Zoom * Update * Update * Update * Fix * Update * Update * Update * Update * Update * Fixes * Update id type * Fix enter + update selections * Use this * Fix stringifying * Remove InputOptions * Use data.value * Updates * Remove UMD builds * Fix exit * No need to re-assign * Simplify d3tooltip API * Update redux-devtools-chart-monitor * Update redux-devtools-app * Update * Update * Remove @types/prop-types * Update prop types * Update d3tooltip docs * Update d3-state-visualizer docs * Update chart-monitor docs * Create weak-kings-brake.md * Create spicy-olives-compete.md * Create friendly-coats-trade.md * Create slimy-elephants-flash.md * Fix empty arrays
74 lines
8.7 KiB
Markdown
74 lines
8.7 KiB
Markdown
# Redux DevTools Chart Monitor
|
|
|
|
A chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools).
|
|
|
|
Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/redux-devtools-chart-monitor`](https://github.com/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.
|
|
|
|
[Demo](http://romseguy.github.io/redux-store-visualizer/) [(Source)](https://github.com/romseguy/redux-store-visualizer)
|
|
|
|
|
|
|
|
### Installation
|
|
|
|
```
|
|
yarn add @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/core';
|
|
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 [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
|
|
Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.
|
|
|
|
[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
|
|
|
|
### Features
|
|
|
|
### Props
|
|
|
|
#### ChartMonitor props
|
|
|
|
You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/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`. |
|
|
| `chartStyles` | {<br> width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br>} |
|
|
| `textStyleOptions` | {<br> colors: {<br> default: `theme.base0D`,<br> hover: `theme.base06`,<br> },<br>} |
|
|
| `nodeStyleOptions` | {<br> colors: {<br> default: `theme.base0B`,<br> collapsed: `theme.base0B`,<br> parent: `theme.base0E`,<br> },<br> radius: 7,<br>} |
|
|
| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |
|
|
| `tooltipOptions` | {<br> disabled: false,<br> indentationSize: 2,<br> styles: {<br> 'background-color': `theme.base06`,<br> 'opacity': '0.7',<br> 'border-radius': '5px',<br> 'padding': '5px',<br> },<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/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
|