Love this dev-tool, IMHO it is the most useful one yet.

Only problem for me is that I'm converting my state tree to use immutable-js and as soon as it hits a node in state tree that is immutable, the chart will not show the contents of the node or any of its children, instead it just says "error": "not-serializable". It also throws a bunch of warnings in the console about using size instead of length property on immutable objects is deprecated and will throw in future releases of immutable-js. I wrote a simple recursive function to walk the state tree, check if any of the objects are immutable, and if so convert them to plain objects. If it finds no immutables in state it will simply return equivalent simple state.

The toMutable function can be found here

What I see with the vanilla library when I try to inspect an immutable object:

What I see with the toMutable support added:

Given immutable-js is very commonly used, I'm submitting this as a pull request. If you are not looking to support immutable, you may disregard and I'll keep the alternate version published at https://www.npmjs.com/package/redux-devtools-chart-monitor-immutable

Again, thanks for the awesome work!

I just followed the instructions, pretty straight forward, but I'm getting these error:

TypeError: Cannot read property 'object' of undefined
./node_modules/redux-devtools-chart-monitor/lib/Chart.js

  62 | }(_react.Component);
  63 | 
  64 | Chart.propTypes = {
> 65 |   state: _react.PropTypes.object,
  66 |   rootKeyName: _react.PropTypes.string,
  67 |   pushMethod: _react.PropTypes.oneOf(['push', 'unshift']),
  68 |   tree: _react.PropTypes.shape({

I'm getting these error even before use the component in my Monitor component, I'm only importing it import ChartMonitor from 'redux-devtools-chart-monitor'

I am using the version 1.6.1

Hi Romain,

I added redux-devtools-chart-monitor to a new project recently and noticed some rendering issues, which I did not see before. Here's the summary:

(VM6084:208 Uncaught TypeError: Cannot read property '__oldData__' of undefined appears on first render and each time I click on a node)

To make sure it's not something about my project, I replicated the issue in your redux-store-visualizer demo after updating all deps (see https://github.com/romseguy/redux-store-visualizer/pull/4). It's still unclear to me how to fix it, so I'm submitting an issue instead of a PR. Missing edges between the nodes might give a clue.

I used DockMonitor to make it dockable.

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey='ctrl-q'
               changeMonitorKey='ctrl-m'
               defaultIsVisible={ false }>
    <LogMonitor />
    <SliderMonitor />
    <DiffMonitor />
    <ChartMonitor />
  </DockMonitor>
);

My DockMonitor version is 1.1.1, ChartMonitor version is 1.4.1. So how to fix it?

Small house keeping PR to update CHANGELOG, README, and package.json urls to reduxjs/. GitHub does a good job and auto-redirects, but this breaks some automated tooling I use that doesn't follow redirects 🤷‍♂️.

I did a find replace on all instances of github.com/romseguy/redux-devtools-chart-monitor in the codebase.

Please let me know if I missed anything or need to contribute a CHANGELOG entry.

Fixes the warning about accessing PropTypes via the main React package, which is deprecated. Related to https://github.com/gaearon/redux-devtools/issues/359

This little change takes currentStateIndex into account, so the state on the monitor will correspond to store.getState(), which can be different to the last state in the history.

Related to https://github.com/zalmoxisus/redux-devtools-extension/issues/224.

Some complex data structures can't be serialized to be pretty-printed in the tooltip, replace json-pretty with our own function depending on answer over here https://github.com/michielbdejong/json-pretty/issues/3

I'm hooking into the TreeChart's onClickText prop and using JSONTree to render my object to the right....(using your ChartMonitor in a seperate window).

Might be interesting to incorporate something like this as it sort of becomes a standalone dev tool (I've been using this on it's own all day and not even rendering the normal LogMonitor). Though hooking into the LogMonitor would probably be even cooler : )

Anyhow, thanks for this!

Below is the same description I left for the pull request to d3-state-visualizer that goes hand in hand with this one .... https://github.com/reduxjs/d3-state-visualizer/pull/17

This is in tandem with a PR I will be making for redux-devtools-chart-monitor. In redux-devtools-chart-monitor I added an option 'stateDiff', by default off, which will calculate state differences between the current and the last active state (even if jumping around in timeline). I use two packages for this, Immutable for the quick state cloning and deep-diff for the object comparison.

This is provided to d3-state-visualizer, where there are options to customize the color of the node and text for mutated properties. By default it is red, but users will have to provide the stateDiff flag to activate it. I didn't do too much performance testing on it, but I doubt it has much of an impact compared to the expensive graphing animations. I also updated the README for both repositories to reflect the changes. I have found that highlighting property changes between states in this manner along with assigning low opacity to empty values makes the chart much more useful and informative. Below is an animated GIF to demonstrate this.

The issue is likely to be upstream (https://github.com/romseguy/d3-state-visualizer/issues/12), but I still decided to report it here as well until the dependency is upgraded. For those who're wondering if this is what they see too, here is a quick gif of the bug:

I'm using the , and this is my code.

  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey='ctrl-q'
               changeMonitorKey='ctrl-m'
               defaultIsVisible={ false }>
    <LogMonitor />
    <SliderMonitor />
    <DiffMonitor />
    <ChartMonitor />
  </DockMonitor>

It will work when defaultIsVisible is true

This is somewhat related to #5 and #10. When a node contains too many children, clicking on it to expand or collapse causes a substantial shift of a tree. You have zoom out and search for the node you've just been looking at, which takes quite a lot of time. A solution could be in calculating x and y of a just-clicked node in two modes (when its children are hidden and visible) and then adjusting the global coordinate system accordingly.

Is there a way to set an initial "expandedNodes" prop to false so that it won't try and render the entire state tree? We sometimes load large json structures that we don't care to look at yet the monitor will try and render, causing it to slow down to a crawl and making the tool unusable :(