mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-12-04 23:43:51 +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
8.7 KiB
8.7 KiB
Redux DevTools Chart Monitor
A 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.
🚀 Now with immutable-js support.
Installation
yarn add @redux-devtools/chart-monitor
Usage
You can use ChartMonitor
as the only monitor in your app:
containers/DevTools.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
to make it dockable.
Consult the DockMonitor
README for details of this approach.
Read how to start using Redux DevTools.
Features
Props
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 |
{ width: '100%', height: '100%', // i.e fullscreen for DockMonitor } |
textStyleOptions |
{ colors: { default: theme.base0D ,hover: theme.base06 ,}, } |
nodeStyleOptions |
{ 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, styles: { 'background-color': theme.base06 ,'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 . |
License
MIT