added immutable-js support via toMutable function

README.md

@@ -1,9 +1,11 @@
 Redux DevTools Chart Monitor
 =========================
 
-A chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools).  
+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)
 
 ![Chart Monitor](https://camo.githubusercontent.com/19aebaeba929e97f97225115c49dc994299cb76e/687474703a2f2f692e696d6775722e636f6d2f4d53677655366c2e676966)
@@ -32,7 +34,7 @@ export default createDevTools(
 
 Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
 
-Alternative, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable.  
+Alternative, 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)
@@ -102,7 +104,9 @@ Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-doc
 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`.
+`hasImmutables`       | Boolean value that will walk state tree and convert immutable-js objects to normal objects so that they can be displayed. Optional. By default, set to `false`
 
 ### License
 

package.json

@@ -21,6 +21,9 @@
     "chart"
   ],
   "author": "romseguy",
+  "contributors": [
+    "Cole Chamberlain <cole.chamberlain@gmail.com> (https://github.com/cchamberlain)"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/romseguy/redux-devtools-chart-monitor/issues"
@@ -49,6 +52,7 @@
     "d3-state-visualizer": "^1.0.2",
     "deepmerge": "^0.2.10",
     "react-pure-render": "^1.0.2",
-    "redux-devtools-themes": "^1.0.0"
+    "redux-devtools-themes": "^1.0.0",
+    "tomutable": "^0.1.3"
   }
 }

src/Chart.js

@@ -60,10 +60,6 @@ class Chart extends Component {
     })
   };
 
-  constructor(props) {
-    super(props);
-  }
-
   componentDidMount() {
     const { select, state } = this.props;
     this.renderChart = tree(findDOMNode(this), this.props);

src/ChartMonitor.js

@@ -3,6 +3,7 @@ import shouldPureComponentUpdate from 'react-pure-render/function';
 import * as themes from 'redux-devtools-themes';
 import { ActionCreators } from 'redux-devtools';
 import deepmerge from 'deepmerge';
+import toMutable from 'tomutable';
 
 import reducer from './reducers';
 import Chart from './Chart';
@@ -19,6 +20,20 @@ const styles = {
   }
 };
 
+function invertColors(theme) {
+  return {
+    ...theme,
+    base00: theme.base07,
+    base01: theme.base06,
+    base02: theme.base05,
+    base03: theme.base04,
+    base04: theme.base03,
+    base05: theme.base02,
+    base06: theme.base01,
+    base07: theme.base00
+  };
+}
+
 class ChartMonitor extends Component {
   static update = reducer;
 
@@ -37,13 +52,17 @@ class ChartMonitor extends Component {
     theme: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.string
-    ])
+    ]),
+    invertTheme: PropTypes.bool,
+    hasImmutables: PropTypes.bool
   };
 
   static defaultProps = {
     select: (state) => state,
     theme: 'nicinabox',
-    preserveScrollTop: true
+    preserveScrollTop: true,
+    invertTheme: false,
+    hasImmutables: false
   };
 
   shouldComponentUpdate = shouldPureComponentUpdate;
@@ -78,17 +97,17 @@ class ChartMonitor extends Component {
   }
 
   getTheme() {
-    let { theme } = this.props;
+    let { theme, invertTheme } = this.props;
     if (typeof theme !== 'string') {
-      return theme;
+      return invertTheme ? invertColors(theme) : theme;
     }
 
     if (typeof themes[theme] !== 'undefined') {
-      return themes[theme];
+      return invertTheme ? invertColors(themes[theme]) : themes[theme];
     }
 
     console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox');
-    return themes.nicinabox;
+    return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox;
   }
 
   getChartStyle() {
@@ -115,7 +134,7 @@ class ChartMonitor extends Component {
   }
 
   getChartOptions(props = this.props) {
-    const { computedStates } = props;
+    const { computedStates, hasImmutables } = props;
 
     const tooltipOptions = {
       disabled: false,
@@ -129,8 +148,9 @@ class ChartMonitor extends Component {
       }
     };
 
+    let defaultState = computedStates[computedStates.length - 1].state;
     const defaultOptions = {
-      state: computedStates[computedStates.length - 1].state,
+      state: hasImmutables ? toMutable(defaultState) : defaultState,
       isSorted: false,
       heightBetweenNodesCoeff: 1,
       widthBetweenNodesCoeff: 1.3,