redux-devtools/packages/redux-devtools-chart-monitor
Nathan Bierema c379a62081
Imprrove ability to tree-shake libraries (#1050)
* Revert "Remove React from page bundle (#1031)"

This reverts commit fdfbc1942e.

* redux-devtools

* d3-state-visualizer

* d3tooltip

* map2tree

* react-base16-styling

* react-dock and react-json-tree

* redux-devtools-app

* redux-devtools-chart-monitor

* redux-devtools-dock-monitor

* redux-devtools-extension

* redux-devtools-inspector-monitor-test-tab

* redux-devtools-inspector-monitor-trace-tab

* redux-devtools-instrument

* redux-devtools-log-monitor and redux-devtools-remote

* redux-devtools-rtk-query-monitor

* redux-devtools-serialize

* redux-devtools-slider-monitor

* redux-devtools-ui

* redux-devtools-utils

* Fix build

* Fix storybook build

Storybook loads the babel.config.json but not .babelrc.json. We actually don't want to load the babel config because it uses @babel/runtime which can't be resolved with Yarn PnP.
2022-01-24 02:11:46 +00:00
..
src Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
.eslintignore Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
.eslintrc.js Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
babel.config.esm.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
babel.config.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
CHANGELOG.md chore(*): run prettier 2021-03-06 10:51:16 -05:00
LICENSE.md chore(*): add back license files (#578) 2020-08-09 01:11:43 -04:00
package.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
README.md Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
tsconfig.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00

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.

Demo (Source)

Chart Monitor

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.
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
  }
}
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.

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