Add ChartMonitor draft

examples/todomvc/containers/App.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import TodoApp from './TodoApp';
 import { createStore, combineReducers, compose } from 'redux';
 import { devTools, persistState } from 'redux-devtools';
-import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
+import { DevTools, DebugPanel, LogMonitor, ChartMonitor } from 'redux-devtools/lib/react';
 import { Provider } from 'react-redux';
 import * as reducers from '../reducers';
 
@@ -32,6 +32,11 @@ export default class App extends Component {
                     monitor={LogMonitor}
                     visibleOnLoad={true} />
         </DebugPanel>
+        <DebugPanel top left bottom style={{ fontSize: undefined }}>
+          <DevTools store={store}
+                    monitor={ChartMonitor}
+                    visibleOnLoad={true} />
+        </DebugPanel>
       </div>
     );
   }

package.json

@@ -47,6 +47,7 @@
     "redux": "^2.0.0 || ^3.0.0"
   },
   "dependencies": {
+    "d3-state-visualizer": "^0.4.3",
     "react-json-tree": "^0.1.9",
     "react-mixin": "^1.7.0",
     "react-redux": "^2.0.0",

src/react/ChartMonitor.js

@@ -0,0 +1,131 @@
+import React, { PropTypes, Component } from 'react';
+import * as themes from './themes';
+import visualizer from 'd3-state-visualizer';
+
+const styles = {
+  container: {
+    fontFamily: 'monaco, Consolas, Lucida Console, monospace',
+    position: 'relative',
+    overflowY: 'hidden',
+    width: '100%',
+    height: '100%',
+    minWidth: 300
+  },
+  buttonBar: {
+    textAlign: 'center',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderColor: 'transparent',
+    zIndex: 1,
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  elements: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 38,
+    bottom: 0,
+    overflowX: 'hidden',
+    overflowY: 'auto'
+  }
+};
+
+export default class LogMonitor extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    computedStates: PropTypes.array.isRequired,
+    currentStateIndex: PropTypes.number.isRequired,
+    monitorState: PropTypes.object.isRequired,
+    stagedActions: PropTypes.array.isRequired,
+    skippedActions: PropTypes.object.isRequired,
+    reset: PropTypes.func.isRequired,
+    commit: PropTypes.func.isRequired,
+    rollback: PropTypes.func.isRequired,
+    sweep: PropTypes.func.isRequired,
+    toggleAction: PropTypes.func.isRequired,
+    jumpToState: PropTypes.func.isRequired,
+    setMonitorState: PropTypes.func.isRequired,
+    select: PropTypes.func.isRequired,
+    visibleOnLoad: PropTypes.bool
+  };
+
+  static defaultProps = {
+    select: (state) => state,
+    monitorState: { isVisible: true, isChartVisible: true },
+    theme: 'nicinabox',
+    visibleOnLoad: true
+  };
+
+  componentWillReceiveProps() {
+  }
+
+  componentDidUpdate() {
+  }
+
+  componentWillMount() {
+    let visibleOnLoad = this.props.visibleOnLoad;
+    const { monitorState } = this.props;
+    this.props.setMonitorState({
+      ...monitorState,
+      isVisible: visibleOnLoad
+    });
+  }
+
+  render() {
+    const { monitorState, computedStates } = this.props;
+    const { components: { TreeChart }} = visualizer;
+
+    let theme;
+    if (typeof this.props.theme === 'string') {
+      if (typeof themes[this.props.theme] !== 'undefined') {
+        theme = themes[this.props.theme];
+      } else {
+        console.warn('DevTools theme ' + this.props.theme + ' not found, defaulting to nicinabox');
+        theme = themes.nicinabox;
+      }
+    } else {
+      theme = this.props.theme;
+    }
+    if (!monitorState.isVisible) {
+      return null;
+    }
+
+    const style = {
+      width: '100%',
+      height: '100%',
+      node: {
+        colors: {
+          'default': theme.base0B,
+          collapsed: theme.base0B,
+          parent: theme.base0E
+        },
+        radius: 7
+      },
+      text: {
+        colors: {
+          'default': theme.base0D,
+          hover: theme.base06
+        }
+      }
+    };
+
+    return (
+      <div style={{...styles.container, backgroundColor: theme.base00}}>
+        <TreeChart
+          state={computedStates[computedStates.length - 1].state}
+          id='todosState'
+          aspectRatio={0.5}
+          isSorted={false}
+          heightBetweenNodesCoeff={1}
+          widthBetweenNodesCoeff={1.3}
+          tooltipOptions={{disabled: true}}
+          style={style}
+          />
+      </div>
+    );
+  }
+}

src/react/index.js

@@ -2,5 +2,6 @@ import React from 'react';
 import createDevTools from '../createDevTools';
 
 export const DevTools = createDevTools(React);
+export { default as ChartMonitor } from './ChartMonitor';
 export { default as LogMonitor } from './LogMonitor';
 export { default as DebugPanel } from './DebugPanel';